Tween Engine Overview

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 EngineTween Engine ( 416 )Tween EngineTween Engine ( 267 )

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:

show code
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:

 
Comments

On July 10, TweenEngine was updated with a few more things:
– Stepped ease
– Rough ease
– Stretch plugin
– Roll plugin