În prima parte a acestei serii am analizat capabilitățile TimelineLite. În acest videoclip vă voi arăta cum să vă înscrieți cu prima animație TimelineLite. Veți învăța despre diferitele metode și proprietăți care vor constitui fundația pentru toate lecțiile avansate.
Puteți găsi toate fișierele utilizate pentru a crea SWF de mai sus în fișierele sursă pentru acest tutorial.
Următoarele metode sunt utilizate pentru a adăuga tweens la un TimelineLite. Este foarte important să înțelegeți diferențele subtile din film.
introduce() - Adaugă tweens la o cronologie la un moment dat. Dacă nu este specificat niciun timp de introducere, tween-ul va fi introdus la o oră de pornire de zero secunde.
// acest tween va fi introdus la începutul liniei temporale tl.insert (TweenLite.to (mc, 1, x: 100)); // acest tween va fi introdus 2 secunde în linia temporală tl.insert (TweenLite.to (mc, 1, x: 100), 2);
adăuga() - Adaugă tweens la o cronologie în raport cu sfârșitul liniei temporale. Valoarea offset poate fi pozitivă sau negativă. Un offset negativ va permite tweens-ului să se suprapună.
// acest tween va fi imediat după ce toate tweens-urile precedente au terminat tl.append (TweenLite.to (mc, 1, x: 100)); // acest tween va juca 1 secundă înainte ca toate tweens-urile anterioare să termine tl.append (TweenLite.to (mc, 1, x: 100), -1);
Prepend () - Adaugă tweens la începutul unei cronologii și împinge toate tween-urile existente înainte în timp.
// aceasta se întâmplă înainte de orice alte tweens care există în linia temporală tl.prepend (TweenLite.to (mc, 1, x: 100));
Următoarele proprietăți sunt foarte utile pentru adăugarea de funcționalități pentru cronologiile dvs. și pentru depanare:
La construirea unui TimelineLite puteți trece un număr de "proprietăți speciale" în constructor. Videoclipul demonstrează onUpdate, onComplete și întrerupt. Proprietățile speciale sunt toate conținute într-un obiect vars.
// această cronologie va fi întreruptă inițial și atunci când se va termina // se va apela o funcție numită completeHandler tl = new TimelineLite (onComplete: completeHandler, paused: true);
TimelineLite are multe alte metode, proprietăți și "proprietăți speciale", care sunt prea numeroase pentru a lista aici. Vă îndemn să investiga tot ce trebuie să oferiți în documentația oficială TimelineLite. Cele menționate mai sus sunt cele mai importante pe care trebuie să le înțelegeți atunci când începeți. Pe măsură ce seria progresează, voi introduce mai multe instrumente pe care le veți folosi pentru a obține un control avansat asupra configurației și redării secvențelor de animație.
Următorul videoclip din această serie se va concentra pe controlul unei cronologii în timpul redării. Acesta va acoperi totul de la bază Joaca()
și inversa()
la adăugarea unui control interactiv al scruber-ului.
Mai jos este un eșantion de cod utilizat în videoclip pentru a ilustra structura de bază a unui TimelineLite.
// constructor tl = noul TimelineLite (); // tweens care introduc masina. // insert () le pune pe toate într-un timp de 0 secunde. tl.insert (TweenMax.from (gti_mc, .5, x: -500, blurFilter: blurX: 140)); tl.insert (TweenLite.from (gti_mc.wheel1_mc, .5, rotație: -180)); tl.insert (TweenLite.from (gti_mc.wheel2_mc, .5, rotație: -180)); // append () adaugă tweens în raport cu sfârșitul liniei cronologice //.5 secunde după terminarea ultimelor tweens acest text va apărea timp de 1 secundă și apoi va dispărea tl.append (TweenMax.from (hello_mc, .5, alpha: 0, repetare: 1, repetDelay: 1, yoyo: true), .5); // introduceți al doilea text .5 secunde după terminarea precedentă a adăugării tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // secventa tintului tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: blue), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: roșu), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: negru), .5); // ultimul text tl.append (TweenMax.from (black_mc, .5, alpha: 0), 1); // opțional: se inserează cutia neagră dezvăluie la începutul liniei temporale tl.prepend (TweenLite.from (cover_mc, .5, y: 0));