Last modified: May 18, 2011 15:43:52.

Transitions

Transitions represent the core feature of the CU3ER. They are powerful, visually appealing yet very easy to set up. You can define your transition defaults and then override it with custom settings for each transition, if needed – by doing it this way you don’t have to define each property over and over again, the CU3ER allows you to alter all you want once including the other attributes automatically.

NOTE:”Transition defaults” configures common slide transition properties for each slide transition.

Remember, the content of the CU3ER is defined in the node where each node defines a particular slide and each node defines a 3D transition between two slides nearby. The last node defines a 3D transition between the last and the first slide.

Let’s take a quick look at what are available transition(s) attributes:

  • type - 3D or 2D

    • type2D - "slide" or "fade"
  • columns - number of slicing columns each transition consists of
  • rows - number of slicing rows each transition consists of
  • flipOrder - angle of transition flow 0, 45, 90, 135, 180, 225, 270 & 315
  • flipOrderFromCenter - true or false
  • flipAngle - 90 or 180
  • flipDirection - left, right, top, bottom or any combination of them
  • flipShader - "flat" or "none"
  • flipColor - during transition, some other cube faces (beside your slide faces) will most likely become visible for a short period of time and you can define their color here
  • flipBoxDepth - z depth of slice in case flipAngle is set to 180
  • flipDepth - z offset value during slice flipping
  • flipEasing - ease function
  • flipDuration - time for each sliced cube transition
  • flipDelay - time each sliced cube will wait before starting transition. Please, notice that 'delay' is a cumulative value, which means it’s increasing gradually as all preceding delays are added to the delay of the cube already displayed.
  • flipDelayRandomize 0-1

XML example:

    
<transition 
	type="3D" 
	columns="5" 
	rows="3"
	type2D="slide"
	flipAngle="180"
	flipOrder="45"
	flipShader="flat" 
	flipOrderFromCenter="false" 
	flipDirection="down" 
	flipColor="0x463a00"
	flipBoxDepth="20" 
	lipDepth="180"
	flipEasing="Sine.easeOut"
	flipDuration=".8"
	flipDelay=".15"
	flipDelayRandomize=".5"
/>

As you can see, this node is the very essence of the CU3ER. By combining the attribute values, almost an endless number of possibilities for creating a unique transition can be achieved. Please, pay close attention to this node and make sure to understand each of these attributes well – it’s all you need to become a CU3ER ninja!

Check XML Reference for detailed information about available XML nodes & attributes.