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

XML location & structure

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

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

Overview

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.

CU3ER uses TweenMax, one of the most widely used flash tween engines. The tween settings are as easy as that, just include of your UI element as an XML attribute, set its "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" />

Below are the available XML attributes for defining the UI tweening properties of 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 a very important tween node because you define the appearance attributes for each UI item here.

If you want custom position, dimensions, colour of your UI element, this is the place where you can define it. Occurrence:

  • immediately after CU3ER is loaded - UI elements appear on the stage
  • immediately after any 3D transition has 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 / shown 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 is acceptable to only define those elements you want / require. Please check the respective nodes XML Reference for the default values.

Tween Out: <tweenOut />

Don't confuse this node with the "on mouse out" event!

This node configures the 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 starts
  • 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 prev or next button / symbol

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

Define only those properties which you want to tween. In such a case, the UI element, which was defined above, will tween the "x" position to "-35px".

It basically means that we applied a slide out transition and the element slides off the stage on the "x axis". Now, a 3D slide transition takes place and after it has finished, the same UI element is tweened with the pre-defined tween and appears on the stage.

Since we've only tweened the "x" property, CU3ER will only tween that property (the rest hasn't changed).

Tween Over: <tweenOver />

Tween over is the most common feature when creating an interactive UI. CU3ER allows you to define your "on mouse over" tween - the tween that takes place when the user rolls over the UI element.

You may wonder what happens when the user "rolls out" of a UI element? Simple, the <tweenIn> (transition in) is applied to the UI, and this element is set to its "default" state.

<!-- Example: this will change the colour of the UI item to red --> <tweenOver tint="0xFF0000" />

XML Reference