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.
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
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é:
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
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
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.
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.
_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.
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.
Voici le code utilisé pour charger dynamiquement le MC ci-dessus
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 lorqu'on utilise un empty MC.
5.4. Dupliquer un MC existant
Cliquez plusieurs fois sur le bouton "Dupliquer"
Voici le code utilisé:
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 1ère étoile:
onClipEvent(enterFrame){
this._alpha=random(100);//Nombre aléatoire pour l'alpha
}
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.
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
}
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.
Cet article est la propriété de www.developpez.com en tant qu'hebergeur ainsi que
celle de Stephaneey en tant que redacteur, ce texte est donc protégé par le code de la
propriété intellectuelle et est soumis à la réglementation en vigueur.
www.developpez.com ou son auteur se reserve le droit d'apporter des modifications
sans préavis. Vous pouvez utiliser cet article comme bon vous semble, faire un lien depuis
votre site Web, ou le copier en spécifiant l'auteur et la provenance (www.developpez.com)
Le non respect de cette règle equivaudrait à faire une contrefaçon. La responsabilité de
www.developpez.com, de l'un de ses membres, ou de la direction ne pourra etre engagé en cas
de destruction partielle ou totale des données ou de l'architecture système ou logicielle
inhérente à l'utilisation des ses logiciels. Les logiciels decrits ici sont la propriété de
leurs auteurs respectifs.
