Share
Under denna handledning använder vi projektpanelen i Flash för att skapa en vertikal animerad AS3-meny. Hela processen gör att du enkelt kan anpassa alla aspekter av menyn med parametrerade konstruktörer. Läs vidare för att lära dig mer!
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Börja med att skapa ett nytt projekt. Öppna Flash och gå till Arkiv> Ny, välj sedan Flash Project. Projektpanelen visas.
I listrutan Projekt väljer du Nytt projekt. Skriv projektnamnet "AnimatedMenu". I Root Folder, bläddra och välj var du vill spara ditt projekt; Du kan välja en redan befintlig mapp eller skapa en ny. Se till att ActionScript-versionen är inställd på ActionScript 3.0 och klicka på Skapa projekt.
Nu när projektet är skapat ska vi lägga till en ny mapp för att gruppera i våra klasser. Fortfarande i samma panel "Projekt" trycker du på ikonen "Ny mapp" längst ner, namnge den nya mappen "Klasser" och klicka på Skapa mapp.
Under denna handledning använder vi TweenLite klasserna från GreenSock för tweening, så vi måste lägga till det i vårt projekt. Ladda ner det och extrahera det, lägg det i din projektmapp (så du kommer att ha AnimatedMenu / com / greensock /).
Nu om du uppdaterar projektpanelen bör du se den här strukturen:
Klicka på ikonen "Ny fil" på projektpanelen för att skapa en ny fil, namnge den "AnimatedMenu.fla" (se till att filtypen är Flash-fil) och klicka på Skapa fil.
Ställ scenstorleken till 600x350px.
Välj mappen Klasser och klicka på ikonen "Ny fil", sätt in filtypen till ActionScript, namnge den "Main". Detta kommer att bli vår dokumentklass, om du inte är bekant med dokumentklasser kommer denna snabba tips om att använda en dokumentklass hjälpa dig.
Detta gör det möjligt för oss att använda vilken klass som helst i vår Classes-mapp utan att behöva ändra paketets namn. Gå till Arkiv> Publiceringsinställningar, välj fliken Flash och klicka sedan på ActionScript-inställningar. Klicka på plusknappen "Lägg till ny väg" och skriv den relativa sökvägen "./Classes".
Inne i paketet Klasser, importera Sprite-klassen och använd den för att utvidga klassen "Main". Här är koden:
paket klasser import flash.display.Sprite; public class Main utökar Sprite
Dessa är de variabler vi ska använda (MENUITEM är en ActionScript-klass som vi kommer att skapa senare)
privat var item1: MenuItem; privat var item2: MenuItem; privat var item3: MenuItem; privat var item4: MenuItem;
Nu ska vi koda konstruktören, den innehåller koden som ska utföras när den här klassen heter.
allmän funktion Main (): void
Starta menyn Klass för att skapa fyra menyalternativ med olika färger, etiketter, funktioner och positioner:
// Skapa fyra instanser av MenuItem-klassen och åtskilda parametrarna (x, y, färg, etikett, URL). item1 = new MenuItem (100,60,0x28D9E9, "Startsida", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "Om mig", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Kontakter", "http://vector.tutsplus.com/");
Du kan ändra webbadresserna för att peka på andra webbplatser.
Denna kod lägger helt enkelt till de fyra objekt som skapades tidigare till scenen.
// Lägg till objekten till scenen. addChild (item1); addChild (ITEM2); addChild (ITEM3); addChild (punkt4);
Nu är vi färdiga med huvudklassen, här är den fullständiga koden i den här klassen.
paket klasser import flash.display.Sprite; public class Main utökar Sprite private var item1: MenuItem; privat var item2: MenuItem; privat var item3: MenuItem; privat var item4: MenuItem; allmän funktion Main (): void // Skapa fyra instanser av MenuItem-klassen och åtskilda parametrarna (x, y, färg, etikett, URL). item1 = new MenuItem (100,60,0x28D9E9, "Startsida", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "Om mig", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Kontakter", "http://vector.tutsplus.com/"); // Lägg till objekten till scenen. addChild (item1); addChild (ITEM2); addChild (ITEM3); addChild (punkt4);
Den här klassen är för kort för att göra alla funktioner som vår meny ska göra, så vi skapar menyn "MenuItem.as" som innehåller de funktioner som behövs för vår meny.
Lägg till en ny ActionScript 3-fil i mappen Classes, precis som du gjorde för Main.as. Namnge det "MenuItem.as".
Det här är de klasser som vi behöver importera för vår nya klass. Glöm inte att du alltid kan titta på dem i LiveDocs.
paket klasser import flash.display.Sprite; importera flash.events.Event; importera flash.events.MouseEvent; importera com.greensock. *; importera com.greensock.TweenLite; importera com.greensock.easing. *; importera com.greensock.plugins. *; importera flash.text.TextField; importera flash.media.Sound; importera flash.net.navigateToURL; importera flash.net.URLRequest;
Förklara MENUITEM klass (ska ha samma namn som dess filnamn "MenuItem") och förlänga Sprite-klassen.
public class MenuItem utökar Sprite
Det här är de variabler som vi behöver just nu, senare lägger vi till några andra när vi går vidare i denna handledning.
privat var rect1: DynamicMovie = new DynamicMovie (); // Använd DynamicMovie-klassen istället för Sprite-klassen. private var rect2: DynamicMovie = new DynamicMovie (); // Det gör att vi kan ändra registreringspunkten. private var rect3: DynamicMovie = new DynamicMovie (); // Så vi kan rotera rektanglarna runt sina centra. privat var X: Number; privat var Y: Nummer; privat var Färg: uint;
DynamicMovie är en AS3-klass baserad på en gammal AS2-klass skriven av Darron Schall; denna AS3-klass utökar MovieClip och lägger till en ny uppsättning egenskaper (x2, y2, rotation2, skalaX2, skalaY2, mouseX2, mouseY2) som låter dig manipulera sprite baserat på en kontextuell registreringspunkt som kan ställas in med setRegistration () metod.
Vi behöver denna klass för att rotera rektanglarna runt sina centra. Så låt oss placera den.
Du hittar den här klassen i källkatalogen i den här handledningen eller du kan ladda ner den från oscartrelles.com och placera den i klassens mapp så att den kan identifieras av vår kod.
Detta är konstruktören av MenuItem.
allmän funktion MenuItem (posX: Nummer, posY: Nummer, färg: uint, Titel: String, URL: String) // Hämta position och färgparametrar. X = posX; Y = posY; Färg = färg; // Ring funktionen addRect för att lägga till 3 rektanglar med angivna parametrar. addRect (rect1, X-12, Y, 360,62, Färg, 0.3,3); addRect (rect2, X-4, Y, 360,62, Färg, 0.4,0); addRect (rect3, X, Y, 360,62, Färg, 0,7, -2);
Denna funktion är ansvarig för att rita rektanglarna enligt de angivna parametrarna: position, bredd, höjd, färg, alfa och rotation.
privat funktion addRect (rect: DynamicMovie, X: Number, Y: Number, width: Number, height: Number, color: uint, alfa: Number, rotation: Number) rect.setRegistration (X + (bredd / 2), Y + höjd / 2)); rect.graphics.beginFill (färg, alfa); rect.graphics.drawRect (X, Y, bredd, höjd); addChild (rect); rekt.rotation2 = rotation;
Nu kan du testa det och du kommer att se detta:
Visst, vi kan inte kalla det en meny om vi inte lägger till några etiketter. Vi kommer att ta itu med det i nästa steg.
Gå tillbaka till din AnimatedMenu.fla-fil och lägg till en ny symbol (Ctrl + F8); namnge det "Text_mc" och välj "Export for ActionScript".
Nu inuti denna symbol lägger du till en 160x30px Dynamic TextField med hjälp av Text Tool (T). Detta är typsnittet jag använde: Creampuff Regular, 24px, #FFFFFF. Namn förekomsten "txtLabel".
Välj TextField och gå till Fönster> Justera (Ctrl + K) och tryck på knapparna "Justera vänster kant" och "Justera överkant" (se till att kryssrutan "Justera till steg" är vald)
Efter att du skapat textfältet med det angivna tecknet ska vi bädda in det för att visa texten ordentligt.
Så gå till Text> Inbyggnad av teckensnitt, ge det ett namn (till exempel "Font1"), välj Creampuff-teckensnittet i kombinationsfönstret Family, i teckenintervallet välj alla stora och små bokstäver och tryck sedan på plus-knappen i vänstra sektionen. Se bilden nedan:
För att lägga till etiketter i menyalternativen kommer vi att instansera Text_mc Filmklipp. Lägg till den här raden av kod till variablerna i MenuItem.as fil.
privat var txt: Text_mc = new Text_mc ();
Nu ska vi tilldela TextField den rubrik som anges i konstruktörens parametrar.
Lägg till den här koden till slutet av konstruktören.
// Tilldela en titel till TextField och placera den. txt.txtLabel.text = Titel; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Detta är vad du bör få:
I nästa steg lägger vi till några funktioner för att animera menyn.
För att ändra menyalternativet till en knapp borde vi lägga en transparent rektangel över den och ställa in button till Sann. Lägg så till den här variabeln på variabelistan.
privat var menyButton: DynamicMovie = new DynamicMovie ();
I slutet av konstruktören lägg till den här koden:
// Använd AddRect-funktionen för att rita en transparent rektangel över menyalternativet. addRect (MenuButton, X-10, Y-5,380,80, Färg, 0,0); buttonMode = true;
Lägg till följande händelse lyssnare till MenuButton i slutet av konstruktören.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseover); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, musklick);
Denna funktion kommer att ringas när musen är över MenuButton.
privat funktion mouseOver (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); // Rotera rektanglarna. ny TweenLite (rect1, .3, rotation2: -4); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: 5); // Tween texten. timeline.append (ny TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); tidslinje.append (ny TweenLite (txt, .3, x: X + 70, alfa: 1)); // Lägg till ett glödfilter till texten .; ny TweenMax (txt, .3, glowFilter: färg: 0xffffff, alfa: 1, blurX: 5, oskärpa: 5, styrka: 1, kvalitet: 3);
Här använder vi GreenSock klasserna TimelineLite och TweenMax för att animera knappen. Sök på Activetuts + -sidan för fler handledning med GreenSock.
När musen är ute kommer denna funktion att returnera menyn till sin ursprungliga position.
privat funktion mouseOut (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); // Rotera rektanglarna till sin ursprungliga position. ny TweenLite (rect1, .3, rotation2: 3); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: -2); // bakåt textanimering. tidslinje.append (ny TweenLite (txt, .3, x: X + 65, alfa: .9)); tidslinje.append (ny TweenLite (txt, .3, x: X + 70)); ny TweenMax (txt, .3, glowFilter: färg: 0xffffff, alfa: 0, blurX: 0, oskärpa: 0, styrka: 0, kvalitet: 3);
Den här funktionen öppnar den angivna webbadressen när menyalternativet klickas.
privat funktion mouseClick (e: MouseEvent) // Öppna den begärda URL: n. navigateToURL (ny URLRequest (myURL));
Du bör lägga till den här variabeln på variabelistan.
privat var myURL: String;
Och lägg till den här instruktionen till konstruktören.
myURL = URL;
Detta är vad du ska få. Rulla över menyn för att se animationen.
Låt oss nu lägga till en cool bubblaffekt.
Denna funktion kommer att skapa ett antal bubblor med en slumpmässig position, storlek och alfa i två riktningar. Detta är koden:
privata funktionsbubblor (position: Nummer, riktning: Nummer) // Skapa 50 bubblor, du kan ändra numret för att få mer eller mindre bubblor. för (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åste ringa bubblor () funktionen när musen rullar över menyalternativet. Lägg till den här koden i mouseover () fungera:
// Vänster bubblor. bubblor (70,1); // Höger bubblor bubblor (270, -1);
Det här är vad vi får:
Vi kommer att avsluta genom att lägga till en ljudeffekt på menyn när den rullas över med musen. För att göra det, ladda ner ljudet härifrån (ladda ner mp3-filen). Sedan importera det till biblioteket, Arkiv> Importera> Importera till bibliotek. Byt namn på den till "MySound.mp3".
Öppna dess egenskaper och klicka på Avancerat; fönstret kommer att visa extra innehåll, välj "Exportera för ActionScript" och namnge klassen "MySound".
För att lägga till ljudeffekten, instansera ljudet som importerats tidigare till biblioteket och spela det. Placera den här koden i mouseover () fungera.
var mySound: MySound = ny MySound (); mySound.play ();
Vi är färdiga med vår meny! Här är den fullständiga koden på MenuItem.as:
paket import flash.display.Sprite; importera flash.events.Event; importera flash.events.MouseEvent; importera com.greensock. *; importera com.greensock.TweenLite; importera com.greensock.easing. *; importera com.greensock.plugins. *; importera flash.text.TextField; importera flash.media.Sound; importera flash.net.navigateToURL; importera flash.net.URLRequest; public class MenuItem utökar Sprite private var rect1: DynamicMovie = new DynamicMovie (); // Använd DynamicMovie-klassen i stället för Sprite-klassen. private var rect2: DynamicMovie = new DynamicMovie (); // Det gör att vi kan ändra registreringspunkten. private var rect3: DynamicMovie = new DynamicMovie (); // Så vi kan rotera rektanglarna runt sina centra. privat var menyButton: DynamicMovie = new DynamicMovie (); privat var X: Number; privat var Y: Nummer; privat var Färg: uint; privat var txt: Text_mc = new Text_mc (); privat var myURL: String; allmän funktion MenuItem (posX: Nummer, posY: Nummer, färg: uint, Titel: String, URL: String) // Hämta position och färgparametrar. X = posX; Y = posY; Färg = färg; myURL = URL; // Ring funktionen addRect för att lägga till 3 rektanglar med angivna parametrar. addRect (rect1, X-12, Y, 360,62, Färg, 0.3,3); addRect (rect2, X-4, Y, 360,62, Färg, 0.4,0); addRect (rect3, X, Y, 360,62, Färg, 0,7, -2); // Tilldela en titel till TextField och placera den. txt.txtLabel.text = Titel; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Använd AddRect-funktionen för att rita en transparent rektangel över menyalternativet. addRect (MenuButton, X-10, Y-5,380,80, Färg, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseover); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, musklick); privat funktion addRect (rect: DynamicMovie, X: Number, Y: Number, width: Number, height: Number, color: uint, alfa: Number, rotation: Number) rect.setRegistration (X + (bredd / 2), Y + (höjd / 2)); rect.graphics.beginFill (färg, alfa); rect.graphics.drawRect (X, Y, bredd, höjd); addChild (rect); rekt.rotation2 = rotation; privat funktion mouseOver (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); var mySound: MySound = ny MySound (); mySound.play (); // Rotera rektanglarna. ny TweenLite (rect1, .3, rotation2: -4); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: 5); // Tween texten. timeline.append (ny TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); tidslinje.append (ny TweenLite (txt, .3, x: X + 70, alfa: 1)); // Lägg till ett glödfilter till texten .; ny TweenMax (txt, .3, glowFilter: färg: 0xffffff, alfa: 1, blurX: 5, oskärpa: 5, styrka: 1, kvalitet: 3); // Vänster bubblor. bubblor (70,1); // Höger bubblor bubblor (270, -1); privat funktion mouseOut (e: MouseEvent) var tidslinje: TimelineLite = new TimelineLite (); // Rotera rektanglarna till sin ursprungliga position. ny TweenLite (rect1, .3, rotation2: 3); ny TweenLite (rect2, .3, rotation2: 0); ny TweenLite (rect3, .3, rotation2: -2); // bakåt textanimering. tidslinje.append (ny TweenLite (txt, .3, x: X + 65, alfa: .9)); tidslinje.append (ny TweenLite (txt, .3, x: X + 70)); ny TweenMax (txt, .3, glowFilter: färg: 0xffffff, alfa: 0, blurX: 0, oskärpa: 0, styrka: 0, kvalitet: 3); privat funktion mouseClick (e: MouseEvent) // Öppna den begärda URL: n. navigateToURL (ny URLRequest (myURL)); privata funktionsbubblor (position: Nummer, riktning: Nummer) // Skapa 50 bubblor, du kan ändra numret för att få mer eller mindre bubblor. för (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);
Och här är det slutliga resultatet:
Nu kan du skapa din egen meny och anpassa den genom att lägga till fler menyalternativ, ändra färgerna, ändra texten ...
Menyn kodades i en separat ActionScript-klass som gör att du enkelt kan använda den i andra projekt.
Jag vill tacka dig för att du läste Jag hoppas att du tyckte om det!
Accentsconagua