Build en Slider Mikro med GreenSock Tidslinje Lite
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette innlegget er en del av en serie som heter GreenSock Tweening Platform.Build en Brilliant Binary Clock med FlashInterview med Jack Doyle, grunnlegger av GreenSock
kommer jeg i løpet av denne opplæringen for å ta deg gjennom bygge en enkel skyveknapp som vil rulle en personlig mikro. Vi vil bruke den GreenSock Tidslinje Lite klassen og viste hvor rett-frem det kan gjøre din Flash-animasjon arbeidsflyt.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Innledning
Fra tid til annen, endringer skjer i våre liv, endringer som tvinger oss revurdere måten vi handle . Dette gjelder spesielt i vårt samfunn, der vi står overfor daglig med endringer som stiller spørsmål ved måten vi bygger det vi bygger.
Noen av disse endringene er på det verste, som å miste Php webservice støtte i Flash ide, men de fleste av dem er til det bedre, som å optimalisere tips. En gang i blant noen gjør en klasse som revolusjonerer måten vi tenker om Flash.
Som Papervision3D Dette er den vanskeligste delen av hele opplæringen .. Bare gå til http://blog.greensock.com/timelinemax og laste ned en kopi av GreenSock tweening plattform for AS3. Det er en zip-fil, lagre det på harddisken, eksportere alt sammen til en mappe og kopiere "com" -mappen til roten av hvor du har tenkt å bruke klassen. Hele partiet er meget godt dokumentert (som du kan se i mappen docs) og du selv har en letthet visualiserer I tillegg til com mappen jeg opprettet en Main.as å tjene som et dokument klasse og en TimelineMicrosite.fla for UI tegning. Jeg også kopiert badge-laget-med-tweenmax-108x54.gif fra emblemer mappen som kom i zip-filen vi lastet ned tidligere Jeg er ikke kommer til å fokusere på hvordan å lage et brukergrensesnitt, så dette er helt opp til deg. Jeg vil imidlertid gi deg de retningslinjene jeg følges for å gjøre denne mikro Begynn med å lage fem lag og navngi dem.. Bakgrunn, sklier, navigasjon, spiller og bunntekst Bakgrunnen laget inneholder en enkel gradient, ingenting annet. Den lysbilder laget inneholder flere movieclips. Hver MovieClip er et område av mikro. I dette tilfellet er de home_mc, about_mc, works_mc og contacts_mc. Hver og en av dem har nestet movieclips med forekomstnavn Navigasjons lag har en navigation_mc MovieClip, inne som det er en selection_mc. Dens struktur er som vist på bildet nedenfor. Bunnteksten er bare en import av tweenmax badge. Her er hele treet: Du vet alle hvordan dette er gjort riktig? I tilfelle du har glemt her er skjelettet for et hoveddokument klasse: Hvis du bruker FDT, blits byggmester, formørkelse med flex SDK eller flash-utvikler, har du sannsynligvis importere disse automatisk, men hvis du bruker Flash ide å kode, så i tillegg til min sympati vil du også trenger å importere: Du vil ha din viktigste klassen funksjon å sette scenen for deg Vi skal jobbe med disse variablene: Kjernen i mikro. Jeg bruker 3 grunnleggende funksjonene i denne motoren, men først forestille tidslinjen som om det var en ekte tidslinjen. Vi trenger bare én variabel, og det er for glidebryteren for å vite hvor mye du skal skyve Nå skal vi sette opp scroll_amount og knytte noen lyttere til enkelte funksjoner Dette er den metoden som kalles når musen er ned over dragger. Den aktiverer mus flytte lytteren som forteller lysbildene hvor du skal dra. Det fjerner også noen lytteren som er forbundet med spilleren Dette er den metoden som kalles når musen er opp. Det stopper bare dra og fjerner lytteren Jeg elsker hvordan jeg kan bare "goto og stopp" til en etikett eller til en tid i en completly virtuell tidslinje: Ved hjelp av Actionscript animasjon som video er like enkelt som å sette opp en tidsskala og ringer play (), pause () eller bakover (). Siden det er to måter å navigere denne mikro vi må 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 fuglehunden til å finne ut om det vil oppdatere slider eller ikke i henhold til tidslinjen animasjon, i stedet for det motsatte. For at vi skaper en setUpdateSlider Denne funksjonen kalles hver gang noen oppdateringer tween hendelses Denne funksjonen kalles hver gang en tween event oppdateringer: Det være seg Tidslinje Lite, eller Tidslinje Max, bygge interaktive film grafiske erfaringer med dem er veldig enkelt. Dette tutorial bare skraper i overflaten av hva klassen kan gjøre. Den har en svært fleksibel arbeidsflyt, jeg er fortsatt arbeider på min måte gjennom det, men jeg kan forsikre deg om at etter å ha spilt rundt med denne klassen og innser hvordan du tenker med det, vil du forstå min hype. Jeg håper du likte denne opplæringen, takk for lesing!
var for 3d eller box2d
for fysikk, er det nå < em> Tidslinje
for animasjon. Denne enkle pakken til slutt vil endre måten du strukturere Action animasjon, som gjør det mulig å skape en uendelig mengde virtuelle tidslinjer, helt dynamisk, og gir deg full kontroll over animasjonen. Hvis den ikke gjør det, kan du bare legge til hva funksjonen du trenger som en plugin
Trinn 1:. Der for å få det
Trinn 2:. Files Needed
Trinn 3:. Struktur
Trinn 4: Bakgrunn og Slides
Trinn 5:. Navigasjon, spiller og bunn
Trinn 6: Dokument Class
pakken {public class Hoved strekker MovieClip {offentlig funksjon main (): void {}}}
Trinn 7: Importere
pakke {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 Hoved strekker MovieClip {offentlig funksjon main (): void {}}}
Trinn 8:. Main Funksjon
offentlig funksjon main (): void {//Dette vil oppsettet animasjonen av lysbilder setupSlides (); //Dette vil sette opp lysbilder navigasjon setupNavigation (); }
Trinn 9: Sklier Variabler
//En array som vil lagre lysbilder for enklere tilgang til private Var lysbilder: Array; //Et tall som vil sette en margin for lysbildene private Var utlignes: Antall //En tidslinje som vil lagre lysbilde Tweens private Var slideline: TimelineMax //En tidslinje som vil lagre hvert lysbilde lom private Var singlelines: TimelineMax; //Denne tidslinjen grupper hoved animasjon tidslinje og enkelt lysbilder animasjoner tidslinje privat Var tidslinje: TimelineMax;
Trinn 10: Sette opp Slides
Den første funksjonen er å sette (), setter dette en tween i dagens ramme, noe som betyr at hver gang du setter inn () du vil legge til en tween til rammen du arbeider, gjør alle dine innsatser starter samtidig.
Den andre er tilføye (), lar denne metoden meg legge tweens til en tidslinje i en sekvens.
Den tredje er appendMultiple (), lar denne metoden meg passere en rekke tweens å starte på samme tid, i rekkefølge eller med forsinkelse, avhengig av hvordan jeg sette params.
private funksjons setupSlides (): void {//fylles lysbilder lysbilder = new Array (home_mc, about_mc, works_mc, contacts_mc) //setter offset offset = 110 //instantiates tidslinjen for de viktigste lysbilder slideline = new TimelineMax () //instantiates tidslinjen for hver av lysbildene singlelines = new TimelineMax (); //instatiates tidslinjen som skal inneholde den andre 2 tidslinjer tidslinje = new TimelineMax (); Var i: int = 0 while (i < slides.length) {//setter en indeks så jeg vet i wich stilling gjeldende lysbilde er lysbilder [i] .index = i //justerer lysbilder lysbilder [i] .x = i * 650 + offset //skaper tweens og føyer dem til en tidslinje slideline.insert (TweenLite.to (lysbilder [i], 3, {x: lysbilder [i] .x - 650 * 3, letthet: Linear. easeNone})) //inkrementerer jeg for neste bue i ++} //innledende statene 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 a = 0 works_mc.image2_mc.alpha = 0 works_mc.image3_mc.alpha = 0 contacts_mc.text_mc.alpha = 0 //sekvensere animasjonene singlelines.append (TweenLite.to (home_mc.text_mc, 0.2, {alfa: 1}) ) singlelines.append (TweenLite.to (home_mc.image_mc, 0.2, {alfa: 1}), -0,1) singlelines.append (TweenLite.to (about_mc.text_mc, 0.2, {alfa: 1}), 0,5) singlelines. føye (TweenLite.to (works_mc.text_mc, 0.2, {alfa: 1}), 0,15) singlelines.append (TweenLite.to (works_mc.image1_mc, 0.2, {alfa: 1}), 0,05) singlelines.append (TweenLite. til (works_mc.image2_mc, 0.2, {alfa: 1}), 0,05) singlelines.append (TweenLite.to (works_mc.image3_mc, 0.2, {alfa: 1}), 0,05) singlelines.append (TweenLite.to (contacts_mc. text_mc, 0.2, {alfa: 1}), 0,55) //gjør både tidslinjer aktive samtidig. timeline.appendMultiple ([slideline, singlelines]); //starter tidslinjen stanset timeline.pause ();
Trinn 11: Navigasjons Variabler
privat. Var scroll_amount: Number;
Trinn 12:. Sette opp Navigation
privat funksjon setupNavigation (): void {//setter rulle beløpet scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true //på Mus ned kaller downHandler funksjon navigation_mc.selection_mc.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); //denne lytteren er satt på scenen i tilfelle du drar ut stage.addEventListener (MouseEvent.MOUSE_UP, upHandler) //play, pause og spole hendelseshåndterer foreninger play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)}
Trinn 13: downHandler Funksjon
privat funksjon downHandler. (E: MouseEvent): void {//gjør at glideren oppdatering er slått av før du gjør det flyttbare setUpdateSlider (false) //legger en lytter til musebevegelsen så hver gang musen beveger den oppdaterer navigasjons glir stage.addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) //starter dra av glidebryteren navigation_mc.selection_mc.startDrag (falsk, nytt rektangel (0, 0, scroll_amount, 0)); //oppdateringer navigasjon en gang updateNavigationSlides (null)}
Trinn 14: upHandler Funksjon
privat funksjon upHandler (e: MouseEvent):. Void {//fjerner lytteren på musebevegelser stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) //stopper dra navigation_mc.selection_mc .stopDrag ()}
Trinn 15: updateNavigationSlides Funksjon
privat funksjons updateNavigationSlides (e: MouseEvent): void {//går til at en del i tid, //beregningen er en enkel andel brøkdel mellom x plasseringen av utvalget og den nåværende tidslinjen varighet timeline.gotoAndStop (navigation_mc.selection_mc.x * timeline.totalDuration /scroll_amount)}
Trinn 16: Video
//sett glidebryteren for å bli oppdatert og gjenopptar tween privat funksjons playSlides (e: MouseEvent): void {timeline.timeScale = 1 timeline.play (); setUpdateSlider (true)} //fjerner glidebryteren for å bli oppdatert og pauser tween privat funksjons pauseSlides (e: MouseEvent): void {setUpdateSlider (falsk)} //setter tidsskalaen og reverserer tween private funksjons rewindSlides (e: MouseEvent): void {timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)}
Trinn 17: Sette opp Slider Oppdateringer
privat funksjon setUpdateSlider (bool: Boolean) {//tilfelle falsk, sjekker for å se om det er en lytter, hvis sanne pauser animasjon og fjerner tween if (timeline.hasEventListener (TweenEvent.UPDATE) & &! bool == false) {timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider)} //fall sant, sjekker for å se om det er en lytter, hvis falske spiller animasjon if (timeline.hasEventListener (TweenEvent .UPDATE) & & bool == true) {timeline.resume (); timeline.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)}}
Trinn 18: Oppdatere Slider
privat funksjon updateNavigationSlider (e: TweenEvent) : void {//gjør akkurat det samme som updateNavigationSlides, men inverterer brøkdel så oppdaterer selection_mc posisjon navigation_mc.selection_mc.x = timeline.currentTime * scroll_amount /timeline.totalDuration}
Trinn 19: Full Kode
pakke {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 Hoved strekker MovieClip {offentlig funksjon main (): void {//Dette vil oppsettet animasjonen av lysbilder setupSlides (); //Dette vil sette opp lysbilder navigasjon setupNavigation (); } ////////////////SLIDES ///////////////////En array som vil lagre lysbildene for enklere tilgang til private Var lysbilder : Array; //Et tall som vil sette en margin for lysbildene private Var utlignes: Antall //En tidslinje som vil lagre lysbilde Tweens private Var slideline: TimelineMax //En tidslinje som vil lagre hvert lysbilde lom private Var singlelines: TimelineMax; //Dette tidslinje grupper hoved animasjon tidslinje og enkelt lysbilder animasjoner tidslinje privat Var tidslinje: TimelineMax; private funksjons setupSlides (): void {//fylles lysbilder lysbilder = new Array (home_mc, about_mc, works_mc, contacts_mc) //setter offset offset = 110 //instantiates tidslinjen for de viktigste lysbilder slideline = new TimelineMax () //instantiates tidslinjen for hver av lysbildene singlelines = new TimelineMax (); //instaciates tidslinjen som skal inneholde den andre 2 tidslinjer tidslinje = new TimelineMax (); Var i: int = 0 while (i < slides.length) {//setter en indeks så jeg vet i wich stilling gjeldende lysbilde er lysbilder [i] .index = i //justerer lysbilder lysbilder [i] .x = i * 650 + offset //skaper tweens og føyer dem til en tidslinje slideline.insert (TweenLite.to (lysbilder [i], 3, {x: lysbilder [i] .x - 650 * 3, letthet: Linear. easeNone})) //pauser slideline slik at den ikke vil starte automatisk //inkrementerer jeg for neste bue i ++} //innledende statene 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 //sekvensere animasjonene singlelines.append (TweenLite.to ( home_mc.text_mc, 0.2, {alfa: 1})) singlelines.append (TweenLite.to (home_mc.image_mc, 0.2, {alfa: 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, {alfa: 1}), 0,15) singlelines.append (TweenLite.to (works_mc.image1_mc, 0.2, {alfa: 1}), 0,05) singlelines.append (TweenLite.to (works_mc.image2_mc, 0.2, {alfa: 1}), 0,05) singlelines.append (TweenLite.to (works_mc.image3_mc, 0.2, {alfa: 1}), 0,05) singlelines.append (TweenLite.to (contacts_mc.text_mc, 0.2, {alfa: 1}), 0,55) timeline.appendMultiple ([slideline, singlelines]); timeline.pause (); } Private funksjon gotoLabel (label: String): void {slideline.tweenTo (label {letthet: Linear.easeInOut}); } //////////////////NAVIGASJON /////////////////////privat Var scroll_amount: Number; privat funksjon setupNavigation (): void {//setter rulle mengde scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true //på Mus ned kaller downHandler funksjon navigation_mc.selection_mc.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); //denne lytteren er satt på scenen i tilfelle du drar ut stage.addEventListener (MouseEvent.MOUSE_UP, upHandler) //play, pause og spole hendelseshåndterer foreninger play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)} privat funksjon downHandler (e: MouseEvent): void {//gjør at glideren oppdatering er slått av før du gjør det flyttbare setUpdateSlider (false) //legger en lytter til mus bevegelsen så hver gang musen beveger den oppdaterer navigasjons glir stage.addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) //starter dra av glidebryteren navigation_mc.selection_mc.startDrag (falsk, nytt rektangel (0, 0, scroll_amount, 0)); //oppdateringer navigasjon 1 gang updateNavigationSlides (null)} privat funksjon upHandler (e: MouseEvent): void {//fjerner lytteren på musebevegelser stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) //stopper dra navigation_mc.selection_mc.stopDrag ()} private funksjons updateNavigationSlides (e: MouseEvent): void {//går til at en del i tid, beregningen er en enkel andel brøkdel mellom x plasseringen av utvalget og den nåværende tidslinjen varighet timeline.gotoAndStop (navigation_mc.selection_mc. x * timeline.totalDuration /scroll_amount)} //setter glidebryteren for å bli oppdatert og gjenopptar tween privat funksjons playSlides (e: MouseEvent): void {timeline.timeScale = 1 timeline.play (); setUpdateSlider (true)} //fjerner glidebryteren for å bli oppdatert og pauser tween privat funksjons pauseSlides (e: MouseEvent): void {setUpdateSlider (falsk)} //setter tidsskalaen og reverserer tween private funksjons rewindSlides (e: MouseEvent): void {timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)} privat funksjon setUpdateSlider (bool: Boolean) {//tilfelle falsk, sjekker for å se om det er en lytter, hvis sanne pauser animasjon og fjerner tween if (timeline.hasEventListener (TweenEvent.UPDATE) & & bool == false) {timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider)} //fall sant, sjekker for å se om det er en lytter, hvis falske spiller animasjon if (! timeline.hasEventListener (TweenEvent.UPDATE) & & bool == true) {timeline.resume (); timeline.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)}} privat funksjon updateNavigationSlider (e: TweenEvent): void {//gjør akkurat det samme som updateNavigationSlides, men inverterer brøkdel så oppdaterer selection_mc posisjon navigation_mc.selection_mc.x = tidslinje. currentTime * scroll_amount /timeline.totalDuration}}}
Konklusjon