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

創作者介紹
創作者 a1f4j7 的頭像
a1f4j7

《飛毛設計工作室》

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


留言列表 (8)

發表留言
  • 眼瞇
  • 你好!!想問你一下,你是怎麼套用這個軟體做出來的....因為最近功課上去需要,想請問一下.我去下載了你上面的載點,可是出來的是一些檔案..想請問你是怎麼套用的,謝謝!!!因為真的很急需知道怎麼做出來的,拜託了,感謝
  • 只要把你的圖片放到Page的資料夾,xml程式就會自動載入圖片了。

    a1f4j7 於 2009/09/12 00:50 回覆

  • 眼瞇
  • xml程式是用在Dreamweaver上嗎?還是套用在flash???我有好多好多問題...真的很不好意思這麼突然的問你!!真的求助無門啊,感謝
  • xml是Dreamweaver的程式語言!可以匯入flash檔跟圖片。

    a1f4j7 於 2009/09/12 23:37 回覆

  • 肥肥
  • 請問要如何匯入主檔。
  • 把主檔(每個頁面圖片)放在Page的資料夾裡,xml程式就會自動載入主檔(每個頁面圖片)了。

    a1f4j7 於 2009/11/08 15:16 回覆

  • 丫忠
  • 寫的真仔細,翻頁的原理跟寫一般的程式還真有差別呢
  • 悄悄話
  • sam
  • 大大你方便寫個完整的

    方便寫一個詳細的放置方式 以及如何用在網頁上
  • wint58
  • 大大您好~ 不好意思~ 假如要套用背景音樂一樣只要改資料夾內的檔案放置入mp3資料夾內就可以了嗎? 另外要請教大大 這版是否可以設定電子書的頁數的但不同音樂嗎?
  • 背景音樂的設定我就不知道了...

    a1f4j7 於 2011/05/27 13:50 回覆

  • ..
  • 怎麼解少頁數 不然我後面都白的
  • 要修改xml檔案,把不要的頁面標籤刪除。
    <page src="pages/01.jpg"/>
    <page src="pages/02.jpg"/>
    ......
    <page src="pages/34.jpg"/>

    a1f4j7 於 2013/08/28 19:24 回覆