Create en Slick bilde åpenbarer i Flash Bruke Actionscript 3
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi lage en animert maske bilde åpenbarer, som vil innebære filmklipp, masker og Actionscript 3.
< h3> Endelig resultat Forhåndsvisning
Nedenfor er det endelige resultatet vil vi jobbe mot
Trinn 1 -. Kort oversikt
Vi skal lage den ovenfor effekt, men uten "klikk replay" funksjonen. Her er en oversikt over hva vi skal gjøre. Det vil være to lag. En vil holde handlingene og den andre vil inneholde bildet. Vi vil også lage en animert filmklipp som vil bli lagt til en maske ved kjøring. Formålet med den animerte Movie Clip er å avdekke bildet litt etter litt.
Jeg antar du allerede har en grunnleggende forståelse av Flash og Actionscript 3. Men jeg vil likevel prøve å holde hvert trinn som klart som mulig.
Trinn 2
Opprett en ny Actionscript 3 dokument. Sett Stage størrelse 600 x 420px og 24 FPS. Jeg har valgt denne størrelsen siden bildet jeg skal bruke vil passe pent innenfor disse dimensjonene.
Trinn 3
Gi nytt navn det første laget til "image" og deretter importere bildet. Jeg har importert et bilde av en strand og sentrum justert det til scenen.
Trinn 4
Nå velger bildet og konvertere den til et filmklipp symbol. Jeg har kalt det "strand", men det kan egentlig være hva som helst. Kontroller at registreringspunktet er øverst i venstre hjørne.
Trinn 5
Gi nytt bilde Movie Clip en forekomst navnet "imageToReveal_mc". Lås at lag siden vi ikke vil endre det lenger
Merk:. Jeg har endte navnet med "_mc". Dette er nyttig hvis du vil automatisk kode hinter mens i prosedyrepanelet.
Trinn 6
La oss gjøre litt av animasjon nå. Opprett et nytt symbol og gi den et navn "sirkel animasjon". Velg "Movie Clip" som type.
Trinn 7
Du skal nå være innenfor "sirkel animasjon" tidslinje. Først endre navnet på laget til "animasjon", og deretter opprette en 80 x 80px sirkel på scenen. Senter justere det.
Trinn 8
Velg sirkelen og konvertere den til et symbol (F8). Name it "sirkel" og velg "Graphic" som type. Kontroller at registreringspunktet er "sentrum".
Trinn 9
Velg grafikken sirkel og bruke en enkel bevegelse mellom. Varigheten vil være 14 rammer. Sørg for at sirkelen har en skala fra 1% på ramme 1 og 100% på ramme 14. Du kan justere posisjonen /skala /rotasjon av sirkelen allikevel du liker mellom rammene. Jeg har bare skalert mine.
Trinn 10
Nå opprette et nytt lag i filmklipp som heter "tiltak". Sett en nøkkel ramme på den aller siste rammen (14). Åpne Handlinger panelet og legge en stop action. Dette stopper animasjonen av sløyfen.
Trinn 11
Når det er gjort, gå til biblioteket Panel, høyreklikk "sirkel animasjon" og velg "Egenskaper ...". Sørg for at du er i "Advanced" visning. Sjekk "Export for Action" - "Export i ramme en" automatisk skal sjekkes. For klassen, skriv "CircleAnimation" og forlate basen klassen som "flash.display.MovieClip".
Trinn 12 - Sjekk punkt
Nå gå tilbake til hovedtidslinjen og sørge for at bare "image" laget er på scenen. Den nye "circle animasjon" du laget bør ikke være på scenen, skal det bare finnes i biblioteket.
Trinn 13
Lag et nytt lag som heter "tiltak" og låse den. Velg den første rammen for at lag og gå inn i prosedyrepanelet
. Merk: Vanligvis liker jeg å sette min "handlinger" lag på toppen, så det er lett å finne
Step 14
<. p> Først oppretter en maske for bildet. Deretter legge den til scenen og tilordne masken til bildet Movie Clip
Trinn 15
Nå vil vi lage 4 variabler:. XPOS, yPos, spacingX, og spacingY. "XPOS" og "yPos" vil bli benyttet til å plassere de nye CircleAnimation tilfeller. "spacingX" og "spacingY" er avstanden mellom hver CircleAnimation eksempel langs x og y-aksen.
Trinn 16
Fordi vi ønsker å legge CircleAnimation tilfeller inn i masken én etter én, vi vil bruke en timer for å kalle en funksjon gjentatte ganger. Funksjonen "revealImage" vil bli kalt hvert 30 millisekunder. For å starte Timer må du også ringe "start" metoden
. Merk: Jeg foreslår at du bruker uncommented addEventListener siden det kan hjelpe med minnehåndtering hvis du skulle glemme å fjerne ubrukte lyttere. Den femte parameter (true) refererer til "svak referanse", som standard er satt til "false". For mer informasjon om "svak referanse", ta en titt på dette blogginnlegget.
Step 17
La oss skape "revealImage" funksjon nå. Sørg for at den har en parameter av typen "Timerevent".
Trinn 18
Nå opprette en ny CircleAnimation forekomst og plasser den basert på "XPOS" og "yPos". Deretter legger den inn i masken.
Trinn 19
Foreløpig alle CircleAnimation tilfeller stable opp på toppen av hverandre siden "XPOS" og "yPos" er alltid den samme. Det vi ønsker er å ha de tilfeller vises fra venstre til høyre og fra topp til bunn, så vi må sørge for at vi øke de "XPOS" av "SpaceX". Det samme gjelder for "yPos" med "spacey", men "yPos" bør bare øke når "XPOS" overskrider maksimal x grensen. Når det skjer, må "XPOS" også å tilbake tilbake til venstre.
Trinn 20
Hvis du tester filmen nå, bør det avsløre bildet ut som den endelige effekten. Det er en viktig ting som du kanskje ikke har lagt merke til; CircleAnimation tilfeller er fremdeles under utforming selv etter at bildet er avslørt. Dette er fordi "createChildTimer" hendelse lytteren aldri fjernet. Vi må sjekke for å se om "yPos" har overskredet det maksimale y grensen og i så fall fjerne "createChildTimer" hendelse lytteren
Trinn 21 -. Endelig kode
Forresten, " imageToReveal_mc.x + imageToReveal_mc.width + spacingX "og" imageToReveal_mc.y + imageToReveal_mc.height + spacingY "aldri forandre måten jeg har lagret dem i variablene" maxXPos "og" maxYPos ".
Din endelige koden i Handlinger panelet skal se omtrent slik ut ...
Var maskImg: MovieClip = new 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, falsk, 0, true); createChildTimer.start (); Var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; Var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; funksjon 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); }}
Trinn 22 - Valgfritt rad for rad
Ved å bruke litt av rekursjon, vi kan endre effekten slik at den avslører bildet rad for rad
Var maskImg: MovieClip = new 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, falsk, 0, true); createChildTimer.start (); Var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; Var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; funksjon 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); }}
Trinn 23 - Valgfritt kolonne for kolonne
Her er en kolonne for kolonne versjon. Mesteparten av x- og y-variabler /egenskaper har byttet posisjoner
Var maskImg: MovieClip = new MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; Var XPOS:. Antall = imageToReveal_mc.x; Var yPos: Antall = 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, falsk, 0, true); createChildTimer.start (); Var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; Var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; funksjon 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); }}
Konklusjon
Det er mange andre ting du kan endre for å få forskjellige avslørende effekter som formen brukes i animasjonen, transformasjoner innenfor animasjon, Timer hastighet osv
< p> Takk for at du viser denne opplæringen, og jeg håper du likte den. Anmeldelser