TimelineLite Ultimate Starter: Grunnleggende metoder og egenskaper
Del
Del
8
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I den første delen av denne serien tok vi en generell titt på mulighetene til TimelineLite. I denne videoen vil jeg vise deg hvordan du kommer i gang med ditt første TimelineLite animasjon. Du vil lære om de forskjellige metoder og egenskaper som vil være et grunnlag for alle leksjonene fremover.
TimelineLite in Action
Du kan finne alle filer som brukes til å lage SWF ovenfor i kildefilene for denne opplæringen.
Se Screen
TimelineLite Grunnleggende metoder
følgende metoder brukes for å legge tweens til en TimelineLite. Det er veldig viktig å forstå de subtile forskjeller som dekkes i videoen
Sett (.) - Legger tweens til en tidslinje på et bestemt tidspunkt. . Hvis ingen innsetting tid er spesifisert tween vil bli satt inn på en starttid på null sekunder
//dette tween vil bli satt inn på begynnelsen av tidslinjen tl.insert (TweenLite.to (mc, en, {x: 100})); //denne tween vil bli satt inn 2 sekunder inn i tidslinjen tl.insert (TweenLite.to (mc, en, {x: 100}), 2);
append () - Legger tweens til en tidslinje i forhold til slutten av tidslinjen. Forskyvningsverdien kan være positiv eller negativ. En negativ korreksjon vil tillate tweens å overlappe
//dette tween vil direkte etter alle tidligere tweens er ferdig tl.append (TweenLite.to (mc, en, {x: 100}));. //Dette tween vil spille 1 sekund før alle tidligere tweens er ferdig tl.append (TweenLite.to (mc, en, {x: 100}), -1);
Legg til foran () - Legger tweens til begynnelsen av en tidslinje og skyver all eksisterende tweens fremover i tid
//dette tween skje før noen andre tweens som eksisterer i tidslinjen tl.prepend (TweenLite.to (mc, en, {x: 100}));.
TimelineLite Basic Egenskaper
følgende egenskaper er svært nyttig for å legge til funksjonalitet til tidslinjer og for debugging:
tidsskala - Multiplier beskriver hastigheten på tidslinjen der 1 er normal hastighet, 0.5 er halv hastighet, 2 er dobbel hastighet, etc.
currentProgress - verdi mellom 0 og 1 indikerer fremdriften av tidslinjen i henhold til varigheten der 0 er i begynnelsen, 0.5 er halvveis ferdig, og en er ferdig
.
varighet - Varighet av tidslinjen i sekunder
TimelineLite spesielle eiendommer
Ved bygging av en TimelineLite kan du passere en rekke "spesielle egenskaper" i konstruktøren. Videoen demon onUpdate, onComplete, og satt på pause. De spesielle egenskapene er alle inneholdt i en vars objekt
//denne tidslinjen vil bli stanset i utgangspunktet, og når det er gjort //det vil kalle en funksjon som heter completeHandlertl = ny TimelineLite. ({OnComplete: completeHandler, stoppet: true});
TimelineLite har mange flere metoder, egenskaper og "spesielle egenskaper" som er for mange til å liste her. Jeg oppfordrer deg til å undersøke alt det er å tilby i Official TimelineLite dokumentasjon. De som er nevnt ovenfor er det viktigste å forstå når du kommer i gang. Som denne serien utvikler jeg vil være å innføre flere av de verktøyene du skal bruke for å få avansert kontroll over oppsett og avspilling av animasjonssekvenser.
Den neste videoen i denne serien vil fokusere på å kontrollere en TimelineLite mens den spilles. Det vil dekke alt fra enkel avspilling () og revers () for å legge til en interaktiv scrubber kontroll.
TimelineLite kodeeksempel
Nedenfor er et eksempel på kode som brukes i videoen for å illustrere den grunnleggende strukturen i en TimelineLite.
//Konstruktør tl = new TimelineLite (); //Tweens som innfører bil. //Setter () setter dem alle på en gang fra 0 sekunder tl.insert (TweenMax.from (gti_mc, 0,5, {x: -500, blurFilter: {blurX: 140}})); tl.insert (TweenLite.from (gti_mc.wheel1_mc, 0,5, {rotasjon: -180})); tl.insert (TweenLite.from (gti_mc.wheel2_mc, 0,5, {rotasjon: -180})); //Append () legger tweens i forhold til slutten av tidslinjen //.5 sekunder etter forrige tweens ender denne teksten vil vise for en andre og deretter fade ut tl.append (TweenMax.from (hello_mc, 0,5, {alfa: 0, gjentar: 1, repeatDelay: 1, yoyo: true}), 0,5); //Introdusere andre teksten, 5 sekunder etter forrige tween ender tl.append (TweenMax.from (colors_mc, 0,5, {alfa: 0}), 0,5); //Tint sekvens tl.append (TweenMax.to (gti_mc.body_mc, 0,2, {tint: blue}), 0,5); tl.append (TweenMax.to (gti_mc.body_mc, 0,2, {tint: red}), 0,5); tl.append (TweenMax.to (gti_mc.body_mc, 0,2, {tint: svart}), 0,5); //Siste teksten tl.append (TweenMax.from (black_mc, 0,5, {alfa: 0}), 1); //Valgfritt: setter black box avsløre i begynnelsen av tidslinjen tl.prepend (TweenLite.from (cover_mc, 0,5, {y: 0}));