Share
Smetti di usare i menu statici! La maggior parte dei giocatori basa immediatamente l'impressione iniziale di un gioco Flash sul menu che vedono quando lo caricano. Distinguersi dalla massa con un menu attivo!
Questo tutorial è stato pubblicato per la prima volta nel dicembre 2011, ma da allora è stato aggiornato con passaggi aggiuntivi che spiegano come rendere il codice più flessibile!
La parola "statico" significa essenzialmente una mancanza di cambiamento. La maggior parte dei menu che vediamo nei giochi web sono carenti, basta premere Play e il gioco inizia. Menu così sono abusati e mostrano poca creatività o innovazione.
Per rendere un menu "attivo" dobbiamo continuamente causare cambiamenti. Quindi in questo tutorial è esattamente ciò che realizzeremo: un menu che cambia continuamente.
La prima cosa che dovremo creare è un nuovo file Flash (ActionScript 3.0). Imposta la sua larghezza a 650px, la sua altezza a 350px e il 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 menuSlides.fla.
Nella prossima sezione creeremo i nove Movie Clip utilizzati nel menu. Per riferimento, ecco un elenco di tutti i colori utilizzati durante il tutorial:
Per cominciare creeremo le diapositive usate nelle transizioni, ma prima di iniziare attiviamo alcune funzionalità Flash molto utili.
Fare clic con il pulsante 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 di Light Gold, 650px wide e 350px high (puoi fare Alt-click sul palco per renderlo più semplice). Ora cambia il colore in Oro e disegna gruppi di tre quadrati, ciascuno di 20x20 px, per formare la forma di una L in ogni angolo:
Seleziona l'intero livello, fai clic con il tasto destro e scegli Converti in simbolo. Dai un nome al MovieClip goldSlide e assicurarsi che il tipo sia Un filmato e la registrazione è in alto a sinistra.
Per risparmiare tempo e rendere le cose molto più semplici, fai clic con il tasto destro del mouse su goldSlide MovieClip nella libreria e selezionare Simbolo duplicato tre volte per fare altre tre copie. Cambia i colori nei nuovi MovieClip in blu, verde e rosso, quindi rinomina i MovieClip in blueSlide, greenSlide e redSlide.
Prima di continuare, dovremmo aggiungere del testo ad ogni diapositiva. Su goldSlide scrivi GIOCARE, su blueSlide scrivi ISTRUZIONI, su greenSlide scrivi OPZIONI e su redSlide scrivi TITOLI DI CODA.
Ora che abbiamo il testo sul posto possiamo separarlo facendo clic con il tasto destro su di esso e selezionando Spezzare due volte; ciò interromperà il testo fino a un riempimento che passerà più agevolmente. Inoltre come bonus non ci sarà bisogno di incorporare un font se lo si sta solo usando per il menu!
Ora che abbiamo disegnato le 4 diapositive possiamo concentrarci sul sideButton MovieClip che viene utilizzato per spostare le diapositive a sinistra oa destra.
Innanzitutto, disegna un rettangolo di 30x60 px con un solo tratto (senza riempimento), quindi disegna linee diagonali di 45 gradi dagli angoli in alto a destra e in basso a destra finché non si incastrano nel centro del lato opposto. Ora applica un riempimento grigio opaco al triangolo:
Quindi, elimina le linee, quindi fai clic con il pulsante destro del mouse sul triangolo e seleziona Converti in simbolo. Nominalo sideButton, imposta il tipo a Pulsante e assicurati che la registrazione sia nell'angolo in alto a sinistra.
Ora inserisci 3 fotogrammi chiave nella timeline facendo clic con il tasto destro sulla timeline e selezionando Inserisci fotogramma chiave. Nella cornice Su, seleziona il riempimento del triangolo, vai alla scheda Windows e seleziona Colore. Cambia l'Alpha al 50%. Sull'over Frame ripetere lo stesso processo, ma questa volta impostare l'alfa al 75%.
Ora possiamo iniziare sui quattro pulsanti del cerchio numerato, per saltare direttamente a una particolare diapositiva.
Per iniziare a disegnare un cerchio bianco di 30px senza tratto. Convertilo in un simbolo, chiamalo circleOne, e imposta il suo tipo a Pulsante e il suo punto di registrazione al centro. Inserisci tre fotogrammi chiave come abbiamo fatto prima e poi vai al riquadro Su.
Disegna un cerchio nero 25px senza tratti e centralo al centro attraverso le coordinate o usando il menu Allinea. Quindi deseleziona il cerchio nero, quindi riselezionalo e cancellalo. Ora dovresti avere un anello bianco rimanente. Ora prendi lo strumento testo e metti un "1" bianco al centro dell'anello. Quindi suddividere questo numero finché non si riempie.
Vai al frame Over e disegna un "1" nero. Centralo e spezzalo finché non diventa pieno. Ora deseleziona e riseleziona il riempimento, quindi cancellalo. Seleziona tutto sul frame e copialo, quindi vai al frame Down, seleziona tutto su di esso e premi delete. Incolla ciò che abbiamo copiato.
Ora crea altri tre Movie Clip cerchio, seguendo lo stesso procedimento, per i numeri 2, 3 e 4.
Ok, siamo quasi a metà strada! Prima trascina tutte le diapositive sul palco e posizionale con le seguenti coordinate:
Ora trascina due copie di sideButton. La prima copia deve essere posizionata a (10,145); prima di poter posizionare la seconda copia, dobbiamo prima capovolgerla!
Seleziona la seconda copia e premi Ctrl-T. Cambia la sinistra-destra in -100% e lasciare il up-down a 100%. Ora sposta la seconda copia in (640,145).
Infine trascina e rilascia i quattro MovieClip e posizionali in questo modo:
Il tuo stage dovrebbe ora assomigliare a questo:
Le diapositive blu, verde e rossa sono nascoste appena a destra del palco. Ora seleziona tutto sul palco e converti in un simbolo. Nominalo menuSlidesMC, imposta il tipo su MovieClip e la registrazione nell'angolo in alto a sinistra ed esporta per ActionScript come MenuSlidesMC.
Prima di finire dobbiamo dare dentro ciascuno dei MovieClip menuSlidesMC un nome di istanza. Seleziona ogni diapositiva nell'ordine in cui appaiono da sinistra e assegna loro un nome slide1, slide2, slide3 e slide4 rispettivamente. Assegna un nome ai pulsanti del cerchio uno, Due, tre e quattro, e infine nominare i pulsanti laterali sinistra e destra.
Ora che tutti i nostri MovieClip sono stati creati, possiamo iniziare a configurare le due classi che useremo.
Vai prima alle proprietà del file Flash e imposta la sua classe a menuSlides; quindi, creare un nuovo file ActionScript 3.0 e salvarlo come menuSlides.as.
Ora copia il seguente codice in esso; Lo spiegherò dopo:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; menu public classSlides estende MovieClip public var menuSlidesMC: MenuSlidesMC = new MenuSlidesMC (); public function menuSlides () addChild (menuSlidesMC);
Piuttosto basico: è una classe di documenti, in cui importiamo i MovieClip e gli Eventi che useremo. Quindi abbiamo creato un'istanza di MenuSlidesMC, e l'ho aggiunto al palco.
Ora crea un nuovo file ActionScript 3.0 per menuSlidesMC esempio. Salva come MenuSlidesMC.as e copiare il seguente codice in esso:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class MenuSlidesMC estende MovieClip public var speed: Number = new Number (); public var activeSlide: Number = new Number (); public function MenuSlidesMC () speed = 10; activeSlide = 1; addEventListener (MouseEvent.CLICK, slidesClick); addEventListener (Event.ENTER_FRAME, slidesMove);
Proprio come l'ultima volta, abbiamo importato ciò di cui avremmo avuto bisogno, ma abbiamo creato due variabili numeriche. La prima variabile, velocità, è in realtà quanti pixel le diapositive vengono spostate da ciascun fotogramma. (Nota: questo numero deve dividersi equamente nella larghezza del tuo stage per dare una transizione graduale). La seconda variabile, ActiveSlide, ci dice quale diapositiva è attualmente impostata per essere sullo schermo.
Abbiamo anche aggiunto due listener di eventi per le funzioni che stiamo per creare; uno di questi viene chiamato con un clic del mouse e l'altro viene chiamato all'inizio di ogni fotogramma.
Per iniziare, togliamo la funzione del clic del mouse. Inizia creando una funzione pubblica chiamata slidesClick ():
slides della funzione pubblicaClick (event: MouseEvent): void
Successivamente creeremo alcune istruzioni if per quanto riguarda il event.target.name. Fondamentalmente, questa proprietà memorizza il nome dell'oggetto che è stato preso di mira con il clic del mouse. Possiamo usarlo per controllare quale pulsante è premuto:
if (event.target.name == "left") if (activeSlide> 1) activeSlide- = 1; else if (event.target.name == "right") if (activeSlide<4) activeSlide+=1; if(event.target.name == "one") activeSlide=1; else if(event.target.name == "two") activeSlide=2; if(event.target.name == "three") activeSlide=3; else if(event.target.name == "four") activeSlide=4;
Il codice qui sopra va nel slidesClick () funzione. La prima serie di istruzioni if è per i pulsanti laterali sinistro e destro; aumentano o diminuiscono il valore di ActiveSlide, ma non consentire mai che il valore diventi inferiore a 1 o maggiore di 4 (poiché abbiamo solo quattro diapositive). La seconda serie di istruzioni if sono per i pulsanti del cerchio; invece di incrementare o decrementare il valore di ActiveSlide lo impostano sul valore selezionato.
Ora iniziamo con il ENTER_FRAME funzione del gestore:
public function slidesMove (event: Event): void
Aggiungi il slidesMove () funzione sotto il tuo slidesClick () funzione e inizieremo ad aggiungere del codice ad esso. Innanzitutto, useremo a interruttore per controllare quale diapositiva dovrebbe essere sullo schermo, in base al valore di ActiveSlide:
switch (activeSlide) caso 1: pausa; caso 2: pausa; caso 3: pausa; caso 4: pausa;
Ora in ogni caso creeremo un blocco if / else che controllerà l'attuale posizione x della diapositiva e si muoverà tutti delle diapositive a sinistra, a destra, o non del tutto, a seconda di dove si trova attualmente la diapositiva desiderata.
Il primo caso si presenta così:
if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = velocità; slide2.x- = velocità; slide3.x- = velocità; slide4.x- = velocità;
Ora tutto ciò che dobbiamo fare è ripetere la stessa procedura per gli altri casi! Dopo aver finito, il tuo swtich dovrebbe apparire così:
switch (activeSlide) caso 1: if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = velocità; slide2.x- = velocità; slide3.x- = velocità; slide4.x- = velocità; rompere; caso 2: if (slide2.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide2.x>0) slide1.x- = velocità; slide2.x- = velocità; slide3.x- = velocità; slide4.x- = velocità; rompere; caso 3: if (slide3.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide3.x>0) slide1.x- = velocità; slide2.x- = velocità; slide3.x- = velocità; slide4.x- = velocità; rompere; caso 4: if (slide4.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide4.x>0) slide1.x- = velocità; slide2.x- = velocità; slide3.x- = velocità; slide4.x- = velocità; rompere;
E questo è tutto! Abbiamo finito con il codice e il menu dovrebbe funzionare alla grande in questo momento.
... Ma aspetta, e se vogliamo aggiungere più diapositive o portare via qualcosa?
Al momento il nostro codice non è molto flessibile a causa di tutti quelli codificati Se dichiarazioni. Quindi facciamo qualcosa in grassetto: cancella tutto il codice nella funzione slidesMove () perché non ne avremo più bisogno, e cancelleremo anche le if-statement per i pulsanti del cerchio dato che stiamo andando a ottimizzare anche quelli.
Ora dichiara una nuova variabile (sotto velocità e activeSlides):
public var slidesArray: Array = new Array ();
La prima variabile, slidesArray, sarà una matrice che contiene tutte le nostre diapositive, che ci permetterà di accedervi facendo riferimento a un elemento nell'array (in modo che possiamo usare slidesArray [2] invece di slide3).
Una cosa da notare è che al primo elemento di un array viene dato un indice di 0, quindi dovremo apportare alcune modifiche ai nostri nomi di istanze.
Seleziona ogni diapositiva nell'ordine in cui appaiono da sinistra e assegna loro un nome slide0, slide1, slide2 e slide3, rispettivamente. E per aiutarci a ridurre il numero di righe di codice che utilizziamo, seleziona ciascun pulsante del cerchio nell'ordine in cui appaiono da sinistra e nominali circle0, circle1, circle2 e Circle3, rispettivamente.
Se hai intenzione di aggiungere più diapositive e pulsanti, ora è il momento di farlo. Posiziona le diapositive in più alla fine della fila di diapositive, quindi dai loro nomi di istanza seguendo lo stesso ordine. Quindi fai lo stesso per i pulsanti del cerchio.
Ora che abbiamo i nomi delle istanze corrette dobbiamo aggiungere le diapositive all'array. Fatelo aggiungendo il seguente codice al vostro costruttore:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5];
Ora le diapositive si trovano nell'array e sono accessibili dal loro indice nell'array. Per esempio, slidesArray [0] è equivalente a slide0 perché questo è il primo elemento nell'elenco.
Quindi, all'interno dell'istruzione "right" else-if, modificare la condizione in:
if (ActiveSlide < slidesArray.length-1)
Il valore di slidesArray.length è uguale al numero di elementi nella matrice, quindi questa nuova condizione ora ci permetterà di premere il pulsante e spostare le diapositive finchè la diapositiva attiva non è la diapositiva finale.
Ora, quando si fa clic su un pulsante circolare, è necessario capire quale è (e a quale diapositiva si riferisce).
Crea un array per contenere tutti i pulsanti del cerchio. Per prima cosa, definiscilo, sotto l'array di diapositive:
public var slidesArray: Array = new Array (); public var circlesArray: Array = new Array ();
Quindi, aggiungi i pulsanti del cerchio all'array nel costruttore:
circlesArray = [circle0, circle1, circle2, circle3, circle4, circle5];
Ora, vai al slidesClick () funzione, sotto l'intero blocco if-else. Verificheremo se il pulsante su cui si fa clic si trova nell'array dei pulsanti del cerchio:
if (circlesArray.indexOf (event.target)! = -1)
La funzione indexOf () dell'array verifica se un oggetto si trova nell'array; se non lo è, ritorna -1. Quindi, stiamo controllando per vedere se è non uguale a -1, che controllerà per vedere se è così è nell'array.
Supponendo che sia, allora il indice di() la funzione restituirà l'indice del pulsante all'interno dell'array dei pulsanti del cerchio, quindi, se Circle3 è stato cliccato, circlesArray.indexOf (event.target) sarà uguale a 3. Questo significa che possiamo solo impostare ActiveSlide a 3, e abbiamo finito!
if (circlesArray.indexOf (event.target)! = -1) activeSlide = circlesArray.indexOf (event.target);
L'unica cosa che rimane da fare è spostare tutte le diapositive. Inizia aggiungendo lo stesso ciclo che avevamo prima, nel slidesMove () funzione:
per (var i: int = 0; i < slidesArray.length; i++)
Un'istruzione if-else deve essere aggiunta ora; questo userà la variabile ActiveSlide per selezionare una diapositiva dall'array e controllare dove si trova la sua posizione x, proprio come prima.
se (slidesArray [ActiveSlide] .x<0) else if(slidesArray[activeSlide].x>0)
Da ActiveSlide è un numero, slidesArray [ActiveSlide] si riferisce a una diapositiva specifica, quindi slidesArray [ActiveSlide] .x è uguale alla posizione x di quella diapositiva.
Nel primo caso aggiungeremo a per loop per spostare tutti i clip filmato a destra, e nel secondo caso aggiungeremo a per loop per spostare tutti i clip filmato sulla sinistra.
Destra:
per (var j: int = 0; j < slidesArray.length; j++) slidesArray[j].x+=speed;
Sinistra:
per (var k: int = 0; k < slidesArray.length; k++) slidesArray[k].x-=speed;
Se lo verifichi ora, noterai che il nostro codice ottimizzato ha portato a un'interfaccia molto zippier!
Se volevi fare ancora di più, potresti usare a per loop per posizionare le diapositive e le cerchie, piuttosto che doverle trascinare e rilasciare nell'IDE Flash. Ad esempio, per posizionare le diapositive, dovremmo prima posizionarci slide0 nel costruttore:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; diapositiveArray [0] .x = 0; slidesArray [0] .y = 0;
Quindi, faremo scorrere tutte le altre diapositive, a partire da slide1:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; diapositiveArray [0] .x = 0; slidesArray [0] .y = 0; per (var i: int = 1; i < slidesArray.length; i++)
Possiamo dare a tutte le diapositive una posizione y pari a 0:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; diapositiveArray [0] .x = 0; slidesArray [0] .y = 0; per (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].y = 0;
... e quindi possiamo impostare la posizione x di ciascuna diapositiva su 620px a destra della diapositiva prima di essa:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; diapositiveArray [0] .x = 0; slidesArray [0] .y = 0; per (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + 620; slidesArray[i].y = 0;
Se le tue diapositive non sono larghe 620px, puoi persino rilevare automaticamente la loro larghezza!
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; diapositiveArray [0] .x = 0; slidesArray [0] .y = 0; per (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + slidesArray[i-1].width; slidesArray[i].y = 0;
Puoi fare la stessa cosa con i pulsanti del cerchio, ma lascerò a te la possibilità di sperimentare.
Il bello di questo è che puoi aggiungere tutte le diapositive che vuoi sul menu; tutto quello che devi fare è aggiungerli all'array, e saranno trattati da questo codice.
(Puoi rimuovere anche le diapositive dall'array, ma non saranno interessate da alcun codice, quindi probabilmente dovrai riposizionarle nell'IDE di Flash.)
Grazie per aver dedicato del tempo a leggere il tutorial, spero sia stato utile e che tu abbia imparato qualcosa sui menu di gioco attivi.
Accentsconagua