CU3ER - Quick Start

  1. Download the CU3ER ZIP and extract the archive in a separate folder.

  2. (Optional) Create your slide images and put them into the "cu3er > images" folder in case you don't want to use the ones provided.

  3. Backup config.xml (rename it to something like config_bkp.xml) and create a new config.xml file in the same location using your favourite text editor.

  4. (Optional) Customize demo.htm if you want to preview the CU3ER in a 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 customising below)

  6. Preview & test your CU3ER either by viewing cu3er.swf directly or by opening the demo.htm in your browser.

  7. Continue customising 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 Customisation

Step 1: Config XML

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

<?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 a 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 haven't defined a user interface so far, CU3ER automatically includes the "auto play" feature to cycle through each slide after a period of 5 seconds. For more info about CU3ER's default settings read the XML reference and node default values.

Step 3: Include navigation buttons & symbols

Before we jump into customising our 3D transitions lets include navigation buttons & symbols for easier cycling through the slides.

We will do this by including prev & next navigation button nodes, along with prev & next symbol nodes, inside the <settings> node where we define all of the user interface elements and 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>

Step 4: Customize 3D transition

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

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

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: Customising 3D transitions further

Lets customise transitions between the second and third slide by changing the 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 only need to alter properties you want to change, unaltered settings are detected by default.

Step 6: Even more customization

Lets add two more slides and more transitions. 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 the possibilities that CU3ER has.

This is just a brief introduction to get you started, please check the documentation to get familiar about all of the CU3ER features and possibilities.