Button mit Rollover Effekt + gotoAndStop-Funktion | AS 3.0

[Danjo]

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 (23.67KiB)42457 mal betrachtet

Danach wählen wir das Textwerkzeug aus und geben dem Button einen Namen.

Bild 4.png (10.01KiB)42453 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 (29.18KiB)42454 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 (29.53KiB)42449 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 (15.23KiB)42441 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 (60.27KiB)42436 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.

Die Aktive Fläche des Buttons. Dort kann er angeklickt werden.

Bild 9.png (26.7KiB)42428 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 [816Bytes |41699 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 (1.33KiB)42389 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 (3.66KiB)42388 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 (5.75KiB)42380 mal betrachtet

Jetzt können wir unseren Film testen!

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

Dateidownload:

button mouseover.fla

benötigte Flash Version: CS3

(50KiB)3113-mal heruntergeladen