3D效果
<cu3er>
</cu3er>
这时我们测试的话会看到出现错误因为CU3ER需要的图片还没在XML中定义。我们现在来加入它。
<cu3er>
<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手册中节点默认值。
<cu3er>
<settings>
<prev_button></prev_button>
<prev_symbol></prev_symbol>
<next_button></next_button>
<next_symbol></next_symbol>
</settings>
<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>
每张幻灯片3D变换效果通用属性都在“变化模板”<transitions>中定义。也可以重载“变换模板”属性并自定义每个特殊<transition>来进一步使每个3D变换不同。
<cu3er>
<settings>
<prev_button></prev_button>
<prev_symbol></prev_symbol>
<next_button></next_button>
<next_symbol></next_symbol>
</settings>
<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>
<cu3er>
<settings>
<prev_button></prev_button>
<prev_symbol></prev_symbol>
<next_button></next_button>
<next_symbol></next_symbol>
</settings>
<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>
<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>
就这些?
<settings>
<general />
</settings>
</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节点及其属性) |
<settings>
<debug />
</settings>
</cu3er>
包括本节点的话会启用Mr.DOOB stats(性能&内存监视界面)。
<settings>
<auto_play>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</auto_play>
</settings>
</cu3er>
“自动播放”特性使CU3ER自动循环播放幻灯片。本特性可以在两种缺省方式下启用:XML中不包含本节点;XML中不包含导航节点(prev_button、next_button、prev_symbol或next_symbol)。
节点/属性 | <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~无穷 |
<settings>
<prev_button>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</prev_button>
</settings>
</cu3er>
导航按钮表示为一个图形图案,用户在幻灯片中导航。点击这个按钮你可以指示CU3ER执行3D变换并显示XML中定义的上一个幻灯片。请看下图显示了上一个(导航)按钮变化不同round_corners设置的图案:
<settings>
<prev_symbol>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</prev_symbol>
</settings>
</cu3er>
有10个可选符号:
<settings>
<preloader>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</preloader>
</settings>
</cu3er>
该特性允许你可视化追踪幻灯片加载过程。“Preloader”通过tween节点自动显示,如果请求的幻灯片还没有加载完的话。
<settings>
<description>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</description>
</settings>
</cu3er>
允许你给每张幻灯片包含描述(标题 和 段落)。你可以通过通用文本属性设置每个文本框的全部外观样式(字体大小、外边距、行距、间距等),还可以给每张幻灯片的描述框设置链接和链接target。
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 />
<settings>
<transitions />
</settings>
</cu3er>
3D变化是CU3ER的核心特性。
slicing – 立方体切片方向:水平或垂直
direction - 变换方向 / 立方体旋转方向:上、下、左、右
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.
<slides>
<slide>
<transition … />
<slide>
<slide>
<transition … />
</slides>
</cu3er>
最后一个<transition />节点定义最后一张和第一张幻灯片之间的变化。
<slides>
<slide>
<url>
<link>
<description>
<link>
<heading>
<paragraph>
</description>
</slide>
</slides>
</cu3er>
很明显,在这里你可以定义全部幻灯片属性,例如图片地址、链接、描述。
<link> – 链接,用于用户点击幻灯片。可用属性:target = “”
<description> 该节点是“描述框”内容的容器。它包含下面几个子节点:
- <heading> - 标题
- <paragraph> - 段落
- <link> – 链接,用于用户点击“描述框”,可用属性:target = “”
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.
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显示的地方:
Put your alternate content here!
</div>
就这些!你设置了.swf对象脚本(步骤1),配置了SWFObject脚本(步骤2),最后定义了容器div,你希望在这里显示它(步骤3)。
<settings>
<xxxxx*>
<tweenIn … />
<tweenOut … />
<tweenOver … />
</xxxxx*>
</settings>
</cu3er>
* xxxxx – 任何可用的UI节点:auto_play、description、preloader、next_button、prev_button、next_symbol或prev_symbol。
<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属性:
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元素的位置、尺寸、颜色,你就需要在这里定义。发生在以下时刻: