Bouton CLIP AS2

EFFET D'OMBRE INTERNE/EXTERNE

1- On ouvre Flash.

2- On créé un fichier AS2 (Action Script 2)

3- On créé un rectangle, carré, ou autre selon les envies ou les besoins

4- On le selectionne et on fait « F8 » ou « Modifications / Convertir en symbole… », CLIP, et on nomme ce symbole BT1 (aucune importance sur le nom, c’est pour s’y retrouver dans la bibliothèque (NB : ce sont les « noms d’occurrence qui permettent d’interagir sur un élément via l’ActionScript))

6- Nous allons créer l’animation du bouton :

Pour animer un élément dans Flash, il faut que l’élément soit un symbole, nous allons donc sélectionner l’élément et presser de nouveau F8, pour le convertir en symbole. Nous animons donc un symbole dans un symbole.

7- Sur ce bouton nous allons appliquer un effet d’ombre interne et d’ombre portée, alors on sélectionne le symbole dans la zone de travail.

On cherche les « Propriétés » du symbole. Dans ces propriétés on cherche « Filtres ». Et ici « Ajouter un filtre », « ombre portée ». Dans « Ombres portée » on règle la « Qualité » sur « Supérieur » pour que toutes les images clé que nous ajouterons à ce symbole soient configurées de cette façon.

8- Sur la Timeline on créé une image clé sur l’image 13 par exemple : On sélectionne l’image 13 sur la Timeline et on presse « F6 ».

9- Clic droit sur la Timeline (entre l’image 1 et 13) et [CS3] « Créer une interpolation de mouvement » [CS4] « Créer une interpolation classique ». Le symbole est prêt pour l’animation.

10- On installe de la même manière les autres images clé nécessaires à l’animation voulue sur les images 5,7,9,13.

11- On sélectionne la première image, puis on sélectionne le symbole, pour modifier l’état du symbole sur la première image. Nous allons donner l’impression qu’il sort du fond avec un jeu d’ombres.

Voici la configuration de l’ombre portée du symbole des images que l’on va configurer (libre à vous de régler selon vos goûts):

IMAGE 1

IMAGE 5

IMAGE 7

IMAGE 9

IMAGE 13

12- L’animation est prête à fonctionner, « CTRL+ENTREE » pour voir le résultat. Ce n’est pas fini, il faut stopper l’animation et lui donner des instructions. On créé donc sur la timeline du symbole un « Nouveau calque » qui apparait au dessus du calque de l’animation.

13- On commence par stopper l’animation :

On sélectionne l’image 13 et on presse « F7 » (insérer une image clé vide). On sélectionne cette image clé et on bascule sur la fenêtre « ACTIONS-IMAGE ». Dans ce champ de texte on écrit en ActionScript 2 :

Ce qui permet de stopper l’animation une fois qu’elle s’est déroulée.

14- Maintenant on configure le bouton, pour qu’il réagisse à la souris.

On sélectionne l’image 1 du dernier calque créé sur la timeline. On Bascule vers le panneau « ACTIONS-IMAGE » et on entre :

//Pour arrêter l’animation.

stop();

//On définit l’action « rewind » pour que l’animation se rembobine

//On définit l’action « RollOver » (survol de la souris), on ne rembobine pas et on joue l’animation

//On définit l’action « RollOut » (souris qui quitte la zone), on rembobine

//On définit une action lors du clic : URL kookyoo.net, sur une nouvelle page

15- On peut arranger un peu l’animation en ajoutant des effets d’accélération :

En cliquant sur une des flèches de l’animation on va sur la « panneau de propriété », dans « Interpolation » on peut changer l’accélération de -100 à 100. Pour le cas présent j’ai mis par ordre d’interpolation : 100 / -100 / -100 / 100. Mais là c’est selon les goûts, je vous laisse tester.

16- Il est également conseillé de modifier le nombre d’image/seconde de l’animation. Je la mets a 35, à vous de voir ce qui vous va le mieux pour une animation bien fluide. Pour modifier ce paramètre il faut cliquer sur le fond du plan de travail, et dans la fenêtre « Propriété » il y a l’option « I/S ».

Voici le rendu final (sans travail graphique)

Voila en espérant avoir été clair, voir même utile, avec un peu de chance.

N’hésitez pas à faire vos remarques, est-ce assez clair, y’a-t-il assez de visuels, est-ce trop expliqué, pas assez ?!

A bientôt…