Share
In het eerste deel van deze serie hebben we de mogelijkheden van TimelineLite uitgebreid bekeken. In deze video laat ik je zien hoe je aan de slag kunt met je eerste TimelineLite-animatie. Je leert over de verschillende methoden en eigenschappen die een basis zullen vormen voor alle lessen die voorwaarts gaan.
U vindt alle bestanden die zijn gebruikt om de SWF hierboven te maken in de bronbestanden voor deze zelfstudie.
De volgende methoden worden gebruikt om tweens aan een TimelineLite toe te voegen. Het is erg belangrijk om de subtiele verschillen te begrijpen die in de video worden behandeld.
voegen () - Voegt tweens toe aan een tijdlijn op een specifiek tijdstip. Als er geen invoegtijd is opgegeven, wordt de tween ingevoegd op een begintijd van nul seconden.
// deze tween wordt ingevoegd aan het begin van de tijdlijn tl.insert (TweenLite.to (mc, 1, x: 100)); // deze tween wordt 2 seconden ingevoegd in de tijdlijn tl.insert (TweenLite.to (mc, 1, x: 100), 2);
toevoegen () - Voegt tweens toe aan een tijdlijn ten opzichte van het einde van de tijdlijn. De offsetwaarde kan positief of negatief zijn. Met een negatieve offset kunnen tweens overlappen.
// deze tween zal direct nadat alle voorgaande tweens tl.append hebben voltooid (TweenLite.to (mc, 1, x: 100)); // deze tween speelt 1 seconde voordat alle voorgaande tweens tl.append hebben voltooid (TweenLite.to (mc, 1, x: 100), -1);
prepend () - Voegt tweens aan het begin van een tijdlijn toe en duwt alle bestaande tweens in de tijd vooruit.
// deze tween vindt plaats vóór andere tweens die voorkomen in de tijdlijn tl.prepend (TweenLite.to (mc, 1, x: 100));
De volgende eigenschappen zijn erg handig voor het toevoegen van functionaliteit aan uw tijdlijnen en voor foutopsporing:
Bij het samenstellen van een TimelineLite kunt u een aantal "speciale eigenschappen" in de constructor invoeren. De video demonstreert onUpdate, onComplete en gepauzeerd. De speciale eigenschappen bevinden zich allemaal in een vars-object.
// deze tijdlijn wordt in eerste instantie gepauzeerd en wanneer deze is voltooid, zal deze een functie aanroepen met de naam completeHandler tl = new TimelineLite (onComplete: completeHandler, paused: true);
TimelineLite heeft veel meer methoden, eigenschappen en "speciale eigenschappen" die te talrijk zijn om hier te vermelden. Ik verzoek u dringend om alles wat er te bieden is te onderzoeken in de officiële TimelineLite-documentatie. De hierboven genoemde zijn het belangrijkste om te begrijpen wanneer u aan de slag gaat. Naarmate deze serie vordert, introduceer ik meer van de tools die je gaat gebruiken om geavanceerde controle te krijgen over de installatie en weergave van je animatiesequenties.
De volgende video in deze serie zal zich richten op het besturen van een TimelineLite terwijl deze wordt afgespeeld. Het zal alles omvatten, van basic spelen() en omgekeerde() om een interactieve scrubber-besturing toe te voegen.
Hieronder staat een voorbeeld van de code die in de video wordt gebruikt om de basisstructuur van een TimelineLite te illustreren.
// constructor tl = new TimelineLite (); // tweens die de auto introduceren. // insert () plaatst ze allemaal op een tijd van 0 seconden 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 () voegt tweens toe ten opzichte van het einde van de tijdlijn //.5 seconden na vorige tweens ten einde deze tekst gedurende 1 seconde te laten verschijnen en vervolgens uit te lichten tl.append (TweenMax.from (hello_mc, .5, alpha: 0, herhaal: 1, repeatDelay: 1, yoyo: true), .5); // introduceer tweede tekst .5 seconden na vorige tween-einden tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // tintsequentie 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); // laatste tekst tl.append (TweenMax.from (black_mc, .5, alpha: 0), 1); // optioneel: voegt zwarte doos toe aan het begin van de tijdlijn tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua