Scénario et animations basiques avec flash MX

Toute animation/interface flash est basée sur un scénario.

Celui-ci est une succession d'images aussi connues sous le nom de « frames ». Chaque frame correspond à un instant T dans la ligne du temps. Le nombre de frames lues par seconde peut être cadencé selon vos désirs, par défaut, Flash lit 12 frames par seconde comme vous pouvez le voir ci-dessous.

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Vous pouvez bien entendu choisir à votre guise la cadence de lecture en double-cliquant dans le scénario comme montré ci-dessous.

Attention toutefois à bien définir la cadence, car elle s'applique à toute l'animation. Il n'est effectivement pas possible de mettre une cadence X à un endroit de l'animation et une cadence Y à un autre endroit. De plus, il est impossible de changer la cadence via Actionscript.

Voici comment changer la cadence de toute l'animation :

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Une image clé est une étape clé dans une animation.

Généralement chaque image clé est différente de l'image clé qui la précède. Elles sont très utilisées dans les interpolations. Elles peuvent aussi se succéder de frame en frame si par exemple vous dessinez toutes vos images clés vous-même plutôt que d'utiliser une interpolation.

Pour bien associer les images clés au scénario, voici comment afficher une image pendant 10 sec :

• soit vous changez la cadence qui est de 12 Frames/sec en 1 frame/sec, vous insérez une image clé sur la frame 1 puis vous insérez une image « normale » sur la frame 10 ;
• soit vous laissez la cadence telle quelle et vous insérez une image clé sur la 1re frame et une image normale sur la frame 120 (12*10) ;
• la troisième possibilité est évidemment ActionScript, mais nous ne l'aborderons pas dans cette rubrique.

Voici comment insérer une image clé :

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Les calques sont des éléments indépendants les uns des autres. Ils permettent d'appliquer des traitements sur des images de manière distincte. Chaque calque peut être considéré comme un objet faisant partie de l'animation.

Les interpolations de mouvements permettent de déplacer des objets d'un endroit A à un endroit B. Flash calcule automatiquement les images intercalées entre les deux images clés. En effet pour pouvoir réaliser une interpolation de mouvement, il faut par exemple :

• créer une image A sur la frame 1 ;
• créer une image B sur la frame 10 à un autre endroit ;
• via le menu « Modifier », cliquer sur « Grouper » ;
• via le panneau de propriétés, choisir l'interpolation de mouvement dans la liste des interpolations.

L'interpolation de forme permet tout comme l'interpolation de mouvement de déplacer un objet d'un point A à un point B. En outre entre une forme A et une forme B, prenons un cercle et un carré, elle permet de calculer automatiquement les images intermédiaires de la transformation du cercle en carré.

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Dans cette animation nous utilisons tour à tour les interpolations de mouvement et de forme.
Dans un premier temps, l'interpolation de mouvement sert à déplacer le cercle 1 vers la droite et le cercle 2 vers la gauche.

Dans un deuxième temps, l'interpolation de forme transforme les cercles en ovales qui tournent sur eux-mêmes grâce à la dernière interpolation de mouvement dans laquelle on a défini les paramètres de rotation.

Lorsque vous créez un calque, vous pouvez définir son type en cliquant dessus avec le bouton droit et en allant dans les propriétés. Les masques servent à masquer un autre calque afin par exemple de découvrir un mot lentement comme ci-dessous ;

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Comme pour les calques masqués, on peut définir un calque de type « guide » et « guidé » via les propriétés du calque. Les guides permettent de définir une trajectoire de déplacement. Le calque « guide » définit cette trajectoire et le calque « guidé » représente l'objet qui devra suivre cette trajectoire.

Pour parvenir au résultat escompté, il faut placer le centre de l'objet du calque guidé sur le début du guide et sur la fin du guide à la dernière frame. Ensuite, une interpolation de mouvement de l'objet « guidé » permettra d'effectuer le déplacement.

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Un Movie Clip est un objet d'une animation étant lui même une animation à part entière. Il peut contenir d'autres MC, d'autres symboles et est totalement indépendant des autres éléments constituant l'animation. L'avantage des MC est que l'on peut leur attribuer des actions en actionscript contrairement au symbole « image » par exemple. Pour créer un MC, il suffit d'aller dans le menu « insertion » -> « nouveau symbole » et choisir « Movie Clip » comme type de symbole. Une fois créé, ce MC s'ajoute dans la librairie flash accessible soit via le raccourci CTRL+L sous Windows, soit via le menu « Fenêtre » -> « Librairie ».

L'alpha permet d'afficher ou de faire disparaître un MC de manière progressive. Il y a plusieurs méthodes pour faire varier l'alpha d'un MC.

En voici une qui le fait varier en boucle :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

_root.lancer.go.onPress = function() {
        _root.Start_Alpha_Change=1;//Flag initialisant la variation d'alpha
}
                                                
_root.lancer.onEnterFrame=function(){
        if(_root.Start_Alpha_Change){
                if(this._alpha < 100){
                        this._alpha++;//Incrémentation de l'alpha
                }
                else{
                        this._alpha=0;//Alpha au minimum
                }
        }
}

Notez que le nom de l'instance du bouton « go » est « go » et que le nom du MC est « lancer ». Cliquez pour voir l'effet.

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Selon les besoins, il est parfois nécessaire de charger dynamiquement un MC. Pour pouvoir le charger dynamiquement, il faut que ce MC ait été préalablement créé et existe dans la librairie. Pour rendre ce MC reconnaissable dans actionscript, il faut aller dans la librairie, sélectionner le MC et avec le bouton droit, choisir l'option « Linkage » et donner un nom qui sera celui qu'on utilisera dans actionscript pour faire référence à ce MC.

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Voici le code utilisé pour charger dynamiquement le MC ci-dessus :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.

charger.onPress=function(){
        _root.attachMovie("jongleur","jongleurdyn",10);//Chargement du MC "jongleur" actuellement en librairie
        _root.jongleurdyn._x=250; //Position X du MC sur la scène
        _root.jongleurdyn._y=140; //Position Y du MC sur la scène
}

Il est important de noter que lorsqu'un clip a été chargé avec attachMovie(), il ne peut être supprimé par la suite sauf lorsqu'on utilise un empty MC.

Cliquez plusieurs fois sur le bouton « Dupliquer »

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Voici le code utilisé :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.
4.
5.
6.

dupliquer.onPress=function(){   
        etoile.duplicateMovieClip("etoile"+_root.count,_root.count);//Duplication du MC étoile  
        _root["etoile"+_root.count]._x=(200+random(156));//Positionnement X
        _root["etoile"+_root.count]._y=(110+random(75));//Positionnement Y
        _root.count++;  
}

Et pour rendre les étoiles scintillantes, en action sur la 1re étoile :

 

Cacher/Afficher le codeSélectionnez

1.
2.
3.

onClipEvent(enterFrame){        
        this._alpha=random(100);//Nombre aléatoire pour l'alpha
}

Les Empty MC sont en fait des MC vides dans lesquels on pourra placer n'importe quoi via actionscript. Généralement on y place d'autres MC. Nous avons vu que lorsqu'on utilisait la méthode attachMovie(), nous ne pouvions pas supprimer le MC dynamiquement chargé. Une des fonctionnalités des MC vides est justement que l'on va pouvoir supprimer un clip dynamiquement chargé. Reprenons l'exemple du jongleur, mais en utilisant cette fois un MC vide.

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

Voici le code utilisé pour charger dynamiquement le MC dans un clip vide.

charger.onPress=function(){
        _root.createEmptyMovieClip("jongleur_conteneur",10);//Création d'un clip vide
        _root.jongleur_conteneur._x=250;//Positionnement X
        _root.jongleur_conteneur._y=140;//Positionnement Y
        _root.jongleur_conteneur.attachMovie("jongleur","jongleurdyn",10);//Chargement du MC jongleur dans le MC conteneur
}
supprimer.onPress=function(){
        _root.jongleur_conteneur.removeMovieClip();//Suppression du MC conteneur
}