Step 1:Config XML

We have created the new config.xml file and saved it in cu3er folder. Lets start configuring it by adding following into:

<?xml version="1.0" encoding="utf-8" ?>

</cu3er>

If we test our page now you will see error appears since images CU3ER need to display are not defined in XML yet. We will do it right now in step that follows.

Step 2: Add slides

Lets add couple of slides (images located in 'images' folder)

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>

    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>
        
        <slide>
            <url>images/slide_2.jpg</url>
        </slide>
        
        <slide>
            <url>images/slide_3.jpg</url>
        </slide>	
    </slides>

</cu3er>

Since we didnt define any user interface so far, CU3ER automaticaly includes 'auto play' feature to cycle trough each slide after period of 5 seconds. For more info about CU3ER default settings check XML reference.

Step 3: Include navigation buttons & symbols

Before we jump into customizing our 3D transitions lets include navigation buttons & symbols for easier cycling trough the slides. We will do this by including prev & next navigation button nodes, along with prev & next symbol nodes, inside <settings> node where we are defining all user interface elements and its properties:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<settings>
    	<prev_button></prev_button>
    	<prev_symbol></prev_symbol>
    	<next_button></next_button>
    	<next_symbol></next_symbol>
	</settings>
    
    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>
        
        <slide>
            <url>images/slide_2.jpg</url>
        </slide>
        
        <slide>
            <url>images/slide_3.jpg</url>
        </slide>	
    </slides>

</cu3er>

Check CU3ER documentation about previous button, previous symbol, next button and next symbol for further information about their features and attributes.

Step 4: Customize 3D transition

Common properties for each slide 3D transition are defined in ”Transition template” <transitions>. You can override "transition template" properties and customize each particular <transition> further in order to make each 3D transition unique.

For the case of simplicity in this example, we will stick with default 3D transition template settings and override those trough custom settings per 3D transition

Lets change transition between first and second slide. We will do it by including <transition> node among those two <slide> nodes:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<settings>
    	<prev_button></prev_button>
    	<prev_symbol></prev_symbol>
    	<next_button></next_button>
    	<next_symbol></next_symbol>
	</settings>
    
    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>
		<!-- changing transition between first & second slide -->
        <transition num="3" slicing="vertical" direction="down"/>
        <slide>
       		<url>images/slide_2.jpg</url>
        </slide>		
		<!-- transitions properties defined in transitions template -->
		<slide>
            <url>images/slide_3.jpg</url>
        </slide>
        <!-- transitions properties defined in transitions template -->
	</slides>

</cu3er>

Step 5: Customizing 3D transitions further

Lets customize transition among second and third slide by changing number of slices, slicing & rotation direction and shader type:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<settings>
    	<prev_button></prev_button>
    	<prev_symbol></prev_symbol>
    	<next_button></next_button>
    	<next_symbol></next_symbol>
	</settings>
    
    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>
		<!-- changing transition between first & second slide -->
        <transition num="3" slicing="vertical" />
        <slide>
       		<url>images/slide_2.jpg</url>
        </slide>		
		<!-- changing transition between second & third slide -->
		<transition num="4" direction="right" shader="phong" />
		<slide>
            <url>images/slide_3.jpg</url>
        </slide>
        <!-- transitions properties defined in transitions template -->
	</slides>

</cu3er>

As you see posibilities and combinations are endless. You need to alter just properties you want to change, unaltered settings are detected as desirable.

Step 6: Even more customization

Lets add two more slides and transition among them. Also, lets spice up our navigation buttons and symbols with some additional properties:

<?xml version="1.0" encoding="utf-8" ?>

<cu3er>
	<settings>
		
    	<prev_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</prev_button>
		
    	<prev_symbol>
			<tweenOver tint="0x000000" />			
		</prev_symbol>
		
    	<next_button>
			<defaults round_corners="5,5,5,5"/>			
			<tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</next_button>
		
    	<next_symbol>
			<tweenOver tint="0x000000" />
		</next_symbol>	
			
	</settings>    

	<slides>
	
      <slide>
     	  <url>images/slide_1.jpg</url>
      </slide>

	  <!-- changing transition between first & second slide -->
      <transition num="3" slicing="vertical" direction="down"/>

      <slide>
      	  <url>images/slide_2.jpg</url>
      </slide>	
	
	  <!-- changing transition between second & third slide -->
      <transition num="4" direction="right" shader="flat" />

	  <slide>
          <url>images/slide_3.jpg</url>
      </slide>
      
      <!-- transitions properties defined in transitions template -->

      <slide>
          <url>images/slide_4.jpg</url>
      </slide>

	  <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />

      <slide>
          <url>images/slide_5.jpg</url>
      </slide>
      
	  <!-- transitions properties defined in transitions template -->
		
	</slides>
</cu3er>

Of course not! We barely scratched the surface of CU3ER possibilities. This is just a brief introducing to get you started, please check documentation to get familiar about all CU3ER features and possibilities. Feel free to play and experiments - you will love it!