2011年11月8日 星期二

書籍翻頁之網頁製作 - Flash Page Flip

這裡介紹一款書籍翻頁效果的網頁,來自 http://www.flashpageflip.com/ 網站。其中的免費版本既方便又實用 (而且我覺得比專業版好太多了),效果不錯,製作方式也非常簡單,可在 http://www.flashpageflip.com/FreeFPF.asp

解說前先參考它的完成範例:

(1) 官方網站提供的範例
(2) 測試練習製作的範例
(有時似乎要再按一次 Reload 重整才會顯現?!)

在開始製作前,最好先確認要製成的尺寸大小,且是僅就書籍的部份。例如想要的書面大小是寬368、高450的解析度,即單一頁面是 368x450,而攤開後的頁面則是 736x450 的解析度,所以各個頁面的尺寸就以這個大小來準備。

(1) 封面頁為單一頁面,368x450
(2) 攤開後其實為兩頁,若需要全幅的畫面,則應採用 736x450 的圖,裁切成兩張獨立的圖。
(3) 之後每個攤開的頁面均依此類推
(4) 封底頁為單一頁面,368x450

全幅的說明如下圖所示:

原本尺寸為 736x450 的一張圖檔

裁切成兩張 368x450 的圖,各別存檔

有這樣的觀念後,製作便簡單了,分別把各頁面的圖檔整理好,最好加上有規律的檔名。接著,把網頁相關檔案取出,而所有的圖檔置於 pages 資料夾內。


xml 裡的 Pages.xml 檔案是設定各頁面對應的圖檔。特別注意第一列有解析度的設定。


如此便完成了翻書網頁的製作。

此一免費版本其實還提供了以 .swf 檔案做為書頁的功能,因此於 flash 製作時必須先指定寬高,注意為單頁的尺寸,故無法用全幅的方式做 flash 動畫,不過官方網站的範例,巧妙地利用左圖、右flash的方式,製作出一個效果頗佳的頁面。同時該範例也有目錄頁,亦為使用 flash  各別製作,不過原始的 flash 檔案有附在壓縮檔內,可以參考。

提供的翻頁範例是全畫面的,如果想要限制在指定的區域內,加入 div 圖層有效。但上下的選項按鈕及官方商標文字則會保留。
還有它的範例網頁編碼並非是 utf-8,需要修改或重新編寫。其它尚有插入 flv 影片及 mp3 聲音的功能,在此省略,歡迎自行試驗。

網路上也有非常詳細的解說可以參考,列舉一二如下:


沒有留言:

張貼留言