天才教育網(wǎng)合作機(jī)構(gòu) > 設(shè)計(jì)軟件培訓(xùn)機(jī)構(gòu) > Flash培訓(xùn)機(jī)構(gòu) >

東莞設(shè)計(jì)培訓(xùn)網(wǎng)

歡迎您!
朋友圈

400-850-8622

全國(guó)統(tǒng)一學(xué)習(xí)專(zhuān)線(xiàn) 9:00-21:00

位置:設(shè)計(jì)軟件培訓(xùn)資訊 > Flash培訓(xùn)資訊 > flash “翻頁(yè)”的做法

flash “翻頁(yè)”的做法

日期:2005-12-23 00:00:00     瀏覽:299    來(lái)源:東莞設(shè)計(jì)培訓(xùn)網(wǎng)
這里用到的技術(shù)是最簡(jiǎn)單的形體漸變和運(yùn)動(dòng)漸變

首先,新建一個(gè)文件,把背景色設(shè)為黑色。

接著來(lái)制作書(shū)本的封面和封底,這個(gè)大家都會(huì)做,就是簡(jiǎn)單的矩形,就不多說(shuō)了。如果想讓封面和封底看上去有點(diǎn)厚度,可以在封面的上邊和右邊加上兩條顏色稍有不同的細(xì)線(xiàn)就行了。對(duì)封底來(lái)說(shuō),細(xì)線(xiàn)應(yīng)該在上邊和左邊。另外注意到封面和封底的內(nèi)側(cè)(封三)一樣,封底和封面的內(nèi)側(cè)(封二)一樣,所以只需要做成一個(gè)圖符,在這里把封底做成圖符起名為frontcoverinside,也就是封二,需要用到封三的時(shí)候只需水平翻轉(zhuǎn)即可。
不過(guò)這樣做出來(lái)的只是非常簡(jiǎn)易的封皮,還可以給封皮上加些圖案和文字,注意添加圖案文字*新建幾個(gè)層放置,這樣便于修改。為了實(shí)現(xiàn)流暢的翻頁(yè)(變形)效果,需要把加工過(guò)的封面和封底分別單獨(dú)做成圖符front cover和back cover,見(jiàn)下圖,在這里要說(shuō)明的是請(qǐng)注意十字定位符的位置,因?yàn)樗鼘⑹菍?duì)象變形的中心點(diǎn)
screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0>

按Ctrl-F8新建一個(gè)電影片斷類(lèi)圖符page flip,將把所有的翻頁(yè)效果都做在這個(gè)圖符中。
新建若干層備用,這一次把層的順序自下而上排列,最下面的層是第1層。先簡(jiǎn)要介紹一下層的分布關(guān)系。

在最下面的第1層應(yīng)該放書(shū)本的封底(封三),起名為back cover static,封底一直僅位于最下層直到它*翻起合上。

第2層起名為front cover static,放上封面以及封面打開(kāi)后(封二)的靜止?fàn)顟B(tài),封面位于較下面的層是因?yàn)榉饷嬉坏┐蜷_(kāi)就會(huì)被內(nèi)頁(yè)遮住。下面的圖會(huì)給一個(gè)層分布的初步概念。在最開(kāi)始書(shū)本是合上的,所以把圖符front cover拖出來(lái)放好。

第3層名為page flip over,用來(lái)放置內(nèi)頁(yè)翻開(kāi)后其背面的靜止畫(huà)面,如下圖所示當(dāng)?shù)?頁(yè)完全打開(kāi)后,這一層的相應(yīng)幀上就會(huì)放置粉紅色的頁(yè)面靜止圖案,這一層在開(kāi)始的若干幀中暫時(shí)不放任何內(nèi)容。

第4層名為pages,用來(lái)放置頁(yè)面翻開(kāi)時(shí)靜止的內(nèi)頁(yè)正面畫(huà)面,如下圖所示淺灰色的第2頁(yè)。這一層在封面一開(kāi)始翻頁(yè)就必須把內(nèi)頁(yè)畫(huà)面放好。第3層和第4層的內(nèi)容一個(gè)在左一個(gè)在右,互不遮蓋,所以這兩層的順序無(wú)關(guān)緊要。
screen.width-333)this.width=screen.width-333" border=0>

第5層至第12層放置內(nèi)頁(yè)翻開(kāi)的動(dòng)畫(huà)。所以這一層的內(nèi)容最為關(guān)鍵和重要,一會(huì)兒重點(diǎn)介紹這一層的制作。
第13層front cover animation放封面打開(kāi)的動(dòng)畫(huà),這一層相對(duì)較高,因?yàn)樵诜饷娣_(kāi)的過(guò)程中會(huì)遮住部分內(nèi)頁(yè)。
第14層back cover animation用來(lái)放置封底的動(dòng)畫(huà)。第13層和第14層動(dòng)畫(huà)不會(huì)同時(shí)發(fā)生,所以這兩層的相對(duì)位置無(wú)所謂。
所有的層關(guān)系都明確了,下面就要開(kāi)始動(dòng)手做了。
在第2層front cover static的第10幀按F5鍵,書(shū)本的封面圖案將保持靜止直到第10幀,從第11幀開(kāi)始書(shū)本翻頁(yè)。在第11幀按F7插入空幀。選中封面,按Ctrl-C復(fù)制。
從第11幀開(kāi)始封面翻開(kāi),同時(shí)內(nèi)頁(yè)和封三顯示出來(lái),所以有三個(gè)層從這一幀開(kāi)始要添加內(nèi)容。先看封面翻開(kāi)的動(dòng)畫(huà),在第13層front cover animation的第11幀按F6插入關(guān)鍵幀,按Ctrl+Shift-V把剛才復(fù)制的內(nèi)容粘貼回原處。在第39幀按F6插入關(guān)鍵幀,如下圖所示,對(duì)封面實(shí)例進(jìn)行先旋轉(zhuǎn)再放縮的操作,注意兩次操作只會(huì)用到右邊中間的手柄,*得到下面右圖所示的形狀。
screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0>

在第40幀按F7插入空幀,在第75幀按F6插入關(guān)鍵幀。從圖庫(kù)中把frontcoverinside圖符拖出來(lái)放好,要求它的右邊與第11幀中封面的左邊正好重合,這個(gè)圖符用作封二的靜止畫(huà)面。選中它按Ctrl-C復(fù)制,回到第40幀,按Ctrl+Shift-V粘貼,然后同樣做旋轉(zhuǎn)和放縮,見(jiàn)下圖。下面的右圖是第40幀做好后的樣子?,F(xiàn)在分別把第11幀和第40幀幀屬性設(shè)為運(yùn)動(dòng)漸變。

screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0>

在第1層back cover static的第11幀按F6插入關(guān)鍵幀,把backcover圖符拖進(jìn)來(lái)放好,并在第314幀按F5鍵,這一層是封三所在層,會(huì)長(zhǎng)時(shí)間保持靜止。
書(shū)本內(nèi)頁(yè)層也就是第4層的第11幀內(nèi)容過(guò)一會(huì)兒再做。
為了保持畫(huà)面的銜接,在第2層的第71幀按F6插入關(guān)鍵幀,并把第1幀的內(nèi)容拷貝到這一幀上,在第374幀上按F5鍵。

現(xiàn)在封面的動(dòng)畫(huà)基本上完成了,下面來(lái)做內(nèi)頁(yè)的動(dòng)畫(huà)。在第5層page animation的第75,85,102,113幀分別按F6插入關(guān)鍵幀。在第75幀畫(huà)一個(gè)不帶邊線(xiàn)的淺灰色矩形,見(jiàn)下面左圖,要求它的大小比封面小一圈,并把它移到與封三左邊重合的位置上。然后把這一幀的內(nèi)容分別拷到第85,102和113幀上,再把這三幀用箭頭工具分別修改成下圖中右面三個(gè)圖所示形狀?,F(xiàn)在在第75幀,85幀和102幀再分別設(shè)置形體漸變。

screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0>

這樣把內(nèi)頁(yè)翻到一半時(shí)的動(dòng)畫(huà)做好了。同樣方法,在第114,125,142和152幀分別按F7插入空幀。分別把剛才做好的第113,102,85和75幀的內(nèi)容拷貝到對(duì)應(yīng)幀上,再對(duì)每個(gè)對(duì)象做水平翻轉(zhuǎn),然后把位置調(diào)整好就行了。*分別把第114,125和第142幀的屬性改為形體漸變,一個(gè)內(nèi)頁(yè)完整的動(dòng)畫(huà)就做好了。

為了增加效果,為每一頁(yè)上再添上一些格子。為了不至于產(chǎn)生意想不到的變形效果,把每一條格子線(xiàn)單獨(dú)放在一層中,也就是說(shuō)這七條線(xiàn)將占據(jù)第6至第12層。接著依次在頁(yè)面相應(yīng)的關(guān)鍵幀中把這些線(xiàn)條用箭頭工具拉成下圖所示的形狀。*一個(gè)圖中好象線(xiàn)條看不見(jiàn)了,但實(shí)際上它們是存在的。*同樣把相應(yīng)幀設(shè)置為形體漸變就行了。因?yàn)槊恳豁?yè)的背面我們不畫(huà)格子線(xiàn),所以頁(yè)面翻過(guò)去以后把相應(yīng)幀設(shè)置為空幀即可。

screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0> screen.width-333)this.width=screen.width-333" border=0>

現(xiàn)在就把內(nèi)頁(yè)的動(dòng)畫(huà)全部做好了,把上面左圖中所示的頁(yè)面保存為圖符page,然后把它放在第4層pages的第11幀上。在一頁(yè)完全翻過(guò)去后,還需要做頁(yè)面背面的靜止畫(huà)面。所以在第3層page flip over的第153幀按F6插入關(guān)鍵幀。并把第5層上的不帶格子線(xiàn)的頁(yè)面拷貝到第3層的這一幀上,再水平翻轉(zhuǎn)到下圖所示位置。
screen.width-333)this.width=screen.width-333" border=0>
其他內(nèi)頁(yè)的動(dòng)畫(huà)也如法炮制,*的封底動(dòng)畫(huà)和封面動(dòng)面恰好相反,但手法相同,自己做做看。這個(gè)比較關(guān)鍵的問(wèn)題是對(duì)頁(yè)面各關(guān)鍵幀的變形控制以及每一層的位置關(guān)系和內(nèi)容安排,多思考一下

如果本頁(yè)不是您要找的課程,您也可以百度查找一下: