Suche nach als

Flash:

Auf dieser Seite:

Trickfilm

Flash ist ein Programm zur Animation von Objekten, z.B. Grafiken oder Texte, die Bild für Bild (Frame) auf einer Zeitleiste angeordnet sind. Die Objekte können unabhängig voneinander auf je eigenen Ebenen eingefügt und manipuliert werden, die Ebenen bilden Hinter- und Vordergrund der Animation. Durch sogenanntes ActionScript können Steuerbefehle eingefügt werden.

Geschichte von Flash

Nachdem sich Flash vom obligaten Intro zu ganzen Auftritten gemausert hatte, ist es wieder aus der Mode gekommen, nachdem eine Indexierungswelle von Google ausgegangen war, da bis vor 2008 die Robots keine Texte Flash lesen konnten. Dabei war Flash der Standard für 'Rich Internet Applications' (RIA), also für plattformübergreiffende Komplettlösungen mit Fonts, Sounds, Animationen und Interaktivität, was mit HTML und JavaScript nicht integral zu lösen war.
Durch Youtube hat Flash inzwischen den Media Player (Windows) und den Quicktime Player (Apple) als Video-Standard abgelöst. Der Flashplayer ist als Plugin in 95% der Browser installiert. Durch die Laufzeitumgebung AIR und das Tool FLEX werden nun sogar Flashapplikationen für den Desktop entworfen. Wie lange Flash aber noch durchhält ist ungewiss, denn mit HTML 5 kann HTML mit CSS und JavaScript alles auch. Und Apple lässt auf iPhone derzeit kein Flash zu und hat es auch nicht vor.

Bühne

Adobe Flash CS3

Flash ist eine Adobe Applikation mit einer Wysiwyg Oberfläche, mit menüs, mit Werkzeugleiste und Bearbeitungsfenstern. Zentral im oberen Bereich werden die Zeitleiste mit den Ebenen angezeigt, darunter die Bühne auf der die Objekte animiert werden und unter dieser das Eigenschaften Fenster. Hier wird vom angeklicktem Objekt Name, Grösse, Farbe etc. angegeben. In der Abbildung unten, wurde auf die Bühne geklickt (das Dokument ausgewählt) und die Grösse 400 x 600 Pixel angegeben und als Hintergrundfarbe ein Gelb bestimmt.
Ich kann die Zeitleiste auch unterhalb der Büne platzieren, wenn ich den Arbeitsbereich indivduell einrichten möchte.

Flash Programmfenster

Zeitleiste und Ebenen

Bildrate (bps)

Die Skala der Zeitleiste bedeuten Bilder, die Zeitleiste muss noch geeicht werden (ebenfalls in den Dokument-Eigenschaften), indem ich sage wie lange ein Bild dauert bzw. wie viele Bilder wärend einer Sekunde gezeigt werden (Bilder pro Sekunde). Je mehr, desto ruckelfreier wird die Animation, desto grösser wird aber auch die Datei und desto länger dauert das Laden vom Server.
12 bps reichen für eine einfache Animation, 25 bps verdoppelt die Qualität - und verkürzt die Animation um die Hälfte. (25 bps ist der Europäische-TV-Standard, 30 Bilder ist der Kino- und USA-TV-Standard, Zelluloidfilme hatten 24 bps.)
Die kleinste Veränderung eines Objektes bedeutet also einen Sprung von einem Bild zum nächsten; in einem Daumenkino entspricht ein Bild einem Blatt. Eine kontinuierliche Bewegung oder Verformung eines Objektes zieht sich natürlich über mehrere Bilder mit Zwischenstadien hin.

Flash Zeitleiste und Ebenen

Das Bild bei welchem ich gerade stehen bleibe ist in der Zeitleiste durch eine rote Nadel markiert, durch Verschieben dieses Zeigers kann ich zu einem bestimmten Bild fahren, oder ich kann durch einen Klick auf das Bild in der Zeitleiste springen. Ein ausgewähltes Bild in der Zeitleiste ist schwarz dargestellt.
Mehrere Ebenen können zur Übersichtlichkeit in Ordner zusammengefasst werden. Es empfiehlt sich für Kommentare, Bildbezeichnungen und ActionScript-Code eigene Ebenen anzulegen (und diese zu sperren).

Symbole und Instanzen

Beginne ich etwas zu tun, dann tue ich dies in einem leeren Schlüsselbild. In der Werkzeugleiste finde ich die von Adobe Illustrator bekannten Vektor-, Text- und Zeichenwerkzeuge, mit diesen kann ich direkt auf die Bühne zeichnen und schreiben und die so entstandenen Objekte dann animieren. Mit Vorteil habe ich aber ein kleines Drehbuch für den Zeichentrickfilm und die Objekte, z.B. Spielfiguren, als Einzelteile vorgezeichnet und abgespeichert als Grafiken.
Diese lade ich in die Bibliothek, mein Lager für zu verwendende und schon verwendete Dinge: > Datei >> Importieren >>> In Bibliothek importieren ...
Aus der Bibliothek ziehe ich nun Objekte auf die Bühne, dadurch werden Instanzen angelegt, die sind wie Kloone anfänglich gleich dem Original (Symbol) in der Bibliothek, ich kann sie aber verändern ohne dass sich diese Änderungen auf das Symbol auswirken. Aber umgekehrt wirken sich Veränderungen am Symbol (Original in der Bibliothek) auf alle Instanzen aus.

Auch Direkt in Flash gezeichnete Objekte sollten in Symbole verwandelt werden (in die Bibliothek importiert werden), um dann nur noch Instanzen davon zu animieren, das erleichtert das Vorladen bei grösseren Filmen erheblich. Dazu wird im Bibliothekfenster das Kontextmenü geöffnet und 'Neues Symbol ...' angewählt. Es stehen drei Symbol-Typen zur Verfügung, die Grafik, der Button und die Animation.

Symbol-Typen

Grafik
Vektor oder Bitmap (Pixelbilder)
Button
Schaltfläche, empfindlich auf die 4 Maus Events: auf, darüber, gedrückt und aktiv
Animation
Eine eigene kleine Animationsschlaufe die z.B. als blinzelnde Augen oder flatternde Fahne eingesetzt werden kann

Animation

Schlüsselbild

Ein Schlüsselbild braucht es zu Beginn jeder Veränderung, immer wenn in diesem Bild etwas anders sein soll als im Bild zuvor.

Bild 1 jeder neu angelegten Ebene ist ein leeres Schlüsselbild (Keyframe). Ein leeres Schlüsselbild bleibt weiss und hat einen Ring als Kennzeichen (Abb. a). Möchte ich ein Objekt ins Bild 13 (bei 12 pbs nach einer Sekunde) einfügen, dann muss ich dort zuerst ein leeres Schlüsselbild erstellen. Wenn ich eine Instanz einer Grafik auf die Bühne ziehe legt Flash das Objekt in das aktuelle Schlüsselbild. Ein Schlüsselbild, welches ein Objekt enthält wird grau und ist durch einen schwarzen Punkt gekennzeichnet.

Möchte ich eine gewisse Zeit lang diese eine Grafik unverändert zeigen, dann füge ich eine entsprechende Anzahl Bilder an, durch Rechtsklick auf die Zeitleiste an der Stelle an der das letzte Bild mit dem selben Inhalt stehen soll. Ich wähle 'Bild einfügen' aus dem Kontextmenü (oder F5 per Tastatur), die dazwischenliegenden Bilder werden dabei in der Zeitleiste automatisch grau aufgefüllt, das letzte Bild bekommt ein kleines, leeres Rechteck (Abb. b).
Wähle ich stattdessen 'Schlüsselbild einfügen', dann wird das Bild zum Schlüsselbild, es enthält Kopien der Instanzen, die ich wieder bearbeiten kann, ich kann z.B. die Grafik irgendwo anders auf der Bühne platzieren. Das Abspielen dieser Bildfolge (durch Enter auf der Tastatur) zeigt, dass die Grafik an jener Stelle in der Zeitleiste zur neuen Position auf der Bühne springt.

Ich kann jedes Bild zum Schlüsselbild machen und etwas daran verändern, es entsteht eine Animation der kleinen Schritte. Oder ich kann in grösseren Abständen ein Schlüsselbild setzen, dann habe ich eine sprunghafte Animation.

Bewegungs-Tween / Form-Tween

Flash kann anstatt des Sprungs einen animierten Übergang erzeugen, falls zwischen den beiden Schlüsselbildern etwas Zeit (Bilder) zur Verfügung steht. Durch das Einfügen eines Bewegungs-Tween (aus dem Kontextmenü) bewegt sich die Grafik zwischen den beiden Schlüsselbildern flüssiger an die neue Position, dies wird in der Zeitleiste durch einen Pfeil angezeigt, die betroffenen Bilder sind hellblau hinterlegt (Abb. c). Nebst der Position werden auch Größe und Drehung einer Instanz, einer Gruppe oder eines Textblocks durch Bewegungs-Tweens animiert!
Ein weiterer Übergangseffekt (der Form-Tween) wird eingesetzt, wenn der Übergang von einer Form zu einer anderen (z.B. von einem Kreis zu einem Quadrat) animiert werden soll, die betroffenen Bilder unter dem Pfeil sind dann hellgrün hinterlegt (Abb. d).
Falls ein Tween nicht funktioniert, z.B. weil das Endschlüsselbild fehlt, dann wird eine gestrichelte Linie angezeigt (Abb. e).
Erstellte Tweens werden von Flash automatisch in die Bibliothek abgelegt.
Ab Flash CS4 gibt es Eigenschaften-Tweens, deren Bewegungen sind nicht der Zeitleiste sondern dem Objekt zugeordnet (Objektbasiert). Veränderungen sind intuitiver vollziebar. Die oben beschriebenen Bewegungs-Tween heissen neu Klassisches-Tween.

Tweens berechnen die Zwischenstadien vom einen zum andern Schlüsselbild automatisch. Dadurch muss nicht jedes Bild ein Schlüsselbild sein, in dem etwas manuell verändert wurde.

a) Leere Schlüsselbilder und ausgewähltes Bild: Flash Schlüsselbild
b) Schlüsselbild und gleiche Bilder: Flash Schlüsselbild
c) Bewegungs-Tween: Flash Bewegungs-Tween
d) Form-Tween: Flash Form-Tween
e) Kaputtes Tween: Flash kaputes Tween

Animationen können nur auf eigenen Ebenen erstellt werden, zwar können mehrere Tweens aufeinander folgen, aber sie können sich nicht auf der selben Ebene überlagern.

Szenen


Gelegentlich verliere ich den Überblick, die Zeitleiste wird zu lange und die Ebenenordner stapeln sich, dann beginne ich eine neue Szene für den nächsten Teil des Trickfilms. Szenen werden bei der Veröffentlichung einfach in deren Reihenfolge aneinander gehängt, es sei denn ich greiffe steuernd mit einem ActionScript ein.

Veröffentlichen

Flash (fla) / Schock Wafe Flash (swf)

Zur Vorschau der Szene auf der Bühne hat bisher ein ENTER genügt. Besser beurteilen lässt sich das zu veröffentlichende Resultat ohne den ganzen Arbeitsbereich. Wenn ich das Dokument speichere, erhalte ich das *.fla Format, dies ist zur Veröffentlichung ungeeignet. In den Eigenschaften des Dokuments (Klick auf die Bühne), findet sich das Menü Einstellungen mit allen möglichen Optionen. So kann ich von Flash auch zugleich ein HTML Dokument erstellen lassen, in welches meinprojekt.swf schon eingebettet ist. Oder ich kann alles als ein Quicktime-Video exportieren.
Siehe im Teil HTML bei Medien unter Video wie die HTML Schnittstelle auszusehen hat. Mit HTML 5 wird das bestimmt einfacher werden.
Habe ich den Flash-Player installiert, ein Plugin für den Browser, spielt der nach einem Doppelklick auf die veröffentlichte Datei meinprojekt.swf ohne Weiteres ab.
>> Get Flashplayer

Ein paar Beispiele von Flash Animationen sind auf biefer.com zu sehen.


Valid XHTML 1.0 Check den Code.

ActionScript >> << Perl im cgi-bin
Ich bin hier: > Andere Sprachen Lehrling >> Flash:
 
HTML und XHTML | CSS | JavaScript und DHTML | PHP und MySQL | Andere Sprachen
Letzter Update: 06.07.2010