Tweening: <tweenIn />, <tweenOut /> , <tweenOver />

XML location & structure

<cu3er> 
   <settings> 
      <xxxxx*> 
         <tweenIn ... /> 
         <tweenOut ... /> 
         <tweenOver ... /> 
      </ xxxxx*> 
   </settings> 
</cu3er>

* xxxxx - any of available UI nodes: auto_play, description, preloader, next_button, prev_button, next_symbol or prev_symbol

Overview

The CU3ER allows you to tween all UI elements at your convenience, by setting simply the tween properties for “transition in”, “transition out”, and “mouse over” events in respective UI XML nodes. These events all have respective XML nodes in which you can define their tweening parameters.

The CU3ER uses TweenMax, one of the most widely used flash tween engines. Therefore, the tween setting is as easy as that - just include each property of your UI element as an XML attribute, set its value as “tween” value, and you’re ready to go.

<!-- Example: -->
<tweenIn time="0.7" x="50" y="200" height="35" width="35" /> 
<tweenOut delay="0.05" x="-50" /> 
<tweenOver tint="0xeef608" />

Available XML attributes for defining tweening properties of UI items in each tween node:

time (number)
delay (number)
x (number)
y (number)
width (number)
height (number)
rotation (number 0-360 range)
tint (color in 0x000000 format)
alpha (number - range: 0-1)
scaleX (number - range: 0-1)
scaleY (number - range: 0-1)

Tween In: <tweenIn />

This is very important tween node because you are defining the appearance attributes for each UI item here. If you want to custom position, dimensions, color of your UI element, this is the place where you can define it. Occurrence:

immediately after the CU3ER is loaded - UI elements appear on the stage
immediately after any 3D transition has been finished
on any user’s activity detected by mouse move (if UI is hidden)

TweenIn takes place right after the end of a 3D slide transition. Its purpose is to define the way you want your UI to be added/showed on the stage.

<!-- Example: -->
<tweenIn time="0.7" x="50" y="200" height="35" width="35" />

NOTE: You don’t have to define all attributes. It would be acceptable to define only those you want to alter. Please, check XML Reference for UI elements and their respective tween node default values

Tween Out: <tweenOut />

Don’t confuse this node with the “on mouse out” event! This node configures transition out tween whose purpose is to define the way you want your UI to be removed/hidden from the stage. Occurence

just before any 3D slide transition has started
on auto play time out
on any user’s inactivity after the defined period of time has expired (configured in <general> node)
on clicking the next or prev button/symbol

<!-- Example: slide out object away from stage: -->
<tweenOut x="-35" />

We define only those properties which we want to tween. In such a case, our UI element, which was defined above, will tween x position to –35px. It basically means that we applied slide out transition and element slides off the stage on x axis. Now, 3D slide transition takes place and after it’s been finished, the same UI element is tweened with the defined tween and appears on the stage. Since we’ve tweened only x property, the CU3ER will tween in only that (the rest hasn’t changed).

Tween Over: <tweenOver />

Tween over is the most common feature when making interactive UI. The CU3ER allows you to define your “on mouse over” tween – the tween that takes place when the user rolls over UI element.

You may wonder what happens when the user “rolls out” an UI element? Simply, the <tweenIn> (transition in) is applied to the UI, and this element is set to its 'normal' state.

 
<tweenOver tint="0xFF0000" />

XML Reference

XML Reference › Auto Play XML Reference › Preloader XML Reference › Previous Button XML Reference › Next_button XML Reference › Previous Symbol XML Reference › Next Symbol XML Reference › Description