使用Flash来设计网页及制作多媒体动画

製作GIF透亮圖
• GIF格式的圖檔可以去掉背景成為透亮圖，在 插入網頁後就可以溶入網頁背景， PhotoImpact在儲存圖檔時可以設定透亮度， 建立GIF透亮圖。
交錯型GIF圖檔
• 假设GIF圖檔尺寸比較大，下載網頁時需要等 待較長的時間，才能看到圖片內容，此時GIF 圖檔可以使用交錯型GIF圖檔，在下載圖檔時， 首先看到矇矓的圖片，然後逐漸看到清晰的圖 片內容，讓使用者感覺圖片下載速度比較快。
256色圖案。 • JPG • 也是網頁常用的圖形格式之一，壓縮率相當高，屬破壞性壓縮，存檔時
會捨棄某些像素，造成圖片失真，不過，肉眼是区分不出來的。 • PNG • PNG檔結合了GIF及JPG的優點，可存成透亮圖，也支援全彩，而且是
屬於非破壞性的壓縮，較能保有圖片原有的品質。
影像的颜色與亮度
• 影像圖檔的颜色是使用自然界的紅、黃和藍三原色所組成， 由這三種原色相互搭配調配出其它颜色，亮度是在影像参 加光線，例如：紅色移除光線就成為暗紅色，移除全部光 線就成為黑色。
• 「遞色」是使用較少的颜色數摸擬出缺少的颜色，例如： GIF格式只支援256色，假设將JPEG全彩圖片轉換成GIF 圖檔，就需要使用256色模擬出全彩的颜色數。
• 螢幕解析越高，意味著你在螢幕上所見的影像更細緻，颜色 更為逼真。
颜色解析度
• 所謂颜色解析度是指電腦使用多少位元〔bit〕來記錄颜色，位元越多颜 色的解析度越高，例如在256色中，使用8位元，也就是一個位元組 〔byte〕來記錄颜色資訊，因而可以記錄2^8 = 256種顏色。假设使用 16位元來記錄颜色，則可以記錄2^16 = 65536個颜色，而使用24位元， 則可以記錄2^24 = 16777216。
就是指這張圖裡，每英吋含150個像素。 ※dpi;dot per inch
螢幕解析度
• 螢幕解析度就是使用者在螢幕上看影像時，所感受到的解析 度。常見的設定有 640x480、800x600、1024x768等。
• 螢幕解析度是由顯示卡〔Display Card〕所決定的，並不是 由螢幕所決定。
• 由於特定螢幕的顯示尺寸不會改變的，當我們將螢幕解析度 由 640x480 調整成 1024x768 時，螢幕上必須容納更多的 像點，所以，原本的影像看起來會更加地細緻。
• 色相：指颜色的相貌，或是區別颜色的名稱，如紅、 黃、藍......等。
• 明度：指颜色明暗的程度。 • 彩度：指颜色飽和的程度或颜色的純粹度。 • 冷色系：在色相環中，以黃綠和紫色兩個中性色為界，
綠、藍綠、藍等為冷色。 • 暖色系：在色相環中，以黃綠和紫色兩個中性色為界，
紅、橙、黃等為暖色。 • 以彩度而言，彩度愈高愈趨温和感。另外明度高的颜
• 由像素構成的圖片，稱為點陣圖，點陣圖能以最原 始真 實的呈現圖片原本的風貌及颜色的細微差異。
解析度
• 解析度指的是每英吋內含有幾個像素。 • 每英吋裡含有的像素愈多，解析度就愈高，圖片愈細緻，
當然檔案的size就愈大。 • 每英吋裡含有的像素愈少，解析度就愈低，圖片愈粗糙，
當然檔案的size就愈小。 • 這張圖片的解析度是150dpi，指的就是影像的解析度，也
影像處理
什麼是影像處理
• 影像：指的是一張圖片或照片 • 影像處理：把影像處理得與原來的不一樣
像素
• 像素是電腦〔數位〕影像的最小單位。 • 每一張圖片，都是由一個個的像素所組成，而每一個像素
則包含了顏色的資訊，簡單的說，像素就是填滿顏色的小 點。 • 一張尺寸為800 ×600的圖片，表示寬有800個像素高有 600個像素，所以這張圖片一共有480000像素。像素愈多， 圖案的尺寸就愈大。
• 目前知名的點陣圖影像工具有PhotoImpact、PhotoShop和 PaintShop 、 Pro 、 JPEG、GIF和PNG。
• 網頁圖檔格式都屬於點陣圖，在放大圖片後，可以看到圖片犹 如馬賽克般是使用像素所組成。
向量圖(Vector)
• 向量圖的儲存方式是儲存圖片的直線、圓形和曲線等物件 元素，圖檔的尺寸比點陣圖小，CorelDraw、FreeHand和 Illustrator都屬於向量圖的影像工具，Flash也是使用向量 圖建立電影動畫，向量圖在放大後並不會產生點陣圖邊緣 的鋸齒效果，圖片仍旧擁有平滑的邊緣。
色有涼爽感，明度低的有温和感，這可以用物理上的 熱量來解釋，淺色反射熱量，吸熱少，故有涼爽感； 暗色則反之，固有温和感。
• 對比色：對比色相的配色是在色相環上成120度～150度的色相 彼此間的配色。具有活潑、明快的感覺。
• 互補色：位於色相環上直徑的兩端，互成180度的兩色之配色， 也即是冷色與暖色的配色，是對比最強烈的配色，假设不加以掌 握，简洁產生眩目、喧鬧等不調和的感覺。
• 假设要在螢幕上顯示一個圖像，則必須先將圖像儲存在顯示卡的記憶體 上，假设顯示卡的記憶體容量不夠，則圖像資訊無法放入。另外作業系 統也會根據驅動程式或本身的設定來影響颜色輸出，同一個圖像在不同 的作業系統上也會有不同的颜色輸出。
縮列印時，會有打不 開檔案或是當機的情事，大部份的缘由多源自圖形SIZE太大， 導致記憶體容量負荷不了，所以根本的方法就是縮小圖形SIZE。
• 缺點：適合儲存256色的影像，不適合用來存 取颜色豐富的圖片像是風景人物照片等等..因 為他的颜色度不高會有失真的情況發生大大減 低了圖片的美觀度。
常用圖檔副檔名gif 、 jpg 、 png
• jpg • jpg圖檔適合存取人物風景與颜色豐富的
圖片，像假设自己用photoshop這類的 繪圖軟體製作完的美工作品多半是存成 jpg檔的格式。他有較佳的颜色支援度， jpg檔指適用於靜態無法像gif那樣製作 閃圖功能。
常用圖檔副檔名gif 、 jpg 、 png
• gif • gif的優點在於檔案容量小適合存取簡單圖形
像是單一線條，顏色單純標題與一些颜色單純 的小圖示，並且可以將圖片背景透亮化更能融 入我們網頁裡並且可以製作動態圖示也是所謂 的閃圖，所以在網頁設計裡許多圖片都是存成 gif的格式來處理，所以gif檔具有靜態動態的 功能。
• 至於目前有所謂32位元的颜色解析度，其使用24位元的true color為基 礎來描述颜色，並加上8位元的額外資訊，例如transparent等，並不是 真正使用32位元來描述颜色。 假设使用越高的颜色解析度，則由於所使用的位元越多，所耗用的記憶 體也就越多，假设將這些颜色資訊儲存為圖檔，則檔案的容量也就越大。
• 缺點：jpg檔並不適合存取過於單純的圖 形或是標題因為會造成圖片有些模糊會 讓人感覺不舒適。
常用圖檔副檔名gif 、 jpg 、 png
• jpg • 適用於儲存24位元全彩影像，但不支援透亮
或動畫。JPEG格式運用壓縮運算法可以將影 像資料壓縮成數特别之一的大小，但壓縮比愈 高時影像的資料耗損程度會愈大，影像也會愈 失真(為達到高度壓縮，部份資料會被无视)。
• 多數的影像編輯軟體可以調整JPEG的壓縮比 值，一般壓縮比10左右比較無法区分出與原先 的差別。雖然JPEG檔好用，但因是破壞性壓 縮，所以不宜重複壓縮，過度的破壞會造成影
常用圖檔副檔名gif 、 jpg 、 png
• png • PNG(Portable Network Graphics)格式與同是網路上
流通的影像格式JPEG及GIF相較，有諸多優秀的特性： PNG壓縮影像不失真，可儲存 48 位元的彩色影像， 比JPEG的24位元高，像素颜色也可有256種不同的 透亮度選擇，可讓圖像在任何背景上，看不到接縫， 改善了GIF格式像素颜色只能有透亮或不透亮兩種選 擇，及GIF檔描邊不佳的問題(GIF檔通常需要針對每 種背景顏色採用不同的反毛邊修飾)。 • png圖檔為目前算是新的圖檔類型他等於gif和jpg的結 合，可以像gif檔一樣製作動態閃圖也可以像jpg一樣 存取颜色豐富的風景圖片。 • 缺點：不能像GIF一樣作為動畫檔的儲存格式，png圖 檔的圖片檔案大小較大，並且目前有些伺服器並還未 不支援png這類型的圖檔照樣是以gif與jpg作為主流，
• 色光的三原色：色光三原色是以生理學及物理學的觀點來立論， 發現紅〔Orange Red〕、綠〔Green〕、紫藍〔Violet Blue〕 三原色具有如下特性：〔1.〕不能再分解。〔2.〕不能由其他色 光混合出來。〔3.〕三色等量混合時，會形成白色。因而確立紅、 綠、紫藍為光的三原色。稱為〔加法混合〕
黑白 全彩
16色
灰階 256色
常用的影像檔案格式
• BMP • 點陣圖型，專門用在作業系統上，各軟體的圖形均能彼此相通，但因其
無法壓縮全彩圖形，存檔後檔案較大。 • TIF • 印刷輸出的最正确選擇，TIF檔案格式可以跨平台，供给非破壞性的壓
縮。 • GIF • 網頁上最常用的圖形格式之一，存檔後體積小，圖片也不會失真，多屬
影像的颜色類型
• 黑白：黑白影像，非黑即白。利用黑色像素的疏密排列， 可以製造灰色的效果。
• 灰階：顏色從黑色到白色共有256種變化，也就是深淺不 同的灰色影像。
• 16色：以16種顏色來構成圖案。 • 256色：以256種顏色構成圖案，這比16色的圖片颜色還
要豐富。假设以純彩色系圖案來說，256色已經可算是完 備的圖案了。 • 全彩：每格的像素都由RGB(紅、綠、藍)三色混成，總共 有1677萬種顏色的變化，比起其他颜色類型，全彩可說是 最完善的圖案。
• 掃描時，將dpi或尺寸縮小。 • 改變圖形檔案類型
– 將圖形另存新檔時，將圖形檔案類型改成JPG檔。 – 將圖形在改成256色，存成GIF檔。 • 改變圖形檔案的尺寸 – 選擇 格式 → 尺寸 ，縮小圖形的尺寸。
影像的基礎
• 點陣圖和向量圖 • 影像的颜色與亮度
點陣圖(Bitmap)
• 點陣圖使用像素儲存影像資料，使用dpi為單位，例如：網頁圖 檔只需擁有螢幕的解析度72dpi，也就是每平方英寸擁有72像 素。
• 颜色的三原色：顏料或染料中的洋紅〔Magonta Red〕、黃 〔Hanza Yellow〕、藍〔Cyanine Blue〕為色料三原色，各種色 相都可以利用三原色相互混合而成，色料混合愈混合變得愈黑暗， 這種混合稱為〔減法混合〕。
GIF與JPEG圖檔的處理
• 製作GIF透亮圖 • 交錯型GIF圖檔 • 漸進式JPEG圖檔