Share
I denne opplæringen lager vi en animert maskeringsbilde, som vil innebære filmklipp, masker og ActionScript 3.
Nedenfor er sluttresultatet vi skal jobbe for.
Vi skaper den ovennevnte effekten, men uten funksjonen "klikk replay". 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 lager også en animert filmklipp som vil bli lagt til i en maske på kjøretid. Hensikten med den animerte filmklippet er å avsløre bildet litt for litt.
Jeg antar at du allerede har en grunnleggende forståelse av Flash og ActionScript 3. Men jeg vil fortsatt prøve å holde hvert trinn så klart som mulig.
Opprett et nytt ActionScript 3-dokument. Still scenestørrelsen til 600 x 420px og 24 FPS. Jeg har valgt denne størrelsen siden bildet jeg bruker vil passe pent inn i disse dimensjonene.
Gi nytt navn til det første laget til "bilde" og importer deretter bildet. Jeg har importert et bilde av en strand og sentrum justert den til scenen.
Velg nå bildet og konverter det til et filmklipp-symbol. Jeg har kalt det "strand", men det kan virkelig være noe. Kontroller at registreringspunktet er øverst til venstre.
Gi det nye bildet Filmklipp et forekomstnavn på "imageToReveal_mc". Lås det laget siden vi ikke vil endre det lenger.
Merk: Jeg har avsluttet navnet med "_mc". Dette er nyttig hvis du vil ha automatisk kodehenvisning mens du er i Handlinger-panelet.
La oss gjøre litt animasjon nå. Opprett et nytt symbol og gi det navnet "sirkel animasjon". Velg "Filmklipp" som typen.
Du bør nå være innenfor tidslinjen "Sirkel animasjon". Først gi nytt navn til laget til "animasjon" og opprett en 80 x 80 px sirkel på scenen. Senter justere det.
Velg sirkelen og konverter den til et symbol (F8). Gi det navnet "sirkel" og velg "Grafisk" som typen. Pass på at registreringspunktet er "senter".
Velg den grafiske sirkelen og bruk en enkel bevegelsestween. Varigheten vil være 14 bilder. Pass på at sirkelen har en skala på 1% på ramme 1 og 100% på ramme 14. Du kan justere stillingen / skalaen / rotasjonen av sirkelen uansett mellom rammene. Jeg har bare skalert min.
Opprett nå et nytt lag i filmklippet kalt "handlinger". Sett inn en nøkkelramme ved siste ramme (14). Åpne Handlinger-panelet og legg til en stopphandling. Dette stopper animasjonen fra looping.
Når det er gjort, gå til Bibliotekspanelet, høyreklikk "Sirkel animasjon" og velg "Egenskaper ...". Pass på at du er i "Avansert" -visningen. Sjekk "Eksporter for ActionScript" - "Eksporter i ramme 1" skal automatisk kontrolleres. For klassen, skriv inn "CircleAnimation" og la grunnklassen være "flash.display.MovieClip".
Gå nå tilbake til hoved tidslinjen, og sørg for at bare "bilde" -laget ligger på scenen. Den nye "sirkelanimasjonen" du opprettet, burde ikke være på scenen, den bør bare finnes i biblioteket.
Opprett et nytt lag kalt "handlinger" og låse den. Velg den første rammen for det laget, og gå inn på Handlinger-panelet.
Først oppretter du en maske for bildet. Legg deretter det til scenen og tilordne masken til bildet Filmklipp.
Nå skal vi opprette 4 variabler: xPos, yPos, mellomromX og mellomromY. "xPos" og "yPos" vil bli brukt til å plassere de nye CircleAnimation-forekomstene. "spacingX" og "spacingY" er avstanden mellom hver CircleAnimation-forekomst langs x- og y-aksen.
Fordi vi vil legge til CircleAnimation-forekomster i masken en etter en, bruker vi en Timer til å ringe en funksjon gjentatte ganger. Funksjonen "revealImage" vil bli kalt hver 30 millisekunder. For å starte Timeren må du også ringe "start" -metoden.
La oss lage "revealImage" -funksjonen nå. Pass på at den har en parameter av typen "TimerEvent".
Opprett nå en ny CircleAnimation-forekomst og plasser den basert på "xPos" og "yPos". Legg deretter den i masken.
For øyeblikket stabler alle CircleAnimation-forekomstene oppe på hverandre, siden "xPos" og "yPos" alltid er de samme. Det vi vil ha, er at forekomstene skal vises til høyre og topp til bunn, så vi må sørge for at vi øker "xPos" med "spaceX". Det samme gjelder for "yPos" av "spaceY", men "yPos" bør bare øke når "xPos" overskrider maksimum x grensen. Når det skjer, må "xPos" også tilbakestille tilbake til venstre.
Hvis du tester din film nå, bør den avsløre bildet som den endelige effekten. Det er en viktig ting som du kanskje ikke har lagt merke til; CircleAnimation-tilfeller blir fremdeles laget selv etter at bildet er avslørt. Dette skyldes at «createChildTimer» hendelseslytteren aldri blir fjernet. Vi må sjekke for å se om "yPos" har overskredet maksimumsgrensen, og i så fall fjerner du "createChildTimer" hendelseslytteren.
Forresten, "imageToReveal_mc.x + imageToReveal_mc.width + spacingX" og "imageToReveal_mc.y + imageToReveal_mc.height + spacingY" endres aldri slik at jeg har lagret dem i variablene "maxXPos" og "maxYPos".
Din endelige kode i handlingspanelet bør se slik ut som dette ...
var maskImg: MovieClip = ny MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; varavstand X: Tall = 50; varavstandenY: tall = 50; var createChildTimer: Timer = Ny 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; funksjon revealImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spacingX; hvis (xPos> maxXPos) xPos = imageToReveal_mc.x; yPos + = spacingY; hvis (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Ved å bruke litt rekursjon, kan vi endre effekten slik at den avslører bildraden for rad.
var maskImg: MovieClip = ny MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; varavstand X: Tall = 50; varavstandenY: tall = 50; var createChildTimer: Timer = Ny 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; funksjon revealImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spacingX; hvis (xPos> maxXPos) xPos = imageToReveal_mc.x; yPos + = spacingY; ellers revealImage (evt); hvis (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Her er en kolonne etter kolonneversjon. De fleste x- og y-variablene / egenskapene har bytteposisjoner.
var maskImg: MovieClip = ny MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; varavstand X: Tall = 50; varavstandenY: tall = 50; var createChildTimer: Timer = Ny 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; funksjon revealImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); yPos + = spacingY; hvis (yPos> maxYPos) yPos = imageToReveal_mc.y; xPos + = spacingX; ellers revealImage (evt); hvis (xPos> maxXPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Det er mange andre ting du kan endre for å få forskjellige avslørende effekter, for eksempel formen som brukes i animasjonen, transformasjoner i animasjonen, Timerhastighet osv..
Takk for visning av denne opplæringen, og jeg håper du likte det.
Accentsconagua