Erzeugen von Filmen mit Macromedia Flash

Interaktive, dynamische Animationen
für HTML-Seiten mit
Macromedia Flash und Macromedia Generator
von Tanja Schniederberend
im Rahmen des Seminars
Film und Animation
Unter der Leitung von Prof. Dr. Vornberger
Universität Osnabrück
Gehalten am
05.11.1999
Inhaltsverzeichnis
1. Erzeugen von Filmen mit Macromedia Flash
2
1.1
Was ist Flash?
2
1.2
Importieren von Grafiken in Flash
2
1.3
Erzeugen einer Schaltfläche mit Macromedia Flash
3
1.4
Erstellung eines Films mit Bewegung und Formänderung
7
1.5
Einbinden von SWF-Files
8
Erzeugen von Filmen mit Hilfe des Macromedia Generators
9
2.1
Was ist der Generator?
9
2.2
Einsatzbereiche von Variablen
9
2.3
Wo werden den Variablen die Werte zugewiesen?
9
2.4
Was macht der Offline Generator?
10
2.5
Benutzung des Offline Generators
10
2.6
Erzeugen von Diagrammen aus externen Datenquellen
10
2.7
Was macht der Online Generator?
13
2.8
Wie benutzt man den Online Generator?
13
2.9
Erstellung eines Films mit Variablenübergabe
13
2.10 Beispiel einer dynamischen Datenbankanbindung
3
2
Fazit
14
16
3.1
Erkenntnisse aus der Arbeit mit Macromedia Flash
16
3.2
Erkenntnisse aus der Arbeit mit dem Macromedia Generator
16
3.3
Informationsmaterial
16
Anmerkung:
Um die Beispiele mit der deutschen als auch der englischen Version möglichst einfach nachvollziehen
zu können, steht nach der jeweiligen Angabe des Flash-Befehls in deutsch der dazugehörige englische
Befehl in Klammern dahinter.
1
1. Erzeugen von Filmen mit Macromedia Flash
1.1 Was ist Flash?
Flash Studio ist ein Editor zum Erzeugen von Vektorgrafiken, Animationen mit
Soundeffekten und interaktiven Elementen.
Das Shockwave Flash Format (SWF) wird oft einfach mit Flash bezeichnet. In diesem Format
werden Vektorgrafiken und ihre relativen Änderungen gespeichert. Durch einmaliges Speichern gleicher Symbole (in Flash Bibliothekelemente), gleicher Formen und die Wiederbenutzung von Elementen mit anderen Eigenschaften (z.B.: Farbe, Größe, Position, ...) ist dieses
Format äußerst platzsparend.
Aus diesem Grund ist das SWF-Format besonders interessant für Web-Anwendungen.
Einfach zu erzeugen ist ein solches File in Flash Studio, jedoch können die hiermit erzeugten
Filme auch in anderen Formaten gespeichert und weiter genutzt werden.
Zur Verfügung stehen z.B. AVI-Filme und animierte GIFs, also eine Folge von Pixelgrafiken,
bei denen jedoch jede mögliche Form der Interaktivität verloren geht. Ebenso wird diese Information auch beim Speichern von Sequenzen, z.B. in PNG, EMF, also dem von Einzelbildern, oder einzelner Pixelgrafiken wie GIFs, BMPs oder JPGs verworfen.
Trotz allem ist dies eine wichtige Hilfe, um ohne Mehraufwand auch Ersatzdarstellungen für
SWF-Filme zu generieren.
1.2 Importieren von Grafiken in Flash
Beim Start von Flash 3 Studio wird standardmäßig ein leerer Film geöffnet. Das so gestartete
Programm hat damit folgendes Erscheinungsbild, siehe Abb.1.2.0.
Abbildung 1.2.0 :
Leere Oberfläche von
Flash 3
Die weiße Fläche ist die zu bearbeitende Filmebene. Auf ihr werden die Elemente (grafische
Objekte) gezeichnet und angeordnet. Zum Verwenden schon existierender Grafiken können
auch vorhandene importiert und dann weiter bearbeitet werden.
2
Als Beispiel soll nun der Import eines jpeg-Files beschrieben werden. Dazu wird mit Datei
→ Import (File → Import) ein Auswahlmenü geöffnet, in dem das zu importierende
Bild ausgewählt werden kann, welches dann automatisch auf der Filmebene erscheint.
Da es sich jedoch um eine Pixelgrafik handelt, kann das Bild so in Flash nicht weiter bearbeitet werden. Dazu kann man es in eine Vektorgrafik konvertieren, indem man mit
Modifizieren → Bitmap nachzeichnen... (Modify → Trace Bitmap...) ein
Menü öffnet, in dem die Genauigkeit und damit auch die Größe der entstandenen Vektorgrafik bestimmt werden kann.
Der Wert im Feld „Farbschwelle” (Color Threshold) bezeichnet die maximale Differenz der RGB-Farbwerte, die dazu führt, daß benachbarte Pixel als gleichfarbig erkannt
werden. Das heißt, je kleiner der Wert, desto genauer werden Farbunterschiede wahrgenommen. Dies führt jedoch auch zu einer wesentlich größeren Datei.
Die Anzahl der umgebenden Pixel, die zur Bestimmung der Farbe eines hinzugezogen werden, wird in dem Feld „Kleinste Fläche” (Minimum Area) eingetragen. Um so kleiner
dieser Wert, um so weniger verwischen die Farben ineinander.
Die sich so ergebenen Farben können noch durch die „Kurvenanpassung” (Curve Fit),
also die Angabe des zu benutzenden Übergangs zwischen zwei Flächen, geändert werden, wie
auch durch die Auswahl der „Kantenschwelle” (Corner Threshold). Diese bestimmt
ob Flächenkanten geglättet oder Kanten beibehalten werden sollen.
Für eine möglichst ähnlich erscheinende Vektorgrafik zum Ursprungsbild eignen sich die
folgenden Werte:
80
Farbschwelle:
1 Pixel
Kleinste Fläche:
Pixel
Kurvenanpassung:
Viele Kanten
Kantenschwelle:
1.3 Erzeugen einer Schaltfläche mit Macromedia Flash
Die soeben eingefügte Grafik läßt sich auch als Schaltfläche nutzen. Dazu muß ein
Schaltflächen-Symbol daraus gemacht werden. Dies geschieht mit Einfügen → Symbol
erstellen... (Insert → Convert to Symbol...), wenn die gesamte Grafik selektiert ist.
Das Symbol wird mit einem Namen angesprochen, der nun einzugeben ist und in der Bibliothek des aktuellen Filmes abgelegt wird. Dadurch kann das Symbol mehrfach genutzt werden,
obwohl es nur einmal gespeichert wird. Zur Auswahl stehen drei verschiedene Typen von
Symbolen:
1. Grafik (Graphic)
Einfache Grafik, die mehrfach verwendet werden soll
2. Schaltfläche (Button)
Symbol mit Interaktivität, zu benutzen wie ein Knopf
3. Filmsequenz (Movie Clip) Ein Teil oder ein ganzer erstellter Film
Die nun mit einem Namen entstandene Schaltfläche läßt sich wie alle anderen Symbole eines
Filmes in der Bibliotheksliste (Abb. 1.3.1) wiederfinden. Diese kann man sich mit Fenster
→ Bibliothek (Window → Library) anzeigen lassen.
3
Abbildung 1.3.1:
Bibliotheksliste
Um den Button weiter zu bearbeiten, kann man ihn in der Bibliothek
doppelklicken oder oben rechts in der Bibliotheksliste auf den
Optionenpfeil klicken und dann bearbeiten (edit) auswählen.
Damit hat sich die über der Arbeitsfläche befindliche Leiste verändert,
vergleiche Abb.1.4.0.
Abbildung 1.3.2:
Schaltflächenleiste
Die aktuelle Arbeitsfläche stellt
Erscheinungsbild der Schaltfläche
Zustände:
1. Normal (Up)
2. Darüber (Over)
nun nicht mehr den ganzen Film, sondern nur das
dar. Für die existieren vier auf der Leiste erkennbare
Aussehen der Schaltfläche im inaktiven Zustand
Zustand der Schaltfläche, wenn sich der Mauszeiger darüber
befindet
3. Gedrückt (Down)
Zustand bei gedrückter Maustaste
4. Aktiv (Hit)
Der hier bemalte Bereich ist der mauszeigersensitive Bereich,
das hinterlegte Bild ist nie zu sehen.
Automatisch wurde die verwendete Grafik im Zustand „Normal“ eingefügt. Das ist an dem
gefüllten blauen Punkt zu erkennen, der in der Leiste (Abb.1.3.2) unter dem Zustand eingefügt wurde.
Um für die weiteren Zustände auch Bilder einzufügen, klickt man mit der rechten Maustaste
auf das Feld unter dem jeweiligen Zustand. In dem erscheinenden Menü wählt man
„Schlüsselbild einfügen“ (Insert Keyframe), um das Bild aus dem vorhergegangenen Zustand zu übernehmen. Auch hier erscheint nun der blaue Punkt als Anzeige, daß für
diesen Zustand nun eine Grafik vorliegt. Möchte man dies nicht, z.B. für den aktiven Bereich,
so wählt man „Leeres Schlüsselbild einfügen“ (Insert Blank Keyframe). In
diesem Fall wird ein leerer blauer Kreis eingefügt, da keine Darstellung für den Zustand vorhanden ist, der Zustand aber existiert.
Die Bilder verändert man, indem man den jeweiligen Zustand markiert und mit
den Zeichenwerkzeugen (Abb.1.3.3), die sich am linken Rand befinden, bearbeitet. Die dabei für jedes Zeichenwerkzeug verschiedenen Eigenschaften lassen sich in dem unteren Teil der Leiste ändern. In Abb.1.3.3 werden die Eigenschaften des Pfeilwerkzeugs angezeigt, da dieses selektiert ist.
Abbildung 1.3.3:
Zeichenwerkzeuge
Für die Zustände „Darüber“ und „Gedrückt“ kann man sich ein beliebiges
Erscheinungsbild einfallen lassen. Für den Zustand aktiv sollte man allerdings
beachten, daß nur der ausgemalte Teil maussensitiv ist. Um z.B. nur einen Teil
der Grafik als Knopf zu nutzen, muß man für diesen eine ausgemalte Fläche an
der entsprechenden Stelle positionieren.
4
Ist die Schaltfläche fertiggestellt, so gelangt man über Bearbeiten → Film bearbeiten
(Edit → Edit Movie) wieder zurück zur Arbeitsfläche des Filmes. Um sich das Ergebnis
anzusehen, läßt man den Film abspielen: Steuerung → Film testen (Control →
Test Movie).
Damit beim Drücken des Buttons auch eine Aktion ausgeführt wird, muß diese noch dem
Film hinzugefügt werden. Dazu klickt man rechts auf die Instanz des Buttons um das Menü
zu öffnen und wählt „Eigenschaften“ (Properties). In dem aufgehenden Fenster der
Instanzeigenschaften (Instance Properties) (Abb.1.3.4) lassen sich der jeweiligen Instanz
Attribute hinzufügen, wie Farbeffekte oder auch, wie in diesem Beispiel, Aktionen.
Abbildung
1.3.4:
Fenster der
Instanzeigenschaften
Nach dem Wechsel auf die Karteikarte Aktionen (Actions), die nur für Schaltflächen
möglich sind, läßt sich durch drücken des ✚ -Knopfes das Auswahlmenü von möglichen
Aktionen (Abb.1.3.5) öffnen.
Abbildung 1.3.5:
Aktionsmöglichkeiten für
Schaltflächen
Um die erstellte Schaltfläche auf einen Mausklick reagieren zu
lassen, benutzt man die Aktion „On MouseEvent“, die dann
automatisch in entsprechender Syntax in das weiße Fenster eingefügt wird. (Vergleiche Abb. 1.3.6)
Um wie üblich Knöpfe erst beim Loslassen funktionieren zu lassen, markiert man als Ereignis (Event) „Release“. An dieser
Stelle können auch mehrere unterschiedliche Situationen ausgewählt werden.
Damit ist der Moment, in dem das Ereignis, z.B. der Aufruf einer anderen Webseite, geschehen soll, festgelegt worden. Das Ereignis bestimmt man mittels einer Aktion, z.B. „Get
URL“. Die URL wird dann in dem rechten Fenster eingetragen.
5
Abbildung 1.3.6:
Fertige Aktion zum Aufruf einer
URL.
Aktionen können beliebig
geschachtelt und damit dem
jeweiligen Zweck angepaßt
werden.
Um die Funktion der Schaltfläche noch vor dem Einbinden in eine HTML-Seite in Flash zu testen, kann man sich im Ausgabefenster (Abb. 1.3.7),
das erhält man unter Fenster → Ausgabe (Window → Output), die Aktionen beim
Knopfdruck anzeigen lassen. Dazu läßt man den Film wieder abspielen: Steuerung →
Film testen (Control → Test Movie) und drückt die erstellte Schaltfläche. Hierbei
sollte dann eine schriftliche Ausgabe des festgelegten Ereignisses in dem Fenster erscheinen,
wenn es nicht im Flash Player dargestellt werden kann.
Abbildung 1.3.7:
Ausgabefenster
nach einem
Knopfdruck
Funktioniert alles wie gewünscht, ist es an der Zeit den Film im passenden Format für eine
Webseite zu exportieren. Dazu wählt man Datei → Film exportieren... (File →
Export Movie) und speichert ihn als Shockwave Flash (*.swf) File. An dieser Stelle ist es
auch möglich Ersatzdarstellungen für den Film abzuspeichern, siehe auch Kapitel 1.1.
Nach der Auswahl, in welchem Format der Film gespeichert werden soll, öffnet sich das entsprechende Fenster (Abb. 1.3.8) mit den zu treffenden Einstellungen über Größe und Qualität
des Filmes, Bildes oder der Sequenz.
Abbildung 1.3.8:
Exporteinstellungen für ein SWF-File
Mit der Einstellung „Ladefolge“
(Load Order) wird die Reihenfolge
der Daten des ersten Bildes, für den
Fall, daß das Bild nicht sofort vollständig geladen werden kann, bestimmt.
Informationen über die Größe des
Films werden beim Markieren von
„Bericht
erstellen“
(Generate size report) in einer
Textdatei abgelegt. In ihr kann man
genau erkennen welche Szene und welches Symbol wieviel Platz verbraucht.
6
„Vor Import schützen“ (Protect from import) ist auszuwählen, wenn das
erzeugte File nicht von anderen weiterbearbeitet werden soll.
Der Wert für „JPEG Quality“ ist nur für Filme relevant in denen Pixelgrafiken genutzt
werden. Je genauer die zu speichernden Pixelgrafiken sein sollen, desto höher muß dieser
Wert gewählt werden, was sich natürlich wieder in der Größe der Datei widerspiegelt. Die
weiteren Einstellungen behandeln die Komprimierung von Audiodaten.
Für anfängliche Versuche können die Voreinstellungen an dieser Stelle einfach übernommen
werden.
1.4 Erstellung eines Films mit Bewegung und Formänderung
Die Zeitleiste (Abb.1.4.0) stellt den zeitlichen Ablauf der Frames des Filmes dar. Die Anzahl
der Frames ist auf der oberen Skala abzulesen. Die Reihen darunter geben die jeweiligen
Ebenen an, in denen sich die Grafiken befinden. Die Bilder der obersten Ebene werden dabei
über die der zweiten gelegt und die wiederum verdecken die der dritten Ebene usw. Begrenzt
wird die Anzahl der Frames, welche die Länge des Films bestimmen, durch das am weitesten
hinten liegende in irgendeiner Ebene der Zeitleiste.
Abbildung 1.4.0: Zeitleiste eines kleinen fertigen Films
Ein Bild wird eingefügt über „Schlüsselbild einfügen“ (Insert Keyframe) oder
„Leeres Schlüsselbild einfügen“ (Insert Blank Keyframe), vergleiche
Kapitel 1.3.
Fügt man nun ein Symbol in das erste Schlüsselbild einer Ebene ein und dann an späterer
Stelle, z.B. an der 20. Stelle, das gleiche nur mit einer veränderten Position ein, so kann man
diesen Positionswechsel durch eine fließende Bewegung darstellen. Dazu öffnet man das Fenster der „Bildeigenschaften“ (Frame Properties), indem man zwischen den beiden
eingefügten Bildern mit rechter Maustaste klickt und „Eigenschaften...“
(Properties...) auswählt. Auf der Karteikarte „Tweening“ läßt sich im Auswahlmenü
„Bewegung“ (Motion) angeben, mit dazu ergänzenden Eigenschaften, wie Drehungen des
Symbols während der Positionsveränderung oder auch zeitliche Verzögerung. Ist der Dialog
wieder geschlossen, so berechnet Flash direkt die nötigen Bilder für die Zwischenschritte der
Schlüsselbilder. Die so erzeugte Bewegung wird in der Zeitleiste der jeweiligen Ebene als
roter Pfeil zwischen den nun roten Punkten der Schlüsselbilder dargestellt, siehe auch
Abb.1.4.0.
Fast genauso läßt sich auch eine Formänderung erreichen. Dabei muß man allerdings beachten, daß keine Symbole verformt werden können. So erstellt man also zwei voneinander
unabhängige Grafiken zu verschiedenen Zeitpunkten, die sich in nichts ähnlich sein müssen,
auch nicht in der Farbe. Unter „Tweening“ wählt man nun „Form“ (Shape) aus. In diesem Fall wird der Übergang in der Zeitleiste als grüner Pfeil symbolisiert.
Zum Testen der Bewegung auf der Arbeitsfläche läßt sich einfach die Return-Taste drücken,
ansonsten läßt sich der Film in einem Flash Player betrachten, dazu wählt man „Steuerung
→ Film testen“ (Control → Test Movie), vergleiche Kapitel 1.3.
7
1.5 Einbinden von SWF-Files
Ein SWF-File kann direkt über einen Link aufgerufen werden.
Um den erstellten Film aber in einer HTML-Seite zu präsentieren, wird er mittels des
OBJECT-Tags eingebunden. Da dieses nicht von allen Browsern erkannt wird, z.B. älteren
Versionen von Netscape, hilft der in dem OBJECT-Tag eingefügte EMBED-Tag, um in den
verbreitetsten Browsern die Darstellung zu garantieren.
Prinzipiell unterscheiden sich die beiden Tags nur in ihrem Aufbau. Datenquelle, Größe und
Farbe des einzubindenden Files können in beiden Tags angegeben werden.
Im OBJECT-Tag ist die „classid“ anzugeben, die die zu verwendende ActiveX-Steuerung
identifiziert. Dieser Wert bleibt für jeden Flash Film gleich. Außerdem wird die Adresse der
ActiveX-Steuerung für den Fall des Download dem Parameter „codebase“ zugewiesen,
dem nach belieben auch die Angabe der Versionsnummer angehängt werden kann. Alle
weiteren Angaben erfolgen über weitere PARAM-Tags, die bestimmten Parametern Werte
zuweisen, z.B. wird „movie“ die Lage des SWF-Files mitgegeben.
Das EMBED-Tag beinhaltet alle Parameterzuweisungen in sich. „Type“ wird das zu benutzende PlugIn zugewiesen und „pluginspage“ der Link zum Download des PlugIns. Allen
weiteren Parametern können direkt Werte zugewiesen werden, z.B. „bgcolor“ die
Hintergrundfarbe des Films.
Beispiel für das Verknüpfen solcher Tags:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=3,0,
0,0" WIDTH=100 HEIGHT=100>
<PARAM NAME=movie VALUE="../Genvorlagen/File.swf">
<PARAM NAME=quality VALUE=autohigh>
<PARAM NAME=scale VALUE=noborder>
<PARAM NAME=bgcolor VALUE=#FFFFCC>
<EMBED
SRC="../Genvorlagen/File.swf"
WIDTH=100 HEIGHT=100
QUALITY=best TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash"
BGCOLOR=#FFFFCC>
</EMBED>
<NOEMBED><IMG SRC="../Genvorlagen/Ersatz.gif" WIDTH=100 HEIGHT=100
BORDER=0></NOEMBED>
</OBJECT>
Mit dem Tag „NOEMBED“ kann für den Fall, daß der Player nicht vorhanden oder
deaktiviert ist eine Ersatzdarstellung angegeben werden. Dafür eignen sich die zuvor
erzeugten Ersatzdarstellungen, z.B. wie hier eine GIF-Datei.
8
2
Erzeugen von Filmen mit Hilfe des Macromedia Generators
2.1 Was ist der Generator?
Der Generator besteht aus drei verschiedenen Komponenten:
1. Erweiterungen zum Flash-Editor Ermöglicht das Erstellen von Generatordateien
2. Dem Offline Generator
Zum Generieren von SWF-Files
3. Dem Server (Online Generator) Zur dynamischen Generierung von SWF-Files
In Flash können mit der Editorerweiterung Generatorvorlagen (SWT-Files) erzeugt werden.
Diese unterscheiden sich nur in soweit von den üblichen SWF-Files, daß sie Variablen
enthalten können. Die in den SWT-Files enthaltenen Variablen können vom Online oder
Offline Generator ersetzt und so in gängige Formate umgewandelt werden. Diese hängen
davon ab, welchen Generator man verwendet, siehe Kapitel 2.4 und 2.7.
2.2 Einsatzbereiche von Variablen
Variablen können an verschieden Stellen genutzt werden, indem mit ihnen Textersetzungen
vorgenommen oder auch Aktionen modifizieren werden. So könnte in dem Beispiel aus
Kapitel 1.3 für die URL eine Variable eingesetzt und dann erst bei der Generierung des SWFFiles ein Wert der Variablen zugewiesen werden. Damit ist der Knopf mehrfach benutzbar.
Auch können Variablen dazu dienen die zu benutzenden Symbole eines Filmes zu bestimmen,
indem sie statt dem Symbolnamen verwendet werden. So ist es möglich auch Symbole aus
anderen Bibliotheken zu verwenden, ohne sie von vornherein im Film abzulegen.
Weiterhin können Variablen dazu genutzt werden um Symbol- oder Filmeigenschaften wie
Farbe, Größe oder Transparenz zu ändern. Dazu kommt bei Filmen die Möglichkeit auch die
Abspielrate, also die Schnelligkeit in der die einzelnen Frames abgespielt werden, zu beeinflussen.
Als letztes unterstützt der Generator noch die Erzeugung von Diagrammen, die über
Variablen ihre Werte zugewiesen bekommen. Dazu folgt ein Beispiel in Kapitel 2.6.
2.3 Wo werden den Variablen die Werte zugewiesen?
Das Zuweisen eines Wertes an eine Variable kann an verschiedenen Stellen geschehen. Als
erstes werden im Film fest angegebene Dateien nach den Werten der Variablen durchsucht.
Bei verschachtelten Filmen, also Filme, in die weitere Filme eingefügt wurden, gilt, daß
immer zuerst im eigenen Film nach einer Variablendefinition gesucht wird, bevor dann die
Datenquellen der darüber liegenden Filme betrachtet werden.
Nicht im Film eingebettete Variablenzuweisungen können bei der Generierung dem
Generator mitgegeben werden. Das ist jedoch davon abhängig ob man den Offline- oder
Online-Generator wählt. Dazu mehr in Kapitel 2.5 und 2.8.
9
2.4 Was macht der Offline Generator?
Der Offline Generator erzeugt aus SWT-Files, also den Dateien, die noch Variablen enthalten,
verschiedene Formate. Dabei ersetzt er die Variablen durch die ihnen zugewiesenen Werte
und damit entspricht die Datei nun dem SWF-Format. In erster Linie wird dieses nun auch als
Shockwave Flash (SWF) File gespeichert, aber auch Grafiken, wie GIF, PNG und JPEG
lassen sich daraus generieren. Es ist auch möglich Textdateien, die den ganzen im Film
vorkommenden Text enthalten, zu erzeugen. Dies erleichtert besonders die Suche nach
veralteten Texten, die aktualisiert werden müssen. Weiterhin besteht die Möglichkeit
Projektoren, das sind ausführbare playerunabhängige Programme, für Windows und
Macintosh damit zu erstellen.
2.5 Benutzung des Offline Generators
Der Offline Generator ist ein eigenständiges Programm und wird von der Kommandozeile aus
gestartet.
Ein Aufruf hat dabei folgendes Format:
generate -option filename.xxx [-param name value] [-debug <1|2|3>] [-log file.txt]
filename.swt
option :
Gibt das zu generierende Format (z.B.: swf, gif, jpg, txt, ...) an.
filename.xxx : Name der zu erstellenden Datei mit zum Format passender Endung
param :
Weist einer Variablen name im SWT-File den Wert value zu.
Diese Zuweisung findet erst nach dem Durchsuchen der Datenquellen statt.
debug <1|2|3> : Dient der Fehlerausgabe, die Werte stehen für Errors | &Warnings |
&Datenquellen
log :
Erstellt die Fehlerausgabe in der angegebenen Datei.
filename.swt : Gibt die zu nutzende Generatorvorlage an.
Der Offline Generator eignet sich besonders bei regelmäßigen Änderungen der
Variablenwerte, die nicht benutzerabhängig sind. So lassen sich z.B. aktuelle Preise bei jeder
Änderung neu generieren, aber nicht jedes Mal, wenn ein Benutzer diese abfragt, muß die
Datei neu generiert werden. Um eine solche Aktualisierung auch automatisch laufen zu lassen
ist es möglich den Aufruf des Offline Generators aus einem Perl Script heraus erfolgen zu
lassen oder für die Online-Nutzung aus einem CGI Script.
2.6 Erzeugen von Diagrammen aus externen Datenquellen
Dieses Beispiel dient besonders gut zur Demonstration des Offline Generators, da die Werte,
die einem Diagramm zugrunde liegen, sich häufig in einem gewissen Rhythmus ändern und
nur dann ein neues File erzeugt werden muß und somit nicht bei jedem Aufruf der Datei.
Zu Beginn ist zu beachten, was für ein Diagramm erstellt werden soll, denn je nach Typ
unterscheidet sich der Aufbau der Datendatei. Dazu stehen vier verschiedene Typen zur
Verfügung:
10
1. Das Punktdiagramm
Beispieldatei für Punktdiagrammdaten:
x, y, symbol
Abbildung 2.6.0:
Punktdiagramm
In diesem Diagramm (Scatter)
0, 0, Dot1
(Abb. 2.6.0) werden die Punkte einer
1, 1, Dot1
2, 4, Dot1
Textdatei gezeichnet.
...
Dazu wird in der ersten Zeile „x, y,
0, 0, Dot2
symbol“ angegeben, damit klar ist,
1, 1, Dot2
um welche Koordinate es sich handelt
...
und welches Symbol zur Darstellung
an diesen Punkt gesetzt werden soll.
Als Symbol ist dabei der Name eines beliebigen, in der
Filmbibliothek enthaltenen oder importierten Symbols
anzugeben.
2. Liniendiagramm oder Flächendiagramm:
Beispieldatei für Linienoder Flächendiagramme:
Abbildung 2.6.1:
Liniendiagramm
Abbildung 2.6.2:
Flächendiagramm
value
1
4
9
16
25
36
...
Linien- (Line) (Abb. 2.6.1) und Flächendiagramme (Area) (Abb. 2.6.2) lassen sich aus der
gleichen Datenquelle generieren, da sie dem gleichen Format unterliegen. Schlüsselwort in
der ersten Zeile ist „value“, gefolgt von beliebigen Zeilen mit einem einzigen Wert, der dem
y-Wert entspricht. Die x-Achse wird nach der Anzahl der y-Werte aufgeteilt und dem
entsprechend werden diese dann eingetragen und mit einer Linie oder gefüllten Fläche
verbunden.
3. Histogramm:
Beispieldatei einer Histogrammvorlage:
Abbildung 2.6.3:
Histogramm
value,color
0,
white
10,
#007D00
0,
white
30,
#1AFF1A
0,
white
50,
#4DFBF2
30,
#1AFF1A
30,
#1AFF1A
0,
white
...
Für das Histogramm (Bar) (Abb.2.6.3)
gelten im wesentlichen die gleichen
Grundregeln für die Daten, wie für ein Linien- oder
Flächendiagramm. Hier kommen aber zu den angegebenen yWerten noch die Farben hinzu, mit denen der jeweilige Balken gefüllt wird. Diese können
sowohl mit Namen als auch mit Hexadezimalwert angegeben werden.
11
Um ein solches Diagramm nun in ein SWT-File einzubauen wählt man in Flash Einfügen
→ Vorlagenbefehl (Insert → Template Command). In dem so geöffneten Fenster,
siehe Abb. 2.6.4, wählt man in dem Auswahlmenü „Befehl“ (Command) „Chart“. Nun
kann man durch klicken auf „Chart Type“ den Diagrammtyp auswählen und unter „Data
Source“ die Datendatei angeben.
Abbildung 2.6.4:
Eingabefenster für
Generatorvorlagen, hier für
Diagramme
Hier lassen sich auch die
Skalierung der x- und yAchse vornehmen, indem
man das Minimum und
Maximum der beiden angibt. Ist Border auf „true“ gesetzt, so wird das Diagramm eingerahmt und zwar wie die Linien oder Flächen in der bei „Color“ gesetzten Farbe. Balken im
Histogramm werden natürlich in der Farbe dargestellt, die in der Datei angegeben ist, genauso
wie die Symbole im Punktdiagramm auch ihre Farbe beibehalten.
Sind die Einstellungen vorgenommen und der OK-Knopf gedrückt, so erscheint auf der
Filmebene ein graues Quadrat als Ersatzdarstellung für das später generierte Diagramm.
Dieses läßt sich skalieren und im Film wie gewünscht einbetten.
Die Beschriftung der Diagramme ist zumeist abhängig von dem Datenfile und damit wäre sie
in dem Film falsch plaziert. Um auch diese in einer externen Datei zu verwalten kann man
Variablen einfügen. Dazu benutzt man das Textwerkzeug (Text Tool) am linken Rand bei den
Zeichenwerkzeugen (Abb. 1.3.3).
An der vorgesehenen Stelle plaziert man damit ein Textfeld, in dem dann der Variablenname
eingefügt wird. Damit der Name auch als Variable interpretiert wird setzt man ihn in geschwungene Klammern:
{Variablenname}
Die Angabe woher der Wert der Variablen bezogen werden soll wird im ersten
Schlüsselbild (Keyframe) der Zeitleiste (Abb.1.4.0) gemacht. Dort klickt man mit
rechter Maustaste um im Menü „Eigenschaften...“ (Properties...) auszuwählen.
In dem Fenster der Bildeigenschaften (Frame Properties) wählt man die Karte
„Vorlage“ (Template). Hier lassen sich nun verschiedene Befehle auswählen, die vom
Generator später ausgewertet werden müssen. Zur einfachen Wert bzw. Textzuweisung einer
Variablen dient der Befehl „Set Environment“, der nur die Datenquelle als Textdatei zugewiesen bekommt.
Name,
Value
Diese muß in folgendem Format aufgebaut sein:
titel,
"f(x)=x^2"
Die erste Zeile beinhaltet die Schlüsselwörter „Name,
legende,"d(x)=x"
Value“. Alle weiteren enthalten den jeweiligen Variablen...
namen und mit Komma getrennt und in Anführungsstrichen
den Wert, den die Variable zugewiesen bekommen soll.
Beispiel einer Datenquelle für Variablenzuweisungen
12
Die korrekte Benutzung der Variablen kann mit Steuerung → Film testen (Control
→ Test Movie) in der Vorschau getestet werden. Ist der Film nun fertiggestellt, so speichert man ihn mit Datei → Film exportieren... (File → Export Movie) als
Generator-Vorlage (SWT-File) ab.
Um aus dem SWT-File z.B. eine ausführbare EXE-Datei für Windows zu erzeugen startet
man mit folgendem Aufruf den Offline Generator:
generate –xwin32 Diagramme.exe -debug 3 Diagramme.swt
2.7 Was macht der Online Generator?
Der Online Generator dient ebenfalls zur Erstellung von Shockwave Flash (SWF)-Dateien
oder Grafiken wie GIF, PNG oder JPEG aus den SWT-Files. Er kann jedoch keine
Projektoren erzeugen. Er erzeugt im Gegensatz zum Offline Generator mit jedem Aufruf der
angeforderten Datei das jeweilige Format aus der Vorlage.
2.8 Wie benutzt man den Online Generator?
Sobald eine Seite, die eine SWT-Datei enthält, beim Webserver angefordert wird, schickt
dieser die Datei mit der Variablenzuweisung an den Online Generator. In dem Moment erstellt der Generator aus der Datei den passenden Dateityp und liefert diese an Stelle des SWTFiles an den Webserver zurück, welcher sich nun um das Zurücksenden an den Anfragesteller
kümmert. Die SWT-Dateien werden dabei direkt über ihren Pfad angesprochen oder in dem
jeweiligen HTML-Tag in gleicher Form eingebunden, vergleiche Kapitel 1.5. Dazu gibt es
verschiedene Möglichkeiten:
beispiel.xxt
An der Stelle von xxt wird die jeweilige Endung des Files angegeben, die schon das zu generierende Format angibt. Als solches muß die ursprüngliche SWT-Datei natürlich vorher abgespeichert werden. So wird eine GIF aus einer GIT-Datei erzeugt oder ein JPG aus einer JPTDatei. Wird die Endung einfach als SWT angegeben, so wird automatisch ein SWF-File
erzeugt.
beispiel.swt?type=xxx
Hierbei steht xxx für den zu generierenden Dateityp, z.B. GIF. Dabei braucht nur das SWTFile abgespeichert werden.
Um auch dem Online Generator Variablen mitzugeben werden diese einfach mit ihrem Wert
an die URL angehäng:
beispiel.xxt?name1=value1&name2=value2
In diesem Beispiel werden den Variablen name1 und name2 die Werte value1 bzw.value2
zugewiesen.
Beispiel für den Aufruf zur Erzeugung eines SWF-Files mit Übergabe einer Variablen:
../Genvorlagen/Pfeil.swt?next=index.htm
2.9 Erstellung eines Films mit Variablenübergabe
Zum Verarbeiten von Daten, die der Benutzer eingibt, ist es nötig Variablen zu definieren. So
kann zum Beispiel der Benutzername mit in einen Film eingebunden werden. Dazu schafft
man sich mit dem Textwerkzeug eine Variable (Kapitel 2.6) und gestaltet mit ihr den
entsprechenden Film. Ist das SWT-File fertiggestellt, so muß man sich für die Übergabe eines
Wertes an die Variable ein entsprechendes HTML-Dokument erzeugen.
13
Für das Eingabefeld benutzt man ein Input-Tag vom Typ Text und übermittelt dies mit der
Get-Methode an den Film. Bei dieser Methode wird die Variablenzuweisung mit
„?name=wert“ wie schon in Kapitel 2.8 beschrieben an den Namen des SWT-Files angehängt
und kann somit vom Generator ausgewertet werden.
Das kann wie folgt geschehen:
<FORM ACTION="../Genvorlagen/Name.swt" METHOD="GET">
<br>
<p>Bitte geben Sie Ihren Namen ein:<br>
<INPUT TYPE="TEXT" NAME="name"></p>
<br>
<p><INPUT TYPE="SUBMIT" VALUE="Film starten">
<INPUT TYPE="RESET"></p>
Die in diesem Beispiel mit dem Namen „name“ übermittelte Variable wird nun wie gewohnt
an den Film angehängt.
2.10 Beispiel einer dynamischen Datenbankanbindung
In Flash besteht auch die Möglichkeit Daten aus einer Datenbank einzubinden.
In diesem Fall werden die Daten dynamisch zur Laufzeit aus einer ODBC-fähigen Datenbank,
z.B. MS Access, bezogen und den Variablen zugewiesen.
Dazu stellt man Symbole zusammen, welche die Variablen enthalten. Die Variablennamen
müssen dabei gleich den Attributnamen der Tabelle sein, aus der sie die Werte erhalten sollen.
Die Variablen können zum Beispiel wie in Kapitel 2.6 einen Text vertreten, oder auch ein ein
Symbol. Dazu wählt man beim Bearbeiten eines Symbols Einfügen →
Vorlagenbefehl (Insert → Template Command) und wählt als Befehl „Insert
Symbol“. Auch hier kann statt dem richtigen Symbolnamen ein Variablenname angegeben
werden, die Syntax bleibt dabei die gleiche. Als Vertretung für das spätere Symbol erscheint
ein graues Quadrat auf der Bearbeitungsfläche, das anstelle der richtigen Grafik in den Film
eingefügt wird. Hierbei sollte man beachten, daß die später eingefügten Symbole im Film
enthalten sind oder aus einer anderen SWT-Datei importiert werden müssen. Das geschieht in
den Bildeigenschaften des ersten Schlüsselbildes, indem man auf der Karteikarte „Vorlage“
als Befehl „Import Flash Symbols“ auswählt und die SWT-Datei angibt, welche die
Symbole enthält.
Um die Variablenwerte nun aus einer Datenbank zu beziehen, wechselt man in die Eigenschaften des jeweiligen Symbols und auf die Vorlagenkarte. Da in einer Datenbank nun einer
Variablen meist mehrere Werte zugewiesen werden, muß man den Befehl „Replicate“ verwenden. Dieser sorgt dafür, daß die Werte der Reihe nach der Variablen zugewiesen und ausgewertet werden. Als Datenquelle gibt man im Feld „Data Source“ einen JDBC/ODBCTreiber an, der auf die gewünschte Datenbank zugreift. Dazu wird zunächst der Treibername
für die Datenbank angegeben gefolgt von der URL der Datenbank, die angesprochen werden
soll. Diese muß natürlich zuvor über eine ODBC Schnittstelle verfügen. Nun folgen die
„userid“ und das „password“, die für den Fall, daß diese nicht existieren, trotzdem leer
angehängt werden müssen. Als letztes folgt nun die SQL Anfrage, deren Leerstellen mit
„%20“ ausgefüllt werden müssen, da es sich um eine URL handelt, die keine Leerzeichen
enthalten darf.
14
Ein Beispiel einer solchen URL lautet somit:
fgjdbc:///?driver=sun.jdbc.odbc.JdbcOdbcDriver&url=jdbc:odbc:Produkt
e&userid=&password=&query=SELECT%20*%20FROM%20Produkte;
Ein so erzeugter Film wechselt somit zwischen verschiedenen Darstellungen, z.B. verschiedenen Produkten , wie in dem folgenden Beispiel, in dem sowohl Artikelname, Bestellnummer und Preis wie auch der Symbolname, der die Grafik bestimmt, aus einer Datenbank
bezogen werden:
15
3
Fazit
3.1 Erkenntnisse aus der Arbeit mit Macromedia Flash
Durch die „Lessons“, das sind Beispielfilme in denen der Umgang mit Flash erklärt und
getestet wird, ist ein spielerischer Einstieg in den Umgang mit Flash möglich.
Das verwenden schon vorhandener Grafiken, auch Pixelgrafiken, erleichtert durch die
+
einfache Konvertierung zu Vektorgrafiken die Arbeit.
Leicht zu animierende Objekte und einfaches Morphen lassen schnell verschiedene
+
Effekte erzeugen und ausprobieren. Allerdings läßt sich das Morphen so gut wie gar nicht
beeinflussen, weshalb nicht alle gewünschten Effekte sich so erreichen lassen.
− Leider besteht in Flash 3 bis auf die Möglichkeit von Schaltflächen keine weitere um in
Interaktivität mit dem Benutzer zu treten.
Der geringe Platzbedarf der SWF-Files macht sie gerade für die Verbreitung im Internet
+
sehr interessant.
+
3.2 Erkenntnisse aus der Arbeit mit dem Macromedia Generator
− Leider existiert nicht eine so einfache Einstiegsmöglichkeit für den Generator, was
zusätzlich auch durch die sehr knappe Dokumentation erschwert wird.
− Es läßt sich im Flash Developer Studio leider kein Überblick über alle vorkommenden
Variablen innerhalb des Films verschaffen, wodurch schnell die Überschaubarkeit verloren geht und um Variablennamen wiederzufinden, kann man viel Zeit benötigen.
− Variablen können nur zur Ersetzung benutzt werden und es kann keine konkrete Abarbeitung in Form von Auswertungen oder Schleifen erfolgen. Dies ist aber nun in Flash 4
berücksichtigt worden.
− Durch die Eingabe der SQL-Befehle direkt in die URL werden diese schnell unübersichtlich.
Von Vorteil ist die Möglichkeit die Daten aus externen Quellen zu beziehen, so daß Filme
+
häufiger wieder benutzt und somit wechselnden Daten einfach angepaßt werden können.
Auf diese Art ist auch das Einbinden von Benutzerinformationen in den Film möglich.
Dies ist in Flash 4 weiter ausgearbeitet worden.
3.3 Informationsmaterial
Weiteres Informationsmaterial und Testversionen findet man unter:
Macromedia HomePage
http://www.macromedia.com
Informationen zum SWF-Format
http://www.swift-tools.com
http://homepages.tig.com.au/~dkl/swf/ Seite für Flash-Entwickler
Ressourcen und FAQs
http://www.flashworker.de
Beispiele für mit Macromedia Flash erzeugte Animationen:
Mit Flash erstelltes Spiel
http://www.gigablast.com
Mit Flash erstelltes Adventure
http://www.pepworks.com
Links zu Websites mit Flashanimationen
http://www.eye4u.com
16