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.
2. Create a new, empty movie with stage dimensions 640x480. 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 32x32 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:
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
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: