Home » News » Goodbye Flash: Introducing the ...

News by JavaScriptSearch


Goodbye Flash: Introducing the JavaScript Motion Tween

 

JavaScriptSearch
Tuesday, May 9, 2006; 05:48 AM

Belgian developer Philippe Maegerman has released a set of JavaScript files that allow anyone to create fabulous tween effects, resembling those usually seen in Flash. The files are freely available for download, and there are detailed intructions and live demos at http://jstween.blogspot.com/.

The tween effects are applied by using six ready-made JavaScript scripts, each containing the code for a separate class.  The classes allow six distinct functionalities - Tween, Color Tween, Opacity Tween, Text Tween, Parallel, and Sequence.

Anyone who has used Adobe Macromedia Flash should be familiar with these, but here is a short explanation: Tween moves a page element around, Color Tween creates a transition of color, Opacity Tween gradually changes the opacity of an object, Text Tween creates text effects, and the Sequence and Parallel classes manage the simultaneous or linked usage of other classes.

Here is, for example, an explanation of the Tween class usage:

The Tween class
CONSTRUCTOR
var t = new Tween(object,property,easing,start,end,duration,suffixe);

object:
type:Object
The object you want to modify. It can be any object, a visual object that you want to animate ( document.body.style ) or an anymous object ( new Object() ).
property:
type:String
The property that is updated on the target object, it can be empty ('')
easing:
type:Function
The easing that will be applied to motion.
start:
type:Number
Start value
end:
type:Number
End value
duration:
type:Number
Animation duration in seconds
suffixe:
type:String
A string to append to the updated property ('%','pt','em' ...).

The actual code that makes the Tween example on the author's page work:

<div id="sq" style="width:50px;height:50px;position:relative;left:0px;border:1px solid #333333;"></div>
<input type="button" value="start()" onclick="
t1 = new tween (document.getElementById('sq').style,'left',Tween.elasticEaseOut,0,500,4,'px');
t1.start();">
<input type="button" onclick="t1.stop();" value="stop()">
<input type="button" onclick="t1.resume();" value="resume()">
<input type="button" onclick="t1.rewind();" value="rewind()">
<input type="button" onclick="t1.fforward();" value="fforward()">

The Motion Tween files are more lightweight than general purpose libraries like Prototype, and more focused in their functionality.

Advertisement

Partners

Related Resources

Other Resources

arrow