Share
În acest tutorial, vom crea un dezvăluitor de imagine mascată animat, care va implica clipuri video, măști și ActionScript 3.
Mai jos este rezultatul final la care vom lucra.
Vom crea efectul de mai sus, dar fără caracteristica "replay click". Iată o prezentare generală a ceea ce vom face. Vor fi două straturi. Unul va ține acțiunile, iar celălalt va conține imaginea. Vom crea, de asemenea, un clip video animat, care va fi adăugat la o mască în timpul run-time. Scopul videoclipului animat este de a dezvălui imaginea bit-by-bit.
Presupun că deja aveți o înțelegere de bază despre Flash și ActionScript 3. Cu toate acestea, voi încerca să păstrez fiecare pas cât mai clar posibil.
Creați un document ActionScript 3 nou. Setați dimensiunea Scale la 600 x 420 pixeli și 24 FPS. Am ales această dimensiune deoarece imaginea pe care o folosesc se va potrivi frumos în aceste dimensiuni.
Redenumiți primul strat la "imagine" și apoi importați imaginea. Am importat o imagine a unei plaje și a aliniat-o la scenă.
Acum, selectați imaginea și convertiți-o într-un simbol Movie Clip. Am numit-o "plajă", dar poate fi cu adevărat ceva. Asigurați-vă că punctul de înregistrare se află în colțul din stânga sus.
Dă noua imagine Clip Clip un nume de instanță al "imageToReveal_mc". Blocați stratul, deoarece nu îl mai schimbăm.
Notă: Am terminat numele cu "_mc". Acest lucru este util dacă doriți să sugerați codul automat în timp ce vă aflați în panoul Acțiuni.
Să facem un pic de animație acum. Creați un nou simbol și dați-i un nume "animație cerc". Selectați "Movie Clip" ca tip.
Acum ar trebui să vă aflați în linia de timp "animație cerc". Mai întâi redenumiți stratul la "animație" și apoi creați un cerc de 80 x 80px pe scenă. Centrul aliniați-l.
Selectați cercul și convertiți-l într-un simbol (F8). Denumiți-l "cerc" și selectați "Tip grafic" ca tip. Asigurați-vă că punctul de înregistrare este "central".
Selectați cercul grafic și aplicați o mișcare simplă. Durata va fi de 14 cadre. Asigurați-vă că cercul are o scală de 1% pe cadrul 1 și 100% pe cadrul 14. Puteți oricând să ajustați poziția / scala / rotația cercului între cadre. Am scalat doar pe a mea.
Acum creați un nou strat în filmul Clip numit "acțiuni". Introduceți un cadru cheie la ultimul cadru (14). Deschideți panoul Acțiuni și adăugați o acțiune de oprire. Acest lucru oprește animația din buclă.
Odată ce ați terminat, mergeți la panoul Bibliotecă, faceți clic dreapta pe "animație cerc" și selectați "Proprietăți ...". Asigurați-vă că sunteți în vizualizarea "Avansat". Verificați "Export pentru ActionScript" - "Export în cadru 1" trebuie verificat automat. Pentru clasă, introduceți "CircleAnimation" și lăsați clasa de bază ca "flash.display.MovieClip".
Acum, reveniți la linia de timp principală și asigurați-vă că doar stratul "imagine" se află pe scenă. Noua "animație de cerc" pe care ați creat-o nu ar trebui să fie pe scenă, ar trebui să existe numai în bibliotecă.
Creați un nou strat numit "acțiuni" și blocați-l. Selectați primul cadru pentru acel strat și accesați panoul Acțiuni.
Mai întâi, creați o mască pentru imagine. Apoi adăugați-o pe scenă și atribuiți-o mască filmului Clip video.
Acum vom crea 4 variabile: xPos, yPos, spacingX și spacingY. "xPos" și "yPos" vor fi utilizate pentru poziționarea noilor instanțe CircleAnimation. "spacingX" și "spacingY" reprezintă distanța dintre fiecare instanță CircleAnimation de-a lungul axelor x și y.
Pentru că vrem să adăugăm instanțe CircleAnimation în mască unul câte unul, vom folosi un cronometru pentru a apela o funcție în mod repetat. Funcția "revealImage" va fi apelată la fiecare 30 de milisecunde. Pentru a porni Cronometrul trebuie de asemenea să apelați metoda "start".
Să creați acum funcția "revealImage". Asigurați-vă că are un parametru de tip "TimerEvent".
Acum creați o nouă instanță CircleAnimation și poziționați-o pe baza "xPos" și "yPos". Apoi adăugați-o în mască.
În prezent, toate instanțele CircleAnimation s-au așezat una peste alta, deoarece "xPos" și "yPos" sunt întotdeauna aceleași. Ceea ce vrem este ca instanțele să apară de la stânga la dreapta și de sus în jos, așa că trebuie să ne asigurăm că creștem "xPos" cu "spaceX". Același lucru este valabil pentru "yPos" de "spaceY", însă "yPos" ar trebui să crească doar când "xPos" depășește limita maximă x. Când se întâmplă acest lucru, "xPos" trebuie de asemenea să reseteze înapoi spre stânga.
Dacă vă testați acum filmul, acesta ar trebui să dezvăluie imaginea ca efectul final. Există un lucru important pe care probabil că nu l-ați observat; Exemplele CircleAnimation sunt încă create chiar după ce imaginea este dezvăluită. Acest lucru se datorează faptului că ascultătorul evenimentului "createChildTimer" nu este niciodată eliminat. Trebuie să verificăm dacă "yPos" a depășit limita maximă y și dacă este cazul, eliminați ascultătorul evenimentului "createChildTimer".
Apropo, imaginile "imageToReveal_mc.x + imageToReveal_mc.width + spacingX" și "imageToReveal_mc.y + imageToReveal_mc.height + spacingY" nu se schimbă niciodată astfel le-am stocat în variabilele "maxXPos" și "maxYPos".
Codul dvs. final din panoul Acțiuni ar trebui să arate cam așa ...
var maskImg: MovieClip = nouClipClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Număr = imagineToReveal_mc.x; var yPos: Număr = imagineToReveal_mc.y; var spacingX: Numărul = 50; var distanța Y: număr = 50; var createChildTimer: Timer = nou Cronometru (30); // createChildTimer.addEventListener (TimerEvent.TIMER, revealImage); createChildTimer.addEventListener (TimerEvent.TIMER, revealImage, false, 0, true); createChildTimer.start (); var maxXPos: Număr = imagineToReveal_mc.x + imagineToReveal_mc.width + spațiereX; var maxYPos: Număr = imagineToReveal_mc.y + imagineToReveal_mc.height + spațiereY; funcția revealImage (evt: TimerEvent): void var ca: CircleAnimation = nou CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spațiereX; dacă (xPos> maxXPos) xPos = imagineToReveal_mc.x; yPos + = spațiereY; dacă (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Folosind un pic de recursivitate, putem schimba efectul astfel încât să dezvăluie rândul imaginii.
var maskImg: MovieClip = nouClipClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Număr = imagineToReveal_mc.x; var yPos: Număr = imagineToReveal_mc.y; var spacingX: Numărul = 50; var distanța Y: număr = 50; var createChildTimer: Timer = nou Cronometru (120); // createChildTimer.addEventListener (TimerEvent.TIMER, revealImage); createChildTimer.addEventListener (TimerEvent.TIMER, revealImage, false, 0, true); createChildTimer.start (); var maxXPos: Număr = imagineToReveal_mc.x + imagineToReveal_mc.width + spațiereX; var maxYPos: Număr = imagineToReveal_mc.y + imagineToReveal_mc.height + spațiereY; funcția revealImage (evt: TimerEvent): void var ca: CircleAnimation = nou CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spațiereX; dacă (xPos> maxXPos) xPos = imagineToReveal_mc.x; yPos + = spațiereY; altfel revealImage (evt); dacă (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Iată o coloană după versiunea coloanei. Majoritatea variabilelor / proprietăților x și y au schimbat pozițiile.
var maskImg: MovieClip = nouClipClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Număr = imagineToReveal_mc.x; var yPos: Număr = imagineToReveal_mc.y; var spacingX: Numărul = 50; var distanța Y: număr = 50; var createChildTimer: Timer = nou Cronometru (120); // createChildTimer.addEventListener (TimerEvent.TIMER, revealImage); createChildTimer.addEventListener (TimerEvent.TIMER, revealImage, false, 0, true); createChildTimer.start (); var maxXPos: Număr = imagineToReveal_mc.x + imagineToReveal_mc.width + spațiereX; var maxYPos: Număr = imagineToReveal_mc.y + imagineToReveal_mc.height + spațiereY; funcția revealImage (evt: TimerEvent): void var ca: CircleAnimation = nou CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); yPos + = spațiereY; dacă (yPos> maxYPos) yPos = imageToReveal_mc.y; xPos + = spațiereX; altfel revealImage (evt); dacă (xPos> maxXPos) createChildTimer.removeEventListener (TimerEvent.TIMER, revealImage);
Există multe alte lucruri pe care le puteți schimba pentru a obține diferite efecte dezvăluitoare, cum ar fi forma folosită în animație, transformările în animație, viteza cronometrului etc..
Vă mulțumim pentru vizionarea acestui tutorial și sper că v-a plăcut.
Accentsconagua