2011年8月29日 星期一

翻書效果組件




這個組件,可以讓你作出翻頁效果的感覺,我想應該很多人愛吧XD

先下載組件與範例

解壓縮後你會看到Book.zxp組件檔案與一個範例目錄。
總之先把Book.zxp安裝起來(雙急就對了,你會看到安裝程式)
安裝好了之後,重啟你的Flash,如果安裝正確,打開你的組件視窗(ctrl+F7)
你會看到一個Cain的資料夾,裡面有一個"翻書效果"的組件。

首先開啟一個as3專案(as2不行喔..)
然後把翻頁組件拉到場景上,應該是一本書的樣子,當然這是你可以調整書的顯示大小與位置。

再來我們必須設定書的頁面內容,這個組件必須讀取一個xml設定檔案。
你可以先把範例資料裡的Pages.xml打開來看,這裡直接用這個檔案說明
(什麼? 不會開? 你可以打開記事本然後拉進去就好了...)

說真的,裡面沒有什麼設定,明眼人應該都可以知道這些是什麼,不過為了初學者,還是稍微說明一下XD
首先是 width="100" height="200" ,這是每一頁的大小,也就是你要讀入的圖的大小(正常來說,依本書的頁面,尺寸應該都一樣吧!)
剩下的標籤page src="c1.jpg" ,看也知道就是內頁圖的路徑,請照順序依序排好。
基本上沒有限制頁數,所以你可以一直加下去,唯一要注意的地方就是,頁面必須是雙數,因為書一面一定是有左右兩邊....要是單數頁會怎麼樣...你可以自己試試 XD

編輯好了之後,存檔,等一下模組要載入他才能正腸工作。
我們回到Flash,選擇你剛剛拉到場景上的模組,看一下他的屬性視窗(ctrl+F3),然後看一下組件參數設定,有一個xml路徑設定,這裡就是要填入你剛剛的xml資料檔。


好了之後輸出,如果無誤的話,你會發現你的書是可以用滑鼠翻頁的 XD

基本的功能有了之後,可能有些人會幫他加上UI,比方說,上一頁 下一頁 ,有時候頁面較多,還得加上目錄功能,這時候我們還是必須寫一下AS3,不過不用太擔心,因為每個UI功能,也只是簡單的一句語法,以下稍作說明。(或者你可以直接打開範例的fla,看一下影格的程式,只有3行指令..都有說明)

首先要用as控制書模組,必須先給他取一個實體名稱,我們先取叫做 book 。
再來是ui部分,先在場景上作兩個按鈕,並為他設定實體名稱為b1與b2 ...
(如果說到這裡,你若是卡在不知道什麼叫做元件實體名稱,那你還是先買本基本的as3參考書看一下吧..)

如果你希望讓user按下b1就會有上一頁的效果,你只要在影格上加上這樣的指令

Book.back(要控制的書,按鈕);

套上這個範例就變成

Book.back(book,b1);

同理,下一頁的UI設定就是

Book.next(book,b2);

好了,程式就這樣而已,應該沒有什麼難度XD,趕緊輸出吧!無誤的話,你會發現除了本來用滑鼠可以控制外,b1與b2也會對應的相符的動作。

有時候我們會遇到頁數比較多的情況,這時候就會需要為這本書作一個menu效果。
這時候你只要運用這個指令

Book.goPage(要控制的書,按鈕,到哪頁);

假設你要作一個按鈕,名稱叫做home,你希望按下他,可以回到封面,你可以加上這樣的指令

Book.goPage(book,home,0);

以上的意思就是 按下home的按鈕後 book 到第 0 頁

如果還有一個主題是在第5頁,要怎麼作勒?
這個給你們自己去想想囉XD

有任何問題都可以在來跟我討論XD
最後來是一句老話,這個模組你可以用來展示你自己的東西
如果商業用途,請先聯絡我,請不要以為我不知道喔XD...







沒有留言: