Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 20 Macromedia Flash
  gp 20.1 Arbeitsumgebung und Werkzeuge
    gp 20.1.1 Zeichnungen erstellen
    gp 20.1.2 Mit Text arbeiten
    gp 20.1.3 Die restlichen Werkzeuge
  gp 20.2 Animationstechniken
    gp 20.2.1 Elemente und Begriffe der Zeitleiste
    gp 20.2.2 Bewegungs-Tweening
    gp 20.2.3 Maskenebenen verwenden
    gp 20.2.4 Form-Tweening
    gp 20.2.5 Arbeiten mit Symbolen und Instanzen
    gp 20.2.6 Anwendungsbeispiel: Bauanleitung für ein Fahrrad
    gp 20.2.7 Arbeiten mit Farbeffekten
  gp 20.3 Medienintegration
    gp 20.3.1 Sound
    gp 20.3.2 Bitmaps importieren und verwenden
    gp 20.3.3 Digitalvideo
  gp 20.4 Filme exportieren und in Webseiten einbetten
    gp 20.4.1 Überblick über die Exportfunktionen
    gp 20.4.2 Der einfache Export einer SWF-Datei
    gp 20.4.3 SWF-Filme in HTML einbetten
    gp 20.4.4 Die Funktion »Veröffentlichen«
  gp 20.5 Interaktivität mit ActionScript
    gp 20.5.1 Erstes Beispiel: Ein Film, der am Ende anhält
    gp 20.5.2 Schaltflächen verwenden
    gp 20.5.3 Die Aktion Goto
    gp 20.5.4 Andere Filme laden: die loadMovie-Aktionen
    gp 20.5.5 Steuern von Movieclips
    gp 20.5.6 Eigenschaften von Movieclip-Instanzen
    gp 20.5.7 Verschiedene ActionScript-Lösungen
  gp 20.6 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

20.5 Interaktivität mit ActionScript  downtop

ActionScript ist seit Flash 4 der Name der in Flash eingebauten, einfachen Programmiersprache. Seit Flash 5 ist die Sprache ECMA-Script-kompatibel, basiert also auf derselben Syntaxgrundlage wie JavaScript. Natürlich sind aber die Objekte, mit denen gearbeitet wird, ganz andere als bei der JavaScript-Variante in Webbrowsern.


Abbildung 20.6   Die Aktionen-Palette

Abbildung
Hier klicken, um das Bild zu Vergrößern


Die Eingabe von ActionScript erfolgt über die Aktionen-Palette (siehe Abbildung 20.6); sie wird mit Fenster • Aktionen oder (F9) eingeblendet.

Dieses Fenster enthält links eine Sammlung aller möglichen Aktionen, Operatoren, Objekte und so weiter, die per Doppelklick in das aktuelle Skript übernommen werden können. Rechts ist das aktuell bearbeitete Skript zu sehen. Unten schließlich werden die Parameter der aktuellen Aktion eingestellt. Wenn Sie aufwändigere Aktionen erstellen und die Syntax allmählich sicher beherrschen, ist es empfehlenswert, über das Popup Ansichtsoptionen in den Expertenmodus umzuschalten, in dem Sie ActionScript-Befehle manuell eintippen können.


Galileo Computing

20.5.1 Erstes Beispiel: Ein Film, der am Ende anhält  downtop

Wie Sie bei der Verwendung der Funktion Film testen wahrscheinlich bereits bemerkt haben, werden Filme standardmäßig in einer Schleife ausgeführt. Das vorliegende erste ActionScript-Beispiel verändert dieses Verhalten, indem es den Film nach dem ersten Ablauf am Ende anhält.

1. Erstellen Sie eine beliebige Animation.
       
2. Markieren Sie das letzte Keyframe des Films (egal welcher Ebene) und öffnen Sie dann das Aktionenfenster.
       
3. Wählen Sie unter Aktionen • Filmsteuerung per Doppelklick die Aktion Stop aus – im rechten Bereich unten erscheint die syntaktisch korrekte Fassung
       
stop ();
    Rechts oben im Parameterbereich steht einfach Keine Parameter: Die Aktion stop() ist so einfach, dass sie keine Parameter benötigt; es bedeutet einfach Film im aktuellen Frame anhalten.
       

Das Keyframe selbst besitzt nun in der Zeitleiste außer seinem Keyframe-Punkt noch ein kleines »a«, das darauf hindeutet, dass dieses Frame Aktionen enthält. Um diese wieder zu bearbeiten, wird einfach das Frame angeklickt und die Aktionen-Palette wieder geöffnet.

Bildaktionen-Ebene

Um nicht durcheinander zu kommen, wenn die Aktionen auf beliebigen Ebenen verteilt sind, ist es besser, eine separate Ebene nur für Bildaktionen einzurichten (beispielsweise ganz oben in der Zeitleiste) und entsprechend zu benennen, etwa »Steuerung«, »Kontrolle« oder »Aktionen«.


Galileo Computing

20.5.2 Schaltflächen verwenden  downtop

Eine Schaltfläche (Button) wird verwendet, um Benutzeraktionen einzuleiten. Es handelt sich um ein spezielles Symbol vom Typ Schaltfläche. Innerhalb dieses Symbols existieren keine durchnummerierten Frames mehr in der Zeitleiste, sondern vier speziell benannte:

gp  Auf ist der Normal- oder Ruhezustand der Schaltfläche, wenn sie nicht mit dem Mauszeiger in Berührung kommt.
gp  Darüber ist der Zustand der Schaltfläche, während sie vom Mauszeiger berührt wird.
gp  Drücken bezeichnet den Zustand, in dem die Schaltfläche (beziehungsweise die Maustaste) heruntergedrückt wird.
gp  Aktiv ist im eigentlichen Sinn kein Zustand, sondern definiert den sensitiven Bereich des Buttons. Dieser Bereich ist nicht sichtbar, sondern kann mit einem Hotspot in einer HTML-Image-Map. Er wird besonders verwendet, wenn die drei Zustände unterschiedlich groß sind oder keine gefüllten Formen aufweisen, zum Beispiel, wenn sie nur Text enthalten.

Generell gilt: Um einen Zustand explizit zu setzen, muss ein Keyframe in seinem Bereich existieren, ansonsten wird der vorherige Zustand weiterverwendet.

Falls Buttons Animation enthalten sollen, wird einfach im entsprechenden Zustands-Keyframe eine Movieclip-Instanz eingefügt.

Schaltflächen-Aktionen

Ihre Aktionen erhalten Buttons ähnlich wie Keyframes: Die Button-Instanz wird auf der Bühne ausgewählt, anschließend wird die Aktionen-Palette geöffnet oder der letzte Button rechts unten in den Instanzeigenschaften angeklickt. Die Beschriftung der Aktionen-Palette lautet nun Objektaktionen statt Bildaktionen. Hier können wieder auf die übliche Art und Weise beliebig viele Aktionen hinzugefügt werden; sie werden bei Aktivierung des Buttons nacheinander ausgeführt.

Um die eigentlichen Aktionen des Buttons herum erscheint automatisch die Aktion

   on (release)  {
      // eigentliche Aktionen
   }

Es handelt sich um die spezielle Aktion on aus Aktionen • Filmsteuerung, die nur bei Schaltflächen-, aber nicht bei Bildaktionen aktiv ist. In den Parametern der Aktion kann ausgewählt werden, auf welches Ereignis der Button reagieren soll. release (Loslassen der Maustaste) ist hier Standard. Es können mehrere Maus- beziehungsweise Tastatur-Ereignisse angekreuzt werden, damit der Button auf mehrere Ereignisse gleichzeitig reagiert. Weitere on-Aktionen können ebenfalls hinzugefügt werden, die dann entsprechend für andere Ereignisse andere Befehle ausführen.

Folgendermaßen können Sie den Film aus dem vorigen Beispiel per Knopfdruck neu starten:

1. Erstellen Sie eine Schaltfläche beliebigen Aussehens mit der Beschriftung »Noch mal«.
       
2. Fügen Sie eine neue Ebene namens Buttons in den Film ein.
       
3. Fügen Sie in dieser neuen Ebene am Ende des Films ein Schlüsselbild ein.
       
4. Weisen Sie der Button-Instanz die Aktion Play zu. Es erscheint das folgende vollständige Skript:
       
  on (release) {
     play ();
  }

Sie können nun jeweils durch Klick auf den Noch mal-Button den Film neu starten.


Galileo Computing

20.5.3 Die Aktion Goto  downtop

Mit Hilfe der diversen Goto-Aktionen wird ein Sprung zu einem bestimmten Frame durchgeführt. Dazu muss das Zielframe für den Sprung bezeichnet werden. Die Parameter der Aktion sind daher folgende:

gp  Szene: Die Szene, in der das Frame liegt, zu dem gesprungen werden soll. Szenen sind komfortable Ordnungseinheiten, die weiter unten behandelt werden. Wählen Sie deshalb einfach Aktuelle Szene aus.
gp  Der Typ bestimmt, auf welche Weise das Zielframe angegeben wird: Bildnummer ist die Nummer des Zielframes in der Zeitleiste. Bildmarkierung verwendet die eingegebene Bezeichnung eines Frames, die in der Eigenschaften-Leiste jedem beliebigen Keyframe zugewiesen werden kann. Diese Methode ist gegenüber der Bildnummer zu bevorzugen, denn es ist angenehmer, sich etwa »ende« zu merken als »457«. Außerdem ist es bei diesem Verfahren egal, wenn später Frames dazwischen eingefügt oder entfernt werden. Ausdruck schließlich ist ein komplexerer zusammengesetzter Ausdruck, beispielsweise addiert hallo + 15 den Wert 15 zum Wert der Variablen hallo. Vorheriges Frame und nächstes Frame sind spezielle Aktionen, die eher selten verwendet werden.
gp  Unter Bild wird je nach gewähltem Typ das konkrete Frame angegeben.
gp  Das Ankreuzfeld Gehe zu und abspielen erzeugt ausgeschaltet die Aktion gotoAndStop(), die beim Zielframe anhält, und eingeschaltet die Aktion gotoAndPlay(), die zum Zielframe springt und den Film von dort an abspielt.

Mit Szenen arbeiten

Eine Szene ist eine Ordnungseinheit im Film, die es erleichtert, verschiedene logische oder inhaltliche Teile auseinander zu halten.

Jede Szene beginnt zunächst einmal mit einer leeren Zeitleiste, einer einzigen Ebene und völlig ohne Inhalt; die Frames werden in jeder einzelnen Szene ab 1 gezählt. Beim späteren Abspielen des Films laufen alle Szenen ohne Pause hintereinander ab.

Die Verwaltung der Szenen erfolgt in der Szene-Palette (Fenster • Szene oder (Shift) + (F2)). Hier können Sie jede Szene anklicken, um in ihr zu arbeiten – das geht allerdings einfacher über das Szenen-Popup, die kleine Film-Klappe rechts oben im Dokumentfenster. Sie können in der Szenen-Palette per Doppelklick eine Szene umbenennen und durch Ziehen nach oben oder unten ihre Reihenfolge vertauschen. Die Buttons unten in der Palette dienen von links nach rechts dem Duplizieren der aktuellen Szene, dem Erstellen einer neuen Szene und dem Löschen der aktuellen Szene.

Ein weiterer Vorteil von Szenen besteht darin, dass Sie nicht für jeden Test Ihrer aktuellen Arbeit den gesamten Film exportieren müssen: Über Steuerung • Szene testen können Sie einzelne Szenen als Vorschau exportieren.

Goto-Aktionen mit Szenen

In den Goto-Aktionen kann als erster Parameter die Szene ausgewählt werden, zu der gesprungen werden soll – Standard ist Aktuelle Szene, also kein Szenenwechsel. Darunter stehen die relativen Angaben Vorherige Szene beziehungsweise Nächste Szene zur Auswahl, die eigentlich eher selten empfehlenswert sind; darunter werden die Namen aller Szenen des Films zur Auswahl angeboten.

Wenn Sie einen interaktiven, verzweigten Film von vornherein mit Szenen anlegen, müssen Sie sich in den Goto-Aktionen in der Regel nicht mehr um Frame-Nummern oder -Namen kümmern: Die meisten Sprünge erfolgen einfach zum ersten Frame der jeweiligen Szene.

In der eigentlichen ActionScript-Syntax lauten die diversen Goto-Aktionen folgendermaßen:

gotoAndPlay (3);
// Sprung zu Frame Nummer 3 in der aktuellen Szene 
// mit "Gehe zu und Abspielen"
gotoAndStop (7);
// Sprung zu Frame Nummer 7, dort anhalten
gotoAndPlay ("hallo");
// Sprung zum Frame mit der Bezeichnung "hallo",
// von dort abspielen
gotoAndStop ("ende");
// Sprung zum Frame "ende", dort anhalten
gotoAndPlay ("haupt", 1);
// Sprung zum Frame 1 in Szene "haupt"; abspielen
gotoAndStop ("fehler", "eingabe");
// Sprung zum Frame "eingabe" in 
// Szene "fehler", dort anhalten
prevFrame ();
// ein Frame zurück
nextFrame ();
// ein Frame weiter
prevScene ();
// eine Szene zurück
nextScene ();
// eine Szene weiter

Galileo Computing

20.5.4 Andere Filme laden: die loadMovie-Aktionen  downtop

Die loadMovie-Aktionen funktionieren nur mit SWF-Filmen, also dem Endprodukt der Produktion, nicht mit bearbeitbaren FLA-Dateien. Die SWF-Filme müssen also bereits exportiert worden sein, und ihr Name und relativer Pfad zueinander müssen bekannt sein.

Im vorliegenden Beispiel werden zwei Filme namens film1.swf und film2.swf verwendet, die im selben Ordner liegen.

Um nun von film1.swf aus, beispielsweise mit Hilfe eines Buttons, film2.swf aufzurufen, wird folgende Aktion eingestellt:

Aktion: LoadMovie, URL: film2.swf, Position: Stufe, Wert hinter Position: 0, Variablen: nicht versenden.

Diese Einstellungen bedeuten im Einzelnen:

gp  URL gibt den Pfad beziehungsweise den Dateinamen des Films an, der geladen werden soll. Natürlich kann auch eine externe URL wie etwa http://www.flashfilme.de/meinefilme/test.swf angegeben werden.
gp  Unter Position haben Sie die Wahl zwischen den Optionen Stufe und Ziel.
    Stufen beschreiben einen Stapel übereinander liegender Filme (ähnlich den Ebenen innerhalb eines Films). Der unterste, zu Anfang geladene Film befindet sich auf Stufe 0, die höheren Stufen liegen immer weiter im Vordergrund. Wenn ein anderer Film auf Stufe 0 geladen wird, dann wird der vorherige Film ersetzt, genauer gesagt verschwinden alle anderen Filme von allen Stufen. Wird dagegen eine höhere Stufe angegeben, so wird der neue Film auf diese Stufe geladen, ohne andere Stufen zu beeinflussen.
       
    Ziel dient dagegen dazu, einen externen SWF-Film in eine lokale (interne) Movieclip-Instanz hineinzuladen. Der bisherige Inhalt des Movieclips wird also nicht mehr gezeigt, stattdessen wird der geladene Film an der entsprechenden Position mit der gewählten Transformation eingeblendet. Damit eine Instanz überhaupt als Ziel dienen kann, müssen Sie sie zuvor auswählen und ihr in der Eigenschaften-Leiste einen eindeutigen Namen zuweisen.
       
gp  Variablen: Wird Senden mit Post oder Senden mit GET gewählt, dann werden die Inhalte aller Variablen über die entsprechende HTTP-Methode an den neu geladenen Film weitergereicht und sind dort verfügbar. Der neue Film kann dann zum Beispiel auf Grund von Vorgaben aus dem alten Film dynamisch verschieden aufgebaut werden. Wichtiger ist die Möglichkeit, Variablen zu versenden, übrigens bei der Aktion GetURL, diese entspricht einem HTML-Hyperlink, lädt also ein neues Dokument in den Browser. Hier kann das Versenden von Variablen das Erstellen von Flash-Formularen ermöglichen.

Wichtig sind in diesem Zusammenhang auch die unloadMovie-Funktionen: Hier wird nur die Position (Stufe oder Ziel) angegeben, wodurch der aktuell dort befindliche Film entfernt wird. Bemerkenswert ist, dass ein Film, der sich auf einer bestimmten Stufe befindet, sich auch »selbst entfernen« kann, wenn er diese Stufe angibt.

Bitte beachten Sie, dass grundlegende Filmeigenschaften an den zuerst geladenen Film angepasst und im Nachhinein nicht mehr geändert werden – insbesondere Hintergrundfarbe, Bühnengröße und Abspielrate. Dabei ist es egal, ob der erste Film durch den Ladevorgang ersetzt oder auf einer höheren Stufe überlagert wird.

Ein Film auf einer höheren Stufe ist im Übrigen an allen Stellen, an denen er keinen Inhalt hat, durchscheinend und deckt die darunter liegenden Filme nicht ab. Buttons auf darunter liegenden Filmen bleiben sogar dann aktiv, wenn sie nicht mehr sichtbar sind, das heißt, wenn sie durch beliebige Inhalte abgedeckt sind.

Die eigentliche ActionScript-Syntax für die loadMovie- und unloadMovie-Aktionen lautet folgendermaßen:

loadMovieNum ("film2.swf", 0);
// lädt film2.swf auf Stufe 0 - ersetzt alles
loadMovieNum ("film3.swf", 1, "GET");
// lädt film3.swf auf Stufe 1 und sendet ihm
// alle Variablen mit Hilfe der Methode GET
loadMovie ("kreis.swf", "quadrat");
// lädt kreis.swf in die Movieclip-Instanz quadrat
loadMovie ("pyramide.swf", "quader", "POST");
// lädt pyramide.swf in die Instanz quader und sendet
// ihm die Variablen mit Hilfe der Methode POST
unloadMovieNum (1);
// den Film von Stufe 1 entladen
unloadMovie ("wuerfel");
// den Film aus der Instanz wuerfel entladen

Galileo Computing

20.5.5 Steuern von Movieclips  downtop

Jede Movieclip-Instanz ist im Prinzip ein eigenständiger kleiner »Film im Film«. Eine solche Instanz verfügt über eine eigene Zeitleiste, die unabhängig von der Zeitleiste des Hauptfilms gestartet, angehalten und gesteuert werden kann.

Movieclip-Instanzen können mittels ActionScript gesteuert werden. Genauer gesagt kann jede Zeitleiste jeder anderen unabhängigen Zeitleiste Befehle erteilen.

Spätestens hier sollten Sie zur Skripteingabe den Expertenmodus aktivieren. Die allgemeine Schreibweise ist folgende:

andere_zeitleiste.anweisung;

Instanzen-Hierarchie

Dabei kann anweisung im Grunde jeder beliebige ActionScript-Befehl sein. Es ist nur wichtig zu wissen, mit welcher Syntax andere Zeitleisten angesprochen werden. Hierfür gelten die folgenden Regeln:

gp  Eine Instanz innerhalb der aktuellen Zeitleiste wird einfach anhand ihres in der Eigenschaften-Leiste definierten Namens angesprochen. Soll beispielsweise eine Instanz namens test angehalten werden, so lautet die Syntax für diese Anweisung:
test.stop();
gp  Enthält das Symbol einer Instanz innerhalb der aktuellen Zeitleiste wiederum eine benannte Movieclip-Instanz und so weiter, dann werden die Bezeichnungen der verschachtelten Instanzen durch Punkte voneinander getrennt. Wenn zum Beispiel die Instanz test aus dem vorigen Beispiel ihrerseits eine Instanz namens kreis enthält, die zu ihrem Frame ende springen und anhalten soll, dann schreiben Sie Folgendes:
test.kreis.gotoAndStop ("ende");
gp  Um die Zeitleiste anzusprechen, in der sich die aktuell bearbeitete Instanz befindet, wird der spezielle Bezug _parent verwendet. Wenn zum Beispiel test aus kreis heraus zum Weiterspielen aufgefordert werden soll, dann lautet der entsprechende Befehl:
_parent.play ();
gp  Wenn Sie aus einer beliebig tiefen Verschachtelung heraus den Hauptfilm ansprechen möchten, dann lautet die spezielle Bezeichnung dafür _root. Die folgende Anweisung schickt beispielsweise den Hauptfilm zu seinem Frame anfang und spielt ihn von dort ab:
_root.gotoAndPlay ("anfang");
    Beachten Sie bitte, dass die Movieclip-Methoden-Version der Goto-Befehle keine Szenen unterstützt – falls Sie also aus einer anderen Zeitleiste heraus den Hauptfilm ansprechen, dann dürfen Sie nur ein Frame in dessen aktueller Szene als Sprungziel angeben!
       
gp  Schließlich werden die auf anderen Stufen geladenen Filme über die spezielle Zielangabe _leveln angesprochen – n entspricht dabei der Nummer der jeweiligen Stufe. Um etwa den Film auf Stufe 3 anzuhalten, können Sie die folgende Anweisung benutzen:
level3.stop ();

Auf dieselbe Weise erfolgt der Zugriff auf Variablen in anderen Zeitleisten sowie auf die weiter unten behandelten Eigenschaften von Movieclips.

Praxisbeispiel: ein kleiner Spielautomat

Per Klick auf einen Start-Button wird der Automat gestartet. Es werden 10 Cent vom angezeigten Guthaben abgezogen. Anschließend laufen drei Walzen (Instanzen eines Symbols, das aus einer Abfolge von Schlüsselbildern mit verschiedenen Werten besteht), sie werden nacheinander automatisch oder per Knopfdruck gestoppt. Wenn alle drei Walzen dasselbe Symbol anzeigen, wird der entsprechende Betrag zum Guthaben addiert und angezeigt.

In Abbildung 20.7 wird das Ergebnis gezeigt.


Abbildung 20.7   Der Spielautomat und seine Zeitleiste

Abbildung
Hier klicken, um das Bild zu Vergrößern


1. Erstellen Sie ein Movieclip-Symbol namens walze. Es enthält ein Rechteck und darauf in mehreren aufeinander folgenden Keyframes unterschiedliche Beträge oder Symbole (Obst, Spielkarten, Sonnen, Kronen und so weiter).
       
    Da ich kein besonders fähiger Zeichner bin, ist mein klassisches Unterrichtsbeispiel folgendermaßen aufgebaut: Seine Dauer beträgt 20 Frames, und es besitzt in jedem zweiten Frame ein Keyframe; die Symbole sind die Werte 10 (häufig), 20 (seltener), 30 und 40 (sehr selten) sowie das Euro-Zeichen (einmal).
       
    Fügen Sie eine weitere Ebene ein, die Sie aktionen nennen. Innerhalb dieser Ebene muss jedes Bild ein Schlüsselbild sein und erhält jeweils eine Aktion, die die Variable betrag auf den aktuellen Walzenwert setzt. Angenommen, der aktuelle Walzenwert ist 10 – in diesem Fall lautet die einzugebende Aktion einfach:
       
betrag = 10;
2. Ziehen Sie das Symbol walze dreimal auf die Bühne; die Instanzen werden als walze1, walze2 und walze3 bezeichnet. Die entsprechende Ebene erhält den Namen grafik.
       
3. Legen Sie zwei Schaltflächen-Symbole namens play und stop mit entsprechender Beschriftung an; diese werden in der Ebene buttons auf die Bühne gezogen.
       
4. Erstellen Sie eine neue Ebene mit dem Namen anzeige und zeichnen Sie dort ein dynamisches Textfeld. Weisen Sie ihm in der Eigenschaften-Leiste unter Var. den Variablennamen guthaben zu. Wählen Sie unter Zeichen als einzubettende Schriftsymbole Nur Ziffern aus. Setzen Sie die Absatzformatierung auf rechtsbündig (für Zahlen ideal) und die Schriftfarbe auf rot.
       
5. Erzeugen Sie ein Movieclip-Symbol namens gewinnsound. Es erhält zwei Ebenen; die Ebene sound enthält ab dem zweiten Frame einen passenden Sound, die Ebene aktionen bekommt im ersten Frame die Aktion
       
stop();
    Sie verhindert, dass der Sound automatisch abgespielt wird.
       
    Ziehen Sie das Symbol auf die neue Ebene sound und nennen Sie die – durch einen Punkt dargestellte, aber eigentlich unsichtbare – Instanz ebenfalls gewinnsound, wie das Symbol selbst.
       
6. Eine weitere Ebene, framenamen, erhält Schlüsselbilder mit den folgenden Frame-Bezeichnungen:
       
Frame 3: Bezeichnung start Frame 18: Bezeichnung stop1 Frame 38: Bezeichnung stop2 Frame 60: Bezeichnung stop3
    Die genauen Positionen der drei Frames stop1 bis stop3 sind nicht ganz so wichtig; sie sollten nur nicht zu nah aufeinander folgen, damit die drei Walzen eine hinreichende Laufzeit erhalten.
       
7. Eine weitere Ebene namens aktionen erhält in einigen Frames Keyframes mit den folgenden Frame-Aktionen:
       
Frame 2:
   // Walzen auf zufällige Anfangspositionen setzen: 
   walze1.gotoAndStop 
      (parseInt (Math.random () * 20) + 1);
   walze2.gotoAndStop 
      (parseInt (Math.random () * 20) + 1);
   walze3.gotoAndStop 
      (parseInt (Math.random () * 20) + 1);
   // Startguthaben setzen:
   guthaben = 100;
   // den Hauptfilm zunächst anhalten:
   stop ();
Frame start:
   // Kosten für ein Spiel abziehen
   guthaben -= 10;
   // Noch Guthaben vorhanden? Sonst bankrott!
   if (guthaben < 0)
      gotoAndPlay ("bankrott", 1);
Frame stop1:
   // Walze 1 anhalten:
   walze1.stop ();
Frame stop2:
   // Walze 2 anhalten:
   walze2.stop ();
Frame stop3:
   // Walze 3 anhalten:
   walze3.stop ();
   // Gewinn überprüfen:
   if (walze1.betrag == walze2.betrag
      && walze2.betrag == walze3.betrag)  {
      guthaben += walze1.betrag;
      gewinnsound.play ();
   }
   // Hauptfilm ebenfalls anhalten und auf Neustart
   // per Play-Button warten:
   stop ();
8. Die Buttons erhalten je nach Position im Film unterschiedliche Aktionen, indem auf der Ebene buttons an den entsprechenden Stellen jeweils Keyframes eingefügt werden:
       
Stop-Button in Frame 2:
     on (release)  {
        // Walze 1 vorzeitig stoppen:
        gotoAndPlay ("stop1");
     }
Start-Button in Frame 2:
      on (release)  {
         // Die drei Walzen starten:
         walze1.play ();
         walze2.play ();
         walze3.play ();
         // Den Hauptfilm für den Ablauf starten:
         play ();
      }
Stop-Button im Frame stop1:
     on (release)  {
        // Walze 2 vorzeitig stoppen:
        gotoAndPlay ("stop2");
     }
Stop-Button im Frame stop2:
     on (release)  {
        // Walze 3 vorzeitig stoppen:
        gotoAndStop ("stop3");
     }
Play-Button im Frame stoprechts:
      on (release)  {
         // Die Walzen neu starten:
         walze1.play ();
         walze2.play ();
         walze3.play ();
         // Einen neuen Durchlauf beginnen:
         gotoAndPlay ("start");
      }
9. Erstellen Sie zu guter Letzt die separate Szene bankrott, die eine passende Meldung enthält.
       

Galileo Computing

20.5.6 Eigenschaften von Movieclip-Instanzen  downtop

Verschiedene Aspekte von Movieclips oder des Hauptfilms können nicht nur in der Arbeitsumgebung von Flash bearbeitet, sondern auch dynamisch per ActionScript modifiziert werden.

Jede dieser Eigenschaften hat die Syntax:

   instanz._eigenschaft

Die Namen aller Eigenschaften beginnen mit einem Unterstrich.

Eigenschaften können in beliebigen Ausdrücken verwendet werden, wodurch ihr Wert ausgelesen und entsprechend verwendet wird. Geändert werden Eigenschaften dagegen per Wertzuweisung, so wie beiVariablen.

Beispielsweise könnten Sie folgendermaßen die aktuelle Breite der Instanz kreis in das Textfeld ausgabe schreiben:

   ausgabe = kreis._width;

Das folgende Beispiel setzt die x-Position der Instanz rechteck auf 300:

   rechteck._x = 300;

Tabelle 20.1 enthält eine Übersicht über die wichtigsten Eigenschaften und ihre Bedeutung.


Tabelle 20.1   Die wichtigsten Eigenschaften von Movieclip-Instanzen

_width Breite der Instanz in Pixeln
_height Höhe der Instanz in Pixeln
_x horizontale Position, gemessen am Ankerpunkt der Instanz
_y vertikale Position
_rotation Drehwinkel in Grad
_xscale horizontaler Skalierungsfaktor in Prozent
_yscale vertikaler Skalierungsfaktor
_xmouse horizontale Mausposition
_ymouse vertikale Mausposition
_visible Sichtbarkeit (true/false)
_alpha Deckkraft, 0 bis 100


Galileo Computing

20.5.7 Verschiedene ActionScript-Lösungen  toptop

Im Folgenden werden in knapper Form einige häufig benötigte ActionScript-Lösungen vorgestellt. Selbstverständlich kann diese inzwischen sehr umfangreiche und komplexe Skriptsprache hier noch nicht einmal ansatzweise vollständig behandelt werden. Wenn Sie anhand der hier gezeigten Beispiele und Anregungen auf den Geschmack kommen, finden Sie in Anhang D, Kommentiertes Literaturverzeichnis, einige Empfehlungen für gute Flash- und ActionScript-Bücher.

ActionScript-»Hyperlinks« per getURL( )

Mit Hilfe der Aktion getURL() können Sie aus einem Flash-Film heraus einen Web-Hyperlink einrichten. Die Funktion nimmt als Argument mindestens eine URL entgegen; für diese gelten dieselben Regeln wie für URL-Angaben in HTML-Hyperlinks. Die folgende Anweisung öffnet die Homepage von Galileo Computing in dem Fenster oder Frame, in dem bisher der SWF-Film eingebettet ist:

getURL ("http://www.galileo-computing.de");

Ein optionales zweites Argument ist für die Angabe verantwortlich, in welches Fenster oder Frame die URL geladen werden soll. Es entspricht damit der target-Angabe bei HTML-Links. Dieses Beispiel öffnet die Datei info.htm in einem neuen Fenster:

getURL ("info.htm", "_blank");

Flash-Formulare

Schließlich existiert noch ein drittes Argument. Es kann lediglich die Werte "GET" oder "POST" annehmen und sorgt dafür, dass alle zurzeit definierten Variablen über die angegebene HTTP-Methode an die verknüpfte URL versandt werden. Dadurch können Sie die Funktionalität von HTML-Formularen in Flash simulieren. Beispielsweise ruft die folgende Anweisung das serverseitige Skript forum.php auf und sendet ihm die aktuellen Variablen mittels GET:

getURL ("forum.php", "_self", "GET");

Die eigentlich überflüssige Target-Angabe _self steht an dieser Stelle, weil das GET/POST-Argument auf jeden Fall das dritte sein muss.

Schließlich können Sie sogar JavaScript-Funktionen des Dokuments aufrufen, in das die SWF-Datei eingebettet wird. Dazu wird eine javascript:-Pseudo-URL verwendet. Das folgende Beispiel ruft die im umgebenden HTML-Dokument definierte JavaScript-Funktion ausgabe() auf:

getURL ("javascript:ausgabe();");

Natürlich funktioniert das nicht nur mit selbst definierten, sondern auch mit vorgefertigten JavaScript-Anweisungen.

Buttons mit »Dauerfeuer«-Funktion erstellen

Besonders bei Spielen ist es manchmal lästig, dass Sie Buttons immer wieder neu betätigen müssen, um dieselbe Aktion mehrmals hintereinander auszulösen.

Das Problem ist, dass Flash-Buttons nur auf Zustandsänderungen reagieren, aber nicht auf Dauerzustände.

Packen Sie den Button in einen Movieclip ein, der bei Klick auf den Button beginnt, die gewünschte Aktion in einer Schleife auszuführen, und beim Loslassen des Buttons wieder damit aufhört.

Auf eine Ebene des Movieclips gehört also durchgehend der Button. Er erhält folgende Aktion:

on (press)  {
   // Beim Drücken zur eigentlichen Aktion springen:
   gotoAndPlay (3);
}
 
on (release)  {
   // Beim Loslassen wieder stehenbleiben:
   gotoAndStop (1);
}

Nun wird Frame 1 einer weiteren Ebene mit einem einfachen stop() versehen. Frame 3 erhält die eigentliche Aktion, die der Button auslösen soll – allerdings müssen Sie den geänderten Bezug beachten, da der Button nun verschachtelt innerhalb eines Movieclips liegt: Beispielsweise müssen Sie _root ansprechen, um von hier aus den Hauptfilm zu steuern. Schließlich erhält Frame 4 die Aktion gotoAndPlay (3);, um die Aktion in einer Schleife auszuführen.

Den Mauszeiger ausblenden

Das globale Objekt Mouse besitzt zwei Methoden: Mouse.hide(); blendet den Mauszeiger aus; Mouse.show(); zeigt ihn wieder an. In vielen Spielen ist es ratsam, den Cursor nicht anzuzeigen – insbesondere, wenn eine Spielfigur durch einfache Mausbewegung gesteuert wird.

Allgemeine Steuerungsaufgaben erledigen

Falls Sie bestimmte ActionScripts immer wieder ausführen oder auf allgemeine Mausbewegungen reagieren müssen, können Sie einen speziellen Steuerungs-Movieclip verwenden. Es handelt sich um eine beliebige Movieclip-Instanz – Sie können ruhig explizit ein vollkommen leeres Symbol verwenden –, der bestimmte Instanzaktionen zugewiesen werden: Die passende Aktion heißt onClipEvent() und umschließt auf ähnliche Weise wie das on() eines Buttons einen Block von Aktionen, die bei Eintritt eines bestimmten Ereignisses ausgeführt werden sollen. Die wichtigsten sind folgende:

gp  onClipEvent (load): Löst Aktionen aus, die einmal ausgeführt werden, wenn die Instanz zum ersten Mal auf der Bühne erscheint.
gp  onClipEvent (enterFrame): Diese Aktionen werden bei jedem einzelnen Framewechsel ausgeführt, das heißt in einer sehr schnellen Endlosschleife.
gp  onClipEvent (mouseDown): Die Aktionen werden ausgeführt, wenn irgendwo die Maustaste gedrückt wird.
gp  onClipEvent (mouseUp): Diese Aktionen werden beim Loslassen der Maustaste an einer beliebigen Stelle ausgeführt.

Movieclip-Instanzen einfärben

Sie können eine Movieclip-Instanz mit einer beliebigen Farbe einfärben. Diese Farbe bedeckt die gesamte Form der Instanz, sodass Sie ein einheitlich gefärbtes Objekt erhalten; Linien, verschiedenfarbige Füllungen oder Verläufe sind nicht mehr zu sehen.

Das Einfärben erfolgt in zwei Schritten: Als Erstes wird ein mit der Instanz verknüpftes Color-Objekt erzeugt, anschließend wird die Methode setRGB() dieses Objekts aufgerufen, um die gewünschte Farbe einzustellen. Das Argument von setRGB() ist eine Zahl zwischen 0 und 16.777.216, also die numerische Darstellung eines 24-Bit-RGB-Farbwerts. Am einfachsten ist es, den Wert durch vorangestelltes 0x als hexadezimale Konstante einzutragen, da Sie auf diese Weise einfach einen HTML-Farbwert übernehmen können. Beispielsweise steht 0xFF9900 für Orange.

Das folgende Beispiel färbt die Instanz kugel rot:

var kugelfarbe = new Color (kugel);
kugelfarbe.setRGB (0xFF0000);

Sie können den RGB-Wert alternativ auch aus den einzelnen Werten der drei Farbkanäle berechnen. Dazu eignet sich die folgende Schreibweise besonders gut, weil sie effizient ausgeführt wird und relativ übersichtlich ist:

rotwert << 16 | gruenwert << 8 | blauwert

Der Rotwert wird um 16 Bit nach links verschoben, der Grünwert um 8 Bit, der Blauwert bleibt unverändert. Anschließend werden die drei Teilwerte bitweise durch Oder verknüpft, was in diesem Fall der Addition entspricht, weil sich die Bits der Werte durch die Verschiebung nirgends überschneiden. Der Ausdruck ist also äquivalent mit der folgenden recht unhandlichen Fassung:

rotwert * 65536 + gruenwert * 256 + blauwert

Das folgende Beispiel färbt die Instanz wuerfel nach diesem Schema hell-cyan ein:

var wuerfelfarbe = new Color (wuerfel);
wuerfelfarbe.setRGB (204 << 16 | 255 << 8 | 255);

Mit Hilfe der Methode setTransform() des Color-Objekts können Sie wesentlich exaktere Kontrolle über die Färbung einer Instanz übernehmen: Die Methode bietet alle Möglichkeiten des Farbeffekts Erweitert, den Sie in der Eigenschaften-Leiste für eine Instanz einstellen können. Das Argument der Methode ist ein Transformations-Objekt, ein einzelnes, allgemeines Objekt, das acht benannte Werte kapselt. Das folgende Beispiel zeigt, wie die Methode auf die Instanz quadrat angewandt wird; in den Kommentaren wird die Bedeutung der acht Werte im Transformations-Objekt erläutert:

var quadTrans = new Object(); 
 // allgemeines Objekt
quadTrans.ra = 100; 
 // Rot-Prozent -100 bis +10 
quadTrans.rb = 0;    // Rot-Änderung -255 bis +255
quadTrans.ga = 100;  // Grün-Prozent -100 bis +10 
quadTrans.gb = 0;    // Grün-Änderung -255 bis +255
quadTrans.ba = 100;  // Blau-Prozent -100 bis +10 
quadTrans.bb = 0;    // Blau-Änderung -255 bis +255
quadTrans.aa = 100;  // Alpha-Prozent -100 bis +10 
quadTrans.ab = 0;    // Alpha-Prozent -255 bis +255
var quadColor = new Color (quadrat);
quadColor.setTransform (quadTrans);

Wie bereits für den Farbeffekt Erweitert erläutert wurde, beschreiben die Prozentwerte die Intensität des jeweiligen Kanals im ursprünglichen Symbol, während die Änderungswerte dem Einfärben dienen, das heißt das Bild gleichmäßig mit der entsprechenden Farbe bedecken.

Kollisionen von Instanzen ermitteln

Besonders für Flash-Spiele ist es oft wichtig, zu ermitteln, ob Movieclip-Instanzen einander berühren oder ob sie sich an einer bestimmten Position befinden. Zu diesem Zweck existiert die Movieclip-Methode hitTest(), die bei einer Berührung true zurückgibt oder false, wenn die getestete Berührung nicht stattfindet.

Es gibt zwei verschiedene Versionen von hitTest(), die unterschiedliche Argumente verwenden:

clip.hitTest (anderer_clip)

überprüft, ob die beiden Instanzen clip und anderer_clip einander berühren. Bei beiden Instanzen wird das Begrenzungsrechteck getestet, das heißt der gesamte rechteckige Bereich, der das Objekt genau umschließt. Beispielsweise überprüft die folgende Anweisung, ob die Instanz ball die Instanz schlaeger berührt:

if (ball.hitTest (schlaeger)) {
   // entsprechende Aktionen
}

Die zweite Form der Methode hitTest() sieht folgendermaßen aus:

clip.hitTest (x, y, form_testen)

x und y sind Koordinaten auf der Bühne; es wird überprüft, ob sich der angegebene Punkt innerhalb der getesteten Instanz befindet. Für das Argument form_testen kann true oder false eingesetzt werden. Bei true wird die exakte Form der Instanz ausgewertet, false begnügt sich dagegen mit dem Begrenzungsrechteck. Sie sollten die exakte Form nur dann testen, wenn es wirklich nötig ist. Die Variante mit Formtest benötigt erheblich mehr Ressourcen.

Das nächste Beispiel überprüft mit genauer Formüberprüfung, ob sich der Mauszeiger im Bereich der Instanz dreieck befindet:

if (dreieck.hitTest (_xmouse, _ymouse, true)) {
   // beliebige Anweisungen
}

Movieclip-Instanzen automatisch erstellen

Manchmal ist es nützlich, Objekte nicht von vornherein auf die Bühne zu setzen, sondern per ActionScript zu bestimmen, wann Sie wie viele von ihnen benötigen. Stellen Sie sich beispielsweise ein »Space Invaders-Spielchen« mit einer dynamischen Anzahl gegnerischer Raumschiffe vor.

ActionScript bietet verschiedene Methoden zur dynamischen Erzeugung von Movieclip-Instanzen an. Die drei wichtigsten sind folgende:

gp  duplicateMovieClip(): Diese Aktion erzeugt eine Kopie einer bestehenden MovieClip-Instanz. Die drei benötigten Parameter sind: der Name der zu duplizierenden Clip-Instanz (gegebenenfalls mit Verschachtelungsangabe in Punkt-Schreibweise) als String, ein selbstgewählter Name für die neue Instanz (ebenfalls als String) sowie die Tiefe. Letztere bestimmt die Stapelreihenfolge für dynamisch erzeugte Objekte: Je höher der Wert, desto weiter im Vordergrund liegt die neue Instanz.
gp  clip-instanz.attachMovie():Die Aktion attachMovie() »hängt« an die benannte Clip-Instanz eine völlig neu erstellte Instanz an. Die drei Parameter sind der Name des Original-Symbols, der neue Instanz-Name und die bereits erwähnte Tiefe. Als Name des Original-Symbols können Sie nicht einfach den in der Bibliothek zu lesenden Namen eines Symbols verwenden. Stattdessen müssen Sie das betreffende Symbol in der Bibliothek auswählen, unter der Verknüpfung aus dem Bibliotheks-Popup die Option Export für ActionScript aktivieren und explizit einen Exportnamen festlegen.
gp  clip-instanz.createEmptyMovieClip():Erzeugt eine neue, leere Movieclip-Instanz – etwa um einen externen Film hineinzuladen. Die beiden Parameter sind der gewünschte Name für die neue Instanz und die Tiefe.

Einige Beispiele für diese Aktionen werden im nächsten Unterabschnitt eingesetzt und dort kommentiert.

Per ActionScript zeichnen

Eine wichtige Neuerung in Flash MX besteht darin, dass Sie per ActionScript automatisch Zeichnungen anfertigen können. Verschiedene Movieclip-Methoden ermöglichen das Erstellen von Linien, Kurven und Füllungen. Das folgende Beispiel zeichnet einfache schwarze Freihandlinien, solange Sie die Maustaste gedrückt halten:

gp  Erstellen Sie ein Movieclip-Symbol namens stift, die das Bild eines Bleistifts enthält. Der Mittelpunkt muss auf der Spitze der Mine liegen. Ziehen Sie das Symbol auf die Bühne und nennen Sie die Instanz ebenfalls stift.
gp  Erzeugen Sie ein weiteres Moviecliep-Symbol mit dem Namen steuerclip. Lassen Sie es vollkommen leer und ziehen Sie es auf die Bühne. Aktivieren Sie die Instanz und weisen Sie ihr das folgende Skript zu:
// Initialisierung:
onClipEvent (load) {
   // Eine Kopie des Stifts namens stift1 erstellen, 
   // damit er im Vordergrund liegt:
   duplicateMovieClip 
       ("_root.stift", "stift1", 100);
   // Den ursprünglichen Stift unsichtbar machen: 
   _root.stift._visible = 0;
   // stift1 mit der Maus bewegen:
   startDrag ("_root.stift1", true);
   // Den Mauszeiger ausblenden:
   Mouse.hide();
   // leeren Movieclip als Leinwand erzeugen:
   _root.createEmptyMovieClip("canvas", 0);
   // Linienstärke 2 Pixel, schwarz, Alpha 100:
   _root.canvas.lineStyle (2, 0x000000, 100);
   // Zurzeit wird nicht gemalt:
   _root.malen = false;
}
 
// Beginn des Malens (Maustaste unten):
onClipEvent (mouseDown) {
   // Es wird gemalt:
   _root.malen = true;
   // "Pinsel" auf Mausposition:
   _root.canvas.moveTo
      (_root._xmouse, _root._ymouse);
}
 
// Ende des Malens (Maustaste oben):
onClipEvent (mouseUp) {
   // Es wird nicht mehr gemalt:
   _root.malen = false;
}
 
// Schleife, die bei Bedarf malt:
onClipEvent (enterFrame) {
   // Wird gerade gemalt?
   if (_root.malen) {
       // Linie bis zur aktuellen Mausposition:
       _root.canvas.lineTo 
           (_root._xmouse, _root._ymouse);
   }
}

Filme vorausladen

Normalerweise werden Flash-Filme im Internet streaming abgespielt, das heißt, ein Frame wird angezeigt, sobald genügend Daten geladen sind. Eigentlich ist dieses Verhalten wünschenswert, da es den Benutzern den Genuss Ihrer Werke ohne Wartezeit ermöglicht. Allerdings kann es vorkommen, dass an manchen Stellen eines Films eine zu hohe Datenmenge benötigt wird, um den Stream aufrechtzuerhalten.

Messen können Sie die zu erwartenden Ladezeiten auch offline: Wählen Sie im Film testen-Fenster die Option Ansicht • Bandbreiten-Profiler. Hier können Sie sich für verschiedene Verbindungsgeschwindigkeiten anzeigen lassen, ob die Ladezeiten der Frames und Szenen im Rahmen liegen. Wenn ein Balken über die waagerechte Mittellinie hinausragt, dann kann das Frame an der entsprechenden Stelle mit der eingestellten Bandbreite nicht rechtzeitig geladen werden – der Film wird hier ruckeln.

Wenn Sie Passagen oder Movieclips vorausladen möchten, können Sie die Eigenschaften _totalframes (Gesamtzahl der Frames) und _framesloaded (Anzahl der bereits geladenen Frames) einer beliebigen Zeitleiste miteinander vergleichen.

Das folgende Beispielskript kann einem Steuerungs-Clip am Anfang eines Films als Instanzaktion zugewiesen werden. Es geht davon aus, dass sich auf der Bühne des Hauptfilms eine Instanz namens fbalken befindet, die einen Fortschrittsbalken darstellt, und setzt dessen Breite prozentual auf die bereits geladenen Frames. Beachten Sie, dass das zugrunde liegende Symbol seinen Ankerpunkt am linken Rand des eigentlichen Balkens besitzen muss, damit der Balken korrekt von links nach rechts vergrößert wird.

Der Hauptfilm muss zunächst per allgemeinem stop() angehalten werden. Wenn er vollständig geladen ist, wird er ab dem benannten Frame start abgespielt. Hier das passende Skript:

onClipEvent (enterFrame)  {
   // Fortschrittsbalken setzen:
   prozent = _root._framesloaded 
           / _root._totalframes * 100;
   _root.fbalken._xscale = prozent;
   // Prüfen, ob fertig geladen wurde:
   if (_root._framesloaded == _root._totalframes)
      gotoAndPlay ("start");
}

Normalerweise brauchen Sie den ganzen Hauptfilm nur selten vorauszuladen: Wenn Sie ein gewisses Stück vorausladen und den Film dann abspielen, geht der Ladevorgang im Hintergrund automatisch weiter.

  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de