您现在的位置是：首页 > 站长 > 正文

站长

经典的CU3ER的应用教程

happyfhb2013-01-28站长1490

1. CU3ER：神奇惊人的3D图片切换效果

CU3ER是一个很不错的幻灯片图片切换、滑动flash，它基于XML。采用的是3D方式进行图片切换。只需简单的配置一下xml文件就可以拥有炫目的3D效果的图片展示。

CU3ER带来的创造力，可以给你的网站访问者提供超强悍的视觉冲击力，它同时提供友好的用户界面，吸引用户眼球。

目前中文版的使用文档稀缺，所以我把自己整理的中文使用方法发出来，大家一起来看下如何使用

1、必须文件、元素

cu3er.swf，swfobject.js，expressInstall.swf，图片若干张

这些文件要按目录分配好，目录完全可以自己定义。

我的目录结构示意图：

2、编写HTML代码

<div id=“cu3er-container”> 
     <a href=“http://www.adobe.com/go/getflashplayer”> 
        <img src=“images/get_flash_player.gif” alt=“Get Adobe Flash player? /> 
     </a> 
</div>

3、加入Javascript代码

<script type="text/javascript" src="js/swfobject/swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {}; 
flashvars.xml = "js/config.xml"; 
var attributes = {}; 
attributes.wmode = "transparent"; 
attributes.id = "slider"; 
swfobject.embedSWF("flash/cu3er.swf", "cu3er-container", "960", "272", "9", "expressInstall.swf", 
 flashvars, attributes); 
</script>

4、修改config.xml代码

<?xml version="1.0" encoding="utf-8" ?> 
<cu3er> 
    <settings>     
        <description> 
            <defaults heading_text_size="14" /> 
            <tweenIn tint="0x000000" y="218" alpha="0.4" height="60" /> 
        </description> 
        <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>     
         
        <auto_play>  
            <defaults symbol="circular" time="6" />  
            <tweenIn x="900" y="30" width="35" height="35" tint="0xFFFFFF" />  
            <tweenOver tint="0xCAEA15" alpha="1.0" /> 
        </auto_play>  
             
    </settings>     
 
    <slides> 
     
        <slide> 
            <url>images/s1.jpg</url> 
            <description> 
               <link target="_self" rel="nofollow">http://www.luckor.cn/</link> 
               <heading>乐扣网二维码电子商务平台</heading> 
               <paragraph> 
                  XHTML+CSS+JQUERY+FLASH+XML 
                  春雨贵如油 
               </paragraph> 
            </description> 
        </slide> 
        <!-- changing transition between first & second slide --> 
        <transition num="4" direction="down" shader="flat"/> 
        <slide> 
               <url>images/s2.jpg</url> 
            <description> 
               <link target="_self" rel="nofollow">http://marcoconstructionsotogrande.com/</link> 
               <heading>公共事业缴费平台</heading> 
               <paragraph> 
                  New Website Design For Marco Construction in Sotogrande. 
               </paragraph> 
            </description> 
        </slide>         
        <!-- changing transition between second & third slide --> 
        <transition num="4" direction="right" shader="flat" /> 
        <slide> 
            <url>images/s3.jpg</url> 
            <description> 
               <link target="_self" rel="nofollow">http://marcoconstructionsotogrande.com/</link> 
               <heading>Marco Construction Sotogrande</heading> 
               <paragraph> 
                  New Website Design For Marco Construction in Sotogrande. 
               </paragraph> 
            </description> 
        </slide> 
        <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05"  
z_multiplier="4"/> 
        <!-- transitions properties defined in transitions template --> 
                 
    </slides> 
</cu3er>

config.xml用于配置CU3ER的参数，可以控制显示的图片、文字、切换方式等等，详细的参数配置可以参照官方网站的文档。

2. 修改

修改按钮样式：
打开config.xml文件，<settings>。。。</settings>之间内容控制按钮样式。

修改图片和链接：
打开config.xml文件，<slides>。。。。</slides>之间根据需要修改图片和点击链接。

修改图片大小：
打开index.html文件，修改以下的内容

swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);

把宽度600，高度300改为所需的尺寸，代码下面的CSS也要注意一并修改#cu3er-container {width:600px; outline:0;}

3. 使用CU3ER的简单十步

Quick Start
使用CU3ER的简单十步：
1、下载CU3ER，解压缩文件到独立的文件夹。
2、（可选）创建你的图片并将它们放到cu3er的images目录下，如果你不使用提供的图片的话。
3、备份config.xml（可以重命名它为config_bkp.xml类似的名字）并在同样的位置创建新的config.xml。
4、（可选）如果你想在web页中预览CU3ER的话，自定义demo.htm。否则跳过这步。务必在demo.htm的<script>标签中定义CU3ER的尺寸。
5、自定义你新建的config.xml（查看下方的XML自定义指南）
6、预览并测试你的CU3ER，可直接查看cu3er.swf或通过浏览器打开demo.htm。
7、持续自定义xml并测试，直到你完全满意。
8、从demo.htm复制<script>标签和<div>cu3er容器到实际页面。
9、上传文件到你的服务器，当cu3er.swf、config.xml、font.swf和images目录在服务器中不同的目录时，请确认为它们设置了正确的路径。
10、完成了，享受它吧！

自定义XML指南：
步骤一、配置XML
我们已创建了新的config.xml文件并将它保存到cu3er文件夹中。让我们通过添加下列语句来配置它：
<?xml version=”1.0″ encoding=”utf-8″ ?>
<cu3er>
</cu3er>
这时我们测试的话会看到出现错误因为CU3ER需要的图片还没在XML中定义。我们现在来加入它。
步骤二、添加幻灯片
让我们添加一些幻灯片（图片位于images文件夹中）
<?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>
因为我们还有定义任何用户界面，CU3ER会自动使用“auto play“特性每5秒循环播放幻灯片。更多CU3ER默认设置请查看XML手册中节点默认值。
步骤三、加入导航按钮和符号
在我们自定义3D效果前让我们先加入导航按钮和符号，使更方便于幻灯片中循环。我们通过加入prev和next导航按钮节点来完成它，还有prev和next符号节点，在<setting>节点中我们定义全部用户界面元素和它们的属性：
<?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>
查看CU3ER文档中previous_button、previous_symbol、next_button和next_symbol获取它们更多特性和属性信息。
步骤四、自定义3D变换效果
每张幻灯片3D变换效果通用属性都在“变化模板”<transitions>中定义。也可以重载“变换模板”属性并自定义每个特殊<transition>来进一步使每个3D变换不同。
在本例为了简单起见，我们仍使用默认3D变换模板设置并通过自定义每个3D变换设置来重载。
让我们修改第1个和第2个幻灯片之间的变换。我们通过在两个<slide>节点间添加<transition>节点来实现。
<?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>
<!– 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>
正如你看到的组合和可能性是无穷的。你需要不断调整属性，直到你满意。
步骤六、更多自定义
让我们再添加2张幻灯片以及它们之间的变化。另外我们使用一些附加属性来给导航按钮和符号添点料：
<?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=”0×000000″ />
</prev_button>
<prev_symbol>
<tweenOver tint=”0×000000″ />
</prev_symbol>
<next_button>
<defaults round_corners=”5,5,5,5″/>
<tweenOver tint=”0xFFFFFF” scaleX=”1.1″ scaleY=”1.1″/>
<tweenOut tint=”0×000000″ />
</next_button>
<next_symbol>
<tweenOver tint=”0×000000″ />
</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>
<link>http://www.dangdang.com</link>
</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 –>
<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>
就这些？
当然不是了！我们仅仅给出了CU3ER可能的一点皮毛。这只是一个简短的介绍，请查阅文档熟悉全部CU3ER特性和可能。随意尝试它，你会喜欢上它的！

User Guide

用户界面：

一般 <general>
XML位置和结构：
<cu3er>
<settings>
<general />
</settings>
</cu3er>
设置幻灯片面板尺寸使它和图片尺寸匹配。然后设置面板相对于CU3ER舞台如何对齐：

译注：上图中蓝色矩形为幻灯片面板尺寸，白色矩形为CU3ER舞台。面板中显示的图片位于蓝色矩形中，且图片总是相对于蓝色矩形的左上角，如下所示：

图片小于面板尺寸图片和面板尺寸相等图片大于面板尺寸

属性	默认值	类型	描述
slide_panel_width	900	数字	幻灯片面板宽度（和图片宽度相同）
slide_panel_height	380	数字	幻灯片面板高度（和图片高度相同）
slide_panel_horizontal_align	left	字符串	面板相对于CU3ER.swf水平对齐方式，可选值：left、center、right
slide_panel_vertical_align	top	字符串	面板相对于CU3ER.swf垂直对齐方式，可选值：top、center、bottom
ui_visibility_time	3	数字	CU3ER检测用户活动/静止（鼠标移动）。如果用户在指定的时间（单位秒）内静止，所有的UI有元素都会应用tweenOut（译注：UI元素可以指定tweenOut节点及其属性）

Debug面板 <debug>
<cu3er>
<settings>
<debug />
</settings>
</cu3er>
包括本节点的话会启用Mr.DOOB stats（性能&内存监视界面）。

自动播放 <auto_play>
<cu3er>
<settings>
<auto_play>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</auto_play>
</settings>
</cu3er>
“自动播放”特性使CU3ER自动循环播放幻灯片。本特性可以在两种缺省方式下启用：XML中不包含本节点；XML中不包含导航节点（prev_button、next_button、prev_symbol或next_symbol）。
有两种“自动播放”指示方式：linear（直线）和circular（圆形，译注：类似倒计时，顺时针）。你还可以在两个图片之间添加缓动（tweening）。
“自动运行”可以包含下面四种节点：

节点/属性	<defaults/>	<tweenIn/>	<tweenOut/>	<tweenOver/>	类型	描述
symbol	linear				字符串	自动播放图形指示器。可选值：”circular”、”linear”
time	5				数字	自动播放两张幻灯片的间隔时间（单位秒）
time		0.3	0.3	0.3	数字	tween持续时间（单位秒）
delay		0	0	0	数字	tween发生前推迟时间（单位秒）
x		0			数字	x坐标（译注，相对于CU3ER stage）
y		0			数字	y坐标（译注，相对于CU3ER stage）
width		swf width			数字	宽度
height		5		15	数字	高度
rotation		0			数字	角度（单位度）
alpha		0.5	0	0.85	数字	对象α透明度范围从0～1
tint		0×000000			16进制	对象颜色，16进制数字
scaleX		1			数字	对象水平缩放比例，从0～无穷
scaleY		1			数字	对象垂直缩放比例，从0～无穷

“上一个”按钮 <prev_button> / “下一个”按钮 <next_button>
<cu3er>
<settings>
<prev_button>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</prev_button>
</settings>
</cu3er>
导航按钮表示为一个图形图案，用户在幻灯片中导航。点击这个按钮你可以指示CU3ER执行3D变换并显示XML中定义的上一个幻灯片。请看下图显示了上一个（导航）按钮变化不同round_corners设置的图案：

注意：“上一个”按钮在看第一张幻灯片时最后一张加载之前可能是禁用的。CU3ER会设置它的alpha属性为0.15，且使该按钮不能点击知道最后一张幻灯片加载完。
“上一个”按钮可包含节点：
<defaults />：属性round_corners = “topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius”
<tweenIn />
<tweenOut />
<tweenOver />

“上一个”符号 <prev_symbol> / “下一个”符号 <next_symbol>
<cu3er>
<settings>
<prev_symbol>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</prev_symbol>
</settings>
</cu3er>
有10个可选符号：

“上一个”符号包含节点：
<defaults />：属性type = “number”见上面可选符号类型
<tweenIn />
<tweenOut />
<tweenOver />

预加载 <preloader>
<cu3er>
<settings>
<preloader>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</preloader>
</settings>
</cu3er>
该特性允许你可视化追踪幻灯片加载过程。“Preloader”通过tween节点自动显示，如果请求的幻灯片还没有加载完的话。
有两种类型“preloader”指示器：linear和circular。
可选包含节点：
<defaults />：属性 symbol = “circular” 或 “linear”
<tweenIn />
<tweenOut />

描述框 <description>
<cu3er>
<settings>
<description>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</description>
</settings>
</cu3er>
允许你给每张幻灯片包含描述（标题和段落）。你可以通过通用文本属性设置每个文本框的全部外观样式（字体大小、外边距、行距、间距等），还可以给每张幻灯片的描述框设置链接和链接target。
标题文本位置总是描述框内0,0，宽度和描述框宽度相同。段落域位于标题下方，y左边依赖于标题域的高度。通过修改“margin”属性，你可以完成自定义段落和标题域的位置。
注意：只允许使用纯文本（不包含HTML标签）
注意：实际文字嵌入在<slide>节点中，更多信息请参考Slides
可选包含节点：
<defaults />
round_corners
heading_font
heading_text_size
heading_text_color
heading_text_align
heading_text_margin
heading_text_leading
heading_text_letterSpacing
paragraph_font
paragraph_text_size
paragraph_text_color
paragraph_text_align
paragraph_text_margin
paragraph_text_leading
paragraph_text_letterSpacing
<tweenIn />
<tweenOut />
<tweenOver />
3D变换：
变换模板 <transitions>
<cu3er>
<settings>
<transitions />
</settings>
</cu3er>
3D变化是CU3ER的核心特性。
注意：“变换模板”为每张幻灯片变换配置通用幻灯片变换属性。
可用属性：
num – 每次变换包含的切片数
slicing – 立方体切片方向：水平或垂直
direction - 变换方向 / 立方体旋转方向：上、下、左、右
shader – transition shading type – none, flat, phong
light_position- 如果“shader”设置不是“none”的话，使用这个属性定义shading的x、y、z光线位置
cube_color- during transition, some other cube faces (beside your slide faces) will most likely become visible for a short period of time and you can define their color here
z_multiplier- z offset enables jo-jo effect of the cubes on z axis during transition
duration- 每个被切片的立方体变换的时间
delay – time each sliced cube will wait before starting transition. Please, notice that ‘delay’ is a cumulative value, which means it’s increasing gradually as all preceding delays are added to the delay of the cube already displayed.

自定义变换 <transition>
<cu3er>
<slides>
<slide>
<transition … />
<slide>
<slide>
<transition … />
</slides>
</cu3er>
最后一个<transition />节点定义最后一张和第一张幻灯片之间的变化。
如果你已设置了变换模板，你可以重载这些属性来自定义每个独特的3D变化。
正如你所注意到的，上面的例子中在第二个和第三个幻灯片之间没有<transition />节点，这种情况，变换属性由变换模板定义。
可用属性同<transitions />节点

幻灯片
<cu3er>
<slides>
<slide>
<url>
<link>
<description>
<link>
<heading>
<paragraph>
</description>
</slide>
</slides>
</cu3er>
很明显，在这里你可以定义全部幻灯片属性，例如图片地址、链接、描述。
可选子节点：
<url> – 指向你的图片/幻灯片。请确保在发布CU3ER之后避免“相对路径陷阱（relative path trap，？）”
<link> – 链接，用于用户点击幻灯片。可用属性：target = “”
<description> 该节点是“描述框”内容的容器。它包含下面几个子节点：
- <heading> - 标题
- <paragraph> - 段落
- <link> – 链接，用于用户点击“描述框”，可用属性：target = “”
字体
系统字体：
CU3ER可以使用任何你选择的系统字体来显示幻灯片标题和段落文本。你所要做的是在配置文件的<description>节点的font属性中插入字体名称。更多细节请查看“描述框 <description>”。
自定义字体：
CU3ER允许你导入嵌入字体的.swf文件，你可以在现实幻灯片描述标题和段落文本中使用它。当在网页中嵌入CU3ER，你需要在javascript中定义变量“font”指向你的font.swf，CU3ER会加载这个.swf文件。
flashvars.font = “path_to_your_font.swf”;
将字体嵌入Flash的方法：
1. go to your library, right-click and choose “New Font …”
2. under the “Name” field type the name of the font “myFont”
3. select font & style from the respective drop down menus
4. Click “advanced > linkage” and check “Export for Actionscript” and “Export in first frame”
5. Click OK
6. Open ‘ActionScript panel’ and register font by typing following AS code:
Font.registerFont(myFont);
7. Publish this swf for Flash Player 9 with Actionscript 3
8. Copy/move published font .swf into the desired folder and set variable ‘font’ with the path to this .swf file inside your embedding script in order to make the CU3ER to use your defined font.
嵌入
为了在网页上显示CU3ER，你需要像其他flash文件那样使用javascript将它嵌入到网页中。SWFObject.js是一个广泛使用的javascript，它的主要目的是使嵌入flash文件到网页中全过程尽可能简单。
SWFObject.js在CU3ER的下载软件包中提供了，但你也可以在这里下载。
下面简单介绍几步：
1、添加下面的script标签到你的HTML文档中的<head>元素中：
<script type=”text/javascript” src=”path_to_swfobject.js” tppabs=”http://www.progressivered.com/cu3er/docs/path_to_swfobject.js”></script>
2、然后紧接着添加：
<script type=”text/javascript”>
var flashvars = {};
flashvars.xml = “http://www.progressivered.com/cu3er/docs/path_to_xml.xml”;
flashvars.font = “path_to_font.swf”/*tpa=http://www.progressivered.com/cu3er/docs/path_to_font.swf*/;
swfobject.embedSWF(“path_to_cu3er.swf”/*tpa=http://www.progressivered.com/cu3er/docs/path_to_cu3er.swf*/, “cu3er_swf”, “960″, “360″, “9.0.28.0″, “expressInstall.swf”/*tpa=http://www.progressivered.com/cu3er/docs/expressInstall.swf*/, flashvars, params, attributes);
</script>
3、现在在你的HTML文档的<body>标签内添加下面内容到你希望CU3ER显示的地方：
<div id=”cu3er_swf”>
Put your alternate content here!
</div>
就这些！你设置了.swf对象脚本（步骤1），配置了SWFObject脚本（步骤2），最后定义了容器div，你希望在这里显示它（步骤3）。

缓动动画（Tweening) <tweenIn />、<tweenOut />、<tweenOver />
<cu3er>
<settings>
<xxxxx*>
<tweenIn … />
<tweenOut … />
<tweenOver … />
</xxxxx*>
</settings>
</cu3er>
* xxxxx – 任何可用的UI节点：auto_play、description、preloader、next_button、prev_button、next_symbol或prev_symbol。
CU3ER允许用户方便的tween所有UI元素，可简单得通过设置UI节点相应“transition in”、“transition out”和“mouse over”事件tween属性完成。这些事件都有相应的XML节点，在这些节点上你可以定义它们的tweening参数。
CU3ER使用TweenMax，最广泛使用的flash tween引擎之一。因此tween设置很简单，只需要UI元素包含每个属性就像XML属性那样。
<!– 范例: –>
<tweenIn time=”0.7″ x=”50″ y=”200″ height=”35″ width=”35″ />
<tweenOut delay=”0.05″ x=”-50″ />
<tweenOver tint=”0xeef608″ />
可选的XML属性，用于在每个tween节点上定义UI元素的tweening属性：
time (number)
delay (number)
x (number)
y (number)
width (number)
height (number)
rotation (number 0-360 range)
tint (color in 0×000000 format)
alpha (number – range: 0-1)
scaleX (number – range: 0-1)
scaleY (number – range: 0-1)
Tween In <tweenIn />：定义每个元素的显示属性。如果你希望自定义UI元素的位置、尺寸、颜色，你就需要在这里定义。发生在以下时刻：

CU3ER加载后 – UI元素显示在舞台上；
任何3D变换完成后；
任何用户激活时，通过检测鼠标移动（如果UI隐藏的话）。
TweenIn在3D变换结束后立即发生。它的目的是定义你希望UI添加/显示在舞台上。

注意：你不必定义所有属性。你只需定义你希望变化的。请查看XML Reference了解UI元素和它们相应tween节点的默认值。
Tween Out <tweenOut />：不要将本节点和“当鼠标移出”时间混淆！本节点配置transition out tween，它的目的是定义你希望UI删除/隐藏的方式。发生在以下时刻：

仅在3D变换开始之前；
自动播放时间到了；
任何用户静止之前，<general>节点中设置的检测时间定义；
点击next或prev按钮/符号。

注意：我们只需要定义希望变化的。
Tween Over <tweenOver />：
Tween over是交互时最普遍的特性了。CU3ER允许你定义“当鼠标放上去时”tween – 当用户放到UI元素上时发生。
你会惊讶当用户挪出UI元素时会发生什么？很简单，<tweenIn>（transition in）适用，这个元素会被设置为“正常”状态。

CU3ER官方网站下载：http://getcu3er.com/

CU3ER使用文档说明：http://docs.getcu3er.com/cu3er/