Anzeige
Tutorialbeschreibung

Einführung in Animation mit Actionscript

Einführung in Animation mit Actionscript

Version: Ab Flash MX
Niveau: Einsteiger
Vorkenntnisse: Grundlagen Flash
Lernziel: Das Prinzip einer Animation per Actionscript verstehen lernen.

Flash eignet sich hervorragend zum Erstellen von Animationen. Dabei sind zwei Ansätze möglich: Zeitleistenanimation/Tweening oder geskriptete Animation. Der Vorteil von Zeitleistenanimation besteht in dem relativ geringen Arbeitsaufwand: man erstellt lediglich die benötigten Schlüsselbilder und Flash errechnet automatisch die Zwischenbilder. Ihr Nachteil besteht in der geringen Flexibilität, da man immer an die konkrete Zeitleiste gebunden ist.
Demgegenüber ist zwar der Erstellungsaufwand bei geskripteten Animationen anfangs höher, da erst mühsam der Programmcode entwickelt werden muß, nachträgliche Änderungen sind aber relativ einfach zu bewerkstelligen, indem zumeist nur Variablen und Funktionen angepasst werden. Zudem läßt sich der Programmcode erheblich einfacher von einem Flashfilm in einen anderen Film übertragen, als vollständige Zeitleistenanimationen.
Am Beispiel eines rollenden Balls soll das Prinzip von geskripteten Animationen verdeutlicht werden.

  1. Erstellen Sie ein neues, leeres Dokument - 800 x 600, 18 Bps, Hintergrund weiß.
  2. Benennen Sie die erste Ebene in der Zeitleiste „actions“ und fügen Sie eine neue Ebene namens „ball“ hinzu.
  3. Zeichnen Sie am linken Rand der Bühne einen Ball (Größe 70 x 70). Ihr Flashdokument müsste jetzt wie folgt aussehen (Screen 2):

Bilder

  1. Markieren Sie den Ball und verwandeln ihn per <F8> in ein Symbol namens „mc_ball“, der damit automatisch in die Bibliothek eingefügt wird (Screen 3). Die Bibliothek kann mit <Strg><l> geöffnet werden. Der Registrierungspunkt sollte in der Mitte liegen, da wir den Ball später animieren wollen. Den Registrierungspunkt können Sie nachträglich jederzeit im Symbolbearbeitungsmodus des MovieClips ändern (s. Punkt 5).
  2. Um den Registrierungspunkt nachträglich zu ändern, führen Sie einen Doppelklick auf den Ball auf der Bühne aus. Damit gelangen Sie in den Symbolbearbeitungsmodus. Während der Ball markiert ist, tragen Sie im Eigenschaftenfenster unter x und unter y jeweils –35 ein, um den Registrierungspunkt in die Mitte des Objektes zu verschieben. Der Registrierungspunkt definiert die x- und y-Koordinaten der in Flash verwendeten Objekte. Kehren Sie anschließend zur Hauptzeitleiste zurück, indem Sie oberhalb der Zeitleiste auf „Szene 1“ klicken (Screen 3a).

Bilder

Um mit Actionscript Objekte ansprechen zu können, müssen sie über einen Instanznamen verfügen. Instanzen stellen für Flash Kopien der Objekte dar, die sich in der Bibliothek befinden. Das mag auf den ersten Blick kompliziert klingen, hat aber den Vorteil, dass Flash für alle Bälle, die wir in unserem Beispiel auf der Bühne verwenden könnten, immer nur den einen Ball aus der Bibliothek nehmen würde, ansttat jedes mal ein eigenes Objekt auf der Bühne zu zeichnen. Eine Instanz stellt also nur einen Verweis auf das entsprechende Objekt in der Bibliothek dar. Auf diese Weise bleiben Flashfilme klein (was ja gerade bei Webseiten wichtig ist).

  1. Weisen Sie daher „mc_ball“ im Eigenschaftsfenster den Instanznamen „ball“ zu (Screen 4).

Bilder


Skripte können in Flash auf zwei Arten geschrieben werden: Entweder markirt man die Objekte, denen man ein Skript zuweisen möchte und schreibt dann im Skriptfenster die entsprechenden Befehle. Alternativ kann man auch alle Skripte in einem Frame in der Zeitleiste einfügen. Das hat den Vorteil, dass man alle Befehle an einer zentralen Stelle vorliegen hat. Solche Skripte lassen sich daher leichter warten als wenn sie an allen möglichen Objekten „drankleben“ würden. Daher wählen wir letztgenannte Vorgehensweise.
  1. Der in Flash integrierte, recht simple Skripteditor, den Sie bitte mit <F9> öffnen, besteht aus drei Fenstern (Screen 5): Das auf dem Screenshot mit 1 bezeichnete Fenster erlaubt den direkten Zugriff auf alle Sprachelemente von AS. Sie können mit einem einfachen Mausklick in Ihr Skript eingefügt werden. Fenster 2 gibt Explorerartig einen Überblick über vorhandene Objekte, denen Skripte hinzugefügt werden. Fenster 3 dient zum Schreiben der Skripte und funktioniert wie ein sehr einfacher Texteditor. Anpassen läßt sich der Skripteditor über die Optionen unter 4 und 5.

 

 

 

 

 

Bilder

  1. Aktivieren Sie entweder unter Punkt 4 oder Punkt 5 des Skripteditors die Option „Zeilennummern anzeigen“.

Flash Actionscript ist Ereignisorientiert, d.h. Aktionen (Befehle) werden nur dann ausgeführt, wenn bestimmte vordefinierte Ereignisse auftreten. Jedes Sript verfügt über folgende allgemeine Form:
Zeile 1: Ereignis und geschweifte Klammer „{„ zum Öffnen des nachfolgenden Befehlsblocks.
Zeile 2: Befehlsblock, der zeilenweise die einzelnen Aktionen enthält. Ein Befehlsblock kann beliebig viele Zeilen lang sein
Letzte Zeile: geschweifte Klammer „}“ zum Abschließen des Befehlsblocks.
In Flash MX muß jede Befehlszeile mit einem Semikolon ";" enden, in Flash MX 2004 erübrigt sich das.

Eine einzige Ausnahme besteht bei dieser Struktur: Wenn ein Befehlsblock sich auf ein der Zeitleiste zugeordnetes Ereignis bezieht, entfällt die einleitende Zeile mit der Nennung des Ereignisses und die abschließende Zeile mit der schließenden Klammer. Für das vorliegende Tutorial ist das aber irreleveant, so dass wir darauf nicht weiter eingehen müssen.

  1. Um den Ball nun endlich in Bewegung setzen zu können (schwitz, wird aber auch langsam Zeit!), schreiben Sie in das Skriptfenster:

ball.onEnterFrame = function(){
          this._x += 10;
}

Flash rückt das Skript automatisch ein, so dass Sie nicht mit der Tab-Taste die erwünschte Formatierung herbeiführen müssen.

Zur Erklärung:
Zeile 1: Dem EnterFrame-Ereignis der Instanz „ball“ wird eine Funktion, also einfach ein Befehlsblock, zugewiesen. EnterFrame-Ereignisse sind permanente Ereignisse, d.h. sie treten andauernd auf. Daher wird auch jeder Befehl, der während eines solchen Ereignisses aufgerufen wird, dauernd ausgeführt.
Zeile 2: Auf der Bühne wird die Position eines Objektes durch seine x- und y-Koordinaten bestimmt. X bezieht sich auf die horizontale, Y auf die vertikale Richtung. Die linke obere Ecke der Bühne hat die Koordinaten 0,0. Wenn nun die x-Koordinate eines Objektes wie beispielsweise unseres Balls um 5 Pixel erhöht wird, verschiebt er sich nach rechts. Diese Zeile sorgt daher dafür, dass in jedem EnterFrame-Ereignis die x-Koordinate des Balls um 5 Pixel erhöht wird. Der Schlüsselbegriff "this" bezieht sich dabei automatisch auf das Objekt, dem das Ereignis zugeordnet wurde. Hier ist mit "this" also „ball“ gemeint.
Zeile 3: Schließt den Befehlsblock.

  1. Um den Ball während der Bewegung nach rechts auch drehen zu lassen, erweitern Sie das Skript wie folgt:
ball.onEnterFrame = function(){
          this._x += 10;
          this._rotation += 10;
}

Wie die x- und die y-Position stellt die Rotation eine Eigenschaft des MovieClips „ball“ dar, angegeben in Grad. 360 Grad ergeben eine Volldrehung. Die eben ergänzte Codezeile führt dazu, dass in jedem EnterFrame-Ereignis, also permanent, die Drehung des Balls um 5 Grad erhöht wird.
Eine Drehung gegen den Uhrzeigersinn wird erreicht, indem Sie eine Zahl subtrahieren anstatt sie zu addieren, z.B. this._rotation -= 10. Dementsprechend läßt sich auch der Kreis nach links anstatt nach rechts bewegen: this._x -= 10. Zusätzlich kann er nach unten bewegt werden, wenn Sie folgende Zeile innerhalb des bestehenden Befehlsblocks ergänzen: this._y += 5.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von TobiKo
  • 30.05.2012 - 12:41

Dieses Tutorial hat mir wirklich sehr den Einstieg erleichtert, vielen Dank! :)

Portrait von Maggou91
  • 08.12.2010 - 10:39

sehr hilfreiches tutorials für Anfänger!

Portrait von maxi91
  • 08.11.2010 - 16:45

gutes beispiel mit guter erläuterung!

Portrait von zuip
  • 04.10.2010 - 22:09

Hey
top. letztens mal ausprobiert und kann man aus gut bei Zahnrädern anwenden, oder (wenn man hier fragen darf) gibts da bessere Wege/Scripte?

Portrait von diemaina
  • 14.07.2010 - 16:47

gutes, anschauliches Beispiel

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.06.2010 - 08:42

Sehr gut. Leicht verständlich.

Portrait von Skatina
  • 08.02.2010 - 16:57

sehr leicht verständlich, auch für blutige anfänger....

Portrait von robertbit
  • 09.09.2009 - 13:26

Ein sehr gutes Tut für Leute, die geskripte Animationen lernen wollen.

Portrait von seppdomin
  • 08.09.2009 - 20:05

Schönes kurzes Tut...

Portrait von videom
  • 26.08.2009 - 11:49

Schönes kurzes Tut...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.07.2009 - 19:55

Sehr gutes Tutorial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.07.2009 - 19:24

sehr schönes tut.....danke

Portrait von TheAngels
  • 26.05.2009 - 12:30

Echt gut erklärt...bin noch blutiger Anfänger ;-)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.05.2009 - 12:06

sehr einfach und gut für einsteiger

Portrait von danfu
  • 30.04.2009 - 23:31

kurz und knackig - supa

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.04.2009 - 08:58

Habs auch beim ersten Versuch hinbekommen, wobei ich an manchen Kanten und Ecken hängen blieb ich die Erläuterungen gelesen hatte.

Portrait von biggie83
  • 30.03.2009 - 19:00

super tutorial. Sehr hilfreich!

Portrait von face_zero
  • 25.03.2009 - 14:39

Sauber!! Super Tutorial für einsteiger

Portrait von the_hangman
  • 15.03.2009 - 18:51

Danke für das Tutorial. Habs beim ersten Versuch hinbekommen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.03.2009 - 08:53

Sehr schön erklärt! Super hilfreich für Anfänger

x
×
×