Share
Flash staat bekend om het leveren van rijke interactieve ervaringen met veel "eye-candy". Vaak wordt dit eye-candy bereikt door middel van animatie en Flash heeft geweldige animatievaardigheden. Tijdens deze tutorial bespreken we tweening; De geautomatiseerde animatie van Flash.
In deze tutorial zal ik het volgende bespreken:
Wikipedia legt tweening als volgt uit:
Tussentussen of tweening is het proces van het genereren van tussenliggende frames tussen twee afbeeldingen om het uiterlijk te geven dat het eerste beeld vloeiend in het tweede beeld evolueert. Inbetweens zijn de tekeningen tussen de keyframes die helpen de illusie van beweging te creëren. Inbetweening is een sleutelproces in alle soorten animatie, inclusief computeranimatie.
De meeste mensen die Flash hebben gebruikt, hebben eerder een Tween ontmoet. Sinds het begin van Flash, is er de mogelijkheid om te tweenen met behulp van de tijdlijn.
We zullen niet bespreken hoe we kunnen tween met behulp van de tijdlijn, we zullen bespreken hoe tween met behulp van ActionScript 3.0!
De Tween-klasse is de klasse die alle animaties verwerkt en alle eigenschappen met een numerieke waarde kan animeren. Deze eigenschappen kunnen zijn:
Hoewel de klasse Tween meestal wordt gebruikt om weergaveobjecten te animeren (objecten die kunnen worden gezien), kunt u deze net zo effectief gebruiken om het volume van een geluidskanaal tween te gebruiken (bijvoorbeeld).
De constructor van de Tween-klasse is behoorlijk lang, maar maak je geen zorgen, het is heel eenvoudig.
var tween: Tween = nieuwe Tween (obj: Object, prop: String, func: Functie, begin: Number, finish: Number, duration: Number, useSeconds: Boolean = false)
Laten we de parameters één voor één bekijken. We willen een filmclip laten vervagen plein als voorbeeld. OK, laten we dit doen:
Overgangen zijn al genoemd in stap 3, maar laten we verder gaan in meer detail. Een overgang is een functie die beschrijft hoe een eigenschap naar een eindwaarde toe beweegt. Deze overgangen kunnen ook bepaalde effecten creëren, bijvoorbeeld een stuitering of een elastisch effect.
Er zijn heel veel overgangen en ze zijn als volgt in verschillende klassen verdeeld:
Dus wat doe je als je niet geleidelijk wilt versnellen, maar geleidelijk wilt vertragen? Alle overgangsklassen hebben drie functies:
Deze overgangen kunnen worden getekend als een functie (en met functie bedoel ik een wiskundige functie, een lijn). Bekijk deze transitie-spiekbrief om een idee te krijgen van wat elke overgang doet. Sommige overgangen zijn niet genoemd, dit komt omdat deze overgangen afkomstig zijn van de Tweener-klasse, die ik in stap 18 zal noemen..
Probeer de demo en controleer hoe elke overgang een eigenschap beïnvloedt. Dit is de beste manier om een idee te krijgen van wat overgangen doen met een tween.
Laten we nu eindelijk aan het werk gaan! We gaan onze allereerste tween maken. Teken een vierkant en converteer het naar een filmclip en geef het daarna een instantienaam van plein.
Nu we onze filmclip hebben, laten we een tween maken! Eerst moeten we de benodigde klassen importeren, omdat deze niet tijdens runtime worden geïmporteerd.
// importeer de Tween-klasse import fl.transitions.Tween; // importeer de overgangen import fl.transition.easing. *;
Maak daarna een variabele met de naam tween, van het type Tween.
// importeer de Tween-klasse import fl.transitions.Tween; // importeer de overgangen import fl.transition.easing. *; // maak een var tween var tween: Tween;
Geef nu de parameters door aan de constructor. De waarden voor onze parameters zijn:
Onze code ziet er als volgt uit:
// importeer de Tween-klasse import fl.transitions.Tween; // importeer de overgangen import fl.transitions.easing. *; // maak een var tween var tween: Tween = nieuwe Tween (vierkant, 'x', Regular.easeInOut, 0, 400, 1.5, waar);
Als je de flitsfilm test (Besturing> Film testen), zie je het volgende:
Nu is het tijd om onze demo te bouwen. Omdat deze tutorial over tweening gaat, zal ik niet bespreken hoe de interface gemaakt moet worden. Open step7.fla, dat zich in de bronbestanden bevindt.
Voordat we beginnen met het schrijven van een regel code, laten we eens kijken hoe het bestand is opgebouwd. Er zijn 4 lagen: Acties, UI, Konijn en BG. We zullen al onze code in de laag schrijven acties. De UI-laag bevat alle componenten van onze gebruikersinterface. Bekijk alle instantienamen van alle componenten goed. De konijnenlaag bevat een filmclip met de naam van het exemplaar konijn, we tweening deze filmclip. De BG-laag bevat simpelweg een achtergrond, die simpelweg niets doet. We moeten ons mooie konijn een mooie plek geven waar hij alles kan doen wat hij wil, toch??
Een goede gewoonte is om eerst alle (globale) variabelen die we zullen gebruiken te declareren. De code is zwaar becommentarieerd, om u een idee te geven wat elke variabele doet.
Opmerking van de uitgever: Ik ben bang dat de ActionScript-code in deze stap ervoor zorgt dat onze syntaxis-markeerstift Firefox overstuurt (dit gebeurt soms en ik heb geen idee waarom). Voor nu is het het beste om het te downloaden om er een kijkje te nemen. Excuses voor het ongemak.
Zoals je misschien hebt gemerkt, gebruiken we een tweedimensionale array. Als je nog niet zo ervaren bent met Arrays, bekijk dan de geweldige tutorial van Dru Kepple over arrays - AS3 101: Arrays. Deze tweedimensionale array bevat alle mogelijke overgangen.
Hoewel we knoppen hebben, moeten we gebeurtenislisteners toevoegen, anders zullen onze knoppen niets doen. Als u niet begrijpt hoe gebeurtenislisteners werken, of als u meer wilt weten over het gebeurteniskader, controleer dan mijn andere zelfstudie Een kijkje nemen in het ActionScript 3.0 Event Framework.
// wanneer op tweenButton wordt geklikt, begin met animeren (activeer de functie animeren) tweenButton.addEventListener (MouseEvent.CLICK, animeren); // resetAlle eigenschappen van konijn opnieuw instellen (reset de functie reset) resetButton.addEventListener (MouseEvent.CLICK, reset);
Wanneer tweenButton is geklikt, we willen beginnen met animeren. Om dit te doen, moeten we een behoorlijk aantal taken uitvoeren:
// wordt aangeroepen door de gebeurtenislistener gekoppeld aan tweenButton-functie animeren (event: MouseEvent): void // haalt de tijdwaarde op uit timeBox time = timeBox.value; // haal de beginwaarde op from beginBox beginValue = beginBox.value; // haal de eindwaarde op uit endBox endValue = endBox.value; // de eigenschap ophalen uit eigenschap propertyBox = propertyBox.value; // zet de overgang naar de juiste waardenswitch (transitionBox.value) case "Back": transitionPos = 0; breken; case "Bounce": transitionPos = 1; breken; case "Elastic": transitionPos = 2; breken; case "Geen": transitionPos = 3; breken; case "Regular": transitionPos = 4; breken; case "Strong": transitionPos = 5; breken; // stel gemak in op de juiste waardenswitch (easeBox.value) case "easeIn": easePos = 0; breken; case "easeOut": easePos = 1; breken; case "easeInOut": easePos = 2; breken; // overgang naar de precieze overgang in de overgangen instellen arrayovergang = overgangen [easePos] [transitionPos]; // tween! tween = nieuwe Tween (rabbit, property, transition, beginValue, endValue, time, true);
Wanneer reset knop is geklikt, we willen alle eigenschappen van opnieuw instellen konijn. Dit is gelukkig veel gemakkelijker dan het creëren van de animatiefunctie.
function reset (event: MouseEvent): void // reset alle eigenschappen van rabbit rabbit.alpha = START_ALPHA; rabbit.x = START_X; rabbit.y = START_Y; rabbit.rotation = START_ROTATION; rabbit.scaleX = START_SCALEX; rabbit.scaleY = START_SCALEY; rabbit.width = START_WIDTH; rabbit.height = START_HEIGHT;
Als je alles goed hebt gedaan, dan heb je de demo met succes gebouwd. Gefeliciteerd, je hebt het gedaan!
Download de volledige code en bewonder alles wat we hebben geschreven:
Natuurlijk, weten hoe te tween is niet genoeg. We moeten het volgende nog bespreken:
Alle volgende voorbeelden worden gedaan met een filmclip, met een instantienaam van plein.
Soms is het geweldig om een startwaarde voor een tween in te stellen, maar de meeste keren wilt u tween vanaf de huidige positie van het object. Gebruik gewoon de eigenschap van het object als startwaarde.
// importeer noodzakelijke klassen import fl.transitions.Tween; import fl.transitions.easing. *; var tween: Tween = nieuwe Tween (vierkant, "alpha", square.alpha, .75, 1, true);
Tweening van meerdere eigenschappen is heel eenvoudig, gebruik de constructor meerdere keren.
// importeer noodzakelijke klassen import fl.transitions.Tween; import fl.transitions.easing. *; var tween: Tween; tween = nieuwe Tween (vierkant, "x", Regular.easeOut, 0, 400, 1.5, waar); tween = nieuwe Tween (vierkant, "y", Elastic.easeOut, 30, 200, 3.5, true); tween = nieuwe Tween (vierkant, "rotatie", Bounce.easeOut, 0, 90, 3, waar);
Een keten van tweens is dat er meerdere tweens zijn, die elk beginnen wanneer de vorige is afgelopen. We moeten dit doen door het evenement te gebruiken TweenEvent.MOTION_FINISH. Deze gebeurtenis treedt op wanneer een tween de tweening voltooit.
// importeer noodzakelijke klassen import fl.transitions.Tween; import fl.transitions.easing. *; import fl.transitions.TweenEvent; // maak de tweens var tween1: Tween = nieuwe Tween (vierkant, "x", Strong.easeInOut, 0, 400, 1.5, waar); var tween2: Tween = nieuwe Tween (vierkant, "y", Bounce.easeOut, square.y, 200, 1, true); var tween3: Tween = nieuwe Tween (vierkant, "alpha", None.easeNone, square.alpha, 0, 2, true); // voorkom tween2 en tween3 om tweening te starten tween2.stop (); tween3.stop (); // voeg gebeurtenislisteners toe aan tween1 en tween 2 tween1.addEventListener (TweenEvent.MOTION_FINISH, startTween2); tween2.addEventListener (TweenEvent.MOTION_FINISH, startTween3); // maak de functies startTween2 en startTween3 function startTween2 (event: TweenEvent): void // make tween2 start tween2.start (); function startTween3 (event: TweenEvent): void // make tween3 start tween3.start ();
U kunt de gebeurtenis TweenEvent.MOTION_FINISH ook gebruiken voor andere dingen dan het maken van een reeks tweens. Denk aan een flash-site, nadat een pagina is getweend, zal een functie worden aangeroepen, die tekst laadt om weer te geven.
Het maken van een tween met een vertraging lijkt veel op het maken van een tweens-reeks. We gebruiken een timer en wanneer het evenement plaatsvindt TimerEvent.TIMER treedt op, waarna de tween start.
// importeer noodzakelijke klassen import fl.transitions.Tween; import fl.transitions.easing. *; // maak onze timer var timer: Timer = new Timer (3000); // start de timer timer.start (); // maak onze tween var tween: Tween = nieuwe Tween (vierkant, "x", Strong.easeInOut, square.x, 300, 2, true); // voorkom tween van onmiddellijk tweening tween.stop (); // voeg een gebeurtenislistener toe aan timer timer.addEventListener (TimerEvent.TIMER, startTween); // create the function startTween function startTween (event: TimerEvent): void // make tween start tween.start ();
De Tween-klasse heeft nogal wat methoden, bijvoorbeeld de jojo-functie zorgt ervoor dat de tween in de achteruit speelt. Zie ook de documentatie over de Tween-klasse.
Soms is de Tween-klasse voldoende voor je project, maar het gebruik van de Tween-klasse kan een hele klus zijn als je veel eigenschappen gaat tweenen, veel vertragingen hebt, enz..
Gelukkig zijn er verschillende (gratis) klassen van derden, die veel meer geavanceerde tween-mogelijkheden hebben. Laten we eens kijken naar de voors en tegens van het gebruik van een derde klas.
De voors:
De nadelen:
De meest gebruikte klassen voor tweening van derden zijn:
Ik zal niet bespreken hoe elke klas te gebruiken, kijk gewoon op de links en ontdek welke het beste werkt voor jou.
Bedankt voor het lezen van deze tutorial. Ik hoop dat je een goed inzicht hebt gekregen in het gebruik van de Tween-klasse. Het was een genoegen om te schrijven voor Flashtuts +! Waarom volg je me niet op Twitter, @DanielApt?
Accentsconagua