Adobe Flash Professional CS5 簡(jiǎn)介(十分鐘做一個(gè)自己的動(dòng)畫(huà)).doc

Adobe Flash Professional CS5 是一個(gè)創(chuàng)作工具，設(shè)計(jì)人員和開(kāi)發(fā)人員可使用它創(chuàng)建出演示文稿、應(yīng)用程序以及支持用戶(hù)交互的其他內(nèi)容。Flash 項(xiàng)目可以包含簡(jiǎn)單的動(dòng)畫(huà)、視頻內(nèi)容、復(fù)雜的演示文稿、應(yīng)用程序以及介于這些對(duì)象之間的任何事物。總而言之，使用 Flash Professional 制作出的個(gè)體內(nèi)容就稱(chēng)為應(yīng)用程序（或 SWF 應(yīng)用程序），盡管它們可能只是基本的動(dòng)畫(huà)。您可以加入圖片、聲音、視頻和特殊效果，創(chuàng)建出包含豐富媒體的應(yīng)用程序。SWF 格式十分適合通過(guò) Internet 交付，因?yàn)樗奈募苄?。這是因?yàn)樗罅渴褂昧耸噶繄D形。與位圖圖形相比，矢量圖形的內(nèi)存和存儲(chǔ)空間要求都要低得多，因?yàn)樗鼈兪且詳?shù)學(xué)公式而不是大型數(shù)據(jù)集的形式展示的。位圖圖形較大，是因?yàn)閳D像中的每個(gè)像素都需要一個(gè)單獨(dú)的數(shù)據(jù)進(jìn)行展示。創(chuàng)建 FLA 文件并添加圖形要在 Flash Professional CS5 中構(gòu)建應(yīng)用程序，您使用繪制工具創(chuàng)建矢量圖形并設(shè)計(jì)元素，然后將音頻、視頻和圖像等其他媒體元素導(dǎo)入文檔中。接下來(lái)，定義如何及何時(shí)使用各個(gè)元素創(chuàng)建腦海中的應(yīng)用程序。在 Flash Professional 中創(chuàng)作內(nèi)容時(shí)，您使用稱(chēng)為 FLA 文件的文檔。FLA 文件的文件擴(kuò)展名為 .fla (FLA)。查看 FLA 文件時(shí)，您會(huì)發(fā)現(xiàn) Flash CS4 Professional 用戶(hù)界面（請(qǐng)參閱圖 1）分為五個(gè)主要部分：您的圖形、視頻、按鈕等在回放過(guò)程中顯示在舞臺(tái)中。 時(shí)間軸控制影片中的元素出現(xiàn)在舞臺(tái)中的時(shí)間。您也可以使用時(shí)間軸指定圖形在舞臺(tái)中的分層順序。高層圖形顯示在低層圖形上方。 “工具”面板包含一組常用工具，可使用它們選擇舞臺(tái)中的對(duì)象和繪制矢量圖形。 “屬性”面板顯示有關(guān)任何選定對(duì)象的可編輯信息。 “庫(kù)”面板用于存儲(chǔ)和組織媒體元素和元件。 圖 1.Flash Professional CS5 用戶(hù)界面分為五個(gè)主要部分（單擊可放大） ActionScript 代碼允許您為文檔中的媒體元素添加交互性。例如，您可以添加代碼，當(dāng)用戶(hù)單擊某個(gè)按鈕時(shí)此代碼會(huì)使按鈕顯示一個(gè)新圖像。您也可以使用 ActionScript 為應(yīng)用程序添加邏輯。邏輯使您的應(yīng)用程序能根據(jù)用戶(hù)操作或其他情況表現(xiàn)出不同的行為。創(chuàng)建 ActionScript 3 或 Adobe AIR 文件時(shí)，F(xiàn)lash Professional 使用 ActionScript 3，創(chuàng)建 ActionScript 2 文件時(shí)，它使用 ActionScript 1 和 2。Flash 包含許多令它既強(qiáng)大、又簡(jiǎn)單易用的功能，如預(yù)建的拖放式用戶(hù)界面組件、內(nèi)建動(dòng)畫(huà)效果（可用于為時(shí)間軸上的元素制作動(dòng)畫(huà)）以及可添加到媒體對(duì)象的特殊效果。完成 FLA 文件創(chuàng)作后，您可以使用“文件”“發(fā)布”命令 (Shift+F12) 發(fā)布它。它將創(chuàng)建一個(gè)壓縮版的文件并使用擴(kuò)展名 .swf (SWF)。隨后即可使用 Flash Player 在 Web 瀏覽器中播放這個(gè) SWF 文件，也可以作為一個(gè)獨(dú)立應(yīng)用程序播放。創(chuàng)建一個(gè)簡(jiǎn)單的 FLA 文件為了說(shuō)明創(chuàng)建任何 FLA 文檔的基本步驟，本教程將指導(dǎo)您逐步完成一個(gè)簡(jiǎn)單教程。這個(gè)簡(jiǎn)短的教程只是您在 Flash Professional 中進(jìn)行創(chuàng)作時(shí)用到的工作流程的一個(gè)范例。第一步是新建一個(gè)文檔：選擇“文件”“新建”。 在“新建文檔”對(duì)話(huà)框中，默認(rèn)選擇文件類(lèi)型 ActionScript 3.0（請(qǐng)參閱圖 2）。如果未選中 ActionScript 3.0，請(qǐng)現(xiàn)在選中它。單擊“確定”。 圖 2.“新建文檔”對(duì)話(huà)框顯示 Flash Professional 文件類(lèi)型 單擊屏幕右上角的工作區(qū)下拉菜單，選擇“基本工作區(qū)布局選項(xiàng)”（請(qǐng)參閱圖 3）。此步驟將像教程中的屏幕快照那樣配置 Flash Professional 中的面板布局。 圖 3.選擇“基本選項(xiàng)”以顯示教程所使用的工作區(qū)布局 單擊用戶(hù)界面右上角的“屬性”選項(xiàng)卡，查看該文件的舞臺(tái)屬性。 在屬性檢查器中，默認(rèn)情況下靠工作區(qū)右側(cè)垂直放置，“大小”按鈕顯示當(dāng)前舞臺(tái)大小設(shè)置為 550 x 400 像素（請(qǐng)參閱圖 4）。背景色板設(shè)置為白色。單擊色板并選擇其他顏色，即可更改舞臺(tái)顏色。 圖 4.屬性檢查器顯示舞臺(tái)大小和背景色 提示：Flash 影片中的舞臺(tái)的背景色可使用“修改”“文檔”命令設(shè)置，也可以選擇舞臺(tái)，然后在“屬性”面板中修改“舞臺(tái)顏色”字段。無(wú)需繪制一個(gè)包含背景色的矩形。當(dāng)您發(fā)布影片時(shí)，F(xiàn)lash Professional 會(huì)將 HTML 頁(yè)的背景色設(shè)置為與舞臺(tái)背景色相同的顏色。選擇“文件”“保存”。 在硬盤(pán)上為文件選擇一個(gè)位置，將文件命名為 SimpleFlash.fla，然后單擊“保存”。請(qǐng)記住這個(gè)位置，因?yàn)樵诒窘坛套詈竽枰业竭@個(gè)目錄。 在舞臺(tái)上繪制一個(gè)圓圈創(chuàng)建文檔后，您就可以在其中添加圖稿。Flash 中的一個(gè)常見(jiàn)任務(wù)是繪制形狀。使用繪制工具時(shí)，您創(chuàng)建的是可隨時(shí)編輯的矢量圖形。以下步驟說(shuō)明如何創(chuàng)建稍后動(dòng)畫(huà)中使用的圓圈。從“工具”面板中選擇“橢圓”工具（請(qǐng)參閱圖 5）。 圖 5.“工具”面板中的“橢圓”工具 在屬性檢查器中單擊描邊色板，并從“描邊拾色器”中選擇“無(wú)顏色”選項(xiàng)（請(qǐng)參閱圖 6）。 圖 6.在“描邊拾色器”中選擇“無(wú)顏色”選項(xiàng) 從“描邊拾色器”下方的“填充拾色器”中選擇一種顏色。確保填充顏色與舞臺(tái)顏色形成鮮明對(duì)比。在本例中，我們選擇藍(lán)色作為填充色，紅色作為舞臺(tái)顏色。 當(dāng)“橢圓”工具仍處于選中狀態(tài)時(shí)，按住 Shift 鍵在舞臺(tái)上拖動(dòng)以繪制出一個(gè)圓圈（請(qǐng)參閱圖 7）。按住 Shift 鍵使“橢圓”工具只能繪制出圓圈。 圖 7.舞臺(tái)上繪制出的圓圈 提示：如果繪制圓圈時(shí)只看到輪廓而看不到填充色，請(qǐng)首先在屬性檢查器的“橢圓”工具屬性中檢查描邊和填充選項(xiàng)是否已正確設(shè)置。如果屬性正確，請(qǐng)檢查以確保時(shí)間軸的層區(qū)域中未選中“顯示輪廓”選項(xiàng)。請(qǐng)注意層名稱(chēng)右側(cè)的三個(gè)圖標(biāo)；眼球圖標(biāo)、鎖圖標(biāo)和輪廓圖標(biāo)。確保輪廓圖標(biāo)為實(shí)色填充而不僅僅是輪廓。單擊圖標(biāo)可切換可視狀態(tài)。創(chuàng)建元件和添加動(dòng)畫(huà)您可以通過(guò)將新圖稿轉(zhuǎn)換為元件，將它轉(zhuǎn)變?yōu)榭芍赜觅Y源。元件時(shí)一種媒體資源，無(wú)需重新創(chuàng)建就可以在文檔的任何位置重用。元件可以包含圖像、動(dòng)畫(huà)和其他類(lèi)型的內(nèi)容。一開(kāi)始，您最可能使用元件創(chuàng)建補(bǔ)間動(dòng)畫(huà)和存儲(chǔ)圖形內(nèi)容（正如以下幾個(gè)步驟中建議的那樣）。隨著 Flash Professional 使用量的增加，您會(huì)借助多個(gè)時(shí)間軸使用元件構(gòu)造應(yīng)用程序和交互性：在“工具”頁(yè)面中單擊“選擇”工具（請(qǐng)參閱圖 8）。 圖 8.在“工具”面板中選中“選擇”工具 單擊舞臺(tái)上的圓圈以選中它。圓圈周?chē)鷮⒊霈F(xiàn)一個(gè)定界框。 當(dāng)圓圈仍處于選中狀態(tài)時(shí)，選擇“修改”“轉(zhuǎn)換為元件”（或按 F8）即可調(diào)出“轉(zhuǎn)換為元件”對(duì)話(huà)框（請(qǐng)參閱圖 9）。 提示：您也可以選中圖形并將它拖到“庫(kù)”面板中，將它轉(zhuǎn)換為元件。圖 9.“轉(zhuǎn)換為元件”對(duì)話(huà)框 單擊“確定”。圓圈周?chē)鷮⒊霈F(xiàn)一個(gè)方形定界框。您已經(jīng)在文檔中創(chuàng)建一個(gè)名為 symbol 的可重用資源。在本例中，您創(chuàng)建的是一個(gè)影片剪輯元件。（有關(guān)元件的更多信息，請(qǐng)閱讀在線(xiàn) Flash 文檔中的使用元件。） 如果“庫(kù)”面板尚未打開(kāi)，請(qǐng)選擇“窗口”“庫(kù)”。“庫(kù)”面板中將顯示新元件的定義。（舞臺(tái)上的元件副本稱(chēng)為元件的實(shí)例。）為圓圈制作動(dòng)畫(huà)現(xiàn)在文檔中已有圖稿，您可以為它制作動(dòng)畫(huà)，使它在舞臺(tái)上移動(dòng)，從而增加文檔的趣味性：將圓圈拖到舞臺(tái)區(qū)域的左側(cè)（請(qǐng)參閱圖 10）。 圖 10.圓圈移到舞臺(tái)區(qū)域左側(cè) 右鍵單擊舞臺(tái)上的圓圈實(shí)例，從菜單中選擇“創(chuàng)建補(bǔ)間動(dòng)畫(huà)”選項(xiàng)。請(qǐng)注意，時(shí)間軸將自動(dòng)延伸到第 24 幀并且紅色標(biāo)記（當(dāng)前幀指示符或播放頭）位于第 24 幀（請(qǐng)參閱圖 11）。這表明時(shí)間軸可供編輯 1 秒即，幀頻率為 24 fps 的第 24 幀處。（有關(guān)時(shí)間軸的更多信息，請(qǐng)閱讀在線(xiàn) Flash 文檔中的使用時(shí)間軸。） 圖 11.延伸的時(shí)間軸在第 24 幀處可進(jìn)行編輯 選擇舞臺(tái)上的圓圈，并將它拖到舞臺(tái)區(qū)域右側(cè)。此步驟創(chuàng)建了補(bǔ)間動(dòng)畫(huà)。請(qǐng)注意第 24 幀出現(xiàn)的鉆石形狀的點(diǎn)（屬性關(guān)鍵幀）。并且動(dòng)畫(huà)參考線(xiàn)表明第 1 幀與第 24 幀之間的動(dòng)畫(huà)路徑（請(qǐng)參閱圖 12）。 圖 12.一個(gè) 24 幀的動(dòng)畫(huà)，顯示動(dòng)畫(huà)結(jié)束時(shí)第 24 幀處的圓圈 在時(shí)間軸的第 1 幀和第 24 幀之間來(lái)回拖動(dòng)紅色的播放頭，通過(guò)擦洗時(shí)間軸預(yù)覽動(dòng)畫(huà)。 將播放頭拖到第 10 幀，然后將圓圈移到屏幕上的另一個(gè)位置，在動(dòng)畫(huà)中間添加方向變化。請(qǐng)注意動(dòng)畫(huà)參考線(xiàn)中的變化以及時(shí)間軸第 10 幀的新點(diǎn)（請(qǐng)參閱圖 13）。時(shí)間軸上的點(diǎn)是屬性關(guān)鍵幀，它們用于標(biāo)記對(duì)象在屏幕上的變化位置（哪一幀）以及對(duì)象更改的屬性。 圖 13.補(bǔ)間動(dòng)畫(huà)顯示第 12 幀方向更改 嘗試更改動(dòng)畫(huà)參考線(xiàn)路徑的形狀。單擊“工具”面板中的“選擇”工具，然后單擊某個(gè)動(dòng)畫(huà)參考線(xiàn)部分，拖動(dòng)它使線(xiàn)條彎曲（請(qǐng)參閱圖 14）。彎曲動(dòng)畫(huà)路徑將使動(dòng)畫(huà)沿著一條曲線(xiàn)而不是直線(xiàn)運(yùn)動(dòng)。 圖 14.補(bǔ)間動(dòng)畫(huà)顯示添加到動(dòng)畫(huà)參考線(xiàn)的曲線(xiàn) 選擇“控制”“測(cè)試影片”以測(cè)試 FLA 文件。 關(guān)閉“測(cè)試影片”窗口。 使用停止動(dòng)作阻止時(shí)間軸循環(huán)您此時(shí)可能已發(fā)現(xiàn)播放影片時(shí)，動(dòng)畫(huà)會(huì)反復(fù)循環(huán)。這是因?yàn)?Flash Professional 中的時(shí)間軸在最后一幀后將回到第 1 幀，除非您指示影片執(zhí)行其他操作。如果要添加一個(gè)控制時(shí)間軸的命令，可將 ActionScript 代碼添加到時(shí)間軸上的關(guān)鍵幀（點(diǎn)）。提示：可使用關(guān)鍵幀將 ActionScript 和資源放在時(shí)間軸的特定幀上。只需查看關(guān)鍵幀點(diǎn)就可以確定內(nèi)容的位置。以下步驟通過(guò)使用最常見(jiàn)的時(shí)間軸命令之一介紹了 ActionScript 代碼；停止動(dòng)作：為層命名是個(gè)好主意，請(qǐng)將層 1 重命名為 animation。雙擊時(shí)間軸層區(qū)域中的層名，并鍵入新名稱(chēng)。 在 animation 層上添加一個(gè)名為 actions 的新層。單擊“時(shí)間軸”面板左下角的“新建層”按鈕（頁(yè)面圖標(biāo)）。在 ActionScript 3 文件中，必須將 ActionScript 代碼添加到時(shí)間軸。創(chuàng)建一個(gè)專(zhuān)門(mén)用于保存 ActionScript 代碼的 actions 層是一個(gè)好方法。您將關(guān)鍵幀添加到 actions 層中，使 ActionScript 與特定幀關(guān)聯(lián)在一起。 將紅色播放頭移至第 24 幀，單擊第 24 幀的 actions 層（應(yīng)當(dāng)剛突出顯示 actions 層中的最后一幀）。選擇“插入”“時(shí)間軸”“關(guān)鍵幀”(F6)，在選區(qū)中插入一個(gè)關(guān)鍵幀。您會(huì)發(fā)現(xiàn)出現(xiàn)一個(gè)空的關(guān)鍵幀（因?yàn)辄c(diǎn)不是純色，所以可以判定其中沒(méi)有圖形）。 使用“選擇”工具選擇新關(guān)鍵幀，打開(kāi)“動(dòng)作”面板（“窗口”“動(dòng)作”）?！皠?dòng)作”面板是用于在 FLA 文件中直接編寫(xiě) ActionScript 代碼的工具。將光標(biāo)放在數(shù)字 1（第 1 行）旁的文本區(qū)域中，鍵入以下動(dòng)作： stop(); 注意：此步驟假設(shè)您使用“動(dòng)作”面板的默認(rèn)模式。如果“動(dòng)作”面板處于“腳本助手”模式，請(qǐng)取消選中“動(dòng)作”面板右上角的魔術(shù)棒圖標(biāo)，恢復(fù)默認(rèn)模式。您會(huì)發(fā)現(xiàn)包含該動(dòng)作的關(guān)鍵幀上方出現(xiàn)一個(gè)小小的“a”圖標(biāo)。此時(shí)，時(shí)間軸應(yīng)當(dāng)如圖 15。選擇“動(dòng)作”面板，選擇關(guān)鍵幀并再次打開(kāi)“動(dòng)作”面板可隨時(shí)返回并編輯代碼。 選擇“控制”“測(cè)試影片”以測(cè)試 FLA 文件。您會(huì)發(fā)現(xiàn)動(dòng)畫(huà)不再循環(huán)。 圖 15.完成后的時(shí)間軸顯示應(yīng)用于 actions 層第 24 幀的停止動(dòng)作 關(guān)閉“測(cè)試影片”窗口。 保存您的文件。 發(fā)布文件完成 FLA 文件后即可發(fā)布它，以便通過(guò)瀏覽器查看它。發(fā)布文件時(shí)，F(xiàn)lash Professional 會(huì)將它壓縮為 SWF 文件格式。這是放入網(wǎng)頁(yè)中的格式。“發(fā)布”命令可以為您自動(dòng)生成一個(gè)包含正確標(biāo)簽的 HTML 文件。以下說(shuō)明如何發(fā)布 FLA 文件并在瀏覽器中查看 SWF：選擇“文件”“發(fā)布設(shè)置”。 在“發(fā)布設(shè)置”對(duì)話(huà)框中，選擇“格式”選項(xiàng)卡并確認(rèn)只選中了“Flash”和“HTML”選項(xiàng)（請(qǐng)參閱圖 16）。此操作使 Flash 只發(fā)布 SWF 文件和 HTML 文件。HTML 文件用于在 Web 瀏覽器中顯示 SWF 文件。 圖 16.“格式”選項(xiàng)卡中的“Flash”和“HTML”選項(xiàng) 在“發(fā)布設(shè)置”對(duì)話(huà)框中，選擇“HTML”選項(xiàng)卡并確認(rèn)選中“模板”彈出菜單中的“Flash Only”（請(qǐng)參閱圖 17）。該模板會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的 HTML 文件，它在瀏覽器窗口中顯示時(shí)只包含您的 SWF 文件。 圖 17.從“模板”菜單中選擇“Flash Only” 單擊“確定”。 選擇“文件”“發(fā)布”，從 Flash 導(dǎo)出 Web 就緒文件。 打開(kāi) Web 瀏覽器，選擇“文件”“打開(kāi)”。導(dǎo)航到保存 FLA 文件的文件夾?？梢哉业轿募?SimpleFlash.swf 和 SimpleFlash.html。選擇名為 SimpleFlash.html 的文件。 單擊“打開(kāi)”。瀏覽器窗口中此時(shí)顯示您的應(yīng)用程序。 祝賀您！您已完成您的第一個(gè) FLA 文件。要進(jìn)一步了解文檔發(fā)布，請(qǐng)閱讀在線(xiàn) Flash 文檔中的發(fā)布和導(dǎo)出部分。添加一個(gè)重放按鈕以重新啟動(dòng)動(dòng)畫(huà)您已使用 stop() 動(dòng)作停止動(dòng)畫(huà)，您可能會(huì)問(wèn)自己如何再次啟動(dòng)它。（圖 18 中顯示的示例可以做到。）您可以嘗試許多選項(xiàng)，其中包括使用按鍵重新啟動(dòng)、單擊舞臺(tái)或單擊按鈕。為了實(shí)現(xiàn)其中任何一個(gè)選項(xiàng)，您需要在運(yùn)行時(shí)使用 ActionScript 對(duì)用戶(hù)交互作出回應(yīng)。本部分比前一部分更進(jìn)一步，但您還是應(yīng)當(dāng)嘗試一下，了解其中的來(lái)龍去脈。按照這些步驟操作，為文件添加一個(gè)“重放”按鈕和 ActionScript：為按鈕新建一個(gè)層。單擊“層”面板上的“新建層”按鈕，并添加一個(gè)名為 Button 的層。 打開(kāi)“組件”面板（“窗口”“組件”），將一個(gè)按鈕組件從 UI Components 文件夾拖到舞臺(tái)上。將按鈕放在舞臺(tái)區(qū)域