Use Flash Prosjekt Panel bygge en dynamisk AS3 Meny
en
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette innlegget er en del av en serie som heter GreenSock Tweening Platform.Create en organisk Løs Med Perlin NoiseCreating en virtuell joystick for touch-enheter
I denne opplæringen, vil vi bruke Prosjekt Panel i Flash for å skape 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!
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Opprett et nytt prosjekt
Begynn med å opprette et nytt prosjekt. Åpne Flash og gå til Fil > Ny, velg Flash Project. Prosjekt panelet vil vises.
I Projects nedtrekksmenyen velger du Nytt prosjekt. Skriv inn prosjektnavnet "AnimatedMenu". I rotmappen, bla gjennom og velge hvor du vil lagre prosjektet; du kan velge en allerede eksisterende mappe eller opprette en ny. Sørg for Actionscript-versjonen er satt til Actionscript 3.0, og klikk på Opprett prosjekt.
Trinn 2: Legg til Classes Folder
Nå som prosjektet er opprettet, vi kommer til å legge til en ny mappe til gruppen i det våre klasser. Fortsatt i samme panel "Project" trykk "Ny mappe" ikonet nederst, navnet på den nye mappen "Kurs" og klikk Opprett mappe
Trinn 3:. Installer TweenLite
I denne opplæringen vil vi bruke TweenLite klasser fra GreenSock for tweening, så vi trenger å legge det til vårt prosjekt. Last den ned og hente den, legg den i prosjektmappen (slik at du vil ha AnimatedMenu /com /greensock /)
Hvis du nå oppdatere prosjektpanelet bør du se denne strukturen.
Trinn 4: Opprette en ny Flash-fil
Klikk på "Ny fil" -ikonet i prosjektpanelet for å opprette en ny fil som du kaller "AnimatedMenu.fla" (sørg for at filtypen er Flash . fil) og klikk på Opprett filen
Sett scenen størrelse 600x350px
Trinn 5:. Opprett en ny Actionscript-fil
Velg Classes mappen og klikk på "Ny fil" -ikonet, angi File Type til Actionscript, name it "Main". Dette vil være vårt dokument klasse, hvis du ikke er kjent med dokument klasser denne rask spiss på å bruke et dokument klasse vil hjelpe deg
Trinn 6:. Sett en relativ Kilde Sti
Dette vil tillate oss å bruke noen klasse ligger i vår Classes mappe uten behov for å endre navnet på pakken. Gå til Fil > Publish Settings, velg kategorien Flash, klikk deretter Action innstillinger. Klikk på pluss-knappen "Add New Path" og skrive den relative path './Classes'
Trinn 7:. Begynn Coding de Main.as File
inne i pakken Classes, importere Sprite klasse og bruke den til å extand klassen "Main". Her er koden:
pakke Classes {import flash.display.Sprite; public class Hoved strekker Sprite {
Trinn 8: Erklærer Variabler
Dette er de variablene vi vil bruke (MENUITEM er en Action klasse som vi vil skape senere)
privat Var item1: MENUITEM; private Var item2: MENUITEM; private Var item3: MENUITEM; private Var item4: MENUITEM;
Trinn 9: Constructor
Nå har vi tenkt å kode konstruktøren, den inneholder koden som vil bli utført når denne klassen kalles
offentlig funksjon main (). void {
Trinn 10: Lag fire menyelementer
instantiate menyvalget klassen til å lage fire menyelementer med forskjellige farger, etiketter, funksjonalitet og stillinger:
//Lag fire forekomster av menyvalget klasse og spacify parametrene (x, y, farge, etikett, URL) .item1 = new MENUITEM (100,60,0x28D9E9, "Home side "," http://active.tutsplus.com/"); item2 = nye MENUITEM (140,150,0xA8FA2D," Tjenester "," http://psd.tutsplus.com/"); item3 = nye MENUITEM (120240 , 0xFC30FC, "Om meg", "http://net.tutsplus.com/"); item4 = nye MENUITEM (160,330,0xEE2B2B, "Kontakter", "http://vector.tutsplus.com/"); < p> Du kan endre nettadressene til å peke på andre nettsteder
Trinn 11:. Tilsett varer i Stage
Denne koden legger bare de fire elementene som ble opprettet tidligere til scenen.
//Legg elementene til stage.addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Nå er vi ferdige med hovedklassen, her er den fullstendige koden denne klassen
pakken Classes {import flash.display.Sprite.; public class Hoved strekker Sprite {private Var item1: MENUITEM; private Var item2: MENUITEM; private Var item3: MENUITEM; private Var item4: MENUITEM; offentlig funksjon main (): void {//Lag fire forekomster av menyvalget klasse og spacify parametrene (x, y, farge, etikett, URL). item1 = new MENUITEM (100,60,0x28D9E9, "Home page", "http://active.tutsplus.com/"); item2 = new MENUITEM (140,150,0xA8FA2D, "Tjenester", "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 elementene til scenen. addChild (item1); addChild (item2); addChild (item3); addChild (item4); }}}
Denne klassen er for kort til å gjøre alle de funksjonene som vår meny er ment å gjøre, så vi vil skape "MenuItem.as" klassen som inneholder de nødvendige funksjonene for vår meny.
Trinn 12: Lag MenuItem.as
Legg til en ny Actionscript 3 fil i klassene mappen akkurat som du gjorde for Main.as. Den navnet "MenuItem.as"
Trinn 13:. Import Classes
Dette er klasser som vi trenger å importere for vår nye klasse. Ikke glem at du alltid kan se dem opp i LiveDocs
pakke Classes {import flash.display.Sprite.; import flash.events.Event; import flash.events.MouseEvent; importere com.greensock. *; import com.greensock.TweenLite; importere com.greensock.easing. *; import com.greensock.plugins. *; import flash.text.TextField; import flash.media.Sound; import flash.net.navigateToURL; import flash.net.URLRequest;
Trinn 14. klasse og variabler
Erklærer menyvalget klasse (bør ha samme navn som sin File name "MENUITEM") og forlenge Sprite klasse
public class MENUITEM strekker Sprite {
Dette er de variablene som vi trenger i øyeblikket, senere vil vi legge til noen andre som vi fremgang i denne opplæringen
private Var rect1. DynamicMovie = new DynamicMovie (); //Bruk DynamicMovie klassen i stedet for Sprite klasse. private Var rect2: DynamicMovie = new DynamicMovie (); //Dette tillater oss å endre registrerings point.private Var rect3: DynamicMovie = new DynamicMovie (); //Så kan vi rotere rectangels rundt deres centers.private Div X: Antall; private Var Y: Number; private Var Farge: uint;
DynamicMovie er en AS3 klasse basert på en gammel AS2 klasse skrevet av Darron Schall; dette AS3 klassen strekker MovieClip og legger et nytt sett med egenskaper (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2) som lar deg manipulere sprite basert på en kontekstuell registreringspunktet som kan stilles inn med setRegistration () metoden .
Vi trenger denne klassen å rotere rektangler rundt sine sentre. Så la oss plassere den
Trinn 15:. Tilsett DynamicMovie Class
Du finner denne klassen i kildemappen av denne opplæringen, eller du kan laste det ned fra oscartrelles.com, så bare plassere den i klasser Mappe slik at det kan gjenkjennes av vår kode
Trinn 16:.. The Constructor
Dette er konstruktøren av menyvalget
offentlig funksjon MENUITEM (POSX: Antall, Posy: Antall, farge: uint, Tittel: String, URL: String) {//Få posisjons- og fargeparametere. X = POSX; Y = Posy; Color = farge; //Ring addRect funksjon for å legge til 3 rektangler med de angitte parameterne. 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);}
Trinn 17: addRect () Funksjon
Denne funksjonen er ansvarlig for å tegne rektangler i henhold til de gitte parametere: posisjon, bredde, høyde, farge, alfa og rotasjon
privat funksjon addRect (rect:. DynamicMovie, X: Antall, Y: Antall, bredde: Antall, høyde: Antall, farge: UINT, alfa: Number , rotasjon: Number) {rect.setRegistration (X + (bredde /2), Y + (høyde /2)); rect.graphics.beginFill (farge, alpha); rect.graphics.drawRect (X, Y, bredde, høyde); addChild (rect); rect.rotation2 = rotasjon;}
Nå kan du teste det og du vil se dette:
Jada, vi kan ikke kalle det en meny hvis vi ikke legger noen etiketter. Vi vil håndtere det i neste trinn
Trinn 18:. Legg en Dynamic Textfield
Leder tilbake til AnimatedMenu.fla fil og legge til et nytt symbol (Ctrl + F8 ); name it "Text_mc" og velg "Export for Action".
Nå inne dette symbolet legge en 160x30px Dynamic Textfield bruker Text Tool (T). Denne skrifta jeg brukte: Creampuff Regular, 24px, #FFFFFF. Navn forekomsten "txtLabel"
Velg Textfield og gå til Vindu >.; Rett Etter å ha laget tekstfeltet med den angitte skriften bør vi legge det for å vise teksten riktig Så gå til Text >.; Font Embedding Hvis du vil legge etiketter til menyelementene vi kommer på å bruke Text_mc MovieClip. . Nå skal vi tildele til Textfield tittelen gitt i konstruktøren parametre Anmeldelser Legg denne koden til slutten av konstruktøren.. 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 vi vil legge til noen funksjoner for å animere menyen For å slå vår meny element i en knapp vi bør legge et gjennomsiktig rektangel over det og sette buttonMode til ekte. Så legge denne variabelen til den variable liste I slutten av konstruktøren legge inn denne koden: Legg til Følgende hendelsen lyttere til menuButton på slutten av constructor. Denne funksjonen vil bli kalt når musen er over menuButton Her er vi ved hjelp av GreenSock klasser TimelineLite og TweenMax å animere knappen. Søk i Activetuts + nettstedet for mer opplæring med GreenSock Når musen er ut denne funksjonen vil returnere menyen til sin opprinnelige posisjon Denne funksjonen vil åpne den angitte URL når menypunktet klikkes Du bør legge denne variabelen til listen variabler Og legge denne instruksjonen til konstruktøren Dette er hva du bør få. Roll over menyen for å se animasjonen Nå la oss legge til en kul bobler effekt Denne funksjonen vil skape en rekke av bobler med en tilfeldig posisjon, størrelse og alfa i to retninger. Dette er koden: Vi må ringe boblene () -funksjonen når musen beveges over menyelement. Så legg denne koden for å mouse () -funksjonen: Dette er hva vi får: Vi kommer til å avslutte ved å legge en lydeffekt til menyen når den er rullet over av musen. For å gjøre dette, laste ned lyd herfra (laste ned mp3-fil). Deretter importere den til biblioteket, Fil > Import > Importer til bibliotek Åpne dets egenskaper, og klikk på Avansert.; vinduet vil vise ekstra innhold, velg "Export for Action" og navngi Class "MySound" Hvis du vil legge til lyd Effekten instantiate lyden importert tidligere til biblioteket og spille den. Plasser denne koden i mouse () -funksjonen Vi er ferdig med vår meny! Her er den fullstendige koden til MenuItem.as: Og her er det endelige resultatet: Nå kan du lage din egen meny og tilpasse den ved å legge til flere menyelementer, endre farger, endre teksten ... På menyen var kodet i en egen Action klasse som lar deg bruke den lett i andre prosjekter Jeg vil takke dere for lesing.; Jeg håper du likte det! Anmeldelser
(Ctrl + K) og trykk på knappene "align venstre kant" og "justere øvre kant" (sørg for at ruten "Rett til å iscenesette" er valgt)
Trinn 19: Embed Skrift
, gi den et navn (for eksempel "Font1"), velg Creampuff skrift fra Family kombinasjonsboksen i tegnklasser velge alt av store og små bokstaver, trykk på "pluss" knappen som finnes i den venstre delen. Se bildet nedenfor:
Trinn 20: Legg Etiketter
Legge denne linjen med kode til variablene i MenuItem.as filen private Var txt. Text_mc = new Text_mc ();
//Tilordne en tittel til Textfield og plassere den
Trinn 21:. Menyknapp
privat Var menuButton. DynamicMovie = new DynamicMovie ();
//Bruk addRect funksjon for å tegne et gjennomsiktig rektangel over menyen item.addRect (menuButton, X-10, Y-5,380,80, Farge, 0,0); buttonMode = true;
Trinn 22: Legg tilstelninger Lyttere
menuButton.addEventListener(MouseEvent.MOUSE_OVER,mouseOver);menuButton.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);menuButton.addEventListener(MouseEvent.CLICK,mouseClick);
Step 23: Mouse Over
privat funksjon mouse (e: MouseEvent) {var tidslinje. TimelineLite = new TimelineLite (); //Roter rectangels. ny TweenLite (rect1, 0,3, {rotation2: -4}); ny TweenLite (rect2, 0,3, {rotation2: 0}); ny TweenLite (rect3, 0,3, {rotation2: 5}); //Tween teksten. timeline.append (ny TweenLite (txt, 0,3, {x: X + 45, scaleX: 1.1, Scaley: 1,1})); timeline.append (ny TweenLite (txt, 0,3, {x: X + 70, alfa 1})); //Legg en Glow Filter til teksten .; ny TweenMax (txt, 0,3, {glowFilter: {color: 0xFFFFFF, alfa: 1, blurX: 5, Blury: 5, styrke: 1, kvalitet: 3}});}
Trinn 24:.. Mouse Ut
privat funksjon mouseout (e: MouseEvent) {var tidslinje: TimelineLite = new TimelineLite (); //Roter rektanglene til sin opprinnelige posisjon. ny TweenLite (rect1, 0,3, {rotation2: 3}); ny TweenLite (rect2, 0,3, {rotation2: 0}); ny TweenLite (rect3, 0,3, {rotation2: -2}); //bakover teksten animasjon. timeline.append (ny TweenLite (txt, 0,3, {x: X + 65, alpha: 0,9})); timeline.append (ny TweenLite (txt, 0,3, {x: X + 70})); ny TweenMax(txt,.3,{glowFilter:{color:0xffffff,alpha:0,blurX:0,blurY:0,strength:0,quality:3}});}
Step 25: Museklikk
privat funksjon museklikk (e: MouseEvent). {//Åpne forespurte nettadressen. navigateToURL (ny URLRequest (myURL));}
privat Var myURL. String;
myURL = URL;.
Trinn 26:.. The Bubbles Effect
privat funksjon bobler (posisjoner: Antall, regi: Number) {//Lag 50 bobler, kan du endre nummeret for å få mer eller mindre bobler. for (var i = 0; i < 50; i ++) {var boble: DynamicMovie = new DynamicMovie (); //Sett registreringspunktet for den aktuelle boble. bubble.setRegistration (X + stilling, Y); //Gi boblen samme farge som menyelement og en tilfeldig alfa (men større enn 0,2). bubble.graphics.beginFill (farge, Math.random () + 0,2); //tegne en sirkel med en tilfeldig posisjon og radius. bubble.graphics.drawCircle (X + posisjon + Math.random () * i, Y + 55 - Math.random () * i, Math.random () * 5); //legge boblen ved det tredje indeks, slik at det er under menuButton. addChildAt (bubble, 3); //Tween boble tilfeldig i henhold til retningen. ny TweenLite (boble, Math.random () + 1, {x2: X - 80 * retning + posisjon - Math.random () * i, y2: Y - Math.random () * i, alfa: 0, enkel: Circ.easeOut}); }}
Trinn 27: Ring Bubbles Function
//Venstre bubbles.bubbles (70,1); //Høyre bubblesbubbles (270, -1);
Trinn 28: importere Sound Effect
. Endre navnet til "MySound.mp3"
Trinn 29:. Legg Sound Effect til meny
Var MySound. MySound = new MySound (); mySound.play ();
pakke {import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importere com.greensock. *; import com.greensock.TweenLite; importere 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 strekker Sprite {private Var rect1: DynamicMovie = new DynamicMovie (); //Bruk DynamicMovie klassen i stedet for Sprite klasse. private Var rect2: DynamicMovie = new DynamicMovie (); //Dette tillater oss å endre registreringspunkt. private Var rect3: DynamicMovie = new DynamicMovie (); //Så vi kan rotere rectangels rundt sine sentre. private Var menuButton: DynamicMovie = new DynamicMovie (); private Var X: Antall; private Var Y: Number; private Var Farge: UINT; private Var txt: Text_mc = new Text_mc (); private Var myURL: String; offentlig funksjon MENUITEM (POSX: Antall, Posy: Antall, farge: uint, Tittel: String, URL: String) {//Få posisjons- og fargeparametere. X = POSX; Y = Posy; Color = farge; myURL = URL; //Ring addRect funksjon for å legge til 3 rektangler med de angitte parameterne. 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); //Gi en tittel til Textfield og plassere den. txt.txtLabel.text = Tittel; txt.x = X + 70; txt.y = Y + 16; addChild (txt); //Bruk addRect funksjon for å tegne et gjennomsiktig rektangel over menyelement. 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); } Private funksjon addRect (rect: DynamicMovie, X: Antall, Y: Number, bredde: Antall, høyde: Antall, farge: uint, alpha: Antall, rotasjon: Number) {rect.setRegistration (X + (bredde /2), Y + (høyde /2)); rect.graphics.beginFill (farge, alpha); rect.graphics.drawRect (X, Y, bredde, høyde); addChild (rect); rect.rotation2 = rotasjon; } Private funksjon mouse (e: MouseEvent) {var tidslinje: TimelineLite = new TimelineLite (); Var MySound: MySound = new MySound (); mySound.play (); //Roter rectangels. ny TweenLite (rect1, 0,3, {rotation2: -4}); ny TweenLite (rect2, 0,3, {rotation2: 0}); ny TweenLite (rect3, 0,3, {rotation2: 5}); //Tween teksten. timeline.append (ny TweenLite (txt, 0,3, {x: X + 45, scaleX: 1.1, Scaley: 1,1})); timeline.append (ny TweenLite (txt, 0,3, {x: X + 70, alfa 1})); //Legg en Glow Filter til teksten .; ny TweenMax (txt, 0,3, {glowFilter: {color: 0xFFFFFF, alfa: 1, blurX: 5, Blury: 5, styrke: 1, kvalitet: 3}}); //Venstre bobler. bobler (70,1); //Høyre bobler bobler (270, -1); } Private funksjon mouseout (e: MouseEvent) {var tidslinje: TimelineLite = new TimelineLite (); //Roter rektanglene til sin opprinnelige posisjon. ny TweenLite (rect1, 0,3, {rotation2: 3}); ny TweenLite (rect2, 0,3, {rotation2: 0}); ny TweenLite (rect3, 0,3, {rotation2: -2}); //bakover teksten animasjon. timeline.append (ny TweenLite (txt, 0,3, {x: X + 65, alpha: 0,9})); timeline.append (ny TweenLite (txt, 0,3, {x: X + 70})); ny TweenMax (txt, 0,3, {glowFilter: {color: 0xFFFFFF, alfa: 0, blurX: 0, Blury: 0, styrke: 0, kvalitet: 3}}); } Private funksjon museklikk (e: MouseEvent) {//Åpne forespurte nettadressen. navigateToURL (ny URLRequest (myURL)); } Private funksjon bobler (posisjoner: Antall, retning: Number) {//Lag 50 boble, du kan endre nummer for å få mer eller mindre bobler. for (var i = 0; i < 50; i ++) {var boble: DynamicMovie = new DynamicMovie (); //Sett registreringspunkt for boblen. bubble.setRegistration (X + stilling, Y); //Gi boblen samme farge som menyelement og en tilfeldig alpha men øvre enn 0,2. bubble.graphics.beginFill (farge, Math.random () + 0,2); //tegne en sirkel med en tilfeldig posisjon og Radius.; bubble.graphics.drawCircle (X + posisjon + Math.random () * i, Y + 55 - Math.random () * i, Math.random () * 5); //legge boblen i tredje indeksen skal være under menuButton .; addChildAt (bubble, 3); //Tween boble tilfeldig i henhold til retningen. ny TweenLite (boble, Math.random () + 1, {x2: X - 80 * retning + posisjon - Math.random () * i, y2: Y - Math.random () * i, alfa: 0, enkel: Circ.easeOut}); }}}}
Konklusjon