Transcript 動畫圖檔的製作
Slide 1
動畫圖檔製作與運用
網頁圖檔簡介
動畫製作
動態HTML效果
製作相片投影片秀
講師： 董建弘
陳鍶琦
日期： 96年7月5日
Slide 2
網頁圖檔簡介
Slide 3
網頁圖檔簡介
• 檔案格式
–
–
–
–
BMP
GIF
JPGE
PNG
3 / 44
Slide 4
網頁圖檔簡介
• BMP (Bit-Mapped)
– 壓縮
• 無
• REL (Run-Length Encoding)
– REL4
– REL8
– 優點
• 檔讀檔速度是最快
• 圖形品質最好
– 缺點
• 檔案十分龐大
• 沒有透明格式
– 應用
• 正方型圖片
• 按鈕
• 較小的背景圖
4 / 44
Slide 5
網頁圖檔簡介
• GIF (圖形交換格式)
– 壓縮
• 256色調色盤
• REL (Run-Length Encoding)
全彩 769KB
256 188KB
32 94KB
4 34KB
5 / 44
Slide 6
網頁圖檔簡介
• GIF (圖形交換格式)
– 壓縮
• 256色調色盤
• REL (Run-Length Encoding)
– 優點
• 有透明及動畫的格式
• 較同規格(256色)的BMP還小
bmp
gif
– 缺點
• 顏色流失
• 不適合作「會移動的圖形」
– 應用
• 不規則的圖形
• 按鈕
• 色彩簡單的背景圖
6 / 44
Slide 7
網頁圖檔簡介
• JPEG (靜態影像壓縮標準)
– 壓縮
• DCT (Discrete Cosine Transform)
全彩 769KB
Q90 58KB
Q50 24KB
Q30 17KB
7 / 44
Slide 8
網頁圖檔簡介
• JPEG (靜態影像壓縮標準)
– 壓縮
• DCT (Discrete Cosine Transform)
– 優點
• 全彩壓縮
• 可自定壓縮比
• 漸進式呈現
8 / 44
Slide 9
網頁圖檔簡介
• JPEG (靜態影像壓縮標準)
– 壓縮
• DCT (Discrete Cosine Transform)
– 優點
• 全彩壓縮
• 可自定壓縮比
• 漸進式呈現
– 缺點
• 圖形品質可能因壓縮而變差
• 沒有透明格式
– 應用
• 大型背景圖
• 照片
9 / 44
Slide 10
網頁圖檔簡介
• PNG
– 壓縮
• 全彩調色盤
– 優點
• 有透明格式
• 較同規格(256色)的BMP還小
• 無失真
– 缺點
• 圖形品質可能因壓縮而變差
• 無動畫格式
– 應用
• 不規則的圖形
• 按鈕
• 色彩簡單的背景圖
10 / 44
Slide 11
網頁圖檔簡介
• 綜合比較
BMP
GIF
GIF
JPG
JPEG
PNG
不失真
透明
256色圖形
全彩圖形
動畫
大型圖檔
瀏覽器
11 / 44
Slide 12
GIF動畫製作
Slide 13
動畫製作
可以做透空設定 ─背景可設透明
可以在一個GIF檔內部，包含多個圖形
─動態影像
13 / 44
Slide 14
動畫製作
• 怎麼讓圖片動起來?
14 / 44
Slide 15
GIF動畫製作
Slide 16
LAB 1
製作兩張圖
特點
• 影像大小一樣
• .GIF副檔名
• 小變化
16 / 44
Slide 17
LAB 1
1. 下載檔案
http://adm.nuk.edu.tw/~chtung/training20070705/lab
.zip
2. 下載lab.zip
3. 打開下載好的檔案
4. 存成背景為透明的.gif檔，命名為
5. 將太陽眼睛SIZE調整為高度<10>
6. 將太陽的墨鏡位置往上移為<110>
7. 做完5&6步驟後，另存新檔，命名為
17 / 44
Slide 18
LAB 1
把兩張圖合起來
變成一張動畫圖
18 / 44
Slide 19
LAB 1
1. 開啟
2. 選取動畫精靈 ，設定影像大小為300*300
19 / 44
Slide 20
LAB 1
3. 新增影像，選擇剛剛存好的兩個檔案
20 / 44
Slide 21
LAB 1
3. 按下一步，做畫格期間的設定，將每秒畫格數設
定為<2>
21 / 44
Slide 22
LAB 1
4. 按下一步，完成
22 / 44
Slide 23
LAB 1-1
5. 存成.gif檔案
23 / 44
Slide 24
LAB 1
• 將製做好的GIF動畫檔加入網頁中
24 / 44
Slide 25
動態HTML效果
Slide 26
動態HTML效果
26 / 44
Slide 27
LAB 2
1. 開啟FrontPage2003
2. 檔案→開新檔案
3. 插入→圖片→從檔案，選擇
27 / 44
Slide 28
LAB 2
4. 選取
5. 格式→表現方式，出現表示方式視窗
28 / 44
Slide 29
LAB 2
6. 插入→交換圖像
7. 瀏覽→選擇選擇
8. 在滑鼠移出時還原事件打勾→確定
29 / 44
Slide 30
實作
• 利用與做出動態
HTML效果
Test-LAB2-1.jpg
Test-LAB2-2.jpg
30 / 44
Slide 31
製作相片投影片秀
Slide 32
LAB 3
1.
2.
3.
4.
5.
開啟PhotoImpact Album10
建立新相簿：檔案→開新檔案
相簿範本→一般用途
標題→
確定
32 / 44
Slide 33
LAB 3
6. 跳出插入檔案視窗→選擇<從資料夾插入檔案>→確定
7. 選擇範例檔中的photo資料夾裡的40張圖→插入
33 / 44
Slide 34
LAB 3
8. 完成jiaming-lake相簿建立
34 / 44
Slide 35
LAB 3
9. 編輯→全選
10.選擇右邊選項→ <匯出Web投影片秀>
匯出Web投影片秀
35 / 44
Slide 36
LAB 3
按此可開始製作
11. 相關設定-輸出
在此選擇投影片產生後的存放路徑
→選擇儲存位置E:\20070705test\
36 / 44
Slide 37
LAB 3
將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案
原先的圖檔會放
在Image資料夾中
自動產生的網頁
檔及小圖示GIF檔
37 / 44
Slide 38
LAB 3
將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案
原先的圖檔會放
在Image資料夾中
自動產生的網頁
檔及小圖示GIF檔
38 / 44
Slide 39
LAB 3
將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案
2.原先的圖檔會放
在Image資料夾中
1.自動產生的網頁
檔及小圖示GIF檔
3.執行main.htm可看見成果
39 / 44
Slide 40
LAB 3
可再做細項設定
40 / 44
Slide 41
41 / 44
動畫圖檔製作與運用
網頁圖檔簡介
動畫製作
動態HTML效果
製作相片投影片秀
講師： 董建弘
陳鍶琦
日期： 96年7月5日
Slide 2
網頁圖檔簡介
Slide 3
網頁圖檔簡介
• 檔案格式
–
–
–
–
BMP
GIF
JPGE
PNG
3 / 44
Slide 4
網頁圖檔簡介
• BMP (Bit-Mapped)
– 壓縮
• 無
• REL (Run-Length Encoding)
– REL4
– REL8
– 優點
• 檔讀檔速度是最快
• 圖形品質最好
– 缺點
• 檔案十分龐大
• 沒有透明格式
– 應用
• 正方型圖片
• 按鈕
• 較小的背景圖
4 / 44
Slide 5
網頁圖檔簡介
• GIF (圖形交換格式)
– 壓縮
• 256色調色盤
• REL (Run-Length Encoding)
全彩 769KB
256 188KB
32 94KB
4 34KB
5 / 44
Slide 6
網頁圖檔簡介
• GIF (圖形交換格式)
– 壓縮
• 256色調色盤
• REL (Run-Length Encoding)
– 優點
• 有透明及動畫的格式
• 較同規格(256色)的BMP還小
bmp
gif
– 缺點
• 顏色流失
• 不適合作「會移動的圖形」
– 應用
• 不規則的圖形
• 按鈕
• 色彩簡單的背景圖
6 / 44
Slide 7
網頁圖檔簡介
• JPEG (靜態影像壓縮標準)
– 壓縮
• DCT (Discrete Cosine Transform)
全彩 769KB
Q90 58KB
Q50 24KB
Q30 17KB
7 / 44
Slide 8
網頁圖檔簡介
• JPEG (靜態影像壓縮標準)
– 壓縮
• DCT (Discrete Cosine Transform)
– 優點
• 全彩壓縮
• 可自定壓縮比
• 漸進式呈現
8 / 44
Slide 9
網頁圖檔簡介
• JPEG (靜態影像壓縮標準)
– 壓縮
• DCT (Discrete Cosine Transform)
– 優點
• 全彩壓縮
• 可自定壓縮比
• 漸進式呈現
– 缺點
• 圖形品質可能因壓縮而變差
• 沒有透明格式
– 應用
• 大型背景圖
• 照片
9 / 44
Slide 10
網頁圖檔簡介
• PNG
– 壓縮
• 全彩調色盤
– 優點
• 有透明格式
• 較同規格(256色)的BMP還小
• 無失真
– 缺點
• 圖形品質可能因壓縮而變差
• 無動畫格式
– 應用
• 不規則的圖形
• 按鈕
• 色彩簡單的背景圖
10 / 44
Slide 11
網頁圖檔簡介
• 綜合比較
BMP
GIF
GIF
JPG
JPEG
PNG
不失真
透明
256色圖形
全彩圖形
動畫
大型圖檔
瀏覽器
11 / 44
Slide 12
GIF動畫製作
Slide 13
動畫製作
可以做透空設定 ─背景可設透明
可以在一個GIF檔內部，包含多個圖形
─動態影像
13 / 44
Slide 14
動畫製作
• 怎麼讓圖片動起來?
14 / 44
Slide 15
GIF動畫製作
Slide 16
LAB 1
製作兩張圖
特點
• 影像大小一樣
• .GIF副檔名
• 小變化
16 / 44
Slide 17
LAB 1
1. 下載
http://adm.nuk.edu.tw/~chtung/training20070705/lab
.zip
2. 下載lab.zip
3. 打開下載好的
4. 存成背景為透明的.gif檔，命名為
5. 將太陽眼睛SIZE調整為高度<10>
6. 將太陽的墨鏡位置往上移為<110>
7. 做完5&6步驟後，另存新檔，命名為
17 / 44
Slide 18
LAB 1
把兩張圖合起來
變成一張動畫圖
18 / 44
Slide 19
LAB 1
1. 開啟
2. 選取動畫精靈 ，設定影像大小為300*300
19 / 44
Slide 20
LAB 1
3. 新增影像，選擇剛剛存好的兩個檔案
20 / 44
Slide 21
LAB 1
3. 按下一步，做畫格期間的設定，將每秒畫格數設
定為<2>
21 / 44
Slide 22
LAB 1
4. 按下一步，完成
22 / 44
Slide 23
LAB 1-1
5. 存成.gif檔案
23 / 44
Slide 24
LAB 1
• 將製做好的GIF動畫檔加入網頁中
24 / 44
Slide 25
動態HTML效果
Slide 26
動態HTML效果
26 / 44
Slide 27
LAB 2
1. 開啟FrontPage2003
2. 檔案→開新檔案
3. 插入→圖片→從檔案，選擇
27 / 44
Slide 28
LAB 2
4. 選取
5. 格式→表現方式，出現表示方式視窗
28 / 44
Slide 29
LAB 2
6. 插入→交換圖像
7. 瀏覽→選擇選擇
8. 在滑鼠移出時還原事件打勾→確定
29 / 44
Slide 30
實作
• 利用
HTML效果
Test-LAB2-1.jpg
Test-LAB2-2.jpg
30 / 44
Slide 31
製作相片投影片秀
Slide 32
LAB 3
1.
2.
3.
4.
5.
開啟PhotoImpact Album10
建立新相簿：檔案→開新檔案
相簿範本→一般用途
標題→
確定
32 / 44
Slide 33
LAB 3
6. 跳出插入檔案視窗→選擇<從資料夾插入檔案>→確定
7. 選擇範例檔中的photo資料夾裡的40張圖→插入
33 / 44
Slide 34
LAB 3
8. 完成jiaming-lake相簿建立
34 / 44
Slide 35
LAB 3
9. 編輯→全選
10.選擇右邊選項→ <匯出Web投影片秀>
匯出Web投影片秀
35 / 44
Slide 36
LAB 3
按此可開始製作
11. 相關設定-輸出
在此選擇投影片產生後的存放路徑
→選擇儲存位置E:\20070705test\
36 / 44
Slide 37
LAB 3
將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案
原先的圖檔會放
在Image資料夾中
自動產生的網頁
檔及小圖示GIF檔
37 / 44
Slide 38
LAB 3
將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案
原先的圖檔會放
在Image資料夾中
自動產生的網頁
檔及小圖示GIF檔
38 / 44
Slide 39
LAB 3
將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案
2.原先的圖檔會放
在Image資料夾中
1.自動產生的網頁
檔及小圖示GIF檔
3.執行main.htm可看見成果
39 / 44
Slide 40
LAB 3
可再做細項設定
40 / 44
Slide 41
41 / 44