Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Mittwoch, 18. Mai 2005, 22:31

Buttons mit komplexen Effekten in Flash MX

Buttons mit komplexen Effekten in Flash MX


Schritt 1 - Vorbereitung

Zur Vorbereitung erstellt man einen neuen Movieclip (im weiteren kurz MC). Hierzu benutzt man die Tastenkombination STRG + F8.

Hierbei ist zu beachten, dass "Movieclip" angewählt ist, und nicht "Schaltfläche" oder "Grafik".

Anschließend öffnen wir die Bibliothek (STRG + L) und ziehen den eben erstellten, und noch leeren MC auf die Bühne.


Schritt 2 - Ebenen im MC

Zunächst wird das MC-Symbol (leerer Kreis) angeklickt. Im Eigenschaftsfenster geben wir dem MC einen Instanznahmen. Dieser sollte möglichst kurz sein, damit man ihn sich gut merken kann, denn er ist für den weiteren Verlauf von großer Bedeutung.

Für dieses Tutorial habe ich mich für "button_1" entschieden:



Durch einen Doppelklick auf den MC öffnen wir diesen. Dort benennen wir die erste Ebene in "Script" um, und erstellen anschließend soviele zusätzliche Ebenen, wie wir benötigen (1).




Schritt 3 - Die ActionScript-Ebene

Nun geht es an die erste Ebene. Dort fügen wir nun zunächst so viele Bilder ein, wie die Animation des Buttons insgesamt lang sein soll, also Eingangs- und Ausgangsanimation:
Wie man unschwer erkennt, hat die Animation im Beispiel 32 Bilder.



Nun fügen wir zwei Schlüsselbilder in dieser Ebene ein. Ein Schlüsselbild an der Mitte der Animation (was nicht unbedingt auch der Mitte der Bildanzahl entsprechen muss) und ein Schlüsselbild am Ende der Animation.

Wichtig dabei ist, dass man sich die Bildnummer der beiden Schlüsselbilder merkt. Im unseren Fall sind dies die Bilder 16 und 32:



In die drei Schlüsselbilder (1, 16, 32) kommt nun folgendes ActionScript (im Folgenden kurz AS):

Bild 1

Quellcode

1
stop();
Damit die Animation nicht direkt von alleine startet.

Bild 16

Quellcode

1
stop();
Damit die Animation auf der Höhe der Animation stehen bleibt, bis der Mauszeiger den Button verlässt.

Bild 32

Quellcode

1
_root.button_1.gotoAndStop(1);
Dieser Code bewirkt, dass der Abspielkopf wieder auf die ursprüngliche Position springt, damit die Animation auch beim nächsten Anlauf tadellos funktioniert.

Dieser Code wirkt nicht viel komplexer als die vorherigen, dennoch versteckt sich dahinter eine sehr, sehr mächtige Möglichkeit von Flash, und zwar die Steuerung von MCs. Da dies ein sehr komplexes Thema ist und erzeugt bei Einsteigern oft und gerne jede Menge Verwirrung erzeugt, gehe ich hierauf an dieser Stelle etwas genauer ein:

Flash bietet die Möglichkeit, die Aktionen der einzelnen MCs auf sehr komplexe Art und Weise zu steuern. D.h. man kann von jedem MC aus Aktionen in einem beliebigen anderen MC steuern, egal ob der "Ziel-MC" in andere verschachtelt ist, oder sogar in dynamisch geladenen plaziert ist.

Wichtig ist, dass bei den entsprechenden Aktionen genau angegeben wird, wo sich der entsprechende Film befindet. Dabei ist nur wichtig, wo der Ziel-MC liegt, bei dem Aktionen ausgeführt werden sollen (Starten, Stoppen usw.). Wo der MC liegt, von dem aus die Aktion gesteuert wird, ist dabei (fast) völlig egal.

Die Betrachtungsweise ist immer die gleiche: Man beginnt bei der grundlegendsten aller Zeitleisten, und zwar die des "Hauptfilmes". Das ist die Flash-Datei, welche in die HTML-Datei eingebunden ist. Diese wird als "_root" (vgl. engl. Wurzel) bezeichnet.

Daraufhin folgen alle Instanznamen der MCs, in welcher der Ziel-MC verschachtelt ist. Der letzte Instanzname entspricht dem MC, der gesteuert werden soll.

Im vorliegenden Fall liegt der MC direkt auf der Hauptbühne:

Quellcode

1
_root.button_1.DER_BEFEHL();

Würde man nun einen MC machen, in welchen alle Buttons platziert werden, muss dieser entsprechend mit aufgeführt werden. D.h. plaziert man einen MC mit dem Namen "navigation" auf der Hauptbühne und darin die Buttons, so lautet der korrekte Pfad dorthin:

Quellcode

1
_root.navigation.button_1.DER_BEFEHL();

Ich denke, das Prinzip wird klar... Wenn nicht, fragen... ;)


Schritt 4 - Die Inhalts-Ebenen

Nun füllt man die anderen Ebenen mit dem Inhalt, wie er gewünscht ist. Für die meisten Effekte sind Tweens (Überblendungen) völlig ausreichend:




Schritt 5 - Die Steuerung

Nun verlassen wir die Bearbeitung des MCs (Auf "Szene 1" im Hauptfenster oben links klicken). Nun stellen wir sicher, dass der MC ausgewählt ist und drücken F9 um die ActionScript-Eingabe zu öffnen, falls dies nicht schon der Fall ist.

Ein Wort noch zur Steuerung: Im vorliegenden Fall legen wir die Aktionen zur Steurerung des MCs direkt auf den selbigen. Bei Buttons macht dies natürlich Sinn. An dieser Stelle soll aber erwähnt werden, dass es auch möglich ist, den Code auf andere Objekte zu legen...

Hier der Code zunächst in Gänze:

Quellcode

1
2
3
4
5
6
7
8
9
on (rollOver) {
	_root.button_1.gotoAndPlay(2);
}
on (rollOut) {
	_root.button_1.gotoAndPlay(17);
}
on (release) {
	//Codeanweisung bei Mausklick
}


Der erste Block sorgt dafür, dass die Animation bei Mauskontakt (on[rollOver]) die Animation ab Bild 2 abspielt. Dies macht Sinn, da ja im ersten Bild eine stop-Anweisung das Abspielen verhindert.

Der zweite Teil wird aktiv, wenn der Mauszeiger die Buttonfläche wieder verlässt. Dann wird die Ausgangsanimation abgespielt. Diese beginnt logischerweise ein Bild nach unserer mittlereren stop-Anweisung aus Bild 16 (siehe Schritt 3), also bei Bild 17.

Der dritte, noch leere Codeblock kann allerlei Anweisungen enthalten, wenn der Button angeklickt wird.


Schritt 6 - Das Fazit

Das war es eigentlich schon. Hier nun ein simples Beispiel, wie das Ganze aussehen kann:

[swf=wsb-files.de]flash/button_malligan/button.swf,449,230[/swf]

Wer möchte, kann sich die Flash MX-Datei herunterladen: button.fla

Sollten noch Fragen unbeantwortet geblieben oder neue aufgetaucht sein, immer her damit... ;)

In diesem Sinne

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)