I

崑 山 科 技 大 學 電 子 工 程 系

學 生 專 題 製 作 報 告

Flash 互動式網頁設計

Activities Flash webdesign

指導教授：葉蘭英 專題組員：葉寶夫 學號：4980K059

中華民國102年 06月

II

III

Flash 互動式網頁設計

葉寶夫

崑山科技大學電子工程系

摘要

本作品利用互動網頁結構與個人履歷作結合再以 Adobe Flash 呈現。在資訊爆炸的時代

要讓大眾與公司知道個人的作品或是資訊最好的方式莫過於網頁，因此把個人履歷與網

頁作結合完成個人網頁，在利用 Adobe Flash 獨有的 Actionscript3.0 語言使網頁更添

增新奇與互動性，透過排版、瀏覽動線規劃、圖表比重等，使網頁架構更加完善。

而 ActionScript 是 Adobe® Flash® Player 和 Adobe® AIR 執行階段環境所使

用的程式語言。這套語言可為 Flash、Flex 與 AIR 內容和應用程式提供互動性、資料

處理和更多功能。ActionScript 是由屬於 Flash Player 和 AIR 一部分的

ActionScript Virtual Machine (AVM) 所執行。ActionScript 程式碼一般都由編譯器

編譯為「位元組碼格式」(一種由電腦所撰寫並理解的程式設計語言)，如內建於 Adobe®

Flash® CS4 Professional 或 Adobe® Flex Builder 的程式語言，或是可以在 Adobe®

Flex SDK 中使用的程式語言。位元組碼會內嵌在 SWF 檔中，而 Flash Player 和 AIR

會執行 SWF 檔。ActionScript 3.0 提供強大的程式設計模型，對於物件導向程式設計

有基本認識的開發人員將能很快熟悉。

一般來說 Actionscript 可以分為 1.0&2.0 的版本跟 3.0 的版本，1.0&2.0 的版本主

要是用於原創的語法當然兩者書寫方式不太一樣，前者必須書寫在元件上讓此元件去執

行你要的動作，但是這種做法只能用針對性的去執行工作無法很廣泛的結合我們平常常

見的 Html 資料庫語法 JAVASCRIPT 這類比較重要的語法，相對於這點 Adobe 的工程師推

出 3.0 就是為了這類結合性的問題，雖然學習上有相對性的困難但是一但了解他可以解

決的問題相當多包含在網頁讀取時不會像 2.0 一樣有緩速的情形，在 3.0 的情況上他可

以增加這類速度的 10 倍讀取速度，在複雜性的結合跟比較廣泛的應用上例如 Flash 遊戲

製作或者 Flash 互動式影片更有廣泛性的應用，例如現在有些網頁遊戲或者雲端系統都

是直接採用 Flash+AS3.0 直接製作，這都是 AS1.0&2.0 無法做到的。

最後再利用 Adobe® Dreamweaver 作為最後的整合平台，Dreamweaver 就像一個大箱

子能放入不同的程式語言(Java、html、html5 等)、多媒體(flash、gif 等)透過

Dreamweaver 達到多方面的整合。利用 Dreamweaver html 與法的特性以及普及化，得以

在不同的平台展現及瀏覽像是現在比較主流的行動載具和觸控式螢幕等，也能匯入外掛

程式控制硬體設備使其達到互動的效果，html 也是使用最悠久的網頁語法在相容性以及

不同的瀏覽器中算是最穩健的語言(在不同的瀏覽器中，不同的語法以及定位點可能會造

成瀏覽器的不相容因此無法顯示也或者不會造成圖片以及其他多媒體的無法按照原始比

例呈現)因此藉由不同軟體互相搭配整合後達到具有互動也美觀的網頁。

IV

致謝

首先誠摯的感謝指導教授葉蘭英老師，老師悉心的指導使我的專題網頁更佳的完善，

不時的關心進度並指導我正確的方向。使我在這些年中獲益匪淺，也相當感謝老師對我

的信任與支持給予我動力在飽受教授異樣眼光下完成這件作品(當時老師不認同網頁的

程式碼與電子系所的程式語言相關性)。

本論文的完成另外亦得感謝教授林子邦老師的指導，因為有你的指導與幫忙讓我對

ActionScript 語言更進一步的認識與突破，使得這件作品更完整而嚴謹。

在這兩年的日子，感謝這一路上共同照顧的同學及朋友，感謝有你們的照顧與協助，

不管事在學術上或者是生活上，有你們真的很棒。也感謝實驗室內的每位學長與朋友感

謝你們的指導，謝謝所有在我身邊的你/妳們的幫忙和搞笑我銘感在心。

女朋友黃婉儀在背後的默默支持更是我前進的動力，沒有婉儀的體諒、包容，相信這兩

年的生活將是很不一樣的光景。最後，謹以此文獻給我最愛的父母。

V

目錄

頁數 中文摘要 -------------------------------------------------------------------- Ⅰ 英文摘要 -------------------------------------------------------------------- Ⅱ 誌謝 -------------------------------------------------------------------- Ⅲ 目錄 -------------------------------------------------------------------- Ⅳ 一、 緒論-------------------------------------------------------------- 1

1.1 前言-------------------------------------------------------------- 1 1.2 文獻回顧------------------------------------------------------- 2 1.3 製作目的-------------------------------------------------------- 6

二、 研究內容與方法----------------------------------------------- 7 2.1 Adobe Illustrator----------------------------------------------- 7

2.1.1 軟體特點-------------------------------------------------------- 7 2.2 Adobe Photoshop-------------------------------------------------- 13

2.2.1 軟體特色-------------------------------------------------------- 13 2.2.2 軟體歷史-------------------------------------------------------- 15

2.3 Adobe Flash------------------------------------------------------ 18 2.3.1 ADOBE FLASH CS6 安裝與使用------------------------------- 19 2.3.2 啟動 Flash CS6 以及基本功能介紹------------------------------- 20 2.3.3 工具列元件簡介-------------------------------------------------- 22 2.3.4 元件庫的使用----------------------------------------------------- 23 2.3.5 影格與動畫設計-------------------------------------------------- 24 2.3.6 圖層應用與多重圖層--------------------------------------------- 25

三、 結論 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 32 參考文獻 -------------------------------------------------------------------- 33

1

一、 緒論

1.1 前言

我認為網頁像是個藝術品，不單單只是圖片與文字的組成，而是設計與程式 邏輯

的結合，資訊爆炸的時代網頁是不可或缺的行銷模式與廣告傳播，網頁最早的起源是1969

年，當時電腦間的節點不段增加因此網頁就被創造出來作為瀏覽器與電腦之間的資料介

面，在現今扮演傳達的重要腳色，在一般網頁製作多為 html 格式再加上 php 配合後端管

理所組成，而 FLASH 網頁設計者多半擁有美術設計與多媒體基礎，相較於其他的設計軟

體我認為這套軟體更能表達設計師的理念。它比我過去所使用的 ASP、HTML 等軟體更容

易去編輯，配合 FLASH 本的動畫設計功能加上 Action Script 3.0 語言來完成一個網頁，

滿足不懂程式語言的設計師能用較輕鬆的方式完成網頁。

2

1.2 文獻回顧

1.2.1ActionScript

1.ActionScript

ActionScript 是 Adobe® Flash® Player 和 Adobe® AIR 執行階段環境所使用的

程式語言。這套語言可為 Flash、Flex 與 AIR 內容和應用程式提供互動性、資料處理

和更多功能。ActionScript 是由屬於 Flash Player 和 AIR 一部分的 ActionScript

Virtual Machine (AVM) 所執行。ActionScript 程式碼一般都由編譯器編譯為「位元組

碼格式」(一種由電腦所撰寫並理解的程式設計語言)，如內建於 Adobe® Flash® CS4

Professional 或 Adobe® Flex Builder 的程式語言，或是可以在 Adobe® Flex SDK

中使用的程式語言。位元組碼會內嵌在 SWF 檔中，而 Flash Player 和 AIR 會執行 SWF

檔。

ActionScript 3.0 的優點。

ActionScript 3.0 的 Script 編寫功能比舊版 ActionScript 更強大。這套語言能

建立高度複雜的應用程式，其中包含大型資料集和物件導向、重複使用的程式碼基底。

雖然在 Adobe Flash Player 中執行的內容不需要 ActionScript 3.0，但這能引進新型

虛擬機器 AVM2 才具備的效能優勢。與舊版 ActionScript 程式碼相較，ActionScript

3.0 程式碼的執行速度能快上十倍。

ActionScript 3.0 的新增功能

雖然 ActionScript 3.0 包含許多 ActionScript 程式設計人員熟悉的類別和功能，但

在架構和概念上與舊版 ActionScript 不同。ActionScript 3.0 中的增強項目包括核心

語言的新功能，以及經過改良的 Flash Player API，可加強控制低階物件。

語言概觀

物件是 ActionScript 3.0 語言的核心要素，也是基本的建構單元。您所宣告的每一個

變數、所撰寫的每一個函數，以及所建立的每一個類別實體都是物件。您可以將

ActionScript 3.0 程式視為一組執行工作的物件，這些物件會回應事件，並且彼此進行

通訊。

熟悉 Java 或 C++ 物件導向程式設計 (OOP) 的程式設計人員可能會將物件視為包含以

下兩種成員的模組：儲存在成員變數或屬性的資料，以及可透過方法存取的行為指令。

ActionScript 3.0 會以相似但略有不同的方式來定義物件。在 ActionScript 3.0 中，

3

物件只是屬性的集合。這些屬性是容器，不但能保存資料，也能保存函數或其它物件。

若函數是以這種方式附加到物件上，則稱為方法。

雖然具有 Java 或 C++ 背景的程式設計人員可能會覺得 ActionScript 3.0 的定義有

些奇怪，但是在實際作業時，以 ActionScript 3.0 類別定義物件類型其實與 Java 或

C++ 中定義類別的方式非常類似。兩種物件定義的區別只有在討論 ActionScript 物件

模型及其它進階主題時才會有意義，但在其它大部分情況下，所謂「屬性」一詞是指類

別成員變數，與方法相對。例如，「ActionScript 3.0 語言和組件參考」會使用「屬性」

代表變數或 getter-setter 屬性，並使用「方法」一詞代表屬於類別之一部分的函數。

ActionScript 中的類別與 Java 或 C++ 中的類別之間有一項微妙的差異，就是在

ActionScript 中，類別不僅只是抽象實體。ActionScript 類別是以儲存類別之屬性和

方法的「類別物件」來表示，因此，您便能夠運用 Java 和 C++ 程式設計人員可能會覺

得性質很不相同的技巧 (例如，在類別或套件的最上層包含陳述式或可執行的程式碼)。

ActionScript 類別與 Java 或 C++ 類別之間還有另外一項差異，就是每一個

ActionScript 類別都有所謂的「原型物件」。在舊版 ActionScript 中，原型物件連結

在一起形成「原型鏈」，而整體做為整個類別繼承階層的基礎；但是在 ActionScript 3.0

中，原型物件在繼承系統中只扮演份量很輕的小角色，原型物件依舊十分有用，它可以

替代靜態屬性和方法，在類別的所有實體間共享屬性及其值。

在過去，進階 ActionScript 程式設計人員都可以利用特殊的內建語言元素，直接操控

屬性鏈；既然語言現在可提供更成熟的類別架構式程式設計介面實作，這些特殊語言元

素中有很多 (例如 __proto__ 和 __resolve) 已不再是語言的一部分。而且，將內部繼

承機制最佳化的作法讓 Flash Player 和 Adobe AIR 的效能大幅提升，可防止直接存取

繼承機制。

核心語言功能

核心語言會定義程式語言的基本建構區塊，例如陳述式、運算式、條件、迴圈和類型。

ActionScript 3.0 包含許多可加速開發程序的新功能。

執行階段例外

與舊版 ActionScript 相較，ActionScript 3.0 會通報更多的錯誤狀況。執行階段例外

適用於常見的錯誤狀況，可加強除錯效果，讓您開發有效處理錯誤的應用程式。執行階

段錯誤可提供堆疊追蹤，其中會加註來源檔案和行號資訊，協助您快速找出錯誤所在位

置。

4

ActionScript 3.0 類別物件

常見的物件導向程式設計範式通常是與 Java 和 C++ 相關聯，會使用類別來定義物

件的類型。採用這種範式的程式設計語言也傾向於使用類別來建構類別所定義資料類型

的實體。ActionScript 同時將類別用於這兩種用途，不僅紮根於原型語言，更增添了值

得玩味的特性。ActionScript 為每一個定義建立特殊的類別物件，而允許同時共用行為

和狀態。但是對許多 ActionScript 程式設計人員來說，這項區別沒有實際的程式含意。

ActionScript 3.0 的設計方式能讓您建立更複雜的物件導向 ActionScript 應用程式，

而不需要使用 (甚至也不需要瞭解) 這些特殊類別物件。本節將為想要充分運用類別物

件的進階程式設計人員深入探討這些議題。

執行階段類型

在 ActionScript 2.0 中，類型附註主要是為了方便開發人員進行開發，到了執行階段，

所有的值都會動態加上類型。在 ActionScript 3.0 中，類型資訊會保留到執行階段，

而且具備多種用途。Flash Player 和 Adobe AIR 都會執行執行階段類型檢查，加強系

統的類型安全性。類型資訊也可用來以原生機器的表示方式代表變數，藉以提高效能並

減少記憶體用量。

密封類別

ActionScript 3.0 引進了密封類別的概念。密封類別只擁有一組在編譯階段定義的固定

屬性和方法，不能加入其它屬性和方法。這會使得編譯階段檢查更嚴格，進而產生更穩

定的程式。此外，由於每個物件實體不需要內部雜湊表，因此這也會減少記憶體的用量。

只要使用 dynamic 關鍵字，就可以宣告動態類別。ActionScript 3.0 中的所有類別預

設都是密封的，但是您可以使用 dynamic 關鍵字將類別宣告為動態類別。

方法結束項

ActionScript 3.0 可讓方法終止自動記憶其原始物件實體。這項功能對事件處理很有用。

在 ActionScript 2.0 中，方法終止不會記憶當初是從哪一個來源物件實體擷取，因此

當叫用方法終止時，會導致無法預期的行為。mx.utils.Delegate 類別是常見的解決方

法，但現在已經不再需要。

5

ECMAScript for XML (E4X)

ActionScript 3.0 實作了最近才標準化為 ECMA-357 的 ECMAScript for XML (E4X)。

E4X 可提供一組自然、順暢的語言建構，可用來操作 XML。與傳統 XML 剖析 API 不同

的是，使用 E4X 的 XML 就像是語言的原生資料類型。E4X 可大幅減少所需的程式碼，

簡化使用 XML 開發應用程式的工作。

規則運算式

ActionScript 3.0 包含規則運算式的原生支援，讓您可以快速搜尋和操作字串。

ActionScript 3.0 會依照 ECMAScript (ECMA-262) 第 3 版語言規格中的定義，實作規

則運算式的支援。

命名空間

命名空間類似於用來控制宣告可見性的傳統存取指定字 (public、private、protected)。

但命名空間是自訂存取指定字，可以讓您自行選擇名稱。命名空間會使用通用資源識別

項 (URI) 來避免發生衝突，而當您使用 E4X 時，命名空間會用來代表 XML 命名空間。

新的基本類型

ActionScript 2.0 只有一種數值類型 (Number)，代表雙精度浮點數。ActionScript 3.0

則包含 int 和 uint 類型。int 類型是 32 位元具有正負號的整數，可讓 ActionScript

程式碼利用 CPU 的快速整數算術能力。int 類型適用於使用整數的迴圈計數器和變數。

uint 類型是無正負號的 32 位元整數，適用於 RGB 顏色值、位元組計數等用途。

使用陣列的簡介

進行程式設計時，您要處理的往往不是單一物件，而是一組項目。例如，在音樂播放應

用程式中，可能會有包含多首歌曲並準備播放的清單。您不會希望為清單上的每首歌曲

建立不同的變數，而是希望這些 Song 物件最好能全部結合起來，並且能夠以群組的方

式加以處理。

陣列是程式設計的元素，可做為一組項目的容器，如歌曲清單等。在大部分情況下，陣

列中的所有項目都是相同類別的實體，但是對 ActionScript 來說，這並非必要條件。

陣列中的各個項目稱為陣列的「元素」。您可以將陣列想成是變數的檔案抽屜。變數可

當做元素以新增至陣列中，就像把資料夾放進檔案抽屜一樣。您可以將陣列當做單一變

6

數來使用 (如同將整個抽屜搬移至不同位置)，或將變數當做群組來使用 (就像逐一翻閱

資料夾以尋找資訊)，或者是個別存取這些檔案 (如同打開抽屜，選取單一資料夾)。

舉例來說，假設您要建立音樂播放應用程式，讓使用者可以選取多首曲目並新增至播放

清單。那麼，在 ActionScript 程式碼中就要有名為 addSongsToPlaylist() 的方法，

這個方法會使用單一陣列做為參數。無論要在清單中新增多少歌曲 (少數幾首、多首，

或甚至只有一首)，都只要呼叫 addSongsToPlaylist() 方法一次，將內含 Song 物件的

陣列傳送過去即可。在 addSongsToPlaylist() 方法中，您可以使用迴圈逐一瀏覽陣列

的元素 (歌曲)，並將這些元素實際新增至播放清單。

最常見的 ActionScript 陣列類型是「索引陣列」。在索引陣列中，每個項目都會儲存

在具有編號的位置 (稱為「索引」)，而編號就像地址一樣，可以用來存取項目。索引陣

列的運作方式可以符合大部分程式設計的需求。Array 是用來表示索引陣列的常見類

別。

索引陣列時常用於儲存多個相同類型的項目 (本身為相同類別之實體的物件)。Array 類

別不表示會限制本身所包含的項目類型。Vector 類別的類型是索引陣列，其中單一陣列

內的所有項目都具有相同類型。使用 Vector 實體 (而非 Array 實體) 時，也能改善效

能並具有其它優點。從 Flash Player 10 和 Adobe AIR 1.5 開始，Vector 類別已可供

使用。

索引陣列的其中一種特殊用法，就是「多維度陣列」。所謂多維度陣列，就是其元素都

是索引陣列的索引陣列 (其中前者又包含其它元素)。

另一種陣列是「關聯陣列」，這種陣列會以字串「索引鍵」而非數值索引來識別各個元

素。最後，ActionScript 3.0 也包含了 Dictionary 類別，這個類別表示「字典」。字

典是一個陣列，可讓您將任何類型的物件當做索引鍵來使用，以區分各個元素。

常見的陣列工作

本章將說明下列和使用陣列有關的一般活動：

使用 Array 類別和 Vector 類別建立索引陣列

增加與移除陣列元素

排序陣列元素

擷取陣列的一部分

使用關聯陣列與字典

使用多維度陣列

複製陣列元素

建立陣列子類別

7

重要概念與術語

下列參考清單包含了您將在本章碰到的重要術語：

陣列：一種做為容器的物件，可將多個物件組合起來

陣列存取 ([]) 運算子：一對括住索引或索引鍵 (可唯一識別陣列元素) 的方括號。

這個語法使用時會加在陣列變數名稱後方，以指定陣列的單一元素 (而非整個陣列)

關聯陣列：使用字串索引鍵來識別各個元素的陣列

基底類型：Vector 實體可以儲存的物件資料類型

字典：其項目是由物件配對 (即索引鍵與值) 所組成的陣列。此索引鍵會取代數值

索引來識別單一元素

元素：陣列中的單一項目

索引：即數值「位址」，用來識別索引陣列中的單一元素

索引陣列：為標準的陣列類型，它會將每個元素儲存在具有編號的位置，並使用此

編號 (索引) 來識別各個元素

索引鍵：在關聯陣列或字典中，用來識別單一元素的字串或物件

多維陣列：這種陣列所包含的項目是陣列，而非單一值

T：標準慣例，在本說明文件中用於表示 Vector 實體的基底類型 (無論此基底類型

為何都一樣)。T 慣例可用於表示類別名稱，您可以在類型參數的說明中找到相關描

述 (「T」表示「類型」，就像「資料類型」一樣)。

類型參數：搭配 Vector 類別名稱所使用的語法，以指定 Vector 的基底類型 (此

類別所儲存的物件資料類型)。這個語法的開頭為一個點 (.)，後面再接著由角括號

() 括住的資料類型名稱。完成之後，看起來就像：Vector.。在本說明文件中，

類型參數內指定的類別通常會表示為 T

Vector：陣列類型，陣列中的所有元素都是具有相同資料類型的實體

逐步執行章節內的範例

當您研習本章的內容時，可能會想要自行測試其中所列出的部分範例程式碼。本章內列

出的程式碼基本上都包含了適當的 trace() 函數呼叫。若要測試本章內列出的程式碼，

請執行下列步驟：

1. 在 Flash 編寫工具中建立空白文件

2. 選取時間軸中的關鍵影格。

3. 開啟「動作」面板，並將列出的程式碼複製到「Script」窗格中。

4. 使用「控制 > 測試影片」執行程式。

您會在「輸出」面板中看到 trace() 函數的結果。

8

1.3 製作目的

近百年來全球通訊快速發展，網頁已經成為現在人生活不可或缺少的傳達核心，從舊有

的全球資訊網至近幾年的 FLASH、Dreamweave、ASP 等等都為網頁帶來不同的面貌，在現

今的社會中行動裝置的普及讓競爭更為激烈，互動式網頁就成了留住使用者目光的最佳

方式。

網頁架構

網頁的的架構主軸以全FLASH配合ActionScript程式語言作為互動式個人網頁的核

心結構，前端平面設計與後端程式語言作溝通，讓整個網頁不僅排版美觀效果更讓人驚

艷。在操作上不論使用者是否第一次使用，都能在探索網頁的過程去發現互動元件的效

果，讓本來死板的圖片與文字更加生動，也能讓使用者更願意花時間停留在此網頁。

作品特色

強調在人生有多少人能真正的認識自己，所以在內頁設計的部分已中心較為清晰，

外圍較為模糊來呈現，現在的人多半以自我為中心去設想，並且多數的人並不真正了解

自己為軸，再以互動的方式讓使用者更願意花時間在此網頁去作瀏覽。

設計理念

在設計這樣的個人網站初步的想法只是能有個特別的版面配置，能和其他的網頁與眾不

同就像每個生命體般，到了後期添加了不同的元素在製作這個網頁上，我認為人的一生

中有多少人真正了解自己?有多少朋友真正了解你?於是在設計頁面的同時也增加了朦朧

的感覺，凸顯別人對於自己的那種神秘感。在現今社會人們生活忙碌，多半的人開始依

賴行動裝置，人與人溝通之間也相對的減少，所以在設計上添增了不同的互動方式讓人

們更願意花時間在與網頁和電腦溝通。

規劃與設計

網頁的事前規劃與設計，在網頁設計中佔了相當重要的環節，就像蓋大樓前必須要先擬

定藍圖是相同的意思。在設計的同時也要先規劃網頁的內容和按鈕、文字、圖片的相關

配置。再利用 photoshop 或 Fireworks 進行版面的切割，劃分出各個區域在使用程式碼

加以編輯，劃分區域的目的是為了讓程式碼看得懂這塊區域與其他區域的差別，才能更

有效的管理與編輯。

9

下圖為設計過程之中規劃的架構圖草稿

10

二、 研究內容與方法

2.1Adobe Illustrator

Illustrator CC 是業界標準的向量圖形軟體，是全球各種類型的設計人員用來建立

數位圖形、插圖和印刷樣式，以用於印刷、網頁、互動、視訊和行動等所有類型的媒體。

2.1.1 軟體特點

在接觸繪圖軟體時，我們常會問，我們有什麼樣的軟體可以用，我們該使用什麼樣的軟

體，軟體能提供我們什麼樣的思考觀念及幫助呢?又為何讀者須要選擇向量式軟體來使用?向

量式軟體有何特色？對於使用目的上，筆者建議不妨先詳加考量，再決定是否選擇

Illustrator 來使用!

淺談向量與點陣繪圖

電腦繪圖分為兩大類：向量圖形以及點陣影像，認識兩者之間的不同，有助於建立、編輯、

與讀入線條稿。

向量

11

此圖自行設計

Adobe 開發了名為“PostScript＂的獨特程式語言，來描述在 Illustrator 軟體中所創造的

每一個物件。

PostScript 語言能描述每個“路徑（Paths）＂的位置，而路徑的曲線段，是可以經由“點

（Point）＂加以控制的，而這個“點＂我們稱它為“錨點（Anchor Point）＂，Adobe

Illustrator 繪圖應用軟體所建立的向量圖形即是由直線與曲線構成的，而這些直線與曲線

則由稱為向量的數學物件加以界定。

在解析度輸出上，向量圖形是個別獨立的，向量圖可以任意的被放大或縮小，可以於任何解

析度在任何輸出工具上被列印而無損其細膩或清晰。因此向量圖形也最適合表現各種大小不

同的文字 （尤其是較小的文字）以及對比強烈的圖形，例如商標、標準字等。

點陣

12

此圖自行設計

繪圖（例如 Procreate Painter）與影像編輯軟體（例如 Adobe Photoshop）產生的點陣式

影像，稱為點陣化影像。這類用小方格的格點（又稱點陣）所呈現之圖形，是由被稱為像素

（Pixel）的最小單位所組成的。

在點陣影像中，每一個像素都有指定的位置與顏色的特定值。例如點陣影像所繪製出的地球，

是由一群像素聚集在該位置構成一顆地球的外觀，故在處理點陣影像時，編輯的是構成地球

的這些像素，而非編輯物件或形狀。

點陣影像可以表現複雜層次的形狀與色彩，所以點陣影像是最常用來表現連續色調影像的電

子媒介，例如繪圖軟體上所建立的照片或影像等。

點陣所編輯的影像會受到解析度的影響。也就是說，點陣影像的像素數目是固定的。因此，

若是在螢幕上縮放點陣影像或是使用較高的解析度（比建立影像時使用的解析度高）列印時，

輸出結果則會出現鋸齒現象並失去影像的細膩度。

分別向量與點陣不同

現在我們以巿面上使用頻繁之 Photoshop（點陣）與 Illustrator（向量式）軟體為例，並試

著比較兩者之差異，繼而認識繪圖軟體中向量式與點陣式軟體之不同。

1.繪圖原理不同

向量式圖檔與點陣圖檔之區別，在於向量式繪圖乃利用數學之函數，定義出向量影像之物件，

其作業之原理為利用貝茲曲線畫成線條、圖形、或圖表...等之獨立物件。

而點陣圖檔則是利用最小之單位“像素（Pixel）＂來組合為影像圖檔，每一最小單位皆為色

彩資料，適用於圖像的處理，且在色階表現上較好。

13

2.儲存容量不同

Illustrator 是以數學程式計算來定義圖形，而 Photoshop 是以影像圖形之最小單位“像素

（Pixel）＂來組合影像圖檔，故 Illustrator 有比較小的儲存容量優勢，亦即由 Illustrator

所產生的向量圖檔，可以輕易的降低儲存之容量。

3.輸出品質之不同

Illustrator 之向量式圖檔會因輸出設備解析度不同，經由設定最佳輸出品質至週邊輸出設

備上，而達到最佳的輸出狀態！

Photoshop 之輸出則完全取決於影像圖檔之實際解析度，而當圖形檔之解析度比實際輸出解

析度為差時，隨著差異之變大，圖形會出現較明顯之鋸齒狀，當然品質也相對受影響。

解析度的不同會直接影響畫面的清晰度以下是兩者的比較:

此圖自行設計 解析度 72 dpi

14

此圖自行設計 解析度 6 dpi

兩者相較之下 72dpi 的顯示較 9dpi 為清晰，在繪圖程式中解析度直接決定整體畫面的清

晰度，在新建檔案時須特別注意輸出解析度之設定與色彩的配置。

2.2Adobe Photoshop

Adobe Photoshop，簡稱「PS」（其程式圖示便是「PS」）是一個由 Adobe Systems 開

發和發行的影像處理軟體。

2003 年，Adobe 的 Creative Suite 套裝將 Adobe Photoshop 8 更名為 Adobe Photoshop

CS。因此，Adobe Photoshop CS6 是 Adobe Photoshop 中的第 13 個主要版本。對 CS 更

名也導致 Adobe 眾多的軟體套件降價。 Adobe Photoshop 有兩個發行版本：標準版 Adobe

Photoshop 和擴充功能版 Adobe Photoshop Extended，擴充功能版除包含標準版所有功

能之外，還增加了 3D 處理功能、動畫圖形編輯功能和高階影像分析功能。[4] Adobe 只

支援 Windows 作業系統和 Mac OS 作業系統版本的 Photoshop[5] ，但 Linux 作業系統使

用者可以透過使用 Wine 來執行 Photoshop CS6[6]。Google 也正在透過 Wine 資助 Linux

版 Photoshop 的研究。

2.2.1 軟體特色

Photoshop 主要處理以像素所構成的數位影像。使用其眾多的編修與繪圖工具，可

以更有效的進行圖片編輯工作。獨特的歷史紀錄浮動視窗和可編輯的圖層效果功能使使

用者可以方便的測試效果。對各種濾鏡的支援更令使使用者能夠輕鬆創造出各種奇幻的

效果。下列為 PS 支援的圖片格式。

15

.PSD：Photoshop 預設保存的檔案格式，可以保留所有有圖層、色版、通道、蒙版、路

徑、未柵格化文字以及圖層樣式等，但無法保存檔案的操作歷史記錄。Adobe 其他軟體

產品，例如 Premiere、Indesign、Illustrator 等可以直接匯入 PSD 檔案。

PSB：（Photoshop Big）：最高可保存長度和寬度不超過 300 000 像素的圖檔，此格式用

於檔案大小超過 2 Giga Bytes 的檔案，但只能在新版 Photoshop 中開啟，其他軟體以及

舊版 Photoshop 不支援。

PDD：（PhotoDeluxe Document）：此格式只用來支援 Photo Deluxe 的功能。Photo Deluxe

現已停止開發。

RAW：Photoshop RAW 具 Alpha 通道的 RGB、CMYK、和灰度模式，以及沒有 Alpha 通道的

Lab、多通道、索引和雙色調模式。

BMP：BMP 是 Windows 作業系統專有的影像格式，用於保存點陣圖檔案，最高可處理 24

位元影像，支援點陣圖、灰度、索引和 RGB 模式，但不支援 Alpha 通道。

GIF：GIF 格式因其採用 LZW 無失真壓縮方式並且支援透明背景和動畫，被廣泛運用於網

路中。

EPS：EPS 是用於 Postscript 印表機上輸出影像的檔案格式，大多數影像處理軟體都支

援該格式。EPS 格式能同時包含點陣圖影像和向量圖形，並支援點陣圖、灰度、索引、

Lab、雙色調、RGB 以及 CMYK。

PDF：便攜文件格式 PDF 支援索引、灰度、點陣圖、RGB、CMYK 以及 Lab 模式。具有文件

搜尋和導航功能，同樣支援點陣圖和向量。

PNG：PNG 作為 GIF 的替代品，可以無失真壓縮影像，並最高支援 244 位元影像併產生無

鋸齒狀的透明度。但一些舊版瀏覽器（例如：IE5）不支援 PNG 格式。

TIFF：TIFF 作為通用檔案格式，絕大多數繪畫軟體、影像編輯軟體以及排版軟體都支援

該格式，並且掃描器也支援匯出該格式的檔案。

JPEG：JPEG 和 JPG 一樣是一種採用失真壓縮方式的檔案格式，JPEG 支援點陣圖、索引、

灰度和 RGB 模式，但不支援 Alpha 通道。

在印刷中需特別注意到 RGB 和 CMYK 所輸出的差別，在印刷中我們分為兩種模式:

RGB 模式

16

在 RGB 的模式下較適合螢幕所使用唯一般網頁色彩的標準色，所謂的標準色指的是在不

同的顯示器下能呈現的色澤和原本使用者所定義的顏色差別極小或者無差別，RGB 架構

形成的方式為光的結構，光的組成來自於三總不同的顏色所構成 R=紅色(Rrd) 、G =綠

色(Green)、B =藍色(Blue)三種顏色組成則成為白色，好比國小我們所玩的三菱鏡可將

白色的陽光分為紅色、綠色、藍色，三種顏色。

CMYK 模式

CMYK 的組成來自於色料學，CMYK 分別為 C=青色(cyan)、M=洋紅(magenta)、Y=鮮黃

(yellow)、K=黑色(blacK) 印刷和電腦螢幕顯示，分屬兩種不同的色彩模式（電腦螢幕

為發光體，遵循 RGB「三原色光模式原理」；印刷為 CMY+K 油墨或墨水疊印、混色，遵循

的是 CMY「色料的三原色原理」），加上一般油墨印刷各原色網點色階為 0～100%，而電腦

螢幕各原色光色階為 0～255，兩者產生的色彩數差距甚大：CMYK 僅有 101³+101 共

1,030,402 色，而 RGB 卻有 256³共 16,777,216 色；加上前述印刷油墨並非理想純色，實

際形成的色彩空間也小於 RGB，使得不管哪一種 RGB 模式都超出 CMYK 的色域範圍；故而

印刷廠一般都會強調不能以螢幕上所看到的色彩要求輸出成品的色差。

圖片來源 http://stefanabrams.com/StefanAbrams/class/RGB.htm

17

2.2.2 軟體

1987

「Display

諾爾就職於

的程式，於

為「Image

為「Photo

在這期間

Photoshop

[8]此時約

碼。

Photo

的價格使其

價格大幅降

349 元人民

http://up

體歷史

年，托馬斯

y」的程式

於光影魔幻

於是在 1988

ePro」，但沒

oshop」並與

，約翰前往

p。兩邊的展

約翰在加利福

oshop 被人

其難以普及

降低，比如

民幣。不過

pload.wiki

斯·諾爾在美

，程式的功

幻工業特效公

8 年兩兄弟

沒曾想到這

與一家掃描

往矽谷向蘋果

展示都很成功

福尼亞州致

人們認為是最

及。但 Adob

如原價 7707

過此計劃只面

imedia.org

美國密西根

功能是讓黑白

公司，他建

弟花了六個月

這個名字已經

描器公司進行

果公司的工

功，最終在

致力於外掛模

最好的影像

be 為了向中

元人民幣的

面向大學生

g/wikipedi

18

根大學就讀博

白點陣圖顯

建議弟弟托馬

月時間合作

經被人用了

行了短期合

工程師以及

在 1988 年 9

模組開發，

像處理軟體

中國大陸推廣

的 Adobe P

生與高校教師

ia/zh/3/3f

博士研究生

顯示器顯示灰

馬斯將「Di

作完成這個項

了。[8]同年

合作，用於處

Adobe Syst

月 Adobe 決

而托馬斯仍

，但與著名

廣，在 201

Photoshop

師。圖片來

f/Photosho

生，他用課餘

灰階影像。

splay」變

項目。最初

年晚些時候

處理掃描器

tems 藝術總

決定買下 Ph

仍然在密西

名的 3D Stud

1 年推出了

CS5 Exten

來源

op_CS6_64.

餘時間編寫

。托馬斯的哥

變成一個處理

初托馬斯想將

，托馬斯將

器掃描下來的

總監羅素·布

hotoshop 的

西根州安娜堡

dio Max 一

了「校園先鋒

nded 在此計

.png

寫了一個叫

哥哥約翰·

理數位圖像

將軟體改名

將軟體改名

的影像。

布朗展示了

的發行權。

堡編寫代

一樣，昂貴

鋒計劃」，

計劃中只賣

像

名

了

19

20

2.3 Adobe Flash

Flash 是 ADOBE 公司開發的網頁多媒體製作軟體，向量繪圖與動畫編輯功能，簡易地製作連

續動畫、互動按鈕、繪圖與音效在您的網頁中使用！可以不需要任何程式腳本即可在網頁中

增加互動式多媒體。互動式的動畫和影音同步效果使網頁繪圖更加生動活潑，使用了 Flash

製作的任何物件，皆可以時間軸與動態路徑的動畫設計方式，由淺入深，容易學習與使用！

Flash 提供了很棒的線上教學。只有以向量為基礎的 Flash 多媒體，才能流暢地呈現在

Internet 上，即使放大縮小也不降低本身品質。

Flash 向量繪圖與動畫編輯所製作出來的圖檔及動畫檔，都比起您用點陣式圖檔或是

QuickTime 影片檔，檔案大小差了將近 10 倍！它除了幫您節省檔案大小，所設計出來的動

畫還能擁有極炫的影音互動與視覺效果喔！極小的檔案 Size，您不必擔心網友上您的網站會

是漫長的下載時間

Flash 主要有以下幾點特性：

1.使用向量式圖形技術來製作動畫，它使檔案容量較小（因為向量圖形是使用數學函數

來記錄圖形中的屬性）；而且將向量圖放大或縮小，也不會失真，最重要的是檔案容量也

不會改變。

2.可為網頁配上悅耳動聽的音效，而且是以 MP3 的音樂壓縮格式壓縮，可大幅降低聲音

所佔據的檔案容量，也可保有高品質的音質。(可匯入 WAV (WIndows)的聲音檔)。

3.採用 Stream 資料流傳送方式，在檔案下載的同時即可流暢的播放，不須等到資料全

部下載完畢才能觀看動畫。

4.提供 Actions 指令設定環境，可使網頁作到極佳的互動性。

5.為了讓使用者可以在完成動畫之後，立即看到動畫在網頁中的效果，Flash 可直接將

動畫出版成網頁，產生 HTML。

6.具有抗鋸齒的功能，可讓文字或影像的邊緣都非常平滑。

7.加強與支援點陣式圖形處理 (Enhanced Bitmap Support)，使之可旋轉、拉長等功能。

2.3.1ADOB

進入「我的

左鍵兩下

1.安裝畫面

選擇要安

BE FLASH C

的電腦」「光

，進入如下

面選取「我要

安裝的項目，

CS6 安裝與

光碟機」「F

下程式安裝介

要以試用方式安

這邊我們僅選

與使用

FLASH CS6

介面

安裝使用」，點

選擇第一個項

21

試用」資料

點選下一步

項目

料夾下面的

接

右

的 Setup.exe

接著等待安裝

右，即可使用

囉!!

e 執行檔，

裝 10 分鐘左

用 Flash CS6

連點滑鼠

2.3.2 啟動

1. 安

CS6 軟

2.接著

現詢問

可試用

動 Flash CS

安裝完畢後

軟體

著進入 Fla

問是否以試

用 30 天 Fl

S6 以及基本

，從螢幕左

ash CS6 主畫

試用繼續視窗

ash 軟體。

本功能介紹

下角的「開

畫面後，會

窗，點選是

22

紹

開始」「所有程

會出

是即

程式」「Ado

3.開新檔

用 Actio

作視窗囉

或是

obe Flash C

檔案類型，選

on Script

囉。

點選桌面圖

CS6」即可進

選擇「Flash

3.0)」，即

圖示：

進入 Flash

h 檔案(使

即可看到操

23

4.Flash 基本操作介面：

圖層又可一個圖層

畫板插入編輯都有

工具列，每可以分成很多個完整的動畫

共同運作

板，編輯圖像入圖形物件的輯視窗，每個有分開的畫板

每個畫格多圖層，畫由很多

像以及的主要個畫格板。

畫個每格

屬板屬方

24

畫格工具列，每畫面，動畫是

每個畫格組成格和關鍵影格

性工具列，屬性以及各性主要控制。

每一格代表一是以循序播放

成。分為一般影格

控制畫各種元件

的地

軟作動都

一放影

繪圖工具工具盡在畫過程最

體主工具列動畫主要功由這邊控制

具列，各項動在此處，也是最頻繁用到的

，製能

動畫製作是製作動的地方。

25

2.3.3 工具列元件簡介

1. 移動工具，使用在移動各種圖形元件、物件時使用，可以簡單方式拖曳 2. 自由變形工具，可以改變元件大小，扭曲角度 3. 文字工具主要在動畫上加上文字描述使用，也可以使用各種不同字型文字 4. 直線工具，繪製直線線段，是基本繪圖工具 5. 筆刷工具和鉛筆工具，可以自由繪製隨意圖形，屬性可設定圓滑化增加美觀 6. 多邊形工具可以繪製方形、圓形、多種邊圖形 7. 填充工具，可以在各種線條組成的區塊填入顏色 8. 滴管工具，可以取樣所選取的點顏色，方便製作風格一致的圖片 9. 橡皮擦工具，搭配各種繪圖工具使用，可以使擦掉的地方為白色。

練習一：

(1)將畫布大小設定為 600 * 600

(2)FPS 設定為 30

(3)影像顯示設定為 100%

(4)完成如右圖的繪製。

移動工具 自由變形工具 文字工具 直線工具

多邊形工具

鉛筆工具

筆刷工具

填充工具 滴管工具 橡皮擦工具

26

元件庫面板可說是存放元件、點陣圖、聲音、視訊、組件等物件的工具箱，所

有元件一經建立就為存放在元件庫中，而這些動畫素材除了可在 Flash 繪製以

外，也可以執行「檔案/匯入」命令，自外部匯入現成的點陣圖、聲音、視訊等

物件。如果沒有開啟元件庫面板，請先執行「視窗/元件庫」命令來開啟元件庫

面板

元件主要分成三種類型，分別為

1. 按鈕：提供各種具有按鈕功能的元件 2. 聲音：提供各種聲音元件，讓使用者運作在動畫中。 3. 類別：提供連結資料庫或其它 Web Services 所需的組件

只要將欲使用的內建元件，自內建元件庫面板拉曳到舞台上，就會自動在動畫

的元件庫中複製一份，複製到元件庫的元件就和你自行建立的一樣，可以自由

編輯應用。也可以從繪製的圖形轉換為元件，只要在繪製完畢的圖形上面點選

「右鍵/轉換為元件」並取一個元件名稱，即可製作出專屬的物件，之後可以從

元件庫拉出該元件重複使用。如果有需要從外部匯入元件，則可點選「檔案/

匯入/匯入至元件庫」

練習二：

1. 將剛才繪製的方形轉換為元件，名稱「方形元件 1」 2. 將剛才繪製的橢圓形轉換為元件，名稱「圓形元件 1」 3. 從元件庫拉出三個「方形元件 1」。 4. 匯入「我的文件夾/我的圖片」中任意一張圖片 2.3.5 影格與動畫設計

圖層 影格 影格速率 圖層是否顯示

27

1. 影格的作用 我們觀賞卡通影片，其實就是連續播放多個連貫的單格畫面所形成的，Flash

時間軸上的影格，就如同卡通影片的單格畫面，影格編號代表的是 Flash 動

畫行進的順序，製作動畫時必須根據演出順序製作影格內容，滑鼠移動到影

格上面點一下，即可觀看瀏覽該影格。

2. 影格的類型有二： (1)關鍵影格：主要控制動畫行進方向和內容，要讓元件根據我們指定的路

徑移動或變化必須使用關鍵影格來定義。

(2)普通影格：作用在於延伸前一個關鍵影格或空白關鍵影格的內容，位於

關鍵影格之後的一般影格會呈現灰色，表示延續前面一個影格的內容，

通常移動補間動畫必須借助普通影格來完成。

3. 時間軸速率可以在畫布屬性中調整，代表每秒鐘畫面數，達到 30 以上即可流暢播放影片。

4. 插入各種影格有快速熱鍵如下：

設定內容 快速鍵

插入關鍵影格 F6

插入空白關鍵影格 F7

插入普通影格 F5

點選想要插入影格的地方，按右鍵插入影格或熱鍵

5. 複製影格很簡單，只要將欲複製的影格反白，點選工具列「編輯/複製」，並且在欲貼上的地方點選工具列「編輯/貼上」

練習三：移動補間動畫

1. 首先開新檔案，選取「檔案/匯入/匯入至元件庫」，選取光碟所有素材檔案 2. 在影格 1點選一下 F6 建立關鍵影格。 3. 接著從元件庫拉出 fish 物件，放置於任意位置 4. 影格 25 點選一下 F6 建立關鍵影格。 5. 影格 1~25 任意一個上，按「右鍵/建立傳統補間動畫」 6. 點選影格 25，將 fish 元件隨意移動至別的地方 7. 點選影格 6 、12、 18 按下 F6 轉換為關鍵影格，並於這些影格亂移動 fish

元件位置

28

練習四：選轉移動補間動畫

1. 續上，於影格 25、26 點選 F7 按鍵，以插入空白關鍵影格 2. 接著於影格 26，從元件庫拉出粉紅金魚元件，放置於螢幕左邊。 3. 於影格 50 插入關鍵影格，建立傳統補間動畫 4. 點選一下已經建立補間動畫的影格 26，於屬性面板，將選轉方向設定為順

時鐘，圈數 2

練習五：

1. 於影格 51 52 插入空白關鍵影格 2. 點選影格 52，從元件庫拉進來一個花束 3. 點選影格 100 按 F6 插入關鍵影格，並且於影格 52 上按右鍵建立傳統補間動

畫

4. 於影格 75 按下 F6 將補間動畫其中一格轉換為關鍵影格 5. 點選影格 75 的花束物件，於屬性視窗設定「樣式/Alpha」將其 Alpha 值設

定為 0

(預覽效果)

6. 點選影格 100，使用變形工具，將花束變大為大約長寬 1.5 倍

額外練習：

1. 於 101 102 插入空白關鍵影格 2. 於 150 插入普通影格 3. 從元件庫拉出 heart 元件 4. 點選「視窗/移動預設效果」套用任意覺得喜歡的效果

製作完畢後，時間軸應如下圖：

29

2.3.6 圖層應用與多重圖層

Flash 的結構內，每一個圖層只能有一個補間動畫，所以如果我們要達到很多

動畫同時在畫面上進行，就必須使用多個圖層。圖層數量沒有上限，原則上我

們習慣把每個元件放在不同的圖層裡方便設計和管理。圖層室友順序性的，意

思是如果圖層A疊在圖層B上面，則有可能圖層A會遮蔽到圖層B的畫面內容，

因此一個精緻的動畫需要精心安排各個圖層組合

1. 圖層名稱可以自行命名習慣或方便記憶的名稱 2. 圖層顯示即上圖中眼睛的圖示，只要點選一下圖層對應的小點，即可切換圖

層是否顯示否，由期我們編輯下面圖層的時候，常常需要先把上方圖層隱藏

起來。

3. 鎖定圖層點選後，即無法編輯圖層內容 4. 圖層透視可以將很多不同的圖層，同時以線條方式顯示出來，已達到編輯時

的透視效果，在協調畫面時很常用到

5. 如果要將圖層丟棄，直接在圖層上面點選「右鍵/刪除圖層」即可 6. 如果圖層過多可以使用圖層資料夾，於上方左下角資料夾圖示即為新增圖層

資料夾選項，點選之後可以新增一個圖層資料夾，即可將數個圖層拖曳到該

資料夾內。如下圖，圖層「火車」「愛心」在「資料夾 2」裡面

圖層名稱 圖層顯示 圖層鎖定 圖層透視

30

補充：

建立補間動畫時，有「移動補間動畫」和「傳統補間動畫」兩種，一般來說使

用傳統補間動畫比較好上手，不過新的移動補間動畫提供不少新功能，建立的

差別是，要建立傳統補間動畫是介於兩個關鍵影格之間，而移動補間動畫是介

於左邊關鍵影格、右邊普通影格。

以下為製作過程的流程圖:

新增圖層 新增圖層 新增圖層

31

32

33

34

三、結論

在這次的專題，Flash 互動式網頁設計中我們大量運用了其他軟體的資源和

整合，也學習到 Adobe Flash、Illustrator、Photoshop、Dreamweaver 的操作

技巧和應用，從規劃到完成網頁都是經由自己手中所設計，每張圖片個 icon 都

是這段時間學習付出的成果，在網頁設計的領域中想要獨立完成較為全面性的網

頁並不容易，必須要學習視覺導向讓使用者操作順手，也要因應不同使用者的硬

體設備而簡化程式碼以及瀏覽器相容的問題，從視覺到程式設計之間涵蓋的範圍

相當的廣，所以要獨力完成較為全面性的網頁實在具有相當大的挑戰。

在 Flash 中我們應用了大量的 actionscript 語法配合視覺畫面做為最高指

導原則，透過 actionscript 讓原本平面的視覺畫面生動了起來，這也是為什麼

堅持與用 Adobe Flash 製作網頁，透過 Adobe Flash 的軟體補強其他網頁軟體中

無法達到的視覺效果和互動媒介(可透過 Arduino 達到與使用者互動)，在製作過

程中也碰上不少難題，熱愛視覺設計的我也配合了其他的繪圖軟體製作出獨一無

二的畫面結構，透過這段時間對程式碼以及時間軸的研究加以完成這個網頁，當

然在這世代的網頁中單一軟體的應用並不吃香，為了提升在產業界的需求，搭配

了不同的軟體進行整合，向 Illustrator、Photoshop 用來製作與繪圖 icon 和圖

像，Adobe Flash 運用了 actionscript 與時間軸達成動畫和程式的需求，接在

在 Dreamweaver 做全面性的整合(能因應各種瀏覽器的相容性)如此達到較為全

面的設計，使得在不同的硬體設備和不同了瀏覽器相容狀況下，能完整的呈現原

始的網頁。

最後學生在此非常感謝指導教授葉蘭英老師對我的指導和支持，在電子系的

環境中，硬體設備的開發是所有老師共同的理念以及訴求，老師秉持持者不同的

理念支持我們軟體應用的發展，以相信學生的心來面對我們專題的點點滴滴，讓

學生在畢業之前有一個最棒的舞台來呈現這幾年所學的東西。

35

參考文獻

http://help.adobe.com/zh_TW/ActionScript/3.0_ProgrammingAS3/WS5b3ccc5

16d4fbf351e63e3d118a9b90204-7f3f.html

http://upload.wikimedia.org/wikipedia/zh/3/3f/Photoshop_CS6_64.png

http://stefanabrams.com/StefanAbrams/class/RGB.htm

http://www.illustrator-fly.com/article.php?id=36

http://zh.wikipedia.org/wiki/Adobe_Photoshop