Tween Engine Overview

This engine is based on Greensock Tween­ing Plat­form and adapt­ed to Lin­go. 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­i­ly and quick­ly 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­i­ty you can use the Plug-in archi­tec­ture to write your own plug­in. 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 exact­ly 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­mat­ed
— the dura­tion of the ani­ma­tion in sec­onds
— a prop­er­ty list con­tain­ing the prop­er­ties that we want to ani­mate and their end val­ues as a result of the ani­ma­tion.

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

In this exam­ple the #ease prop­er­ty is an addi­tion­al prop­er­ty, which shows how exact­ly the tran­si­tion from 10 to 300 is to be per­formed. If the prop­er­ty 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­er­ty at a time: 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­ri­al:
1. Down­load TweenEngine.cst or and save it in a fold­er of your choice.

Tween Cast (9706 down­loads) Tween Engine (8832 down­loads)

2. Cre­ate a new, emp­ty movie with stage dimen­sions 640x480. Set the stage colour to white and save the movie in the same fold­er.
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 with­in it:

show code
global Tween
global animate

on startMovie()
  _movie.puppetTempo( 60 )
  Tween = script( "TweenLite" ).getInstance()
  animate = FALSE
end startMovie

on stopMovie()
  if ( _system.environmentPropList.runMode contains "author" ) then
    dispatchCommand( 35334 ) -- Recompiles all scripts
  end if
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) 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 fea­tures.

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


On July 10, Twee­nEngine was updat­ed with a few more things:
— Stepped ease
— Rough ease
— Stretch plug­in
— Roll plug­in