《Flash動(dòng)畫制作》慕課設(shè)計(jì)與實(shí)現(xiàn) 課程設(shè)計(jì)專業(yè)

緒論研究背景作為近十多年開放式教育最顯著的成果之一，MOOC（慕課）被定義為高等教育創(chuàng)新性發(fā)展的杠桿模式，受到各國教育界的推崇。李瑞軍,季一兵.基于MOOC的混合式教學(xué)模式在分析化學(xué)中的應(yīng)用探究[J].課程教育研究,2017(45):179-180.與傳統(tǒng)課程相比，慕課以興趣為導(dǎo)向，學(xué)生可以突破時(shí)間、空間的限制進(jìn)行自由學(xué)習(xí)，視頻的時(shí)間一般為10李瑞軍,季一兵.基于MOOC的混合式教學(xué)模式在分析化學(xué)中的應(yīng)用探究[J].課程教育研究,2017(45):179-180.1.2研究意義與目的隨著信息時(shí)代的快速發(fā)展，教育資源也越來越豐富，現(xiàn)在比較流行的慕課網(wǎng)站有可汗學(xué)院、華文慕課、超星慕課、虎課網(wǎng)、網(wǎng)易公開課、學(xué)堂在線、好大學(xué)在線、我要自學(xué)網(wǎng)等等。既然是慕課，就意味著每個(gè)網(wǎng)站的課程都是非常之多的，而且涵蓋了很多高校的課程。這就使得學(xué)生要浪費(fèi)很大的時(shí)間去搜索這些資源，而且雖然大多數(shù)慕課都是免費(fèi)的，但是追求利益與免費(fèi)本就是一個(gè)矛盾體，所以很多課程也是需要收費(fèi)的。本研究的目的在于，將自己所學(xué)知識(shí)融入到自己的畢業(yè)論文中，并且我的專業(yè)開設(shè)了這門課程，但是僅僅經(jīng)過一個(gè)學(xué)期的課程對(duì)這門課了解的不夠深入，而且僅僅通過上課老師的講解，如果不花時(shí)間自己親自操作的話，很難將知識(shí)掌握。所以必須通過自己進(jìn)一步的學(xué)習(xí)。雖然網(wǎng)上的課程很多，但是沒有專門《flash動(dòng)畫制作》這樣一門幕課的網(wǎng)站，所以如果設(shè)計(jì)這樣專門課程的網(wǎng)站，可以節(jié)省學(xué)生的很多時(shí)間，并且加強(qiáng)自身的自主學(xué)習(xí)能力，提高學(xué)習(xí)效率。國內(nèi)外研究現(xiàn)狀慕課（MOOC）是2008年第一次被加拿大學(xué)長者提出的，自此以來就備受關(guān)注，可以說在教育領(lǐng)域掀起巨大波瀾，2012年被認(rèn)為是世界慕課的元年，我國在過去幾年，對(duì)慕課的研究和探索也非常的多。慕課的出現(xiàn)改變了傳統(tǒng)教學(xué)受時(shí)間、地點(diǎn)的教學(xué)模式，利用網(wǎng)絡(luò)，慕課與傳統(tǒng)教學(xué)相結(jié)合，是慕課未來的發(fā)展方向。合理利用慕課，有助于我國高等教育事業(yè)快速發(fā)展，為高等學(xué)校培養(yǎng)高素質(zhì)的應(yīng)用創(chuàng)新人才提供幫助。據(jù)研究調(diào)查，許多院校均已全面開展慕課網(wǎng)的在線學(xué)習(xí)資源庫應(yīng)用，學(xué)生可進(jìn)行網(wǎng)上學(xué)習(xí)，網(wǎng)上考試，評(píng)價(jià)等，包括教學(xué)資源庫在內(nèi)的在線教育平臺(tái)通過搜集大量學(xué)生學(xué)習(xí)數(shù)據(jù)，可以全面跟蹤和掌握學(xué)生學(xué)習(xí)特點(diǎn)、學(xué)習(xí)行為、進(jìn)行有針對(duì)的教學(xué)，更準(zhǔn)確的評(píng)價(jià)學(xué)生，提高學(xué)生的學(xué)習(xí)效率和質(zhì)量，有利于開展差異化教學(xué)，大大提升人才的培養(yǎng)質(zhì)量，說明使用網(wǎng)課實(shí)現(xiàn)信息化，網(wǎng)絡(luò)化教學(xué)方式的發(fā)展方向更加明確。國內(nèi)關(guān)于Flash動(dòng)畫制作的教程很多，但是很少有一個(gè)專門的Flash網(wǎng)站去適應(yīng)學(xué)習(xí)者去學(xué)習(xí)連續(xù)性的課程。根據(jù)我上網(wǎng)瀏覽的情況來看，如人郵學(xué)院中，flash動(dòng)畫制作這門課是要收費(fèi)的，它的內(nèi)容和課本是一一對(duì)應(yīng)的，視頻放在一起，課件下載放在一起，但是因?yàn)閮H僅是一門課程教學(xué)，我覺得還是沒有專門的網(wǎng)站那么豐富，我所做的專門的慕課網(wǎng)可以為學(xué)習(xí)者提供大量的免費(fèi)資源；中國大學(xué)慕課中也有flash動(dòng)畫也有這門課，但它也是針對(duì)一個(gè)學(xué)期的課程，是有時(shí)間限制的，比如在開學(xué)前你可以報(bào)名學(xué)習(xí)，開始上課了你就不能報(bào)名了，這樣就導(dǎo)致學(xué)習(xí)者不能自由安排時(shí)間學(xué)習(xí)，而我所要做的慕課網(wǎng)是靈活的，學(xué)習(xí)者可以按照自己的時(shí)間來學(xué)習(xí)。研究的思路根據(jù)老師要求的做網(wǎng)站的步驟，首先我訪問了大量的慕課網(wǎng)站，也查閱了慕課在flash動(dòng)畫制作上面的研究，然后學(xué)習(xí)一些做網(wǎng)站的典型案例課程，做好相關(guān)筆記。最開始就是要想好網(wǎng)站的框架，我咨詢了以往學(xué)姐做網(wǎng)站的經(jīng)驗(yàn)，想到要把整個(gè)框架和所填充的內(nèi)容想好，所以每一個(gè)頁面我都要把頁面布局在草稿紙上設(shè)計(jì)好。我訪問的大多數(shù)慕課網(wǎng)站的類型都差不多，構(gòu)造比較復(fù)雜，因?yàn)槔锩嬗泻芏嗾n程，直接就是點(diǎn)進(jìn)去就可以聽課程了，而我要做的就是一門課，所以我要有做自己網(wǎng)站的思路。我想讓自己的網(wǎng)站不要那么花花綠綠，因?yàn)檫@個(gè)網(wǎng)站面對(duì)的是高年級(jí)的學(xué)生，他們的學(xué)習(xí)都是有針對(duì)性的，他們一進(jìn)入網(wǎng)站就可以學(xué)習(xí)了，所以就是很清晰的課程基礎(chǔ)知識(shí)和課程難點(diǎn)以及素材資源的下載。想好大概的布局以后，我就到處整理資料，包括視頻，教學(xué)素材，課程資料等等，然后把所有資料收集到一塊分類放在文件夾中，接下來就是在軟件中進(jìn)行設(shè)計(jì)了。1.5研究的基本內(nèi)容閱讀相關(guān)文獻(xiàn)，發(fā)現(xiàn)專門做一個(gè)《Flash動(dòng)畫制作》慕課的少之又少，只查閱到有少量做專題資源網(wǎng)站，感覺到參考的東西比較少，所以只有先進(jìn)行現(xiàn)狀調(diào)查和信息收集，根據(jù)這些資料做出一個(gè)完整、系統(tǒng)的網(wǎng)站，做到界面簡潔內(nèi)容豐富。然后，對(duì)網(wǎng)站所需要的技術(shù)進(jìn)行詳細(xì)分析，設(shè)計(jì)如何實(shí)現(xiàn)各個(gè)功能。最后，利用Photoshop、Firework、DreamWeaver等開發(fā)工具為網(wǎng)站進(jìn)行模塊構(gòu)建、顏色選取、導(dǎo)航設(shè)計(jì)等實(shí)現(xiàn)網(wǎng)站的總體設(shè)計(jì)。實(shí)現(xiàn)具有文、圖、聲、像的網(wǎng)站，使學(xué)習(xí)者進(jìn)入網(wǎng)站有學(xué)習(xí)的興趣，激起學(xué)生的學(xué)習(xí)動(dòng)機(jī)。在網(wǎng)站界面上，做到界面簡約而不簡單。在網(wǎng)站內(nèi)容上，采用文、圖、聲、像相結(jié)合，不只是有靜態(tài)的文字、圖片，還有聲音和視頻。在網(wǎng)站功能上，做到滿足大多數(shù)學(xué)習(xí)者的需要，功能都可實(shí)現(xiàn)。1.6研究的基本方法本研究是對(duì)《flash動(dòng)畫制作》慕課的設(shè)計(jì)與實(shí)現(xiàn)，以原有網(wǎng)站的內(nèi)容作為設(shè)計(jì)基礎(chǔ)。主要從研究背景及意義、需求分析、總體內(nèi)容設(shè)計(jì)與網(wǎng)站實(shí)現(xiàn)這幾個(gè)方面來進(jìn)行開發(fā)，使用的方法有文獻(xiàn)分析法、調(diào)查研究法、設(shè)計(jì)開發(fā)法。文獻(xiàn)分析法：通過知網(wǎng)、百度搜索等方式對(duì)國內(nèi)外最新相關(guān)研究的文獻(xiàn)進(jìn)行綜合分析。本研究方法主要用于flash動(dòng)畫制作課程的建設(shè)前期的基礎(chǔ)理論和設(shè)計(jì)原則方面。調(diào)查研究法：通過訪問現(xiàn)有的慕課網(wǎng)站，進(jìn)行綜合性的對(duì)比與評(píng)價(jià)分析。本研究方法主要使用與網(wǎng)頁內(nèi)容設(shè)計(jì)及整體設(shè)計(jì)方面。設(shè)計(jì)開發(fā)法：按照一般慕課網(wǎng)站的設(shè)計(jì)開發(fā)方法，對(duì)網(wǎng)站進(jìn)行設(shè)計(jì)并測(cè)試。2《Flash動(dòng)畫制作》慕課前期準(zhǔn)備在制作之前我首先是去訪問大量網(wǎng)站，然后開始瀏覽相關(guān)文獻(xiàn)，將思路畫在草稿圖紙?jiān)O(shè)計(jì)，之后就是收集相關(guān)材料，收集的資料要分類，然后根據(jù)設(shè)計(jì)的思路在Dreamweaver中進(jìn)行設(shè)計(jì)，對(duì)于不會(huì)的部分就在網(wǎng)上學(xué)習(xí)。2.1《Flash動(dòng)畫制作》慕課的可行性分析Flash作為一款優(yōu)秀的軟件，在生活中應(yīng)用十分廣泛。這個(gè)網(wǎng)站提供了大量素材，教學(xué)資源，是按照一般慕課的要求進(jìn)行設(shè)計(jì)的，是符合學(xué)生學(xué)習(xí)要求的，內(nèi)容是按照課本要求設(shè)計(jì)。國內(nèi)外關(guān)于二維動(dòng)畫制作方面的研究資料較多，flash軟件的教程更是數(shù)不勝數(shù)，但是都是具體到此軟件的某一方面介紹，很少有書能體現(xiàn)動(dòng)畫的制作流程、具體操作步驟、詳細(xì)的介紹。徐紅.Flash動(dòng)畫制作課程方法研究[D].南京師范大學(xué),2014.徐紅.Flash動(dòng)畫制作課程方法研究[D].南京師范大學(xué),2014.2.2《Flash動(dòng)畫制作》慕課需求分析隨著互聯(lián)網(wǎng)快速發(fā)展，網(wǎng)絡(luò)資源可謂更加豐富，我通過網(wǎng)上查閱文獻(xiàn)，發(fā)現(xiàn)關(guān)于《flash動(dòng)畫制作》這門課的網(wǎng)站少之又少。Flash軟件的應(yīng)用十分廣泛，例如網(wǎng)頁設(shè)計(jì)、廣告設(shè)計(jì)、MV動(dòng)畫、課件制作等等。Flash動(dòng)畫一個(gè)突出的特點(diǎn)就是操作簡單，對(duì)電腦的硬件要求低，只要在電腦上安裝Flash軟件，不需要較高的設(shè)計(jì)和繪畫技術(shù)便能夠制造出簡單的動(dòng)畫。Flash動(dòng)畫軟件的功能強(qiáng)大，可以重復(fù)使用原件，對(duì)于很多動(dòng)畫公司來說，可以節(jié)約制作成本提高效率，同時(shí)flash動(dòng)畫文件小、傳輸速度快等特點(diǎn)使得動(dòng)畫能夠在網(wǎng)絡(luò)上進(jìn)行廣泛的傳播和下載。在當(dāng)今的動(dòng)畫行業(yè)發(fā)展市場(chǎng)需求還是非常大的，學(xué)習(xí)Flash動(dòng)畫相關(guān)技術(shù)，就興趣愛好者而言可以帶來生活樂趣，可以根據(jù)靈感設(shè)計(jì)出更多的東西。另一方面，如果把flash動(dòng)畫學(xué)好了，可以選擇動(dòng)漫和工程動(dòng)畫進(jìn)行就業(yè)。工程動(dòng)畫主要就是做一些宣傳動(dòng)畫，產(chǎn)品動(dòng)畫宣傳等等。2.3《Flash動(dòng)畫制作》慕課設(shè)計(jì)原則2.3.1用戶需求原則在設(shè)計(jì)網(wǎng)頁時(shí)，我們要充分考慮網(wǎng)站所用對(duì)象，要搞清楚網(wǎng)站的類型，是商業(yè)性網(wǎng)站還是政府網(wǎng)站、個(gè)人網(wǎng)站、學(xué)校網(wǎng)站等等，不同的網(wǎng)站設(shè)計(jì)是不同的。不同網(wǎng)站類型對(duì)應(yīng)著不同的人群，例如我所做的慕課網(wǎng)是針對(duì)高年級(jí)學(xué)生，頁面布局首先要圍繞著主題進(jìn)行展開，內(nèi)容必須符合高年級(jí)學(xué)生學(xué)習(xí)特征的基本要求。因此網(wǎng)頁的布局設(shè)計(jì)要突出主題、充分考慮使用者的年齡階段。2.3.2色彩搭配協(xié)調(diào)性現(xiàn)在的網(wǎng)站設(shè)計(jì)可謂琳瑯滿目，很多設(shè)計(jì)使用各種色彩來吸引眼球。色彩的搭配能第一時(shí)間達(dá)到一定的視覺效果，增加瀏覽網(wǎng)站的興趣。之前我們老師說過色彩的搭配不可以多而雜亂，最多不超過3種，訪問了大量網(wǎng)站后，本課程在頁面設(shè)計(jì)方面選取了清新的白色為主調(diào)。通常被認(rèn)為是“無色”的。白色的明度最高，使用白色給人的印象就是“干凈和簡潔”。同時(shí)導(dǎo)航和部分地方選取了橙色為主調(diào)，因?yàn)槌壬o人一種柔和溫暖的感覺，既能激發(fā)學(xué)習(xí)者的學(xué)習(xí)興趣也不會(huì)太過于花哨。2.3.3一致性原則網(wǎng)站整體風(fēng)格一致是網(wǎng)站自成一體的關(guān)鍵。網(wǎng)站的頁面布局、主要色調(diào)、網(wǎng)站欄目的位置確定及網(wǎng)站內(nèi)容的具體定位等都是網(wǎng)站整體風(fēng)格的決定因素。并且主頁和子頁之間也要保持一致，才能成功凸顯整個(gè)網(wǎng)站的統(tǒng)一性，使使用者清晰知道該網(wǎng)站是一個(gè)整體。因此，網(wǎng)站的首頁與子頁之間要布局、色調(diào)、內(nèi)容定位等保持一致。3Flash動(dòng)畫制作慕課網(wǎng)的設(shè)計(jì)3.1網(wǎng)站功能設(shè)計(jì)網(wǎng)站功能設(shè)計(jì)由網(wǎng)站主題決定，flash動(dòng)畫制作網(wǎng)作為一個(gè)學(xué)習(xí)課程網(wǎng)站，有以下幾個(gè)功能：（1）傳播和推廣flash動(dòng)畫制作知識(shí)的功能。一個(gè)課程網(wǎng)站往往是學(xué)習(xí)者想學(xué)習(xí)這門知識(shí)，想把這門知識(shí)學(xué)習(xí)得更加精通，通過一個(gè)網(wǎng)站，可以全方位覆蓋這門課的知識(shí)點(diǎn)，從而達(dá)到傳播和推廣的效果。（2）幫助想學(xué)者節(jié)約大量時(shí)間，提供免費(fèi)素材和視頻資源的功能。雖然現(xiàn)在的慕課比比皆是，但是免費(fèi)的這類課程還是比較少的，例如在我要自學(xué)網(wǎng)里面，雖然有這門課程，但是你只能聽一部分，后續(xù)你要繼續(xù)學(xué)習(xí)的話必須要用錢購買，如果想學(xué)的人去百度搜素的話，看到的視頻也不是完整的，而且也不齊全，還需要浪費(fèi)大量的時(shí)間去尋找，所以這個(gè)網(wǎng)站將這門課展現(xiàn)出來，就可以滿足學(xué)習(xí)者學(xué)習(xí)的需求，同時(shí)可以為學(xué)習(xí)者節(jié)省很多時(shí)間。（3）結(jié)合了本專業(yè)優(yōu)勢(shì)。首先本專業(yè)教育技術(shù)也包含了這門課程，就意味著本專業(yè)的同學(xué)都需要學(xué)好這門課程，而大學(xué)本來就是需要我們自學(xué)的地方，因?yàn)槔蠋熒险n只是給我們一些提點(diǎn)和引導(dǎo)，不會(huì)手把手教學(xué)，這就需要我們自己下來花功夫?qū)W習(xí)。而這樣的一個(gè)網(wǎng)站，就滿足了本專業(yè)學(xué)習(xí)的需求，除此之外，還涉及了相關(guān)課程，都是我們需要學(xué)習(xí)的，因此是非常必要的。當(dāng)然，除了本專業(yè)的同學(xué)，還可以為一些學(xué)習(xí)愛好者，工作需要者提供相應(yīng)的服務(wù)，畢竟在這“互聯(lián)網(wǎng)+教育”發(fā)展快速的時(shí)代，一定的技能也是十分必要的。我所做的網(wǎng)站頁面設(shè)計(jì)都是按照一般網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)來做的，首先要有網(wǎng)頁的頭部，然后中間部分，然后是尾部，在首頁的設(shè)計(jì)中，我將導(dǎo)航欄分為首頁、課程基礎(chǔ)知識(shí)、課程難點(diǎn)、資源中心、注冊(cè)登錄者幾個(gè)部分。我把中間部分分為幾個(gè)板塊，它的上面我就根據(jù)網(wǎng)站的主題和內(nèi)容精心設(shè)計(jì)了3張圖片，并且將它制作成動(dòng)態(tài)的效果，以便讓整個(gè)頁面看起來靜中有動(dòng)，動(dòng)中有靜。它的中間部分就是關(guān)于這門課的介紹，包括課程概述、授課目標(biāo)、預(yù)備知識(shí)、教師介紹和常見問題的文字闡述，因?yàn)槭且婚T課程，所以讓學(xué)習(xí)者了解這部分是很有必要的。然后就是課程特色了，我找了一些圖標(biāo)，然后用文字簡潔地概況了這門課的特色。下面就是一些超酷素材、作品欣賞和推薦書籍。在其它頁面中，我根據(jù)課程的特點(diǎn)修改了首頁的制作模式，首頁的頭部和尾部保持不變，然后根據(jù)收集的材料進(jìn)行內(nèi)容的填充。FlashFlash動(dòng)畫制作首頁首頁flash動(dòng)畫基礎(chǔ)flash高級(jí)案例課程重點(diǎn)解析精品欣賞素材資源登錄/注冊(cè)3.2首頁設(shè)計(jì)首頁設(shè)計(jì)中頭部是題目+導(dǎo)航欄，參考了很多網(wǎng)站的設(shè)計(jì)，確定好顏色，頭部內(nèi)容后，在photoshop中進(jìn)行文字顏色填充，大小的設(shè)置等等。在導(dǎo)航欄部分，我設(shè)計(jì)了一個(gè)動(dòng)態(tài)時(shí)間的顯示。在中間部分，為了讓畫面中具有動(dòng)態(tài)的效果，我就在網(wǎng)上進(jìn)行了學(xué)習(xí)，然后在dreamweaver中進(jìn)行代碼的編寫，這個(gè)過程看起來比較簡單，但是我還是操作了很多次才把他弄好了，在文字介紹部分，采用的是div+css來完成的，然后調(diào)整好文字的大小等等，超酷素材這一部分的圖片展示采用的是滾動(dòng)的效果，既有動(dòng)態(tài)圖片也有靜態(tài)圖片，我首先在photoshop中將他們的頁面顏色，大小等調(diào)整好，然后這一部分就做好了。3.2.1超酷圖片設(shè)計(jì)這部分是flash中所用的一些素材，圖片有些事GIF格式。不僅可以讓網(wǎng)頁更加美觀，還可以增加學(xué)習(xí)者的學(xué)習(xí)興趣。3.2.2欣賞的設(shè)計(jì)作品作品欣賞是一些flash動(dòng)畫制作對(duì)的成品，為了方便學(xué)習(xí)者通過瀏覽后增強(qiáng)對(duì)學(xué)習(xí)的吸引力，以便將自己的技術(shù)練到爐火純青的地步3.3Flash動(dòng)畫基礎(chǔ)設(shè)計(jì)網(wǎng)站是一個(gè)整體，所以子頁的設(shè)計(jì)也要符合首頁的特征，所以我在設(shè)計(jì)的時(shí)候保持頭部和尾部不變，進(jìn)行中間的設(shè)置。課程基礎(chǔ)知識(shí)相當(dāng)于課程的入門，這是學(xué)習(xí)者最開始要學(xué)習(xí)的，學(xué)習(xí)一門課程肯定要了解這門課的基本知識(shí)內(nèi)容，通過大量的知識(shí)收集之后，我確定將flash動(dòng)畫基礎(chǔ)知識(shí)部分分為flashCS6概述、繪畫工具、編輯修改工具、文本輔助工具和色彩，每一部分對(duì)應(yīng)一個(gè)頁面，在每一個(gè)頁面中，除了知識(shí)點(diǎn)的介紹之外，還有相應(yīng)的視頻。整個(gè)頁面顯示就會(huì)圖文并茂，文字簡潔明了也不會(huì)讓學(xué)習(xí)者乏味，從而失去對(duì)學(xué)習(xí)的興趣。3.4Flash高級(jí)案例Flash高級(jí)案例中包含補(bǔ)間動(dòng)畫、特殊動(dòng)畫、圖層動(dòng)畫、3d工具和骨骼工具，補(bǔ)間動(dòng)畫中包含補(bǔ)間動(dòng)畫的基礎(chǔ)知識(shí)、補(bǔ)間動(dòng)畫的應(yīng)用、案例的講解；特殊動(dòng)畫中包含特殊動(dòng)畫的基礎(chǔ)知識(shí)、特殊動(dòng)畫的應(yīng)用、案例的講解；圖層動(dòng)畫中包含圖層的基礎(chǔ)知識(shí)、圖層動(dòng)畫的應(yīng)用、案例的講解；其他動(dòng)畫中包含3d工具和骨骼工具的基礎(chǔ)知識(shí)、3d工具和骨骼工具動(dòng)畫的應(yīng)用、案例的講解3.5課程重點(diǎn)解析課程重點(diǎn)為腳本動(dòng)畫、交互式動(dòng)畫和音視頻的應(yīng)用，每一部分對(duì)應(yīng)相應(yīng)的視頻，腳本動(dòng)畫包含8個(gè)章節(jié)，分別是什么是腳本動(dòng)畫、ActionScript語句與函數(shù)、動(dòng)作面板與腳本窗口、畫面跳轉(zhuǎn)——表情變幻、事件的響應(yīng)和處理──追鼠標(biāo)的飛鳥、類的應(yīng)用——定時(shí)畫圓、自定義函數(shù)-綠野仙蹤、繪制函數(shù)曲線。交互式動(dòng)畫包含11講的內(nèi)容，分別是交互的概念、鼠標(biāo)的事件、按鈕的結(jié)構(gòu)、控制動(dòng)畫的播放、對(duì)象的拖放、用腳本控制對(duì)象位置、鼠標(biāo)控制元件播放、遮罩動(dòng)畫、創(chuàng)建定時(shí)器緩動(dòng)效果、對(duì)象的創(chuàng)建與復(fù)制、水平全景動(dòng)畫。音視頻應(yīng)用包含10講，分別是音視頻基礎(chǔ)知識(shí)、視頻的轉(zhuǎn)換、為作品配樂、聲音的播放控制、聲音的變換、視頻的應(yīng)用、使用視頻組件播放視頻、為按鈕添加音效、為視頻添加水印、更換視頻文件。設(shè)計(jì)圖如下：3.6精品欣賞課堂教學(xué)是對(duì)固有知識(shí)的講解，而僅僅掌握課堂中的知識(shí)是遠(yuǎn)遠(yuǎn)不夠的，而素材的提供可以幫助學(xué)生發(fā)揮創(chuàng)造力，從而進(jìn)一步提升自己的技能，也讓學(xué)生針對(duì)案例舉一反三。冀亮.Flash動(dòng)畫制作教學(xué)中任務(wù)設(shè)計(jì)的研究和實(shí)踐[J].現(xiàn)代職業(yè)教育,2018(24):70冀亮.Flash動(dòng)畫制作教學(xué)中任務(wù)設(shè)計(jì)的研究和實(shí)踐[J].現(xiàn)代職業(yè)教育,2018(24):703.7素材資源素材資源是方便學(xué)習(xí)者學(xué)習(xí)了課程之后對(duì)學(xué)習(xí)內(nèi)容進(jìn)行鞏固，素材資源有自然風(fēng)光、植物花草、動(dòng)物圖片、節(jié)日?qǐng)D片、美食圖片、節(jié)日?qǐng)D片等等。進(jìn)行素材的分類是方便學(xué)習(xí)者快速找到對(duì)應(yīng)的素材。3.8登錄、注冊(cè)頁面的設(shè)計(jì)圖3-12登錄、注冊(cè)頁面設(shè)計(jì)圖3.3技術(shù)及軟件的選擇網(wǎng)頁制作中技術(shù)是非常關(guān)鍵的部分，在網(wǎng)頁制作中，我選擇的是Dreamweaver軟件，并且使用Photoshop、JavaScript語言、AdobeFireworksCS3協(xié)助使用。3.3.1關(guān)鍵開發(fā)技術(shù)主要使用Dreamweaver軟件對(duì)網(wǎng)站進(jìn)行設(shè)計(jì)與制作，在設(shè)計(jì)與制作網(wǎng)站的過程中，使用了div+css的頁面布局，html標(biāo)簽進(jìn)行加工處理，JavaScript語言進(jìn)行調(diào)用。（1）DIV+CSS網(wǎng)頁布局

DIV+CSS大大縮減頁面代碼，能提高頁面瀏覽速度,縮減帶寬成本；結(jié)構(gòu)清晰，容易被搜索引擎搜索到；縮短改版時(shí)間。只要簡單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁面的站點(diǎn)；CSS非常容易編寫。你可以像寫html代碼一樣輕松地編寫CSS；還能夠更好的控制頁面布局。

CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。（2）HTML技術(shù)超級(jí)文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。

（3）JavaScript語言JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

JavaScript是一種能讓你的網(wǎng)頁更加生動(dòng)活潑的程式語言，也是目前網(wǎng)頁中設(shè)計(jì)中最容易學(xué)又最方便的語言。我們可以利用JavaScript輕易的做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及簡易的選舉，還可以顯示瀏覽器停留的時(shí)間。讓這些特殊效果提高網(wǎng)頁的可觀性。

3.3.2主要開發(fā)工具本研究主要使用的主要軟件是Dreamweaver，Photoshop、AdobeFireworksCS3。（1）AdobeDreamweaverCS6它是一個(gè)設(shè)計(jì)網(wǎng)頁的軟件，由Adobe公司推出。DreamweaverCS6具有最新的web技術(shù)，其界面很直觀、可視化，包含了對(duì)HTML的控制和檢查，它的工作界面包括屬性窗口、浮動(dòng)面板組、視圖窗口、工具欄等，為網(wǎng)頁設(shè)計(jì)提供了很好的開發(fā)環(huán)境。在使用Dreamweaver設(shè)計(jì)與制作網(wǎng)站時(shí)，可以很直觀的看到自己設(shè)計(jì)的每一個(gè)模塊呈現(xiàn)的具體效果，只要設(shè)計(jì)好一部分后，就可以用瀏覽器查看自己所做的效果，讓自己能隨時(shí)按照自己的想法調(diào)節(jié)網(wǎng)頁整體達(dá)到最終目的。而且，使用Dreamweaver對(duì)于素材的插入、編輯等更加方便，對(duì)于初學(xué)者制作時(shí)可以將它的模式設(shè)置成經(jīng)典，然后進(jìn)行拆分模式，這樣一邊看代碼，一邊可以在框中編輯，鼠標(biāo)定位在那點(diǎn)，就可以看到這一部分對(duì)應(yīng)的代碼所對(duì)應(yīng)的內(nèi)容是什么,一旦你在窗口中進(jìn)行操作，左邊的代碼就會(huì)自動(dòng)生成，所以我們就沒有必要自己寫多少代碼了。（2）AdobePhotoshopCS6

Adobe

Photoshop，簡稱“PS”，是由Adobe

Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。（3）AdobeFireworksCS3AdobeFireworksCS3軟件可以加速Web設(shè)計(jì)與開發(fā),是一款創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。FireworksCS3不僅具備編輯矢量圖形與位圖圖像的靈活性,還提供了一個(gè)預(yù)先構(gòu)建資源的公用庫,并可與AdobePhotoshopCS3、AdobeIllustratorCS3、AdobeDreamweaverCS3和AdobeFlashCS3軟件省時(shí)集成。在Fireworks中將設(shè)計(jì)迅速轉(zhuǎn)變?yōu)槟Ｐ?或利用來自Illustrator、Photoshop和Flash的其它資源。然后直接置入DreamweaverCS3中輕松地進(jìn)行開發(fā)與部署。4《Flash動(dòng)畫制作》網(wǎng)站的實(shí)現(xiàn)4.1網(wǎng)站首頁的實(shí)現(xiàn)網(wǎng)站的首頁應(yīng)該要簡潔明了，讓瀏覽網(wǎng)頁的人不眼花繚亂，而且要目標(biāo)明確，所以我的導(dǎo)航欄上面直接就可以看到課程基礎(chǔ)知識(shí)和課程難點(diǎn)，為了不讓網(wǎng)站看起來死板無生機(jī)，我搜索了一些符合網(wǎng)站的圖片，經(jīng)過加工整理，把他們做成動(dòng)態(tài)的形式。然后中間部分就是這門課的介紹，因?yàn)槲覀兇笏纳蠈W(xué)期就學(xué)習(xí)了這門課程，所以我就按照這門課來設(shè)計(jì)，這樣也符合慕課一個(gè)學(xué)期的課程，為了不讓網(wǎng)站單調(diào)，我還添加了超酷圖片、作品欣賞和推薦書籍。如圖4-1。圖4-1網(wǎng)站首頁效果圖4.1.1導(dǎo)航欄的實(shí)現(xiàn)導(dǎo)航欄分為網(wǎng)站首頁、課程基礎(chǔ)知識(shí)、課程難點(diǎn)、資源中心、登錄注冊(cè)這幾部分，由導(dǎo)航欄連接到不同的網(wǎng)頁中。在打開軟件后，要將它的背景顏色填充為灰色#ccc,即插入DIV，然后新建CSS規(guī)則，在css的規(guī)則定義中就可以設(shè)置背景顏色，背景框架大小即在方框中設(shè)置長和寬，考慮到一般網(wǎng)頁的長度和寬度，我將它設(shè)置為長1500，寬1100，由于編輯的每個(gè)模式都是要插入DIV，所以只需要插入DIV后進(jìn)行相關(guān)屬性的設(shè)置，部分代碼如下：</script></div><ul><li><ahref="index.htm">網(wǎng)站首頁</a></li><li><ahref="#.htm">課程基礎(chǔ)知識(shí)</a><dl><dd><ahref="#.html">flash動(dòng)畫基礎(chǔ)知識(shí)</a></dd>導(dǎo)航欄效果如圖4-2。圖4-2網(wǎng)站導(dǎo)航欄效果圖4.1.2首頁：動(dòng)態(tài)圖片的實(shí)現(xiàn)首頁中的動(dòng)態(tài)部分，這個(gè)部分是為了增加網(wǎng)站動(dòng)態(tài)感，讓網(wǎng)站看起來有生機(jī)活力。我用三張圖片，讓他們實(shí)現(xiàn)循環(huán)從左向右移動(dòng)，效果如圖4-3，部分css樣式代碼如下：<divclass="clear"></div><divclass="lunbo"><scripttype="text/javascript"src="js/pptBox.js"></script><script>varbox=newPPTBox();box.width=1100;//寬度box.height=480;//高度box.autoplayer=3;//自動(dòng)播放間隔時(shí)間圖4-3首頁圖片滾動(dòng)效果圖4.1.3首頁：課程信息的實(shí)現(xiàn)首頁的課程信息欄欄部分就是對(duì)這門課的一個(gè)簡介，效果如圖4-4。部分代碼如下：<divclass="main_diva"><h2>課程概述</h2><p>本課程按實(shí)際需要及由淺入深的原則，最終確定了以下三個(gè)階段：第一階段，F(xiàn)lash基本概念的介紹與簡單圖形的繪制。第二階段，簡單動(dòng)畫項(xiàng)目的制作（關(guān)鍵幀動(dòng)畫，補(bǔ)間動(dòng)畫）。第三階段，小型綜合項(xiàng)目的制作。利用前面所學(xué)的知識(shí)，進(jìn)行小型綜合型的動(dòng)畫項(xiàng)目的制作。加深對(duì)前面所學(xué)動(dòng)畫技術(shù)的復(fù)雜操作，做到融會(huì)貫通。最終達(dá)到靈活運(yùn)用各種命令完成作品的制作。</p>圖4-4課程信息欄效果圖4.1.4課程特色的實(shí)現(xiàn)課程特色是與flash動(dòng)畫制作慕課課程相對(duì)應(yīng)的歸納總結(jié)，我需要把這些圖片在photoshop中進(jìn)行處理，并將三張圖片設(shè)置為相同的大小，部分代碼如下：<h2>課程特色</h2><divclass="jsfc"><ul><li><ahref="#"><imgsrc="images/f1.gif"/></a><p>開放課程，隨時(shí)來學(xué)</p></li><li><ahref="#"><imgsrc="images/f2.gif"/></a>圖4-5課程特色效果圖4.1.5超酷圖片界面的實(shí)現(xiàn)超酷圖片界面就是一些flash動(dòng)畫的素材，并且一些圖片是動(dòng)態(tài)形式，不僅可以讓網(wǎng)頁更加美觀，還可以增加學(xué)習(xí)者的學(xué)習(xí)興趣，部分代碼如下：<h2>超酷圖片</h2><divclass="cktp"><marqueebehavior="alternate"><ul><li><ahref="#"><imgsrc="images/1.jpeg"/></a></li><li><ahref="#"><imgsrc="images/3.jpeg"/></a></li>圖4-6超酷圖片頁面效果圖4.1.6作品欣賞的實(shí)現(xiàn)作品欣賞是一些flash動(dòng)畫制作對(duì)的成品，為了方便學(xué)習(xí)者通過瀏覽后增強(qiáng)對(duì)學(xué)習(xí)的吸引力，以便將自己的技術(shù)練到爐火純青的地步。效果如圖4-8。部分代碼如下：<divclass="clear"></div><h2>作品欣賞</h2><divclass="zpxs"><ul><li><embedsrc="flash/z1.swf"width="260"height="220"></embed>圖4-7作品欣賞效果圖4.1.7推薦書籍的實(shí)現(xiàn)推薦書籍是為了學(xué)習(xí)者在多余時(shí)間者下，可以下來再多瀏覽書籍，相信課程的搭配加上課本的學(xué)習(xí)，效果更佳。效果如圖4-9。圖4-8推薦書籍效果圖4.2Flash動(dòng)畫基礎(chǔ)頁面的實(shí)現(xiàn)在課程基礎(chǔ)知識(shí)部分，包含flashCS6概述、繪畫工具、編輯修改工具、文本輔助工具和色彩四個(gè)章節(jié)的內(nèi)容，每一部分對(duì)應(yīng)一個(gè)頁面，在每一個(gè)頁面中，除了知識(shí)點(diǎn)的介紹之外，還有相應(yīng)的視頻，這部分相當(dāng)于課程的入門知識(shí)，對(duì)于已經(jīng)掌握的同學(xué)來說可以忽略。效果如圖4-10。圖4-9課程基礎(chǔ)知識(shí)設(shè)計(jì)效果圖4.3Flash高級(jí)案例頁面的實(shí)現(xiàn)Flash高級(jí)案例分為補(bǔ)間動(dòng)畫、特殊動(dòng)畫、圖層動(dòng)畫、3d工具和骨骼工具，4.4課程重點(diǎn)解析頁面的實(shí)現(xiàn)課程難點(diǎn)這部分是這門課程的后期部分，也是比較難掌握的部分，我將它分為腳本動(dòng)畫、交互式動(dòng)畫和音視頻的應(yīng)用。左邊相當(dāng)于導(dǎo)航欄，右邊對(duì)應(yīng)相應(yīng)的知識(shí)點(diǎn)，將知識(shí)點(diǎn)了解后就可以看視頻，部分代碼如下：<divclass="main_left"><divclass="main_leftlist"><ul><h2>第一章：Flashcs6概述</h2><li><ahref="1-1.html">基礎(chǔ)知識(shí)</a></li><li><ahref="1-2.html">動(dòng)畫知識(shí)點(diǎn)</a></li>4.5精品欣賞頁面的實(shí)現(xiàn)在精品欣賞中，我對(duì)flash動(dòng)畫成品進(jìn)行了分類，主要分為成語動(dòng)畫、兒歌動(dòng)畫、節(jié)目動(dòng)畫、課件動(dòng)畫、植物動(dòng)畫；素材資源又分為自然風(fēng)光、植物圖片、動(dòng)物圖片、節(jié)日?qǐng)D片、美食圖片、其他圖片。學(xué)習(xí)者可以根據(jù)自身的需要進(jìn)行下載。圖3-10精品欣賞頁面部分截圖及下載截圖4.6素材資源頁面的實(shí)現(xiàn)4.5登錄、注冊(cè)頁面實(shí)現(xiàn)登錄注冊(cè)就是方便學(xué)習(xí)者進(jìn)入網(wǎng)站后，可以登錄然后聽課，能避免第三方服務(wù)中斷，或者你不幸忘了第三方密碼又沒有登陸第三方的時(shí)候，還能夠有辦法登陸。同時(shí)為了方便你的多個(gè)第三方賬號(hào)都能登錄到通過賬戶下，而不是每次都創(chuàng)建一個(gè)新賬戶，導(dǎo)致你的體驗(yàn)不連續(xù)。免費(fèi)注冊(cè)頁面效果圖登錄頁面效果圖4.6網(wǎng)站檢測(cè)網(wǎng)站設(shè)計(jì)完成后，需要進(jìn)行網(wǎng)站的檢查。因此我對(duì)網(wǎng)站進(jìn)行了以下查看，主要檢查的內(nèi)容有：（1）在網(wǎng)站中瀏覽網(wǎng)頁，看看是否有需要補(bǔ)充的地方。檢查網(wǎng)頁各頁面內(nèi)容是否完整；（2）檢查每一個(gè)鏈接的使用情況，看鏈接是否能正常使用，確保能鏈接到指定頁面。（3）檢查每個(gè)頁面的圖片是否有誤，圖片的大小是否恰當(dāng)，圖片的處理是否到位，有無殘留不明標(biāo)注等。（4）將已經(jīng)完成的的網(wǎng)站運(yùn)用不同的瀏覽器查看，確認(rèn)網(wǎng)站的內(nèi)容在任何瀏覽器都能正常顯示。經(jīng)過對(duì)本網(wǎng)頁的反復(fù)測(cè)試，發(fā)現(xiàn)了很多小問題，比如：發(fā)現(xiàn)幾個(gè)頁面的鏈接沒有正確鏈接到指定頁面，出現(xiàn)“無此文件的情況”；有的文字鏈接了頁面之后，css樣式無法正常顯示；視頻的上一課和下一課弄反了等等。將這些小問題一一解決之后，網(wǎng)站的基本功能得以實(shí)現(xiàn)。5總結(jié)與展望5.1總結(jié)從最開始無處著手，到后來的完成網(wǎng)站，這一個(gè)過程真的很難。開始去和老師溝通，老師讓我多參考別人的網(wǎng)站，最開始沒有一點(diǎn)點(diǎn)思路，可謂是絞盡腦汁，但是“萬事開頭難”，經(jīng)過了學(xué)習(xí)課程、打框架，確定網(wǎng)頁顏色，搜集資料等等一系列的工作，慢慢的開始制作了。但是往往“理想豐滿，現(xiàn)實(shí)骨感”，設(shè)計(jì)出來的東西往往沒有自己想象中的完美，因?yàn)樽约旱募夹g(shù)還遠(yuǎn)遠(yuǎn)不夠。而且所有的全部要靠自己去想，之前專業(yè)實(shí)習(xí)的時(shí)候分小組做一個(gè)網(wǎng)站都是做一部分就可以了，但是畢業(yè)論文是自己的事，每一部分都需要自己設(shè)計(jì)，就連圖片大小，文字大小，位置什么的都要精確到位。有時(shí)候做錯(cuò)了之后我只得重新看視頻學(xué)習(xí)，做好相關(guān)筆記，有時(shí)候做得不對(duì)，但是不知道是哪里錯(cuò)了，所以要反復(fù)找到問題所在，雖然麻煩，但是一旦找出了問題，就知道相應(yīng)類似的該怎么處理了。雖然整個(gè)課程的內(nèi)容、視頻、素材、課件等都完成了，但是還是十分的不滿意，因?yàn)樽约杭夹g(shù)的欠缺，導(dǎo)致整個(gè)網(wǎng)站動(dòng)態(tài)的太少。在這次設(shè)計(jì)中，我深刻認(rèn)識(shí)到我的