042

Im Original veränderbare Word-Dateien
Flash-Animation
Flash-Animationen sind Animationen, die ursprünglich mit dem Programm Adobe Flash (früher
Macromedia Flash) erzeugt wurden. Mit Flash lassen sich Vektorgrafiken, Bitmaps und Videofilme
erzeugen bzw. bearbeiten. Flash ist ein Werkzeug, mit dem Designer und Entwickler
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Präsentationen, Anwendungen und andere Inhalte, die eine Interaktion mit dem Benutzer gestatten,
erstellen können. Flash-Projekte können die unterschiedlichsten Objekte enthalten, von einfachen
Animationen und Video-Inhalten bis hin zu komplexen Präsentationen und Anwendungen.
Um Flash-Animationen anschauen zu können, bedarf es bestimmter Programme. Das weitaus am
häufigsten genutzte Programm ist der Adobe Flash Player. Der Adobe Flash Player ist kostenlos
und auf den meisten Computern bereits vorinstalliert.
Browser binden den Adobe Flash Player als Add-on ein, d. h., wenn man im Internet einen Film
www.park-koerner.de
Copyright www.park-koerner.de
anschaut,
z. B. auf YouTube, so wirdCopyright
meist der
Adobe Flash Player gestartet.
Copyright
www.park-koerner.de
Inzwischen gibt es weitere kostenlose Programme zur Wiedergabe von SWF-Dateien:
 RealPlayer
 QuickTime
 Windows Media Player
 VLC media player
Copyright www.park-koerner.de
 GNU Gnash
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Flash-Animationen werden im Format FLA als sogenannte Projektdateien gespeichert. FLADateien können vom Bearbeitungsprogramm geöffnet und weiterbearbeitet werden. FLA-Dateien
können nicht mit den oben genannten Programmen abgespielt werden. Sie müssen exportiert
werden in das Format SWF oder FLV.
Abspielbare Flash-Dateien haben die Endung SWF oder FLV. SWF ist die Abkürzung für
Shockwafe
Flash. FLV ist die Abkürzung
fürwww.park-koerner.de
Flash Movie.
Copyright www.park-koerner.de
Copyright
Copyright
www.park-koerner.de
Flash-Animationen werden überwiegend im Internet auf Webseiten genutzt. Es werden
vorgefertigte Flash-Animationen für Webseiten im Internet zum Download angeboten. FLVDateien werden in YouTube genutzt.
FLV- und SWF-Dateien können
geöffnet und bearbeitet werden!
nicht
mit
einem
Flash-Bearbeitungsprogramm
Flash-Animationen ersetzen zunehmend
GIF-Animationen. Die Tabelle
zeigt die wichtigsten
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Unterschiede zwischen Flash- und GIF-Animation:
Copyright www.park-koerner.de
GIF-Animation
Flash-Animation
Bewegungen wirken „abgehackt“
Bewegungen werden flüssiger dargestellt
Kein Sound
Sound
Interaktion
Keine Interaktion
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Eingeschränkte Farbpalette
Uneingeschränkte Farbpalette
Keine Integration anderer Datenformate
Integration anderer Datenformate möglich
Besteht in der Regel aus relativ wenigen Kann Filme
Einzelbildern
Einzelbildern
darstellen
mit
Tausenden
von
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
Sowohl GIF-Animationen als auch Videoformate (mpeg, avi und so weiter) können mit den
entsprechenden Konvertierungsprogrammen in das SWF- oder FLV-Format konvertiert werden.
Die Abbildung zeigt eine Szene aus einem Zeichentrickfilm, der im SWF-Format erstellt wurde. Er
kann im Internet unter http://www.youtube.com/watch?v=Utl1jqGtryI angesehen werden.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
Erzeugung einer Flash-Animation
Um eine Flash-Animation zu erzeugen, braucht man in der Regel eines der beiden Programme
 Macromedia Flash oder
 www.park-koerner.de
Adobe Flash.
Copyright
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Diese Programme sind sehr teuer und sehr schwierig zu bedienen. Die Abbildung zeigt die
Arbeitsoberfläche von Macromedia Flash 8.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Preisgünstige oder kostenlose Flash-Animationsprogramme gibt es sehr wenige.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Die wichtigsten Elemente in einem Flash-Programm wie Macromedia Flash sind:
 Bühne
 Zeitleiste
 Bibliothek
 ActionScript
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Canvas (Bühne, Leinwand)
Die Bühne ist die Arbeitsfläche, auf der die Bilder (Frames) eingefügt werden. Auf den Frames
werden Vektorgrafiken mit dem Zeichenwerkzeug des Programms erzeugt. Das funktioniert wie bei
einem Vektorzeichenprogramm. Alternativ kann man Bitmaps, Vektorgrafiken oder Videofilme in
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
das Programm importieren. Die Elemente können in verschiedenen Zeichenebenen abgelegt
werden.
Die Bühne ist als unendlich groß definiert. Es wird in der Animation jedoch nur das gezeigt, was
auf dem Monitor auf einen Blick sichtbar ist.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Zeitleiste
Auf der Zeitleiste wird festgelegt, wann die Frames angezeigt werden sollen. Die Frames werden an
den entsprechenden Punkten eingefügt. Auf der Zeitleiste werden die Ebenen verwaltet. Die
Abbildung zeigt die Zeitleiste von Adobe Flash.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Auf der Zeitleiste werden die Geschwindigkeit und die Anzahl der Frames pro Sekunde festgelegt.
Bibliothek
Copyright
www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Die Bibliothek zeigt eine Liste der im Dokument
enthaltenen Medienelemente. Die Elemente können
in der Bibliothek bearbeitet werden. Gezeichnete
Elemente können in ein Symbol umgewandelt
werden. Das Symbol wird in der Bibliothek
verwaltet und kann bei Bedarf aus der Bibliothek in
die Bühne eingefügt werden. Wenn die
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Eigenschaften des Symbols in der Bibliothek
geändert werden, ändern sie sich an allen
eingefügten Exemplaren (Instanzen) auf der Bühne.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
ActionScript
Mit ActionScript kann man Interaktionen programmieren, z. B. das Anzeigen eines neuen Bildes,
wenn man auf die entsprechende Schaltfläche klickt.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Bild-für-Bild-Animation (Einzelbildanimation)
Bei der Bild-für-Bild-Animation wird ein Frame nach dem anderen
abgespielt. Dadurch entsteht wie beim Daumenkino der Eindruck
einer Animation.
Ein Bild setzt sich aus mehreren Elementen, die gleichzeitig
gemeinsam auf der Bühne erscheinen, zusammen (Auto, Häuser,
Straße, Ampel).
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Man zeichnet wie im Daumenkino einzelne Bilder, die beim
Abspielen in kurzen Zeitabständen gezeigt werden. Wenn die
aufeinander folgenden Einzelbilder sich nur geringfügig
voneinander unterscheiden, wirkt die Bewegung umso flüssiger.
Um das kontrollieren zu können, verwendet man die
Zwiebelschalenansicht.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Mit Zwiebelschalen arbeiten, ohne zu weinen
Normalerweise wird jeweils immer nur
Animationssequenz auf der Bühne angezeigt.
ein
Bild
der
Quelle:
http://www.ikadu.de/tut/tut1/03aeinzelbild.html (16.08.12)
Bei der Zwiebelschalenansicht werden die einzelnen Frames
transparent übereinandergelegt. Dieselbe – analoge – Technik wurde früher bei Zeichentrickfilmen
verwendet. Dazu zeichnete man die einzelnen Bilder auf durchsichtige Folien. Zur Kontrolle der
Bewegungsabläufe
wurden die Folien
übereinandergelegt.
Copyright www.park-koerner.de
Copyright
www.park-koerner.de
Copyright
www.park-koerner.de
Prinzipien/Techniken
Das Arbeiten mit den Programmen Adobe Flash und Macromedia Flash ist ziemlich schwierig. Die
Programme verfügen über ausführliche Handbücher und Tutorials zum Selbststudium. Nachfolgend
werden ein paar grundlegende Prinzipien/Techniken zur Erzeugung von Flash-Animationen
beschrieben.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Bewegungs-Tweening
Wie schon beschrieben, besteht eine Bewegung aus wenigen bis vielen Einzelbildern.
Ein Flash-Dokument setzt sich wie ein Film aus einer Abfolge von Einzelbildern zusammen.
Je mehr Bilder pro Zeiteinheit gezeigt werden, desto flüssiger wirkt die Bewegung.
Copyright
Wenn www.park-koerner.de
man z. B. einen sich
Copyright
www.park-koerner.de
Copyrightwill,
www.park-koerner.de
von links
nach rechts
bewegenden Kreis darstellen
benötigt man
viele Einzelbilder, auf denen der Kreis jeweils um einen kleinen Betrag verschoben an einer neuen
Position dargestellt wird.
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
Um sich die Erzeugung der vielen Copyright
Einzelbilder
ersparen zu können, wird
die Tweening-Technik
www.park-koerner.de
Copyright www.park-koerner.de
angewandt. Das Programm berechnet zwischen zwei Schlüsselbildern (erstes Schlüsselbild =
Anfangspunkt der Bewegung, zweites Schlüsselbild = Endpunkt der Bewegung) zusätzliche
Einzelbilder. Die zwei Schlüsselbilder enthalten dasselbe Objekt, lediglich an anderer Stelle
positioniert. Das heißt, die beiden Schlüsselbilder eines Tweens sind identisch.
Copyright www.park-koerner.de
Tween ist eine Abkürzung aus dem Englischen: in between = zwischen, dazwischen.
Die berechneten Bilder (Zwischenbilder) werden Inbetweens genannt. Im Gegensatz zu den
Schlüsselbildern können die Inbetweens nicht bearbeitet werden. Sie werden automatisch vom
Copyright www.park-koerner.de
Copyright
www.park-koerner.de
Programm
berechnet und erzeugt. Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Die Zahl der Inbetweens wird in der Zeitleiste durch die Positionierung der Schlüsselbilder (key
frames) festgelegt.
Bevor mit einem grafischen Objekt ein Tween erstellt werden kann, muss es in ein Symbol
umgewandelt werden.
Die Bewegung des Objekts erfolgt auf einem sogenannten Bewegungspfad. Der Bewegungspfad
Copyright eine
www.park-koerner.de
Copyright www.park-koerner.de
zwischen
zwei Schlüsselbildern ist zunächst
gerade Linie.
Copyright
www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Er kann nachträglich an den Anfassern verändert werden, sodass sich das Objekt z. B. in einem
Bogen bewegt.
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Es können vorher Pfade festgelegt werden, entlang denen die Objekte bewegt werden. Der Pfad
wird mit einem der Zeichenwerkzeuge (Stift, Freihand, Ellipsen, Rechteck, Pinsel) in einer
sogenannten Pfadebene gezeichnet.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Das Symbol des Zeichenobjekts wird dann auf den Pfad gezogen. Der Bewegungspfad wird in einer
separaten Pfadebene dargestellt.
Mit Bewegungs-Tweening lässt sich z. B. sehr schnell ein springender Ball oder eine Billardkugel,
die an den Banden abprallt, erzeugen.
Das Objekt kann während der Bewegung auch rotiert werden.
Mit Bewegungs-Tweens lassen sich einfache Bewegungen sehr schnell realisieren. Für komplexe
Bewegungen
wie in Zeichentrickfilmen
wird www.park-koerner.de
die Einzelbildanimation verwendet.
Copyright
Copyright www.park-koerner.de
Copyright
www.park-koerner.de
Form-Tweening
Mit der Form-Tween-Technik lassen sich Formen kontinuierlich ineinander überführen. Das ist ein
ähnlicher Effekt wie beim Morphing in der Bildbearbeitung, wo z. B. ein Gesicht in ein anderes
verwandelt wird.
Ein Kreis z. B. als Startbild kann in mehreren Schritten (Inbetweens) in ein Quadrat als Endbild
Copyright www.park-koerner.de
Copyright www.park-koerner.de
verwandelt werden. Liegen Anfangsbild und Endbild nicht aufeinander, sondern nebeneinander, so
entsteht zusätzlich eine Bewegung. Die Bewegung erfolgt entlang einer Geraden. Einen
veränderbaren Bewegungspfad wie beim Bewegungs-Tweening gibt es nicht.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Neben der Form lässt sich die Farbe verändern.
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz
Im Original veränderbare Word-Dateien
Bild-für-Bild-Animation, Form-Tweening und Bewegungs-Tweening können beliebig miteinander
kombiniert werden.
Tweening wird als Schlüsselbild-Animation, im Englischen als Keyframe Tweening bezeichnet. Es
werden keine Einzelbilder von Hand gezeichnet, sondern nur Schlüsselbilder, die grob den
www.park-koerner.de
Copyright www.park-koerner.de
Bewegungsablauf
vorgeben. Die Copyright
Einzelbilder
zwischen den Schlüsselbildern
werden nach
Copyright
www.park-koerner.de
unterschiedlichen Methoden automatisch berechnet. Diese Berechnung wird als Interpolation
bezeichnet. Es gibt zahlreiche unterschiedliche Interpolationstechniken, die beim Tweening zur
Anwendung kommen.
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Copyright www.park-koerner.de
Kopierrechte (gedruckt und digital) für alle eigenen Schüler bei Erwerb Privatlizenz, für
alle Schüler und Lehrer der Schule bei Erwerb Schüler-Lehrer-Lizenz