Tween


Creates Tween animation from graphical objects such as characters and sprites.
It allows you to create simple animation, such as moving from one point to another, or changing from one color to another.
Utage’s Tween animation uses iTween. For more details, please also refer to iTween’s official web site.

Sample

Reference

Command Description Arg1 Arg2 Arg3 Arg4 Arg5 Arg6
Tween Converts the display object into Tween animation Name of the object to convert TweenType Tween parameters easeType loopType waitType

Details of each argument are given below.

Name of the Object to Convert (Arg1)

For the name of the object to convert into Tween animation, you should specify one of the following, or the character name or sprite name.

Name Description
MessageWindow Message window
Graphics All graphics such as characters, backgrounds, sprites, etc.
Camera All cameras including UIs, graphics, etc.
Character Name or Sprite Name By specifying a character name or sprite name, the conversion effect is only applied to that object

TweenType (Arg2), Tween Parameters (Arg3)

TweenType specifies how the animation should be created.

The Tween parameters specify the values to be used for movement and time. The parameters that can be used will vary depending on the TweenType.

Example: x=200 islocal=true
Example: time=3 alpha=0

As shown in the examples above, you can specify:
parameter_name=value
with each parameter being delimited by a space.

Category TweenType (Arg2) Description Tween Parameter (Arg3)
Move MoveTo Moves from the current coordinates to the specified coordinates. time,delay,x,y,z,speed,islocal
MoveFrom Moves from the specified coordinates to the current coordinates. time,delay,x,y,z,speed,islocal
MoveBy Moves from the current coordinates by the specified amount. time,delay,x,y,z,speed
MoveAdd Allows you to use MoveBy’s effect at the same time as another Tween. time,delay,x,y,z,speed
PunchPosition Moves by the specified coordinates as if having received a punch, and then returns to the original position. time,delay,x,y,z
ShakePosition Shakes by the specified coordinates, and then returns to the original position.Same as the Shake command. time,delay,x,y,z,islocal
Rotate RotateTo Rotates from the current angle to the specified angle. time,delay,x,y,z,speed,islocal
RotateFrom Rotates from the specified angle to the current angle. time,delay,x,y,z,speed,islocal
RotateBy Rotates from the current angle by the specified amount. time,delay,x,y,z,speed
RotateAdd Allows you to use RotateBy’s effect at the same time as another Tween. time,delay,x,y,z,speed
PunchRotation Rotates by the specified angle as if having received a punch, and then returns to the original position. time,delay,x,y,z
ShakeRotation Shakes by the specified angle, and then returns to the original position. time,delay,x,y,z
Scale ScaleTo Scales up or down from the current scale to the specified scale value. time,delay,x,y,z,speed
ScaleFrom Scales up or down from the specified scale to the current scale. time,delay,x,y,z,speed
ScaleBy Scales up or down from the current scale by the specified amount. time,delay,x,y,z,speed
ScaleAdd Allows you to use ScaleBy’s effect at the same time as another Tween. time,delay,x,y,z,speed
PunchScale Scales up or down by the specified scale value as if having received a punch, and then returns to the original position. time,delay,x,y,z
ShakeScale Scales up or down by the specified scale value, and then returns to the original position. time,delay,x,y,z
Color ColorTo Change from the current color to the specified color. time,delay,color,alpha,r,g,b,a
ColorFrom Change from the specified color to the current color. time,delay,color,alpha,r,g,b,a

Tween Parameter (Arg3) Details

Parameter name Description
time Number of seconds for the animation. If not set, then it is set to one second.
speed Instead of using the time parameter, makes the animation play at the specified speed.
delay Time delay before the start of the animation. If not set, then it is set to zero seconds.
x,y,z Amount of animation, although how this is used will depend on the TweenType
isLocal Specifies whether you are using local or global coordinates. In Utage, specifies whether to consider the layer’s offset.
color Color value. Written in the same way as the color value data item
alpha Alpha value. A value between 0.0 and 1.0.
r,g,b,a Color value. Red value, green value, blue value, and alpha value. A value between 0.0 and 1.0

EaseType (Arg4)

This specifies how to change the animation. You can add soft movements such as “Move quickly to start with and then gradually more slowly,” or “once you have come down, rush forward at once,” or “go forward at once, and then recoil back.”
Enter one of the following values:

easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,
easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInBounce,easeOutBounce,easeInOutBounce,
easeInBack,easeOutBack,easeInOutBack,easeInElastic,easeOutElastic,easeInOutElastic,linear,spring

Sample Curve Demo

Table

LoopType (Arg5)

How to Loop Animation

LoopType Description
loop Loops the animation.
You can specify the number of loops to be executed by entering for example, loop=3.
pingPong Makes the animation do a ping-pong loop.
Makes it loop as animation playback > reverse playback > playback…
You can specify the number of playbacks to be executed by entering for example, pingPong=6.
A playback and a reverse playback are counted as one occurrence each. (Please note that a playback and a reverse playback are not considered as a set and counted as one occurrence.)

WaitType (Arg6)

Specifies how to wait for the animation effect to be finished.
With Tween and Shake effects, the next command is normally not executed until the end of the animation; however, if you set WaitType, you can execute the next command without waiting for it to be completed.

WaitType Description
Not set The next command is not executed until this command’s effect has finished.
PageWait Waits for the effect to finish when showing a new page.
Add Waits until the effect is finished based no the same timing as the next effect.
Please use this functionality for combining multiple effect commands.
NoWait Does not wait for any effect to be finished.
However, if you are skipping over a page during the effect and you do a save, then it will not be able to do a normal load later on; therefore, you should only use this in situations when you are not doing a save.
In addition, save/load operations are not applicable to Shake commands (hence you can use NoWait without any problems).
The NoWait functionality (effects that skip over pages) is still being tweaked. Please wait for an update.