WIR EMPFEHLEN DEN DOWNLOAD DES PDF (BILDER)

Flash-Praxis

Einführung in Flash MX Actionscript

Unser Workshop zeigt, wie Sie in Flash MX mit der Programmiersprache Actionscript arbeiten.

Martin Vollenweider Actionscript ist eine objektorientierte Programmiersprache, welche in Flash integriert ist. Sie ist ähnlich aufgebaut wie Javascript und hilft, Interaktivität in eine Flashanimation einzubauen. Für das Verständnis von Actionscript sind die drei Begriffe Objekte, Eigenschaften und Methoden wichtig:

A Objekte lassen sich mit beliebigen Gegenständen vergleichen. In Flash gibt es vordefinierte («Core») und eigene («Film») Objekte. Durch Ziehen eines Symbols von der Bibliothek auf den Bildschirm entsteht eine Instanz des Symbols oder ein Objekt. Mit Actionscript lassen sich die Movieclip- und Schaltflächen-Objekte beeinflussen. Instanzen von Grafiksymbolen können nicht mit Actionscript gesteuert werden. Im Actionscripteditor sind alle Objekte unter der Kategorie «Objekte» aufgeführt.

B Jedes Objekt (also z. B. die Instanz eines Movieclips) hat Eigenschaften, welche mit Actionscript gelesen oder gesetzt werden können. Die wichtigsten Eigenschaften sind in der Kategorie «Eigenschaften» aufgelistet und beginnen mit einem Unterstreichstrich. Objektname und Eigenschaft werden durch einen Punkt getrennt (z.B. «logo._width»).

C Methoden sind Befehle, welche ein Objekt (also z. B. eine Instanz) ausführen kann. Objektname und Methode werden auch durch einen Punkt getrennt. Die Methoden eines Movieclips sind im Actionscripteditor unter «Objekte>Film>Movieclip>Methoden» aufgeführt.

Aktionen können innerhalb Flash MX auf drei Arten ausgeführt werden:

D Schlüsselbild-Aktion: Ein Schlüsselbild muss markiert sein. Die Aktionen werden ausgelöst, wenn sich der Lesekopf in diesem Schlüsselbild befindet. Im Screenshot ist das Schlüsselbild in Bild 15 der Ebene «Aktionen» markiert.

E Schaltflächen-Aktion: Eine Instanz einer Schaltfläche muss markiert sein. Die Aktionen werden ausgelöst, wenn der Anwender ein Ereignis verursacht (z. B. durch einen Klick auf die Instanz der Schaltfläche). Im Screenshot ist die Instanz «Home_btn» des Schaltflächen-Symbols «Home» markiert.

F Movieclip-Aktion: Eine Instanz eines Movieclips muss markiert sein. Die Aktionen werden ausgelöst, wenn z. B. die Instanz des Movieclips geladen wird. Im Screenshot ist die Instanz «Logo_mc» des Movieclip-Symbols «Logo» markiert.

1 Erstellen einer Schlüsselbild-Aktion. Aufgabe: Am Schluss einer bestehenden Flashanimation soll auf die URL «http://www.meineFirma.start.htm» gesprungen werden.

Zuerst muss über das Menü «Einfügen>Ebene» eine neue Ebene eingefügt werden. Ein Doppelklick auf den Namen der Ebene erlaubt, diese umzubenennen (z.B. in «Aktionen»).

Jetzt muss das letzte Bild der neuen Ebene markiert und über das Menü «Einfügen>Schlüsselbild» ein Schlüsselbild gesetzt werden.

Im nächsten Schritt wird der Actionscripteditor über das Menü «Fenster>Aktionen» aufgerufen.

Anschliessend muss in den Optionen (oben rechts im Fenster) das Menü »Normalmodus« aktiviert werden.

Der gesuchte Befehl befindet sich in der Kategorie «Browser/Netzwerk» und heisst «getURL».

1a Ziehen Sie den Eintrag «getURL» in das rechte Fenster. Geben Sie bei URL den gewünschten Link an. Das Menü «Steuerung>Film testen» erlaubt, die Animation zu testen. Im entsprechenden Schlüsselbild (im Screenshot bei Bild 15) wird Flash verlassen und auf die angegebene URL gesprungen. Die Option «Fenster» wird nur benötigt, wenn mit Frames gearbeitet wird. «Variablen» wird verwendet, wenn Feldinhalte oder Variablen an eine andere Datei übergeben werden sollen.

2 Erstellen einer Schaltflächen-Aktion. Aufgabe: Beim Klicken auf eine Schaltfläche «Gross» soll eine Symbolinstanz (z.B. ein Logo) vergrössert, beim Klick auf «Normal» wieder in die ursprüngliche Grösse gebracht werden.

2a Zeichnen Sie ein Logo, markieren Sie dieses und legen Sie es über das Menü «Einfügen>In Symbol konvertieren» als Symbol mit dem Namen «Logo» und dem Verhalten «Movieclip» in der Bibliothek ab.

2b Rufen Sie das Menü «Fenster>Eigenschaften» auf und vergeben Sie der Symbolinstanz links im Fenster den Namen «Logo_mc». Macromedia empfiehlt, Movieclipinstanzen den Suffix «_mc», Schaltflächeninstanzen «_btn» zu geben.

2c Erstellen Sie eine neue Ebene und schreiben Sie mit dem Textwerkzeug den Text «Gross». Stellen Sie sicher, dass der Text als «Statischer Text» formatiert ist. Markieren Sie mit dem Pfeilwerkzeug den Text und legen Sie ihn über das Menü «Einfügen>In Symbol konvertieren» als Symbol mit dem Namen «Gross» und dem Verhalten «Schaltfläche» in der Bibliothek ab. Wiederholen Sie das Gleiche mit dem Text «Normal».

2d Markieren Sie die Symbolinstanz «Gross» und rufen Sie den Actionscripteditor auf. Ziehen Sie den Befehl «_xscale» der Kategorie «Eigenschaften» in das rechte Fenster. Markieren Sie im rechten Fenster die erste Zeile. Bei «Ereignis« kann angegeben werden, wann die Aktion ausgeführt wird.

2e Markieren Sie die zweite Zeile und platzieren Sie bei «Ausdruck» den Cursor ganz links (d.h. vor «_xscale»). Klicken Sie auf die Fadenkreuz-Ikone «Zielpfad einfügen». Jetzt wird das entsprechende Menü aufgerufen. Markieren Sie im unteren Teil «Darstellung: Punkte» und «Modus: Absolut», im oberen Teil «Logo_mc». Mit «ok»bestätigen.

2f Leider ist der Eintrag bei «Ausdruck» noch unvollständig. Objektname und Eigenschaft müssen durch einen Punkt getrennt werden, welcher von Flash nicht automatisch gesetzt wird. Ändern Sie den Ausdruck von «_root.Logo_mc_xscale» zu «_root.Logo_mc._xscale». Der Eintrag «_root» gibt an, dass sich die Instanz «Logo_mc» auf der Hauptzeitachse befindet. Ergänzen Sie den Ausdruck durch den Zusatz «=200». Das gibt an, dass die Instanz in der horizontalen X-Achse auf 200 Prozent vergrössert wird.

2g Ziehen Sie vom linken Fenster den Befehl «_yscale» unterhalb den Text «_root...» des rechten Fensters und ergänzen Sie ihn analog Schritt 2f.

2h Wenn Sie die Animation mit dem Menü «Steuerung>Film testen» abspielen, stellen Sie fest, dass Sie genau auf den Umriss der Buchstaben des Texts «Gross» klicken müssen. Um diesen Effekt zu beheben, rufen Sie das Menü «Fenster>Bibliothek» auf, markieren den Symboleintrag «Gross» und machen einen Doppelklick auf die Vorschau. Markieren Sie in der Zeitleiste den Eintrag «Aktiv» und setzen Sie über das Menü «Einfügen>Schlüsselbild» ein Schlüsselbild.

2i Zeichnen Sie anschliessend ein beliebig gefärbtes Rechteck über den Text. Dies gibt die aktive Fläche an. Wenn sich die Maus über diesem Bereich befindet, ist der Link aktiv.

2j Wenn Sie bei «Darüber» ein Schlüsselbild setzen, können Sie die Farbe des Texts ändern, wenn sich die Maus über der aktiven Fläche befindet.

2k Durch Klick auf «Szene 1» kehren Sie wieder auf die Bühne zurück.

2l Wiederholen Sie die Schritte ab 2d für den Text «Normal». In diesem Falle setzen wir die Grösse wieder auf 100% zurück.

3 Erstellen einer Movieclip-Aktion. Aufgabe: Beim Laden einer Instanz (z.B. eines Logos) soll diese verdoppelt und an der richtigen Stelle platziert werden.

3a Analog den Schritten 2a und 2b.

3b Erstellen Sie eine neue Movieclip-Instanz mit dem Namen «Dummy_mc».

3c Markieren Sie diese Instanz und rufen Sie den Actionscripteditor auf. Ziehen Sie aus der Kategorie «Objekte>Film>Movieclip>Methoden» den Befehl «duplicateMovieClip» in das rechte Fenster. Die erste Zeile «onClipEvent (load)» sagt aus, dass die folgenden Befehle beim erstmaligen Laden der Instanz ausgeführt werden. Greifen Sie analog Schritt 2e in der Zeile «Objekt» mit der Ikone «Zielpfad einfügen» auf die Instanz «Logo_mc» zu. Beim Eintrag «Parameter» vergeben Sie dem Duplikat einen neuen Namen, nämlich « "Logo2_mc"». Der Name muss in Gänsefüsschen gesetzt werden.

3d Ziehen Sie den Befehl «_x» der Kategorie «Eigenschaften» in das rechte Fenster. Ergänzen Sie den «Ausdruck» von « _x» zu «_root.Logo2_mc._x=300«. Der Befehl sagt aus, dass die Instanz «Logo2_mc» auf der Hauptzeitachse «_root» liegt und eine X-Position von 200 Pixeln hat. Mit dem Befehl «_root.Logo2_mc._y=200» würden Sie die Instanz in der Vertikalen bei 200 Pixeln platzieren.

Über den Autor

Martin Vollenweider, dipl. El. Ing. ETH, ist Mitinhaber des auf Webdesign, Multimedia und Digital Video spezialisierten Ausbildungszentrums Timerate AG in Zürich. Er ist Flash- und Actionscript-Trainer der ersten Stunde. Daneben ist Martin Vollenweider Prüfungsexperte Web beim SIZ (Schweizerisches Informatik-Zertifikat) und hält jährlich Fachreferate an der Zürcher Internet Expo.