Samedi 2 mai 2009
6
02
/05
/2009
10:00
Comment peut-on créer une horloge lorsqu’on ne connaît pas le flash ? Il faut tout d'abord télécharger la version d’évaluation de flash qui est
gratuite pendant 30 jours.
https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&loc=fr%5Ffr
POUR
LES PROGRAMMEURS, OU CONNAISSEURS DE AS3
(Action Script 3) Voici un tutorial qui explique le code pour créer une horloge à aiguilles
http://help.adobe.com/fr_FR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f0e.html
POUR LES NON PROGRAMMEURS : Présentation
de AS3 - Fichier FLA
Lorsqu’on ne connaît pas le flash c’est un peu
compliqué. J’ai finalement trouvé et téléchargé le code source avec lequel on peut travailler.
http://www.adobe.com/devnet/flash/samples/time_2/
Il est composé de 2
fichiers :
-
Le fichier (AS) qui contient le code qui fera fonctionner l’horloge
- Le fichier (FLA) : C'est le fichier qu'on modifiera, pour changer le graphisme de l’horloge et qui
permet la construction de l'animation.
- Lorsqu’on publie l’horloge, un
troisième fichier SWF est crée. Ce fichier permet de visualiser l'animation.
1 Ouvrez le fichier : 2_clock
Vous pouvez tester le fichier : fichier /
aperçu avant publication / flash. Vous avez une fenêtre qui apparaît avec une horloge mais vous avez envie de changer le graphisme.
2 Vérifiez que vous ayez : la partie scénario, les
propriétés, les outils (sinon les cocher dans fenêtre) et la scène (dans notre projet c'est l'image de l'horloge).
La partie
scénario
Le sénario rassemble tous les
calques.
Le calque supérieur va se superposer au-dessus des éléments du calque inférieur.
exemple : le premier calque est "Background"(le fond de l'image), au dessus se superposera le calque "shadow" (l'ombre du cadran), puis le calque "clock" (le cadran de l'horloge), l'aiguille
des secondes , les aiguilles des minutes et enfin celle des heures.
L'oeil : Permet de rendre visible ou invisible les calques qu'on souhaite et facilite les modifications de chaque élement.
Le cadenas : permet de verrouiller ou dévérouiller les calques pour empêcher de les modifier.
La trame : permet de créer l'animation dans le temps
Outils
Les symboles sont identiques dans de nombreux logiciels
L'outil de sélection qui permet de déplacer un objet
L'outil de sous sélection qui permet de sélectionner un trait pour le
redimentionner
Le lasso permet de sélectionner
L'outil texte permet de créer du
texte
La pipette permet de sélectionner une couleur
La gomme permet d'effacer un trait, un fond
La loupe permet un zoom dans l'espace de travail
Le pot de peinture permet de choisir la couleur de
l'intérieur d'une forme.
Les propriétés
Les propriétés permettent de modifier
les éléments sélectionnés (la dimension, couleur d'arrière plan, couleur de police... )
3 Modifiez l’horloge avec
AS3
3-1
Pour simplifier les calques
:
* Vous pouvez supprimer certains calques : cliquez dans le scénario sur background,
shadow et shine. (Sélectionner/clique droit / supprimer)
* Vous sélectionnez le calque clock et rendez tous les autres calques invisibles (une croix rouge
partout sauf sur le calque clock)
Vous
supprimez l’image de la
scène.
* et vous mettez votre propre image. Mais j’ai un petit problème mon horloge fonctionne mais mon image
est sombre et je ne vois pas les aiguilles noires.
3-2 Pour changer de couleur les aiguilles :
* Vous sélectionnez le calque "hour hand" (tous les
autres calques sont invisibles) puis vous double cliquez sur l'aiguille.
* Vous arrivez
sur une nouvelle fenêtre
* Vous
sélectionnez l'aiguille (de la scène) et vous changez la couleur de remplissage dans propriétés.
* Le calque "hour hand shadow" (l'ombre de l'aiguille des heures change en même temps automatiquement de couleur sans
s'en occuper.
* Vous
faites la même procédure pour les minutes et les secondes.
3-3 Redimentionner l'aiguille des secondes et la déplacer
Voici mon horloge. Elle fonctionne
mais il y a un problème avec l’aiguille des secondes.
J’aimerais que mon
aiguille :
- soit plus grande
- et qu’elle tourne dans le même axe que mes
autres aiguilles
* Vous sélectionnez le calque "clock center" (tous les autres
calques sont invisibles). Vous cliquez sur le petit axe que vous supprimez.
* Vous sélectionnez le calque de l'aiguille des
secondes, puis votre aiguille que vous agrandissez en hauteur et en réduisez la largeur. C’est la partie la plus délicate.
* Vous déplacez l’aiguille des secondes pour qu’elle soit dans le même axe que les autres (pour vous aider vous faites apparaitre les calques "calques clock center" et les
aiguilles mais en mettant le cadenas pour ne pas les modifier).
Vous verrez apparaître une autre petite aiguille qui est normalement l’ombre de l’aiguille des secondes. Pour simplifier, sélectionnez-la et dans propriétés vous la rendez invisible (alpha 0% par
exemple).
4/ Publiez votre horloge
Vous cliquez sur fichier /publier : flash crée un fichier swf
)
