This engine is based on Greensock Tweening Platform and adapted to Lingo. The full list of its methods can be found at the end of this article. In short – with the help of this engine you can easily and quickly animate different properties of such objects as sprites, models, cameras, etc. In case you need to add extra functionality you can use the Plug-in architecture to write your own plugin. All of the animations are time-based.
So, assume that we want to move a sprite on channel 1 positioned on point( 10, 10) to position point(300, 10) in exactly 2.5 sec. We take the following steps:
1. Take an instance of “TweenLite” script
2. Call to( ) method with parameters as below:
– the object that should be animated
– the duration of the animation in seconds
– a property list containing the properties that we want to animate and their end values as a result of the animation.
Tween = script( "TweenLite" ).getInstance()
Tween.to( sprite(1), 2.5, [#x:300, #ease:"Back.EaseOut"] )
In this example the #ease property is an additional property, which shows how exactly the transition from 10 to 300 is to be performed. If the property is not set, it is considered as “Linear.None” by default. To see the differences between the ease functions, watch the demo below.
In a single tween you can animate more than one property at a time:
Tween.to( sprite(1), 2.5, [#x:300, #y:100, #rotation:22.5, #color:rgb("#FF8800"), #blend:20, #ease:"Back.EaseOut" ] )
So, there is a simple tutorial:
1. Download TweenEngine.cst or Tweengine.zip and save it in a folder of your choice.
Tween Cast (10616 downloads ) Tween Engine (9813 downloads )
2. Create a new, empty movie with stage dimensions 640×480. Set the stage colour to white and save the movie in the same folder.
3. Link the cast TweenEngine.cst to the movie: Modify>Movie>Casts… > Link…
4. Open the Paint window and draw a black square – about 32×32 pixels.
5. Drag the square from the cast window and drop it in the score’s channel 1, frame 1. Position the sprite in the top – left area of the screen.
6. Create a movie script, name it “Animation” and paste the following code within it:
[lingo]
global Tween
global animate
on startMovie()
_movie.puppetTempo( 60 )
Tween = script( "TweenLite" ).getInstance()
animate = FALSE
end startMovie
on stopMovie()
Tween.destroy()
if ( _system.environmentPropList.runMode contains "author" ) then
dispatchCommand( 35334 ) — Recompiles all scripts
end if
_global.clearGlobals()
end stopMovie
on exitFrame()
_movie.go( _movie.frame )
end exitFrame
on mouseDown()
if( not animate ) then
animate = TRUE
moveToCursorPosition( _mouse.mouseloc )
end if
end mouseDown
on moveToCursorPosition( pt )
sprite(1).color = color(0,153,0)
Tween.to( sprite( 1 ), 3, [ #x:pt.locH, #y:pt.locV, #ease:"Sine.EaseOut", #onComplete:[#handler:#AnimationFinished, #object:_movie] ] )
end moveToCursorPosition
on animationFinished( me, args )
animate = FALSE
sprite(1).color = color(0,0,0)
end animationFinished
[/lingo]
Run the movie and click somewhere on the stage – the square will go to the cursor’s position in 3 seconds.
Try to change the duration from 3 to 5 or to 1.25 to see the result. Try different easing functions, for example “Back.EaseOut”
The movie below demonstrates some of the TweenEngine features.
Here is a list with Tween Engine’s public methods and properties:
On July 10, TweenEngine was updated with a few more things:
– Stepped ease
– Rough ease
– Stretch plugin
– Roll plugin