Flash電子相冊(cè)的設(shè)計(jì)與制作

1、1Flash電子相冊(cè)的設(shè)計(jì)與制作【摘要】Flash是一種創(chuàng)作工具，設(shè)計(jì)人員和開(kāi)發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其他允許用戶(hù)交互的內(nèi)容。它不僅能夠制作出許多炫目多彩的效果，只要你肯賦予它一定的情景，它也會(huì)模擬出現(xiàn)生活中的場(chǎng)景。本系統(tǒng)是一個(gè)Flash電子相冊(cè)，相冊(cè)使用Flash制作工具完成電子相冊(cè)的制作，該電子相冊(cè)界面友好美觀，能夠加入照片的特效，配合一些動(dòng)畫(huà)效果的實(shí)現(xiàn)達(dá)到普通相冊(cè)無(wú)法達(dá)到的美觀性。該相冊(cè)具有以下的優(yōu)點(diǎn)：易于保存、易于復(fù)制、易于展示、更具娛樂(lè)性、更具觀賞性、更具時(shí)尚性。并且相冊(cè)易于用戶(hù)的使用與管理，具有一定的個(gè)性化內(nèi)容?！娟P(guān)鍵詞】Flash；電子相冊(cè)；個(gè)性化Flash el

2、ectronic album production【Abstract】Flash is an authoring tool that designers and developers can use to create presentations, applications, and other content that allows the user to interact. It can not only produce many dazzling and colorful effects, as long as you are willing to give it a certain s

3、cenario, it will simulate life appears in the scene. This system is a Flash electronic photo album, photo album produced using Flash tools to complete electronic album production, the electronic album friendly interface appearance, can add photos with some special effects, animation to achieve commo

4、n album can achieve beautiful. The album has the following advantages: easy to store, easy to copy, easy to display, more entertainment, more ornamental, more fashion. And the album easy for users to use and management, has a personalized content.【Key words】Flash electronic photo album personalized目

5、 錄引言1第一章 開(kāi)發(fā)工具介紹11.1 Flash 8.0簡(jiǎn)介11.2 Photoshop cs42第二章 總體設(shè)計(jì)22.1 整體思路22.2 素材準(zhǔn)備32.3 設(shè)計(jì)路線(xiàn)3第三章 詳細(xì)設(shè)計(jì)33.1 制作主界面動(dòng)畫(huà)模塊設(shè)計(jì)43.2 制作文字動(dòng)畫(huà)模塊設(shè)計(jì)53.3 制作主界面文字按鈕模塊設(shè)計(jì)53.4 制作目錄文字按鈕模塊設(shè)計(jì)63.5 制作滾動(dòng)圖片模塊設(shè)計(jì)83.6 制作婚紗照模塊設(shè)計(jì)93.7 制作寶寶相冊(cè)模塊設(shè)計(jì)103.8 制作文字片尾模塊設(shè)計(jì)113.9 插入背景音樂(lè)模塊設(shè)計(jì)11結(jié)論11參考文獻(xiàn)13致謝1415引言Flash 是一種創(chuàng)作工具，設(shè)計(jì)人員和開(kāi)發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其它允許

6、用戶(hù)交互的內(nèi)容。Flash 可以包含簡(jiǎn)單的動(dòng)畫(huà)、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的任何內(nèi)容。通常，使用 Flash 創(chuàng)作的各個(gè)內(nèi)容單元稱(chēng)為應(yīng)用程序，即使它們可能只是很簡(jiǎn)單的動(dòng)畫(huà)。您也可以通過(guò)添加圖片、聲音、視頻和特殊效果，構(gòu)建包含豐富媒體的 Flash 應(yīng)用程序。本系統(tǒng)是一個(gè)Flash電子相冊(cè)，相冊(cè)使用FLASH制作工具完成電子相冊(cè)的制作，該電子相冊(cè)界面友好美觀，能夠加入照片的特效，配合一些動(dòng)畫(huà)效果的實(shí)現(xiàn)達(dá)到普通相冊(cè)無(wú)法達(dá)到的美觀性。該相冊(cè)具有以下的優(yōu)點(diǎn)：易于保存、易于復(fù)制、易于展示、更具娛樂(lè)性、更具觀賞性、更具時(shí)尚性。并且相冊(cè)易于用戶(hù)的使用與管理，具有一定的個(gè)性化內(nèi)容。第一章

7、 開(kāi)發(fā)工具介紹1.1 Flash 8.0簡(jiǎn)介Flash 8.0是美國(guó)MACROMEDIA公司于1999年6月推出的優(yōu)秀網(wǎng)頁(yè)動(dòng)畫(huà)設(shè)計(jì)軟件。它是一種交互式動(dòng)畫(huà)設(shè)計(jì)工具，用它可以將音樂(lè)、聲效、動(dòng)畫(huà)以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁(yè)動(dòng)態(tài)效果。Flash 8.0是采用矢量圖形和流式播放技術(shù)進(jìn)行二維動(dòng)畫(huà)編輯的軟件，經(jīng)過(guò)幾代版本改進(jìn)后，已經(jīng)成為網(wǎng)上動(dòng)畫(huà)的霸主。Flash能夠很好的支持聲音，并具有交互功能，簡(jiǎn)單易學(xué)，可以方便實(shí)現(xiàn)一些現(xiàn)實(shí)中難以實(shí)現(xiàn)的、抽象的概念或現(xiàn)象。Flash 8.0是目前網(wǎng)絡(luò)動(dòng)畫(huà)的事實(shí)標(biāo)準(zhǔn)，其文件短小，播放效果好，交互功能強(qiáng)，易學(xué)易用，被廣泛應(yīng)用于以下幾個(gè)領(lǐng)域：（1）娛樂(lè)短

8、片：這是當(dāng)前國(guó)內(nèi)最火爆，也是廣大Flash愛(ài)好者最熱衷應(yīng)用的一個(gè)領(lǐng)域，就是利用Flash制作動(dòng)畫(huà)短片，供大家?jiàn)蕵?lè)。（2）片頭：片頭就如電視的欄目片頭一樣，可以在很短的時(shí)間內(nèi)把自己的整體信息傳播給訪(fǎng)問(wèn)者，既可以給訪(fǎng)問(wèn)者留下深刻的印象，同時(shí)也能在訪(fǎng)問(wèn)者心中建立良好印象。廣告：這是最近兩年開(kāi)始流行的一種形式。有了Flash，廣告在網(wǎng)絡(luò)上發(fā)布才成為了可能，而且發(fā)展勢(shì)頭迅猛。MTV：這也是一種應(yīng)用比較廣泛的形式。在一些Flash制作的網(wǎng)站，幾乎每周都有新的MTV作品產(chǎn)生。在國(guó)內(nèi)，用Flash制作MTV也開(kāi)始有了商業(yè)應(yīng)用，比如用Flash制作的MTV。（3）導(dǎo)航條：Flash的按鈕功能非常強(qiáng)大，是制作菜單

9、的首選。（4）小游戲：利用Flash開(kāi)發(fā)“迷你”小游戲，在國(guó)外一些大公司比較流行，他們把網(wǎng)絡(luò)廣告和網(wǎng)絡(luò)游戲結(jié)合起來(lái)，讓觀眾參與其中，大大增強(qiáng)了廣告效果。（5）產(chǎn)品展示：由于Flash有強(qiáng)大的交互功能，所以一些大公司，如Dell、三星等，都喜歡利用它來(lái)展示產(chǎn)品。1.2 Photoshop cs4Photoshop cs4擁有多種選擇工具，極大地方便了用戶(hù)的不同要求。而且多種選擇工具還可以結(jié)合起來(lái)選擇 較為復(fù)雜的圖像。制定多種文字效果利用Photoshop cs4不僅可以制作精美的文字造型，而且還可以對(duì)文字進(jìn)行復(fù)雜的變換。多姿多彩的濾鏡Photoshop cs4不僅擁有多種內(nèi)置濾鏡可供用戶(hù)選擇使用

10、，而且還支持第三方的濾鏡。這樣，Photoshop cs4就擁有了“取之不盡，用之不竭”的濾鏡。Photoshop cs4易學(xué)易用，用途廣泛對(duì)Photoshop cs4不了解的人常常認(rèn)為它是一種專(zhuān)業(yè)圖形圖像處理軟件，其實(shí)這是一種誤解，Photoshop cs4雖然功能強(qiáng)大，但是也易學(xué)易用，適應(yīng)于不同水平的用戶(hù)。它涉及圖像合成、色彩校正、圖層調(diào)板、通道使用、動(dòng)作調(diào)板、路徑工具、濾鏡等圖像處理功能。可制作如按鈕制作、文字特效、材質(zhì)紋理、三維物體、影像特效及廣告創(chuàng)意設(shè)計(jì)等多種用途,是一門(mén)值得深入學(xué)習(xí)的一種好軟件。第二章 總體設(shè)計(jì)2.1 整體思路動(dòng)畫(huà)采用Flash 8.0進(jìn)行設(shè)計(jì)，以Photoshop

11、 CS4作為動(dòng)畫(huà)輔助制作軟件，完成相關(guān)圖片（素材）的處理（制作），總體構(gòu)思如圖2.1所示。前期準(zhǔn)備是一部完整Flash電子相冊(cè)的起步階段，前期準(zhǔn)備充分與否尤為重要，往往需要設(shè)計(jì)者就劇本的故事、劇作的結(jié)構(gòu)、風(fēng)格、圖片、音樂(lè)等一系列問(wèn)題進(jìn)行反復(fù)的探討、商榷。首先要有一部構(gòu)思完整、結(jié)構(gòu)出色的文學(xué)劇本，接著需要根據(jù)劇本設(shè)計(jì)主場(chǎng)景。盡可能地達(dá)到音樂(lè)與畫(huà)面上動(dòng)作節(jié)奏的和諧、統(tǒng)一。達(dá)到音樂(lè)配合畫(huà)面動(dòng)作、色彩、意境的效果。首先，我先將我所需要的圖片美化，還有將必須要用到的按鈕圖片素材準(zhǔn)備好，再者，我通過(guò)以回憶的方式將哥哥姐姐的照片一點(diǎn)一點(diǎn)展現(xiàn)給大家，并且配上文字使整個(gè)Flash更富有活力，最后我選取一首幸福的

12、甜蜜的歌曲插入我的作品當(dāng)中，烘托出整個(gè)電子相冊(cè)幸福的感覺(jué)。相冊(cè)切換效果交互功能美化圖片美化按鈕添加音樂(lè)圖2.1總體構(gòu)思圖2.2 素材準(zhǔn)備這是工程最龐大的一塊，當(dāng)然靠Flash是遠(yuǎn)遠(yuǎn)不夠的，還需要用到Photoshop cs4圖像處理軟件，又要考慮到電子相冊(cè)的個(gè)性化界面效果，因此，此項(xiàng)工程需要認(rèn)真構(gòu)思它的美觀性，這就需要我把構(gòu)思思路詳細(xì)記錄下來(lái)，以便工作的順利開(kāi)展。同時(shí)，為此電子相冊(cè)選取優(yōu)美的背景音樂(lè)也是一不容忽視的問(wèn)題，由于這個(gè)電子相冊(cè)素材主要是以自己身邊的親戚的婚紗照為主題的，所以這個(gè)背景音樂(lè)應(yīng)該是幸福的、歡快的，因此，我選擇了曲婉婷的Life Is Like a Song為背景音樂(lè)，烘托出

13、幸福的氣氛。2.3 設(shè)計(jì)路線(xiàn)從選題創(chuàng)意結(jié)構(gòu)化分析素材準(zhǔn)備電子相冊(cè)分解制作電子相冊(cè)組合電子相冊(cè)程序編寫(xiě)，全面考慮作品的創(chuàng)造力、交互式、原創(chuàng)性、趣味性、功能性、技術(shù)性、積極性、相關(guān)性等。Flash電子相冊(cè)設(shè)計(jì)時(shí)兼顧以上知識(shí)點(diǎn)，可延伸至互聯(lián)網(wǎng)供大家分享，具體設(shè)計(jì)路線(xiàn)如圖2.2所示。主界面那年在高中那年在大學(xué)那年我們畢業(yè)現(xiàn)在的我們主要展示婚紗照主要展示現(xiàn)在生活及寶寶照片主要展示兩人大學(xué)生活主要展示高中的相遇到相愛(ài)圖2.2設(shè)計(jì)路線(xiàn)結(jié)構(gòu)圖第三章 詳細(xì)設(shè)計(jì)該電子相冊(cè)分為主界面動(dòng)畫(huà)制作、文字動(dòng)畫(huà)制作、利用畫(huà)圖工具制作漂浮動(dòng)畫(huà)、文字及圖片按鈕制作、利用旋轉(zhuǎn)及縮放工具制作動(dòng)態(tài)圖片等模塊，下面我將對(duì)9個(gè)典型的模塊做

14、介紹。3.1 制作主界面動(dòng)畫(huà)模塊設(shè)計(jì)（1）新建一個(gè)圖層，重命名為“首頁(yè)動(dòng)畫(huà)圖片”，在第1幀處單擊鼠標(biāo)右鍵，插入關(guān)鍵幀，導(dǎo)入寬為258，高為300的動(dòng)畫(huà)圖片“位圖2”，并且放在X:135、Y:36處，并且在第14幀處插入幀，使該圖片在舞臺(tái)中持續(xù)到第14幀，如圖3.1所示。圖3.1首頁(yè)動(dòng)畫(huà) （2）在“首頁(yè)動(dòng)畫(huà)圖片”圖層中第9幀處插入關(guān)鍵幀，并且將“位圖2”移動(dòng)至X:33，Y:53處,在2-8幀處鼠標(biāo)右擊選擇“創(chuàng)建補(bǔ)間動(dòng)畫(huà)”， 并且在第14幀處同樣插入關(guān)鍵幀并創(chuàng)建補(bǔ)間動(dòng)畫(huà)，生成動(dòng)畫(huà)效果，如圖3.2所示。圖3.2首頁(yè)動(dòng)畫(huà)制作圖3.2 制作文字動(dòng)畫(huà)模塊設(shè)計(jì)新建一個(gè)圖層“閃圖高中”，將“位圖8”插入，并且

15、新建兩個(gè)圖層“文字”與“介紹”，分別運(yùn)用文字工具寫(xiě)入所需文字，并且將“介紹”一欄文字運(yùn)用插入關(guān)鍵字并且創(chuàng)建補(bǔ)間動(dòng)畫(huà)的方法達(dá)到文字緩緩滾入的效果，如圖3.3、3.4所示。圖3.4文字滾入頁(yè)面效果圖3.3嵌入字體3.3 制作主界面文字按鈕模塊設(shè)計(jì)（1）新建一個(gè)圖層，重命名為“按鈕”，插入新建元件，選擇按鈕，并且在新建好的按鈕頁(yè)面利用文字工具寫(xiě)出“A Love Story”，分別在“彈起”“指針經(jīng)過(guò)”“按下”“點(diǎn)擊”處右擊插入關(guān)鍵幀，并且分別將字體顏色改變，生成動(dòng)畫(huà)按鈕，如圖3.5所示。圖3.5文字按鈕制作（2）在“按鈕”圖層第9幀處單擊鼠標(biāo)右鍵，插入關(guān)鍵幀，將圖3.5按鈕插入，并且在第14幀處插入

16、幀，使該按鈕持續(xù)到14幀處，如圖3.6所示。圖3.6文字按鈕效果（3）如果要使按鈕起作用，就得給按鈕添加動(dòng)作，在這里我希望按下按鈕后到達(dá)第15幀，代碼為: on(release) gotoAndPlay(15); 如圖3.7所示。圖3.7文字按鈕代碼3.4 制作目錄文字按鈕模塊設(shè)計(jì)（1）新建一個(gè)圖層，重命名為“目錄”，在第15幀插入關(guān)鍵幀，插入背景圖片“背景”，并且再新建一個(gè)圖層“文字1”，運(yùn)用文字工具在背景圖片上寫(xiě)“You And Me”，效果如圖3.8所示。圖3.8主頁(yè)文字嵌入（2）新建四個(gè)圖層，分別重命名為“高中”、“大學(xué)”、“畢業(yè)”、“現(xiàn)在”，并且分別在圖層上運(yùn)用文字工具寫(xiě)上“那年在高

17、中”、“ 那年在大學(xué)”、“那年我們畢業(yè)”、“現(xiàn)在的我們”，分別在每個(gè)圖層的第15幀處插入關(guān)鍵字，分別將寫(xiě)好的文字插入舞臺(tái)，效果如圖3.9所示。（3）要達(dá)到按鈕效果，就需要將圖11上的四組字轉(zhuǎn)為按鈕元件，分別將按鈕重命名為“高中按鈕”“大學(xué)按鈕”“畢業(yè)按鈕”“現(xiàn)在按鈕” ，如圖3.10所示。圖3.9主頁(yè)文字按鈕寫(xiě)入圖3.10主頁(yè)文字按鈕轉(zhuǎn)為元件（4）要想每個(gè)按鈕起作用，就需要分別在按鈕上添加動(dòng)作，當(dāng)鼠標(biāo)點(diǎn)擊每行字時(shí)能夠到達(dá)想要到達(dá)第931、45、76、348幀，按鈕代碼同圖3.11所示。圖3.11主頁(yè)文字按鈕添加代碼（5）當(dāng)然只在按鈕上添加動(dòng)作是不夠的，要想保持鼠標(biāo)在點(diǎn)擊按鈕前該頁(yè)面靜止，點(diǎn)擊時(shí)

18、按鈕產(chǎn)生動(dòng)作還需要分別將這四個(gè)按鈕在第15幀時(shí)插入關(guān)鍵幀并且寫(xiě)入代碼時(shí)頁(yè)面靜止，如圖3.12所示。圖3.12主頁(yè)文字按鈕添加代碼3.5 制作滾動(dòng)圖片模塊設(shè)計(jì)（1）新建一個(gè)圖層，插入元件，新建影片剪輯“影片”，將準(zhǔn)備好的照片素材連串起來(lái)，效果如圖3.13所示。圖3.13照片影片剪輯（2）將做好的影片剪輯插入到舞臺(tái)第106幀，并且運(yùn)用插入關(guān)鍵幀并創(chuàng)建補(bǔ)間動(dòng)畫(huà)的方式將影片在舞臺(tái)上緩緩插入，并且運(yùn)用刷子工具為該影片制作漂亮背景，效果如圖3.14所示。圖4.14影片剪輯插入舞臺(tái)3.6 制作婚紗照模塊設(shè)計(jì)（1）插入圖片，并且運(yùn)用文字工具對(duì)開(kāi)場(chǎng)進(jìn)行描述，并且配上簡(jiǎn)單的圖案動(dòng)畫(huà)制造浪漫氛圍，這里我用橢圓工具畫(huà)

19、出泡泡，對(duì)泡泡進(jìn)行了亮度設(shè)置使泡泡在運(yùn)動(dòng)過(guò)程中顏色漸變，效果對(duì)比如圖3.15、3.16所示。圖3.15畫(huà)圖工具制作泡泡圖3.16制作泡泡動(dòng)畫(huà)（2）新建圖層“婚紗照1”，在第395幀的時(shí)候?qū)D片“45-46”插入，對(duì)該照片進(jìn)行設(shè)置，運(yùn)用縮放工具、旋轉(zhuǎn)工具對(duì)該照片進(jìn)行設(shè)置，并且將圖片在不同幀數(shù)的時(shí)候的亮度改變創(chuàng)建補(bǔ)間動(dòng)畫(huà)，使圖片呈現(xiàn)出漸入漸出的效果，如圖3.17、3.18所示。圖3.18縮放工具縮小照片圖3.17縮放工具設(shè)置照片（3）其余幾張婚紗照同樣運(yùn)用與上面相同的方法使照片展示給大家，并且配上背景上的各種形狀的圈圈點(diǎn)點(diǎn)的轉(zhuǎn)動(dòng)效果如圖3.19所示。圖3.19相冊(cè)效果圖3.7 制作寶寶相冊(cè)模塊設(shè)計(jì)

20、首先將準(zhǔn)備好的寶寶照片素材插入新建圖層“圖片1”，對(duì)該照片添加模糊特效，如圖3.20所示。圖3.20寶寶照片制作特效3.8 制作文字片尾模塊設(shè)計(jì)片尾我運(yùn)用文字的方式來(lái)表達(dá)該影片的結(jié)束，并且運(yùn)用浮動(dòng)的泡泡的色調(diào)轉(zhuǎn)變，烘托出整個(gè)影片的幸福氣氛，效果對(duì)比如圖3.21、3.22所示。圖3.22片尾文字動(dòng)畫(huà)圖3.21片尾文字嵌入3.9 插入背景音樂(lè)模塊設(shè)計(jì)先將準(zhǔn)備好的背景音樂(lè)導(dǎo)入到庫(kù)中，并將音樂(lè)加入到flash中去，如圖4.23所示。圖3.23插入背景音樂(lè)結(jié)論在本電子相冊(cè)的制作中，我以哥哥姐姐的婚紗照為例，用Flash 8.0作為開(kāi)發(fā)工具，綜合運(yùn)用Flash的各種功能，包括運(yùn)用補(bǔ)間動(dòng)畫(huà)和逐幀動(dòng)畫(huà)實(shí)現(xiàn)了照

21、片的展示效果，同時(shí)也運(yùn)用了按鈕和動(dòng)作命令實(shí)現(xiàn)了交互效果，最終完成了該電子相冊(cè)，經(jīng)測(cè)試，運(yùn)行良好。制作一個(gè)吸引瀏覽者的Flash作品，必須要有豐富的想象力，只有敢于想象，才能制作出優(yōu)秀的Flash作品，只有選題新穎、賦予新意的作品才能讓瀏覽者駐足。但由于本人專(zhuān)業(yè)水平有限，雖追求完美，但仍有很大不足之處有待改正。在以后的學(xué)習(xí)中，我將不斷努力，提高自己的專(zhuān)業(yè)水平，設(shè)計(jì)出更完美的Flash作品。參考文獻(xiàn)1 羅小燕.Flash動(dòng)畫(huà)與卡通制作創(chuàng)意導(dǎo)航M.北京：清華大學(xué)出版社，20022 高志清.Flash動(dòng)作制作零點(diǎn)飛躍學(xué)設(shè)計(jì)零點(diǎn)飛躍叢書(shū)M.水利水電出版社，20053 李瓊.Flash8.0閃客動(dòng)畫(huà)輕松現(xiàn)場(chǎng)實(shí)戰(zhàn)M.航空工業(yè)出版社，20074 德漢.周輝.Flash MX 2004 網(wǎng)頁(yè)動(dòng)畫(huà)制作標(biāo)準(zhǔn)教材M.電子工業(yè)出版社，20045 趙子江.變形動(dòng)畫(huà)制作教程M.北京：機(jī)械工業(yè)出版社，20006 趙國(guó)志.趙璐.色彩構(gòu)成與繪畫(huà)設(shè)計(jì)藝術(shù)M.遼寧：美術(shù)出版社，20007 瑞哈特（美）.曹銘.Flash MX寶典M.電子工業(yè)出版社，20038 雪之航工作室.Flash MX 中文版技巧和實(shí)例M.中國(guó)鐵道出版社，20039 陳青.Flash MX 2004標(biāo)準(zhǔn)案例教材M.人品郵電出版社，2006致謝首先，我要特別感謝朱帥老