Share
Under denne opplæringen bruker vi prosjektpanelet i Flash for å lage en vertikal animert AS3-meny. Hele prosessen vil tillate deg å enkelt tilpasse alle aspekter av menyen ved hjelp av parameteriserte konstruktører. Les videre for å lære mer!
La oss se på det endelige resultatet vi vil jobbe for:
Start med å lage et nytt prosjekt. Åpne Flash og gå til File> New, velg deretter Flash Project. Prosjektpanelet vises.
I Prosjekt-rullegardinmenyen velg Nytt prosjekt. Skriv prosjektnavnet "AnimatedMenu". I Root Folder, bla og velg hvor du vil lagre prosjektet ditt; Du kan velge en allerede eksisterende mappe eller opprette en ny. Pass på at ActionScript-versjonen er satt til ActionScript 3.0 og klikk på Opprett prosjekt.
Nå som prosjektet er opprettet, skal vi legge til en ny mappe for å gruppere det i våre klasser. Fortsett i samme panel "Prosjekt" trykk "New Folder" ikonet i bunnen, navnet den nye mappen "Classes" og klikk Opprett mappe.
Under denne opplæringen bruker vi TweenLite klassene fra GreenSock for tweening, så vi må legge til det i prosjektet vårt. Last ned den og pakk den ut, legg den i prosjektmappen din (slik at du vil ha AnimatedMenu / com / greensock /).
Nå, hvis du oppdaterer prosjektpanelet, bør du se denne strukturen:
Klikk på ikonet "Ny fil" i Prosjektpanelet for å opprette en ny fil, navnet "AnimatedMenu.fla" (kontroller at filtypen er Flash-fil) og klikk på Opprett fil.
Still scenestørrelsen til 600x350px.
Velg mappen Classes og klikk på "New File" -ikonet, sett filtypen til ActionScript, navnet "Main". Dette vil være vår dokumentklasse, hvis du ikke er kjent med dokumentklasser, vil denne Quick Tip om å bruke en dokumentklasse hjelpe deg.
Dette vil tillate oss å bruke hvilken som helst klasse som ligger i vår klasses mappe uten at du må endre pakkenavnet. Gå til Arkiv> Publiser innstillinger, velg Flash-fanen, og klikk deretter ActionScript-innstillinger. Klikk på pluss-knappen "Legg til ny vei" og skriv den relative banen './Classes'.
Inne i pakken Klasser, importer Sprite-klassen og bruk den til å utvide klassen "Main". Her er koden:
pakke klasser import flash.display.Sprite; offentlig klasse Main utvider Sprite
Dette er variablene vi skal bruke (MENUITEM er en ActionScript-klasse som vi vil lage senere)
private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem;
Nå skal vi kode konstruktøren, den inneholder koden som skal utføres når denne klassen heter.
offentlig funksjon Main (): void
Instant MenuItem-klassen for å lage fire menyelementer med forskjellige farger, etiketter, funksjoner og stillinger:
// Opprett fire forekomster av MenuItem-klassen og fordel parametrene (x, y, farge, etikett, URL). item1 = new MenuItem (100,60,0x28D9E9, "Hjemmeside", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "Om meg", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Kontakter", "http://vector.tutsplus.com/");
Du kan endre nettadressene for å peke til andre nettsteder.
Denne koden legger ganske enkelt til de fire elementene som ble opprettet tidligere til scenen.
// Legg til elementene på scenen. addChild (item1); addChild (ITEM2); addChild (ITEM3); addChild (ITEM4);
Nå er vi ferdig med hovedklassen, her er den fulle koden til denne klassen.
pakke klasser import flash.display.Sprite; offentlig klasse Hoved utvider Sprite private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem; offentlig funksjon Main (): void // Opprett fire forekomster av MenuItem-klassen og fordel parametrene (x, y, farge, etikett, URL). item1 = new MenuItem (100,60,0x28D9E9, "Hjemmeside", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "Om meg", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Kontakter", "http://vector.tutsplus.com/"); // Legg til elementene på scenen. addChild (item1); addChild (ITEM2); addChild (ITEM3); addChild (ITEM4);
Denne klassen er for kort til å gjøre alle funksjonene som menyen vår skal gjøre, så vi vil lage "MenuItem.as" -klassen som inneholder de nødvendige funksjonene for menyen vår.
Legg til en ny ActionScript 3-fil i mappen Classes akkurat som du gjorde for Main.as. Gi det navnet "MenuItem.as".
Dette er klassene vi må importere for vår nye klasse. Ikke glem at du alltid kan se dem opp i LiveDocs.
pakke klasser import flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; importer com.greensock. *; importer com.greensock.TweenLite; importer com.greensock.easing. *; importer com.greensock.plugins. *; importer flash.text.TextField; importere flash.media.Sound; importer flash.net.navigateToURL; importere flash.net.URLRequest;
Erklære MENUITEM klasse (bør ha samme navn som filnavn "MenuItem") og utvide Sprite-klassen.
offentlig klasse MenuItem utvider Sprite
Dette er variablene vi trenger for øyeblikket, senere vil vi legge til noen andre mens vi utvikler seg i denne opplæringen.
private var rect1: DynamicMovie = new DynamicMovie (); // Bruk DynamicMovie-klassen i stedet for Sprite-klassen. private var rect2: DynamicMovie = new DynamicMovie (); // Dette tillater oss å endre registreringspunktet. private var rect3: DynamicMovie = new DynamicMovie (); // Så vi kan rotere rektanglene rundt sine sentre. privat var X: tall; privat var Y: nummer; privat var Farge: uint;
DynamicMovie er en AS3 klasse basert på en gammel AS2 klasse skrevet av Darron Schall; denne AS3-klassen utvider MovieClip og legger til et nytt sett med egenskaper (x2, y2, rotation2, skalaX2, skalaY2, mouseX2, mouseY2) som lar deg manipulere sprite basert på et kontekstuelt registreringspunkt som kan settes ved hjelp av setRegistration () metode.
Vi trenger denne klassen for å rotere rektanglene rundt sine sentre. Så la oss plassere den.
Du finner denne klassen i kildemappen til denne opplæringen, eller du kan laste den ned fra oscartrelles.com, og bare plasser den i klassemappen slik at den kan gjenkjennes av vår kode.
Dette er konstruktøren til MenuItem.
offentlig funksjon MenuItem (posX: Nummer, posY: Nummer, farge: uint, Tittel: String, URL: String) // Få posisjon og fargeparametere. X = posX; Y = posY; Farge = farge; // Ring til addRect-funksjonen for å legge til 3 rektangler med de angitte parametrene. addRect (rect1, X-12, Y, 360,62, farge, 0.3,3); addRect (rect2, X-4, Y, 360,62, farge, 0.4,0); addRect (rect3, X, Y, 360,62, Farge, 0,7, 2);
Denne funksjonen er ansvarlig for å tegne rektanglene i henhold til de angitte parametrene: posisjon, bredde, høyde, farge, alfa og rotasjon.
privat funksjon addRect (rect: DynamicMovie, X: Nummer, Y: Nummer, bredde: Nummer, høyde: Nummer, farge: uint, alfa: Nummer, rotasjon: Nummer) rect.setRegistration (X + (width / 2), Y + høyde / 2)); rect.graphics.beginFill (farge, alfa); rect.graphics.drawRect (X, Y, bredde, høyde); addChild (rect); rect.rotation2 = rotasjon;
Nå kan du teste det og du vil se dette:
Jo, vi kan ikke kalle det en meny hvis vi ikke legger til noen etiketter. Vi skal håndtere det i neste trinn.
Gå tilbake til din AnimatedMenu.fla-fil og legg til et nytt symbol (Ctrl + F8); navnet det "Text_mc" og velg "Export for ActionScript".
Nå inne i dette symbolet legger du til en 160x30px Dynamic TextField ved hjelp av tekstverktøyet (T). Dette er skriften jeg brukte: Creampuff Regular, 24px, #FFFFFF. Navn forekomsten "txtLabel".
Velg TextField og gå til Vindu> Juster (Ctrl + K) og trykk på knappene "Juster venstre kant" og "Juster toppkanten" (pass på at avmerkingsboksen "Juster til scene" er valgt)
Etter å ha opprettet tekstfeltet med den angitte fonten, bør vi legge det inn for å vise teksten riktig.
Så gå til Tekst> Innfelt skrift, gi det et navn (for eksempel "Font1"), velg Creampuff skrift fra Family combo-boksen, i Karakterområdet velger du alt bokstaver og små bokstaver, og trykk deretter på "plus" -knappen i venstre del. Se bildet nedenfor:
For å legge til etiketter i menyelementene skal vi instantiere Text_mc Filmklipp. Legg til denne koden til variablene i MenuItem.as fil.
privat var txt: Text_mc = new Text_mc ();
Nå skal vi tilordne TextField tittelen gitt i konstruktørens parametere.
Legg til denne koden til slutten av konstruktøren.
// Tilordne en tittel til TextField og plasser den. txt.txtLabel.text = Tittel; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Dette er hva du bør få:
I de neste trinnene vil vi legge til noen funksjoner for å animere menyen.
For å slå menyelementet inn i en knapp, bør vi legge et gjennomsiktig rektangel over det og sette inn buttonMode til ekte. Så legg til denne variabelen til variabellisten.
private var menyButton: DynamicMovie = new DynamicMovie ();
På slutten av konstruktøren legger du til denne koden:
// Bruk addRect-funksjonen til å tegne et transparent rektangel over menyelementet. addRect (menuButton, X-10, Y-5,380,80, farge, 0,0); buttonMode = true;
Legg til følgende hendelseslyttere til menuButton på slutten av konstruktøren.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouse); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseout); menuButton.addEventListener (MouseEvent.CLICK, museklikk);
Denne funksjonen kalles når musen er over menuButton.
privat funksjon mouseOver (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); // Roter rektanglene. ny TweenLite (rect1, .3, rotation2: -4); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: 5); // Tween teksten. timeline.append (ny TweenLite (txt, .3, x: X + 45, skalaX: 1.1, skalaY: 1.1)); timeline.append (ny TweenLite (txt, .3, x: X + 70, alfa: 1)); // Legg til et lysfilter til teksten .; Ny TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, uskarphet: 5, styrke: 1, kvalitet: 3);
Her bruker vi GreenSock-klassene TimelineLite og TweenMax for å animere knappen. Søk på Activetuts + -siden for flere opplæringsprogrammer med GreenSock.
Når musen er ute, returnerer denne funksjonen menyen til sin opprinnelige posisjon.
privat funksjon mouseOut (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); // Roter rektanglene til startposisjonen. ny TweenLite (rect1, .3, rotation2: 3); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: -2); // bakover tekst animasjonen. timeline.append (ny TweenLite (txt, .3, x: X + 65, alfa: .9)); timeline.append (ny TweenLite (txt, .3, x: X + 70)); Ny TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, uskarphet: 0, styrke: 0, kvalitet: 3);
Denne funksjonen åpner den angitte nettadressen når menyelementet klikkes.
privat funksjon mouseClick (e: MouseEvent) // Åpne den forespurte URLen. navigateToURL (ny URLRequest (myURL));
Du bør legge til denne variabelen i variabellisten.
privat var minURL: String;
Og legg til denne instruksjonen til konstruktøren.
myURL = URL;
Dette er hva du bør få. Rull over menyen for å se animasjonen.
La oss nå legge til en kul bobler effekt.
Denne funksjonen vil skape et antall bobler med en tilfeldig posisjon, størrelse og alfa i to retninger. Dette er koden:
Private funksjon bobler (posisjon: Nummer, retning: Nummer) // Lag 50 bobler, du kan endre nummeret for å få mer eller mindre bobler. for (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);
Vi må ringe (bobler) Fungerer når musen ruller over menyelementet. Så legg til denne koden til mus over() funksjon:
// Venstre bobler. bobler (70,1); // Høyre bobler bobler (270, -1);
Dette er hva vi får:
Vi skal avslutte ved å legge til en lydeffekt på menyen når den rulles over med musen. For å gjøre det, last ned lyden herfra (last ned mp3-filen). Deretter importerer den til biblioteket, Fil> Import> Importer til bibliotek. Gi nytt navn til "MySound.mp3".
Åpne egenskapene og klikk på Avansert; vinduet vil vise ekstra innhold, velg "Eksporter for ActionScript" og navnet på klassen "MySound".
For å legge til lydeffekten, sett inn lyden som ble importert tidligere til biblioteket og spill den. Plasser denne koden i mus over() funksjon.
var mySound: MySound = ny MySound (); mySound.play ();
Vi er ferdige med vår meny! Her er den fulle koden til MenuItem.as:
pakke import flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; importer com.greensock. *; importer com.greensock.TweenLite; importer com.greensock.easing. *; importer com.greensock.plugins. *; importer flash.text.TextField; importere flash.media.Sound; importer flash.net.navigateToURL; importere flash.net.URLRequest; offentlig klasse MenuItem utvider Sprite private var rect1: DynamicMovie = new DynamicMovie (); // Bruk DynamicMovie-klassen i stedet for Sprite-klassen. private var rect2: DynamicMovie = new DynamicMovie (); // Dette tillater oss å endre registreringspunktet. private var rect3: DynamicMovie = new DynamicMovie (); // Så vi kan rotere rektanglene rundt sine sentre. private var menyButton: DynamicMovie = new DynamicMovie (); privat var X: tall; privat var Y: nummer; privat var Farge: uint; privat var txt: Text_mc = new Text_mc (); privat var minURL: String; offentlig funksjon MenuItem (posX: Nummer, posY: Nummer, farge: uint, Tittel: String, URL: String) // Få posisjon og fargeparametere. X = posX; Y = posY; Farge = farge; myURL = URL; // Ring til addRect-funksjonen for å legge til 3 rektangler med de angitte parametrene. addRect (rect1, X-12, Y, 360,62, farge, 0.3,3); addRect (rect2, X-4, Y, 360,62, farge, 0.4,0); addRect (rect3, X, Y, 360,62, Farge, 0,7, 2); // Tilordne en tittel til TextField og plasser den. txt.txtLabel.text = Tittel; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Bruk addRect-funksjonen til å tegne et transparent rektangel over menyelementet. addRect (menuButton, X-10, Y-5,380,80, farge, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouse); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseout); menuButton.addEventListener (MouseEvent.CLICK, museklikk); egen funksjon addRect (rect: DynamicMovie, X: Nummer, Y: Nummer, bredde: Nummer, høyde: Nummer, farge: uint, alfa: Nummer, rotasjon: Nummer) rect.setRegistration (X + (width / 2), Y + (høyde / 2)); rect.graphics.beginFill (farge, alfa); rect.graphics.drawRect (X, Y, bredde, høyde); addChild (rect); rect.rotation2 = rotasjon; privat funksjon mouseOver (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); var mySound: MySound = ny MySound (); mySound.play (); // Roter rektanglene. ny TweenLite (rect1, .3, rotation2: -4); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: 5); // Tween teksten. timeline.append (ny TweenLite (txt, .3, x: X + 45, skalaX: 1.1, skalaY: 1.1)); timeline.append (ny TweenLite (txt, .3, x: X + 70, alfa: 1)); // Legg til et lysfilter til teksten .; Ny TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, uskarphet: 5, styrke: 1, kvalitet: 3); // Venstre bobler. bobler (70,1); // Høyre bobler bobler (270, -1); privat funksjon mouseOut (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); // Roter rektanglene til startposisjonen. ny TweenLite (rect1, .3, rotation2: 3); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: -2); // bakover tekst animasjonen. timeline.append (ny TweenLite (txt, .3, x: X + 65, alfa: .9)); timeline.append (ny TweenLite (txt, .3, x: X + 70)); Ny TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, uskarphet: 0, styrke: 0, kvalitet: 3); privat funksjon mouseClick (e: MouseEvent) // Åpne den forespurte URLen. navigateToURL (ny URLRequest (myURL)); Private funksjon bobler (posisjon: Nummer, retning: Nummer) // Opprett 50 boble, du kan endre nummeret for å få mer eller mindre bobler. for (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);
Og her er sluttresultatet:
Nå kan du lage din egen meny og tilpasse den ved å legge til flere menyelementer, endre fargene, endre teksten ...
Menyen ble kodet i en egen ActionScript-klasse, som lar deg bruke det enkelt i andre prosjekter.
Jeg vil takke deg for å lese; jeg håper du likte det!
Accentsconagua