Share
În timpul acestui tutorial, vom folosi Panoul de proiect în Flash pentru a crea un meniu animat vertical AS3. Întregul proces vă va permite să personalizați cu ușurință toate aspectele meniului utilizând constructorii parametrizați. Citiți mai departe pentru a afla mai multe!
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Începeți prin crearea unui nou proiect. Deschideți Flash și mergeți la File> New, apoi selectați Flash Project. Se va afișa panoul Proiect.
În meniul drop-down Projects select New Project. Introduceți numele proiectului "AnimatedMenu". În directorul rădăcină, răsfoiți și alegeți unde doriți să salvați proiectul; puteți selecta un dosar deja existent sau puteți crea unul nou. Asigurați-vă că versiunea ActionScript este setată la ActionScript 3.0 și faceți clic pe Creare proiect.
Acum, când proiectul este creat, vom adăuga un nou dosar pentru a grupa clasele noastre. Tot în același panou "Proiect" apăsați pictograma "Folder nou" din partea de jos, denumiți noul folder "Clase" și faceți clic pe Creare dosar.
În timpul acestui tutorial vom folosi clasele TweenLite de la GreenSock pentru a fi adăugate, deci trebuie să le adăugăm la proiectul nostru. Descărcați-l și extrageți-l, plasați-l în dosarul proiectului (deci veți avea AnimatedMenu / com / greensock /).
Acum, dacă actualizați panoul Proiect, ar trebui să vedeți această structură:
Faceți clic pe pictograma "Fișier nou" din panoul Proiect pentru a crea un fișier nou, denumiți-l "AnimatedMenu.fla" (asigurați-vă că tipul de fișier este fișier Flash) și faceți clic pe Creare fișier.
Setați dimensiunea scenei la 600x350px.
Selectați folderul Clase și faceți clic pe pictograma "Fișier nou", setați tipul fișierului la ActionScript, numiți-l "Main". Aceasta va fi clasa noastră de documente, dacă nu sunteți familiarizați cu clasele de documente acest Sfat rapid privind utilizarea unei clase de documente vă va ajuta.
Acest lucru ne va permite să folosim orice clasă din dosarul claselor noastre fără a fi nevoie să modificăm numele pachetului. Accesați Fișier> Setări publicare, selectați fila Flash, apoi faceți clic pe Setări ActionScript. Faceți clic pe butonul plus "Adăugați calea nouă" și scrieți calea relativă "./Classes".
În interiorul clasei de pachete, importați Clasa Sprite și folosiți-o pentru extinderea clasei "Main". Iată codul:
pachete de clase import flash.display.Sprite; clasa publică principală extinde Sprite
Acestea sunt variabilele pe care le vom folosi (Articol din meniu este o clasă ActionScript pe care o vom crea ulterior)
privat var element1: MenuItem; privat var element2: MenuItem; privat var item3: MenuItem; privat var element4: MenuItem;
Acum vom codifica constructorul, acesta va conține codul care va fi executat atunci când este apelată această clasă.
funcția publică Main (): void
Instantiați clasa MenuItem pentru a crea patru elemente de meniu cu diferite culori, etichete, funcționalități și poziții:
// Creați patru instanțe ale clasei MenuItem și spațiați parametrii (x, y, culoare, etichetă, URL). item1 = nou MenuItem (100,60,0x28D9E9, "Pagina principală", "http://active.tutsplus.com/"); item2 = noul MenuItem (140,150,0xA8FA2D, "Servicii", "http://psd.tutsplus.com/"); item3 = nou MenuItem (120,240,0xFC30FC, "Despre mine", "http://net.tutsplus.com/"); item4 = noul MenuItem (160,330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/");
Puteți schimba adresele URL pentru a indica alte site-uri.
Acest cod adaugă pur și simplu cele patru elemente create anterior la etapă.
// Adăugați elementele în scenă. addChild (item1); addChild (ITEM2); addChild (ITEM3); addChild (item4);
Acum am terminat cu clasa Main, aici este codul complet al acestei clase.
pachete de clase import flash.display.Sprite; clasa publică principală extinde Sprite private var item1: MenuItem; privat var element2: MenuItem; privat var item3: MenuItem; privat var element4: MenuItem; funcția publică Main (): void // Creați patru instanțe ale clasei MenuItem și spațiați parametrii (x, y, culoare, etichetă, URL). item1 = nou MenuItem (100,60,0x28D9E9, "Pagina principală", "http://active.tutsplus.com/"); item2 = noul MenuItem (140,150,0xA8FA2D, "Servicii", "http://psd.tutsplus.com/"); item3 = nou MenuItem (120,240,0xFC30FC, "Despre mine", "http://net.tutsplus.com/"); item4 = noul MenuItem (160,330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/"); // Adăugați elementele în scenă. addChild (item1); addChild (ITEM2); addChild (ITEM3); addChild (item4);
Această clasă este prea scurtă pentru a face toate funcțiile pe care trebuie să le facă meniul nostru, așa că vom crea clasa "MenuItem.as" care conține funcțiile necesare pentru meniul nostru.
Adăugați un nou fișier ActionScript 3 în folderul Classes exact așa cum ați procedat pentru Main.as. Denumiți-o "MenuItem.as".
Acestea sunt clasele pe care trebuie să le importăm pentru noua noastră clasă. Nu uitați că le puteți căuta mereu în LiveDocs.
pachete de clase import flash.display.Sprite; importul flash.events.Event; importul 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;
Declarați Articol din meniu (ar trebui să aibă același nume ca și numele de fișier "MenuItem") și să extindă clasa Sprite.
clasa publica MenuItem extinde Sprite
Acestea sunt variabilele de care avem nevoie în acest moment, mai târziu vom adăuga și alții pe măsură ce progresăm în acest tutorial.
privat var rect1: DynamicMovie = DynamicMovie nou (); // Utilizați clasa DynamicMovie în locul clasei Sprite. privat var rect2: DynamicMovie = DynamicMovie nou (); // Aceasta ne permite să schimbăm punctul de înregistrare. privat var rect3: DynamicMovie = nou DynamicMovie (); // Deci putem roti rectangele în jurul centrelor lor. privat var X: număr; privat var Y: număr; private var Culoare: uint;
DynamicMovie este o clasă AS3 bazată pe o clasă veche AS2 scrisă de Darron Schall; această clasă AS3 extinde MovieClip și adaugă un set nou de proprietăți (x2, y2, rotație2, scarăX2, scaleY2, mouseX2, mouseY2) care vă permit să manipulați sprite pe baza unui punct de înregistrare contextual care poate fi setat utilizând setRegistration () metodă.
Avem nevoie de această clasă pentru a roti dreptunghiurile din jurul lor. Deci, să o punem.
Puteți găsi această clasă în directorul sursă al acestui tutorial sau îl puteți descărca de la oscartrelles.com, apoi plasați-l în folderul Clase astfel încât acesta să poată fi recunoscut de codul nostru.
Acesta este constructorul MenuItem.
funcția publică MenuItem (posX: Număr, posY: Număr, culoare: uint, Titlu: String, URL: String) // Obțineți parametrii de poziție și culoare. X = posX; Y = posY; Culoare = culoare; // Apelați funcția addRect pentru a adăuga 3 dreptunghiuri cu parametrii specificați. addRect (rect1, X-12, Y, 360,62, Color, 0.3,3); addRect (rect2, X-4, Y, 360,62, Color, 0.4,0); addRect (rect3, X, Y, 360,62, Color, 0,7, -2);
Această funcție este responsabilă pentru desenarea dreptunghiurilor în funcție de parametrii: poziția, lățimea, înălțimea, culoarea, alfa și rotația.
funcția privată addRect (rect: DynamicMovie, X: număr, Y: număr, lățime: număr, înălțime: număr, culoare: uint, alfa: număr, rotire: număr) rect.setRegistration înălțime / 2)); rect.graphics.beginFill (culoare, alfa); rect.graphics.drawRect (X, Y, lățime, înălțime); addChild (RECT); rect.rotation2 = rotație;
Acum îl puteți testa și veți vedea acest lucru:
Sigur, nu putem numi un meniu dacă nu adăugăm etichete. Vom face acest lucru în pasul următor.
Reveniți la fișierul AnimatedMenu.fla și adăugați un nou simbol (Ctrl + F8); denumiți-o "Text_mc" și selectați "Export pentru ActionScript".
Acum, în interiorul acestui simbol, adăugați un Dynamic TextField de 160x30 pixeli folosind Instrumentul de Text (T). Acesta este fontul folosit de mine: Creampuff Regular, 24px, #FFFFFF. Denumiți instanța "txtLabel".
Selectați TextField și mergeți la Fereastra> Aliniere (Ctrl + K) și apăsați butoanele "Aliniați marginea din stânga" și "Aliniați marginea superioară" (asigurați-vă că este selectată caseta de selectare "Aliniere la scenă")
După crearea câmpului de text cu fontul specificat, trebuie să îl încorporăm pentru a afișa corect textul.
Deci, du-te la Text> Embedding Font, dați-i un nume (de exemplu "Font1"), selectați fontul Creampuff din caseta combo Familie, din intervalele de caractere selectați toate caracterele superioare și mici, apoi apăsați butonul "plus" situat în partea stângă. Vedeți imaginea de mai jos:
Pentru a adăuga etichete la elementele de meniu pe care le vom instanți Text_mc MovieClip. Adăugați acest rând de cod la variabilele din MenuItem.as fişier.
privat var txt: Text_mc = new Text_mc ();
Acum ar trebui să atribuim TextField titlul dat în parametrii constructorului.
Adăugați acest cod la sfârșitul constructorului.
// Alocați un titlu TextField și plasați-l. txt.txtLabel.text = Titlu; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Aceasta este ceea ce ar trebui să obțineți:
În etapele următoare vom adăuga câteva funcții pentru a anima meniul.
Pentru a transforma elementul de meniu într-un buton, trebuie să adăugăm un dreptunghi transparent peste acesta și să setăm buttonMode la Adevărat. Deci, adăugați această variabilă la lista de variabile.
private var meniuButton: DynamicMovie = nou DynamicMovie ();
La sfârșitul constructorului adăugați acest cod:
// Utilizați funcția addRect pentru a desena un dreptunghi transparent peste elementul de meniu. addRect (menuButton, X-10, Y-5,380,80, Color, 0,0); buttonMode = true;
Adăugați următoarele ascultători de evenimente la menuButton la sfârșitul constructorului.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseover); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseout); menuButton.addEventListener (MouseEvent.CLICK, mouseclick);
Această funcție va fi apelată atunci când mouse-ul este peste menuButton.
funcția privată mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Rotiți dreptunghiurile. noul TweenLite (rect1, .3, rotation2: -4); noul TweenLite (rect2, .3, rotation2: 0); noul TweenLite (rect3, .3, rotation2: 5); // Adăugați textul. timeline.append (noul TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (noul TweenLite (txt, .3, x: X + 70, alpha: 1)); // Adăugați un filtru strălucitor la text .; noul TweenMax (txt, .3, glowFilter: culoare: 0xffffff, alfa: 1, blurX: 5, blurY: 5, puterea: 1, calitatea: 3);
Aici folosim clasele GreenSock TimelineLite și TweenMax pentru a anima butonul. Căutați în site-ul Activetuts + mai multe tutoriale cu GreenSock.
Când mouse-ul este oprit, această funcție va readuce meniul la poziția sa inițială.
funcția privată mouseOut (e: MouseEvent) var timeline: TimelineLite = noua TimelineLite (); // Rotiți dreptunghiurile în poziția lor inițială. noul TweenLite (rect1, .3, rotation2: 3); noul TweenLite (rect2, .3, rotation2: 0); noul TweenLite (rect3, .3, rotation2: -2); // înapoi animația textului. timeline.append (noul TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (noul TweenLite (txt, .3, x: X + 70)); noul TweenMax (txt, .3, glowFilter: culoare: 0xffffff, alfa: 0, blurX: 0, blurY: 0, puterea: 0, calitatea: 3);
Această funcție va deschide adresa URL specificată când se face clic pe elementul de meniu.
funcția privată mouseClick (e: MouseEvent) // Deschideți adresa URL solicitată. navigateToURL (noua adresă URLRequest (myURL));
Ar trebui să adăugați această variabilă în lista variabilelor.
privat var myURL: String;
Și adăugați această instrucțiune constructorului.
myURL = URL;
Așa trebuie să obțineți. Rulați meniul pentru a vedea animația.
Acum, să adăugăm un efect de bule răcoroase.
Această funcție va crea un număr de bule cu o poziție aleatorie, mărime și alfa în două direcții. Acesta este codul:
bule de funcții private (poziție: număr, direcție: număr) // Creați 50 de bule, puteți modifica numărul pentru a obține mai mult sau mai puțin bule. pentru (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);
Trebuie să sunăm bule() când mouse-ul rulează peste elementul de meniu. Deci, adăugați acest cod la mouse-ul peste() funcţie:
Bubble stânga. bule (70,1); Buburile din bulele drepte (270, -1);
Aceasta este ceea ce primim:
Vom termina prin adăugarea unui efect de sunet la meniu atunci când este rulat de mouse. Pentru a face acest lucru, descărcați sunetul de aici (descărcați fișierul mp3). Apoi importați-l la bibliotecă, Fișier> Import> Import la bibliotecă. Redenumiți-l la "MySound.mp3".
Deschideți proprietățile și faceți clic pe Avansat; fereastra va afișa un conținut suplimentar, selectați "Export pentru ActionScript" și denumiți clasa "MySound".
Pentru a adăuga efectul de sunet, instanțiați sunetul importat anterior în bibliotecă și redați-l. Plasați acest cod în mouse-ul peste() funcţie.
var mySound: MySound = noul MySound (); mySound.play ();
Am terminat cu meniul nostru! Aici este codul complet al MenuItem.as:
pachet import flash.display.Sprite; importul flash.events.Event; importul 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 extinde Sprite private var rect1: DynamicMovie = new DynamicMovie (); // Utilizați clasa DynamicMovie în loc de clasa Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Aceasta ne permite să schimbăm punctul de înregistrare. private var rect3: DynamicMovie = new DynamicMovie (); // Deci putem roti rectangele în jurul centrelor lor. private var meniuButton: DynamicMovie = nou DynamicMovie (); privat var X: număr; privat var Y: număr; private var Culoare: uint; privat var txt: Text_mc = new Text_mc (); privat var myURL: String; funcția publică MenuItem (posX: Număr, posY: Număr, culoare: uint, Titlu: String, URL: String) // Obțineți parametrii de poziție și culoare. X = posX; Y = posY; Culoare = culoare; myURL = URL; // Apelați funcția addRect pentru a adăuga 3 dreptunghiuri cu parametrii specificați. addRect (rect1, X-12, Y, 360,62, Color, 0.3,3); addRect (rect2, X-4, Y, 360,62, Color, 0.4,0); addRect (rect3, X, Y, 360,62, Color, 0,7, -2); // Alocați un titlu TextField și plasați-l. txt.txtLabel.text = Titlu; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Utilizați funcția addRect pentru a desena un dreptunghi transparent peste elementul de meniu. addRect (menuButton, X-10, Y-5,380,80, Color, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseover); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseout); menuButton.addEventListener (MouseEvent.CLICK, mouseclick); funcția privată addRect (rect: DynamicMovie, X: număr, Y: număr, lățime: număr, înălțime: număr, culoare: uint, alfa: număr, rotire: număr) rect.setRegistration (X + (înălțime / 2)); rect.graphics.beginFill (culoare, alfa); rect.graphics.drawRect (X, Y, lățime, înălțime); addChild (RECT); rect.rotation2 = rotație; funcția privată mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); var mySound: MySound = noul MySound (); mySound.play (); // Rotiți dreptunghiurile. noul TweenLite (rect1, .3, rotation2: -4); noul TweenLite (rect2, .3, rotation2: 0); noul TweenLite (rect3, .3, rotation2: 5); // Adăugați textul. timeline.append (noul TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (noul TweenLite (txt, .3, x: X + 70, alpha: 1)); // Adăugați un filtru strălucitor la text .; noul TweenMax (txt, .3, glowFilter: culoare: 0xffffff, alfa: 1, blurX: 5, blurY: 5, puterea: 1, calitatea: 3); Bubble stânga. bule (70,1); Buburile din bulele drepte (270, -1); funcția privată mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Rotiți dreptunghiurile în poziția lor inițială. noul TweenLite (rect1, .3, rotation2: 3); noul TweenLite (rect2, .3, rotation2: 0); noul TweenLite (rect3, .3, rotation2: -2); // înapoi animația textului. timeline.append (noul TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (noul TweenLite (txt, .3, x: X + 70)); noul TweenMax (txt, .3, glowFilter: culoare: 0xffffff, alfa: 0, blurX: 0, blurY: 0, puterea: 0, calitatea: 3); funcția privată mouseClick (e: MouseEvent) // Deschideți adresa URL solicitată. navigateToURL (noua adresă URLRequest (myURL)); bule private de funcții (poziția: Număr, direcție: Număr) // Creați 50 de bule, puteți modifica numărul pentru a obține mai mult sau mai puțin bule. pentru (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);
Iată rezultatul final:
Acum puteți crea propriul meniu și personaliza-l adăugând mai multe elemente de meniu, schimbând culorile, schimbând textul ...
Meniul a fost codificat într-o clasă separată ActionScript care vă permite să o utilizați cu ușurință în alte proiecte.
Vreau să vă mulțumesc că ați citit; sper ca ti-a placut!
Accentsconagua