L'objet de cette seconde partie portera sur l'intégration d'animations
dans un bouton. Une technique qui vous permettra de faire vos propres
boutons Flash !
Tout d'abord, intéressons-nous à l'une des particularités
de Flash : L'animation.
Animation image par image
Assimilable au dessin animé. Ce type d'anim présente
des inconvénients : lourdeur du fichier final, perte de temps,
manipulation laborieuse.
Et vous allez voir 2 techniques différentes d'animation bien plus
avantageuses et faciles à utiliser.
L'interpolation de Mouvement
Consiste à déplacer sur votre scène
des clips et autres symboles. L'interpolation de mouvement suit une
trajectoire donnée. Elle permet aussi la transformation d'un
symbole. Exemple : un rond grossit et rapetisse, à côté
un cerf-volant tournoie dans le ciel (rotation)..
-Procédure
1) Vos symboles doivent être groupés (ctrl+G).
Un cadre bleu apparaît autour.
2- Créez un nouveau symbole CLIP (CTRL+F8). Sur
la première image-clé commencez votre dessin ou insérez
une image bitmap, jpeg, illustrator... Pour importer : Fichier -->
Importer ou CTRL+R
3) Une fois votre première image-clé OK, insérez
une nouvelle image-clé plus loin sur la timelin (n° 25) en
faisant clic-droit : insérer image-clé ou bien F6
4) Lorsque vous êtes satisfaits par votre seconde
image, sélectionnez-la, faites clic-droit --> Interpolation
de mouvement.
Et normalement vous verrez ça :
Note : Même après groupement vous pouvez
retravailler votre symbole.Il vous suffit de doublecliquer dessus. Lorsqu'il
ya une interpolation de mouvement, il y a une flèche bleue
L'interpolation de forme
C'est en quelque sorte le morphing de flash.
Très important : Vos symboles doivent être séparés
(ctrl+B) pour l'interpolation de forme. Tout ce qui est dessiné
est déjà séparé. Le texte ne l'est pas et
les images non plus.
Une fois les séparations effectuées, sélectionnez
votre première image-clé et dans le menu déroulant
(Dans les Propriétés en bas), sélectionnez forme
:
Lorsqu'il y a une interpolation de forme, il y a une flèche
verte :
Important : Lorsqu'il y a un cadre bleu, c'est groupé. Lorsque
c'est trame, c'est séparé!
Je vous laisse tester l'interpolation de mouvement ainsi que celle de
forme. Familarisez vous avec chacune.
Dans le vif du sujet
Maintenant, nous allons apprendre comment faire un bouton animé
de ce type :
Une chose importante : Donnez toujours un nom significatif
à vos symboles. Comme ça, vous les retrouverez facilement
dans votre bibliothèque (CTRL+L)
Tout d'abord, créons le design du bouton :
Tout ce qu'il y a de plus simple. Un premier cercle avec
un remplissage de couleur jaune et un second cercle de remplissage rouge.
Chacun des cercles ayant un contour de 8. Sélectionnez le remplissage
rouge et supprimez-le. Vous n'aurez plus rien (un trou) au milieu.
Sélectionnez tout en glissant autour avec la flèche noire
et faites F8 : convertir en symbole.
Nommez-le "bouton interface"
Animation derrière le bouton
1) Créez un nouveau symbole (ctrl+F8) Movie clip et appellez-le
"clip 1"
2) Sur le premier calque faîtes glisser depuis
la bibliothèque (ctrl+L) le symbole "bouton interface"
3) Insérez un nouveau calque :
4) Créez une interpolation (forme ou mouvement) sur
votre nouveau calque et placez le dessous "bouton interface"
de telle sorte à ce que l'animation soit visible seulement à
l'intérieur du rond.
2) Sur l'état HAUT faîtes glisser depuis la bibliothèque
"bouton interface", sur l'état DESSUS mettez "clip
1".
3) Sur l'état ABAISSE faîtes glisser à nouveau "bouton
interface"
4) Double-cliquez dessus pour modifier ce que vous voulez (c'est juste
pour bien comprendre et différencier les états de bouton).
5) Enfin sur CLIQUE, la quatrième image-clé du bouton "FINAL"
tracez un rond de n'importe quelle couleur de la taille du bouton.
C'est une technique vous permettant de définirr la zone réactive
de la souris. Le cas échéant, cette zone réactive
reste incertaine.
6) Attribuez une action à votre bouton :
Sélectionnez votre bouton sur la scène. Faites un clic droit
et actions ou bien ouvrez la fenêtre Actions :
Passez en mode expert si vous voulez directement taper le
code :
Script :
on (release) {
getURL("http://www.script-masters.com", "_blank");
}
ou bien avec en mode normal faites :
- Actions --> Movie Control --> on
- Actions --> Browser (Navigateur) --> Get URL : cf image
Là vous n'avez plus qu'à remplir
- URL : L'adresse internet ou la page de votre choix... "prog.html"
ou"chat.jpg"
- Window : Bon, rien de spécial, là. _self, _blank, _parent,
_window
- Variables : Laissez sur ne pas Envoyer. Pas utile pour l'instant.
Les actions allouées aux boutons ne se limitent pas à l'ouverture
de fenêtre. L'on peut aussi y associer l'appel de scripts externes
(javascript inséré dans une page html), liens mailto, commandes
internes à l'animation flash. En bref, il y a énormément
de possibilités que nous pourrons voir plus tard.
Pour intégrer votre bouton dans une page, vous pouvez faire Fichier
--> Publier. Ou publier l'animation en format swf et l'insérer
par le biais d'un autre logiciel. C'est pas beau, ça ?
