Share
Tijdens deze tutorial ga ik je meenemen door een eenvoudige schuifregelaar te maken die door een persoonlijke microsite scrolt. We zullen de GreenSock Timeline Lite-klasse gebruiken en demonstreren hoe eenvoudig het uw Flash-animatieworkflow kan maken.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Van tijd tot tijd gebeuren er veranderingen in ons leven, veranderingen die ons dwingen om opnieuw na te denken over de manier waarop we handelen. Dit geldt vooral in onze gemeenschap, waar we dagelijks geconfronteerd worden met veranderingen die de manier waarop we bouwen wat we bouwen in vraag stellen.
Sommige van deze wijzigingen zijn voor het ergste, zoals het verliezen van .php webservice-ondersteuning in Flash ide, maar de meeste zijn ten goede, zoals het optimaliseren van tips. Van tijd tot tijd maakt iemand een klas die een revolutie teweegbrengt in de manier waarop we over Flash denken.
Net zoals Papervision3D was voor 3d, of box2d voor de natuurkunde is er nu Tijdlijn voor animatie. Dit eenvoudige pakket zal uiteindelijk de manier veranderen waarop u ActionScript-animatie structureert, waardoor het mogelijk wordt om een oneindige hoeveelheid virtuele tijdlijnen te creëren, volledig dynamisch, waardoor u de volledige controle over uw animatie hebt. Als dat niet het geval is, kunt u gewoon elke gewenste functie toevoegen als plug-in.
Dit is het moeilijkste deel van de hele tutorial ...
Ga gewoon naar http://blog.greensock.com/timelinemax en download een exemplaar van het GreenSock-tweeningsplatform voor AS3. Het is een zip-bestand, sla het op op je harde schijf, exporteer het naar een map en kopieer de map "com" naar de hoofdmap van waar je van plan bent om de klas te gebruiken. De hele partij is zeer goed gedocumenteerd (zoals je kunt zien in de map Docs) en je hebt zelfs een eenvoudige visualizer.
Naast de com-map heb ik een Main.as gemaakt om als documentklasse en een TimelineMicrosite.fla voor UI-tekening te dienen. Ik heb ook badge-made-with-tweenmax-108x54.gif gekopieerd uit de badges-map in het zipbestand dat we eerder hebben gedownload.
Ik ga me niet concentreren op het maken van een gebruikersinterface, aangezien dit helemaal aan jou is. Ik zal u echter de richtlijnen geven die ik heb gevolgd om deze microsite te maken.
Begin met het maken van vijf lagen en benoem ze: achtergrond, dia's, navigatie, speler en voettekst.
De achtergrondlaag bevat een eenvoudig verloop, niets anders. De dia's bevatten verschillende filmclips. Elke filmclip is een deel van de microsite. In dit geval zijn dit home_mc, about_mc, works_mc en contacts_mc. Elk van hen heeft filmclips genest met instantienamen.
De navigatielaag heeft een navigation_mc filmclip, waarbinnen er een selection_mc is. De structuur is zoals getoond in de onderstaande afbeelding.
De voettekst is slechts een import van de tweenmax-badge. Dit is de volledige structuur:
Jullie weten allemaal hoe dit wordt gedaan toch? In het geval dat je bent vergeten, is dit het skelet voor een hoofddocumentklasse:
package public class Main extends MovieClip public function Main (): void
Als u fdt, flash builder, eclipse met flex sdk of flash ontwikkelt, importeert u deze waarschijnlijk automatisch, maar als u de Flash ide gebruikt om te coderen, moet u naast mijn sympathie ook het volgende importeren:
pakket import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; import com.greensock.easing.Linear; public class Main breidt MovieClip uit public function Main (): void
U wilt dat uw hoofdklasse-functie de scène voor u instelt.
public function Main (): void // Hiermee wordt de animatie van de dia's setupSlides () ingesteld; // Hiermee stelt u de navigatie-instellingen van de dia'sNavigatie () in;
We werken met deze variabelen:
// Een array waarin de dia's worden opgeslagen om gemakkelijker toegang te krijgen tot persoonlijke var-dia's: Array; // Een getal dat een marge instelt voor de dia's private var offset: Number // Een tijdlijn die de dia-tweens privé var slideline opslaat: TimelineMax // Een tijdlijn die elke afzonderlijke dia-tween-reeks opslaat: TimelineMax; // Deze tijdlijn groepeert de tijdlijn van de hoofdanimatie en de tijdlijn van afzonderlijke dia-animaties persoonlijke var-tijdlijn: TimelineMax;
De kern van de microsite. Ik gebruik 3 basisfuncties van deze engine, maar stel je eerst de tijdlijn voor als een echte tijdlijn.
private function setupSlides (): void // vult de dia's op slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // stelt de offset-offset in = 110 // maakt de tijdlijn voor de hoofddia's vast slideline = new TimelineMax () / / maakt de tijdlijn voor elk van de dia's singlelines = new TimelineMax (); // instatiates de tijdlijn die de andere 2 tijdlijnen zal bevatten 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();
We hebben slechts één variabele nodig en het is aan de schuifregelaar om te weten hoeveel er moet worden geschoven.
private var scroll_amount: Number;
Nu zullen we de scroll_amount instellen en enkele listeners aan sommige functies koppelen.
persoonlijke functie setupNavigation (): void // stelt de scroll-waarde in scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true // bij omlaag-omlaag oproepen omlaagHandler-functie navigation_mc.selection_mc.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); // deze luisteraar staat op het podium voor het geval je de stage sleept.addEventListener (MouseEvent.MOUSE_UP, upHandler) // associaties van gebeurtenishandler afspelen, pauzeren en terugspoelen play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)
Dit is de methode die wordt aangeroepen wanneer de muis zich boven de dragger bevindt. Het activeert de muisverplaatsingsluisteraar die de dia's vertelt waar te gaan. Het verwijdert ook elke luisteraar die aan de speler is gekoppeld.
private functie downHandler (e: MouseEvent): void // zorgt ervoor dat de schuifregelaar-update is uitgeschakeld voordat deze versleepbaar wordt gemaakt setUpdateSlider (false) // voegt een listener toe aan muisbewegingen, dus elke keer dat de muis beweegt, wordt het navigatie-schuifgedeelte bijgewerkt. addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // begint met slepen van de schuifregelaar navigation_mc.selection_mc.startDrag (false, new Rectangle (0, 0, scroll_amount, 0)); // update navigatie 1 tijd updateNavigationSlides (null)
Dit is de methode die wordt aangeroepen wanneer de muis omhoog staat. Het stopt gewoon het slepen en verwijdert de luisteraar.
private function upHandler (e: MouseEvent): void // verwijdert de listener in muisbewegingen stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // stopt het slepen navigation_mc.selection_mc.stopDrag ()
Ik hou ervan hoe ik gewoon "ga en stop" naar een label of naar een tijd in een volledig virtuele tijdlijn:
persoonlijke functie updateNavigationSlides (e: MouseEvent): void // gaat op tijd naar dat gedeelte // de berekening is een eenvoudige proportiefractie tussen de x-positie van de selectie en de huidige timeline durationtijdlijn.gotoAndStop (navigation_mc.selection_mc.x * timeline.totalDuration / scroll_amount)
Het gebruik van ActionScript-animatie als video is net zo eenvoudig als het instellen van een tijdschaal en het aanroepen van play (), pause () of reverse ().
// stelt schuifregelaar in om te worden bijgewerkt en hervat tween privéfunctie playSlides (e: MouseEvent): void timeline.timeScale = 1 timeline.play (); setUpdateSlider (true) // verwijdert de schuifregelaar die moet worden bijgewerkt en pauzeert tween persoonlijke functie pauseSlides (e: MouseEvent): void setUpdateSlider (false) // stelt de tijdschaal in en keert de tween private functie rewindSlides om (e: MouseEvent): void timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)
Aangezien er twee methoden zijn om door deze microsite te navigeren, moeten we ervoor zorgen dat de ene de andere niet beïnvloedt, wat later bugs zou kunnen veroorzaken. We moeten dus een kleine setter instellen om te bepalen of de schuifregelaar wel of niet wordt bijgewerkt op basis van de tijdlijnanimatie, in plaats van het tegenovergestelde. Daarvoor maken we een setUpdateSlider
persoonlijke functie setUpdateSlider (bool: Boolean) // case false, controleert of er een listener is, als true animatie onderbreekt en de tween if verwijdert (timeeline.hasEventListener (TweenEvent.UPDATE) && bool == false) timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider) // case true, controleert of er een listener is en of false animatie speelt als (! timeline.hasEventListener (TweenEvent.UPDATE) && bool == true) tijdlijn. hervatten(); timeline.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)
Deze functie wordt elke keer dat een tween-evenement wordt bijgewerkt genoemd
persoonlijke functie updateNavigationSlider (e: TweenEvent): void // doet precies hetzelfde als updateNavigationSlides, maar keert de breuk om, zodat de positie selection_mc wordt bijgewerkt navigation_mc.selection_mc.x = timeline.currentTime * scroll_amount / timeline.totalDuration
Deze functie wordt elke keer dat een tween-evenement wordt bijgewerkt genoemd:
pakket import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; import com.greensock.easing.Linear; public class Main extends MovieClip public function Main (): void // Hiermee wordt de animatie van de dia's setupSlides () ingesteld; // Hiermee stelt u de navigatie-instellingen van de dia'sNavigatie () in; //////////////// DIA'S ///////////////// // Een array waarin de dia's worden opgeslagen voor eenvoudige toegang tot privé var slides : Array; // Een getal dat een marge instelt voor de dia's private var offset: Number // Een tijdlijn die de dia-tweens privé var slideline opslaat: TimelineMax // Een tijdlijn die elke afzonderlijke dia-tween-reeks opslaat: TimelineMax; // Deze tijdlijn groepeert de tijdlijn van de hoofdanimatie en de tijdlijn van afzonderlijke dia-animaties persoonlijke var-tijdlijn: TimelineMax; private function setupSlides (): void // vult de dia's op slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // stelt de offset-offset in = 110 // maakt de tijdlijn voor de hoofddia's vast slideline = new TimelineMax () / / maakt de tijdlijn voor elk van de dia's singlelines = new TimelineMax (); // instaciates de tijdlijn die de andere 2 tijdlijnen zal bevatten 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
Of het nu om Timeline Lite of Timeline Max gaat, het bouwen van interactieve bewegende grafische ervaringen is heel eenvoudig.
Deze tutorial krast alleen het oppervlak van wat de klas kan doen. Het heeft een zeer flexibele workflow, ik ben er nog steeds mee bezig, maar ik verzeker je dat na het spelen met deze klas en het beseffen hoe je er mee kunt denken, je mijn hype zult begrijpen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Accentsconagua