Tween Engine Overview

This engine is based on Greensock Tween­ing Plat­form and adapted to Lingo. The full list of its meth­ods can be found at the end of this arti­cle. In short – with the help of this engine you can eas­ily and quickly ani­mate dif­fer­ent prop­er­ties of such objects as sprites, mod­els, cam­eras, etc. In case you need to add extra func­tion­al­ity you can use the Plug-in archi­tec­ture to write your own plu­gin. All of the ani­ma­tions are time-based.
So, assume that we want to move a sprite on chan­nel 1 posi­tioned on point( 10, 10) to posi­tion point(300, 10) in exactly 2.5 sec. We take the fol­low­ing steps:
1. Take an instance of “Tween­Lite” script
2. Call to( ) method with para­me­ters as below:
– the object that should be ani­mated
– the dura­tion of the ani­ma­tion in sec­onds
– a prop­erty list con­tain­ing the prop­er­ties that we want to ani­mate and their end val­ues as a result of the animation.

  Tween = script( "TweenLite" ).getInstance()
  Tween.to( sprite(1), 2.5, [#x:300, #ease:"Back.EaseOut"] )

In this exam­ple the #ease prop­erty is an addi­tional prop­erty, which shows how exactly the tran­si­tion from 10 to 300 is to be per­formed. If the prop­erty is not set, it is con­sid­ered as “Linear.None” by default. To see the dif­fer­ences between the ease func­tions, watch the demo below.
In a sin­gle tween you can ani­mate more than one prop­erty 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 sim­ple tuto­r­ial:
1. Down­load TweenEngine.cst or Tweengine.zip and save it in a folder of your choice.

Tween EngineTween Engine ( 214 )Tween EngineTween Engine ( 93 )

2. Cre­ate a new, empty movie with stage dimen­sions 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 win­dow and draw a black square — about 32x32 pix­els.
5. Drag the square from the cast win­dow and drop it in the score’s chan­nel 1, frame 1. Posi­tion the sprite in the top — left area of the screen.
6. Cre­ate a movie script, name it “Ani­ma­tion” and paste the fol­low­ing 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 some­where on the stage — the square will go to the cursor’s posi­tion in 3 sec­onds.
Try to change the dura­tion from 3 to 5 or to 1.25 to see the result. Try dif­fer­ent eas­ing func­tions, for exam­ple “Back.EaseOut“
The movie below demon­strates some of the Twee­nEngine features.

Here is a list with Tween Engine’s pub­lic meth­ods and properties:

 
Comments

On July 10, Twee­nEngine was updated with a few more things:
– Stepped ease
– Rough ease
– Stretch plu­gin
– Roll plugin

Leave a Reply
*