怎樣用Flash製作模擬書翻頁?

用Flash製作模擬書翻頁。

有關知識

隱形按鈕,tellTarget的應用,物件的縮放、變形及中心點編輯,關鍵幀動畫等。

步驟/方法

開啟flashMX,按Ctrl+M,在電影屬性對話方塊設定播放速度:18fps;大小:450px*300px;背景顏色:白色。

從選單欄中選擇插入>新增符號(Insert>NewSymbol),在出現的對話方塊中選影象(Graphic),命名為cover,用繪圖工具在舞臺畫一本書的封面,左上角對齊舞臺的中心點,如圖1所示。

圖1製作圖書封面

怎樣用Flash製作模擬書翻頁

製作書的內頁。新建影象符號page,用矩形工具繪製大小和cover相等的矩形,左上角對齊舞臺的中心點。

新建隱形按鈕button,選取Hit幀,按F6插入一個關鍵幀,在舞臺用矩形工具畫一長方形,如圖2所示。

圖2製作隱形按鈕

怎樣用Flash製作模擬書翻頁

新建電影片斷pages,新建book層,將第1幀設為空白幀(blankkeyframe),Actions設定為停止(stop)。

在第2幀處按F7插入空關鍵幀,將影象cover放置在舞臺內,左上角和舞臺中心點對齊。

在第3幀處按F7插入空關鍵幀,將影象page放置在舞臺內,並和影象cover對齊。

在第8幀按F5插入幀,使book層的幀長度為8幀,如圖3所示。

圖3製作層book,對齊中心點

怎樣用Flash製作模擬書翻頁

新建button&page層,放置在book層上面,同樣將第1幀設為空白幀,在第2幀處插入關鍵幀,將隱形按鈕button放置在層中,並利用縮放工具將按鈕大小拉伸為和cover同樣大小並覆蓋在cover上方。

在3,4,5,6,7,8幀處分別建立關鍵幀,用文字工具寫上書的頁數1,2,3,4,5,6。如圖4所示。

圖4給電影加上隱形按鈕和頁數

怎樣用Flash製作模擬書翻頁

新建text層和pagebutton層,其中text層加入文字,而pagebutton層放入對應的按鈕。在第4、第5幀處建立關鍵幀,製作書本的向後翻頁按鈕next;在第5、第7幀處建立關鍵幀,製作書本的向前翻頁按鈕pre;在第8幀處建立按鈕close,作用是當按下此按鈕,書本關上,返回到初始狀態。如圖5所示。

圖5建立關閉書本按鈕

怎樣用Flash製作模擬書翻頁

新建電影片斷book,幀長度為37幀。增加cover層,將影象cover放置在舞臺內,左上角和舞臺中心點對齊。第2至37幀為空白幀。如圖6所示。

新建rightflip層,將電影片斷pages放置在舞臺內,和舞臺中心點對齊。在屬性面板將其命名為rightflip。如圖6所示。

圖6rightflip的位置

提示:因為電影片斷pages第一幀為空白幀,所以在舞臺上只能看到一個小空心圓。

怎樣用Flash製作模擬書翻頁

:在rightflip層下新建leftpage層。將電影片斷pages放置在舞臺內,並在Instance面板將其命名為leftpage,如圖7所示。

圖7放置rightpage

提示:leftpage水平方向和rightflip平行,並相距一本書的距離。也就是當這本書開啟以後,左邊的效果要由leftpage完成,所以位置一定要放好.。

怎樣用Flash製作模擬書翻頁

在rightflip層上方新建leftflip層。將電影片斷pages放置在舞臺內,和rightflip對齊,並將其命名為leftflip,這個層主要是用來表現翻頁效果。

提示:因為電影片斷pages第一幀是空白幀,表現在層中是一個小空心圓,效果很不直觀,這時如果先將pages的第1幀刪除,就能更直觀的調整效果了(光碟中的d.fla為已刪除第1幀的源程式),當然在做好電影片斷book後,別忘了再將第1幀還原為空白幀。如圖8所示。

圖8好象兩本書並排,效果更直觀

選中第2幀、第9幀,按F6將其分別設為關鍵幀。在Transform面板,將第9幀處的pages的水平縮放設定為85%,垂直變形設定為-85,如圖9所示。

圖9設定變形

在第10幀建立空關鍵幀,將電影片斷pages放置在舞臺上,水平方向和第2幀對齊,垂直方向在第2幀的左邊一本書的距離,選擇修改>變形>編輯中心點(Modify>Transform>Editcenter)命令,將pages的中心點移至右上角,如圖10所示。

圖10編輯中心點

選中第18,19,20,29幀,按F6建立關鍵幀。

將第10,第29幀處pages的Transform設定為:水平縮放85%;垂直變形85。如圖11所示。

圖11設定Trnsform

將第19幀的pages拖放在舞臺外。

拷貝第9幀至30幀;拷貝第2幀至36幀;拷貝第19幀至37幀。

第36幀處pages的Transform設定為:水平縮放95%;.垂直變形-10。

在Frame面板中,將第2至9,10至18,20至29,30至36幀的漸變設定為移動(Motion),如圖12所示。

圖12產生移動漸變

新建Actions層,在第1,2,10,18,19,20,29,37幀處建立關鍵幀,並分別設定其Actions:

第1幀:

stop();

tellTarget("rightflip"){

nextFrame();

}

第2幀:

tellTarget("rightflip"){

nextFrame();

}

tellTarget("rightflip"){

nextFrame();

}

tellTarget("leftflip"){

nextFrame();

}

第10幀:

tellTarget("leftflip"){

nextFrame();

}

第18幀:

tellTarget("leftpage"){

nextFrame();

}

tellTarget("leftpage"){

nextFrame();

}

第19幀:

第20幀:

stop();

停止

tellTarget("leftpage"){

prevFrame();

}

tellTarget("leftpage"){

prevFrame();

}

第29幀:

第37幀:

tellTarget("leftflip"){

prevFrame();

}

tellTarget("leftflip"){

prevFrame();

}

stop();

tellTarget("rightflip"){

prevFrame();

}

tellTarget("rightflip"){

prevFrame();

}

怎樣用Flash製作模擬書翻頁

怎樣用Flash製作模擬書翻頁

怎樣用Flash製作模擬書翻頁

怎樣用Flash製作模擬書翻頁

怎樣用Flash製作模擬書翻頁

回到電影片斷pages,在層button&page的第2幀處,將按鈕button的Actions設定為:

on(release){

tellTarget(".."){

gotoAndPlay(2);

}

}

提示:因在電影片斷book中使用pages,所以告知目標(“..”)表示告知電影片斷book。

在pagebutton層,分別設定按鈕的Actions。

第3幀按鈕next的Actions:

第4幀按鈕pre的Actions:

on(release){

tellTarget(".."){

gotoAndPlay(2);

}

}

第5幀按鈕next的Actions:

on(release){

tellTarget(".."){

gotoAndPlay(20);

}

}

第6幀按鈕pre的Actions:

on(release){

tellTarget(".."){

gotoAndPlay(2);

}

}

第7幀按鈕close的Actions:

on(release){

tellTarget(".."){

gotoAndPlay(20);

}

}

on(release){

tellTarget("../leftpage"){

gotoAndStop(1);

}

tellTarget("../leftflip"){

gotoAndStop(2);

}

tellTarget("../rightflip"){

gotoAndStop(4);

}

tellTarget(".."){

gotoAndPlay(32);

}

}

這樣,當按下按鈕next時產生向後翻頁動作;當按下按鈕pre時,產生向前翻頁動作;按下按鈕close時,回到初始狀態。

回到場景中,將電影片斷book放置在場景中,擺放好位置,.如圖13所示。

圖13將電影片斷拖入場景

怎樣用Flash製作模擬書翻頁

現在可以按Ctrl+Enter測試效果。

當然輸出效果是在內頁裡是添加了一些圖形後的形成的,可以在電影片斷pages中另放一些畫面,以表達一個完整的故事,頁數也可以設定。

按鈕, 語音, 翻頁, 書翻頁,
相關問題答案