Les transitions d’effets et de filtres

Les transitions d’effets et de filtres

Introduction Les transitions permettent d’ajouter aux animations des effets sur les contenus (fondus enchaînés, Flash d’appareil photo, halo lumineux, flou directionnel, volets ou stores ouvrants, etc.). Pour permettre la gestion de ces effets dans le temps, nous utilisons des classes spécifiques, qui sont transitionManager pour les effets et filters pour les filtres, et les associons éventuellement à un chronomètre de type Timer. En typant ces transitions, il est en outre possible de les faire suivre d’autres effets animés et d’organiser une mise en scène graphique des contenus sur la durée avec des variations d’effets. Dans ce chapitre, nous présentons deux galeries photos qui exploitent respectivement les effets et les filtres en les combinant à des chronomètres. Galerie photo avec transition d’effets Dans cette section, nous abordons les différents types d’effets programmables en ActionScript 3. Pour cela, nous appliquons dans un premier exemple un effet de fondu sur une galerie d’images, puis nous détaillons les propriétés des autres effets disponibles à partir de la classe TransitionManager. Effet de fondu avec un Timer Dans cet exemple, une galerie fait apparaître, en fondu, une série de photographies intégrées physiquement dans la scène du document Flash. Vous pouvez modifier les images et leur nombre ainsi que la durée et le style des transitions, pour personnaliser ce script selon votre convenance et l’intégrer à nos projets (voir Figure 3.1).  Exemples > ch3_transitionsEffetsEtFiltres_1.fla Le document que nous utilisons présente la structure suivante : dans la scène, au-dessus du calque fond_mc, apparaît un symbole nommé galerie_mc (voir Figure 3.2). Ce symbole contient une suite d’images toutes différentes. Une action stop() empêche la tête de lecture de jouer l’animation dès l’exécution du document Flash (voir Figure 3.3). Sur la première image du calque nommé actions, figure le code suivant : //————– initialisation import fl.transitions.*; import fl.transitions.easing.*; var i:Number=1; var nombreDePhotos:Number=6; var dureeBoucle:Number=8000; var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos); var transitionPhoto:TransitionManager=new TransitionManager(galerie_mc); galerie_mc.visible=false; //————– actions boucle.addEventListener(TimerEvent.TIMER,lancerBoucle); boucle.start(); function lancerBoucle(evt:TimerEvent) { lancerGalerie(); } function lancerGalerie () { galerie_mc.visible=true; if (i<=nombreDePhotos) { galerie_mc.gotoAndStop(i); transitionPhoto.startTransition({type:Fade, direction:Transition.IN, ➥ duration:dureeBoucle/2000, easing:Strong.easeInOut}); transitionPhoto.addEventListener(« allTransitionsInDone », suite); function suite(evt:Event) { transitionPhoto.startTransition({type:Fade, direction:Transition.OUT, ➥ duration:dureeBoucle/2000, easing:Strong.easeInOut}); } i++; } else { Figure 3.2 Aperçu du scénario de la scène principale. galerie_mc.visible=false; } } lancerGalerie(); transitionPhoto.addEventListener(« allTransitionsOutDone », suite2); function suite2(evt:Event) { MovieClip(evt.target.content).visible=false; } Tout d’abord, nous importons les classes nécessaires pour l’animation : //————– initialisation import fl.transitions.*; import fl.transitions.easing.*; Ensuite, nous définissons les variables : var i:Number=1; var nombreDePhotos:Number=6; var dureeBoucle:Number=8000; La variable i sert ici à définir la position de la tête de lecture sur l’image du scénario du symbole galerie_mc pour chaque nouvelle image à afficher. La variable nombreDePhotos permet de déterminer le nombre de photos à jouer. Cette valeur correspond a priori au nombre d’images qui figurent dans le scénario du clip galerie_mc, mais elle peut être inférieure. La variable dureeBoucle indique la durée d’une animation pour chaque photo, effets de transition inclus. Cette durée, comme nous le précisons plus loin, est intégrée dans le calcul de la durée de chaque effet. Ainsi, plus la durée de l’animation d’une image est longue, plus les transitions seront longues également. La durée est exprimée en millisecondes. Une valeur de 8 000 correspond donc à un changement d’image toutes les 8 secondes. Ensuite, une variable boucle déclare la création d’un chronomètre. Ce chronomètre enclenche la répétition d’une action autant de fois qu’il y a d’images déclarées (nombreDePhotos), donc toutes les 8 secondes (dureeBoucle). Nous pourrions définir le chronomètre selon l’expression suivante : Timer(durée, nombre de répétition). var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos); Puis, nous déclarons une nouvelle transition : var transitionPhoto:TransitionManager=new TransitionManager(galerie_mc);

Définition de la classe transitionManager

Une transition de la classe transitionManager, appartenant à la famille de la classe transitions, peut être lancée de deux manières. Soit nous activons directement une interpolation sans la typer : TransitionManager.start(monClip_mc,{type:Fade, direction:Transition.IN, ➥ duration:4, easing:Strong.easeInOut}) Soit nous la typons d’abord afin de permettre son identification par la suite et y associer éventuellement plus tard un écouteur, pour enchaîner avec d’autres animations par exemple : var nomDeLaTransition:TransitionManager = new TransitionManager (galerie_mc); nomDeLaTrasition.startTransition({type:Fade, direction:Transition.IN, ➥ duration:4, easing:Strong.easeInOut}); Dans les deux cas, les paramètres de la transition sont les suivants : {type, direction, duration, easing} • type désigne le type d’effet à appliquer. Nous distinguons les effets suivants : Blinds, Fade, Fly, Iris, Rotate, Photo, PixelDissolve, Squeeze, Wipe et Zoom. • Blinds correspond à un effet de stores horizontaux. • Fade correspond à un effet de fondu. • Fly correspond à un effet de translation.  Chacun de ces effets peut être ajusté en fonction des paramètres suivants : • Iris correspond à un effet d’ouverture en cercle similaire à un diaphragme d’appareil photo. • Rotate effectue une rotation. • Photo lance un flash blanc pour simuler un appareil photo. Cet effet peut, par exemple, être associé à la programmation d’un son de déclenchement d’obturateur. • PixelDissolve joue une mosaïque de formes carrées pour simuler un effet de décomposition de l’image. • Squeeze écrase l’image. • Wipe joue un volet sur l’image comme un masque qui se déplace latéralement. • Zoom réduit l’image jusqu’à sa disparition. • direction correspond au point de départ de l’effet. La valeur Transition.IN active l’effet en ouverture. Transition.OUT, l’active en fermeture. • duration correspond à la durée de l’effet, en secondes. • easing, enfin, indique le mode d’accélération à attacher à l’effet (voir Chapitre 2 sur la définition du paramètre easing pour la classe Tween). Pour détecter la fin de l’interpolation avec transitionManager, attachez un écouteur sur le nom d’occurrence de la transition et spécifiez l’événement allTransitionInDone si la transition précédemment exécutée est transition.IN. Spécifiez à l’inverse allTransition-OutDone si la transition précédemment exécutée est transition.OUT. Par exemple : nomDeLaTrasition.addEventListener(« allTransitionsInDone », suite); function suite(evt:Event):void { nomDeLaTrasition.startTransition({type:Fade, direction:Transition.OUT, duration:4, easing:Strong.easeInOut}); } Où placer l’écouteur et la fonction ? L’emplacement de la fonction et de son appel indiffère. Vous pouvez appeler une fonction avant ou après l’avoir rédigée, le lecteur exécutera les deux simultanément. Les designers préfèrent généralement placer la fonction après l’écouteur ou après l’appel de la fonction, car cela reprend une progression logique de l’objet placé dans la scène vers le programme. Tandis que les programmeurs puristes préfèrent souvent placer les fonctions avant les écouteurs, car ils pensent d’abord aux instructions avant leur mise en forme dans la scène qui bien souvent n’existe pas. Enfin, nous terminons en attachant à nouveau un écouteur à la transition qui suit la deuxième interpolation : transitionPhoto.addEventListener(« allTransitionsOutDone », suite2); function suite2(evt:Event) { MovieClip(evt.target.content).visible=false; }  Cette dernière fonction rend la galerie invisible une fois le fondu sortant achevé. Nous ciblons, pour ce faire, la transition courante, avec evt.target, en la convertissant d’abord en MovieClip, avec MovieClip(evt.target.content), afin de permettre de lui appliquer ensuite une propriété de MovieClip avec visible=false.