Share
In deze zelfstudie maken we een geanimeerde maskeerversie van afbeeldingen, met filmclips, maskers en ActionScript 3.
Hieronder is het eindresultaat waar we naartoe zullen werken.
We maken het bovenstaande effect, maar zonder de functie 'klik opnieuw afspelen'. Hier is een overzicht van wat we gaan doen. Er zullen twee lagen zijn. De ene houdt de acties vast en de andere bevat de afbeelding. We zullen ook een geanimeerde filmclip maken die tijdens runtime aan een masker wordt toegevoegd. Het doel van de geanimeerde filmclip is om de afbeelding beetje bij beetje te onthullen.
Ik ga ervan uit dat je al een basiskennis hebt van Flash en ActionScript 3. Ik zal echter nog steeds proberen elke stap zo duidelijk mogelijk te houden.
Maak een nieuw ActionScript 3-document. Stel de Stage-maat in op 600 x 420 px en 24 FPS. Ik heb voor deze maat gekozen omdat de afbeelding die ik ga gebruiken, mooi in deze dimensies past.
Hernoem de eerste laag naar "afbeelding" en importeer de afbeelding vervolgens. Ik heb een afbeelding van een strand geïmporteerd en het midden op het strand uitgelijnd.
Selecteer nu de afbeelding en converteer deze naar een filmclipsymbool. Ik heb het 'strand' genoemd, maar het kan echt alles zijn. Zorg ervoor dat het registratiepunt zich in de linkerbovenhoek bevindt.
Geef de nieuwe afbeelding Movie Clip een instantienaam van "imageToReveal_mc". Vergrendel die laag omdat we hem niet meer zullen veranderen.
Opmerking: ik heb de naam beëindigd met "_mc". Dit is handig als u automatische codehints wilt in het deelvenster Handelingen.
Laten we nu een beetje animatie maken. Maak een nieuw symbool en geef het een naam "cirkelanimatie". Selecteer "Movie Clip" als het type.
Je zou nu in de tijdlijn van de "cirkelanimatie" moeten zijn. Hernoem eerst de laag naar "animatie" en maak vervolgens een cirkel van 80 x 80px op het podium. Centreer het.
Selecteer de cirkel en converteer deze in een symbool (F8). Noem het "cirkel" en selecteer "Grafisch" als het type. Zorg ervoor dat het registratiepunt "centraal" is.
Selecteer de grafische cirkel en pas een eenvoudige bewegings-tween toe. De duur is 14 frames. Zorg ervoor dat de cirkel een schaal van 1% heeft op frame 1 en 100% op frame 14. U kunt de positie / schaal / rotatie van de cirkel naar wens aanpassen tussen de frames. Ik heb alleen de mijne geschaald.
Maak nu een nieuwe laag in de filmclip met de naam "acties". Plaats een sleutelframe in het laatste frame (14). Open het deelvenster Handelingen en voeg een stopactie toe. Hiermee stopt de animatie van een lus.
Zodra dat is gebeurd, gaat u naar het Bibliotheekpaneel, klikt u met de rechtermuisknop op "animatie omcirkelen" en selecteert u "Eigenschappen ...". Zorg ervoor dat u zich in de weergave 'Geavanceerd' bevindt. Vink "Exporteren voor ActionScript" aan - "Exporteren in frame 1" moet automatisch worden gecontroleerd. Voer voor de klasse "CircleAnimation" in en verlaat de basisklasse als "flash.display.MovieClip".
Ga nu terug naar de hoofdtijdlijn en zorg ervoor dat alleen de laag "afbeelding" op het podium staat. De nieuwe "cirkelanimatie" die je hebt gemaakt, zou niet op het toneel moeten staan, hij zou alleen in de bibliotheek moeten bestaan.
Maak een nieuwe laag met de naam "acties" en vergrendel deze. Selecteer het eerste frame voor die laag en ga naar het deelvenster Handelingen.
Maak eerst een masker voor de afbeelding. Voeg het vervolgens toe aan het werkgebied en wijs het masker toe aan de afbeelding Filmclip.
Nu maken we 4 variabelen: xPos, yPos, spacingX, en spacingY. "xPos" en "yPos" worden gebruikt om de nieuwe CircleAnimation-instanties te positioneren. "spacingX" en "spacingY" is de afstand tussen elk CircleAnimation-exemplaar langs de x- en y-as.
Omdat we CircleAnimation-instanties één voor één in het masker willen invoegen, gebruiken we een timer om een functie herhaaldelijk te bellen. De functie "revealImage" wordt elke 30 milliseconden genoemd. Om de Timer te starten, moet u ook de "start" -methode aanroepen.
Laten we de functie "revealImage" nu maken. Zorg ervoor dat het een parameter heeft van het type "TimerEvent".
Maak nu een nieuwe instantie voor CircleAnimation en positioneer deze op basis van de "xPos" en "yPos". Voeg het dan toe aan het masker.
Momenteel zijn alle CircleAnimation-instanties op elkaar gestapeld, omdat 'xPos' en 'yPos' altijd hetzelfde zijn. Wat we willen is dat de instanties van links naar rechts en van boven naar beneden verschijnen, dus we moeten ervoor zorgen dat we de "xPos" met "spaceX" verhogen. Hetzelfde geldt voor "yPos" met "spaceY", maar "yPos" zou alleen moeten toenemen wanneer "xPos" de maximale x-grens overschrijdt. Wanneer dat gebeurt, moet "xPos" ook terug naar links worden gereset.
Als u uw film nu test, moet deze de afbeelding onthullen als het uiteindelijke effect. Er is een belangrijk ding dat je misschien niet hebt opgemerkt; CircleAnimation-instanties worden nog steeds gemaakt, zelfs nadat de afbeelding is onthuld. Dit komt omdat de gebeurtenislistener "createChildTimer" nooit wordt verwijderd. We moeten controleren om te zien of "yPos" de maximale y-grens heeft overschreden en, zo ja, de "createChildTimer" gebeurtenislistener verwijderen.
By the way, "imageToReveal_mc.x + imageToReveal_mc.width + spacingX" en "imageToReveal_mc.y + imageToReveal_mc.height + spacingY" veranderen nooit, dus ik heb ze opgeslagen in de variabelen "maxXPos" en "maxYPos".
Uw definitieve code in het deelvenster Handelingen zou er ongeveer zo uit moeten zien ...
var maskImg: MovieClip = nieuwe MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; var spacingX: Number = 50; var spacingY: Number = 50; var createChildTimer: Timer = new Timer (30); // createChildTimer.addEventListener (TimerEvent.TIMER, revealImage); createChildTimer.addEventListener (TimerEvent.TIMER, revealImage, false, 0, true); createChildTimer.start (); var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; function revealImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spacingX; if (xPos> maxXPos) xPos = imageToReveal_mc.x; yPos + = spacingY; if (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Door een beetje recursie te gebruiken, kunnen we het effect wijzigen, zodat het beeld rij per rij wordt weergegeven.
var maskImg: MovieClip = nieuwe MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; var spacingX: Number = 50; var spacingY: Number = 50; var createChildTimer: Timer = new Timer (120); // createChildTimer.addEventListener (TimerEvent.TIMER, revealImage); createChildTimer.addEventListener (TimerEvent.TIMER, revealImage, false, 0, true); createChildTimer.start (); var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; function revealImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spacingX; if (xPos> maxXPos) xPos = imageToReveal_mc.x; yPos + = spacingY; else revealImage (evt); if (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Hier is een kolom voor kolomversie. De meeste van de x- en y-variabelen / eigenschappen hebben posities geruild.
var maskImg: MovieClip = nieuwe MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; var spacingX: Number = 50; var spacingY: Number = 50; var createChildTimer: Timer = new Timer (120); // createChildTimer.addEventListener (TimerEvent.TIMER, revealImage); createChildTimer.addEventListener (TimerEvent.TIMER, revealImage, false, 0, true); createChildTimer.start (); var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; function revealImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); yPos + = spacingY; if (yPos> maxYPos) yPos = imageToReveal_mc.y; xPos + = spacingX; else revealImage (evt); if (xPos> maxXPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Er zijn veel andere dingen die u kunt veranderen om verschillende onthullende effecten te krijgen, zoals de vorm die in de animatie wordt gebruikt, transformaties in de animatie, timersnelheid, enz..
Bedankt voor het bekijken van deze tutorial en ik hoop dat je het leuk vond.
Accentsconagua