Create amazing Flash slideshows with CU3ER

December 1, 2009 • Actionscript 3, Flash, Reviews by Emanuele Feronato • 12 Comments

If you are looking for a fresh, original, XML customizable and free image slider, you should check out CU3ER.

Powered by Papervision3D, CU3ER an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.

I played with it a bit and starting from the built in example and following the docs I was able to create an interesting commented source code to help you all getting started:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
     <!-- first, define the settings -->
	<settings>
          <!-- set autoplay if you want the slideshow to... autoplay -->
          <auto_play> 
               <!-- the "loading" symbol and the time between a picture and another -->
               <defaults symbol="circular" time="4" /> 
               <!-- symbol position, size and color -->
               <tweenIn x="500" y="20" width="35" height="35" tint="0xFFFFFF" /> 
          </auto_play> 
          <!-- defining the look of the caption text -->
     	<description>
     	    <!-- font family and size -->
     	    <defaults heading_font="Verdana" heading_text_size = "12" paragraph_font="Verdana" paragraph_text_size = "11"/>
              <!-- description box itself -->
              <tweenIn tint="0x000000" x="0" y="240" alpha="0.5" width="520" height="80" />
          </description>
          <!-- "prev" button -->
         	<prev_button>
         	     <!-- corner styles -->
     		<defaults round_corners="25,0,25,0"/>
     		<!-- rollover effect -->
     		<tweenOver tint="0xFFFFFF" alpha="0.5" />
     		<tweenOut tint="0x000000" x="-50"/>
     	</prev_button>	
         	<prev_symbol>
         	     <!-- "prev" symbol (the arrow) -->
     		<defaults type="8" /> 
     	</prev_symbol>	
     	<!-- "next" button... same thing as "prev" -->
         	<next_button>
     		<defaults round_corners="0,25,0,25"/>			
     		<tweenOver tint="0xFFFFFF" alpha="0.5"/>
     		<tweenOut tint="0x000000" x="570" />
     	</next_button>
          <!-- "next" symbol... same thing as "prev" -->
         	<next_symbol>
     		<defaults type="8" /> 
     	</next_symbol>	
 
	</settings>  
     <!-- defining the slides -->  
     <slides>
          <!-- 1st slide -->  
          <slide>
               <!-- image url --> 
               <url>images/slide_1.jpg</url>
               <!-- image link --> 
               <link target="_blank">http://www.google.com/</link>
               <!-- image caption -->         
               <description>  
                    <!-- title -->     
                    <heading>This is my heading text</heading> 
                    <!-- description -->  
                    <paragraph>Paragraph text goes here!</paragraph>  
               </description>  
          </slide>
          <!-- transition -->
          <transition num="3" slicing="vertical" direction="down"/>
          <slide>
               <url>images/slide_2.jpg</url>
          </slide>		
          <!-- transition -->
          <transition num="3" slicing="vertical" direction="down"/>
          <slide>
               <url>images/slide_3.jpg</url>
          </slide>
          <!-- transition -->
          <transition num="4" direction="right" shader="flat" />
          <slide>
               <url>images/slide_4.jpg</url>
          </slide>
          <!-- transition -->
          <transition num="4" direction="left" shader="flat" />
          <slide>
               <url>images/slide_5.jpg</url>
          </slide>
          <!-- transition -->
          <transition num="4" direction="right" shader="none" />
     </slides>
</cu3er>

And this is the result:

I’ll definitively use it in a creative way on this blog during next days… check out CU3ER!!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.67 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 12 comments

  1. Avraham Saltoun

    on December 1, 2009 at 6:01 pm

    Great post. Keep up the good work.

  2. Guest

    on December 2, 2009 at 6:21 am

    i see a potential rubik’s cube clone somewhere?

  3. James Kershaw

    on December 2, 2009 at 8:24 am

    How were you able to resize it?

  4. Emanuele Feronato

    on December 2, 2009 at 12:47 pm

    if you refer to the example you can download from the official site, just style the containing div

  5. Jack

    on December 15, 2009 at 3:45 am

    Very confusing slideshow to properly configure but when done the results are more than satisfactory.

  6. Johannes

    on January 15, 2010 at 7:37 pm

    Hi – where did you upload the files on your server to? I’d like to use this in joomla but i can’t figure out where to put the aditional files and how and where i have to change URLs.

    Help would be great!

    cheers,
    Johannes

  7. Joomify

    on March 15, 2010 at 3:16 am

    Johannes,

    There is a Joomla module called QUBER that I used on my website Joomify.com come check it out.

    You can download QUBER for free from the Joomify forum.

    J

  8. Diogo Mourão

    on March 24, 2010 at 6:26 pm

    Hi there i whould like to know how do i put the cu3er in fullscreen mode by code. someone please help it’s important.

  9. Detlev

    on April 20, 2010 at 11:44 am

    Ciao,
    ho scoperto Cu3er pochi giorni fa e funziona perfettamente, ma una cosa che non riesco a fare è quella di ridurre la grandezza del contenitore.

    Ho realizzato il sito con Joomla e il CMS con Artisteer, non è che per caso qualcuno sa come fare.

    Grazie di cuore.

    Detlev

  10. Adi

    on June 20, 2010 at 9:05 pm

    your demo is not working in firefox. as is from others as well.

  11. Greg K

    on August 15, 2010 at 11:35 pm

    Any knowledge how to integrate Cu3er and Lightbox with the simple use of REL attributes? Thanks for the tips!

  12. percy

    on August 26, 2010 at 4:58 am

    Hi ^^, I have problems using DDBB CU3ER works with one variable I mean:

    flashvars.xml = “config.php?val1=1&val2=2
    CU3ER accept just one and when I call val2 in xml file, CU3ER doesn’t work, please help me.

    And when I use record set with php doesn’t work too.
    PLEASE HELP ME

< >