[Flash] Créer une horloge numérique et/ou la date.

[gg69]

Bonjour à tous,

il existe sur le net des tonnes de tutos pour réaliser des horloges, mais je les trouves trop compliqués lorsque l'on s'adresse à des néophytes.
J'ai testé plusieurs d'entres-eux avec des personnes n'ayant jamais fait de flash et le résultat était qu'ils n'y arrivaient pas
Donc vous l'aurez compris, ce tuto s'adresse aux personnes qui ne connaissent pas du tout ce logiciel

D'abord il faut se procurer le logiciel Adobe Flash qui est payant, mais la version d'essai de 30 jours est suffisante
Téléchargez-le ici.
Il est en anglais, mais cela ne devrait poser aucun problème.

Une fois installé, démarrez le logiciel et ouvrez un nouveau document.
Ca y est on peut commencer.

Ne vous affolez pas, le tuto est long car je détaille au maximum, mais en réalité c'est très rapide.

1- Choisissez une image (pas trop grande)
Je vais partir de celle-ci :

2- Notre nouveau document est ouvert (dans Flash) il faut lui donner sa taille qui sera la taille de notre image (ici 300 X 224)

Spoiler:

3- On importe notre image dans la bibliothèque par un simple glissé/déposé.
Si vous ne voyez pas la bibliothèque faites Ctrl+L

Spoiler:

4- Faites glisser de la bibliothèque à la scène votre image et "posez" là n'importe où.

Spoiler:

5- Ouvrez le menu Window et cliquez sur align. Vous devez avoir une fenêtre qui apparaît.
Cliquez sur votre image puis sur les symboles repère 1 et 2. Vous centrerez votre image automatiquement.

6- Sélectionnez l'outil text, puis choisissez l'option dynamic et créez un cadre d'environ 2/3 de la longueur de l'image sur 1.5 cm de haut. ce n'est pas précis au millimètre. Remplissez le champ Var par ce mot : affichage
Puis terminez en cliquant sur le pointeur.

Spoiler:

7- Sélectionnez votre cadre de texte (il doit être bleu) en cliquant à l'intérieur.
Puis pressez la touche F8 pour créer un clip. Nommez-le mc_num (mc voulant dire movie clip et num pour numérique)
Les noms n'ont pas beaucoup d'importance dans ce tuto, mais si vous devez jongler avec plusieurs calques et plusieurs clips donnez des noms appropriés. Sinon vous allez vous perdre dans vos créations
Une fois fait, le clip apparaît dans la bibliothèque.

Spoiler:

8- Le cadre de texte doit être sélectionné et bleu.
Pressez la touche F9 pour faire apparaître le champ Action ou regardez s'il n'est pas déjà en bas de votre écran.
Copiez et collez ce script dans cette fenêtre, puis validez en fermant cette même fenêtre.

Code:

onClipEvent (enterFrame)
{
horloge = new Date();
heure = horloge.getHours();
if (heure<10) heure = "0"+ horloge.getHours();
minute = horloge.getMinutes();
if (minute<10) minute = "0"+horloge.getMinutes();
seconde = horloge.getSeconds();
if (seconde<10) seconde = "0"+horloge.getSeconds();
affichage =""+this.heure+":"+this.minute+":"+this.seconde+"";
}

Spoiler:

9- Double cliquez sur votre cadre de texte pour l'éditer.
Choisissez votre police et taille de caractères. Cochez le centrage du texte pour éviter les secondes coupées
Dans mon cas, l'image est noire donc je choisi une police de taille 42 et blanche.

Spoiler:

10- Cliquez sur Séquence 1 pour revenir à votre point de départ.
Vérifiez que votre cadre de texte est toujours bleu (sinon, cliquez dedans) nous allons le mettre en place sur l'image avec les fonctions suivantes (rappelez-vous qu'on les a déjà utilisées)

Spoiler:

C'est fini
Pour voir le résultat faite une pression simultanée sur les touches Ctrl et Entrée

Spoiler:

Sauvegardez votre travail en fichier .swf en utilisant File -> Export -> Export animation.
Choisissez l'endroit de sauvegarde et donnez lui un nom pour moi ce sera "lune".
Fermez Flash. Une fenêtre apparaît pour vous demander de sauvegarder. Dites OUI.
Un fichier .fla est automatiquement créé pour que vous puissiez modifier votre travail plus tard

Voilà, ce n'est pas si difficile que ça
Bonnes créations.
gg69.

Les questions sur les tutoriaux sont à poser ICI

[gg69]

Pour remplacer l'heure par la date, il suffit de mettre ce script :

Code:

onClipEvent (enterFrame)

{
maDate = new Date();
this.day = maDate.getDate();
if (day<10) day = "0"+day;
this.month = maDate.getMonth()+1;
if (month<10) month = "0"+month;
this.year = maDate.getFullYear();
affichage=""+this.day+"/"+this.month+"/"+this.year;

}

Si vous souhaitez mettre les deux alors il vous faudra créer un second clip pour la date exactement comme pour l'heure, mais avec le script qui est juste au dessus