Cours et tutoriaux Photoshop, Flash, Fireworks, Paintshop et sur le développement de sites Web XHTML, PHP, MySQL...

Tutorial Flash : Horloge digitale

  • Introductions

  • Informations

  • Résultat

Apercu du tutorial horloge-digitale

Vous souhaitez afficher l'heure sur votre site?
Ce tutorial aborde une méthode qui permet d'afficher une horloge digital en Flash.


Avatar de netger

Auteur : WebmasterNetger

Difficulté : Facile
Création : 27/05/2006
Mise à jour : 08/11/2007

Nombre de visites : 3004


1. Créer un nouveau document flashIcone remonter en haut de page

Il faut maintenant créer un nouveau document flash.
Attribuez lui les propriétés suivantes :
- dimensions : 300 x 50 pixels (j'ai choisie les dimensions au hasard)
- couleur d'arrière-plan : blanc (peu importe).
- cadence : 12 images par secondes
- unité de la règle : pixels

2. Préparer le scénarioIcone remonter en haut de page

Afin de préparer notre scène, insérez une image-clé à la frame 2 et appliquez lui une action "stop();"

Nous allons maintenant ajouter un movie clip sur notre scène.
Cela nous permettra d'y insérer un code ActionScript afin de gérer l'affichage de l'heure.
Ajoutez une forme quelconque (ou même un mc vide); j'utilise ici un simple rectangle.

3. Insérer le code ActionScriptIcone remonter en haut de page

Ne vous laissez pas impressionner, ce n'est pas bien compliqué ;-)
Assurez vous de bien avoir sélectionné votre mc et déployez le panneau script.

Voici le code à y insérer :
Code-source : AS
// Début du Script horloge_digitale
onClipEvent (enterFrame)
{
// Nom pour la date
horloge = new Date();

// Gestion de l'heure
heure = horloge.getHours();
if (heure<10) heure = "0"+ horloge.getHours();

// Gestion des minutes
minute = horloge.getMinutes();
if (minute<10) minute = "0"+horloge.getMinutes();

// Gestion des Seconds
seconde = horloge.getSeconds();
if (seconde<10) seconde = "0"+horloge.getSeconds();

// Gestion du format d'affichage
affichage ="Il est "+this.heure+" heure, "+this.minute+" minutes et "+this.seconde+" secondes.";
}
// Fin du Script horloge_digitale

4. Insérer un champ de texte dynamiqueIcone remonter en haut de page

Notre code est prêt et fonctionnel...
c'est bien mais il nous faut quelque chose qui nous permette de l'afficher : un champ de texte dynamique.

Ce champ de texte permettra donc de gérer la mise en forme de l'affichage (police, décoration, alignement, couleur, etc...).
Attention, il ne faut pas le placer n'importe où : double-cliquez sur le mc_horloge afin "d'entrer" dans le clip et insérez votre champ de texte.
N'oubliez surtout pas de lui attribuer le paramètre "texte dynamique" et de lui attribuer un nom de variable (pour notre script, "Var = affichage").

Et voilà c'est fini !!
Testez votre animation pour vérifier que tout est correct.



Utilisez FireFoxW3C XHTML 1.0W3C CSS 2.1