Share
Tijdens deze zelfstudie gebruiken we het Projectvenster in Flash om een verticaal AS3-menu met animaties te maken. Met het hele proces kunt u eenvoudig alle aspecten van het menu aanpassen met behulp van de geparametreerde constructors. Lees verder voor meer informatie!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Begin met het maken van een nieuw project. Open Flash en ga naar Bestand> Nieuw en selecteer vervolgens Flash Project. Het projectpaneel verschijnt.
Selecteer Nieuw project in de vervolgkeuzelijst Projecten. Typ de projectnaam "AnimatedMenu". Blader in de hoofdmap door en kies waar u uw project wilt opslaan; u kunt een reeds bestaande map selecteren of een nieuwe maken. Zorg ervoor dat de ActionScript-versie is ingesteld op ActionScript 3.0 en klik op Project maken.
Nu het project is gemaakt, gaan we een nieuwe map toevoegen om onze klassen daarin te groeperen. Klik nog steeds in hetzelfde paneel "Project" op het pictogram "Nieuwe map" onderaan, geef de nieuwe map de naam "Klassen" en klik op Map maken..
Tijdens deze zelfstudie gebruiken we de TweenLite-lessen van GreenSock voor tweening, dus we moeten deze aan ons project toevoegen. Download het en pak het uit, plaats het in je projectmap (dus je hebt AnimatedMenu / com / greensock /).
Als u nu het projectvenster ververst, zou u deze structuur moeten zien:
Klik op het pictogram "Nieuw bestand" in het deelvenster Project om een nieuw bestand te maken, noem dit "AnimatedMenu.fla" (zorg ervoor dat het bestandstype Flash-bestand is) en klik op Bestand maken..
Stel de stage in op 600x350 px.
Selecteer de map Klassen en klik op het pictogram "Nieuw bestand", stel het bestandstype in op ActionScript en noem dit "hoofd". Dit zal onze documentklasse zijn, als u niet vertrouwd bent met documentklassen, kan deze Quick Tip over het gebruik van een documentklasse u helpen.
Hierdoor kunnen we elke klasse in onze klassenmap gebruiken zonder de pakketnaam te hoeven wijzigen. Ga naar Bestand> Publicatie-instellingen, selecteer het tabblad Flash en klik vervolgens op ActionScript-instellingen. Klik op de plusknop "Nieuw pad toevoegen" en schrijf het relatieve pad './Classes'.
Binnen het pakket Classes, importeer de Sprite Class en gebruik deze om de klasse "Main" uit te breiden. Hier is de code:
pakket Klassen import flash.display.Sprite; public class Main breidt uit
Dit zijn de variabelen die we zullen gebruiken (Menu onderdeel is een ActionScript-klasse die we later zullen maken)
privé var item1: MenuItem; privé var item2: MenuItem; privé var item3: MenuItem; privé var item4: MenuItem;
Nu gaan we de constructor coderen, het bevat de code die zal worden uitgevoerd wanneer deze klasse wordt aangeroepen.
public function Main (): void
Start de klasse MenuItem om vier menu-items te maken met verschillende kleuren, labels, functionaliteiten en posities:
// Maak vier exemplaren van de klasse MenuItem en spreid de parameters (x, y, kleur, label, URL) uit. item1 = nieuw MenuItem (100,60,0x28D9E9, "Home page", "http://active.tutsplus.com/"); item2 = nieuw MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = nieuw MenuItem (120.240,0xFC30FC, "Over mij", "http://net.tutsplus.com/"); item4 = nieuw MenuItem (160.330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/");
U kunt de URL's zodanig wijzigen dat ze naar andere sites verwijzen.
Deze code voegt simpelweg de vier items toe die eerder zijn gemaakt voor de fase.
// Voeg de items toe aan het werkgebied. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Nu zijn we klaar met de hoofdklasse, hier is de volledige code van deze klasse.
pakket Klassen import flash.display.Sprite; public class Main breidt Sprite uit private var item1: MenuItem; privé var item2: MenuItem; privé var item3: MenuItem; privé var item4: MenuItem; public function Main (): void // Maak vier instanties van de klasse MenuItem en ruimtelijke parameters (x, y, kleur, label, URL). item1 = nieuw MenuItem (100,60,0x28D9E9, "Home page", "http://active.tutsplus.com/"); item2 = nieuw MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = nieuw MenuItem (120.240,0xFC30FC, "Over mij", "http://net.tutsplus.com/"); item4 = nieuw MenuItem (160.330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/"); // Voeg de items toe aan het werkgebied. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Deze klasse is te kort om alle functies uit te voeren die ons menu zou moeten doen, dus we zullen de klasse "MenuItem.as" maken die de nodige functies voor ons menu bevat.
Voeg een nieuw ActionScript 3-bestand toe in de map Classes, precies zoals u deed voor Main.as. Noem het "MenuItem.as".
Dit zijn de klassen die we moeten importeren voor onze nieuwe klas. Vergeet niet dat je ze altijd kunt opzoeken in de LiveDocs.
pakket Klassen 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;
Verklaren de Menu onderdeel class (moet dezelfde naam hebben als de bestandsnaam "MenuItem") en de klasse Sprite uitbreiden.
public class MenuItem breidt Sprite uit
Dit zijn de variabelen die we op dit moment nodig hebben, later zullen we enkele andere toevoegen naarmate we verdergaan in deze tutorial.
private var rect1: DynamicMovie = nieuwe DynamicMovie (); // Gebruik de klasse DynamicMovie in plaats van de klasse Sprite. private var rect2: DynamicMovie = nieuwe DynamicMovie (); // Dit stelt ons in staat om het registratiepunt te wijzigen. private var rect3: DynamicMovie = nieuwe DynamicMovie (); // Dus we kunnen de rechthoeken rond hun midden draaien. privé var X: Number; privé var Y: Number; privé var Kleur: uint;
DynamicMovie is een AS3-klasse gebaseerd op een oude AS2-klasse geschreven door Darron Schall; deze AS3-klasse breidt MovieClip uit en voegt een nieuwe set eigenschappen toe (x2, y2, rotatie2, schaalX2, schaalY2, muisX2, muisY2) waarmee u de sprite kunt manipuleren op basis van een contextueel registratiepunt dat kan worden ingesteld met behulp van de setRegistration () methode.
We hebben deze klasse nodig om de rechthoeken rond hun middelpunten te roteren. Dus laten we het plaatsen.
U vindt deze klasse in de bronmap van deze tutorial of u kunt deze downloaden van oscartrelles.com en deze vervolgens gewoon in de klassenmap plaatsen zodat deze door onze code kan worden herkend.
Dit is de constructor van het MenuItem.
openbare functie MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Verkrijg de positie- en kleurparameters. X = posX; Y = rust; Kleur = kleur; // Roep de addRect-functie op om 3 rechthoeken toe te voegen met de opgegeven parameters. addRect (rect1, X-12, Y, 360,62, kleur, 0.3,3); addRect (rect2, X-4, Y, 360,62, kleur, 0.4,0); addRect (rect3, X, Y, 360,62, kleur, 0,7, -2);
Deze functie is verantwoordelijk voor het tekenen van de rechthoeken volgens de gegeven parameters: positie, breedte, hoogte, kleur, alpha en rotatie.
persoonlijke functie addRect (rect: DynamicMovie, X: Number, Y: Number, width: Number, height: Number, color: uint, alpha: Number, rotation: Number) rect.setRegistration (X + (width / 2), Y + ( hoogte / 2)); rect.graphics.beginFill (kleur, alfa); rect.graphics.drawRect (X, Y, breedte, hoogte); addChild (rect); rect.rotation2 = rotatie;
Nu kunt u het testen en ziet u dit:
Natuurlijk kunnen we het geen menu noemen als we geen labels toevoegen. We zullen dit in de volgende stap behandelen.
Ga terug naar je AnimatedMenu.fla-bestand en voeg een nieuw symbool toe (Ctrl + F8); noem het "Text_mc" en selecteer "Exporteren voor ActionScript".
Voeg nu binnen dit symbool een 160x30px dynamisch tekstveld toe met behulp van het tekstgereedschap (T). Dit is het lettertype dat ik heb gebruikt: Creampuff Regular, 24px, #FFFFFF. Geef de instantie 'txtLabel' een naam.
Selecteer het TextField en ga naar Venster> Uitlijnen (Ctrl + K) en druk op de knoppen "Linkerrand uitlijnen" en "Begin bovenrand" (zorg ervoor dat het selectievakje "Uitlijnen op stadium" is geselecteerd)
Nadat u het tekstveld met het opgegeven lettertype hebt gemaakt, moeten we dit insluiten om de tekst correct weer te geven.
Dus ga naar Tekst> Insluiten van lettertypen, geef het een naam (bijvoorbeeld "Font1"), selecteer het Creampuff-lettertype uit de Family keuzelijst, selecteer in de Character ranges alle hoofdletters en kleine letters en druk vervolgens op de knop "plus" in het linkerdeel. Zie de afbeelding hieronder:
Om labels toe te voegen aan de menu-items zullen we de Text_mc Filmclip. Voeg deze regel code toe aan de variabelen in de MenuItem.as het dossier.
private var txt: Text_mc = new Text_mc ();
Nu moeten we het TextField de titel toekennen die in de parameters van de constructor is gegeven.
Voeg deze code toe aan het einde van de constructor.
// Ken een titel toe aan het TextField en plaats het. txt.txtLabel.text = Titel; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Dit is wat je zou moeten krijgen:
In de volgende stappen zullen we enkele functies toevoegen om het menu te animeren.
Om van ons menu-item een knop te maken, moeten we er een transparante rechthoek over toevoegen en de buttonMode naar waar. Dus voeg deze variabele toe aan de variabelelijst.
privé var-menu Knop: DynamicMovie = nieuwe DynamicMovie ();
Voeg aan het einde van de constructor deze code toe:
// Gebruik de addRect-functie om een transparante rechthoek over het menu-item te tekenen. addRect (MENUknop, X-10, Y-5,380,80, kleur, 0,0); buttonMode = true;
Voeg de volgende gebeurtenislisteners toe aan de menuknop aan het einde van de constructor.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, muisklik);
Deze functie wordt aangeroepen wanneer de muis boven de knop staat menuknop.
private function mouseOver (e: MouseEvent) var tijdlijn: TimelineLite = new TimelineLite (); // Draai de rechthoeken. nieuwe TweenLite (rect1, .3, rotation2: -4); nieuwe TweenLite (rect2, .3, rotation2: 0); nieuwe TweenLite (rect3, .3, rotation2: 5); // Tween de tekst. timeline.append (nieuwe TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (nieuwe TweenLite (txt, .3, x: X + 70, alpha: 1)); // Voeg een Glow Filter toe aan de tekst .; nieuwe TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, strength: 1, quality: 3);
Hier gebruiken we de GreenSock-klassen TimelineLite en TweenMax om de knop te animeren. Zoek op de Activetuts + -site voor meer tutorials met GreenSock.
Wanneer de muis uit is, zal deze functie het menu terugbrengen naar zijn oorspronkelijke positie.
private function mouseOut (e: MouseEvent) var tijdlijn: TimelineLite = new TimelineLite (); // Draai de rechthoeken naar hun beginpositie. nieuwe TweenLite (rect1, .3, rotation2: 3); nieuwe TweenLite (rect2, .3, rotation2: 0); nieuwe TweenLite (rect3, .3, rotation2: -2); // Achteruit de tekstanimatie. timeline.append (nieuwe TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (nieuwe TweenLite (txt, .3, x: X + 70)); nieuwe TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, strength: 0, quality: 3);
Deze functie opent de opgegeven URL wanneer op het menu-item wordt geklikt.
privéfunctie mouseClick (e: MouseEvent) // Open de gevraagde URL. navigateToURL (nieuwe URLRequest (myURL));
U moet deze variabele toevoegen aan de variabelenlijst.
private var myURL: String;
En voeg deze instructie toe aan de constructor.
myURL = URL;
Dit is wat je zou moeten krijgen. Beweeg over het menu om de animatie te zien.
Laten we nu een cool bubbeleffect toevoegen.
Deze functie maakt een aantal bubbels met een willekeurige positie, grootte en alpha in twee richtingen. Dit is de code:
persoonlijke functie bubbels (positie: Number, direction: Number) // Maak 50 bubbels, u kunt het aantal wijzigen om meer of minder bubbels te krijgen. 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);
We moeten de bubbles () functie wanneer de muis over het menu-item rolt. Dus voeg deze code toe aan de mouseOver () functie:
// Links bubbels. bubbles (70,1); // Rechter bellenbellen (270, -1);
Dit is wat we krijgen:
We gaan af door een geluidseffect aan het menu toe te voegen wanneer het met de muis wordt omgerold. Download hier het geluid vanaf hier (download het mp3-bestand). Importeer het vervolgens in de bibliotheek, Bestand> Importeren> Importeren in bibliotheek. Hernoem het naar "MySound.mp3".
Open de eigenschappen en klik op Geavanceerd; het venster toont extra inhoud, selecteert u "Exporteren voor ActionScript" en geeft de naam "MySound".
Om het geluidseffect toe te voegen, plaatst u een geluid dat eerder in de bibliotheek is geïmporteerd en speelt u het af. Plaats deze code in de mouseOver () functie.
var mySound: MySound = new MySound (); mySound.play ();
We zijn klaar met ons menu! Hier is de volledige code van MenuItem.as:
pakket 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 breidt Sprite uit private var rect1: DynamicMovie = nieuwe DynamicMovie (); // Gebruik de klasse DynamicMovie in plaats van de klasse Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Hiermee kunnen we het registratiepunt wijzigen. private var rect3: DynamicMovie = nieuwe DynamicMovie (); // Zodat we de rechthoeken rond hun middelpunten kunnen roteren. privé var-menu Knop: DynamicMovie = nieuwe DynamicMovie (); privé var X: Number; privé var Y: Number; privé var Kleur: uint; private var txt: Text_mc = new Text_mc (); private var myURL: String; openbare functie MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Verkrijg de positie- en kleurparameters. X = posX; Y = rust; Kleur = kleur; myURL = URL; // Roep de addRect-functie op om 3 rechthoeken toe te voegen met de opgegeven parameters. addRect (rect1, X-12, Y, 360,62, kleur, 0.3,3); addRect (rect2, X-4, Y, 360,62, kleur, 0.4,0); addRect (rect3, X, Y, 360,62, kleur, 0,7, -2); // Ken een titel toe aan het TextField en plaats het. txt.txtLabel.text = Titel; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Gebruik de addRect-functie om een transparante rechthoek over het menu-item te tekenen. addRect (MENUknop, X-10, Y-5,380,80, kleur, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, muisklik); private functie addRect (rect: DynamicMovie, X: Number, Y: Number, width: Number, height: Number, color: uint, alpha: Number, rotation: Number) rect.setRegistration (X + (width / 2), Y + (hoogte / 2)); rect.graphics.beginFill (kleur, alfa); rect.graphics.drawRect (X, Y, breedte, hoogte); addChild (rect); rect.rotation2 = rotatie; private function mouseOver (e: MouseEvent) var tijdlijn: TimelineLite = new TimelineLite (); var mySound: MySound = new MySound (); mySound.play (); // Draai de rechthoeken. nieuwe TweenLite (rect1, .3, rotation2: -4); nieuwe TweenLite (rect2, .3, rotation2: 0); nieuwe TweenLite (rect3, .3, rotation2: 5); // Tween de tekst. timeline.append (nieuwe TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (nieuwe TweenLite (txt, .3, x: X + 70, alpha: 1)); // Voeg een Glow Filter toe aan de tekst .; nieuwe TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, strength: 1, quality: 3); // Links bubbels. bubbles (70,1); // Rechter bellenbellen (270, -1); private function mouseOut (e: MouseEvent) var tijdlijn: TimelineLite = new TimelineLite (); // Draai de rechthoeken naar hun beginpositie. nieuwe TweenLite (rect1, .3, rotation2: 3); nieuwe TweenLite (rect2, .3, rotation2: 0); nieuwe TweenLite (rect3, .3, rotation2: -2); // Achteruit de tekstanimatie. timeline.append (nieuwe TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (nieuwe TweenLite (txt, .3, x: X + 70)); nieuwe TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, strength: 0, quality: 3); persoonlijke functie mouseClick (e: MouseEvent) // Open de gevraagde URL. navigateToURL (nieuwe URLRequest (myURL)); privé-functie bubbels (positie: Number, richting: Number) // Create 50 bubble, u kunt het aantal wijzigen om meer of minder bubbels te krijgen. 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);
En hier is het eindresultaat:
Nu kunt u uw eigen menu maken en dit aanpassen door meer menu-items toe te voegen, de kleuren te wijzigen, de tekst te wijzigen ...
Het menu is gecodeerd in een afzonderlijke ActionScript-klasse waarmee u het eenvoudig in andere projecten kunt gebruiken.
Ik wil je bedanken voor het lezen; ik hoop dat je het leuk vond!
Accentsconagua