PDA

View Full Version : Tweening 2.0


Robin
05-09-2008, 03:50 AM
So I didn't get quite the reaction I expected from my last tweening script, so I've recreated it, in an easy to use/include class library.

It's currently a clientside script but it WILL work serverside, but it looks very bad due to the 0.1 timeout/sleep restriction :(

A little bit about this script:

I had objectives before writing this class, which are listed at the top of the class in a comment, and I think I've achieved them all :D

How to use in parallel and blocking:


//#CLIENTSIDE
function onCreated() {
join("tweening");

this.tweens = NULL; // Make sure there are no tweens in the queue

// Set some NPC Prefs
this.x=10;
this.y=10;
this.image = "block.png";

addTween({
"this.x", // property
this.x+20, // to-value
"easeOutQuad", // easing
100, // steps
"Parallel" // Parallel / Sequence
});
addTween({
"this.y",
this.y+20,
"easeOutBounce",
100,
"Parallel"
});
runTween(0.05); // In blocking mode you need to set the interval
}


How to use in parallel and non-blocking:


//#CLIENTSIDE
function onCreated() {
join("tweening");

this.tweens = NULL; // Make sure there are no tweens in the queue

// Set some NPC Prefs
this.x=10;
this.y=10;
this.image = "block.png";

addTween({
"this.x", // property
this.x+20, // to-value
"easeOutQuad", // easing
100, // steps
"Parallel" // Parallel / Sequence
});
addTween({
"this.y",
this.y+20,
"easeOutBounce",
100,
"Parallel"
});
setTimer(0.05);
}
function onTimeout() {
// Your script does it's other functions here

setTimer(0.05);
runTween(); // runTween must go after the setTimer to catch the timeout var
}


How to use in sequence and blocking:


//#CLIENTSIDE
function onCreated() {
join("tweening");

this.tweens = NULL; // Make sure there are no tweens in the queue

// Set some NPC Prefs
this.x=10;
this.y=10;
this.image = "block.png";

addTween({
"this.x", // property
this.x+20, // to-value
"easeOutQuad", // easing
100, // steps
"Sequence" // Parallel / Sequence
});
addTween({
"this.y",
this.y+20,
"easeOutBounce",
100,
"Sequence"
});
runTween(0.05);
}


How to use in sequence and non-blocking:


//#CLIENTSIDE
function onCreated() {
join("tweening");

this.tweens = NULL; // Make sure there are no tweens in the queue

// Set some NPC Prefs
this.x=10;
this.y=10;
this.image = "block.png";

addTween({
"this.x", // property
this.x+20, // to-value
"easeOutQuad", // easing
100, // steps
"Sequence" // Parallel / Sequence
});
addTween({
"this.y",
this.y+20,
"easeOutBounce",
100,
"Sequence"
});
setTimer(0.05);
}
function onTimeout() {
// Your script does it's other functions here

setTimer(0.05);
runTween(); // runTween must go after the setTimer to catch the timeout var
}


The examples in the video below (also find a link to a higher-def version on the youtube page) are Parallel and Blocking but as you can see it's very easy to make changes and use different variables.

Enjoy :D

uEbzNyS0ghg

Tigairius
05-09-2008, 03:53 AM
I am very impressed, Robin. Good job.

Robin
05-09-2008, 03:54 AM
I am very impressed, Robin. Good job.

People should use it! :D

MysticalDragon
05-09-2008, 03:58 AM
Amazing congrats mate.

cbk1994
05-09-2008, 03:58 AM
Very dramatic video, not bad script either.

I will try this some time, it looks awesome.

Great job :)

Robin
05-09-2008, 04:05 AM
The response pleases me somewhat this time round

It was the video proof wasn't it? :P

cbk1994
05-09-2008, 04:10 AM
The response pleases me somewhat this time round

It was the video proof wasn't it? :P

Of course, "tween" means nothing to most of us (I knew what it meant; didn't realize that you meant to completely replicate something like Flash's tweening)

Rapidwolve24
05-09-2008, 04:55 AM
I think the name "tweening" turns people off.

Robin
05-09-2008, 05:12 AM
Of course, "tween" means nothing to most of us (I knew what it meant; didn't realize that you meant to completely replicate something like Flash's tweening)

Well a tween is just a transition really.

I think the name "tweening" turns people off.

Dirteh dirteh boy

zokemon
05-09-2008, 08:41 AM
Good job, looks nice!

Dan
05-09-2008, 11:48 AM
Nice :D

Robin
05-09-2008, 04:05 PM
Yarr I like it. It's free for anyone to use too, but if you use it leave a note in this thread :)

Chompy
05-09-2008, 04:18 PM
Nice script Robin :D

Robin
05-09-2008, 07:01 PM
Thanks chompy :)

I never really thought that this was a replication of Flash's motion tweening to be honest, but I guess it really does act in a very similar manner, although it does not take into account flash's timeline and such. More over it has it's own internal timeline.

I'm going to keep working on this, and if anyone has any ideas for optimising or improving let me know!

cbk1994
05-10-2008, 08:06 AM
I have an off-topic question: What did you use to record your screen?

Robin
05-10-2008, 08:28 AM
I have an off-topic question: What did you use to record your screen?

ScreenFlow, it's a screen casting tool for Mac OS X :)

cbk1994
05-10-2008, 03:58 PM
ScreenFlow, it's a screen casting tool for Mac OS X :)

I knew it was a screencasting tool; I've never heard of that one.

I've used iShowU before (which added a horrible watermark all over my screen) and Jing (which only exported FLV) and SnapzXPro (which worked AWESOME but was a trial). Problem is ScreenFlow looks pretty expensive :cry:

Robin
05-10-2008, 11:01 PM
Yeah ScreenFlow is 64.99 :(