Share
I den første delen av denne serien tok vi et generelt blikk på mulighetene til TimelineLite. I denne videoen viser jeg deg hvordan du kommer opp og kjører med din første TimelineLite-animasjon. Du lærer om de ulike metodene og egenskapene som vil være grunnlag for alle leksjonene fremover.
Du kan finne alle filene som brukes til å opprette SWF ovenfor i kildefilene for denne opplæringen.
Følgende metoder brukes til å legge til tweens til en TimelineLite. Det er veldig viktig å forstå de subtile forskjellene som dekkes av videoen.
sett inn() - Legger til tweens til en tidslinje på et bestemt tidspunkt. Hvis ingen innsettingstid er angitt, vil tween bli satt inn i en starttid på null sekunder.
// denne tween vil bli satt inn i begynnelsen av tidslinjen tl.insert (TweenLite.to (mc, 1, x: 100)); // denne tween vil bli satt inn 2 sekunder inn i tidslinjen tl.insert (TweenLite.to (mc, 1, x: 100), 2);
føye () - Legger til tweens til en tidslinje i forhold til slutten av tidslinjen. Avregningsverdien kan være positiv eller negativ. En negativ offset vil tillate tweens å overlappe.
// denne tween vil umiddelbart etter at alle forrige tweens er ferdig tl.append (TweenLite.to (mc, 1, x: 100)); // denne tween vil spille 1 sekund før alle tidligere tweens er ferdig tl.append (TweenLite.to (mc, 1, x: 100), -1);
foran () - Legger til tweens til begynnelsen av en tidslinje og skyver alle eksisterende tweens fremover i tid.
// denne tweenen oppstår før andre tweens som eksisterer i tidslinjen tl.prepend (TweenLite.to (mc, 1, x: 100));
Følgende egenskaper er svært nyttige for å legge til funksjonalitet i tidslinjer og feilsøking:
Når du bygger en TimelineLite, kan du passere en rekke "spesielle egenskaper" til konstruktøren. Videoen viser onUpdate, OnComplete og pauset. De spesielle egenskapene er alle inneholdt i en vars-objekt.
// denne tidslinjen vil bli midlertidig stoppet og når den er ferdig / / det vil ringe en funksjon som heter completeHandler tl = ny TimelineLite (onComplete: completeHandler, pauset: 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 som tilbys i Official Official Journal. De som er nevnt ovenfor, er de viktigste å forstå når de kommer i gang. Når denne serien utvikler, vil jeg introdusere flere av verktøyene du skal bruke for å få avansert kontroll over oppsett og avspilling av animasjonssekvensene dine.
Den neste videoen i denne serien vil fokusere på å kontrollere en TimelineLite mens den spilles. Det vil dekke alt fra grunnleggende spille() og omvendt() å legge til en interaktiv skrubberkontroll.
Nedenfor er et eksempel på koden som brukes i videoen for å illustrere grunnstrukturen til en TimelineLite.
// constructor tl = ny TimelineLite (); // tweens som introduserer bil. // insert () setter dem alle på en tid på 0 sekunder tl.insert (TweenMax.from (gti_mc, .5, x: -500, blurFilter: blurX: 140)); tl.insert (TweenLite.from (gti_mc.wheel1_mc, .5, rotation: -180)); tl.insert (TweenLite.from (gti_mc.wheel2_mc, .5, rotation: -180)); / / append () legger tweens i forhold til slutten av tidslinjen //.5 sekunder etter forrige tweens slutt denne teksten vil vise i 1 sekund og deretter fade ut tl.append (TweenMax.from (hallo_mc, .5, 0, gjenta: 1, repeatDelay: 1, yoyo: true), .5); // introdusere andre tekst .5 sekunder etter at forrige tween slutter tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // tonesekvens tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: blue), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: rødt), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: black), .5); // siste tekst tl.append (TweenMax.from (black_mc, .5, ala: 0), 1); // valgfritt: legger inn svart boks avslører ved begynnelsen av tidslinjen tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua