[Stuff][AS3] Tween Klasse (SimpleTween)

[Alpha.ONE]

Hallo,

ich habe mir in AS3 eine Tween Klasse geschrieben die besonder Platzsparend ist (alle benötigten Dateien haben 4,16kb, die veröffentlichte swf ist lediglich 1,94kb groß).
Nun möchte ich euch diese Klasse bzw. die Klassen zur Verfügung stellen.
Alle Dateien sind im Anhang.

Erstmal ein paar Methoden:

setFPS(val:uint):void => man kann die FPS einstellen(Standartwert = 31)
Anwendung: SimpleTween.setFPS = 50;

getFPS():uint => man kann die FPS natürlich auch auslesen
Anwendung: SimpleTween.getFPS = 50;

push({clip:Movieclip/Sprit/etc., prop:String, begin:Number, finish:Number, duration:uint, easing:Function (z.B:SimpleEasing.easeOut)}); => man fügt einen Tween hinzu. Man kann beliebig viele Tweens hinzufügen. Die Tweens werden nacheinander abgespielt (eigentlich ist das wie bei Fuse).

startTween():void => startet die Animation

stopTween():void => stoppt die Animation


Hier ist ein kleines Beispiel wie man die Klasse anwendet:

Zwei MovieClips mit den Instanznamen testclip und testclip2 befinden sich auf der Bühne.


CODE:

PHP-Code:

import de.ulrichraab.SimpleTween.*

var simpleTween:SimpleTween = new SimpleTween();
simpleTween.addEventListener(SimpleTweenEvent.TWEEN_FINISH, tweenDone)
simpleTween.push({clip:testclip, prop:"x", begin:testclip.x, finish:300, duration:50, easing:SimpleEasing.easeOut});
simpleTween.push({clip:testclip2, prop:"x", begin:testclip.x, finish:300, duration:50, easing:SimpleEasing.easeOut});
simpleTween.startTween();

function tweenDone(evt:SimpleTweenEvent):void
{
    trace(evt.type);
    trace(evt.target);
} 


ich bitte um Kommentare.

MfG Alpha und viel Spaß mit SimpleTween

Edit: Da ich derzeit keinen Webspace habe und deshalb kein Beispiel hochladen kann, würde es mich sehr freuen wenn das jemand von euch erledigen kann.

Edit2: Ich hab noch das Beispiel hochgeladen.

[mildesign]

Schick. Muss ich mir bei Gelegenheit mal anschauen.
Danke.

Ich kann gerne etwas von meinen HdM Webspace zur Verfügung stellen.

[Alpha.ONE]

Währe cool wenn du das Beispiel hochladen kannst damit man es nicht extra herunterladen und entpacken muss wenn man es sich anschauen will.

Ich bitte noch darum alle Bugs usw. zu posten.
Verbesserungsvorschläge sind sehr willkommen solange die einfache Anwendbarkeit und die Dateigröße nicht übermäßig strapaziert wird.

[mildesign]

Die FLA hat 0 Byte
EDIT: Up
Anschauen

[Alpha.ONE]

Ups mein Fehler.
Im Anhang ist eine die gehen müsste.

[Alpha.ONE]

Hallo,

ich hab ein wenig an der Klasse gefeilt. Die benutzbarkeit ist jetzt wesentlich besser wie ich finde.

Und so wendet man Sie jetzt an:

PHP-Code:

import de.ulrichraab.SimpleTween.*
import fl.motion.easing.Quadratic

var simpleTween:SimpleTween = new SimpleTween();
simpleTween.push({clip:testclip, x:300, alpha:0.5, duration:100, easing:Quadratic.easeOut});
simpleTween.push({clip:testclip2, x:300, duration:50, easing:Quadratic.easeIn});
simpleTween.startTween(); 


Ich hab die selbst geschriebenen easingEquations durch die Flash internen ersetzt. Man kann fast alle benutzen. Ausnahmen sind die die mehr als die üblichen vier Parameter time, begin ,change und duration haben.

Die Parameter im push({}) sind auch etwas anders geworden.

clip: der zu tweenende clip
duration: dauer des tweenings
easing: irgendeine easingEquation

Man kann beliebig viele propertys tweenen. Die schreibweise property:value (bsp: x:100, alpha:0, usw.) erinnert an Fuse.

Man kann folgende Events per addEventListener hinzufügen:

SimpleTweenEvent.TWEEN_START
SimpleTweenEvent.TWEEN_RUNNING
SimpleTweenEvent.TWEEN_FINISH


Ich bitte um Kommentare.
Alle Dateien sind im Anhang.

MfG Alpha und viel Spaß mit SimpleTween


Edit: Sollte jemand Bugs finden oder Verbesserungsvorschläge haben, bitte ich darum dies hier zu posten.

Edit: Ich konnte ein bisschen Webspace von einem Freund abzweigen um ein Beispiel hochladen zu können. Hier der Link.

[Alpha.ONE]

Hallo,


ich muss euch nun doch um Hilfe bitten.

Folgendes Problem:
Wenn man einem MovieClip bei MouseOver und bei MouseOut ein tweening hinzugefügt hat, wie das z.B. bei einem Menü üblich ist und man schnell mit der Maus über den Button hin und her fährt, sprengt das die komplette Animation. Genauer gesagt werden viele Tweenings gleichzeitig auf den selben Clip angewendet.

Ich hab mal ein Beispiel hochgeladen: LINK

Hier der Code des Beispiels:

PHP-Code:

import com.ulrichraab.simpletween.*;
import fl.motion.easing.Linear;
import flash.events.MouseEvent;


mClip.addEventListener(MouseEvent.MOUSE_OVER, mOver);
mClip.addEventListener(MouseEvent.MOUSE_OUT, mOut);

function mOver(evt:MouseEvent):void
{
    var ovtween:SimpleTween = new SimpleTween();
    ovtween.push({clip:mClip, alpha:0, duration:5, easing:Linear.easeNone});
    ovtween.startTween();
}

function mOut(evt:MouseEvent):void
{
    var outween:SimpleTween = new SimpleTween();
    outween.push({clip:mClip, alpha:1, duration:50, easing:Linear.easeNone});
    outween.startTween();
} 


Jemand eine Idee wie man das Problem lösen kann? Ich komm seit heute Mittag nicht wirklich weiter.


MfG Alpha

Edit:
Problem gelöst.

Morgen gibts ein Update.

Habt ihr sonst noch irgendwelche Wünsche in Bezug auf die Funktionalität?

[Aerks]

Genauer gesagt werden viele Tweenings gleichzeitig auf den selben Clip angewendet. ... Jemand eine Idee wie man das Problem lösen kann?

Spontan fallen mir 2 Möglichkeiten ein.

Erstens: Du benutzt einfach immer dieselbe Tween-Instanz, statt bei jedem Rollover eine Neue zu generieren. Das hat den Vorteil, daß erst der eine Tween abläuft bevor dieselbe Instanz dann wiederverwendet wird um die nächste Animation abzuspielen. Wahrscheinlich musst du dafür ein wenig die Klasse anpassen. Keine Ahnung. Hab jetzt nicht in den Quellcode geschaut.

Zweitens: Du schaffst ein zentrales TweenManager-Singleton, was sich aller ablaufenden Animationen bewusst ist. Wenn dann in einer Tween-Instanz eine -sagen wir- lock-Eigenschaft pro MovieClip gesetzt ist, dann sorgt dieses Singleton dafür, daß jeder andere TweeningVersuch auf diesen Clip ignoriert/beendet wird bevor die erste Animationen nicht beendet ist.

Mit persönlich gefällt die Idee, daß eine zentrale Instanz alle Tweens letztendlich verwaltet besser, weil man dann auch so Späße wie "alle Animationen stoppen/langsamer laufen lassen etc.) leicht zu realisieren sind. Für die Benutzbarkeit ist das auch kein Hindernis. Wenn ein Tween neu instanziert wird, registriert er sich im Konstruktor einfach beim TweenManager-Singleton und alles wird gut. Man muss ich evtl. nur darum kümmern, daß tote Tween-Instanzen nicht die Liste im Manager vollmüllen.

Viele Gruesse
=:] Aerks

[Alpha.ONE]

Ich finde die Idee mit dem TweenManager auch gut.
Meine Absicht ist es das ganze möglich klein und performant zu halten, deshalb hab ich das ganze unkomplizierter gelöst.

Allerdings begeistert mich die Idee das man alle Tweens irgendwo zentral verwalten und manipulieren kann. Vielleicht werde ich eine Möglichkeit einbauen den TweenManager optional zu benutzen. Das könnte dann so in etwa aussehen:

SimpleTween.useTweenManager = true;
var tweener:SimpleTween = new SimpleTween();

und dann hald während dem push({}) schauen ob der TweenManager aktiviert ist und dementsprechend handeln.

Das währe doch ganz cool.
Danke für den Ratschlag.


MfG Alpha

[Alpha.ONE]

Hallo,

ich melde mich mal wieder in Bezug auf meine Tween Klasse SimpleTween.
Erstmal gibt es eine komplett überarbeitete, hoffentlich bessere Version.

Die Anwendung bleibt fast gleich.

Hier mal ein Beispiel:

PHP-Code:

public function someTween():void
{
    var tween:SimpleTween = new SimpleTween();
    tween.add({clip:this.movie, width:140, height:140, x:130, y:130, time:1, ease:SimpleEasing.easeIn});
     tween.start();
} 


Was sich geändert hat ist:

tween.add({}); statt tween.push({});
tween.start(); statt tween.startTween();
tween.stop(); statt tween.stopTween();

bei den parametern hat sich hat sich der parameter duration und der parameter easing geändert. duration heist jetzt time und wird in Sekunden angegeben und easing heist jetzt ease.


Ich bin gerade am debuggen und am optimieren und wollte euch um Hilfe bitten. Ich werde später noch weitere Funktionalität hinzufügen aber nun soll erstmal das anständig laufen.
Was mich besonders interessiert ist die Performance. Ich würde mich freuen wenn ihr mir da Tipps geben könnt.

Alle benötigten Dateien sind im Anhang.


MfG Alpha


EDIT: Der TweenManager ist noch sehr unausgereift. Deshalb würde ich mich auch über Tipps und Ideen dazu sehr freuen.

[Alpha.ONE]

Hallo,

extra für euch habe ich folgende Seite eingerichtet auf der ihr den Source Code anschauen könnt und euch auch die neueste Version herunterladen könnt.

LINK

Ich hab auch ein Beispiel gebaut damit ihr euch ein Bild machen könnt.

LINK


Viel Spaß damit.


MfG Alpha


EDIT: Der TweenManager wird natürlich noch ein Singleton.