ebook.jpg
(下載飛毛的flash電子書範例)

飛毛套用Flash Page Flip PHP PRO完成的電子書,軟體可至神魂顛倒flash論壇下載!!

{套用說明}
1. 將圖片放到pages的資料夾
2. 修改xml資料夾裡的Pages.xml檔案的圖片路徑

神奇超酷的翻頁效果怎麼做呢?飛毛找到其原理(xml自動載入圖片)如下:


 06092913204197.gif
主要原理:

1.將電子書分為3個內容層,疊放順序如圖.第一層為當前頁面層,是現在正在顯示的頁面;
第二層是隨鼠標拖拽時卷起的頁角,第三層是當頁角卷起時,露出下一頁的層。
2.設置遮罩:當頁邊卷起時,層1僅顯示四邊形FBDE內部分,層2僅顯示ABCD部分,層3僅顯示BGHD部分。
3.旋轉:層2內的內容要隨着鼠標運動而不停變換傾斜角度,其角度始終與AC邊斜度一致.
4.翻頁:當頁面完全翻過時,層1的當前頁數=當前頁數+1

程序的核心在于如何獲得四個點ABCD的坐標,我使用的是求垂直平分線的方法,
既:點C是鼠標位置,點H是頁角位置,BD既為此兩點間的垂直平分線。
由已知的C、H坐標求出直線BD的一次函數y=kx+b以後再求出其與FG、EH的切點,既得點B、D坐標,
點A是點G于直線BD的對稱點,通過求點G對BD的對稱點既可得點A坐標。

06092913217869.gif

其他幾個要點:

限制C點范圍:當鼠標在下圖灰色區域內時,點C的坐標既等于鼠標坐標,
當鼠標離開灰色區域時,點C必須停留在區域內。
弧KML是以點J為圓心,KJ為半徑的圓,弧KNL是以點I為圓心,
IK為半徑的圓(demo1既未限制C點范圍,若鼠標超過弧形區域就會出錯。

響應事件:
設置4個熱KJ為半徑的圓,弧KNL是以點I為圓心,
IK為半徑的圓(demo1既未限制C點范圍,若鼠標超過弧形區域就會出錯。

響應事件:
設置4個熱區,分別位于書的4個頂點,分別設置rollOver、rollOut、releaseOutside、release事件函數。
事實上這一部分函數編寫極費時間,需要考慮各種各樣的可能性和針對性的處理方法。

鼠標吸附及黏滯:
當鼠標進入熱區和快速移動時,頁角是逐漸黏附向鼠標的,這樣可以使動畫看上去更流暢。
demo4設置了吸附,demo1沒有設置。

陰影:翻頁時的陰影須時刻與直線BD的位置保持一致,書的背景陰影要考慮到首頁和末頁兩個特殊情況。

首頁與末頁:在翻動到首頁與末頁時層3遮罩須重新設置為整本書寬的1/2


§ 轉貼處→ http://www.cncell.cn/html/2006-09/2296.htm

arrow
arrow
    全站熱搜

    a1f4j7 發表在 痞客邦 留言(8) 人氣()