I giochi in flash sono il pane e il burro della cultura indie pop-nerd. Se consideri le fette di pane il menu e il gioco stesso, cosa rimane? Il burro: la sostanza che rende il pane molto più delizioso. E in termini di un gioco Flash, ciò che accade tra menu e giochi sono le transizioni!
Anteprima del risultato finale
Questo è un modello di esempio dell'effetto di transizione su cui lavoreremo:
Passaggio 1: impostazione
Come sempre, dobbiamo creare un nuovo file Flash (ActionScript 3.0). Imposta la larghezza a 400 px, la sua altezza a 200 px e la frequenza fotogrammi a 30 fps. Il colore di sfondo può essere lasciato come predefinito. Salva il file; può essere chiamato qualunque cosa tu voglia. Ho chiamato il mio Transitions.fla.
Quindi dobbiamo creare una classe di documenti. Vai alle proprietà del tuo file Flash e imposta la sua classe a transizioni. Quindi creare la classe del documento:
pacchetto import flash.display. *; import flash.events. *; public class Transitions estende MovieClip stat public var val: Number = new Number (); static public var transitionAttached: Boolean = new Boolean (); funzione pubblica Transitions () val = 0; transitionAttached = false;
Il codice ha appena introdotto due variabili. Il primo sarà usato per selezionare il pattern dell'effetto, e il secondo sarà usato per verificare contro avere più istanze dell'effetto sul palco.
Passaggio 2: creazione dello sprite quadrato
Il nostro prossimo passo è creare lo sprite che verrà usato come ogni quadrato per la transizione. Crea una nuova classe e salvala come Square.as:
pacchetto import flash.display. *; import flash.events. *; public class Square estende Sprite public var squareShape: Shape = new Shape (); funzione pubblica Square ()
Noi usiamo il forma quadrata variabile per disegnare la nostra forma all'interno dello Sprite. Disegna un rettangolo di 40 px per 40 px (che è l'intero formato) e imposta la sua scala su 0.1, un decimo delle sue dimensioni - questo ci aiuterà in seguito:
Crea un'altra nuova classe per l'effetto stesso. Una volta che abbiamo finito, aggiungere l'effetto allo stage sarà molto semplice:
pacchetto import flash.display. *; import flash.events. *; import flash.utils. *; public class FadeEffect estende Sprite public var currentFadeOut: int = 00; public var currentSquares: int = 01; public var pauseTime: int = 01; public var tempNum: int = 00; public var fading: String = "in"; public var fadeinTimer: Timer = new Timer (100); public var fadeoutTimer: Timer = new Timer (100); public var fadeArray: Array = [// top [[01,01,01,01,01,01,01,01,01,01], [02,02,02,02,02,02,02,02, 02,02], [03,03,03,03,03,03,03,03,03,03], [04,04,04,04,04,04,04,04,04,04], [ 05,05,05,05,05,05,05,05,05,05]], // in basso [[05,05,05,05,05,05,05,05,05,05], [04 , 04,04,04,04,04,04,04,04,04], [03,03,03,03,03,03,03,03,03,03], [02,02,02,02 , 02,02,02,02,02,02], [01,01,01,01,01,01,01,01,01]]]; public var squaresArray: Array = new Array (); funzione pubblica FadeEffect ()
Probabilmente stai pensando "è un gran numero di variabili, per che cosa sono usate tutte?":
currentFadeOut - usato come un controllo per tempNum per vedere quanti quadrati devono essere ridimensionati
currentSquares - il valore corrente che indica quali quadrati devono essere collegati e / o ridimensionati
pausetime - un semplice numero intero per dare una leggera pausa tra le transizioni e la rimozione di se stesso
tempNum - usato per verificare quali numeri nell'array devono essere ridimensionati
dissolvenza - una stringa per controllare se la transizione sta sbiadendo dentro o fuori
fadeinTimer - un timer chiamato per iniziare la dissolvenza del valore corrente di currentSquares
fadeoutTimer - un altro timer chiamato per iniziare la dissolvenza del valore corrente di currentSquares
fadeArray - la matrice 3D che contiene tutti i modelli di transizione
squaresArray - una matrice per gli sprite quadrati
Il nostro effetto inizierà iniziando un ascoltatore di eventi per fadeInTimer e avviarlo. Abbiamo anche bisogno di aggiungere un listener di eventi per ridimensionare continuamente tutti gli sprite alle loro dimensioni corrette. Usa il seguente codice all'interno del costruttore:
Il prossimo passo è creare quei due ascoltatori di eventi. Inizieremo con il più facile dei due, il enterFrame funzione:
funzione pubblica enterFrame (e: Event) per ciascuna (var s1 in squaresArray) tempNum + = 1; if (fading == "in") if (s1.scaleX<=1) s1.scaleX+=0.05; s1.scaleY+=0.05; else if(fading=="out") if(tempNum<=currentFadeOut) if(s1.scaleX>= 0,1) s1.scaleX- = 0,05; s1.scaleY- = 0.05; else if (s1.visible == true) s1.visible = false; tempNum = 00;
Potrebbe non avere perfettamente senso ora, ma questo dovrebbe aiutare a far luce.
s1 è il nome dell'istanza che verrà assegnato ai quadrati quando li creiamo in una funzione successiva.
Sono aggiunti a un array chiamato squaresArray per tenere traccia del numero di essi e eseguiamo la stessa operazione per ogni oggetto dell'array.
Quindi aumentiamo tempNum (utilizzato nella dichiarazione if di fading out) che viene utilizzato per ridimensionare gli sqaures nell'ordine in cui sono stati aggiunti all'array. Ciò significa che non dipende dal modello e funzionerà con qualsiasi modello.
Dopo di che…
Controlliamo se dissolvenza è vero o no.
Se è vero, ridimensiona tutti i quadrati fino a quando non raggiungono la dimensione completa (iniziano a ridimensionare immediatamente dopo l'aumento di CurrentSquares).
Una volta che inizia a svanire le cose diventano un po 'più complicate; ridimensioniamo solo i quadrati inferiori al valore corrente di currentFadeOut (questi sono quelli che dovrebbero essere in scala, tutti gli altri dovrebbero rimanere in piena scala fino a quando il valore non aumenta).
Una volta ridimensionati a un decimo della dimensione, rendiamo invisibili quei quadrati (saranno cancellati con l'intero effetto).
È ora di aggiungere il listener di eventi per il timer:
A prima vista sembra meno complicato, ma dovresti notare che stiamo chiamando una funzione con il fadeArray come parametro Quale motivo è selezionato dall'array dipende da ciò che si imposta val uguale a nella classe Transitions; in questo momento dovrebbe usare il primo modello perché val è impostato su 0.
Il prossimo passo è creare il fadeSquaresIn funzione chiamata dal timer precedente:
funzione pubblica fadeSquaresIn (s: Array) for (var row = 0; row
La prima cosa che realizziamo è iterando attraverso il pattern selezionato. Iniziamo dalla riga 1, colomn 1 e ciclicamente attraverso ogni colore fino al raggiungimento della fine della riga. Quindi passiamo alla riga successiva e ripetiamo il processo.
La prossima cosa da fare è confrontare l'elemento corrente nell'array con il valore di currentSquares:
if (int (s [col] [row]) == currentSquares)
Se sono equivalenti, aggiungiamo un quadrato, posizioniamolo di conseguenza e spingilo sul squaresArray in modo che possa essere ridimensionato:
Abbiamo quasi finito con questa funzione, dobbiamo solo eseguire un controllo per quando ci sono lo stesso numero di quadrati quanti sono gli elementi nel modello. Lo facciamo aggiungendo la seguente istruzione if all'esterno di entrambi i cicli for-loop:
if (squaresArray.length == (s [0] .length * s.length)) fadeinTimer.stop (); addEventListener (Event.ENTER_FRAME, pauseBetween);
Autoesplicativo: abbiamo fermato il timer e chiamato un ascoltatore di eventi per la pausa tra lo sbiadirsi e lo sbiadire. Questa funzione è usata per iniziare la dissolvenza e può anche essere usata per causare cambiamenti nel tuo gioco:
public function pauseBetween (e: Event) pauseTime + = 1; if (pauseTime == 60) currentSquares = 01; dissolvenza = "out"; fadeoutTimer.addEventListener ("timer", fadeSquaresOutTimer); fadeoutTimer.start (); removeEventListener (Event.ENTER_FRAME, pauseBetween);
Non dedicheremo molto tempo a questa funzione per la sua semplicità. Qui aumentiamo il valore di pausetime, e una volta che è uguale a 60 (significa che sono passati due secondi), impostiamo il valore di currentSquares torna a 1, impostare dissolvenza a "su" in modo che i quadrati possano ridimensionarsi all'indietro, rimuovere l'ascoltatore per pauseBetween () stesso e aggiungere un listener di eventi per questa nuova funzione:
public function fadeSquaresOutTimer (e: Event) fadeSquaresOut (fadeArray [Transitions.val]); currentSquares + = 1;
Funziona molto simile fadeSquaresInTimer (), anche se questa volta stiamo chiamando la funzione fadeSquaresOut ():
funzione pubblica fadeSquaresOut (s: Array) for (var row = 0; row
Passiamo in rassegna, ma questa volta quando troviamo un oggetto equivalente ne aumentiamo il valore currentFadeOut in modo che il prossimo elemento nel squaresArray può iniziare a svanire.
Quasi finito ora; tutto ciò che resta è fermare il timer e rimuovere l'effetto. Aggiungi questa istruzione if al di fuori dei due loop for:
if (currentFadeOut == (s [0] .length * s.length)) fadeoutTimer.stop (); pausetime = 01; addEventListener (Event.ENTER_FRAME, delayedRemove);
Questo controlla se tutti gli oggetti hanno iniziato a svanire. Se è così, allora ferma il timer, imposta pausetime torna a 1 e aggiunge un listener di eventi per la funzione delayedRemove ():
public function delayedRemove (e: Event) pauseTime + = 1; if (pauseTime == 30) Transitions.transitionAttached = false; removeEventListener (Event.ENTER_FRAME, delayedRemove); stage.removeChild (questo);
Come prima aumentiamo il valore di pausetime, e una volta uguale a 30 (1 secondo), impostiamo il valore booleano su falso in modo che l'effetto possa essere aggiunto ancora una volta. Rimuoviamo questo listener di eventi e rimuoviamo questo effetto dallo stage.
Passaggio 4: aggiunta dell'effetto
Ora arriva la parte facile. Aggiungi il seguente codice all'interno del costruttore della classe del documento per aggiungere l'effetto:
if (transitionAttached == false) transitionAttached = true; var f1: Sprite = new FadeEffect; stage.addChild (f1);
Passaggio 5: creazione di più modelli
Sentiti libero di creare i tuoi modelli! È estremamente semplice, basta creare un nuovo array 2D all'interno dell'array 3D. Ecco l'array che ho creato (basta sostituire il tuo array 3D con esso). Include 8 diverse transizioni:
È possibile modificare il valore di Transitions.val per scegliere un altro motivo - per esempio, se val è 3, la transizione passerà da destra.
Conclusione
Grazie per aver dedicato del tempo a leggere questo tutorial. Se avete domande si prega di lasciare un commento qui sotto. E se desideri una sfida, prova a far sbiadire l'effetto con un motivo e ad attenuarlo con quello opposto.
Share
Accentsconagua
