线上互动式FLASH教学网页.doc

線上互動式FLASH教學網頁資管四A 第九組指導教授：吳有龍組員：鄧景元黃竹酉 林明祥李燕承 李子平八十九年三月至八十九年十二月壹、摘要Flash已經出到了5.0的版本，在向量動畫製作上都是以著功能齊備、介面簡單、操作容易為主要訴求。而新版的5.0更是把 ActionScript 發整成更完整的語言架構，讓Flash的動畫增添了活潑生動的效果，更有互動式的語言讓動畫和使用者產生互動。因為Flash不僅有檔案小、續傳性、迷人動畫而讓它在網路上大放異彩。Flash已經是一個普遍的軟體，網路有許多的教學網站，大部分網站都是以HTML的網頁方式呈現。為了吸引想學Flash的初學者，而設計了一個動畫，教導學習者如何初步使用Flash。而在進階方面是以HTML的方式表現，且在右框架有Flash的成品來展現，讓學習者了解用Flash所作出的效果。而在左邊的連結上，可以讓對Flash已經有認識的人，可以直接點選自己想要瀏覽，或者學習的教學項目。且在每個教學項目中，又細分項目來要分段教學，讓學習者能有順序的來學習。貳、研究目的在寬頻的時代裡，網路的發展已經相當成熟，上網已經是現代人的一種習慣。利用網路的便捷性，讓學習者不管什麼時候、不管什麼地方，只要上網就能學習到Flash。而簡易的的操作介面，讓學習者不會因為網頁太複雜，而不曉得該如何去使用、瀏覽。而且把教學內容以主題是教學來分類，並且把製作的步驟以分頁的方式讓學習者能一步一步跟著學習。系統設計定義問題需求定義開發設計系統雛形系統系統測試修改參、系統設計與需求（一） 系統設計線上互動式FLASH教學網頁 Actions 好站 圖文 遮罩 按鈕 選單 捲軸 預載 加入 指令 連結動畫 教學 教學 製作 製作 畫面 背景 &作品 音樂網頁的系統架構如上圖所示，教學課程設計如下：在每個教學單元中的第一頁地方，我們先以製作摘要來為這項單元做簡單的解說；再附上成品預覽，讓使用者知道這項教學單元製做出來是怎樣的效果。在每項教學單元裏，大致都有2項左右的課程，我們參考在市面上教導如何製作FLASH的書籍，以文字敘述和圖片講解外，並附上半成品或成品方便使用者清楚知道目前所製作出來的成品具有怎樣的效果；而有些教單元，我們以錄影的方式來做線上教學，對於有興趣的單元，使用者可以按下播放按鈕，即可看到製作的過程。這是針對製作上較複雜的部份所做的教學設計，為的是讓使用者透過我們的教學課程，可以克服學習上的盲點。教學單元教學設計圖文動畫 遮罩教學按鈕教學 加入背景音樂以文字、圖片、FLASH動畫為主的教學 選單製作 捲軸製作 預載畫面以文字、圖片、FLASH動畫和影片為主的教學例：圖文動畫共計分有基礎文字動畫、飛出飛入效果和離焦聚焦效果三項。連結到這個教學單元時，一進去可以看到這三個的文字動畫，點選項目後，即進入該項目的教學課程，而依照製作上的順序分步驟，如進入到飛出飛入效果，我們就分有如下的三個步驟：步驟一步驟二步驟三製作文字元件，並將它們安排在場景中製作飛入和飛出效果做最後修改每個步驟我們以簡單的文字敘述該步驟的製作大概是做什麼，主要內容再詳細的做教導。例：選單製作（看是那個單元）為了怕某些使用者在看完本網站的圖文解說後對部分的教學步驟會因對教學解說了解的程度差別而存有疑問，而無法順利學習完成。因此我們特地將我們操作的過程錄影下來，讓使用者可以有所參考。一些步驟較長的範例我們也將錄影過程分段讓使用者不必每次要參考時都必須要花上許多時間。Actions指令：在這部份我們針對較常用的一些指令（如：go to或按鈕動作），做摘要式的範例說明。好站連結&作品：針對一些FLASH教學網站或是以FLASH設計的網站，在內容有完善的規劃或是很有創意的美工設計，我們列舉出數個網站，以供使用者可得到製作FLASH的相關課程或訊息。我們也提供幾個作品，供使用者觀看、試玩或是下載。（二） 系統需求執行本教學網頁時所需的軟硬體需求如下：1 硬體需求：主機：Pentium II以上硬碟：20GB 以上Hard Disk（足夠的空間安裝所需的軟體即可）顯示器：VGA或是更高解析度的顯示器滑鼠/鍵盤：不限種類，和主機板相容即可。喇叭：不限種類。網路卡：內建網路卡（或更好的）2 軟體需求（建議使用）：Windows95/98/NT作業系統FLASH5DIRECTOR8.0瀏灠器 IE 5.0 或Netscape 5.0以上系統概述: 雖然目前已經有很多關於Flash的教學軟體或線上網頁，但不是內容未更新就是屬於初級的簡易教學，幾乎沒有真正了解到Flash 5的真正有價值的地方，也就Flash 5 ActionScript。 1.線上教學網頁: 本專案是一套線上教學的網頁，利用線上教學的方式，為您揭開Flash 5 ActionScript 的神秘面紗，不但省時，並能節省許多成本，並符合線上的趨勢，縱使Flash 5已經是家喻戶曉且已經相當普遍，但關於進階的ActionScript程式設計，都避之唯恐不及，所以本組以最平易的線上教學方式，介紹一些最常用的ActionScript程式設計。2.互動? Flash是一套能繪製向量式圖形，亦能製作動畫的軟體，Flash 5和前幾個版本最大的不同就是將原本以VBScript為主的20多個ActionScript 指令改成以VBScript為主的ActionScript並擴充到200多個，同時能與ASP或XML互相結合，所以在製作網頁或動畫的互動效果上，有相當大的彈性。 本專案大量使用ActionScrirt來設計網頁就是希望能完整顯示ActonScript的強大功能，讓Flash 5不單只是設計網頁的工具，更是一套具有完整製作互動效果的軟體。肆、系統使用圖示說明教學網頁首頁上圖是教學網頁的首頁，而以下所列的是課程設計的圖示簡介：（一） 首頁：進入網頁時的主要畫面。選擇左列按鈕時，會出現該項的說明文字。（二） 製作摘要：以文字簡介和成品預覽的方式為該項教學單元做摘要式說明。（三）分步驟：在教學中，針對製作順序來分步驟，使讓使用者可漸進式學習該項課程。（四