Flash nous offre la possibilité de réaliser plusieurs séquences pour chaque animation, le problème viendra alors du fait que si l’utilisateur final ne désire visionner qu’une seule séquence, la bibliothèque du fichier swf elle contiendra la totalité des séquences et donc sera intégralement chargé sur la machine client dans le but d'être utilisée. Nous allons voir au cours de ce tutorial qu'il est possible de travailler sur le chargement d'animations Flash au sein d'une autre animation Flash, ceci nous permettra de mieux construire nos animations en les éclatant sous forme de modules. Vous trouverez les fichiers nécessaires flash_as_6_1.fla, ici. (Pensez à compiler l'ensemble des fichier FLA en SWF, avant de tester l'animation)
Le chargement d'animations
Le principe du LoadMovie permet d’eviter ces temps de chargement trop important en découpant l’animation finale en plusieurs fichiers shockwave distinct et donc possédant leur propre bibliothèque. Nous chargerons ainsi à la demande les fichiers shockwave nécessaires au bon fonctionnement de l’animation.
De la même manière que les couches d’objets, ou les calques s’intercalent les uns aux autres, il est possible de charger ainsi à divers niveaux des animations Flash. Le niveau minimum étant celui du fichier de lancement initial et se trouve en 0. Il n’y a pas vraiment de niveau maximum, dumoins je n’ai jamais été limité dans le nombre de film Shockwave chargés. Si on charge deux animations au même niveau, la première sera remplacée par la deuxième. De même si nous chargeons une animation en niveau 0, celle ci remplacera la scène de base initiale. Seule la couleur de fond de la scène initiale sera préserver tout au long de l’animation, y compris si une animation de couleur de fond différente est chargée au niveau 0.
Le positionnement de l’animation chargée se fera par rapport au point d’origine des scène c’est à dire, le coin supérier gauche. Il est préférable dans ce cas d’utiliser des animations de même dimensions et de calque guide fixe qui nous serviront à nous reperer d’une animation à l’autre.
Nous pouvons aussi chargée une animation swf, dans une cible, c’est à dire dans un MovieClip. Cette fois ci le positionnement se fera par rapport au centre (point d’alignement du clip). Par contre peut importe la taille du clip, l’intégralité de l’animation ainsi chargée sera visible. A ce sujet, la cible peut être un clip imbriqué dans une autre série de clip, ce qui fait que nous pouvons charger une animation à l’intérieur d’un clip déplacable.
Afin de mettre en oeuvre cet exercice, il nous suffit de réaliser autant d’animations shockwave que nécessaire. Nous pourrions dire ”base.fla” qui sera la première animation lancé, ”boutons.fla” qui serait notre table des matières, ”fond.fla” qui permettrait de définir un fond d’ecran et ”Intro.fla”, ”Partie1.fla”, ”Partie2.fla”, ”Partie3.fla”, et ”Partie4.fla” qui seraient nos animations de chargement alternatives. Une fois cet exercice terminé, nous ajouterons une ”Partie5.fla” qui nous permetra de mettre en place un chargement dans une cible (nous devrons ajouter aussi ”Partie51.fla”, ”Partie52.fla”, et ”Partie53.fla”, qui seront les fichiers à charger).
Pour l’instant, les trois seules animations sur lesquelles nous allons nous attarder sont la première ”base.fla”, notre table des matières ”boutons.fla”, et ”Intro.fla” qui definiera la charte des autres fichiers qui ne doivent que respecter leur positionnement par rapport aux guides.
En fait le fichier ”base.fla”, ne comportera rien de visuel, uniquement les dimensions de la scène la couleur de fond et un script placé sur la TimeLine. ce script permettra de charger les trois animations ”boutons.fla”, ”fond.fla”, et ”Intro.fla”. L’action LoadMovie se trouve dans le menu + --> Action --> Navigateurs/Reseaux --> LoadMovie, et les paramètres sont uniquement le nom du fichier (attention au format swf) et le niveau de chargement (ou le chemin de la cible dans lequel doit s’effectuer le chargement).
loadMovieNum("fond.swf", 10);
loadMovieNum("boutons.swf", 30);
loadMovieNum("intro.swf", 50);
Comme nous ne savons pas encore si nous devrons un jour ou l’autre charger des animations a des niveaux intermédiaire, il est préférable de laisser suffisament de possibilités en choisissant le niveau 10 pour charger notre fond d’ecran, ce qui nous laisse encore 9 niveau inférieur pour éventuellement charger d’autre animations si le cas se présentait. Et ainsi dessuite pour les autres animations ”Boutons.swf” que l’on place en niveau 30, et ”Intro.swf” en niveau 50.
Pour le fichier ”Intro.fla”, il s’agit uniquement de mettre en place une charte visuelle, et un texte garde place afin de ne pas lancer l’animation sur une page planche. C’est un peu le principe des sites HTML utilisant des jeux de cadres, le jeux de cadre principal, charge des fichiers HTML dans des secteurs bien déterminés. Ici la mise en page des secteurs sera fait au travers de l’utilisation de guide virtuel que l’on portera d’animation en animation. Un calque guide est un calque qui permet de visualiser ses éléments uniquement en mode auteur, des la compilation du shockwave ces éléments disparaissent, y compris de la bibliothèque et donc de ce fait n’allourdissent pas le fichier. Grace a ce calque nous allons pouvoir dans chacun de nos fichiers posissionner les éléments avec précision.
Pour copier le calque guide, il suffit de selectionner son image dans la TimeLine et non sur la scène, d’effectuer un click droit (Ctrl Click) et de choisir dans le menu déroulant ‘Copier les images’. Ouvrons un nouveau fichier Flash, et reproduisons l’opération en choisissant cette fois ci ‘Coller les images’.
Le fichier Bouton.fla, réutilise la logique de l’exercice 08-NavVarDyn. Ici l’encapsulation se fera une fois de plus afin d’inclure dans le symbole ‘BtCapsule’ une animation faisant apparaître le bouton (Alpha + Mouvement), et ce enegraianant également chacun des boutons.
Le script d’action est lui aussi adapté au LoadMovie, et composera le nom du fichier à charger, à la volée en fonction du nom d’occurence. Voici les deux scripts celui placé sur l’occurence ‘bouton’, et celui placé sur le Bouton lui même (notons bien qu’il est inutile de placer le script sur le bouton en mouvement, nous le placerons donc sur la dernière image clé de l’animation:
onClipEvent (load) {
_parent.bouton.letitre = _parent._name;
}
on (release) {
loadMovieNum(letitre + ".swf", 50);
}
Voici une capture écran de chacune des interfaces une fois réalisée et projetées en shockwave.
Voyons comment charger une animation dans une cible. Pour cela nous allons réaliser une cinquième partie ”partie5.fla” contenant une cible déplacable, puis rajouter un bouton au sommaire, prévoir une serie de 4 boutons suplémentaires pour le chargement dans la cible, et les 4 fichiers à charger.
Rajoutons le cinquième boutons, et profitons en pour completer le calque guide en repérant le bas du cinquième bouton. En effet lorsque nous allons charger l’animation ”partie5.swf” rien ne nous empèche de rajouter sur cette partie les quatre boutons suplementaires. Fabriquons notre ”partie5.fla” et complétons la.
Nul besoin de refabriquer une serie de bouton, récuperons et adaptons le bouton déjà mis en place. Ouvrons l’animation boutons.fla ainsi que sa bibliothèque (Cmd L - Ctrl L), et faisons glisser le symbole ‘BtCapsule’, directement sur la scène de notre nouvelle animation ”partie5.fla”. Tout les éléments nécessaires imbriqués dans le symbole ainsi déplacé seront également déplacés et importés dans l’animation hôte.
En nous aidant de l’outil pelure d’oignon nous pouvons modifier l’animation et le posissionnement du bouton. Attention une fois ‘oigon sur tout’ selectionné, il faut encore selectionner lensemble des images clés souhaitées directement sur la scène. De cette manière nous allons pouvoir diminué la taille et la course d’animation du bouton.
Rajoutons ensuite au niveau supérieur autant de bouton que nécessaire et nommons leur instance ”partie51”, ”partie52”, ”partie53”, et ”partie54”.
Principe d'ouverture / fermeture de la fenêtre
Coté fenêtre cible, nous allons imbriquer une animation a part entière, c’est à dire une fenêtre qui se déplace mais aussi qui s’ouvre et se ferme à la manière de nos fenêtres système. Nous allons passer rapidement sur la manière de procéder car cela à déjà été détaillé dans d’autres exercice et ce n’est pas non plus le but de celui ci. Le schema ci dessous devrait demontrer l’imbrication et la logique utilisée.Notre animation partie5.fla monté, nous allons ajouter un script sur la première image de la TimeLine afin de charger une animation par defaut dans la fenêtre cible
loadMovie("partie51.swf", "_root.fenetre.bas.charge");
et dans un second temps modifier le script des nouveaux boutons. Cette fois ci au lieu d’indiquer un numéro de niveau, nous choisissons ‘cibe’, et nous rentrons le chemin complet de la cible à atteindre. Notons au passage que du fait que la cible se trouve sur le même niveau que le bouton d’appel, nous pouvons garder une référence à _root, sinon nous aurions du passer par un chemin du style ”_level50.fenetre.bas.charge”.
on (release) {
loadMovie(letitre + ".swf", "_root.fenetre.bas.charge");
}
