用Flash製作模擬書翻頁。
有關知識
隱形按鈕,tellTarget的應用,物件的縮放、變形及中心點編輯,關鍵幀動畫等。
步驟/方法
開啟flashMX,按Ctrl+M,在電影屬性對話方塊設定播放速度:18fps;大小:450px*300px;背景顏色:白色。
從選單欄中選擇插入>新增符號(Insert>NewSymbol),在出現的對話方塊中選影象(Graphic),命名為cover,用繪圖工具在舞臺畫一本書的封面,左上角對齊舞臺的中心點,如圖1所示。
圖1製作圖書封面
製作書的內頁。新建影象符號page,用矩形工具繪製大小和cover相等的矩形,左上角對齊舞臺的中心點。
新建隱形按鈕button,選取Hit幀,按F6插入一個關鍵幀,在舞臺用矩形工具畫一長方形,如圖2所示。
圖2製作隱形按鈕
新建電影片斷pages,新建book層,將第1幀設為空白幀(blankkeyframe),Actions設定為停止(stop)。
在第2幀處按F7插入空關鍵幀,將影象cover放置在舞臺內,左上角和舞臺中心點對齊。
在第3幀處按F7插入空關鍵幀,將影象page放置在舞臺內,並和影象cover對齊。
在第8幀按F5插入幀,使book層的幀長度為8幀,如圖3所示。
圖3製作層book,對齊中心點
新建button&page層,放置在book層上面,同樣將第1幀設為空白幀,在第2幀處插入關鍵幀,將隱形按鈕button放置在層中,並利用縮放工具將按鈕大小拉伸為和cover同樣大小並覆蓋在cover上方。
在3,4,5,6,7,8幀處分別建立關鍵幀,用文字工具寫上書的頁數1,2,3,4,5,6。如圖4所示。
圖4給電影加上隱形按鈕和頁數
新建text層和pagebutton層,其中text層加入文字,而pagebutton層放入對應的按鈕。在第4、第5幀處建立關鍵幀,製作書本的向後翻頁按鈕next;在第5、第7幀處建立關鍵幀,製作書本的向前翻頁按鈕pre;在第8幀處建立按鈕close,作用是當按下此按鈕,書本關上,返回到初始狀態。如圖5所示。
圖5建立關閉書本按鈕
新建電影片斷book,幀長度為37幀。增加cover層,將影象cover放置在舞臺內,左上角和舞臺中心點對齊。第2至37幀為空白幀。如圖6所示。
新建rightflip層,將電影片斷pages放置在舞臺內,和舞臺中心點對齊。在屬性面板將其命名為rightflip。如圖6所示。
圖6rightflip的位置
提示:因為電影片斷pages第一幀為空白幀,所以在舞臺上只能看到一個小空心圓。
:在rightflip層下新建leftpage層。將電影片斷pages放置在舞臺內,並在Instance面板將其命名為leftpage,如圖7所示。
圖7放置rightpage
提示:leftpage水平方向和rightflip平行,並相距一本書的距離。也就是當這本書開啟以後,左邊的效果要由leftpage完成,所以位置一定要放好.。
在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();
}
回到電影片斷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將電影片斷拖入場景
現在可以按Ctrl+Enter測試效果。
當然輸出效果是在內頁裡是添加了一些圖形後的形成的,可以在電影片斷pages中另放一些畫面,以表達一個完整的故事,頁數也可以設定。