ACTIONSCRIPT 3 ET MOTION DESIGN

La galerie simple

Dans cette version, nous initialisons les objets à mettre en forme à partir d’instructions répétées. Puis, nous ajoutons les comportements requis pour les animations et l’interactivité.

Exemples > ch9_3DNative_4.fla

Dans le document « ch9_3DNative_4.fla », sur la scène principale, le symbole contenu_mcaffiche six occurrences du même MovieClip, mais de noms différents. Ce MovieClipcontient un composant FLVPlayBack nommé ecranVideo (voir Figure 9.23).Dans la fenêtre de scénario, au-dessus du calque fond_mc, on distingue le symbolecontenu_mc (voir Figure 9.24).La fenêtre Actions affiche le code suivant ://—————— initialisationimport flash.filters.*;Figure 9.23Aperçu de la scène principale.Figure 9.24Aperçu du scénario.var haloIn:GlowFilter=new GlowFilter(0xffffff, 1, 2, 2, 3, 255, false, false); var haloOut:GlowFilter=new GlowFilter(0xffffff, 0, 2, 2, 3, 255, false, false); import gs.TweenMax;import gs.easing.*;import gs.events.*;var demieScene:Number=stage.stageWidth/2;var hauteurScene:Number=stage.stageHeight/2;var Tween3D:TweenMax;var nomImageActive:String;//—————— configuration des écrans vidéocontenu_mc.v1_mc.ecranVideo.source= »video3D/3d-gKaster C19.f4v »;contenu_mc.v2_mc.ecranVideo.source= »video3D/3d-gKaster amusement.f4v »;contenu_mc.v3_mc.ecranVideo.source= »video3D/3d-gKaster-balistic.f4v »;contenu_mc.v4_mc.ecranVideo.source= »video3D/3d-gKaster-demoreel.f4v »;contenu_mc.v5_mc.ecranVideo.source= »video3D/3d-galaxieFull.f4v »;contenu_mc.v6_mc.ecranVideo.source= »video3D/3d-particules.f4v »;//contenu_mc.v1_mc.rotationY=-30;contenu_mc.v2_mc.rotationY=0;contenu_mc.v3_mc.rotationY=30;contenu_mc.v4_mc.rotationY=-30;contenu_mc.v5_mc.rotationY=0;contenu_mc.v6_mc.rotationY=30;//contenu_mc.v1_mc.z=-25;contenu_mc.v2_mc.z=40;contenu_mc.v3_mc.z=-25;contenu_mc.v4_mc.z=-25;contenu_mc.v5_mc.z=40;contenu_mc.v6_mc.z=-25;//for (var i:Number=0; i<contenu_mc.numChildren; i++) { MovieClip(contenu_mc.getChildAt(i)).ecranVideo.stop(); MovieClip(contenu_mc.getChildAt(i)).ecranVideo.scaleMode= »exactFit »; MovieClip(contenu_mc.getChildAt(i)).ecranVideo.autoPlay=false;}//—————— actions// mur d’image 3Dcontenu_mc.addEventListener(Event.ENTER_FRAME,murImages);function murImages (evt:Event) { contenu_mc.rotationY=(mouseX-demieScene)*0.1;contenu_mc.rotationX=(mouseY-hauteurScene)*-0.1;}// interactivité vidéocontenu_mc.addEventListener(MouseEvent.CLICK,zoomVideo);function zoomVideo (evt:MouseEvent) { //contenu_mc.removeEventListener(Event.ENTER_FRAME,murImages); TweenMax.to(contenu_mc, 3, {rotationX:0, rotationY:0, delay:0, ➥ ease:Elastic.easeInOut}); //Le programme se décompose en cinq parties. La première importe les classes requises dontles filtres et les transitions TweenMax. La deuxième initialise les caractéristiques de chaquecomposant vidéo et le positionnement de son conteneur dans l’espace 3D. La troisièmeactive l’animation 3D du mur d’écrans. La quatrième lance l’interactivité avec les fluxvidéo. La cinquième, enfin, ajoute l’effet rollOver sur chaque vidéo et active la lecture decette vidéo.Dans la deuxième partie, chaque composant est initialisé selon les paramètres suivants.L’ensemble de ces réglages est décliné pour chacune des vidéos. Voici les caractéristiquespour l’une d’entre elles ://—————— configuration des écrans vidéocontenu_mc.v1_mc.ecranVideo.source= »video3D/3d-gKaster-C19.f4v »;//contenu_mc.v1_mc.rotationY=-30;//contenu_mc.v1_mc.z=-25;

Analysons le code :

• La propriété source désigne l’URL du fichier vidéo à lire.
• Les propriétés rotationY et rotationZ positionnent non pas le composant mais sonconteneur, le MovieClip, dans l’espace 3D.Plus loin, nous utilisons une boucle for afin de regrouper la gestion de l’ensemble descomposants vidéo distribués dans chaque MovieClip :for (var i:Number=0; i<contenu_mc.numChildren; i++) { MovieClip(contenu_mc.getChildAt(i)).ecranVideo.stop(); MovieClip(contenu_mc.getChildAt(i)).ecranVideo.scaleMode= »exactFit »; MovieClip(contenu_mc.getChildAt(i)).ecranVideo.autoPlay=false;}Analysons le code :

• La méthode stop(), une fois la source appelée, permet de préserver les ressources del’utilisateur en empêchant les vidéos de se lire automatiquement.

• La propriété scaleMode indique si le composant doit être redimensionné en fonctiondes dimensions réelles de la vidéo. La valeur exactFit interdit le redimensionnement.Si la vidéo est plus grande ou de proportions différentes du composant, elle épouseraquand même les dimensions du composant (voir Chapitre 8 pour le descriptif détaillé deces paramètres).
• Enfin, la propriété autoPlay passée sur false empêche la vidéo de lire au démarrage(deux précautions valent mieux qu’une).

La galerie optimisée

Dans cette version, nous optimisons la gestion des propriétés de chaque objet avant de réaliser les animations et développer l’interactivité. Nous distribuons ensuite, sous la forme decommandes compactes, chacune des instructions déjà étudiées dans la version précédente.Exemples > ch9_3DNative_4b.flaLe document possède une structure similaire au précédent. La fenêtre Actions affiche lecode suivant ://—————— initialisationimport flash.filters.*;var haloIn:GlowFilter=new GlowFilter(0xffffff, 1, 2, 2, 3, 255, false, false); var haloOut:GlowFilter=new GlowFilter(0xffffff, 0, 2, 2, 3, 255, false, false); import gs.TweenMax;import gs.easing.*;import gs.events.*;var demieScene:Number=stage.stageWidth/2;var hauteurScene:Number=stage.stageHeight/2;var Tween3D:TweenMax;var nomImageActive:String;//—————— configuration des écrans vidéovar datas:Array = [ {source: »video3D/3d-gKaster-C19.f4v »,rotationY:-30,x:-245,y:-72,z:-25}, {source: »video3D/3d-gKaster-amusement.f4v »,rotationY:0,x:0,y:-72,z:40}, {source: »video3D/3d-gKaster-balistic.f4v »,rotationY:30,x:245,y:-72,z:-25}, {source: »video3D/3d-gKaster-demoreel.f4v »,rotationY:-30,x:-245,y:72,z:-25}, {source: »video3D/3d-galaxieFull.f4v »,rotationY:0,x:0,y:72,z:40}, {source: »video3D/3d-particules.f4v »,rotationY:30,x:245,y:72,z:-25}];for (var i:Number=0; i<contenu_mc.numChildren; i++) { contenu_mc[« v »+i+ »_mc »].ecranVideo.source=datas[i].source; contenu_mc[« v »+i+ »_mc »].rotationY=datas[i].rotationY; contenu_mc[« v »+i+ »_mc »].z=datas[i].z; contenu_mc[« v »+i+ »_mc »].ecranVideo.stop(); contenu_mc[« v »+i+ »_mc »].ecranVideo.scaleMode= »exactFit »; contenu_mc[« v »+i+ »_mc »].ecranVideo.autoPlay=false;}//—————— actions// mur d’image 3Dcontenu_mc.addEventListener(Event.ENTER_FRAME,murImages);function murImages (evt:Event) { contenu_mc.rotationY=(mouseX-demieScene)*0.1;contenu_mc.rotationX=(mouseY-hauteurScene)*-0.1;}// interactivité vidéocontenu_mc.addEventListener(MouseEvent.CLICK,zoomVideo);function zoomVideo (evt:MouseEvent) { // contenu_mc.removeEventListener(Event.ENTER_FRAME,murImages) TweenMax.to(contenu_mc, 3, {rotationX:0, rotationY:0, delay:0, ➥ ease:Elastic.easeInOut}); // for (var i:Number=0; i<contenu_mc.numChildren; i++) { Tween3D=TweenMax.to(contenu_mc[« v »+i+ »_mc »], 0.3, {z:datas[i].z, ➥ x:datas[i].x, y:datas[i].y, rotationY:datas[i].rotationY, delay:0,➥ ease:Strong.easeInOut}); TweenMax.to(contenu_mc[« v »+i+ »_mc »].ecranVideo, 2, {width:220, ➥ height:123, x:-110, y:-62, delay:0.3, ease:Elastic.easeOut}); } // Tween3D.addEventListener(TweenEvent.COMPLETE,restaureFini); function restaureFini (yo:TweenEvent) { contenu_mc.addChild(MovieClip(evt.target)); } if (nomImageActive!=evt.target.name) { nomImageActive=evt.target.name/TweenMax.to(evt.target.ecranVideo, 2, {width:440, height:246, x:-220, ➥ y:-123, delay:0.3, ease:Elastic.easeOut}); TweenMax.to(evt.target,2, {z:-100, x:0, y:0, rotationY:0, delay:0.3, ➥ ease:Elastic.easeOut}); } else { nomImageActive= » »; contenu_mc.addEventListener(Event.ENTER_FRAME,murImages); }}