Share
In diesem Lernprogramm verwenden wir das Projektfenster in Flash, um ein vertikal animiertes AS3-Menü zu erstellen. Der gesamte Prozess ermöglicht Ihnen die einfache Anpassung aller Aspekte des Menüs mithilfe der parametrisierten Konstruktoren. Lesen Sie weiter, um mehr zu erfahren!
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Beginnen Sie mit dem Erstellen eines neuen Projekts. Öffnen Sie Flash, gehen Sie zu Datei> Neu und wählen Sie Flash-Projekt aus. Das Projektfenster wird angezeigt.
Wählen Sie in der Dropdown-Liste Projekte die Option Neues Projekt. Geben Sie den Projektnamen "AnimatedMenu" ein. Suchen Sie im Stammordner nach dem Ort, an dem Sie Ihr Projekt speichern möchten. Sie können einen bereits vorhandenen Ordner auswählen oder einen neuen erstellen. Stellen Sie sicher, dass die ActionScript-Version auf ActionScript 3.0 eingestellt ist, und klicken Sie auf Projekt erstellen.
Nachdem das Projekt erstellt wurde, fügen wir einen neuen Ordner hinzu, um unsere Klassen darin zu gruppieren. Klicken Sie im selben Fenster "Projekt" noch auf das Symbol "Neuer Ordner", benennen Sie den neuen Ordner "Klassen" und klicken Sie auf "Ordner erstellen".
In diesem Lernprogramm werden wir die TweenLite-Klassen von GreenSock für das Tweening verwenden. Daher müssen wir sie unserem Projekt hinzufügen. Laden Sie es herunter und extrahieren Sie es, platzieren Sie es in Ihrem Projektordner (so haben Sie AnimatedMenu / com / greensock /).
Wenn Sie nun das Projektfenster aktualisieren, sollten Sie folgende Struktur sehen:
Klicken Sie im Projektfenster auf das Symbol "Neue Datei", um eine neue Datei zu erstellen, nennen Sie sie "AnimatedMenu.fla" (stellen Sie sicher, dass der Dateityp "Flash-Datei" ist) und klicken Sie auf "Datei erstellen".
Stellen Sie die Bühnengröße auf 600x350px ein.
Wählen Sie den Ordner Classes aus und klicken Sie auf das Symbol "New File", legen Sie den Dateityp auf ActionScript fest und nennen Sie ihn "Main". Dies ist unsere Dokumentenklasse. Wenn Sie nicht mit Dokumentenklassen vertraut sind, hilft Ihnen dieser Schnelltipp zur Verwendung einer Dokumentenklasse.
Dadurch können wir jede Klasse in unserem Classes-Ordner verwenden, ohne den Paketnamen ändern zu müssen. Gehen Sie zu Datei> Veröffentlichungseinstellungen, wählen Sie die Registerkarte Flash aus und klicken Sie auf ActionScript-Einstellungen. Klicken Sie auf das Plusfeld "Neuen Pfad hinzufügen" und geben Sie den relativen Pfad "./Classes" ein..
Importieren Sie in den Paketklassen die Sprite-Klasse und erweitern Sie die Klasse "Main". Hier ist der Code:
package Classes import flash.display.Sprite; öffentliche Klasse Main erweitert Sprite
Dies sind die Variablen, die wir verwenden werden (MenuItem ist eine ActionScript-Klasse, die wir später erstellen werden.
private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem;
Jetzt werden wir den Konstruktor codieren. Er enthält den Code, der ausgeführt wird, wenn diese Klasse aufgerufen wird.
öffentliche Funktion Main (): void
Instanziieren Sie die MenuItem-Klasse, um vier Menüelemente mit unterschiedlichen Farben, Beschriftungen, Funktionen und Positionen zu erstellen:
// Erzeuge vier Instanzen der MenuItem-Klasse und ordne die Parameter an (x, y, color, label, URL). item1 = new MenuItem (100,60,0x28D9E9, "Homepage", "http://active.tutsplus.com/")); item2 = neues MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/")); item3 = new MenuItem (120,240,0xFC30FC, "Über mich", "http://net.tutsplus.com/"); item4 = new MenuItem (160.330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/");
Sie können die URLs ändern, um auf andere Websites zu verweisen.
Dieser Code fügt einfach die vier zuvor erstellten Elemente der Bühne hinzu.
// Füge die Elemente der Bühne hinzu. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Jetzt sind wir mit der Main-Klasse fertig, hier ist der vollständige Code dieser Klasse.
package Classes import flash.display.Sprite; public class Main erweitert Sprite private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem; public function Main (): void // Erzeuge vier Instanzen der MenuItem-Klasse und ordne die Parameter an (x, y, color, label, URL). item1 = neues MenuItem (100,60,0x28D9E9, "Homepage", "http://active.tutsplus.com/"); item2 = neues MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/")); item3 = new MenuItem (120,240,0xFC30FC, "Über mich", "http://net.tutsplus.com/"); item4 = new MenuItem (160.330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/"); // Füge die Elemente der Bühne hinzu. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Diese Klasse ist zu kurz, um alle Funktionen auszuführen, die unser Menü ausführen soll. Daher erstellen wir die Klasse "MenuItem.as", die die für unser Menü erforderlichen Funktionen enthält.
Fügen Sie eine neue ActionScript 3-Datei genau wie bei Main.as im Classes-Ordner hinzu. Nennen Sie es "MenuItem.as".
Dies sind die Klassen, die wir für unsere neue Klasse importieren müssen. Vergiss nicht, dass du sie immer in den LiveDocs nachschlagen kannst.
package Classes 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;
Deklarieren Sie das MenuItem class (sollte den gleichen Namen wie der Dateiname "MenuItem" haben) und erweitern die Sprite-Klasse.
public class MenuItem erweitert Sprite
Dies sind die Variablen, die wir im Moment benötigen. Später werden wir im Verlauf dieses Tutorials weitere hinzufügen.
private var rect1: DynamicMovie = neues DynamicMovie (); // Verwenden Sie die DynamicMovie-Klasse anstelle der Sprite-Klasse. private var rect2: DynamicMovie = neues DynamicMovie (); // Dadurch können wir den Registrierungspunkt ändern. private var rect3: DynamicMovie = neues DynamicMovie (); // So können wir die Rechtecke um ihre Zentren drehen. private var X: Anzahl; private var Y: Anzahl; private var Farbe: uint;
DynamicMovie ist eine AS3-Klasse, die auf einer alten, von Darron Schall geschriebenen AS2-Klasse basiert. Diese AS3-Klasse erweitert MovieClip und fügt einen neuen Satz von Eigenschaften hinzu (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2), mit denen Sie das Sprite basierend auf einem kontextabhängigen Registrierungspunkt bearbeiten können, der mithilfe von festgelegt werden kann setRegistration () Methode.
Wir brauchen diese Klasse, um die Rechtecke um ihre Zentren zu drehen. Also lass es uns platzieren.
Sie finden diese Klasse im Quellordner dieses Tutorials oder Sie können sie von oscartrelles.com herunterladen und dann im Klassenordner ablegen, damit sie von unserem Code erkannt wird.
Dies ist der Konstruktor des MenuItem.
public function MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Liefert die Positions- und Farbparameter. X = posX; Y = posY; Farbe = Farbe; // Rufen Sie die Funktion addRect auf, um 3 Rechtecke mit den angegebenen Parametern hinzuzufügen. 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);
Diese Funktion ist für das Zeichnen der Rechtecke gemäß den angegebenen Parametern verantwortlich: Position, Breite, Höhe, Farbe, Alpha und Drehung.
private Funktion addRect (rect: DynamicMovie, X: Number, Y: Number, Breite: Number, Höhe: Number, Farbe: uint, alpha: Number, Rotation: Number) rect.setRegistration (X + (width / 2), Y + ( Höhe / 2)); rect.graphics.beginFill (Farbe, Alpha); rect.graphics.drawRect (X, Y, Breite, Höhe); addChild (rect); rect.rotation2 = Drehung;
Jetzt können Sie es testen und Sie werden Folgendes sehen:
Sicher, wir können es nicht als Menü bezeichnen, wenn wir keine Etiketten hinzufügen. Wir werden uns im nächsten Schritt damit befassen.
Gehen Sie zurück zu Ihrer AnimatedMenu.fla-Datei und fügen Sie ein neues Symbol hinzu (Strg + F8). Nennen Sie es "Text_mc" und wählen Sie "Exportieren für ActionScript"..
Fügen Sie nun innerhalb dieses Symbols ein 160x30px Dynamic TextField mit dem Text-Tool (T) hinzu. Dies ist die Schriftart, die ich verwendet habe: Creampuff Regular, 24px, #FFFFFF. Benennen Sie die Instanz "txtLabel"..
Wählen Sie das Textfeld aus und gehen Sie zu Fenster> Ausrichten (Strg + K) und drücken Sie die Schaltflächen "Linke Kante ausrichten" und "Oberer Rand ausrichten" (stellen Sie sicher, dass das Kontrollkästchen "Ausrichten an Bühne" aktiviert ist).
Nachdem Sie das Textfeld mit der angegebenen Schriftart erstellt haben, sollten Sie es einbetten, um den Text richtig anzuzeigen.
Also geh zu Text> Schrift einbetten, Geben Sie ihm einen Namen (z. B. "Font1"), wählen Sie die Schrift "Creampuff" aus dem Kombinationsfeld "Familie" aus, wählen Sie in den Zeichenbereichen alle Groß- und Kleinschreibung aus und drücken Sie dann die Schaltfläche "Plus" im linken Bereich. Siehe das Bild unten:
Um den Menüpunkten Beschriftungen hinzuzufügen, werden wir das instanziieren Text_mc Filmausschnitt. Fügen Sie diese Codezeile den Variablen in der hinzu MenuItem.as Datei.
private var txt: Text_mc = new Text_mc ();
Nun sollten wir dem TextField den in den Konstruktorparametern angegebenen Titel zuweisen.
Fügen Sie diesen Code am Ende des Konstruktors hinzu.
// Weisen Sie dem TextField einen Titel zu und platzieren Sie ihn. txt.txtLabel.text = Titel; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Das sollten Sie bekommen:
In den nächsten Schritten werden wir einige Funktionen hinzufügen, um das Menü zu animieren.
Um unseren Menüpunkt in eine Schaltfläche zu verwandeln, sollten wir ein transparentes Rechteck darüber setzen und das setzen buttonMode zu wahr. Fügen Sie diese Variable also zur Variablenliste hinzu.
private var menuButton: DynamicMovie = new DynamicMovie ();
Fügen Sie am Ende des Konstruktors diesen Code hinzu:
// Verwenden Sie die Funktion addRect, um ein transparentes Rechteck über dem Menüelement zu zeichnen. addRect (Menüschaltfläche, X-10, Y-5,380,80, Farbe, 0,0); buttonMode = true;
Fügen Sie dem Ereignis die folgenden Ereignis-Listener hinzu Menütaste am Ende des Konstruktors.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick);
Diese Funktion wird aufgerufen, wenn sich der Mauszeiger über der befindet Menütaste.
private Funktion mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Die Rechtecke drehen. neues TweenLite (rect1, .3, rotation2: -4); neues TweenLite (rect2, .3, rotation2: 0); neues TweenLite (rect3, .3, rotation2: 5); // Tween den Text. timeline.append (new TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (new TweenLite (txt, .3, x: X + 70, alpha: 1)); // Einen Glow-Filter zum Text hinzufügen .; neues TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, stärke: 1, quality: 3);
Hier verwenden wir die GreenSock-Klassen TimelineLite und TweenMax, um die Schaltfläche zu animieren. Suchen Sie auf der Activetuts + Site nach weiteren Tutorials zu GreenSock.
Wenn sich die Maus nicht befindet, kehrt diese Funktion zum ursprünglichen Menü zurück.
private Funktion mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Die Rechtecke in ihre Ausgangsposition drehen. neues TweenLite (rect1, .3, rotation2: 3); neues TweenLite (rect2, .3, rotation2: 0); neues TweenLite (rect3, .3, rotation2: -2); // rückwärts die Textanimation. timeline.append (new TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (new TweenLite (txt, .3, x: X + 70)); neues TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, Stärke: 0, Qualität: 3);
Diese Funktion öffnet die angegebene URL, wenn auf das Menüelement geklickt wird.
private Funktion mouseClick (e: MouseEvent) // Die angeforderte URL öffnen. navigateToURL (neue URLRequest (myURL));
Sie sollten diese Variable zur Variablenliste hinzufügen.
private var myURL: Zeichenfolge;
Fügen Sie diese Anweisung dem Konstruktor hinzu.
myURL = URL;
Das sollten Sie bekommen. Bewegen Sie den Mauszeiger über das Menü, um die Animation anzuzeigen.
Nun fügen wir einen coolen Blaseneffekt hinzu.
Diese Funktion erzeugt eine Anzahl von Blasen mit einer zufälligen Position, Größe und Alpha in zwei Richtungen. Dies ist der Code:
private Funktionsblasen (Position: Nummer, Richtung: Nummer) // Erstellen Sie 50 Blasen. Sie können die Anzahl ändern, um mehr oder weniger Blasen zu erhalten. 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);
Wir müssen die anrufen Bläschen() Funktion, wenn der Mauszeiger über den Menüpunkt bewegt wird. Fügen Sie diesen Code also dem hinzu mouseOver () Funktion:
// Blasen hinterlassen. Blasen (70,1); // Rechte Luftblasen (270, -1);
Das bekommen wir:
Zum Abschluss fügen Sie dem Menü einen Soundeffekt hinzu, wenn es mit der Maus über den Mauszeiger gerollt wird. Laden Sie dazu den Sound von hier herunter (laden Sie die MP3-Datei herunter). Dann importieren Sie es in die Bibliothek, Datei> Importieren> In Bibliothek importieren. Benennen Sie es in "MySound.mp3" um..
Öffnen Sie die Eigenschaften und klicken Sie auf Erweitert. In dem Fenster wird zusätzlicher Inhalt angezeigt. Wählen Sie "Exportieren für ActionScript" aus und nennen Sie die Klasse "MySound"..
Um den Soundeffekt hinzuzufügen, instantiieren Sie den zuvor importierten Sound in die Bibliothek und spielen Sie ihn ab. Diesen Code in die mouseOver () Funktion.
var mySound: MySound = new MySound (); mySound.play ();
Wir sind fertig mit unserer Speisekarte! Hier ist der vollständige Code des MenuItem.as:
package 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 erweitert Sprite private var rect1: DynamicMovie = new DynamicMovie (); // Verwenden Sie die DynamicMovie-Klasse anstelle der Sprite-Klasse. private var rect2: DynamicMovie = new DynamicMovie (); // Hiermit können wir den Registrierungspunkt ändern. private var rect3: DynamicMovie = new DynamicMovie (); // So können wir die Rechtecke um ihre Zentren drehen. private var menuButton: DynamicMovie = new DynamicMovie (); private var X: Anzahl; private var Y: Anzahl; private var Farbe: uint; private var txt: Text_mc = new Text_mc (); private var myURL: Zeichenfolge; public function MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Liefert die Positions- und Farbparameter. X = posX; Y = posY; Farbe = Farbe; myURL = URL; // Rufen Sie die Funktion addRect auf, um 3 Rechtecke mit den angegebenen Parametern hinzuzufügen. 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); // Weisen Sie dem TextField einen Titel zu und platzieren Sie ihn. txt.txtLabel.text = Titel; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Verwenden Sie die Funktion addRect, um ein transparentes Rechteck über dem Menüelement zu zeichnen. addRect (Menüschaltfläche, X-10, Y-5,380,80, Farbe, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick); private Funktion addRect (rect: DynamicMovie, X: Number, Y: Number, Breite: Number, Höhe: Number, Farbe: uint, alpha: Number, Rotation: Number) rect.setRegistration (X + (Breite / 2), Y + (Höhe / 2)); rect.graphics.beginFill (Farbe, Alpha); rect.graphics.drawRect (X, Y, Breite, Höhe); addChild (rect); rect.rotation2 = Drehung; private Funktion mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); var mySound: MySound = new MySound (); mySound.play (); // Die Rechtecke drehen. neues TweenLite (rect1, .3, rotation2: -4); neues TweenLite (rect2, .3, rotation2: 0); neues TweenLite (rect3, .3, rotation2: 5); // Tween den Text. timeline.append (new TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (new TweenLite (txt, .3, x: X + 70, alpha: 1)); // Einen Glow-Filter zum Text hinzufügen .; neues TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, stärke: 1, quality: 3); // Blasen hinterlassen. Blasen (70,1); // Rechte Luftblasen (270, -1); private Funktion mouseOut (e: MouseEvent) var Zeitleiste: TimelineLite = new TimelineLite (); // Die Rechtecke in ihre Ausgangsposition drehen. neues TweenLite (rect1, .3, rotation2: 3); neues TweenLite (rect2, .3, rotation2: 0); neues TweenLite (rect3, .3, rotation2: -2); // rückwärts die Textanimation. timeline.append (new TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (new TweenLite (txt, .3, x: X + 70)); neues TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, Stärke: 0, Qualität: 3); private Funktion mouseClick (e: MouseEvent) // Die angeforderte URL öffnen. navigateToURL (neue URLRequest (myURL)); private Funktionsblasen (Position: Nummer, Richtung: Nummer) // 50 Blasen erstellen, Sie können die Anzahl ändern, um mehr oder weniger Blasen zu erhalten. 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);
Und hier ist das Endergebnis:
Jetzt können Sie Ihr eigenes Menü erstellen und anpassen, indem Sie weitere Menüelemente hinzufügen, die Farben ändern, den Text ändern…
Das Menü wurde in einer separaten ActionScript-Klasse codiert, sodass Sie es problemlos in anderen Projekten verwenden können.
Ich möchte mich bei Ihnen für das Lesen bedanken. Ich hoffe, dass es Ihnen gefallen hat!
Accentsconagua