Login
blog > syma > [Tuto] FLASH #1 - Bouton CLIP AS2

[Tuto] FLASH #1 - Bouton CLIP AS2

Posté par : sYma - Le Jeudi 20 Août 2009 à 14:02

 

 

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))

 

5- Il nous faut maintenant entrer dans ce symbole pour fabriquer le bouton.
Il faut double cliquer sur le symbole en question pour entrer dedans (NB : Pour sortir de ce symbole il suffi de double cliquer à côté, c’est ainsi que l’on peut entrer dans des boites (symboles) qui sont dans des boites, qui sont dans des boites, et ainsi de suite, et revenir aisément).
Nous sommes dans le symbole BTN1 et ici c’est une nouvelle Timeline que nous avons, nous pouvons créer et animer dans ce symbole sans interférer sur la première timeline.
 

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

 

Flou X : 15
Flou Y : 15
Intensité : 100
Qualité : Supérieur
Angle : 45°
Distance : 15 px
Masquage : NON
Ombre interne : OUI
Masquer l’objet : NON
Couleur : NOIR
 

IMAGE 5

 

Flou X : 10
Flou Y : 10
Intensité : 60
Qualité : Supérieur
Angle : 45°
Distance : 0 px
Masquage : NON
Ombre interne : OUI
Masquer l’objet : NON
Couleur : NOIR
 

IMAGE 7

 

Flou X : 0
Flou Y : 0
Intensité : 0
Qualité : Supérieur
Angle : 45°
Distance : 0 px
Masquage : NON
Ombre interne : OUI
Masquer l’objet : NON
Couleur : NOIR
 

IMAGE 9

 

Flou X : 10
Flou Y : 10
Intensité : 60
Qualité : Supérieur
Angle : 45°
Distance : 0
Masquage : NON
Ombre interne : NON
Masquer l’objet : NON
Couleur : NOIR
 

IMAGE 13

 

Flou X : 15
Flou Y : 15
Intensité : 100
Qualité : Supérieur
Angle : 45°
Distance : 15 px
Masquage : NON
Ombre interne : NON
Masquer l’objet : NON
Couleur : NOIR
 
 

 

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 :

 

//Stop l'animation
Stop();
//
 

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

this.onEnterFrame = function(){
if(rewind == true){
prevFrame(); }
}
 

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

this.onRollOver = function(){
rewind = false;
play();
}
 

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

this.onRollOut = function(){
rewind = true;
}
 

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

this.onRelease = function(){
getURL('http://kookyoo.net', _blank);
}
 
 
 

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…

 

 

 







Commentaires 4 commentaires

dante le 21 Août 2009 à 9:29

Une remarque par contre, l'AS2 est vraiment déconseillé maintenant car complètement obsolète. Du coup ton code ne fonctionnera, enfin la logique de ton code surtout ne fonctionnera pas avec l'AS3.

Le tuto est sympa sinon, trés détaillée. Bon courage pour la suite

Seb le 21 Août 2009 à 9:55

Ce qui est certain c'est que le rendu est fluide et propre, beaucoup plus (selon moi) qu'avec du javascript pour ce type d'animation. Le tuto a l'air assez bien détaillé, dommage que je bidouille si peu du côté de Flash.

sYma le 21 Août 2009 à 17:43

Oui Dante, c'est de l'AS2 et c'est obsolète mais mis à part le code le reste n'est pas inutile. Je vais essayer de prendre le temps de faire le même en AS3, et je ferai le reste de mes tutos en AS3.
Merci pour vos remarques.

nico le 07 Janvier 2011 à 15:10

merci pour le tuto !!! ça déglingue!!
et ah bas les mauvaises langues!



.laisser un commentaire




Codes html interdits. Les liens sont convertis automatiquement.

Réalisation

Code & Design : Sébastien Cardona

Page générée en : 0.027637s