1 / 41

動畫圖檔製作與運用

動畫圖檔製作與運用. 網頁圖檔簡介 動畫製作 動態 HTML 效果 製作相片投影片秀. 網頁圖檔簡介. 網頁圖檔簡介. 檔案格式 BMP GIF JPGE PNG. 網頁圖檔簡介. BMP (Bit-Mapped) 壓縮 無 REL (Run-Length Encoding) REL4 REL8 優點 檔讀檔速度是最快 圖形品質最好 缺點 檔案十分龐大 沒有透明格式 應用 正方型圖片 按鈕 較小的背景圖. 網頁圖檔簡介. GIF ( 圖形交換格式 ) 壓縮 256 色調色盤

sorcha
Download Presentation

動畫圖檔製作與運用

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 動畫圖檔製作與運用 網頁圖檔簡介 動畫製作 動態HTML效果 製作相片投影片秀

  2. 網頁圖檔簡介

  3. 網頁圖檔簡介 • 檔案格式 • BMP • GIF • JPGE • PNG

  4. 網頁圖檔簡介 • BMP (Bit-Mapped) • 壓縮 • 無 • REL (Run-Length Encoding) • REL4 • REL8 • 優點 • 檔讀檔速度是最快 • 圖形品質最好 • 缺點 • 檔案十分龐大 • 沒有透明格式 • 應用 • 正方型圖片 • 按鈕 • 較小的背景圖

  5. 網頁圖檔簡介 • GIF (圖形交換格式) • 壓縮 • 256色調色盤 • REL (Run-Length Encoding) 全彩 769KB 256 188KB 32 94KB 4 34KB

  6. 網頁圖檔簡介 • GIF (圖形交換格式) • 壓縮 • 256色調色盤 • REL (Run-Length Encoding) • 優點 • 有透明及動畫的格式 • 較同規格(256色)的BMP還小 • 缺點 • 顏色流失 • 不適合作「會移動的圖形」 • 應用 • 不規則的圖形 • 按鈕 • 色彩簡單的背景圖 bmp gif

  7. 網頁圖檔簡介 • JPEG (靜態影像壓縮標準) • 壓縮 • DCT (Discrete Cosine Transform) 全彩 769KB Q30 17KB Q90 58KB Q50 24KB

  8. 網頁圖檔簡介 • JPEG (靜態影像壓縮標準) • 壓縮 • DCT (Discrete Cosine Transform) • 優點 • 全彩壓縮 • 可自定壓縮比 • 漸進式呈現

  9. 網頁圖檔簡介 • JPEG (靜態影像壓縮標準) • 壓縮 • DCT (Discrete Cosine Transform) • 優點 • 全彩壓縮 • 可自定壓縮比 • 漸進式呈現 • 缺點 • 圖形品質可能因壓縮而變差 • 沒有透明格式 • 應用 • 大型背景圖 • 照片

  10. 網頁圖檔簡介 • PNG • 壓縮 • 全彩調色盤 • 優點 • 有透明格式 • 較同規格(256色)的BMP還小 • 無失真 • 缺點 • 圖形品質可能因壓縮而變差 • 無動畫格式 • 應用 • 不規則的圖形 • 按鈕 • 色彩簡單的背景圖

  11. 網頁圖檔簡介 GIF JPEG • 綜合比較

  12. GIF動畫製作

  13. 動畫製作 • 可以做透空設定 ─背景可設透明 • 可以在一個GIF檔內部，包含多個圖形 ─動態影像

  14. 動畫製作 • 怎麼讓圖片動起來?

  15. GIF動畫製作

  16. LAB 1 特點 • 影像大小一樣 • .GIF副檔名 • 小變化 • 製作兩張圖

  17. LAB1 • 下載<SUN.ufo>檔案 http://adm.nuk.edu.tw/~chtung/training20070705/lab.zip • 下載lab.zip • 打開下載好的<SUN.ufo>檔案 • 存成背景為透明的.gif檔，命名為<SUN1.gif> • 將太陽眼睛SIZE調整為高度<10> • 將太陽的墨鏡位置往上移為<110> • 做完5&6步驟後，另存新檔，命名為<SUN2.gif>

  18. LAB 1 • 把兩張圖合起來 • 變成一張動畫圖

  19. LAB 1 • 開啟 • 選取動畫精靈 ，設定影像大小為300*300

  20. LAB 1 • 新增影像，選擇剛剛存好的兩個檔案 <SUN1.gif> <SUN2.gif>

  21. LAB 1 • 按下一步，做畫格期間的設定，將每秒畫格數設定為<2>

  22. LAB 1 • 按下一步，完成

  23. LAB 1-1 • 存成.gif檔案

  24. LAB 1 • 將製做好的GIF動畫檔加入網頁中

  25. 動態HTML效果

  26. 動態HTML效果

  27. LAB 2 • 開啟FrontPage2003 • 檔案→開新檔案 • 插入→圖片→從檔案，選擇 <lab01-1.gif>

  28. LAB 2 4. 選取 <lab01-1.gif> 5. 格式→表現方式，出現表示方式視窗

  29. LAB 2 6. 插入→交換圖像 7. 瀏覽→選擇選擇 <lab01-2.gif> 8. 在滑鼠移出時還原事件打勾→確定

  30. 實作 • 利用<Test-LAB2-1.jpg>與<Test-LAB2-2.jpg>做出動態HTML效果 Test-LAB2-1.jpg Test-LAB2-2.jpg

  31. 製作相片投影片秀

  32. LAB 3 • 開啟PhotoImpact Album10 • 建立新相簿：檔案→開新檔案 • 相簿範本→一般用途 • 標題→<jiaming-lake> • 確定

  33. LAB 3 6. 跳出插入檔案視窗→選擇<從資料夾插入檔案>→確定 7. 選擇範例檔中的photo資料夾裡的40張圖→插入

  34. LAB 3 8. 完成jiaming-lake相簿建立

  35. LAB 3 9. 編輯→全選 10.選擇右邊選項→ <匯出Web投影片秀> 匯出Web投影片秀

  36. LAB 3 • 相關設定-輸出 按此可開始製作 在此選擇投影片產生後的存放路徑 →選擇儲存位置E:\20070705test\

  37. LAB 3 將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案 原先的圖檔會放在Image資料夾中 自動產生的網頁檔及小圖示GIF檔

  38. LAB 3 將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案 原先的圖檔會放在Image資料夾中 自動產生的網頁檔及小圖示GIF檔

  39. LAB 3 將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案 2.原先的圖檔會放在Image資料夾中 1.自動產生的網頁檔及小圖示GIF檔 3.執行main.htm可看見成果

  40. LAB 3 可再做細項設定

More Related