課程名稱 |
(中文) 網頁動畫與設計 (英文) 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動畫實作並上網 |
|
教學要點概述: |