Last modified: August 16, 2011 15:22:08.

UI Tweening & tween views

What is UI tweening?

The CU3ER allows you to tween all UI elements at your convenience just like you would normally do with any other user interface elements. Available tween states are:

UI Tweening

Video tutorial: 6min 42sec
What you will learn:
  • OverviewTween view types and how to use them.
  • tweenShowDefining appearance attributes of UI elements.
  • tweenOverDefining mouse over behavior of UI elements.
  • tweenHideDefining removal of UI elements from the stage.
  • tweenSelectedDefining the behavior of selected UI elements.

tweenShow

tween settings for showing up of particular UI element, for example, fade in or slide in to stage when transition ends. Here, you are defining the appearance attributes for each UI. Examples of 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)

TweenShow takes place right after the end of a 3D slide transition if 'Hide on Transition' attribute in set to true. Its purpose is to define the way you want your UI to be added/showed on the stage

.

tweenOver

Define your “on mouse over” tween – the tween that takes place when the user rolls over a UI element, for example, change color on mouse over;

You may wonder what happens when the user “rolls out” an UI element? Simply, the tweenShow is applied to the UI, and this element is set to its 'normal' state.

tweenHide

This node configures tween whose purpose is to define the way you want your UI to be removed/hidden from the stage. Some occurrence scenarios:

  • 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 'visibility' panel)

TweenSelected

Tween settings when object is selected. This is applicable only to thumb, thumb title & thumb image tween settings as only these can have selected state (states that represent current slide displayed on stage)

What can be tweened?

Following user interface and indicators and their elements have ability to be animated through tweening:

  • Navigation buttons and its

    • Navigation symbols
  • Thumbnails and its

    • thumb(s)
    • image
    • title
    • scroller
  • Description Box and its

    • heading
    • paragraph
  • Autoplay indicator and its

    • loader element
  • Preloader and its

    • loader element

Common tweenable properties in most cases are:

  • vertical offset (x position)
  • horizontal offset (y position)
  • width
  • height
  • scaleX
  • scaleY
  • color
  • alpha
  • tween duration
  • tween delay
  • ease function
  • properties such as margin, padding, spacing, radius etc. specific for particular tweenable object.

All tweenable settings are available for editing in corresponding properties bars. If panels or settings are disabled (faded), those settings are not tweenable.

UI tweening in cManager

Setting UI tweens in cManager is very easy due to the fact that you have available separate views for every tween you are working on. To set tween properties you need simply to switch to appropriate tween view and alter object attributes either by directly manipulating them on stage or changing settings in the property bar.

ViewBar is place where you switch among available tween views:

To set UI tweening you can perform following actions:

  1. select desired element by clicking on it
  2. choose desired tween view from ViewBar you would like to work on
  3. change/alter available settings either by directly manipulating object on stage or changing object settings in it's properties bar
  4. Preview your settings either by:
    • switching between tween views through viewBar
    • preview complete CU3ER by hitting 'preview' button.