Share
I den första delen av denna serie tog vi en allmän titt på möjligheterna i TimelineLite. I den här videon visar jag hur du kan komma igång med din första TimelineLite-animering. Du lär dig om de olika metoderna och egenskaperna som kommer att ligga till grund för alla lektioner framåt.
Du kan hitta alla filer som används för att skapa SWF ovan i källfilerna för denna handledning.
Följande metoder används för att lägga till tweens till en TimelineLite. Det är väldigt viktigt att förstå de subtila skillnaderna som omfattas av videon.
Föra in() - Lägger till tweens till en tidslinje vid en viss tidpunkt. Om ingen inmatningstid är specificerad sätts in intervallet vid en starttid på noll sekunder.
// denna tween kommer att införas i början av tidslinjen tl.insert (TweenLite.to (mc, 1, x: 100)); // denna tween kommer att sättas in 2 sekunder i tidslinjen tl.insert (TweenLite.to (mc, 1, x: 100), 2);
bifoga() - Lägger till tweens till en tidslinje i förhållande till slutet av tidslinjen. Förskjutningsvärdet kan vara positivt eller negativt. En negativ förskjutning tillåter tweens att överlappa varandra.
// denna tween kommer direkt efter alla tidigare tweens att ha avslutats tl.append (TweenLite.to (mc, 1, x: 100)); // denna tween spelar 1 sekund innan alla tidigare tweens har slutförts tl.append (TweenLite.to (mc, 1, x: 100), -1);
prepend () - Lägger till tweens i början av en tidslinje och trycker alla befintliga tweens framåt i tiden.
// denna tween förekommer före andra tweens som finns i tidslinjen tl.prepend (TweenLite.to (mc, 1, x: 100));
Följande egenskaper är mycket användbara för att lägga till funktionalitet i dina tidslinjer och för debugging:
Vid konstruktion av en TimelineLite kan du skicka ett antal "speciella egenskaper" till konstruktören. Videon visar uppdaterad, komplett och pausad. De speciella egenskaperna finns alla i ett vars-objekt.
// denna tidslinje pausas i början och när den är klar // det kommer att ringa en funktion som heter completeHandler tl = ny TimelineLite (onComplete: completeHandler, pausad: true);
TimelineLite har många fler metoder, egenskaper och "speciella egenskaper" som är för många att lista här. Jag uppmanar dig att undersöka allt som finns att erbjuda i den officiella tidslinjens dokumentation. De som anges ovan är de viktigaste att förstå när de kommer igång. När denna serie fortskrider kommer jag att introducera mer av de verktyg du ska använda för att få avancerad kontroll över inställningen och uppspelningen av dina animationssekvenser.
Nästa video i denna serie fokuserar på att styra en TimelineLite medan den spelas. Det kommer att täcka allt från grundläggande spela() och omvänd() att lägga till en interaktiv scrubber-kontroll.
Nedan visas ett urval av koden som används i videon för att illustrera den grundläggande strukturen i en TimelineLite.
// konstruktör tl = ny TimelineLite (); // tweens som introducerar bil. // insert () sätter dem alla vid 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)); // lägg till () lägger till tweens i förhållande till slutet av tidslinjen //.5 sekunder efter föregående tweens slutet kommer denna text att visas i 1 sekund och sedan blekna ut tl.append (TweenMax.from (hello_mc, .5, alpha: 0, upprepa: 1, repeatDelay: 1, yoyo: true), .5); // införa andra text .5 sekunder efter föregående tween slutar tl.append (TweenMax.from (colors_mc, .5, alfa: 0), .5); // tintsekvens tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: blue), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: red), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: black), .5); // senaste text tl.append (TweenMax.from (black_mc, .5, alfa: 0), 1); // frivilligt: infogar svart ruta avslöjas vid början av tidslinjen tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua