Multimediakurs Leinfelder: Inhalt/Modul 8 "Animation und Co./ 8.7 Flash/8.7d Schaltflächen und Skripting |
(© copyright) Letzte Änderungen: |
Allgemeines | statiste Grafiken | Daumenkino-Anim | Bewegungstweening | Formtweening |
Szenen, Grafik- und Filmsymbole | Schaltflächen und Skripting | sonstiges
Allgemeines: Die vollen Möglichkeiten von Flash setzen wir nur ein, wenn wir zeitabhängige Steuerungen oder Interaktion mit dem Benutzer für unsere Flash-Filmchen einsetzen. Dies funktioniert über eine einfache Skript-Programmiersprache, das sog. Action Script von Flash. Leider ist diese Skriptsprache proprietär für Flash, aber es gibt Trost: zum Einen gibt es viele vorgefertigte Skriptmodule, die für einfachere Aktionen nur durch Zusammenklicken erstellbar sind, zum Anderen ist die Sprache sehr an JavaScript angelegt. Der strukturelle Aufbau ist annähernd identisch, nur die Schlüsselwörter bzw. Eventhandler unterscheiden sich z.T. (z.B. statt dem JavaScript'schen onMouseOver in Flash on (release)). Wenn Sie sich also in Modul 7 zumindest mit den Grundprinzipien von JavaScript vertraut gemacht haben, sollte Ihnen dies für Flash ActionScript sehr helfen. Aber auch ohne Vorwissen kann man gute Ergebnisse erzielen.
Dieser Teilmodul strebt keinesfalls an, Ihnen die komplette Flash-Script-Referenz näher zu bringen. Diese können Sie innerhalb Flash im Menupunkt Hilfe/ActionScript-Referenz bzw. ActionScript-Lexikon abrufen. Auf der Programm-CD ist zudem ein über 400-seitiges Action-Script-Handbuch im pdf-Format beigelegt. Ich möchte Ihnen also hier nur den Einstieg erleichtern.
Schaltflächen:
Die wesentlichste Möglichkeit zur Auslösung von Scripten ist die Benutzung von Schaltflächen. Wir werden deren Erstellung deshalb kurz vorstellen. Schaltflächen sind wiederum Symbole (siehe vorhergehender Teilmodul). Sie erstellen Sie also via Einfügen/Neues Symbol /Schaltfläche. Dort öffnet sich eine leere Bühne mit 4 Positionen für mögliche Schlüsselbilder (s. nebenstehende Abb.). Auf steht für das Aussehen einer unbenützten Schaltfläche, Darüber für den Zustand beim Berühren mit der Maus, Drücken entsprechend und Aktiv für den tiefsten Klickpunkt.
Lassen Sie den Zeitcursor auf Auf und zeichnen Ihre gewünschte Schaltfläche (oder importieren Sie eine Grafik mit copy and paste).
Erstellen Sie mit Einfügen/Schlüsselbild eine Kopie des Auf-Schlüsselbilds für die Position darüber und modifizieren dies falls gewünscht (siehe Abb.). Gehen Sie für Drücken und Aktiv genauso vor. (Aktiv können Sie sich ggf. sparen.).
Die Schaltfläche ist nun als Symbol in der Bibliothek abgelegt. Sie können von dort aus beliebige Instanzen davon auf die Bühne ziehen. Das Klicken auf ein Schaltsymbol ergibt bislang allerdings nur einen netten Effekt, hat aber noch keinerlei Auswirkung auf das Filmgeschehen, da wir den Schaltknopf ja noch mit keinerlei Aktion belegt haben.
Verwendung von Skripten:
Genauso wie in JavaScript unterscheiden wir auch für Flash-Skripte zwischen Aktionen und Ereignissen (Events). Wir brauchen also Eventhandler, um Aktionen auszulösen. Ein Eventhandler wäre z.B. on (release), d.h. wir lassen eine geklickteSchaltfläche wieder los. Aber ähnlich wie für dhtml oder JavaScript können wir auch Zeit verstreichen lassen, bevor etwas passiert. Das Zeitereignis kann in Flash aber nun relativ definiert werden, d.h. es wird z.B. beim Abspielen des Films durch Erreichen eines bestimmten Schlüsselbilds ausgelöst. Außerdem können Filmsequenzen mit Skriptaktionen belegt werden.
Belegen wir aber nun erst einmal unsere Schaltflächen mit einer Aktion.
Nachstehend ein Beispiel für eine sehr einfache Animation, die wie üblich selbst losläuft, wenn der Flash-Player-Film geladen ist und auch endlos als Schleife weiterläuft. Wir haben nun aber zwei Schaltflächen erstellt. Mit der ersten kann die Animation gestoppt werden, mit der zweiten läuft sie wieder weiter. Probieren Sie es aus:
Zur Erläuterung unten stehender Screenshot aus Flash:
Können Sie das Beispiel nachvollziehen? Ebene 1 hat zwei kleine Formanimationen des Rechtecks "Was ist das?". Auf Ebene 2 liegen die beiden Instanzen der Schaltflächensymbole. Im Fenster Objektaktionen wird den Schaltflächen durch einfachen Klick die gewünschte Basisaktion zugewiesen. Zu sehen ist dies für Schaltfläche Stop. Sie ist auf der Bühne markiert; im Aktionsfenster wurde auf Basisaktion Stop geklickt. Das entsprechende Skript wird automatisch generiert. Die Schaltfläche Go habe ich analog mit der Basisaktion Play belegt.
Jetzt wäre es noch schön, wenn die Animation erst loslaufen würde, wenn wir es wollen. Einfach können wir dies so lösen. Sie wählen in Ebene 1 das erste Schlüsselbild in der Zeitleiste aus, gehen ins Aktionsfenster (nennt sich nun Bildaktionen) und wählen wiederum Basisaktion Stop aus. Dies verhindert, dass nach dem Laden unsere Animation von selbst losläuft. Wir müssen erst auf Go klicken, dann geht es los. Allerdings hat die Sache einen Haken. Die Animation wird nun nur einmal abgespielt, da ja beim Versuch eine Schleife abzuspielen gleich wieder das Stop-Skript des ersten Schlüsselbildes aufgerufen wird.
Wir lösen dieses Problem folgendermaßen:
Wir haben ein neues erstes Schlüsselbild angelegt, dies wird mit der Aktion Stop belegt (das kleine a über dem Schlüsselbild zeigt, dass hierauf eine Aktion gelegt wurde). Beim Aufruf des Flash-Films läuft dieser also wie gewünscht nicht selbständig ab. Das letzte Schlüsselbild von Ebene 1 haben wir wiederum mit einer Aktion gelegt, das entsprechende Bildaktionsfenster ist unten zu sehen. Wir wählten die Basisaktion GoTo aus. Diese schreibt uns den Skriptbefehl: gotoAndPlay(); Unter Bild geben wir in den Parametern 2 ein. Damit geht nach Aufruf des letzten Schlüsselbildes das Skript zum zweiten Schlüsselbild auf Ebene 1 und spielt hier weiter. Damit loopt das Ganze. Wäre Gehe zu und abspielen (das angekreuzte Kästchen) deaktiviert worden, hätte sich das Skript zu gotoAndSTop(2) geändert. Die Animation wäre also auf Bild 2 stehen geblieben, bis sie ggf. wieder von Hand gestartet wird.
Hinweis: Schlüsselbilder werden durch einen schwarzen Punkt angezeigt. Die sonstigen Bilder sind Kopien, die nicht editiert werden können, bzw. von Flash durch Tweening generierte Bilder. Im untenstehenden Beispiel gibt es also auf der unteren Ebene 6 Schlüsselbilder, diese liegen auf Bildposition 1,2,5,25,30 und 45. Nur sie sind editierbar. Die obere Ebene hat nur ein Schlüsselbild, d.h. die Ebene ist statisch. Auf ihr liegen die Schaltknöpfe, die ja während der gesamten Abspielzeit zur Verfügung stehen sollen. Das Schlüsselbild liegt auf Bildposition 1, Bilder 2-45 sind identisch und nur durch Aufziehen des Schlüsselbildbalkens definiert.
Außerdem habe ich noch die Position der Schaltflächen vertauscht. Go sollte nun eher links stehen, da dies die erste notwendige Aktion ist, um die Animation zum Laufen zu bringen. Des weiteren habe ich auf der unteren Ebene bei den Schüsselbildern auf Position 5, 25, 30 und 45 den im Rechteck bzw. Oval stehenden Text via Modifizieren /Teilen geteilt (d.h. vom Textformat in das Vektorzeichenformat umgewandelt). Damit wird auch der Text mittels des eingestellten Formtweenings mit animiert (Sie erinnern sich: nur ungruppierte Vektorgrafiken können mit Formtweening animiert werden. Das Textformat ist mit einer gruppierten Grafik vergleichbar und muss deshalb geteilt werden. Für Bewegungstweening können allerdings nur Symbole und ggf. ungeteilter Text verwendet werden.
(zur Bedeutung des im obigen Bild rot eingekreisten Pulldownmenus siehe unten).
So, das Prinzip für Scripting sollte klar sein. Nachfolgend ein paar Hinweise auf Aktionen, die wohl besonders häufig verwendet werden. Sie können Schaltflächen oder Schlüsselbilder damit belegen
Einschub: Ein von Flash generierter html-Code sieht z.B. folgendermaßen aus (mit GoLive ist vergleichbares möglich):
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000Ò
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0Ò
WIDTH=300 HEIGHT=300>
<PARAM NAME=movie VALUE="movie.swf">
<PARAM NAME=play VALUE=false>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="movie.swf" play=false loop=false quality=high bgcolor=#FFFFFF WIDTH=300 HEIGHT=300TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>Hierbei wurde z.B. die Qualität auf hoch gestellt (in grün markiert). Außerdem kann man prinzipiell auch ohne Skripte den geladenen Film dazu veranlassen nicht von selbst abzuspielen (rot) bzw. nicht zu loopen (blau). Hinweis: in GoLive funktioniert dies nur, wenn sie im Inspektor unter dem Reiter SWF erst einmal automatisch abspielen bzw. loopen erst einmal aktivieren und dann wieder deaktivieren. Erst dadurch werden die entsprechenden Parameter in den html-Code geschrieben)
Nachfolgend unser bekanntes Beispiel aus zwei Szenen. Szene 1 ist die Sedimentausbreitung, Szene 2 der Meeresspiegelverlauf. Ich habe zwei Schaltflächen aus der allgemeinen Bibliothek von Flash in beide Szenen an identischer Stelle (mit Datei / an Position einfügen) eingefügt, die via GotoandPlay sowie Angabe der Szene und des Startschlüsselbilds jeweils die Szenen getrennt aufrufen lassen.
Expertenmodus:Sie können sich Ihre Aktionen im Aktionsfenster zusammenklicken und, wo notwendig, in den Parameter-Zeilen die entsprechenden Angaben eingeben (s.Abb. unten links). Alternativ können Sie den Expertenmodus (Abb. unten rechts) aufrufen. Dies ist vor allem für fortgeschrittenes, komplexeres Skripting notwendig. Sie können hier sowohl aus den angebotenen Aktions-, Objekt-, Eigenschaften- und sonstigen Schlüsselwortbibliotheken Ihre Skripte zusammenklicken, als auch direkt im Edit-Fenster schreiben. Alternativ können Sie Ihre Skripte mit einem Texteditor schreiben und per copy and paste ins Edit-Fenster im Expertenmodus einfügen.
![]() |
![]() |
|
|
Nachfolgend ein paar weitere Beispiele für Scripting in Flash zum Nachvollziehen. Sie finden die Beispiel sowie die Erklärung dazu jeweils im Extra-Fenster. Schließen Sie dieses Fenster nach Durcharbeiten der Beispiele wieder. Am Ende des Kursmoduls 8 finden Sie in unserem vergleichenden Beispielteil noch einige weitere, geowissenschaften-relevante Beispiele.
Beispiel zu Variablen und Rechenoperationen verwenden: In Flash können Sie genauso wie in JavaScript mit Variablen arbeiten. Textfelder können Sie z.B. direkt als Variablen definieren. Dies machen Sie mit Hilfe des Bedienfeldes Textoptionen. Das oberste Pulldownmenu zeigt bei Aktivierung eines Textfelds standardmäßig statischer Text. Dieser wurde von Ihnen, dem Flash-Programmierer voreingegeben. Sie können ihn als Variable definieren (in unserem Beispiel habe ich das Textfeld und damit die Variable VarZahl1 genannt). Alternativ (und so im nebenstehenden Beispiel gestaltet) können Sie das Textfeld leerlassen (oder eine Aufforderung zur Eingabe reinschreiben) und dieses als Texteingabe definieren. Dann kann der Benutzer Text oder Zahlen reinschreiben. Die dritte Möglichkeit wäre die Option Dynamischer Text für das Textfeld. Damit können Sie z.B. Text (wiederum als Variable) ausgeben lassen, der z.B. aufgrund einer Benutzereingabe erfolgt ist. Damit können Sie Berechnungen oder sonstige Frage-Antwort-Beispiele gestalten. Sehen Sie sich dazu dieses Beispiel an, welches User-Texteingaben, numerische Berechnungen sowie den TellTarget-Befehlssatz verwendet. Nähere Erläuterungen finden Sie auf der Beispielseite.
Beispiel zu Aktion setProperty: Mit dieser Aktion können verschiedene Eigenschaften Ihres Flashfilmes oder auch nur bestimmter Filmsequenzen geändert werden (z.B. durch Benutzeraktion oder durch selbstauslösende Aktionen, wie z.B. Durchlaufen eines bestimmten Schlüsselbildes im Film).
Verwenden Sie hierzu die Aktion setProperty in den Objekt- bzw. Bildaktionen:
In obenstehendem Beispiel wurde für die Instanz seqtest eines Filmsequenzsymbols ein Transparentwert (Alpha-Wert) von 50% eingestellt. (Häufig ist es egal, ob Sie Ziel und Wert als Ausdruck oder nicht definieren. Ein Ausdruck hat keine Gänsefüßchen, ansonsten schon; das Ziel hätte auch als Nichtausdruck definiert werden können; ggf. bekommen Sie Fehlermeldungen von Flash).
Sie können auch mehrere setProperty-Aktionen auf ein Schlüsselbild bzw. eine Schaltfläche legen.
Wichtig: solange das angesprochene Ziel (hier die Instanz) im Film vorhanden ist, werden die Property-Eigenschaften vererbt, eine einmal eingestellte Transparenz einer Instanz bleibt erhalten, auch wenn später weitere Properties dazukommen (sehen Sie dazu untenstehendes Beispiel).
Wenn Sie unter Ziel nichts angeben, wird der gesamte Film entsprechend geändert (auch hierzu nachfolgendes Beispiel).
Wichtig: auch diese Eigenschaft wird weiterverändert. Wollen Sie sie wieder rückgängig machen, müssen Sie dies entsprechend wiederum mit set Property tun.
Experimentieren Sie mit den im Pulldownmenu vorhandenen Eigenschaften:
Hierzu finden Sie das einfache Flash-Beispiel Properties mit weiteren Erläuterungen zum Vorgehen
Beispiel: Formen und Filmsequenzen durch User bewegen lassen.
Nachfolgend ein sehr einfaches Beispiel als Anregung (z.B. können Sie einen Dinosaurier aus Einzelteilen zusammenfügen lassen).
Das Filmchen besteht aus nur einem Schlüsselbild und zwei Ebenen. Auf einer Ebene sitzen die Schaltflächen (blau ziehen bzw. rot ziehen), auf der anderen die geometrischen Formen.
Die geometrischen Formen sind zwar nur einfache Bilchen, aber im Falle der blauen und roten Form dennoch als Filmsequenzsymbole abgespeichert und entsprechende Instanzen auf die Bühne gezogen. Die Instanznamen heißen blau bzw. rot.
Hier die Skripte für die Schaltflächen:
on (release) {
startDrag (blau, true);
}
bzw.
on (release) {
startDrag (rot, true);
}
true bedeutet, dass der Mauszeiger auf dem Objekt zentriert wird.
Zusätzlich benötigen wir noch ein weiteres Skript. Damit belege ich die Instanz blau des entsprechenden Filmsymbols.
onClipEvent (mouseUp) {
stopDrag ();
}
Dieses Skript genügt einmal, da es jeglichen Drag stoppt, egal welches Objekt man gerade schleppt.
Am besten sollten noch Rückmeldungen kommen, wenn man alles korrekt gelöst hat. Dies erfordert allerdings etwas komplexeres Skripting. Probieren Sie es doch mal selbst aus. In der einfachsten Form machen Sie nochmals ne Schaltfläche, mit der Sie ein anderes Schlüsselbild mit der korrekten Lösung aufrufen. Dann müssen Sie Schlüsselbild 1 allerdings mit einem Stopper belegen.
Eleganter ist es, automatisch testen zu lassen, ob die x bzw. y-Koordinaten zwischen Userlösung und gewünschter Lösung übereinstimmen. Bei Gelegenheit liefere ich Ihnen eine Lösung nach.
<< Flash-Szenen, Grafik- und Filmsymbole
<< Modul 8.6: JavaApplets