WebNioub

LES ELEMENTS GRAPHIQUES

• l’étiquette (a)

  

• le lien (b)

  

LE FLASH

1. La scène et les calques
- Créer un fichier flash de 300px * 300px
- Créer 2 calques : le premier pour l’animation (« etiquettes », où vous pourrez mettre plusieurs étiquettes par exemple) et le second pour les scripts (« AS »)
Nb : Mettre une comme occurrence au clip « etiquette » :« mc_etiquette »



2. L’animation

var racine:MovieClip = this;
//
for (var i:Number = 1; i<=4; i++) {
var et:MovieClip = racine.mc_etiquettes["mc_etiquette_"+i];
et._anim = true;
et.onRollOver = function():Void  {
if (this._anim) {
this.gotoAndPlay("ON");
this._anim = false;
}
};
}

Dans le calque « etiquettes », créer un calque « etiquette_1 » où sera placée l’animation de l’étiquette numéro 1.Nb : C’est ici que l’on ajoutera des calques supplémentaires (« etiquette_2 », « etiquette_3 », ,,,  si on le souhaite).
Nb : Mettre une comme occurrence au clip « etiquette_1 » : « mc_etiquette_1 »

Le calque « etiquette_1 » :


L’animation va se décomposer en 2 parties :
La première, où l’étiquette va “tomber” et légèrement rebondir, puis la seconde, où elle aura un mouvement de va-et-vient suite à un roll-over.

On crée tout d’abord un calque pour le lien appelé « lien1 », contenant le clip « lien1 » avec l’élément (b), qui dans cet exemple n’aura pas besoin d’effectuer de mouvement.
On crée ensuite un calque pour l’étiquette appelée « tag1 », contenant le clip « tag1 » avec l’élément (a).

On y crée des interpolations de mouvement afin de disposer l’objet (a) suivant ses différentes positions.
Nb : On doit, à la création du « tag1 », modifier l’axe de référence du clip qui par défaut se trouve au milieu du clip.

On doit le déplacer au point de jonction avec l’objet (b) (cf encadré rouge ci-dessous).

Pour la seconde partie de l’animation, la méthode est identique. On va créer des interpolations entre les différentes positions de l’étiquette.
Cependant, ici, il faut jouer sur l’accélération de l’interpolation afin de donner un rendu fluide au déplacement.
Comme ceci :

Il faut donc donner des positions et orientations différentes au clip « tag1 » comme par exemple :

Calque «AS» :

Ce calque contient les ActionScripts.
On va placer des stops à différents niveaux du scénario, correspondants aux étapes de l’animation.
Calque «LABEL» :

On va placer des repères sur la scènes pour le contrôle de l’animation (« ON »),
Nb : placer l’étiquette une frame après le “stop” du calque « AS ».
On se replace sur le clip appelé «AS» au premier niveau de la scène :

On va écrire ici les scripts permettant de contrôler le scénario, en référence aux étiquettes placées précédement.

Au départ l’animation est à son état 0 et elle se lit jusqu’au 1er “stop“.

On insère donc ce script  sur le clip « AS »:
- Il permet de définir le clip racine auquel se réfère l’animation «  mc_etiquettes ».
- Il permet de gérer l’animation de plusieurs étiquettes en nommant leur occurrence comme ceci “mc_etiquette_1“, “mc_etiquette_2“, etc… Au survol du clip « tag1 », occurrence “mc_etiquette_1” on se place à l’étiquette « ON » présente à l’intérieur de celui-ci et on lit l’animation. Celle-ci va être stoppée au moment désiré grâce au  “stop“.

Télécharger les sources de l’animation ici.