Button mit Rollover Effekt + gotoAndStop-Funktion | AS 3.0

Die Grundlagen von Flash erklärt...
Antworten
Benutzeravatar
Danjo
Beiträge: 18
Registriert: Mi 9. Jan 2008, 19:52
Kontaktdaten:

Button mit Rollover Effekt + gotoAndStop-Funktion | AS 3.0

Beitrag von Danjo » Do 10. Jan 2008, 02:04

Dieses Tutorial soll den Aufbau eines simplen Buttons mit Rollover verdeutlichen.
Zunächst in Flash eine neue Datei erstellen und die Bühne entsprechend an die gewünschte Größe anpassen.
Danach die bereits vorhandene Ebene in der Zeitleiste benennen und das erste Bild in der Zeitleiste anklicken.

Wir zeichnen als erstes ein Rechteck mit Hilfe des Rechteckwerkzeugs.
Bild 3.png
Bild 3.png (23.67 KiB) 2847 mal betrachtet
Danach wählen wir das Textwerkzeug aus und geben dem Button einen Namen.
Bild 4.png
Bild 4.png (10.01 KiB) 2843 mal betrachtet
Über Ansicht > Lineale können wir die Lineale einblenden. Per Linke-Maus-Gedrückthalten können wir Hilfslinien in die Bühne ziehen und diese z.B. zum Ausrichten der Schrift und einem Quadrat verwenden.
Bild 5.png
Bild 5.png (29.18 KiB) 2844 mal betrachtet
Danach markieren wir alles und öffnen über Modifizieren > In Symbol konvertieren die Oberfläche um das Objekt nun in eine Schaltfläche umzuwandeln. Zunächst geben wir der Schaltfläche einen Namen. Der Name ist frei gewählt und dient uns hauptsächlich zur Orientierung in unserer Bibliothek, da es meist nicht bei der Erstellung eines einzigen Objekts bleibt ;) . Wir markieren dann noch den Punkt "Schaltfläche" und bestätigen mit "OK".
Bild 6.png
Bild 6.png (29.53 KiB) 2839 mal betrachtet
Jetzt ist das Objekt bzw. unser Button eine Schaltfläche. Per Doppelklick auf den Button können wir nun den Mouseover Effekt für den Button einstellen.
In das Bild "Darüber", "Gedrückt" und "Aktiv" wird jeweils ein Schlüsselbild eingefügt. Das Schlüsselbild bei "Darüber" kann jetzt nach belieben für den Mouseover Effekt geändert werden. Wir ändern hier die Farbe des Rechtecks und die des kleinen Quadrats nach belieben ab.
Bild 8.png
Bild 8.png (15.23 KiB) 2831 mal betrachtet
Das "Aktiv" Feld ist dafür da, um die aktive Fläche des Buttons zu definieren. In dem "Aktiv" Feld löschen wir das Textfeld und ziehen ein Rechteck über die ganze Schaltfläche. Dieser Bereich ist nun der aktive Bereich des Buttons. Wenn man das Rechteck größer als den Button aufzieht, vergrößert sich somit auch der aktive Bereich. Das ist z.B. bei kleinen Buttons sinnvoll, oder z.B. wenn man nur Schrift als Buttons verwenden möchte.
Bild 7.png
Bild 7.png (60.27 KiB) 2826 mal betrachtet


In das Bild "Darüber", "Gedrückt" und "Aktiv" wird jeweils ein Schlüsselbild eingefügt. Das Schlüsselbild bei "Darüber" kann jetzt nach belieben für den Mouseover Effekt geändert werden. Das "Aktiv" Feld ist dafür da, um die aktive Fläche des Buttons zu definieren. Wenn man hier das "Aktiv" Feld z.B. größer als den Button macht, kann man auch dort klicken.
Bild 9.png
Die Aktive Fläche des Buttons. Dort kann er angeklickt werden.
Bild 9.png (26.7 KiB) 2818 mal betrachtet
Das ist z.B. bei kleinen Buttons sinnvoll, oder z.B. wenn man nur eine Schrift hat, die man als Button benutzen möchte.

Fertig!

button mouseover.swf [ 816 Bytes | 2089 mal betrachtet ]

Jetzt wollen wir dem Button noch den gotoAndStop Befehl zuweisen, da dieser sehr häufig verwendet wird um innerhalb eines Flash-Films, beispielsweise bei einer Flash-Homepage zwischen den einzelnen Bildern/Frames hin und herzuspringen.

Über der Ebene "Button" erstellen wir als erstes eine weitere und nennen diese "AS", die wir für unsere ActionScript-Befehle verwenden werden.
button_1.png
button_1.png (1.33 KiB) 2779 mal betrachtet
Wir klicken nun das erste Bild der Ebene "AS" und öffnen über Fenster > Aktionen das ActionScript Eingabefeld.

In das Feld fügen wir folgendes Script ein:

Code: Alles auswählen

stop();

import flash.events.MouseEvent;

function mouseUpHandler(e:MouseEvent):void {
    gotoAndStop(10);
}
button.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
Außerdem müssen wir der Schaltfläche noch den Instanznamen "button" geben, da unser ActionScript Befehl ansonsten nicht unseren Button ansprechen kann.
button_2.png
button_2.png (3.66 KiB) 2778 mal betrachtet
Im Actionscript steht unter anderem "gotoAndStop(10);" das bedeutet beim Klicken des Buttons stoppt der Film bei Bild 10.
Um diesen Effekt sichtbar zu machen setzen wir in der Zeitleiste in der Ebene "Button" bei Bild 10 ein Schlüsselbild (Rechte-Maus-Klick > Schlüsselbild einfügen) und zeichnen ein Quadrat auf unsere Bühne.
button_3.png
button_3.png (5.75 KiB) 2770 mal betrachtet
Jetzt können wir unseren Film testen!

button gotoAndStop.swf [ 4.09 KiB | 2083 mal betrachtet ]





Dateidownload:
button mouseover.fla
benötigte Flash Version: CS3
(50 KiB) 293-mal heruntergeladen

Antworten