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

Quick Start

使用CU3ER的簡單十步：

1、下載CU3ER，解壓縮文件到獨立的文件夾。

2、（可選）創建你的圖片並將它們放到cu3er的p_w_picpaths目錄下，如果你不使用提供的圖片的話。

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和p_w_picpaths目錄在服務器中不同的目錄時，請確認爲它們設置了正確的路徑。

10、完成了，享受它吧！

自定義XML指南：

步驟一、配置XML

我們已創建了新的config.xml文件並將它保存到cu3er文件夾中。讓我們通過添加下列語句來配置它：

<?xml version=”1.0″ encoding=”utf-8″ ?>
<cu3er>
</cu3er>
這時我們測試的話會看到出現錯誤因爲CU3ER需要的圖片還沒在XML中定義。我們現在來加入它。

步驟二、添加幻燈片

讓我們添加一些幻燈片（圖片位於p_w_picpaths文件夾中）

<?xml version=”1.0″ encoding=”utf-8″ ?>
<cu3er>

<slides>
<slide>
<url>p_w_picpaths/slide_1.jpg</url>
</slide>
<slide>
<url>p_w_picpaths/slide_2.jpg</url>
</slide>
<slide>
<url>p_w_picpaths/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>p_w_picpaths/slide_1.jpg</url>
</slide>
<slide>
<url>p_w_picpaths/slide_2.jpg</url>
</slide>
<slide>
<url>p_w_picpaths/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>p_w_picpaths/slide_1.jpg</url>
</slide>
<!– changing transition between first & second slide –>
<transition num=”3″ slicing=”vertical” direction=”down”/>
<slide>
<url>p_w_picpaths/slide_2.jpg</url>
</slide>
<!– transitions properties defined in transitions template –>
<slide>
<url>p_w_picpaths/slide_3.jpg</url>
</slide>
<!– transitions properties defined in transitions template –>
</slides>
</cu3er>

步驟五、進一步自定義3D變換

讓我們自定義第2張和第3張幻燈片間的變換效果，我們修改切片的個數、切片和旋轉的方向以及着色器（shader）類型：

<?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>p_w_picpaths/slide_1.jpg</url>
</slide>
<!– changing transition between first & second slide –>
<transition num=”3″ slicing=”vertical” direction=”down”/>
<slide>
<url>p_w_picpaths/slide_2.jpg</url>
</slide>
<!– changing transition between second & third slide –>
<transition num=”4″ direction=”right” shader=”phong” />
<slide>
<url>p_w_picpaths/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>p_w_picpaths/slide_1.jpg</url>
</slide>
<!– changing transition between first & second slide –>
<transition num=”3″ slicing=”vertical” direction=”down”/>
<slide>
<url>p_w_picpaths/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>p_w_picpaths/slide_3.jpg</url>
</slide>
<!– transitions properties defined in transitions template –>
<slide>
<url>p_w_picpaths/slide_4.jpg</url>
</slide>
<transition num=”6″ slicing=”vertical” direction=”up” shader=”flat” delay=”0.05″ z_multiplier=”4″ />
<slide>
<url>p_w_picpaths/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”

“上一個”符號 <prev_symbol> / “下一個”符號 <next_symbol>

<cu3er>
<settings>
<prev_symbol>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</prev_symbol>
</settings>
</cu3er>
有10個可選符號：

“上一個”符號包含節點：

<defaults />：屬性type = “number”見上面可選符號類型

預加載 <preloader>

<cu3er>
<settings>
<preloader>
<defaults … />
<tweenIn … />
<tweenOut … />
<tweenOver … />
</preloader>
</settings>
</cu3er>
該特性允許你可視化追蹤幻燈片加載過程。“Preloader”通過tween節點自動顯示，如果請求的幻燈片還沒有加載完的話。

有兩種類型“preloader”指示器：linear和circular。

可選包含節點：

<defaults />：屬性 symbol = “circular” 或 “linear”

描述框 <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>元素中：

2、然後緊接着添加：

<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非常Cool的3D效果的Flash Slider

24-5-18 X

設置vim語法高亮顯示和自動縮進

現在如何在你的站點上使用HTML 5(1)

CSS3、HTML5各瀏覽器支持情況一覽表

我們工作到底爲了什麼?

微軟高管暗示新一代Win8今年10月發佈

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結