Share
Le prime impressioni sono molto importanti su un portale di giochi Flash; se il tuo gioco non cattura il giocatore nei primi secondi, hanno un sacco di altri giochi tra cui scegliere. Dato che il menu è il primo punto di interfaccia, tutto ciò che puoi fare per renderlo meno noioso aiuterà. In questo tutorial creeremo un menu che incorpora la profondità di swap, effetti roll over uniformi e due diversi progetti di transizione.
Questi sono i due progetti su cui lavoreremo:
Il primo progetto prevede che le schermate successive passino da direzioni diverse, a seconda dell'opzione selezionata.
Il secondo design passa tutte le schermate dal basso: una scelta più flessibile se si hanno più di quattro opzioni.
Ci sono due cose principali che rendono questo menu "attivo". Il primo è l'effetto rollover sui pulsanti: indipendentemente da quanto sono stati ridimensionati al momento del roll out, vengono ridimensionati rispetto a quella dimensione specifica (a differenza di un'interpolazione creata sulla timeline). Il secondo è che il codice del secondo stile è progettato per essere flessibile e facile da estendere per le proprie esigenze.
La prima cosa che dovremo creare è un nuovo file Flash (ActionScript 3.0). Imposta la sua larghezza a 600 px, la sua altezza a 300 px e i frame al secondo a 30. Il colore di sfondo può essere lasciato come bianco.
Ora salva il file; puoi chiamarlo come vuoi, ma ho chiamato il mio menuBounce.fla.
Nella prossima sezione creeremo gli otto Movie Clip utilizzati nel menu. Per riferimento, ecco un elenco di tutti i colori utilizzati durante il tutorial:
Accentsconagua
0xffffff)0xe8a317)0xfbb917)0x1569c7)0x1389ff)0x347235)0x3e8f1b)0x990000)0xc10202)0x222222)Per cominciare creeremo i "dorsi" (i filmati che rimarranno per le vere schermate), ma prima di iniziare attiviamo alcune utili funzioni Flash.
Fare clic con il tasto destro sul palco e selezionare Griglia> Mostra griglia. Di default creerà una griglia 10px per 10px attraverso lo stage. Quindi, fai nuovamente clic con il tasto destro sul palco e questa volta seleziona Aggancio> Aggancia alla griglia.
Ora possiamo iniziare a disegnare! Seleziona lo strumento Rettangolo e disegna un rettangolo in oro chiaro 600x300px. Quindi selezionare questo riempimento, fare clic con il tasto destro e scegliere Converti in simbolo. Dai un nome al MovieClip Goldback, imposta il tipo su MovieClip e la registrazione in alto a sinistra.
Quindi fai clic con il tasto destro del mouse sulla MovieClip e seleziona Duplica tre volte per crearne altre tre copie. Ora ricolorali con luce blu, verde chiaro e rosso chiaro. Quindi nominali Blueback, greenback e Redback, rispettivamente.
Per finire i dorsi dovremmo aggiungere una sorta di testo all'interno di ogni MovieClip: su goldBack scrivi "PLAY", su blueBack scrivi "ISTRUZIONI", su greenBack scrivi "OPTIONS", e su redBack scrivi "CREDITS". Una volta che hai scritto il testo, ti consiglio di dividerlo fino a quando non diventa un riempimento (ciò elimina la necessità di incorporare i font e rende la transizione più agevole). La tua schiena dovrebbe essere simile a quella qui sotto:
Ora iniziamo con i quadrati cliccabili! Seleziona lo strumento Rettangolo e disegna un quadrato in oro chiaro 100x100px. Selezionare il riempimento, fare clic con il tasto destro e Converti in simbolo. Dai un nome al MovieClip goldSquare, imposta il tipo su MovieClip e la registrazione in alto a sinistra. Ora è il momento di scrivere il testo sul quadrato, tranne che questa volta invece di rompere il testo a parte, lasciatelo per ora. Inserisci un fotogramma chiave e cambia il colore di riempimento in oro. Ora spezzare il testo su entrambi i fotogrammi fino a quando non si riempiono.
Ora fai clic con il pulsante destro del mouse su MovieClip e scegli Duplica simbolo tre volte. Quindi ripetere la stessa procedura di prima per gli altri tre colori, nominando i MovieClip BlueSquare, Greensquare e redsquare, rispettivamente. I tuoi quadrati dovrebbero assomigliare a quello qui sotto:
Inizia cancellando tutto dal palco. Quindi vai a Inserisci> Nuovo simbolo. Nominalo menuBounceMC, imposta il tipo su MovieClip, la registrazione in alto a sinistra ed esporta come MenuBounceMC.
Ora trascina tutti i dorsi dalla libreria e posizionali nel seguente modo:
Se si intende utilizzare il design a una direzione, posizionare tutti e quattro i dorsi in una di quelle posizioni. Ho usato (0, 300).
Ora trascina tutti i quadrati dalla libreria nella MovieClip e posizionali nel seguente modo:
L'ultima cosa che dobbiamo fare prima di iniziare la codifica è assegnare i nomi delle istanze. Imposta i nomi delle istanze per i quadrati come square0, Square1, Square2, square3, partendo da sinistra. Quindi imposta i nomi delle istanze per i dorsi in base al corrispondente con il quadrato dello stesso colore. Così Goldback otterrebbe il nome dell'istanza back0 perché il goldSquare ha il nome dell'istanza square0.
Ora che abbiamo finito di creare e posizionare i MovieClip, possiamo iniziare a configurare le due classi che useremo.
Per prima cosa vai nelle proprietà del file Flash e imposta la sua classe su MenuBounce; quindi, creare un nuovo file ActionScript 3.0 e salvarlo come MenuBounce.as.
Ora copia il seguente codice in esso; Lo spiegherò dopo:
package import flash.display.MovieClip; import flash.events.Event; public class MenuBounce estende MovieClip menu var pubblicoBounceMC: MenuBounceMC = new MenuBounceMC (); funzione pubblica MenuBounce () addChild (menuBounceMC);
Questa è una classe di documento di base alla quale abbiamo aggiunto un piccolo codice aggiuntivo che crea un'istanza di MenuBounceMC e lo aggiunge allo stage.
Ora crea un nuovo file ActionScript 3.0 e salvalo come MenuBounceMC.as. Ora copia il seguente codice in modo che possiamo configurarlo.
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class MenuBounceMC estende MovieClip public var activeSquare: MovieClip; public var activeBack: MovieClip; public var squaresArray: Array = new Array (); public var backsArray: Array = new Array (); velocità var pubblica: Number = 20; funzione pubblica MenuBounceMC ()
Ogni variabile ha uno scopo specifico:
activeSquare: Quale quadrato viene rotolatoactiveBack: Quale back è stato selezionato per muoversisquaresArray: Un array contenente tutti i MovieClip quadratibacksArray: Un array contenente tutti i MovieClip posteriorivelocità: Quanti pixel i dorsi vengono spostati da ogni fotogrammaTutte queste variabili sono state impostate, ad eccezione di topSquare (che è impostato in altre funzioni) e gli array. Quindi dobbiamo spostare tutti i MovieClip nell'array. Aggiungi le seguenti linee all'interno del costruttore:
squaresArray = [square0, square1, square2, square3]; backsArray = [back0, back1, back2, back3];
Tuttavia, questo metodo può essere un po 'noioso se si utilizza un numero elevato di Clip nel menu, ad esempio 50. Un'alternativa sarebbe quella di creare completamente i MovieClip tramite il codice e inviarli quando li si aggiunge al menu. Ma per il nostro scopo di utilizzare solo otto MovieClip funziona perfettamente.
L'ultimo gruppo di cose che dobbiamo aggiungere per completare l'installazione sono i nostri listener di eventi, che attiveranno tutte le transizioni e gli effetti di rollover. Aggiungi queste linee sotto il Spingere() Linee.
addEventListener (MouseEvent.MOUSE_OVER, bounceOver); addEventListener (MouseEvent.MOUSE_OUT, bounceOut); addEventListener (MouseEvent.CLICK, bounceClick); addEventListener (Event.ENTER_FRAME, bounceUpdate);
Iniziamo creando le tre funzioni più semplici:
public function bounceOver (event: MouseEvent): void public function bounceOut (event: MouseEvent): void public function bounceClick (event: MouseEvent): void
Dentro il bounceOver () la funzione inizia aggiungendo un'istruzione if per assicurarti che nessun back sia attualmente "attivo" - cioè, transizioni, transizioni o sedute in cima:
if (activeBack == null)
Il resto di tutto il codice in bounceOver () la funzione verrà scritta all'interno di quella istruzione if. Ora scopriamo se l'oggetto è rotolato (il event.target) è un quadrato, controllando se è nel squaresArray []:
if (squaresArray.indexOf (event.target)! = -1)
Supponendo che lo facciamo, facciamo la vera carne della funzione:
activeSquare = event.target come MovieClip; activeSquare.gotoAndStop (2); setChildIndex (activeSquare, numChildren - 1);
Per prima cosa impostiamo la variabile activeSquare puntare al quadrato in questione. Dopodiché, sospendiamo l'animazione di questo quadrato sul secondo frame, che mostra la sua immagine di "rollover". Infine spostiamo lo sprite in cima a tutto il resto, usando setChildIndex ().
Ora entriamo nel bounceOut () funzione. Questa volta, iniziamo controllando se l'oggetto da cui viene estratto il mouse è attualmente attivo piazza:
if (event.target == activeSquare)
All'interno del if-block aggiungere il seguente codice; mette di nuovo in pausa l'animazione del quadrato sul primo fotogramma e quindi riporta activeSquare nullo in modo che possiamo rotolare su un altro:
activeSquare.gotoAndStop (1); activeSquare = null;
Quindi vai al bounceClick () funzione. Questa funzione verrà utilizzata per avviare tutte le transizioni. Inizia controllando se c'è già un back attivo:
if (activeBack == null)
Ciò impedisce all'utente di fare clic su un altro quadrato durante una transizione. Se c'è un back attivo, allora un click dovrebbe annullare questo, in modo che possiamo cliccare su un altro quadrato:
if (activeBack == null) else activeBack = null;
Supponendo che non ci sia un back attualmente attivo, ancora una volta aggiungere un if-block per verificare se l'oggetto su cui si è fatto clic era un quadrato:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) else activeBack = null;
Se l'utente ha fatto clic su un quadrato, dobbiamo impostare il corrispondente come back "attivo". Dal momento che l'indice di ogni elemento in backsArray [] corrisponde all'indice di ciascun articolo in squaresArray, questo è semplice:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] come MovieClip; else activeBack = null;
Ora abbiamo solo bisogno di spostare il back attualmente attivo in modo che sia al di sopra di tutto il resto:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] come MovieClip; setChildIndex (activeBack, numChildren - 1); else activeBack = null;
Questa è l'ultima funzione che stiamo per creare. Iniziamo aggiungendo l'effetto di ridimensionamento per quando un quadrato viene spostato sopra o fuori:
funzione pubblica bounceUpdate (event: Event): void per ogni (var square in squaresArray) if (square == activeSquare) if (square.scaleX <= 1.5) square.scaleX +=0.05; square.scaleY +=0.05; else if(square.scaleX >= 1) square.scaleX - = 0.05; square.scaleY - = 0,05;
Qui, abbiamo creato un ciclo for-each per scorrere ogni quadrato dell'array e verificare se è il quadrato attualmente attivo. Se lo è, lo scaliamo fino a che è maggiore o uguale a 1,5 volte la sua dimensione normale; se non lo è, lo ridimensioniamo fino a quando non torna alle sue dimensioni normali. (Tecnicamente, questo codice potrebbe consentirgli di essere leggermente più piccolo delle sue dimensioni normali, ma in pratica questo non è visibile.)
Ora questo è dove alcuni di voi andranno i vostri modi separati; se stai creando Design 1 vai al passaggio 7a e se stai creando Design 2 vai al passaggio 7b.
Congratulazioni, hai scelto il design 1! Questo design è semplice e facile da seguire, supponendo che abbiate esattamente quattro quadrati e schiene. Più altro, e diventa un disastro da mantenere.
Useremo una lunga serie di enunciati annidati if-else - molto disordinati, lo so. Ma lascia che ti dica il ragionamento dietro a questo! Ogni schienale ha una diversa posizione di partenza e direzione di transizione. In poche parole, non è possibile utilizzare un singolo ciclo per spostare tutte le Movie Clip a meno che non si abbia un'istruzione if per controllare quale back si sta muovendo, un'altra per impostare l'asse di movimento (x o y) e una terza per impostare la velocità (positiva o negativa). Ok, potremmo memorizzare tutte queste informazioni nelle proprietà dei quadrati o qualcosa del genere, ma penso che questo sia un approccio in cui si applica "Keep It Simple, Stupid".
if (activeBack == back0) if (back0.x < 0) back0.x += speed; else if(back0.x > -600) back0.x - = velocità; if (activeBack == back1) if (back1.y < 0) back1.y += speed; else if(back1.y > -300) back1.y - = velocità; if (activeBack == back2) if (back2.y> 0) back2.y - = speed; else if (back2.y < 300) back2.y += speed; if(activeBack == back3) if(back3.x > 0) back3.x - = velocità; else if (back3.x < 600) back3.x += speed;
Il codice è facile da capire; guarda ogni retro e lo sposta sul palco o fuori dal palco, nella direzione corretta, a seconda che sia attivo o no.
Complimenti hai scelto Design 2! Questo design è molto più flessibile e rende le cose molto più semplici in termini di aggiunta di back e utilizzo di meno codice. Per questo motivo useremo un altro ciclo per ogni ciclo per esaminare ogni parte posteriore backsArray:
per ogni (var back in backsArray) if (back == activeBack) if (back.y> 0) back.y - = speed; else if (back.y < 300) back.y += speed;
Ora questo dovrebbe essere abbastanza facile da capire. Passa in rassegna i dorsi e controlla ciascuno per vedere se è attivo. Se lo è, il codice lo sposta verso l'alto sul palco, e smette di spostarlo una volta che è completamente acceso (vale a dire una volta che è a y = 0 o più alto). Se il dorso non è attivo, il codice lo riporta indietro fino a raggiungere la posizione iniziale.
Ecco una sfida: dati 16 quadrati (e 16 dorsi), puoi fare in modo che i quadrati 1, 5, 9 e 13 facciano entrare i dorsi corrispondenti da sinistra, i quadrati 2, 6, 10 e 14 li trasformino dalla cima, e così via? Dovrai combinare i due approcci e controllare la posizione del quadrato / retro attivo nel suo array.
Grazie per aver dedicato del tempo a leggere questo tutorial. Spero che tu abbia apprezzato il prodotto finito e imparato qualcosa riguardo alla creazione di menu attivi e flessibili!
