 articles  réactions
|
telov - 01.05.2006 | 26 réactions | #link | rss
Nous avons vu dans le chapitre précédent sur le guide et le masque comment convertir un objet en symbole. Je vous conseillerais de convertir d'emblée chaque objet que vous créerez sur la scène, (Sauf si votre objet demeure toujours statique et sans fonctions sur votre futur site, comme par exemple un fond), et ceci pour deux raisons: D'abord convertir un objet en symbole permet de gagner en poids, ensuite parce que (comme nous l'avons déjà vu précédement) un symbole s'inscrit automatiquement dans votre bibliothèque. Si vous utilisé un même symbole plusieurs fois vous pourrez le réutiliser simplement en le glissant de la bibliothèque sur la scène; ceci permets encore une fois de réduire considérablement le poids de votre animation.
Il existe trois types de symboles:
Graphique : pour faire un objet animé. Bouton : pour faire un objet dirigeant la navigation de l’animation. Clip : pour faire une animation à l’intérieur de l’animation de base. 
Le symbole Graphique:
Il sera utilisé si vous faites une interpolation ou une animation simple de votre objet. A noter au passage que flash est principalement utilisé pour des animations vectorielles, vous pouvez toutefois aussi importer du bitmap dans votre bibliothèque. (.jpg, .gif, .png sont les formats les mieux adaptés qualité/poids pour Flash)
Le symbole Bouton:
Il est utilisé pour passer d'une frame à une autre, pour charger une image, pour diriger un utilisateur vers une URL, etc... Dans les premières versions de Flash on utilisait beaucoup les boutons. Depuis les dernières versions on à tendance à ne plus les utilisés, préférant les symboles de clips (ou MovieClips), beaucoup plus maléables. Personnellement je ne fais des boutons plus que pour la redirection vers une URL, si cela est leurs seule fonction.
Lorsque vous avez convertit votre symbole en bouton, double-cliquez dessus. Voici ce qui doit apparaître: Haut = ton bouton tel qu'il est sur l'animation Dessus = quand on passe la souris sur le bouton Abaissé = quand on va cliquer sur le bouton Cliqué = la zone sur laquelle tu décides que l'on peut cliquer
Il faudra insérer une image-clé pour chacuns des états que tu veux modifier et dessiner une surface pleine pour la zone Cliqué.
Une fois que tu as définis ces paramètres tu vas pouvoir donner une action ou plusieurs à ton bouton. Tu placeras donc un code dans le panneau Actions-bouton. Voici quelques exemples:
/* On place un slash + étoile ( /* ) pour mettre un commentaire sur plusieurs lignes dans le code comme je le fais ici, ce commentaire ne sera évidement pas lu. Pour fermer le commentaire on fera idem dans l'autre sens soit: */ // Double - slash ( // )si le commentaire ne fait qu'une ligne.
// Pour passer d'une séquence à une autre:
on (press) {gotoAndPlay ("taséquence2","1");} /* Si je traduis à ma façon ça donne: quand on presse (sur le bouton), va et joue l'image 1 de la séquence nommée "taséquence2" */
/* Pour nommer "taséquence2", allez dans Fenêtre – panneau - séquence, pour créer "taséquence2", allez dans Insertion - séquence*/
/* N' oubliez pas de mettre un stop(); dans Actions-image là ou vous désirez que l'animation s'arrête ^^.*/
// Si vous désirez passer d'une image à une autre sur la même séquence
on (press) {gotoAndPlay ("maSéquenceEnCours","70"); } // Quand on presse joue l'image 70 de la séquence en cours.
// On peut évidemment mettre autre-chose que : on(press).
/*Instructions des actions de boutons:
on(press) : quand on click sur le bouton. on(release) : quand on relâche le bouton. on(releaseOutside) : quand on relâche en dehors de la zone cliquable du bouton. on(rollOver): quand on passe sur la zone cliquable du bouton sans cliquer. on(rollOut) : quand on sort de la zone cliquable du bouton sans cliquer.on(keyPress"< ... touche choisie ... >") : quand on appuie sur une touche du clavier. on (dragOver) : quand on passe sur la zone du bouton et que le bouton de la souris est enfoncée.on(dragOut) : quand on sort de la zone cliquable du bouton, le bouton de la souris enfoncée.*/
// Pour diriger un utilisateur vers une URL on utilisera : getURL(). on (press) {getURL("http://www.tonadresseweb.com","_self");}
// "..._self" : même fenêtre, …,"_blank" : nouvelle fenêtre
/* Pour faire un bouton qui charge un autre fichier .swf ou un .jpeg on utilisera : loadMovie(), en déclinant simplement le chemin parcouru */
on (press){loadMovie("file://.../tonDossier/tonFichier.swf");} Le symbole Clip.
Ce sont les plus intéressants. Tu peux, avec un symbole de clip, faire une animation dans ton animation qui elle-même à une animation dans son animation. Exercice pour une meilleure compréhension:Dessinez un rond de couleur sur la frame 1 du calque 1, convertissez-le en symbole de Clip, puis double-cliquez dessus.Vous avez maintenant une nouvelle timeline de scénario, qui est la timeline du clip.A la frame 20 sur cette nouvelle timeline, insèrez une image-clé, déplacez votre symbole et faites une interpolation.Voilà, maintenant revenez dans la scène principale et testez l’animation.Ensuite retournez sur la scène du symbole de clip et faites un nouveau calque, dessinez cette fois un carré d'une autre couleur, convertissez-le en symbole de Clip et double-cliquez dessus.Vous avez maintenant un clip dans votre clip. Insèrez une image-clé à la frame 10, déplacez votre symbole et faites une nouvelle fois une interpolation.Revenez dans la scène principale et testez l’animation..…et ainsi de suite… ATTENTION: Pour donner un code à un clip il faudra lui donner un nom d'occurrence.  Afin de permettre au code de l'identifier et de pouvoir lui attribuer des données. Ce nom devrait en principe commencer par une minuscule (Actionscript à l'instar d'autre langage est sensible à la casse) et ne pas être un nom résérver par Flash. De plus il ne peut contenir d'espace soit: mon clip = faux, mon_clip =juste ou encore monClip = juste ...
Ouvrez le panneau Action, et vous placerez votre script dans Actions-image.
Voici un exemple:
this.monClip.onPress = function() {gotoAndPlay("2");}
// Ou encore:
this.monClip.onPress=function() {getURL("http://www.tonadresseweb.com");}
// "this" sert à ciblé le clip. Je ferais un chapitre sur le ciblage.
/*Si vous ne voulez pas lui attribuer une fonction (onPress, onRelease etc...), par exemple simplement charger une image quand le clip apparait. */
monClip.loadMovie("maPhoto.jpg");
// Utiliser onClipEvent() pour gérer les événements de clips, exemple: onClipEvent (load) { stopAllSounds() ; } /* Instructions des actions de clips. load() : dès que le clip se charge. enterFrame() : dès que le clip atteint une frame. unload() : Dans la première frame située après la dernière du clip. mouseDown() : quand on click sur le bouton (gauche) de la souris.mouseMove() : quand on déplace la souris. mouseUp() : quand on relâche le bouton (gauche) de la souris.keyDown() : quand on appuye sur n'importe quelle touche. keyUp() : quand on relâche n'importe quelle touche. data() : quand on reçoit une information soit depuis l'action loadVariables(), soit depuis l'action loadMovie(). */
Voilà pour les symboles, nous aborderons un peu plus le code dans un prochain chapitre.
A bientôt ...
|