Anzeige
Tutorialbeschreibung

Tweener Klassen verwenden (AS2)

Tweener Klassen verwenden (AS2)

Wie man leicht änderbare Animationen durch ActionScript erzeugt, ohne auch nur einen Keyframe zu benutzen.
 


Schritt 1:
Zunächst solltest du alle zu bewegenden Grafiken/Texte/etc in MovieClips umwandeln. Dies geschieht, wenn du das Bild selektierst und "F8" drückst. Dort wählst du "Movieclip" und gibst ihm einen Namen.

In Symbol konvertierenBilder

Schritt 2:
Wichtig ist, dass dein MC auch einen Instanznamen bekommt. Diesen kannst du unter Eigenschaften eintragen.


InstanznamenBilder


Schritt 3:
Nun müssen wir die externen Klassen importieren, seit Flash MX sind diese Bestandteil der Flashressourcen. Leg eine neue Ebene an, nenn sie Actions und schreibe in den ersten Frame folgenden Code:
import mx.transitions.*;
 
Schritt 4:
Nun ist alles Nötige gegeben. Jetzt ist es an der Zeit den Tween zu erstellen.
Dies geschieht über folgende Zeile Code:
mc1tween = new mx.transitions.Tween(mc1 , "_x", mx.transitions.easing.Strong.easeInOut , 0 ,300, 2, true);
 
Damit du auch verstehst was du da tust:

MeinTweenName  = new mx.transitions.Tween(MeinMovieClip , MeineProperty , MeinEasing , MeinAnfang ,MeinEnde , MeineZeit , Frames oder Sekunden);
MeinTweenName  ist logischerweise der Name deines Tweens.
new mx.transitions.Tween ist der Konstruktor für einen neuen Tween.
MeinMovieClip ist der Instanzname deines MCs.
MeineProperty ist die Eigenschaft, die du verändern möchtest und den Typ Number hat. (_alpha, _x, _width, _rotation, _yscale etc)
MeinEasing ist der Easing-Typ, den könnt ihr euch wie eine Kurve vorstellen.
Flash bietet dabei folgende Easingtypen:
  • mx.transitions.easing.Regular.easeOut
  • mx.transitions.easing.Regular.easeIn
  • mx.transitions.easing.Regular.easeInOut
  • mx.transitions.easing.Bounce.easeOut
  • mx.transitions.easing.Bounce.easeIn
  • mx.transitions.easing.Bounce.easeInOut
  • mx.transitions.easing.Back.easeOut
  • mx.transitions.easing.Back.easeIn
  • mx.transitions.easing.Back.easeInOut
  • mx.transitions.easing.Strong.easeOut
  • mx.transitions.easing.Strong.easeIn
  • mx.transitions.easing.Strong.easeInOut
  • mx.transitions.easing.Elastic.easeOut
  • mx.transitions.easing.Elastic.easeIn
  • mx.transitions.easing.Elastic.easeInOut
  • mx.transitions.easing.None.easeNone
MeinAnfang  und mein MeinEnde sind die Werte der Property. Bei einer Bewegung Start- und Endpunkt beim Fade-in von 0 bis 100, Fade-Out 100 bis 0.
MeineZeit ist die Zeit in Frames oder  Sekunden.
Frames oder Sekunden gibt an, ob ihr in Sekunden (true) oder Frames (false) eure Zeit angegeben habt.


Nun kannst du deinen Film testen (Strg + Eingabe).

Bilder


Solltest du alles richtig gemacht haben, siehst du eine einfache Animation deines MCs.



Anwendbare Funktionen:

Diese Tweens haben den grossen Vorteil, dass man sie mit Funktionen belegen kann.
So kann man einen Tween endlos vor- und zurückabspielen (echte Spiegelung) in
dem man die Funktion
tweenname.yoyo()
 
aufruft. Ereignisse, die zum Tween ausgelöst werden können sind:

Tween.onMotionChanged

 

Tween.onMotionFinished

 

Tween.onMotionResumed

 

Tween.onMotionStarted

 

Tween.onMotionStopped



Viel Spass beim tweenen.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 17.10.2012 - 13:52

Gut erklärt, einfach nachzuvollziehen. Vielen Dank! LG Susan

Portrait von TomJay66
  • 09.02.2010 - 13:57

Super Tutorial. Man kann die Anweisungen aber auch ein bissl kürzer schreiben:

import mx.transitions.Tween;
import mx.transitions.easing.*;

mc1tween = new Tween(mc1 , "_x", Strong.easeInOut , 0 ,300, 2, true);

Aber sonst echt super!

Portrait von Kleinbild
  • 20.01.2010 - 18:09

Endlich funktioniert es. Dank deines Workshops.

Portrait von sokie
  • 02.04.2009 - 00:18

super Sache, kurz informativ gut!

Portrait von waer
  • 14.01.2009 - 13:59

Wäre gut zu wissen welches Actionscript du benutzt hast! Ansonsten super tutorial ;)

Portrait von Outline123
  • 03.02.2009 - 14:07

es ist AS2 verwendet in Flash cs3.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 11.01.2009 - 18:59

Super, danke für den Tipp! Bietet ja wirklich wesentlich mehr Kontrollmöglichkeiten als ich davon gedacht hätte.

Portrait von timjack
  • 11.01.2009 - 16:32

cool ´, einfach erklärt und verständlich... beim nachbilden gabs keine probleme

x
×
×