Share
Au cours de ce tutoriel, je vais vous expliquer comment construire un simple curseur permettant de faire défiler un microsite personnel. Nous allons utiliser la classe GreenSock Timeline Lite et montrer à quel point elle peut simplifier le flux de travail de votre animation Flash..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
De temps en temps, des changements se produisent dans nos vies, des changements qui nous obligent à repenser notre façon d’agir. Cela est particulièrement vrai dans notre communauté, où nous sommes quotidiennement confrontés à des changements qui remettent en question la manière dont nous construisons ce que nous construisons..
Certains de ces changements sont pour le pire, tels que la perte de la prise en charge du service Web .php dans Flash ide, mais la plupart d'entre eux sont pour le meilleur, comme l'optimisation des conseils. De temps en temps, quelqu'un fait un cours qui révolutionne notre façon de penser à Flash.
Comme Papervision3d était pour 3d, ou box2d pour la physique, il y a maintenant Chronologie pour l'animation. Ce simple package va finalement changer la façon dont vous structurez l'animation ActionScript, permettant de créer un nombre infini de timelines virtuels, de manière complètement dynamique, vous permettant ainsi de contrôler totalement votre animation. Si ce n'est pas le cas, vous pouvez simplement ajouter la fonctionnalité dont vous avez besoin en tant que plugin..
C'est la partie la plus difficile de tout le tutoriel…
Il suffit d'aller à http://blog.greensock.com/timelinemax et de télécharger une copie de la plate-forme d'interpolation GreenSock pour AS3. C'est un fichier zip, sauvegardez-le sur votre disque dur, exportez-le dans un dossier et copiez le dossier "com" à la racine de l'emplacement où vous envisagez d'utiliser la classe. Le tout est très bien documenté (comme vous pouvez le voir dans le dossier docs) et vous avez même un visualiseur de facilité.
Outre le dossier com, j'ai créé un fichier Main.as destiné à servir de classe de document et un fichier TimelineMicrosite.fla pour le dessin d'interface utilisateur. J'ai également copié badge-made-with-tweenmax-108x54.gif à partir du dossier badges inclus dans le fichier zip que nous avons téléchargé plus tôt..
Je ne vais pas me concentrer sur la création d'une interface utilisateur, car cela dépend entièrement de vous. Je vais toutefois vous donner les directives que j'ai suivies pour créer ce microsite..
Commencez par créer cinq couches et nommez-les: arrière-plan, diapositives, navigation, lecteur et pied de page..
Le calque d'arrière-plan contient un simple dégradé, rien d'autre. La couche de diapositives contient plusieurs MovieClips. Chaque MovieClip est une zone du microsite. Dans ce cas, il s'agit de home_mc, about_mc, works_mc et contacts_mc. Chacun d'entre eux a des MovieClips imbriqués avec des noms d'instance.
La couche de navigation a un movieclip navigation_mc, à l’intérieur duquel se trouve un selection_mc. Sa structure est comme indiqué dans l'image ci-dessous.
Le pied de page est juste une importation du badge tweenmax. Voici l'arbre complet:
Vous savez tous comment cela se passe bien? Au cas où vous auriez oublié, voici le squelette d'une classe de document Main:
package public class Main étend MovieClip public function Main (): void
Si vous utilisez fdt, flash builder, eclipse avec flex sdk ou flash develop, vous les importerez probablement automatiquement, mais si vous utilisez Flash ide pour coder, outre votre sympathie, vous devrez également importer:
package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; importer com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; importer com.greensock.easing.Linear; Classe publique Main étend MovieClip fonction publique Main (): void
Vous voulez que votre fonction de classe principale configure la scène pour vous.
public function Main (): void // Ceci configurera l'animation des diapositives setupSlides (); // Ceci configurera la navigation dans les diapositives setupNavigation ();
Nous allons travailler avec ces variables:
// Un tableau qui stockera les diapositives pour un accès plus facile. Var var: Array; // Un nombre qui définira une marge pour les diapositives private var offset: Number // Un scénario qui stockera les interpolations de diapositives private var slideline: TimelineMax // Un scénario qui stockera chaque diapositive entre les variables var singlelines: TimelineMax; // Ce scénario regroupe le scénario principal de l'animation et celui des animations de diapositives individuelles timeline private var timeline: TimelineMax;
Le noyau du microsite. J'utilise 3 fonctions de base de ce moteur, mais imaginons d'abord la chronologie comme s'il s'agissait d'une vraie chronologie.
fonction privée setupSlides (): void // remplit les diapositives slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // définit le décalage offset = 110 // instancie la chronologie des diapositives principales slideline = new TimelineMax () / / instancie la timeline pour chacune des diapositives singlelines = new TimelineMax (); // installe le scénario qui contiendra les 2 autres scénarios timeline = new TimelineMax (); var i: int = 0 while (i < slides.length) //sets an index so i know in wich position the current slide is slides[i].index = i //aligns the slides slides[i].x = i * 650 + offset //creates the tweens and appends them to a timeline slideline.insert(TweenLite.to(slides[i], 3, x:slides[i].x - 650*3,ease:Linear.easeNone )) //increments the i for the next loop i++ //initial states home_mc.text_mc.alpha = 0 home_mc.image_mc.alpha = 0 about_mc.text_mc.alpha = 0 works_mc.text_mc.alpha = 0 works_mc.image1_mc.alpha = 0 works_mc.image2_mc.alpha = 0 works_mc.image3_mc.alpha = 0 contacts_mc.text_mc.alpha = 0 //sequencing the animations singlelines.append(TweenLite.to(home_mc.text_mc, 0.2, alpha:1 )) singlelines.append(TweenLite.to(home_mc.image_mc, 0.2, alpha:1 ), -0.1) singlelines.append(TweenLite.to(about_mc.text_mc, 0.2, alpha:1 ), 0.5) singlelines.append(TweenLite.to(works_mc.text_mc, 0.2, alpha:1 ),0.15) singlelines.append(TweenLite.to(works_mc.image1_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image2_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image3_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(contacts_mc.text_mc, 0.2, alpha:1 ),0.55) //makes both timelines active at the same time. timeline.appendMultiple([slideline, singlelines]); //starts timeline paused timeline.pause();
Nous n'avons besoin que d'une seule variable, et c'est au curseur de savoir combien il faut glisser.
private var scroll_amount: Number;
Maintenant, nous allons configurer le scroll_amount et associer quelques auditeurs à certaines fonctions.
fonction privée setupNavigation (): void // définit le montant du défilement scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true // lors d'un appel de souris vers le bas, fonction de navigationSeuil_mc.selection_mc.addection_mc.addection_mc.selection_mc.buttonMode = true downHandler); // cet écouteur est activé sur la scène si vous faites glisser stage.addEventListener (MouseEvent.MOUSE_UP, upHandler) // les associations de gestionnaires d'événements play, pause et rewind play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)
C'est la méthode appelée lorsque la souris est au-dessus du dragger. Il active l'écouteur de mouvements de la souris qui indique aux diapositives où aller. Il supprime également tout auditeur associé au lecteur..
private function downHandler (e: MouseEvent): void // s'assure que la mise à jour du curseur est désactivée avant de la rendre déplaçable setUpdateSlider (false) // ajoute un écouteur au déplacement de la souris pour mettre à jour l'étape de navigation dans les diapositives. addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // commence le glissement du curseur navigation_mc.selection_mc.startDrag (false, new Rectangle (0, 0, scroll_amount, 0)); // met à jour la navigation 1 fois updateNavigationSlides (null)
C'est la méthode appelée lorsque la souris est en haut. Il arrête juste le glisser et supprime l'auditeur.
fonction privée upHandler (e: MouseEvent): void // supprime l'écouteur lors des mouvements de la souris stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // arrête le glissement navigation_mc.selection_mc.stopDrag ()
J'aime comment je peux juste "aller et s'arrêter" à un label ou à une heure dans un scénario entièrement virtuel:
fonction privée updateNavigationSlides (e: MouseEvent): void // va dans cette partie dans le temps, // le calcul est une simple fraction proportionnelle entre la position x de la sélection et la durée actuelle du scénario timeline.gotoAndStop (navigation_mc.selection_mc.x * timeline.totalDuration / scroll_amount)
Utiliser l'animation ActionScript comme vidéo est aussi simple que de définir une échelle de temps et d'appeler play (), pause () ou reverse ()..
// définit le curseur à mettre à jour et reprend une fonction privée playSlides (e: MouseEvent): void timeline.timeScale = 1 timeline.play (); setUpdateSlider (true) // supprime le curseur à mettre à jour et met en pause une fonction privée pauseSlides (e: MouseEvent): void setUpdateSlider (false) // définit l'échelle de temps et inverse la fonction privée interpol rewindSlides (e: MouseEvent): void timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)
Puisqu'il existe deux méthodes de navigation sur ce microsite, nous devons nous assurer que l'une n'influence pas l'autre, ce qui pourrait causer des bogues plus tard. Nous devons donc configurer un petit installateur pour déterminer s’il mettra à jour le curseur ou non en fonction de l’animation de la timeline, et non l’inverse. Pour cela nous créons un setUpdateSlider
fonction privée setUpdateSlider (bool: Boolean) // case false, vérifie s'il existe un écouteur, si true met l'animation en pause et supprime l'interpolation if (timeline.hasEventListener (TweenEvent.UPDATE) && bool == false) timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider) // case true, vérifie s'il existe un écouteur, si false lit une animation si (! timeline.hasEventListener (TweenEvent.UPDATE) && bool == true) timeline. CV(); timeline.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)
Cette fonction est appelée à chaque fois qu'un événement d'interpolation est mis à jour.
fonction privée updateNavigationSlider (e: TweenEvent): void // fait exactement la même chose que updateNavigationSlides, mais inverse la fraction pour mettre à jour la position selection_mc navigation_mc.selection_mc.x = timeline.currentTime * scroll_amount / timeline.totalDuration
Cette fonction est appelée à chaque fois qu'un événement d'interpolation est mis à jour:
package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; importer com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; importer com.greensock.easing.Linear; classe publique Main étend MovieClip fonction publique Main (): void // Ceci configurera l'animation des diapositives setupSlides (); // Ceci configurera la navigation dans les diapositives setupNavigation (); //////////////// SLIDES //////////////// // // Un tableau qui stockera les diapositives pour un accès plus facile. Private var slides : Tableau; // Un nombre qui définira une marge pour les diapositives private var offset: Number // Un scénario qui stockera les interpolations de diapositives private var slideline: TimelineMax // Un scénario qui stockera chaque diapositive entre les variables var singlelines: TimelineMax; // Ce scénario regroupe le scénario principal de l'animation et celui des animations de diapositives individuelles timeline private var timeline: TimelineMax; fonction privée setupSlides (): void // remplit les diapositives slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // définit le décalage offset = 110 // instancie la chronologie des diapositives principales slideline = new TimelineMax () / / instancie la timeline pour chacune des diapositives singlelines = new TimelineMax (); // installe le scénario qui contiendra les 2 autres scénarios timeline = new TimelineMax (); var i: int = 0 while (i < slides.length) //sets an index so i know in wich position the current slide is slides[i].index = i //aligns the slides slides[i].x = i * 650 + offset //creates the tweens and appends them to a timeline slideline.insert(TweenLite.to(slides[i], 3, x:slides[i].x - 650*3,ease:Linear.easeNone )) //pauses the slideline so it won't start automatically //increments the i for the next loop i++ //initial states home_mc.text_mc.alpha = 0 home_mc.image_mc.alpha = 0 about_mc.text_mc.alpha = 0 works_mc.text_mc.alpha = 0 works_mc.image1_mc.alpha = 0 works_mc.image2_mc.alpha = 0 works_mc.image3_mc.alpha = 0 contacts_mc.text_mc.alpha = 0 //sequencing the animations singlelines.append(TweenLite.to(home_mc.text_mc, 0.2, alpha:1 )) singlelines.append(TweenLite.to(home_mc.image_mc, 0.2, alpha:1 ), -0.1) singlelines.append(TweenLite.to(about_mc.text_mc, 0.2, alpha:1 ), 0.5) singlelines.append(TweenLite.to(works_mc.text_mc, 0.2, alpha:1 ),0.15) singlelines.append(TweenLite.to(works_mc.image1_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image2_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image3_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(contacts_mc.text_mc, 0.2, alpha:1 ),0.55) timeline.appendMultiple([slideline, singlelines]); timeline.pause(); private function gotoLabel(label:String):void slideline.tweenTo(label,ease:Linear.easeInOut); //////////////////NAVIGATION///////////////////// private var scroll_amount:Number; private function setupNavigation():void //sets the scroll ammount scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true //on Mouse Down calls downHandler function navigation_mc.selection_mc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler); //this listener is set on stage in case you drag out stage.addEventListener(MouseEvent.MOUSE_UP, upHandler) //play, pause and rewind event handler associations play_bt.addEventListener(MouseEvent.CLICK, playSlides) pause_bt.addEventListener(MouseEvent.CLICK, pauseSlides) rewind_bt.addEventListener(MouseEvent.CLICK, rewindSlides) private function downHandler(e:MouseEvent):void //makes sure that the slider update is off before making it draggable setUpdateSlider(false) //adds a listener to mouse movement so every time the mouse moves it updates the navigation slides stage.addEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides) //starts drag of the slider navigation_mc.selection_mc.startDrag(false, new Rectangle(0, 0, scroll_amount, 0)); //updates navigation 1 time updateNavigationSlides(null) private function upHandler(e:MouseEvent):void //removes the listener on mouse movements stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides) //stops the drag navigation_mc.selection_mc.stopDrag() private function updateNavigationSlides(e:MouseEvent):void //goes to that part in time, the calculation is a simple proportion fraction between the x position of the selection and the current timeline duration timeline.gotoAndStop(navigation_mc.selection_mc.x*timeline.totalDuration/scroll_amount) //sets slider to be updated and resumes tween private function playSlides(e:MouseEvent):void timeline.timeScale = 1 timeline.play(); setUpdateSlider(true) //removes slider to be updated and pauses tween private function pauseSlides(e:MouseEvent):void setUpdateSlider(false) //sets the timescale and reverses the tween private function rewindSlides(e:MouseEvent):void timeline.timeScale = 5 timeline.reverse(); setUpdateSlider(true) private function setUpdateSlider(bool:Boolean) //case false, checks to see if there is a listener, if true pauses animation and removes tween if (timeline.hasEventListener(TweenEvent.UPDATE) && bool == false) timeline.pause() timeline.removeEventListener(TweenEvent.UPDATE,updateNavigationSlider) //case true, checks to see if there's a listener, if false plays animation if (!timeline.hasEventListener(TweenEvent.UPDATE) && bool == true) timeline.resume(); timeline.addEventListener(TweenEvent.UPDATE,updateNavigationSlider) private function updateNavigationSlider(e:TweenEvent):void //does exactly the same as updateNavigationSlides, but inverts the fraction so that updates the selection_mc position navigation_mc.selection_mc.x=timeline.currentTime*scroll_amount/timeline.totalDuration
Que ce soit avec Timeline Lite ou Timeline Max, créer des expériences graphiques animées interactives avec eux est vraiment facile.
Ce tutoriel ne fait qu'effleurer la surface de ce que la classe peut faire. Son flux de travail est très flexible, je suis toujours en train de le parcourir, mais je vous assure qu'après avoir joué avec cette classe et compris comment penser avec elle, vous comprendrez mon battage médiatique..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua