Tweens, How are they in 3.0?

The mx.transitions.Tween class that shipped with Flash 8 provides use-real-time is an option - so you can use a timer (setInterval) or the enterframe event.

Personnal I use the enterframe beacuse it uses less cpu cycles.

I haven't thought about 10 objects moving but you could create 10 timers if the movements are all different.

According to Adobe the prototype cannot be modified any more.

prototype can be modified. For AS3 classes, you can add methods and variables to the prototype object; you just can't redefine prototype as its read-only (thats the prototype property itself, not its own members). For non-class constructor functions in making objects in the AS1-style (which are still valid in AS3), prototype can be redefined and is how you set up inheritance.

Man, after digging into penners equations, and digging into how others have made the classes.. i'm debating if its even worth it lol.

AS3 makes so much more sense to me than AS2.. but damn this is a hell of a lot of work for someone who just wanted to learn as3 for a new simple cg portfolio site lol





*edit*
Well i am still going to give it a basic attempt. If i can get a simple Slide with easing to work well i'll go with it. Though i'll be gone all weekend but just to keep the debate open on the basics, here is what i am going to do.

Seeing as i don't know AS3 very well, nor did i know AS2 all that well. I'll be using a simple process line. Not to mention seeing as i don't fully understand the display list yet, and that i kinda need my own classes anyway, i will be making classes for any graphic i do. Drawings (square classes, image classes, w/e.. this is just the first go anyway).

So there will be a tween class that is standalone. You create a tween class and feed it the required information for the tween.
1.) The object to tween (one of a few given objects, which will require overloading.. hope as3 can do that lol),
2.) properties tweening (array),
3.) matching properties values (array),
4.) seconds for the tween,
5.) easeType
The tween class will then create a timer, start it, and from there on it is pretty self evident.


I also thought about running just one timer class, and have the object classes create listeners and handle their own tweening through inheritence of a tween calculation class (just for code cutdown). Dunno which would be more efficient.

I am sure there are better ways of doing this, anyone got ideas? And now that i think about it.. i kinda like the 2nd version better.. seeing as the first could be running dozens (in my needs atleast) of tweens at once, there would be a big overhead of timers running all over the place.

Sure you could use one timer - wrap it up in a Beacon class and it fire events that the Tweens listen for. It might be easier to get your different Tweens to sync up that way - dunno about more efficent, using one timer might just mean events / object coupling which will have its own overhead.

One way of getting tweens is to use currentCount. Here are 2 different easings.

PHP Code:

---

var myTimer:Timer = new Timer(10, 100000);
myTimer.addEventListener("timer", timerHandler);
myTimer.start();
            //
function timerHandler(event:TimerEvent):void 
{
    //dx = 300/(event.target.currentCount*5);
    dx = (event.target.currentCount*5)/10000;
    //if(dx <= 1)
    if(dx >= 1)
    {        
        event.target.stop();
    }
    else
    {
        //clip.x += 2*dx/3;
        clip.x += 10*dx;
    }
} 


---

Ok, long hiatus, blah blah. This is a post to follow this thread's subject & the partially hijacked thread [url="http://board.flashkit.com/board/showthread.php?t=704783]here[/ur]

Quote:

---

Originally Posted by ozmic66

Hey zeus, got your email, so I'll just post here

What I do with the fisix engine isn't really tweening as much as it is simulating... instead of specifying two points and a time, I give the objects speeds and let them loose with some integration (or pretty much adding the velocity to the position)

Simply tweening between two points is actually simpler than what I'm doing right now because the position of your objects can be derived for any point in time. Here's an example:

Code:

---

//here we'll move the object 'mc' from point 'p1' to point 'p2' in 'animTime' milliseconds.
'timeStart' is when we want the animation to start (in milliseconds)

var p1:Object = {x:0,y:0}
var p2:Object = {x:100,y:100}
var animTime:uint = 3000 //take three seconds to get there
var timeStart:uint = 5000 //start 5 seconds into the movie

//your main loop can be called either on enter frame, or in a timer

function mainLoop(){
    var currentTime:uint = getTimer() //the current time in milliseconds

    var dt:Number = (currentTime-timeStart)/animTime
   
    //we only need to animate if dt is between 0 and 1
    if(dt<0 || dt>1) return;

    xDistance = p2.x-p1.x
    yDistance = p2.y-p1.y
   
    //interpolate
    mc.x = p1.x + xDistance*dt
    mc.y = p1.y + yDistance*dt
}

---

Good luck! let me know if this is what you were trying to understand

---

Ok, that looks good. From the looks if it you are doing that inside a on frame event? Because there is nothing triggering the function, it must be within an already triggering event. And that is my main problem.

I was making my own object classes (such as drawn objects, etc), but tweening them was becoming odd.


I wanted to go "myCube.tweento(x, y, easingformula, animTime);" but i didn't know the most efficient way to do it.

The way i see it there are multiple options.. the most obviously being to Simply make an onFrame Event in each of the objects (myCube for example) which every frame move themselves by whatever the input paremeters are. But would this be the best way to handle it?

so you want to know whether to use event handlers or timers...
Well, I don't know if there is any sort of difference performance-wise (though I would think there isn't) but I say if you want to make your tweens completely independent of frame-rate, use a timer.

Now, the way I would do it is make one timer with an interval of something like 33 milliseconds (or 30 fps in other words) which loops on a list of tweens on every tick and updates them. once a tween has been performed (dt is greater than 1) remove it from the tweens to be done

The list would have something added to it every time you go:
myCube.tweento(...)

So really, you wouldn't be having every object take care of its own tween, but rather one main timer updating everyone--this should yield better results because flash will have less objects to deal with...

good luck, and let me know how it goes

Yea if you scroll up that is roughly how i was going to do it.

The main difference is i wasn't using a "stack" of functions for the "tweenmanager" to perform. Rather i was having a tweenmanager control the ticks, and the tweenusers subscribe to the ticks and perform whatever type of tween it has been told to.

the object classes i was talking about extend the TweenUser class for reusability.


So its good to know i roughly had it right. I'll be experimenting with how i want to exactly do the "stack"but i think i had it right.

Thanks!

Ok, i had it all set, then i realized there does need to be a stack in the manager class which performs all the tweens.

How can this be done?

What i was going to do is perform the tweens in the objects themselves, but the manager class was triggering each tick. This worked fine, except i quickly ran into the problem of needing a stack in the user object also. Without a stack in a managing class, you end up needing some type of stack in the users themselves to manage different tweens the user may do on one object.

So how can a stack be done? add all the parameters into an array then pushing it into a stack array.. then after every tick have a function take apart the array structure and enact each one?

That also means i'd need to pass a reference of the "tweened object" to the manager.. or have the manager pass back info.

That would work.. but seems kinda cumbersome. How would you achieve a stack efficiently?

hmm... alright, here's how I would structure this, I don't know if this is the 'right' way but it's what sounds logical to me

The TweenManager class will have one array that will store TweenData objects. A TweenData will store the time of the tween, the DisplayObject, all the points, the time it should take, and the type of tween

To add a tween, create a new TweenData and add it to the list.
Every time a tween is added sort the list's objects by the time of the tween.
(this could be made very efficient by bubble sorting only the new object)

On every tick, go through the list from the beginning (closest time) and perform all the tweens who's time hasn't passed yet. If you find a tween who's time hasn't started yet you can stop looping (because the lilst is sorted so the ones after it haven't started either...)
Once you find an item who's time has passed, you can pop it from the top

lather, rinse, repeat

yea good idea, i can't believe i didn't think of just passing it as an object to the manager class, instead of an array. But essentially the same thing.

You did bring up some very good ideas though, specially sorting them for efficiency. One question, what is bubble sorting the list?

;) http://en.wikipedia.org/wiki/Bubble_sort

Code:

---

                        var hasSwapped:Boolean = false;
                        var lastIndex:int = this.stackArray.length-1;
                        while( hasSwapped == true && lastIndex > 0 ){
                                hasSwapped = false;
                                if( this.stackArray[lastIndex-1].StartTime > this.stackArray[lastIndex].StartTime ){
                                        var tempTweenData:TweenData = this.stackArray[lastIndex];
                                        this.stackArray[lastIndex] = this.stackArray[lastIndex-1];
                                        this.stackArray[lastIndex-1] = tempTweenData;
                                        hasSwapped = true;
                                        lastIndex -= 1;
                                }
                        }

---

*edit*
Well now everything is in place it seems.. now back to trying to figure out how the hell the penner equations are used. He has a pdf on his site explaining them roughly, but only goes into detail on the format of a couple equations, where as some use one letter variables with no descriptions.

Code:

---

  // Elastic formula
        static function easeIn (t:int, b:int, c:int, d:int, a:int, p:int):int {
                if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
                else var s = p/(2*Math.PI) * Math.asin (c/a);
                return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        }

---

for example. Time, Begin, Change, Duration, A? P?

or

Code:

---

  // "Back" formula
        static function easeIn (t:Number, b:Number, c:Number, d:Number, s:Number):Number {
                if (s == undefined) s = 1.70158;
                return c*(t/=d)*t*((s+1)*t - s) + b;
        }

---

Again, the basics, Time, Begin, Change, Duration, S?