1. Introduction

Le but de cet article est de vous faire comprendre les mécanismes du scénario. Il est à la portée de tous les débutants en flash, c'est d'ailleurs surtout à eux qu'il s'adresse. En outre, nous vous montrerons comment réaliser des animations basiques.

2. Mécanisme du scénario

2.1. Fonctionnement

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.


Cliquez pour lire la vidéo



2.2. Cadence

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


Cliquez pour lire la vidéo



3. Images clés

3.1. Notion d'image clé

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 1ère frame et une image normale sur la frame 120 (12*10).
  • La troisième possibilité est évidemment ActionScript mais nous ne l'aborderons dans cette rubrique.

Voici comment insérer une image clé:


Cliquez pour lire la vidéo



4. Calques et interpolations

4.1. Calques

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.

4.2. interpolation de mouvement

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

Note: Il est indispensable de grouper les objets lors d'une interpolation de mouvement.

4.3. interpolation de forme

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é.

4.4. Exemple avec les interpolations


Cliquez pour lire la vidéo



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.

4.5. Calques masques et masqués

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


Cliquez pour lire la vidéo



4.6. Calques guides et guidés

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.


Cliquez pour lire la vidéo



5. Movie Clip

5.1. Qu'est-ce qu'un movie clip?

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".

5.2. Faire varier l'alpha d'un MC

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.

 
TéléchargerCacherSélectionnez

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.


Cliquez pour lire la vidéo



5.3. Charger dynamiquement un MC

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.


Cliquez pour lire la vidéo



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

 
TéléchargerCacherSélectionnez

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

5.4. Dupliquer un MC existant

Cliquez plusieurs fois sur le bouton "Dupliquer"


Cliquez pour lire la vidéo



Voici le code utilisé:

 
TéléchargerCacherSélectionnez

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

 
TéléchargerCacherSélectionnez

5.5. Que sont les "Empty Movie Clips"?

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 fonctionalité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.


Cliquez pour lire la vidéo



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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
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
}

6. Conclusion

Les principes de base ont été abordés. Lorsque vous maîtriserez correctement les interpolations, le fonctionnement du scénario en interaction avec les calques, les clips et un peu d'actionscript, vous pourrez déjà réaliser des animations très sympathiques.

Après la complexité réside plus dans l'apprentissage de l'actionscript lui-même et dans la réalisation de dessins graphiques que vous utiliserez dans vos animations. Voilà, bon démarrage avec Flash MX.