Share
Under denne opplæringen skal jeg ta deg gjennom å bygge en enkel skyveknapp som vil rulle et personlig microsite. Vi bruker GreenSock Timeline Lite-klassen og demonstrerer hvor lett fremover det kan gjøre din Flash-animasjons-arbeidsflyt.
La oss se på det endelige resultatet vi vil jobbe for:
Fra tid til annen skjer endringer i våre liv, forandringer som tvinger oss til å tenke på hvordan vi opptrer. Dette gjelder spesielt i vårt samfunn, hvor vi møtes daglig med endringer som spørsmåler hvordan vi bygger det vi bygger.
Noen av disse endringene er det verste, for eksempel å miste .php webservice support i Flash ide, men de fleste av dem er til det bedre, som optimaliserings tips. En gang imellom gjør noen en klasse som revolusjonerer måten vi tenker på Flash.
Som Papervision3D var for 3d eller box2d for fysikk er det nå Tidslinje for animasjon. Denne enkle pakken vil til slutt endre måten du strukturerer ActionScript-animasjon på, slik at du kan lage en uendelig mengde virtuelle tidslinjer, helt dynamisk, slik at du får full kontroll over animasjonen. Hvis det ikke gjør det, kan du bare legge til hvilken funksjon du trenger som et plugin.
Dette er den vanskeligste delen av hele opplæringen ...
Bare gå til http://blog.greensock.com/timelinemax og last ned en kopi av GreenSock tweening-plattformen for AS3. Det er en zip-fil, lagre den på harddisken, eksporter alt til en mappe og kopier "com" -mappen til roten av hvor du planlegger å bruke klassen. Hele parten er veldig godt dokumentert (som du kan se i docs-mappen) og du har til og med en enkel visualiserer.
Foruten com-mappen skapte jeg en Main.as for å fungere som en dokumentklasse og en TimelineMicrosite.fla for UI-tegning. Jeg kopierte også badge-made-with-tweenmax-108x54.gif fra merketmappen som kom i zip-filen vi lastet ned tidligere.
Jeg skal ikke fokusere på hvordan man lager et brukergrensesnitt, da dette er helt opp til deg. Jeg vil imidlertid gi deg retningslinjene jeg fulgte for å lage denne microsite.
Begynn med å lage fem lag og navn dem: bakgrunn, lysbilder, navigasjon, spiller og bunntekst.
Bakgrunnslaget inneholder en enkel gradient, ingenting annet. Lysbildesjiktet inneholder flere filmklipp. Hver filmklipp er et område på microsite. I dette tilfellet er de home_mc, about_mc, works_mc og contacts_mc. Hver av dem har nestede filmklipp med forekomstnavn.
Navigasjonslaget har en navigasjonsfilmclip, innsiden der det er et valg_mc. Dens struktur er som vist på bildet nedenfor.
Bunnteksten er bare en import av tweenmax-merket. Her er det fulle treet:
Du vet alle hvordan dette er gjort riktig? Hvis du har glemt her er skjelettet for en Main-dokumentklasse:
pakke offentlig klasse Hoved utvider MovieClip offentlig funksjon Main (): void
Hvis du bruker fdt, utvikler blitsbygger, formørkelse med flex sdk eller flash, importerer du sannsynligvis disse automatisk, men hvis du bruker Flash-ideen til å kode, så vil du i tillegg til min sympati også importere:
pakke import flash.display.MovieClip; importer flash.events.MouseEvent; importer flash.geom.Rectangle; importer com.greensock.TweenLite; importer com.greensock.TimelineMax; importer com.greensock.events.TweenEvent; importere com.greensock.easing.Linear; offentlig klasse Main utvider MovieClip offentlig funksjon Main (): void
Du vil ha hovedklassefunksjonen til å sette opp scenen for deg.
offentlig funksjon Main (): void // Dette vil sette opp animasjonen av lysbildene setupSlides (); // Dette vil opprette lysbildene navigasjonsoppsettNavigation ();
Vi vil jobbe med disse variablene:
// Et utvalg som vil lagre lysbildene for enklere tilgang til private var lysbilder: Array; // Et tall som vil angi en margin for lysbildene private var offset: Nummer // En tidslinje som vil lagre lysbildet tweens private var slideline: TimelineMax // En tidslinje som vil lagre hvert lysbilde mellom private var singellinjer: TimelineMax; // Denne tidslinjen grupperer tidslinjen for hovedanimasjon og enkeltglasset animasjoner tidslinjen privat var tidslinje: TimelineMax;
Kjernen på microsite. Jeg bruker 3 grunnleggende funksjoner på denne motoren, men først tenk tidslinjen som om det var en ekte tidslinje.
private funksjon setupSlides (): void // befinner lysbildene slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // angir offset offset = 110 // instanser tidslinjen for hovedruten slideline = ny TimelineMax () / / instantierer tidslinjen for hvert av lysbildene singlelines = new TimelineMax (); // instatiates tidslinjen som vil inneholde de andre 2 timelines tidslinjen = ny TimelineMax (); var jeg: int = 0 mens (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();
Vi trenger bare en variabel, og det er for glidebryteren å vite hvor mye som skal skli.
privat var scroll_amount: tall;
Nå skal vi sette opp scroll_amount og knytte noen få lyttere til noen funksjoner.
privatfunksjon setupNavigation (): void // angir rullestrømmen scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true // på Mus Down calls downHandlerfunksjon navigation_mc.selection_mc.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); // denne lytteren er satt på scenen hvis du drar ut stage.addEventListener (MouseEvent.MOUSE_UP, upHandler) // spill, pause og spol tilbake hendelseshandlerforeninger play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)
Dette er metoden som kalles når musen er nede over drageren. Det aktiverer musen flytte lytteren som forteller lysbildene hvor du skal gå. Det fjerner også enhver lytter som er knyttet til spilleren.
privat funksjon downHandler (e: MouseEvent): void // sørger for at glidebryteren er slått av før den gjøres draggable setUpdateSlider (false) // legger til en lytter til musebevegelsen, slik at hver gang musen beveger seg oppdateres navigasjonsglasset. addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // starter dra av skyveknappen navigation_mc.selection_mc.startDrag (falsk, ny rektangel (0, 0, scroll_amount, 0)); // oppdatering navigasjon 1 time updateNavigationSlides (null)
Dette er metoden som kalles når musen er oppe. Det stopper bare dra og fjerner lytteren.
privat funksjon upHandler (e: MouseEvent): void // fjerner lytteren på musebevegelser stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // stopper dra navigation_mc.selection_mc.stopDrag ()
Jeg elsker hvordan jeg kan bare "goto and stop" til en etikett eller til en tid i en fullstendig virtuell tidslinje:
private funksjon updateNavigationSlides (e: MouseEvent): void // går til den delen i tid, // beregningen er en enkel proporsjonsfraksjon mellom x-posisjonen for valget og den aktuelle tidslinjens varighetstidslinje.gotoAndStop (navigation_mc.selection_mc.x * timeline.totalDuration / scroll_amount)
Bruke ActionScript-animasjon som video er like enkelt som å sette opp en timescale og ringe spill (), pause () eller omvendt ().
// sett skyveknappen for å bli oppdatert og fortsetter mellom private funksjon playSlides (e: MouseEvent): void timeline.timeScale = 1 tidslinje.play (); setUpdateSlider (true) // fjerner skyveknappen for å bli oppdatert og pause mellom privatfunksjon pauseSlides (e: MouseEvent): void setUpdateSlider (false) // setter tidsskalaen og reverserer tween privatfunksjonen rewindSlides (e: MouseEvent): void timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)
Siden det er to måter å navigere på dette mikrostedet må vi sørge for at man ikke påvirker den andre, noe som kan føre til feil senere. Så vi trenger å sette opp en liten setter for å identifisere om det vil oppdatere skyveknappen eller ikke i henhold til tidslinjeprogrammeringen, i stedet for motsatt. For det oppretter vi en setUpdateSlider
privat funksjon setUpdateSlider (bool: Boolean) // tilfelle falsk, kontrollerer for å se om det er en lytter, hvis sann pause animasjon og fjerner tween hvis (timeline.hasEventListener (TweenEvent.UPDATE) && bool == false) timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider) // tilfelle sant, sjekker om det er en lytter, hvis falsk spiller animasjon hvis (! timeline.hasEventListener (TweenEvent.UPDATE) && bool == true) tidslinje. gjenoppta(); tidslinje.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)
Denne funksjonen kalles hver gang en tween event oppdateringer
privat funksjon updateNavigationSlider (e: TweenEvent): void // gjør nøyaktig det samme som updateNavigationSlides, men inverterer brøkdelen, slik at oppdateringen selger_mc posisjon navigation_mc.selection_mc.x = tidslinje.currentTime * scroll_amount / timeline.totalDuration
Denne funksjonen kalles hver gang en oppdatering av tween hendelser:
pakke import flash.display.MovieClip; importer flash.events.MouseEvent; importer flash.geom.Rectangle; importer com.greensock.TweenLite; importer com.greensock.TimelineMax; importer com.greensock.events.TweenEvent; importere com.greensock.easing.Linear; offentlig klasse Main utvider MovieClip offentlig funksjon Main (): void // Dette vil sette opp animasjonen av lysbildene setupSlides (); // Dette vil opprette lysbildene navigasjonsoppsettNavigation (); //////////////// SLIDES /////////////////// // En matrise som vil lagre lysbildene for enklere tilgang til private var-lysbilder : Array; // Et tall som vil angi en margin for lysbildene private var offset: Nummer // En tidslinje som vil lagre lysbildet tweens private var slideline: TimelineMax // En tidslinje som vil lagre hvert lysbilde mellom private var singellinjer: TimelineMax; // Denne tidslinjen grupperer tidslinjen for hovedanimasjon og enkeltglasset animasjoner tidslinjen privat var tidslinje: TimelineMax; private funksjon setupSlides (): void // befinner lysbildene slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // angir offset offset = 110 // instanser tidslinjen for hovedruten slideline = ny TimelineMax () / / instantierer tidslinjen for hvert av lysbildene singlelines = new TimelineMax (); // instaciates tidslinjen som vil inneholde de andre 2 timelines tidslinjen = ny TimelineMax (); var jeg: int = 0 mens (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
Det være seg Timeline Lite, eller Timeline Max, å bygge interaktive bevegelses grafiske opplevelser med dem er veldig enkelt.
Denne opplæringen skraper bare overflaten av hva klassen kan gjøre. Den har en veldig fleksibel arbeidsflyt, jeg jobber fortsatt gjennom det, men jeg forsikrer deg om at etter å ha spilt med denne klassen og skjønner hvordan du skal tenke med det, vil du forstå min hype.
Jeg håper du likte denne opplæringen, takk for å lese!
Accentsconagua