CU3ER is a Flash-based, three dimensional content switcher that provides smooth, spin, flip, slice, and shade-image transitions.
Stefan Kovac, a Novi Sad, Serbia-based interactive designer, created CU3ER, and provides it to designers with a fairly open license that allows for use in commercial projects. Be sure to read the license carefully before employing CU3ER. (You can find the CU3ER license information at the bottom of the CU3ER About page.)
How CU3ER Works
At its core, CU3ER is both a Flash file and an XML configuration file. The configuration file sets the paths for the images and is the repository of the .swf settings.
According to Kovac, "When the page gets loaded, the CU3ER is initiated and first what it will look for is an XML configuration file (optionally .swf font file too, if the defined variable of this file was found). This will be loaded for future use. After loading and parsing [the] XML, the CU3ER configures itself by its defined settings. Then it starts loading images (slides). As soon as the first image is fully loaded, it is displayed and the rest of the images are loaded in the background. Either a 3D transition to the next image is applied after the specific amount of time has passed or the user’s input (mouse click) is 'listened' to and an action performed accordingly, depending on the configuration settings. It is as simple as that."
Download CU3ER
You can download CU3ER at http://www.progressivered.com/cu3er/download/. What you'll get is a 163K zip folder with a copy of the CU3ER license, folders for images and JavaScript, the CU3ER .swf, the configuration file, and a demonstration HTML page.
Backup and Update the Configuration File
Next, make a copy of the configuration file and give it a new name. This copy will be your backup in the event that you want to review the original configuration settings. I called my backup file config-backup.xml.
In the configuration file, you'll find about 50 lines of straightforward XML mark-up. You can either work with this mark-up as the base for your switcher or you can start from scratch, using Kovac's excellent configuration file quick start guide or the extensive CU3ER documentation.
Embedding CU3ER is as simple as placing any .swf.
A Quick Demonstration
Here's a quick demonstration. Because it is Spring and (at the time of writing) the U.S. professional baseball season starts next week, I am going to pretend that I am creating my content slider for a sporting goods retailer that wants to promote baseball-related products.
I start by creating four baseball-themed "hero" images for use in the CU3ER. For speed, I am going to make these images 600-by-300 pixels to match the dimensions specified in the CU3ER demonstration HTML.
If I had wanted to change the image (or stage) dimensions, I could have done so by changing the JavaScript in the HTML file or by setting the stage size in the XML configuration file.
Here is a brief look at the JavaScript I would have needed to adjust.
<script type="text/javascript">
var flashvars = {};
flashvars.xml = "config.xml";
flashvars.font = "font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);
</script>
The XML would have looked like this.
<general
slide_panel_width="600"
slide_panel_height="300"
slide_panel_horizontal_align="center"
slide_panel_vertical_align="center"
ui_visibility_time="2"
/>
With my baseball-themed images created, I need to add them to the XML configuration file. Since I am working from the example configuration file, this amounts to removing the last slide from the XML file and changing the URL path for the slide images.
<slides>
<slide>
<url>images/bb-slide-1.jpg</url>
</slide>
<!-- changing transition between first & second slide -->
<transition num="3" slicing="vertical" direction="down"/>
<slide>
<url>images/bb-slide-2.jpg</url>
</slide>
<!-- changing transition between second & third slide -->
<transition num="4" direction="right" shader="flat" />
<slide>
<url>images/bb-slide-3.jpg</url>
</slide>
<!-- transitions properties defined in transitions template -->
<slide>
<url>images/bb-slide-4.jpg</url>
</slide>
</slides>Next, I am going to set CU3ER to automatically rotate the images after three seconds. To do this, I just add some simple XML into the settings section of the configuration file.
<auto_play> <defaults symbol="circular" time="3" /> </auto_play>
At this point, I have a nice set of spun, flipped, and sliced images that would properly catch any site visitor's attention. Recognizing the importance of photos, I nonetheless don't think it will hurt to add a couple of short text descriptions.
Adding descriptions in CU3ER is a simple, two-step process.
First, I need to specify the description settings in the settings section of the configuration file.
<description> <defaults round_corners="5, 5, 0, 0" heading_font="Rockwell" heading_text_size="24" paragraph_font="Rockwell" paragraph_text_size="14" /> <tweenIn tint="0xf40f0f" alpha=".75" time="1" x="250" y="150" height="175" width="250" /> </description>
You should make note of the tweenIn attribute, which adds the description to the slide one second after the slide loads. Notice also that x and y establish the position, while height and width define the dimensions.
Next, I need to add the description to each slide. I can include links, too.
<slides>
<slide>
<url>images/bb-slide-1.jpg</url>
<description>
<link target="_self">somelink.html</link>
<heading>BASEBALL FEVER?</heading>
<paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec velit a leo faucibus bibendum. </paragraph>
</description>
</slide>
<!-- changing transition between first & second slide -->
<transition num="3" slicing="vertical" direction="down"/>
<slide>
<url>images/bb-slide-2.jpg</url>
<description>
<link target="_self">somelink.html</link>
<heading>Are You One of the Boys of Summer?</heading>
</description>
</slide>
<!-- changing transition between second & third slide -->
<transition num="4" direction="right" shader="flat" />
<slide>
<url>images/bb-slide-3.jpg</url>
<description>
<link target="_self">somelink.html</link>
<heading>CHOOSE YOUR WEAPON</heading>
</description>
</slide>
<!-- transitions properties defined in transitions template -->
<slide>
<url>images/bb-slide-4.jpg</url>
<description>
<link target="_self">somelink.html</link>
<heading>GLOVE TIME</heading>
<paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec velit a leo faucibus bibendum. </paragraph>
</description>
</slide>
</slides>
Finally, if I choose, I can adjust the actual slide transitions. The parameter num determines the number of slices. You can set slicing to either "vertical" or "horizontal," and direction can be "left," "right," "up," or "down."
Other available parameters include duration, delay, and shader to name some.
CU3ER is not going to work for every application, but it is relatively easy to use and it can help spice-up your designs.
