Cu3er, A Quick & Dirty Tutorial

Overview

CU3ER unfortunately depends on both Flash 9 & javascript to work. So if you expect lots of your visitors to lack either of them, CU3ER is not for you. Having said that, CU3ER is way cool!

In nutshell, you will need to:

  1. Download and upload the necessary files onto your sever
  2. Include cu3er.swf, swfobject.js, expressInstall.swf, optionally font.swf
  3. Upload your images and note their absolute location.
  4. Add a div with alternate content in case js or Flash are not available
  5. Create a config.xml to communicate with your instance of CU3ER

A Quick Tutorial

Let’s get to it.

First, you need to dowload CU3ER, and upload the files to a folder on your server (e.g. “/cu3er”).

Second, you need include and configure the swfobject plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="path-to/cu3er/swfobject.js" type="text/javascript"></script>
 <script type="text/javascript">// <![CDATA[
        var flashvars = {};
        flashvars.xml = "path-to/cu3er/config.xml";
        flashvars.font = "path-to/cu3er/font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("path-to/cu3er/cu3er.swf",
            // Here you can set ID for the wrapper div
            "cu3er-container",
            // Here you can set the with for the flash application
            "564", "216", "9",
            "path-to/cu3er/swfobject/expressInstall.swf",
            flashvars, attributes);
// ]]></script>

Third, include the HTML for the CU3ER container and an alternative in case flash or javascript is disabled. The code below is not optimal, and it is not what I have on my homepage. You can place whatever HTML you’d like and I encourage to do so if you want to be able to tell your fwends your site is progressively enhanced.

1
2
3
4
5
6
7
<div id="home-slider">
<div id="cu3er-container"><!-- the cu3er container will be replaced by the Flash object, otherwise the content bellow will be displayed -->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!-- END replacement --></div>
</div>

The last step is to edit your config.xml file. This file basically passes all the parameters to your instance of CU3ER. Once you are acquainted with the available properties it will be a lot easier but the whole thing is pretty self-explanatory. Here is cropped version of the one I used for the animation on my homepage.

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
    <settings>
       
        <prev_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenIn width="40" height="40" alpha="0.4" />
            <tweenOver tint="0x000000" scaleX="1.1" scaleY="1.1" alpha="0.6" />
            <tweenOut tint="0x000000" />
        </prev_button>
       
        <prev_symbol>
            <tweenOver tint="0xFFFFFF" />          
        </prev_symbol>
       
        <next_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenIn width="40" height="40" alpha="0.4" />     
            <tweenOver tint="0x000000"  scaleX="1.1" scaleY="1.1" alpha="0.6" />
            <tweenOut tint="0x000000" />
        </next_button>
       
        <next_symbol>
            <tweenOver tint="0xFFFFFF" />
        </next_symbol> 
       
        <auto_play>
          <defaults symbol="circular" time="5" />
          <tweenIn width="30" height="30" y="25" x="539" alpha="0.4" />
          <tweenOut  />
          <tweenOver  />
        </auto_play>
       
        <description>
          <defaults  
            round_corners="5,5,5,5" paragraph_text_margin="-4, 0, 0, 10"
            paragraph_text_align="center" paragraph_font="Sansation Regular" paragraph_text_size="16"
         />
          <tweenIn tint="0x000000"  x="147" y="175" alpha="0.4" width="270" height="30" />
          <tweenOut alpha="0" x="32" y="300"  />
          <tweenOver alpha="0.6"  />
        </description>

        <transitions shader="none" z_multiplier="5" cube_color="0xCCCCCC" />

        <general slide_panel_width="564" slide_panel_height="216" />
           
    </settings>    

    <slides>
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/crrglobal.jpg</url>
            <description>
                <link>http://crrglobal.com/</link>    
                <paragraph>CRR Global</paragraph>
            </description>
        </slide>
        <transition num="1" direction="right" shader="flat"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/curveshamilton.jpg</url>
            <description>
                <link>http://curveshamilton.com/</link>    
                <paragraph>Curves Hamilton</paragraph>
            </description>
        </slide>       
        <transition num="1" slicing="vertical" direction="down"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/sageportfoliogroup.jpg</url>
            <description>
                <link>http://sageportfoliogroup.com/</link>    
                <paragraph>Sage Portfolio Group</paragraph>
            </description>
        </slide>       
        <transition num="1" direction="right" shader="flat"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/kellywatt.jpg</url>
            <description>
                <link>http://kellywatt.ca/</link>    
                <paragraph>Kelly Watt... writer</paragraph>    
            </description>
        </slide>
        <transition num="1" slicing="vertical" direction="down"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/palisades.jpg</url>
            <description>
                <link>http://palisadespointe.ca/small/</link>    
                <paragraph>Palisades Pointe</paragraph>    
            </description>
        </slide>
        <transition num="1" slicing="vertical" direction="down"/>
               
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/preferredrecyclingequipment.jpg</url>
            <description>
                <link>http://preferredrecyclingequipment.com/</link>    
                <paragraph>Preferred Recycling Equipment</paragraph>
            </description>
        </slide>
        <transition num="1" direction="right" shader="flat"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/1A03.jpg</url>
            <description>
                <link>http://rodrigoflores.ca/1A03/</link>    
                <paragraph>Web Essay On Social Media</paragraph>
            </description>
        </slide>
        <transition num="1" slicing="vertical" direction="down"/>
   
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/plaidpencil.jpg</url>
            <description>
                <link>http://plaidpencil.com/</link>    
                <paragraph>Plaid Pencil</paragraph>
            </description>
        </slide>
        <transition num="1" direction="right" shader="flat"/>
               
    </slides>
</cu3er>

So, there you have it. I know it looks like a lot but I think it’s totally worthy, don’t you?

If you want to really dig into this technology, please visit the fabulous, official CU3ER documentation.

Trust me, after you do this once, doing it again will be a piece of cake.

If you know any other great galleries, please leave a comment and let me know.

Have fun!

break

Current (First!) Poll

Which of the following do you think will have a greater impact on your final decision of hiring a particular web designer? (Pick two)

View Results

Website Designed & Developed by Rodrigo Flores © 2010