Adobe Flash Professional CS5 簡介(十分鐘做一個自己的動畫).doc

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