Share
In questo tutorial creeremo un mascheratore di immagini animate, che includerà filmati, maschere e ActionScript 3.
Di seguito è riportato il risultato finale a cui lavoreremo.
Creeremo l'effetto sopra, ma senza la funzione di "riproduzione di clic". Ecco una panoramica di ciò che faremo. Ci saranno due livelli. Uno terrà le azioni e l'altro conterrà l'immagine. Creeremo anche un filmato animato che verrà aggiunto a una maschera in fase di esecuzione. Lo scopo del filmato animato è di rivelare l'immagine un po 'alla volta.
Suppongo che tu abbia già una conoscenza di base di Flash e ActionScript 3. Tuttavia, cercherò comunque di mantenere ogni passaggio il più chiaro possibile.
Crea un nuovo documento ActionScript 3. Imposta la dimensione dello stage su 600 x 420px e 24 FPS. Ho scelto questa dimensione dal momento che l'immagine che utilizzerò si adatterà bene a queste dimensioni.
Rinominare il primo livello in "immagine" e quindi importare l'immagine. Ho importato un'immagine di una spiaggia e il centro lo ha allineato al palcoscenico.
Ora seleziona l'immagine e convertila in un simbolo di clip filmato. L'ho chiamato "spiaggia", ma può davvero essere qualsiasi cosa. Assicurati che il punto di registrazione sia nell'angolo in alto a sinistra.
Dai alla nuova immagine Movie Clip un nome di istanza di "imageToReveal_mc". Blocca quel livello poiché non lo cambieremo più.
Nota: ho terminato il nome con "_mc". Questo è utile se vuoi suggerire automaticamente il codice mentre ti trovi nel pannello Azioni.
Facciamo un po 'di animazione ora. Crea un nuovo simbolo e dagli un nome "animazione circolare". Seleziona "Movie Clip" come tipo.
Ora dovresti essere nella timeline "animazione del cerchio". Prima rinominare il livello in "animazione" e quindi creare un cerchio di 80 x 80 pixel sullo stage. Centro allinearlo.
Seleziona il cerchio e convertilo in un simbolo (F8). Chiamalo "circle" e seleziona "Graphic" come tipo. Assicurati che il punto di registrazione sia "center".
Seleziona il cerchio grafico e applica un'interpolazione di movimento semplice. La durata sarà di 14 fotogrammi. Assicurati che il cerchio abbia una scala dell'1% sul fotogramma 1 e del 100% sul fotogramma 14. È possibile regolare la posizione / scala / rotazione del cerchio in qualsiasi modo tra i fotogrammi. Ho solo ridimensionato il mio.
Ora crea un nuovo livello nel clip filmato chiamato "azioni". Inserire un fotogramma chiave nell'ultimo fotogramma (14). Aprire il pannello Azioni e aggiungere un'azione di arresto. Ciò interrompe l'animazione dal ciclo.
Una volta fatto, vai al pannello Libreria, fai clic con il tasto destro su "animazione cerchio" e seleziona "Proprietà ...". Assicurati di essere nella visualizzazione "Avanzate". Seleziona "Esporta per ActionScript" - "Esporta in frame 1" dovrebbe essere selezionato automaticamente. Per la classe, inserisci "CircleAnimation" e lascia la classe base come "flash.display.MovieClip".
Ora torna alla timeline principale e assicurati che solo il livello "immagine" sia sul palco. La nuova "animazione del cerchio" che hai creato non dovrebbe essere sul palco, dovrebbe esistere solo nella libreria.
Crea un nuovo livello chiamato "azioni" e bloccalo. Seleziona il primo fotogramma per quel livello e vai nel pannello Azioni.
Innanzitutto, crea una maschera per l'immagine. Quindi aggiungilo allo stage e assegna la maschera all'immagine del filmato.
Ora creeremo 4 variabili: xPos, yPos, spacingX e spacingY. "xPos" e "yPos" verranno utilizzati per posizionare le nuove istanze CircleAnimation. "spacingX" e "spacingY" sono la spaziatura tra ciascuna istanza CircleAnimation lungo l'asse xey.
Poiché vogliamo aggiungere istanze CircleAnimation alla maschera una per una, utilizzeremo un timer per chiamare ripetutamente una funzione. La funzione "revealImage" verrà chiamata ogni 30 millisecondi. Per avviare il timer è necessario anche chiamare il metodo "start".
Creiamo ora la funzione "revealImage". Assicurati che abbia un parametro di tipo "TimerEvent".
Ora crea una nuova istanza CircleAnimation e posizionala in base a "xPos" e "yPos". Quindi aggiungilo alla maschera.
Attualmente tutte le istanze di CircleAnimation si accumulano l'una sull'altra poiché "xPos" e "yPos" sono sempre gli stessi. Quello che vogliamo è che le istanze vengano visualizzate da sinistra a destra e dall'alto in basso, quindi dobbiamo assicurarci di incrementare "xPos" per "spaceX". Lo stesso vale per "yPos" per "spazioY", tuttavia "yPos" dovrebbe incrementare solo quando "xPos" supera il limite x massimo. Quando ciò accade, "xPos" deve anche resettare nuovamente a sinistra.
Se metti alla prova il tuo film ora, dovrebbe rivelare l'immagine come l'effetto finale. C'è una cosa importante che potresti non aver notato; Le istanze CircleAnimation vengono ancora create anche dopo che l'immagine è stata rivelata. Questo perché il listener di eventi "createChildTimer" non viene mai rimosso. Dobbiamo verificare se "yPos" ha superato il limite massimo di y e, in tal caso, rimuovere il listener di eventi "createChildTimer".
A proposito, "imageToReveal_mc.x + imageToReveal_mc.width + spacingX" e "imageToReveal_mc.y + imageToReveal_mc.height + spacingY" non cambiano mai così li ho memorizzati nelle variabili "maxXPos" e "maxYPos".
Il tuo codice finale nel pannello Azioni dovrebbe essere simile a questo ...
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, 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);
Usando un po 'di ricorsione, possiamo cambiare l'effetto in modo che mostri l'immagine riga per riga.
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, 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);
Ecco una colonna per versione di colonna. La maggior parte delle variabili e delle proprietà xey hanno posizioni scambiate.
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, 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);
Ci sono molte altre cose che puoi cambiare per ottenere diversi effetti rivelatori come la forma usata nell'animazione, le trasformazioni all'interno dell'animazione, la velocità del Timer, ecc..
Grazie per aver visionato questo tutorial e spero che ti sia piaciuto.
Accentsconagua