| 課程名稱 |
(中文) 網頁動畫與設計 (英文) Web Animation And Design |
開課單位 | 事業經營學系 | ||
| 課程代碼 | B3670 | ||||
| 授課教師 | 王光正 | ||||
| 學分數 | 2.0 | 必/選修 | 選修 | 開課年級 | 大三 |
| 先修科目或先備能力： | |||||
| 課程概述與目標： 透過網頁動畫的學習與製作，使得網頁的表現更多元化、內容更生動活潑、增加與網頁使用者的互動，學習使用動畫設計工具，培養同學以說故事的方式將抽象的想法具體表現出來。 活用Flash動畫軟體與Dreamweaver網頁設計軟體，學習如何將文字、圖形(點陣圖與向量圖)、影音結合起來，透過時間軸的安排、場景的配置、以及動畫的技巧，將企業的各種活動以2D或3D的方式呈現在網頁上。 | |||||
| 教科書 | 王光正，自編講義。 |
||||
| 參考教材 | 李啟宏(2010)，動畫設計驚歎號：至高的Flash網頁動畫88招，台北：精誠資訊。 | ||||
| 課程大綱 | 學生學習目標 | 單元學習活動 | 學習成效評量 | 備註 | ||
| 週 | 單元主題 | 內容綱要 | ||||
| 1 | 網頁動畫介紹 | 1.介紹動畫概念、演進與趨勢 2.教學評量說明 |
1.介紹動畫概念、演進與趨勢 2.教學評量說明 |
|||
| 2 | 點陣圖去背練習 | 學習在PHOTOSHOP中，將照片去背 | 學習在PHOTOSHOP中，將照片去背 |
|
|
|
| 3 | 向量圖繪製01 | 海報設計 | 1. 模仿圖庫中的海報 2. 將其轉換為向量圖 3. 在AI中置入各個向量圖片 4. 加入文字效果 |
|
|
|
| 4 | 向量圖繪製02 | 1. 繪製大同LOGO 2. 毛髮去背 |
1. 活用AI繪製大同LOGO 2. 在PSD中學習毛髮去背的技巧 |
|
|
|
| 5 | 動畫入門訓練 | 1.點陣圖的編輯 2.向量圖的編輯 |
1.點陣圖的編輯 2.向量圖的編輯 |
|||
| 6 | 動畫入門訓練 | Flash軟體入門簡介與操作 | Flash軟體入門簡介與操作 |
|
||
| 7 | 動畫基本練習 | 1.逐格動畫 2.補間動畫 3.形狀動畫 4.遮色片的使用 5.場景製作 |
1.逐格動畫 2.補間動畫 3.形狀動畫 4.遮色片的使用 5.場景製作 |
|
||
| 8 | 動畫基本練習 | 1.逐格動畫 2.補間動畫 3.形狀動畫 4.遮色片的使用 5.場景製作 |
1.逐格動畫 2.補間動畫 3.形狀動畫 4.遮色片的使用 5.場景製作 |
|
||
| 9 | 動畫基本練習 | 1.按紐元件 2.濾鏡效果 3.文字工具 |
1.按紐元件 2.濾鏡效果 3.文字工具 |
|
||
| 10 | 動畫整合練習 | 1.自訂主題製作簡單動畫 2.實際發布上網 |
1.自訂主題製作簡單動畫 2.實際發布上網 |
|
||
| 11 | 動畫整合練習 | 1.自訂主題製作簡單動畫 2.實際發布上網 |
1.自訂主題製作簡單動畫 2.實際發布上網 |
|
||
| 12 | 動畫進階 | Flash程式碼(AS3)介紹 | Flash程式碼(AS3)介紹 |
|
||
| 13 | 動畫進階 | Flash程式碼(AS3)介紹 | Flash程式碼(AS3)介紹 |
|
||
| 14 | 期中報告 | Flash動畫實作並上網 | Flash動畫實作並上網 | |||
| 15 | 期中報告 | Flash動畫實作並上網 | Flash動畫實作並上網 | |||
| 16 | 動畫新趨勢 | 1.HTML + CSS + jQuery介紹 2.Dreamweaver的活用 |
1.HTML + CSS + jQuery介紹 2.Dreamweaver的活用 |
|
||
| 17 | 動畫新趨勢 | jQuery的基本語法與應用 | jQuery的基本語法與應用 |
|
||
| 18 | 動畫新趨勢 | jQuery的基本語法與應用 | jQuery的基本語法與應用 |
|
||
| 19 | 動畫新趨勢 | 好用的jQuery 外掛程式 | 好用的jQuery 外掛程式 |
|
||
| 20 | 動畫新趨勢 | 好用的jQuery 外掛程式 | 好用的jQuery 外掛程式 | |||
| 21 | 動畫新趨勢 | 簡易資料庫的展現 jQuery + Ajax + XML |
簡易資料庫的展現 jQuery + Ajax + XML |
|
||
| 22 | 動畫新趨勢 | 簡易資料庫的展現 jQuery + Ajax + XML |
簡易資料庫的展現 jQuery + Ajax + XML |
|
||
| 23 | 動畫新趨勢 | 手機版的網頁設計 jQuery Mobile |
手機版的網頁設計 jQuery Mobile |
|
||
| 24 | 期末報告 | jQuery動畫實作並上網 | jQuery動畫實作並上網 |
|
||
|
教學要點概述： |