interactivité


ActionScript > Boutons commandant une animation + Actions Movie Clip



Boutons commandant une animation et Actions sur des Movie Clip

1. Dans un nouveau document Flash, créez un nouveau Movie Clip :

Ctrl/Pomme+F8. Laissez le nom par défaut (Symbole 1). Puis, dans le scénario de ce clip, créez 2 niveaux d’animation :

a. Niveau 1 :

- Créez une forme libre, puis convertissez-la en Movie Clip (F8), nommé Clip1. Puis double-cliquez sur le clip pour entrer en imbrication.

- Dans le scénario imbriqué, sélectionnez la forme sur la scène et convertissez-la encore en Movie Clip (F8), nommé Forme1.

- Puis, à l’image 10, tapez F6. Activez l’outil Transformation libre de la barre d’outils et réduisez la taille du clip de l’image 10 sur la scène.

- Cliquez entre les 2 images clés dans la ligne du temps et, via l’Inspecteur des propriétés :

- Attribuez une interpolation de Mouvement (Tween > Motion).

- Vérifiez que Echelle - Scale est bien coché.

- Sélectionnez l’image 1 de la ligne du temps et double-cliquez sur le clip correspondant sur la scène pour entrer en imbrication.

b. Niveau 2 :

- Dans le scénario de Forme1, à l’image 5, tapez F6 pour créer une image clé.
- La forme étant sélectionnée sur la scène, via la palette Mélangeur de couleur - Color Mixer, définissez un dégradé radial de couleurs libres.

- Faites une copie de l’image 1 à l’image 10 : sélectionnez l’image 1 dans la ligne du temps, enfoncez Alt et faites glisser jusqu’à l’image 10.

- Cliquez entre l’image 1 et 5 dans la ligne du temps et, via l’Inspecteur des propriétés, définissez une interpolation de Forme (Tween > Shape).

- Cliquez entre l’image 5 et 10 et répétez l’opération.

2. Retournez sur la scène principale en cliquant sur Séquence 1 - Scene 1, tout en haut à gauche, au-dessus de la liste des calques. La scène est vide, puisque jusqu’ici nous avons travaillé dans un clip, indépendamment de la scène :

- Ouvrez donc la Bibliothèque du document et glissez une instance du clip Symbole 1 sur la scène.

- Double-cliquez sur le clip pour entrer en imbrication. Dans le scénario de Symbole 1, le clip étant sélectionné sur la scène, ouvrez le panneau Actions en cliquant sur le bouton fléché de l’Inspecteur des propriétés.

3. Nous voulons bloquer la lecture du clip à son point de départ :

- Entrez la ligne de code suivante : puis passez à la ligne suivante.

- Cliquez sur l’icône de Cible, en haut dans le panneau Actions. S’ouvre le panneau de ciblage :

- Nous voulons qu’au chargement du clip, tous les niveaux d’animation de celui-ci soient stoppés, déroulez donc le contenu de (Symbole 1) en cliquant sur le petit triangle à sa gauche. Apparaît (Clip1).

- Déroulez (Clip1) et cliquez sur (Forme1). Un panneau vous signale qu’il faut renommer l’instance concernée, cliquez donc sur Renommer. Attribuez le nom Forme1. Le clip Forme1 étant maintenant sélectionné dans le panneau de ciblage, cliquez sur OK pour fermer ce panneau. Dans le panneau Actions, vous devez voir :

- Après Forme1, ajoutez : puis passez à la ligne.

- Recliquez sur l’icône Cible : déroulez (Symbole 1) et cliquez sur (Clip1) cette fois. Puis cliquez sur OK pour fermer le panneau de ciblage. Dans le panneau Actions, vous devez voir :

- Après this, ajoutez puis passez à la ligne et fermez l’instruction en ajoutant :

- Prévisualisez l’animation : Ctrl/Pomme+Enter, et consatez que l’animation est bien bloquée à son point de départ.

3. Dans le scénario de Symbole 1, créez un nouveau calque, nommé Boutons. Créez trois boutons simples :

Play, Pause et Stop. Puis alignez-les sous le Clip d’animation sur la scène.

4. Actions Boutons :

a. Play

- On veut qu’en appuyant sur ce bouton, tous les niveaux d’animation soient lancés :

- Passez à la ligne et cliquez sur l’icône Cible. Dans le panneau qui apparaît, déroulez (Symbole 1) et cliquez sur (Clip1). Renommez ce symbole Clip1, puis cliquez sur OK dans le panneau de ciblage pour le fermer. Vous devez voir :

- Après Clip1, ajoutez

puis passez à la ligne.

- Cliquez sur l’icône Cible. Dans le panneau qui apparaît, déroulez (Symbole1) puis Clip1 et sélectionnez Forme1.

Cliquez sur OK pour fermer le panneau de ciblage. Vous devez voir :

- Après Forme1, ajoutez et fermez l’instruction par une accolade :

- Prévisualisez le résultat : Ctrl/Pomme+Enter. Constatez que l’animation se lance en appuyant sur le bouton Play.

b. Pause

- On veut qu’en appuyant sur ce bouton, seul le 1er niveau d’animation soit stoppé (l’interpolation de Forme doit continuer) :

A la ligne suivante, cliquez sur l’icône Cible du panneau Actions et sélectionnez Clip1, puis ajoutez :

c. Stop

- L’animation doit se stopper à son point de départ :

A la ligne suivante, cliquez sur l’icône Cible du panneau Actions, sélectionnez Clip1, puis ajoutez :

Passez à la ligne suivante, recliquez sur l’icône Cible, sélectionnez Forme1, puis ajoutez :

- Prévisualisez le résultat pour tester l’efficacité des différents boutons.

5. Sur la scène principale (Séquence 1 - Scene 1) du même document, créez un nouveau MovieClip (Ctrl/Pomme+F8). Gardez le nom par défaut (Symbole 2).

- Dans le scénario du nouveau clip, créez une image clé vide à l’image 2 : F7.

- Créez une petite animation simple, par interpolation, courant de l’image 2 à l’image 11.

- Via la Bibliothèque - Library du document, placez une instance de Symbole 2 sur la scène principale, sur un nouveau calque. (Comme la 1re image du clip est vide, l’instance placée sur la scène paraît vide).

- Via l’Inspecteur des propriétés, renommez l’instance de ce clip Clip2.

- Bloquez l’animation de ce clip à son point de départ :

A la ligne suivante, cliquez sur l’icône Cible du panneau Actions, sélectionnez Clip2, puis ajoutez :

6. C’est le moment de placer une dernière action sur le 1er clip créé (Symbole 1, animé par les 3 boutons).

Nous voulons qu’au déchargement de ce 1er clip, le second clip (Clip2) se lance :

- Sélectionnez le 1er clip (Symbole 1) sur la scène principale (Séquence 1- Scene 1). Dans le panneau Actions, entrez :

A la ligne suivante, cliquez sur l’icône Cible du panneau Actions, sélectionnez Clip2, puis ajoutez :

- Prévisualisez le résultat. Constatez qu’on ne voit pas le second clip apparaître. C’est normal puisque nous lui avons demandé de se bloquer à son point de départ. Mais nous avons également demandé qu’au déchargement du 1er clip, le clip 2 se lance. Reste donc à créer un bouton qui déchargera le 1er clip.

7. Dans le scénario de Symbole 1, dans le calque des Boutons, créez un nouveau bouton simple à partir du texte VIDER. Puis, ce nouveau bouton étant bien sélectionné sur la scène, dans le panneau Actions, entrez :

Après l’ouverture de parenthèse, cliquez sur l’icône Cible, sélectionnez : (Symbole 1), puis fermez la parenthèse, ajoutez un point vigule et à la ligne suivante :

Prévisualisez le résultat. Constatez qu’en cliquant sur le bouton VIDER, le clip Symbole 1 disparaît et l’animation du Symbole 2 (Clip2) se lance automatiquement.




Prog_Mc PDF 77199 Prog_Mc Flash 1459

mots-clés liés à cet article

actionscript
Adobe Flash
interactivité

quelques sites liés aux mots-clés de cet article


actionscript
own your c
flashr
nastypixel
trustfiles
hbo imagine

Adobe Flash
ashes and snow
ertdfgcvb
tween pix
neave
apoka

interactivité
cleempoel
benayoun
piano graphique
matadata
you move you interact