Documentation › Quick Start Interested in new CU3ER version? Find more info about upcoming release!

Quick Start

CU3ER in 10 ease steps

  1. Download the CU3ER http://www.progressivered.com/cu3er/download/ and extract zip archive files to the separate folder.
  2. (Optional) Create your slide images and put them into the 'cu3er > images' folder in case you don't want to use ones provided.
  3. Backup config.xml (rename it to something like config_bkp.xml) and create new config.xml file in the same location using your favorite text editor.
  4. (Optional) Customize demo.htm if you want to preview the CU3ER in web page. Otherwise skip this step. Make sure to set desired CU3ER dimensions in <script> tag in your demo.htm
  5. Customize your newly created config.xml (view XML customizing below)
  6. Preview & test your CU3ER either by viewing cu3er.swf directly or by opening the demo.htm in your browser.
  7. Continue customizing xml & testing it until you are completely satisfied with how CU3ER looks.
  8. Copy the <script> tags and the <div> cu3er container from the demo.htm to respective places into your actual page.
  9. Upload files to your server and make sure you’ve set the absolute url paths for cu3er.swf, config.xml, font.swf and images if these files are in different directories on server.
  10. You’ve finished, enjoy!

XML Customizing

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>

</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 didn't define any user interface so far, CU3ER automatically includes 'auto play' feature to cycle trough each slide after period of 5 seconds. For more info about CU3ER default settings check XML reference and node default values.

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 beetwen 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 possibilities 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 beetween first & second slide -->
      <transition num="3" slicing="vertical" direction="down"/>

      <slide>
      	  <url>images/slide_2.jpg</url>
      </slide>	
	
	  <!-- changing transition beetween 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>

That's it?

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!