1.3 Ihre ersten programmierten Anwendungen 

Siehe Kapitel 16

Dieses Kapitel präsentiert Ihnen mehrere kleine Beispiele zum Nachbauen. Den Anfang macht das klassische »Hallo Welt!« in zwei Varianten. Das nächste Beispiel beschäftigt sich mit Bewegung und zeigt, wie einfach sich Objekte mit Hilfe der Programmiersprache ActionScript animieren lassen. Den Abschluss bildet ein erstes objektorientiertes Beispiel auf der Basis von ActionScript 1.

1.3.1 Hallo Welt! 

Es gibt wohl kein Beispiel, das mehr strapaziert wurde als die Ausgabe des Textes »Hallo Welt!«. Aber beinahe jedes Buch zu einer Programmiersprache fängt damit an, also auch dieses.

In Flash gibt es mehrere Möglichkeiten, einen Text auszugeben. Sollte die Ausgabe nur zu Testzwecken während der Entwicklung notwendig sein, dann verwenden Sie das Ausgabefenster.

Außerhalb der Entwicklungsumgebung steht das Ausgabefenster nicht zur Verfügung. Möchten Sie trotzdem Nachrichten ausgeben, dann benötigen Sie einen Textblock zur Anzeige. Die passende Schritt-für-Schritt-Anleitung finden Sie direkt im Anschluss an das erste Praxisbeispiel mit dem Ausgabefenster.

Ausgabe im Ausgabefenster

Beispiele\01_Grundlagen\Ausgabefenster\trace.fla und trace.swf

Hier klicken, um das Bild zu Vergrößern

Markieren Sie in einer neuen Anwendung das einzige und somit auch erste Bild in der Zeitleiste. Bei diesem Bild handelt es sich um ein so genanntes Schlüsselbild (engl. Keyframe).

Hier klicken, um das Bild zu Vergrößern

Öffnen Sie den ActionScript-Editor (Fenster • Entwicklungs-Bedienfelder • Aktionen seit Flash MX 2004, Fenster • Aktionen vor Flash MX 2004 oder (F9)), und stellen Sie sicher, dass das Schlüsselbild noch markiert ist. In diesem Fall steht der Text »Aktionen für Bild 1 des Ebenennamens Ebene 1« oder ähnlich in der Titelleiste des ActionScript-Editors.

Expertenmodus

Hier klicken, um das Bild zu Vergrößern

Sollten Sie mit einer noch älteren Flash-Version als Flash MX 2004 arbeiten, dann dürfen Sie in einem so genannten Normalmodus arbeiten. Doch früher oder später werden Sie ohnehin den Expertenmodus bei der Programmierung bevorzugen, da dieser die direkte Eingabe von Programmcode erlaubt. Deshalb aktivieren Sie den Expertenmodus am besten gleich zu Beginn. Wählen Sie dafür im ActionScript-Editor die Ansichtsoptionen (das ist die Schaltfläche mit dem Pfeil nach oben) und dann Expertenmodus oder die Tastenkombination (Strg)+(Ş)+(E), um die direkte Eingabe von Skripten zu ermöglichen. Seit Flash MX 2004 gibt es diesen Modus übrigens ohnehin nicht mehr.

Hier klicken, um das Bild zu Vergrößern

Zur Ausgabe einer Nachricht im Ausgabefenster benötigen Sie nur die trace-Anweisung. Diese geben Sie direkt im ActionScript-Editor mit den notwendigen Parametern ein:

trace("Hallo Welt!");

Das erste Schlüsselbild in der Zeitleiste wird dann mit einem kleinen a versehen. Dieses a zeigt an, dass in diesem Schlüsselbild ein Skript platziert ist.

Hier klicken, um das Bild zu Vergrößern

Um Ihr erstes Programm zu betrachten, testen Sie die komplette Anwendung über das Menü Steuerung • Film testen. Flash spielt die Anwendung dann weitestgehend so ab wie im Webbrowser. Ein Unterschied ist das Ausgabefenster (Fenster • Ausgabe), das nur innerhalb der Entwicklungsumgebung zur Verfügung steht. Zurück in den Bearbeitungsmodus gelangen Sie übrigens, indem Sie das Fenster des Testmodus wieder schließen (z.B. über Datei • Schliessen).

Ausgabe von Zwischenergebnissen

Der Befehl trace ist eine der wichtigsten Anweisungen in ActionScript. Diese Anweisung ermöglicht es, während der Entwicklung die Ausführung von Skripten zu überprüfen. Weitere Informationen zu diesem Thema finden Sie im Kapitel 18, »Codedesign und Konzeption«.

Ausgabe in einem Textblock

Beispiele\01_Grundlagen\Ausgabefenster\textblock.fla, textblock.swf, textbloch.html

Hier klicken, um das Bild zu Vergrößern

Wählen Sie das Textwerkzeug, und stellen Sie anschließend im Eigenschafteninspektor (Fenster • Eigenschaften oder (Strg)+(F3)) den Texttyp auf Dynamischer Text. ActionScript ist in der Lage, den Inhalt dynamischer Textblöcke zu verändern. Mit statischem Text geht das nicht.

Hier klicken, um das Bild zu Vergrößern

Platzieren Sie nun mit gedrückter Maustaste einen dynamischen Textblock auf der Bühne. Damit in diesem später eine Nachricht erscheint, verbinden Sie diesen Textblock im Eigenschafteninspektor mit der Variablen (Var) meineNachricht. Diese Variable ist ein Wertebehälter, den Sie mit Hilfe von ActionScript leicht beeinflussen.

Hier klicken, um das Bild zu Vergrößern

Markieren Sie in Ihrer Anwendung das einzige und somit auch erste Bild in der Zeitleiste. Bei diesem Bild handelt es sich um ein so genanntes Schlüsselbild. Dies erkennen Sie in der Zeitliste an dem kleinen Kreis innerhalb der Zelle.

Öffnen Sie den ActionScript-Editor (Fenster • Entwicklungs-Bedienfelder • Aktionen seit Flash MX 2004, Fenster • Aktionen vor Flash MX 2004 oder (F9)), und stellen Sie sicher, dass das Schlüsselbild noch markiert ist. In diesem Fall steht der Text »Aktionen für Bild 1 des Ebenennamens Ebene 1« oder ähnlich in der Titelleiste des ActionScript-Editors.

Hier klicken, um das Bild zu Vergrößern

Zur Ausgabe einer Nachricht in einem Textblock benötigen Sie nur die mit dem Textblock verknüpfte Variable und den Zuweisungsoperator =. Die folgende Anweisung schreibt in die Variable den gewünschten Wert, der wiederum von dem Textblock angezeigt wird:

meineNachricht="Hallo Welt!";

Jetzt versieht Flash das erste Schlüsselbild in der Zeitleiste mit einem kleinen a. Dieses a zeigt an, dass in diesem Schlüsselbild ein Skript platziert ist.

Hier klicken, um das Bild zu Vergrößern

Um die Anwendung in einem Webbrowser zu betrachten, wählen Sie das Menü Datei • Vorschau für Veröffentlichungen • Standard • (HTML) oder die Tastenkombination (Strg)+(F12). Flash veröffentlicht Ihre Anwendung und zeigt sie im Webbrowser.

Andere Webbrowser

Um den Webbrowser für die Vorschau festzulegen, platzieren Sie eine Verknüpfung (bzw. einen Alias) zu dem gewünschten Anzeigeprogramm im Verzeichnis Browser des Konfigurationsordners. Diesen Ordner finden Sie z.B. bei Windows 2000 und XP für Flash MX unter C:\Dokumente und Einstellungen\Benutzer\Anwendungsdaten\Macromedia\Flash MX\Configuration\, bei Windows 98 und ME unter C:\Windows\Anwendungsdaten\Macromedia\Flash MX\Configuration\, bei Windows NT unter C:\Windows\Profile\Benutzer\Anwendungsdaten\Macromedia\Flash MX\Configuration\, bei Mac OS X unter Festplatte/Users/Library/Application Support/Macromedia/FlashMX/Configuration/, bei Mac OS 9.x unter Festplatte/Systemordner/Application Support/Macromedia Flash MX/Configuration/ und bei Mac OS 9.x mit mehreren Benutzern unter Festplatte/Users/[Benutzer]/Documents/Macromedia/FlashMX/Configuration/. Sollte der Ordner sich noch nicht in dem Verzeichnis befinden, dann legen Sie ihn einfach selber an.

Seit Flash MX 2004 befindet sich dieser Ordner normalerweise für Windows unter c:\Dokumente und Einstellungen\[Benutzer]\Lokale Einstellungen\Anwendungsdaten\Macromedia\Flash MX 2004\de\Configuration und für Mac OS X unter HD/Users/[Benutzer]/Library/Application Support/Macromedia/Flash MX 2004/[Sprache]/Configuration/.

1.3.2 Bewegung 

Eine der herausragenden Fähigkeiten von Flash ist Bewegung. Mithilfe der Zeitleiste und den verschiedenen Tweenings ist die Erstellung von Animationen selbst für Einsteiger kein Problem.

Tweening

Die Animationsfunktion ist eine Stärke des SWF-Formats. Am simpelsten lassen sich Inhalte in Bewegung bringen, indem jeder Schritt eines Films in einzelnen Bildern abgelegt wird – wie in einem Daumenkino. Doch Flash kann die Arbeit durch »Tweening« drastisch erleichtern. Tweening ist eine Kurzform für »In-Betweening« und bedeutet, dass die Software die Zwischenschritte einer Animation zwischen zwei vorgegebenen Punkten automatisch errechnet. Das SWF-Format unterstützt zwei Tweening-Varianten:

Beim Form-Tweening wird ein Vektorobjekt per »Morphing« in eine andere Form überführt.

Beim Bewegungs-Tweening behält das Objekt seine Form grundsätzlich bei; hier ändern sich nur Drehung, Skalierung, Farbe und Position.

Das Bewegungs-Tweening funktioniert auch bei komplexen Objekten und Pixelbildern, während das Form-Tweening hier schnell an Grenzen stößt. Beide Tweening-Varianten wirken sich schonend auf die Dateigröße aus, da die Flash Player-Dateien nicht die gesamten Grafikinformationen für jedes Einzelbild enthalten müssen, sondern nur die wesentlichen Veränderungen zwischen den Frames.

Tweenings decken jedoch nicht alle möglichen Bewegungsformen ab und sind darüber hinaus alles andere als interaktiv: Folgt z.B. ein Objekt dem Mauszeiger oder steuert der Anwender ein Auto in einem Rennspiel, dann reicht ein einfaches Tweening nicht mehr aus. In diesen Fällen kommt ActionScript zum Einsatz. Programmierte Bewegungen sind nicht nur vielseitiger, sondern beanspruchen außerdem in der Regel weniger Speicherplatz, da Flash nicht die Veränderungen für jeden Einzelschritt, sondern nur eine die Bewegung beschreibende kleine mathematische Formel speichern muss.

In den folgenden zwei Beispielen erzeugen Sie Anwendungen, welche Objekte bewegen. Das zweite Beispiel verwendet dafür bereits anspruchsvollere objektorientierte Techniken, die im Teil III, Objektorientierung, genauer erklärt und im Kapitel 16, ActionScript 2, noch weiter vertieft werden.

Bewegung

Beispiele\01_Grundlagen\Bewegung

Hier klicken, um das Bild zu Vergrößern

Erstellen Sie einen beliebigen Movieclip, und platzieren Sie diesen auf der Bühne. Dies erreichen Sie z.B. dadurch, dass Sie etwas auf der Bühne zeichnen, die Zeichnung auswählen und diese über Modifizieren • In Symbol konvertieren (bis Flash MX 2004 noch Einfügen • In Symbol konvertieren) in einen Movieclip verwandeln. Sie erhalten dann automatisch ein Symbol in der Bibliothek (Fenster • Biblitohek) und eine Instanz auf der Bühne.

Symbole und Movieclips

Um möglichst kleine Dateien zu produzieren, unterstützt das SWF-Format »Symbole« – Objekte, die nur einmal definiert werden müssen und dann beliebig oft als so genannte Instanzen verwendet werden können. Die Definition liegt nur ein einziges Mal in der Datei, für jedes weitere Vorkommen des Symbols (daher kommt der engl. Begriff Instance für Vorkommen, der im Deutschen fälschlicherweise zu Instanz wurde) merkt Flash sich nur noch die Eigenschaften der Instanzen. Auch Klänge und Pixelbilder werden nur einmal in der Datei gespeichert, selbst wenn sie mehrfach genutzt werden.

Bei den Movieclips (in der deutschen Version von Flash 5 noch als Filmsequenzen bezeichnet) handelt es sich um die wichtigste Kategorie der Symbole; Movieclips verhalten sich wie vollständige Flash-Anwendungen – sie funktionieren quasi als Film im Film.

Hier klicken, um das Bild zu Vergrößern

Markieren Sie die Movieclip-Instanz, und stellen Sie anschließend im Eigenschafteninspektor (Fenster • Eigenschaften oder (Strg)+(F3)) den Instanznamen z.B. auf »mcMonster«. ActionScript ist dann in der Lage, benannte Movieclip-Instanzen durch einfache Verwendung der Bezeichnung zu steuern.

Hier klicken, um das Bild zu Vergrößern

Markieren Sie in Ihrem Projekt das erste Schlüsselbild in der Zeitleiste.

Öffnen Sie den ActionScript-Editor mit (F9), und stellen Sie sicher, dass das erste Schlüsselbild der Zeitleiste und nicht die Movieclip-Instanz markiert ist. Es sollte ein Text wie »Aktionen für Bild 1 des Ebenennamens Ebene 1« in der Titelleiste des ActionScript-Editors erscheinen.

Hier klicken, um das Bild zu Vergrößern

Um einen Movieclip zu bewegen, benötigen Sie die Eigenschaft für die Position (vertikal ist das _y), den Zuweisungsoperator = und eine kleine Formel für die Bewegung. Diese Zutaten kombinieren Sie im ActionScript-Editor mit dem Ereignis, dass der Abspielkopf ein Bild betritt (engl. enter frame):

mcMonster.onEnterFrame = function() {
   this._y = Math.sin(getTimer()*0.002)*100+200;
};

Das erste Schlüsselbild in der Zeitleiste wird dann mit einem kleinen a versehen. Dieses a zeigt an, dass in diesem Schlüsselbild ein Skript platziert ist.

Um Ihr fertiges Programm zu betrachten, testen Sie die komplette Anwendung über das Menü Steuerung • Film testen. Flash spielt den Film dann weitestgehend so ab wie im Webbrowser. Zurück in den Bearbeitungsmodus gelangen Sie, indem Sie das Testmodusfenster wieder schließen (z.B. über Datei • Schliessen).

Die gerade verwendete Lösung hat jedoch einen Nachteil: Sobald sich mehrere Objekte bewegen sollen, muss die Formel jedes Mal erneut angegeben werden. Hier wäre es von Vorteil, wenn alle Movieclips von Haus aus diese Art der Bewegung beherrschen würden. Die Objektorientierung bietet dafür adäquate Mittel, die im folgenden Beispiel anhand eines Mausverfolgers angewendet werden. Eine ausführliche Erklärung der Objektorientierung folgt im Teil III des Buchs.

Folge der Maus (objektorientiert)

Bewegung\01_Grundlagen\Bewegung

Erstellen Sie einen beliebigen Movieclip, und platzieren Sie diesen auf der Bühne. Dies erreichen Sie z.B. dadurch, dass Sie etwas auf der Bühne zeichnen, die Zeichnung auswählen und diese über (F8) in einen Movieclip verwandeln. Sie erhalten dann automatisch ein Symbol in der Bibliothek mit (F11) und eine Instanz auf der Bühne.

Hier klicken, um das Bild zu Vergrößern

Markieren Sie die Movieclip-Instanz, und stellen Sie anschließend im Eigenschafteninspektor (Fenster • Eigenschaften oder (Strg)+(F3)) den Instanznamen z.B. auf »mcVerfolger«. ActionScript ist dann in derLage, benannte Movieclip-Instanzen durch einfache Verwendung der Bezeichnung zu steuern.

Markieren Sie in Ihrem Projekt das erste Schlüsselbild in der Zeitleiste, und öffnen Sie den ActionScript-Editor. Stellen Sie sicher, dass das erste Schlüsselbild der Zeitleiste und nicht die Movieclip-Instanz markiert ist. Es sollte der Text »Aktionen für Bild 1 des Ebenennamens Ebene 1« oder ähnlich in der Titelleiste des ActionScript-Editors erscheinen.

Hier klicken, um das Bild zu Vergrößern

Um einen Movieclip hinter der Maus »herfliegen« zu lassen, benötigen Sie die Eigenschaft für die Position des Movieclips (horizontal ist das _x), die Eigenschaft für die Position des Mauszeigers (horizontal ist das _xmouse), den Operator += und eine kleine Formel für die Verzögerung der Bewegung. Diese Zutaten fügen Sie zu dem Prototypen für alle Movieclips hinzu (bitte beachten Sie in diesem Fall das große C in MovieClip):

MovieClip.prototype.folgeMaus = function() {
   this._x += this._xmouse/16;
   this._y += this._ymouse/16;
};

Jetzt kann jeder Movieclip direkt auf dieses Rezept zugreifen, indem er es so aufruft, als ob es ihm gehören würde:

mcVerfolger.onEnterFrame = function() {
   this.folgeMaus();
};

Um Ihr fertiges Programm zu betrachten, testen Sie die komplette Anwendung über das Menü Steuerung • Film testen. Zurück in den Bearbeitungsmodus gelangen Sie, indem Sie das Fenster des Testmodus wieder schließen (z.B. über Datei • Schliessen).