CU3ER非常Cool的3D效果的Flash Slider

 

[热门]【转】 CU3ER非常Cool的3D效果的Flash Slider

2011-06-11 16:32:47|  分类： 默认分类 |  标签：flash   |字号大中小 订阅

本文由 www.qidian4.com发布,作者： 斗破苍穹吧 　　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中定义。我们现在来加进它。

　　<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>节点中我们定义全部用户界面元素和它们的属性：

　　步骤四、自定义3D变换效果

　　每张幻灯片3D变换效果通用属性都在“变化模板”<transitions>中定义。也可以重载“变换模板”属性并自定义每个特殊<transition>来进一步使每个3D变换不同。

　　在本例为了简单起见，我们仍使用默认3D变换模板设置并通过自定义每个3D变换设置来重载。

　　让我们修改第1个和第2个幻灯片之间的变换。我们通过在两个<slide>节点间添加<transition>节点来实现。

　　<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>

　　步骤五、进一步自定义3D变换

　　让我们自定义第2张和第3张幻灯片间的变换效果，我们修改切片的个数、切片和旋转的方向以及着色器（shader）类型：

　　<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

　　<cu3er>

　　<settings>

　　<general />

　　</settings>

　　</cu3er>

　　设置幻灯片面板