Tweens, How are they in 3.0?

[Zeusbwr]

I am a giant fan of The Custom MC Tween Classes (http://hosted.zeh.com.br/mctween/documentation.html), so much so, that i'll have a hell of a time living without them.

Does 3.0 handle tweening any better than 2.0? I'm not good in complicated math so setting up my own tween falloffs and junk would be hell.. Any comments?

[cancerinform]

The Tween classes are part of Flex 2 and did not come wuth AS3 preview. May be the final version will contain these classes. You need to create your own tweens for the moment. These are the classes, which came with the preview:

http://livedocs.macromedia.com/labs/as3preview/langref/

[Zeusbwr]

Crap. Any tutorials or examples of how to do this?

I don't need anything extravagant, but i'm sure the math i would use to frame by frame move my objects, would be slow to say the least.. Not to mention no falloffs.. hmm.

If i remember right, those tween functions offered a set of functions for you to use (it would let you export a falloff basically) which i might be able to use in 3.0.




*edit*
After examening Robert Penner's calculations it looks as if i could do this quiet easily. I would have to learn quite a bit on how they work, but its all open math so it is easily possible.. to those with the brains lol.

Once i can get classes better declared i can start implemnting a 3.0 version.
I assume prototypes would still be the best method of doing this? Or are they even in 3.0.. hmm time to look stuff up lol.

[cancerinform]

As I said they are part of Flex 2 under mx.effects.Tween but currently not available for the Flash9 preview.
You can check by yourself here

http://livedocs.macromedia.com/flex/2/langref/index.html


Ckeck the class Timer under flash.utils which is equivalent to setInterval.

[Zeusbwr]

Yea but that is part of flex, not flash correct? And i don't have flex.. Sorry if i am missing a huge point you are making lol :/

[cancerinform]

All the examples I have seen before Flex 2 came officially out have been created with Eclipse using the Flex framework. I don't know of any recent tween examples using the AS3 preview. Use the Timer class.

[Zeusbwr]

ok kool. I'll check out a timer class or i'll use enterframe on a background class to manage time.

Dunno which will be faster though.. timers are usually excessively hogging though. (just in general, no idea about flash)

[cancerinform]

Here is an example made with the timer class. I can't give it out because it is commercial. Click on links. I guess this is what you are looking for?

http://flashscript.biz/book/final/as3/custom_menubar_2.html

If you have specific questions start a new thread :)

[Zeusbwr]

Well the rollover graphic change is fading in and out, so yes that is what i am looking for. But is it efficient enough to do on a larger smoother scale?

And what are you doing, just setting a timer to trigger a function which then changes the alpha of some movieclip? (or some value, alpha for example)

[cancerinform]

The buttons are moving down (y)

[Zeusbwr]

Ah ok, didn't notice those (i wasn't pressing those two aparently lol)


But thats besides the point, thats all from timers? I'll have to give it a try then, see how effective it is alongside falloff curves.

LOVING 3.0 btw. Got a lot of little things to get used to be immedietly it is making more sense than 2.0 ever did.. though that is just due to my C++ & C# background.

[cancerinform]

I quickly prepared a little example to get you started, but check the class there are many more options.:)

[Zeusbwr]

cool, i'll check it out when i get home from work tonight. Thanks!

[misuser]

Rewriting a tweening class from scratch is daft. You'll need more than just a timer. What about easing functions? I suppose you could use Robert Penner's...

It would be much simpler to just download the Flex 2 SDK (free) - I'm pretty sure the Tweening classes are part of it. Look for the mx folder and copy it into your Flash 9 class path. I've not tried them but they really should work - you'll probably need the whole mx folder - not just the effects folder or the tweening classes.

[cancerinform]

The example for download contains easing ;).

[senocular]

The tweening classes in the mx framework of Flex 2 are a bit messy and rely on a lot of other aspects of mx (less encapsulated than those used in Flash 8 etc). However, devonair said he got them to work in Flash 9 but he said "I had to comment out the includes and delete all references to the mx_internal namespace." So you might need to fiddle with them a bit to get them to work.

Otherwise you can rely on other alternatives such as cancerinform's.

[misuser]

Aren't namespaces supposed to avoid that sort of thing? I'm guessing there will still be a an "mx" namespace in Flash 9 - it's been there since v.7 (or was it 6?). So we'll have an "mx" namespace in Flash and a different one in Flex!?! Shouldn't Macdobe have assigned them different identifiers? In fact why use the "mx" namespace at all in Flex? After all they're not even using the "flex" namespace. [Slaps forehead]

[joa__]

There is a difference between a package and a namespace. You are talking about packages if I get you right. But we should not mix theese things since namespaces are now also implemented (even if they are not as nice as C++'s namespaces).

[misuser]

Yeah yeah my bad - doesn't invalidate my point though - The point of packages and namespaces is to keep identifiers unique and having one mx for Flash and a different mx Flex is asking for trouble.

[Zeusbwr]

So i got time tonight (and after going through more tutorials so i have a better grasp of events, the display list, etc), and i see your example is very simple.

I noticed that you still use a timer, but this is just one object. If you wanted to move say 10 objects independantly, would it be best to create 10 timers or one big timer that runs everything.. and in which the objects look to?

*edit*
I'm kind of busy at the moment, but perhaps i can find the source of some of the other easing classes that use robert pennings equations and see how they do it. They are all frame rate independant, and are prototyped right into the movieclip class...

On a sidenote, Is prototyping (the act of adding functions to a different class.. assuming i understand it right) still possible in AS3?

[misuser]

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.

[cancerinform]

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.

[senocular]

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.

[Zeusbwr]

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.

[misuser]

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.

[cancerinform]

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


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;
}
}

[Zeusbwr]

Ok, long hiatus, blah blah. This is a post to follow this thread's subject & the partially hijacked thread here



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:

//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?

[ozmic66]

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

[Zeusbwr]

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!

[Zeusbwr]

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?

[ozmic66]

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

[Zeusbwr]

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?

[Zeusbwr]

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


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.

// 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

// "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?