Share
Durante questo tutorial, utilizzeremo il pannello dei progetti in Flash per creare un menu AS3 animato verticale. L'intero processo ti consentirà di personalizzare facilmente tutti gli aspetti del menu utilizzando i costruttori parametrizzati. Continuate a leggere per saperne di più!
Diamo un'occhiata al risultato finale su cui lavoreremo:
Inizia creando un nuovo progetto. Apri Flash e vai su File> Nuovo, quindi seleziona Progetto Flash. Apparirà il pannello Progetto.
Nel menu a discesa Progetti seleziona Nuovo progetto. Digita il nome del progetto "AnimatedMenu". Nella cartella principale, sfoglia e scegli dove vuoi salvare il tuo progetto; puoi selezionare una cartella già esistente o crearne una nuova. Assicurati che la versione di ActionScript sia impostata su ActionScript 3.0 e fai clic su Crea progetto.
Ora che il progetto è stato creato, aggiungeremo una nuova cartella per raggruppare le nostre classi. Sempre nello stesso pannello "Progetto" premere l'icona "Nuova cartella" in basso, denominare la nuova cartella "Classi" e fare clic su Crea cartella.
Durante questo tutorial useremo le classi TweenLite di GreenSock per il tweening, quindi dobbiamo aggiungerlo al nostro progetto. Scaricalo ed estrailo, mettilo nella cartella del tuo progetto (così avrai AnimatedMenu / com / greensock /).
Ora se aggiorni il pannello Progetto dovresti vedere questa struttura:
Fai clic sull'icona "Nuovo file" nel pannello Progetto per creare un nuovo file, chiamalo "AnimatedMenu.fla" (assicurati che il Tipo file sia File Flash) e fai clic su Crea file.
Imposta le dimensioni dello stage su 600x350 px.
Selezionare la cartella Classi e fare clic sull'icona "Nuovo file", impostare il Tipo di file su ActionScript, denominarlo "Principale". Questa sarà la nostra classe di documenti, se non hai familiarità con le classi di documenti questo suggerimento rapido sull'uso di una classe di documenti ti aiuterà.
Questo ci consentirà di utilizzare qualsiasi classe presente nella nostra cartella Classes senza la necessità di modificare il nome del pacchetto. Vai su File> Impostazioni pubblicazione, seleziona la scheda Flash, quindi fai clic su Impostazioni ActionScript. Fai clic sul pulsante più "Aggiungi nuovo percorso" e scrivi il percorso relativo "./Class".
All'interno del pacchetto Classi, importa la classe Sprite e usala per estendere la classe "Principale". Ecco il codice:
pacchetto Classes import flash.display.Sprite; public class Main estende Sprite
Queste sono le variabili che useremo (Elemento del menu è una classe ActionScript che creeremo in seguito)
private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem;
Ora andremo a codificare il costruttore, esso contiene il codice che verrà eseguito quando viene chiamata questa classe.
funzione pubblica Main (): void
Crea un'istanza della classe MenuItem per creare quattro voci di menu con colori, etichette, funzionalità e posizioni diversi:
// Crea quattro istanze della classe MenuItem e spacifica i parametri (x, y, colore, etichetta, URL). item1 = new MenuItem (100,60,0x28D9E9, "Pagina iniziale", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Servizi", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "Informazioni su di me", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Contatti", "http://vector.tutsplus.com/");
È possibile modificare gli URL per puntare ad altri siti.
Questo codice aggiunge semplicemente i quattro elementi creati in precedenza sul palco.
// Aggiungi gli elementi allo stage. addChild (item1); addChild (item2); addChild (item3); addChild (Articolo4);
Ora abbiamo finito con la classe Main, ecco il codice completo di questa classe.
pacchetto Classes import flash.display.Sprite; public class Main estende Sprite private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem; public function Main (): void // Crea quattro istanze della classe MenuItem e spacify i parametri (x, y, color, label, URL). item1 = new MenuItem (100,60,0x28D9E9, "Pagina iniziale", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Servizi", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "Informazioni su di me", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Contatti", "http://vector.tutsplus.com/"); // Aggiungi gli elementi allo stage. addChild (item1); addChild (item2); addChild (item3); addChild (Articolo4);
Questa classe è troppo corta per fare tutte le funzioni che il nostro menu dovrebbe fare, quindi creeremo la classe "MenuItem.as" che contiene le funzioni necessarie per il nostro menu.
Aggiungi un nuovo file ActionScript 3 nella cartella Classes esattamente come hai fatto per Main.as. Chiamalo "MenuItem.as".
Queste sono le classi che dobbiamo importare per la nostra nuova classe. Non dimenticare che puoi sempre cercarli su LiveDocs.
pacchetto Classes import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock. *; import com.greensock.TweenLite; import com.greensock.easing. *; import com.greensock.plugins. *; import flash.text.TextField; import flash.media.Sound; import flash.net.navigateToURL; import flash.net.URLRequest;
Dichiara il Elemento del menu class (dovrebbe avere lo stesso nome del suo nome file "MenuItem") ed estendere la classe Sprite.
public class MenuItem estende Sprite
Queste sono le variabili di cui abbiamo bisogno al momento, in seguito ne aggiungeremo altre mentre avanziamo in questo tutorial.
private var rect1: DynamicMovie = new DynamicMovie (); // Usa la classe DynamicMovie al posto della classe Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Questo ci permette di cambiare il punto di registrazione. private var rect3: DynamicMovie = new DynamicMovie (); // Così possiamo ruotare i rettangoli attorno ai loro centri. private var X: Number; private var Y: Number; private var Colore: uint;
DynamicMovie è una classe AS3 basata su una vecchia classe AS2 scritta da Darron Schall; questa classe AS3 estende MovieClip e aggiunge un nuovo set di proprietà (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2) che consentono di manipolare lo sprite in base a un punto di registrazione contestuale che può essere impostato utilizzando setRegistration () metodo.
Abbiamo bisogno di questa classe per ruotare i rettangoli attorno ai loro centri. Quindi mettiamolo.
Puoi trovare questa classe nella cartella sorgente di questo tutorial o puoi scaricarla da oscartrelles.com, quindi inserirla nella cartella Classi in modo che possa essere riconosciuta dal nostro codice.
Questo è il costruttore del MenuItem.
public function MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Ottieni i parametri di posizione e colore. X = posX; Y = posY; Colore = colore; // Chiama la funzione addRect per aggiungere 3 rettangoli con i parametri specificati. addRect (rect1, X-12, Y, 360,62, colori, 0.3,3); addRect (rect2, X-4, Y, 360,62, colori, 0.4,0); addRect (rect3, X, Y, 360,62, colori, 0,7, -2);
Questa funzione è responsabile del disegno dei rettangoli in base ai parametri specificati: posizione, larghezza, altezza, colore, alfa e rotazione.
funzione privata addRect (rect: DynamicMovie, X: Number, Y: Number, width: Number, height: Number, color: uint, alpha: Number, rotation: Number) rect.setRegistration (X + (width / 2), Y + ( altezza / 2)); rect.graphics.beginFill (colore, alfa); rect.graphics.drawRect (X, Y, larghezza, altezza); addChild (rect); rect.rotation2 = rotazione;
Ora puoi testarlo e vedrai questo:
Certo, non possiamo chiamarlo un menu se non aggiungiamo alcune etichette. Ci occuperemo di questo nel prossimo passo.
Torna al tuo file AnimatedMenu.fla e aggiungi un nuovo simbolo (Ctrl + F8); chiamalo "Text_mc" e seleziona "Esporta per ActionScript".
Ora all'interno di questo simbolo aggiungi un campo di testo dinamico 160x30px usando lo strumento testo (T). Questo è il font che ho usato: Creampuff Regular, 24px, #FFFFFF. Denominare l'istanza "txtLabel".
Seleziona il campo di testo e vai a Finestra> Allinea (Ctrl + K) e premi i pulsanti "Allinea il bordo sinistro" e "Allinea il bordo superiore" (assicurati che sia selezionata la casella "Allinea allo stage")
Dopo aver creato il campo di testo con il carattere specificato, dovremmo incorporarlo per visualizzare correttamente il testo.
Quindi vai Testo> Incorporamento font, dargli un nome (ad esempio "Font1"), selezionare il font Creampuff dalla casella combinata Famiglia, negli intervalli di caratteri selezionare tutti i caratteri maiuscoli e minuscoli, quindi premere il pulsante "più" situato nella sezione sinistra. Guarda l'immagine qui sotto:
Per aggiungere etichette alle voci di menu, stiamo per creare un'istanza di Text_mc Un filmato. Aggiungi questa linea di codice alle variabili nel MenuItem.as file.
private var txt: Text_mc = new Text_mc ();
Ora dovremmo assegnare al campo di testo il titolo dato nei parametri del costruttore.
Aggiungi questo codice alla fine del costruttore.
// Assegna un titolo al campo di testo e posizionalo. txt.txtLabel.text = Titolo; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Questo è ciò che dovresti ottenere:
Nei prossimi passi aggiungeremo alcune funzioni per animare il menu.
Per trasformare la nostra voce di menu in un pulsante dovremmo aggiungere un rettangolo trasparente su di esso e impostare il buttonMode a vero. Quindi aggiungi questa variabile alla lista delle variabili.
private var menuButton: DynamicMovie = new DynamicMovie ();
Alla fine del costruttore aggiungi questo codice:
// Usa la funzione addRect per disegnare un rettangolo trasparente sopra la voce di menu. addRect (MenuButton, X-10, Y-5,380,80, colori, 0,0); buttonMode = true;
Aggiungi i seguenti listener di eventi al file MenuButton alla fine del costruttore.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick);
Questa funzione verrà chiamata quando il mouse è sopra il MenuButton.
funzione privata mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Ruota i rettangoli. nuovo TweenLite (rect1, .3, rotation2: -4); nuovo TweenLite (rect2, .3, rotation2: 0); nuovo TweenLite (rect3, .3, rotation2: 5); // Interpolazione del testo. timeline.append (new TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (new TweenLite (txt, .3, x: X + 70, alpha: 1)); // Aggiungi un filtro bagliore al testo .; nuovo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, strength: 1, quality: 3);
Qui stiamo usando le classi GreenSock TimelineLite e TweenMax per animare il pulsante. Cerca nel sito Activetuts + altri tutorial con GreenSock.
Quando il mouse è fuori, questa funzione riporta il menu alla sua posizione iniziale.
funzione privata mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Ruota i rettangoli nella loro posizione iniziale. nuovo TweenLite (rect1, .3, rotation2: 3); nuovo TweenLite (rect2, .3, rotation2: 0); nuovo TweenLite (rect3, .3, rotation2: -2); // indietro l'animazione del testo. timeline.append (new TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (new TweenLite (txt, .3, x: X + 70)); nuovo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, strength: 0, quality: 3);
Questa funzione aprirà l'URL specificato quando si fa clic sulla voce di menu.
funzione privata mouseClick (e: MouseEvent) // Apri l'URL richiesto. navigateToURL (new URLRequest (myURL));
È necessario aggiungere questa variabile all'elenco delle variabili.
private var myURL: String;
E aggiungi questa istruzione al costruttore.
myURL = URL;
Questo è ciò che dovresti ottenere. Passa sopra il menu per vedere l'animazione.
Ora aggiungiamo un bell'effetto bolle.
Questa funzione creerà un numero di bolle con una posizione, una dimensione e un alfa casuali in due direzioni. Questo è il codice:
bolle di funzioni private (posizione: numero, direzione: numero) // Crea 50 bolle, puoi modificare il numero per ottenere più o meno bolle. per (var i = 0; i<50; i++) var bubble:DynamicMovie= new DynamicMovie(); //Set the registration point for the current bubble. bubble.setRegistration(X+position,Y); //Give the bubble the same color as the menu item and a random alpha (but greater than 0.2). bubble.graphics.beginFill(Color,Math.random()+0.2); //draw a circle with a random position and radius. bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5); //add the bubble at the third index so that it is under the menuButton. addChildAt(bubble,3); //Tween the Bubble randomly according to the direction. new TweenLite(bubble,Math.random() + 1,x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut);
Dobbiamo chiamare il bolle () funzione quando il mouse scorre sopra la voce di menu. Quindi aggiungi questo codice al mouseOver () funzione:
// Bolle a sinistra. bolle (70,1); // Bolle a destra (270, -1);
Questo è ciò che otteniamo:
Stiamo per finire aggiungendo un effetto sonoro al menu quando viene spostato dal mouse. Per fare ciò, scarica l'audio da qui (scarica il file mp3). Quindi importalo nella libreria, File> Importa> Importa nella libreria. Rinominarlo in "MySound.mp3".
Aprire le sue proprietà e fare clic su Avanzate; la finestra mostrerà contenuti extra, selezionare "Esporta per ActionScript" e nominare la classe "MySound".
Per aggiungere l'effetto sonoro istanziare il suono importato in precedenza nella libreria e riprodurlo. Inserisci questo codice nel mouseOver () funzione.
var mySound: MySound = new MySound (); mySound.play ();
Abbiamo finito con il nostro menu! Ecco il codice completo di MenuItem.as:
pacchetto import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock. *; import com.greensock.TweenLite; import com.greensock.easing. *; import com.greensock.plugins. *; import flash.text.TextField; import flash.media.Sound; import flash.net.navigateToURL; import flash.net.URLRequest; public class MenuItem estende Sprite private var rect1: DynamicMovie = new DynamicMovie (); // Usa la classe DynamicMovie invece della classe Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Questo ci consente di modificare il punto di registrazione. private var rect3: DynamicMovie = new DynamicMovie (); // Così possiamo ruotare i rettangoli attorno ai loro centri. private var menuButton: DynamicMovie = new DynamicMovie (); private var X: Number; private var Y: Number; private var Colore: uint; private var txt: Text_mc = new Text_mc (); private var myURL: String; public function MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Ottieni i parametri di posizione e colore. X = posX; Y = posY; Colore = colore; myURL = URL; // Chiama la funzione addRect per aggiungere 3 rettangoli con i parametri specificati. addRect (rect1, X-12, Y, 360,62, colori, 0.3,3); addRect (rect2, X-4, Y, 360,62, colori, 0.4,0); addRect (rect3, X, Y, 360,62, colori, 0,7, -2); // Assegna un titolo al campo di testo e posizionalo. txt.txtLabel.text = Titolo; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Usa la funzione addRect per disegnare un rettangolo trasparente sopra la voce di menu. addRect (MenuButton, X-10, Y-5,380,80, colori, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick); funzione privata addRect (rect: DynamicMovie, X: Number, Y: Number, width: Number, height: Number, color: uint, alpha: Number, rotation: Number) rect.setRegistration (X + (width / 2), Y + (altezza / 2)); rect.graphics.beginFill (colore, alfa); rect.graphics.drawRect (X, Y, larghezza, altezza); addChild (rect); rect.rotation2 = rotazione; funzione privata mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); var mySound: MySound = new MySound (); mySound.play (); // Ruota i rettangoli. nuovo TweenLite (rect1, .3, rotation2: -4); nuovo TweenLite (rect2, .3, rotation2: 0); nuovo TweenLite (rect3, .3, rotation2: 5); // Interpolazione del testo. timeline.append (new TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (new TweenLite (txt, .3, x: X + 70, alpha: 1)); // Aggiungi un filtro bagliore al testo .; nuovo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, strength: 1, quality: 3); // Bolle a sinistra. bolle (70,1); // Bolle a destra (270, -1); funzione privata mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Ruota i rettangoli nella loro posizione iniziale. nuovo TweenLite (rect1, .3, rotation2: 3); nuovo TweenLite (rect2, .3, rotation2: 0); nuovo TweenLite (rect3, .3, rotation2: -2); // indietro l'animazione del testo. timeline.append (new TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (new TweenLite (txt, .3, x: X + 70)); nuovo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, strength: 0, quality: 3); funzione privata mouseClick (e: MouseEvent) // Apri l'URL richiesto. navigateToURL (new URLRequest (myURL)); bolle di funzione private (posizione: numero, direzione: numero) // Crea 50 bolle, è possibile modificare il numero per ottenere più o meno bolle. per (var i = 0; i<50; i++) var bubble:DynamicMovie= new DynamicMovie(); //Set the registration point for the bubble. bubble.setRegistration(X+position,Y); //Give the bubble the same color as the menu item and a random alpha but upper than 0.2. bubble.graphics.beginFill(Color,Math.random()+0.2); //draw a circle with a random Position and Radius. ; bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5); //add the bubble at the third index to be under the menuButton.; addChildAt(bubble,3); //Tween the Bubble randomly according to the direction. new TweenLite(bubble,Math.random() + 1,x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut);
Ed ecco il risultato finale:
Ora puoi creare il tuo menu e personalizzarlo aggiungendo altre voci di menu, cambiando i colori, cambiando il testo ...
Il menu è stato codificato in una classe ActionScript separata che consente di utilizzarlo facilmente in altri progetti.
Voglio ringraziarti per la lettura; Spero ti sia piaciuto!
Accentsconagua