Share
In questo suggerimento rapido imparerai come usare la classe Tween di AS3 per creare un menu con una barra scorrevole. Eccellente per la navigazione!
Diamo un'occhiata al risultato finale su cui lavoreremo:
Avvia un nuovo documento Flash Actionscript 3.0 con una dimensione di 600 x 300 px.
Innanzitutto, seleziona lo strumento Testo e digita il menu di navigazione. Per il bene di questo tutorial ho usato Pulsante 1 | Pulsante 2 | Pulsante 3 | Pulsante 4, usando "Arista Light" a 30pt per il font e # 999999 per il colore.
Quindi vai alla scheda di allineamento (se non riesci a vederlo clicca su Finestra> Allinea) quindi allinea il testo verticalmente e orizzontalmente al centro del tuo palcoscenico.
Rinominare il livello esistente in "Testo" e bloccarlo in modo da non spostare accidentalmente il testo. Quindi crea un nuovo livello chiamato "Pulsanti". Seleziona lo strumento rettangolo e trascina un rettangolo (di qualsiasi colore) su "Pulsante 1" in modo che si adatti perfettamente ai bordi. Questa sarà l'area di successo per la tua voce di menu.
Seleziona il rettangolo che hai appena disegnato, fai clic Modifica> Converti in simbolo e nominalo pulsante. Assicurarsi che il punto di registrazione sia al centro (potrebbe essere necessario utilizzare nuovamente il pannello Allinea).
Quindi, nel pannello Proprietà, assegnare a questo pulsante un nome di istanza button1 e imposta l'alfa allo 0%.
Copia e incolla il tuo nuovo pulsante "invisibile" sugli altri tre pulsanti e dai loro nomi di istanza button2, Button3 e Button4 rispettivamente. Usa lo strumento Trasformazione libera per estenderlo o restringerlo in modo che ognuno si adatti perfettamente alla sua voce di menu, senza spazi vuoti tra.
Seleziona di nuovo lo strumento Rettangolo, imposta gli angoli arrotondati su 5 pixel e disegna un rettangolo alto 4 pixel e circa la larghezza del primo pulsante.
Posizionalo sotto il tuo primo pulsante, fai clic Modifica> Converti in simbolo e nominalo bar. Di nuovo, assicurati che il punto di registrazione sia al centro.
Dagli un nome di istanza di bar e un alfa dello 0%, proprio come i pulsanti. Blocca il livello dei pulsanti e crea un nuovo livello chiamato Azioni; bloccare anche questo. Ora fai clic con il pulsante destro del mouse sul primo fotogramma del tuo nuovo Azioni livello e clicca Azioni.
// Importa classi necessarie per l'interpolazione delle fl.transitions.Tween; importare fl.transitions.easing. *;
Useremo il Gemello classe per far muovere la barra usando il codice, quindi importala. Il facilitandoanche il pacchetto è necessario, in modo che possiamo specificare il tipo esatto di movimento di interpolazione da utilizzare.
// Definisce la variabile interpolazione per la posizione "x" della barra var barX: Tween; // Definisce la variabile interpolazione per la barra var fade-inAlphaIn: Tween; // Definisce la variabile interpolazione per la barra var di dissolvenza della barraAlphaOut: Tween; // Definisce la variabile interpolazione per le barre width var barWidth: Tween;
Definire le variabili che useremo per interpolare la barra.
// Aggiungi un listener di eventi per il rollover del pulsante 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Aggiungi un listener di eventi per il roll out del pulsante 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Aggiungi un listener di eventi per il rollover del pulsante 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Aggiungi un listener di eventi per il roll out del pulsante 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Aggiungi un listener di eventi per il rollover del pulsante 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Aggiungi un listener di eventi per il roll out del pulsante 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Aggiungi un listener di eventi per il rollover del pulsante 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Aggiungi un listener di eventi per il roll out del pulsante 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Questo può sembrare un sacco di codice, ma in realtà è davvero semplice.
Per prima cosa aggiungiamo un listener di eventi che ascolta il passaggio del mouse sul pulsante 1 e quindi esegue il rollOverHandler funzione. Quindi aggiungiamo un altro listener di eventi che ascolta il movimento del mouse su di button1 ed esegue il rollOutHandler funzione.
Ripetiamo quegli ascoltatori per tutti e quattro i pulsanti.
// Esegui la funzione per la funzione di evento rollover rollOverHandler (e: MouseEvent): void // Regola la posizione "x" della barra sullo stesso pulsante. I parametri sono: // oggetto da interpolare (ad es. Per animare) // proprietà dell'oggetto da interpolare // tipo di andamento (tipo di movimento) da usare // valore iniziale (cioè valore da interpolare tra proprietà) // fine valore (vale a dire il valore della proprietà si concluderà quando termina l'interpolazione) // durata di tween // se misurare la durata in secondi (true) o frame (false) barX = new Tween (bar, "x", Back. easeOut, bar.x, e.target.x, 1, true); // Interpolazione dell'alpha della barra per renderla dissolvenza in barAlphaIn = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); // Interpolazione della larghezza della barra per diventare uguale alla barra del pulsanteWidth = new Tween (bar, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Funzione Execute per la funzione di evento rollOutHandler (e: MouseEvent): void // Interpolazione dell'alpha della barra per renderla in dissolvenza barAlphaOut = new Tween (barra, "alpha", Regular.easeOut, bar.alpha, 0, 1, vero);
Quando si passa sopra un pulsante, la funzione rollOverHandler viene eseguito, che interporrà la barra dalla sua attuale posizione x alla posizione x del pulsante che viene attualmente spostato. (Nota: e.target si riferisce sempre al pulsante che ha attivato il rollOverHandler funzione.) Ciò conferisce alla barra un piacevole movimento orizzontale uniforme.
Quindi, attenua l'alfa della barra dal suo alfa corrente a 1 (100% alfa) e la larghezza dalla larghezza corrente alla larghezza del pulsante che ha attivato la funzione del gestore.
Quando tiriamo fuori dal pulsante, la funzione rollOutHandler viene eseguito e la barra viene sfumata dall'attuale alpha a 0 (completamente trasparente).
Dal momento che i pulsanti si adattano strettamente insieme senza spazi vuoti tra di loro, vedrai solo la barra che si attenua se ne esce tutti le voci del menu in una volta, altrimenti svanirà di nuovo troppo presto per poterlo individuare!
Ora dovresti avere qualcosa di simile all'anteprima. Grande! Hai imparato a utilizzare la classe Tween in ActionScript 3.0 per creare un'effettiva animazione di menu che catturerà l'attenzione delle persone e si distingue dai menu normali. Le possibilità sono infinite.
Prossimo passaggio: che ne dici di aggiungere un MouseEvent.CLICK ascoltatore e gestore di ciascun pulsante per consentire all'utente di attivare azioni diverse con un clic?
Spero vi sia piaciuto questo tutorial e grazie per la lettura.
Accentsconagua