第4章 元件實(shí)例和制作基本動(dòng)畫(huà)

、第4章元件實(shí)例和制作基本動(dòng)畫(huà)

4.1【案例15】寶寶動(dòng)感相冊(cè) 相關(guān)知識(shí) 圖形實(shí)例和影片剪輯實(shí)例的特性在許多方面是一樣的，但也有一些不同的特性。

1．圖形實(shí)例的“屬性”面板 當(dāng)在“屬性”面板的“實(shí)例行為”下拉列表框中選擇“圖形”選項(xiàng)時(shí)，“屬性”面板參見(jiàn)圖4-1-6。它也有“實(shí)例行為”下拉列表框、“顏色”下拉列表框、左下角的4個(gè)用來(lái)精確確定實(shí)例大小與位置的文本框和“交換” 按鈕。此外，該面板中還有兩個(gè)特有的選項(xiàng)，這兩個(gè)選項(xiàng)的作用如下： （1）“圖形選項(xiàng)”下拉列表框：只有圖形元件實(shí)例的“屬性”面板中才有“圖形選項(xiàng)”下拉列表框，它位于“交換”按鈕的右側(cè)，用來(lái)選擇動(dòng)畫(huà)的播放模式。其中有“循環(huán)”（循環(huán)播放）“播放一次”（只播放一次）和“單 幀”（只顯示第1幀）3個(gè)選項(xiàng)。 （2）“第一幀”文本框：用來(lái)輸入動(dòng)畫(huà)開(kāi)始播放的幀號(hào)碼，確定動(dòng)畫(huà)從第幾幀開(kāi)始播放。只有圖形實(shí)例才有 該選項(xiàng)。

2．影片剪輯實(shí)例的“屬性”面板“影片剪輯”實(shí)例的“屬性”面板如圖4-1-7所示。該面板中各選項(xiàng)的作用如下：圖4-1-7影片剪輯實(shí)例的“屬性”面板（1）“實(shí)例行為”下拉列表框：該下拉列表框中有3個(gè)選項(xiàng)，即“影片剪輯”、“圖形”和“按鈕”，選擇不同選項(xiàng)，可以實(shí)現(xiàn)實(shí)例類型的轉(zhuǎn)換。 （2）“實(shí)例名稱”文本框：用來(lái)輸入影片剪輯或按鈕實(shí)例的名稱，該名稱可以在程序中使用。只有影片剪輯和按鈕實(shí)例才有此文本框。 （3）“交換”按鈕：?jiǎn)螕粼摪粹o可彈出“交換元件”對(duì)話框，如圖4-1-8所示。該對(duì)話框的列表框中會(huì)顯示當(dāng)前動(dòng)畫(huà)所有元件的名稱和圖標(biāo)，左側(cè)有一個(gè)小黑點(diǎn)的元件是當(dāng)前選中的實(shí)例的元件。單擊元件名稱或圖標(biāo)，可在對(duì)話框左上角顯示出相應(yīng)元件效果。 選中元件名稱或圖標(biāo)，單擊“確定”按鈕，或者雙擊元件名稱或圖標(biāo)，即可用所選元件替換選中的實(shí)例。單擊“直接復(fù)制元件”按鈕，可彈出“直接復(fù)制元件”對(duì)話框，在“元件名稱”文本框中輸入名稱，單擊“確定”按鈕，可復(fù)制一個(gè)新元件。

（4）“編輯輔助功能設(shè)置”按鈕：?jiǎn)螕粼摪粹o可以彈出“輔助功能”面板，如圖4-1-9所示。只有選中其中的“使對(duì)象可訪問(wèn)”復(fù)選框時(shí)，其他選項(xiàng)才有效。單擊“窗口”→“其他面板”→“輔助功能”命令，也可以彈出“輔助功能”面板。圖4-1-8“交換元件”對(duì)話框圖4-1-9“輔助功能”面板

（5）“混合”下拉列表框：用來(lái)設(shè)置混合模式。選擇不同的混合模式，可以更改舞臺(tái)上一個(gè)影片剪輯實(shí)例對(duì)象與位于其下方的各個(gè)對(duì)象的混合方式，可以混合重疊影片剪輯中的顏色，創(chuàng)造獨(dú)特的效果，創(chuàng)建復(fù)合圖像。復(fù)合是改變兩個(gè)或兩個(gè)以上重疊對(duì)象的透明度或者顏色相互關(guān)系的過(guò)程。影片剪輯元件實(shí)例的混合模式如表4-1-1所示。說(shuō)明：表中的混合顏色是指應(yīng)用于混合模式的顏色，不透明度是指應(yīng)用于混合模式的透明度，基準(zhǔn)顏色是指混合顏色下的像素的顏色，結(jié)果顏色是基準(zhǔn)顏色混合效果。由于混合模式取決于混合應(yīng)用的對(duì)象的顏色和基礎(chǔ)顏色，因此用不同的顏色會(huì)得到不同的效果。建議在采用混合模式時(shí)，使用不同的混合模式進(jìn)行試驗(yàn)，以獲得預(yù)期效果。（6）“編輯此對(duì)象的ActionScript”按鈕：?jiǎn)螕粼摪粹o可以彈出“動(dòng)作”面板，用來(lái)輸入腳本程序。只有按鈕和影片剪輯實(shí)例才有此按鈕。（7）“幫助”按鈕：?jiǎn)螕粼摪粹o可以彈出“幫助”面板，同時(shí)顯示所選實(shí)例的幫助信息。3．編輯實(shí)例實(shí)例是一種特殊的對(duì)象，可以像編輯一般對(duì)象那樣來(lái)編輯實(shí)例對(duì)象。每個(gè)實(shí)例都有自己的一些屬性，利用“屬性”面板可以改變實(shí)例的位置、大小、顏色、亮度、透明度等屬性，還可以改變實(shí)例的類型，設(shè)置圖形實(shí)例中動(dòng)畫(huà)的播放模式等。實(shí)例屬性的編輯修改，不會(huì)對(duì)相應(yīng)元件和其他由同一元件創(chuàng)建的實(shí)例造成影響。對(duì)于舞臺(tái)工作區(qū)中的實(shí)例，其“屬性”面板中有一個(gè)“顏色”下拉列表框，用于設(shè)置實(shí)例的顏色、亮度、色調(diào)和透明度等?！邦伾毕吕斜砜蛑杏?個(gè)選項(xiàng)。選擇“無(wú)”選項(xiàng)，則表示不設(shè)置實(shí)例顏色。選擇其他選項(xiàng)后的設(shè)置方法如下： （1）亮度：選擇“亮度”選項(xiàng)后，“顏色”下拉列表框右側(cè)會(huì)增加一個(gè)帶滑條的文本框，如圖4-1-10所示。拖曳滑塊或在文本框內(nèi)輸入數(shù)值（–100%～100%），均可調(diào)整實(shí)例的亮度。 （2）透明度：選擇Alpha選項(xiàng)后，“顏色”下拉列表框右側(cè)會(huì)增加一個(gè)帶滑條的文本框，如圖4-1-11所示。 （3）色調(diào)：選擇“色調(diào)”選項(xiàng)后，會(huì)增加幾個(gè)帶滑條的文本框和一個(gè)按鈕，如圖4-1-12所示。單擊按鈕，會(huì)彈出顏色面板，可以改變實(shí)例的色調(diào)。拖曳色比例（0%～100%）。按鈕右邊文本框的滑塊或在文本框中輸入百分比數(shù)值，可調(diào)整著圖4-1-10選擇“亮度”選項(xiàng)圖4-1-11選擇“Alpha”選項(xiàng)圖4-1-12選擇“色調(diào)”選項(xiàng)

拖曳RGB欄中文本框的滑塊或在文本框中輸入數(shù)值，也可以改變實(shí)例的色調(diào)。3個(gè)文本框分別代表紅、綠、藍(lán)三原色的值。

（4）高級(jí)：選擇“高級(jí)”選項(xiàng)后，“顏色”下拉列表框右側(cè)會(huì)顯示一個(gè)“設(shè)置”按鈕。單擊“設(shè)置”按鈕，即可彈出“高級(jí)效果”對(duì)話框，如圖4-1-13所示。利用該對(duì)話框可以調(diào)整實(shí)例的色調(diào)和透明度等。 該對(duì)話框有兩欄數(shù)據(jù)，百分?jǐn)?shù)欄可從0%～100%調(diào)整，數(shù)值欄可從–255～+255調(diào)整?？梢酝ㄟ^(guò)拖曳各文本框的滑塊來(lái)調(diào)整數(shù)值，也可以直接在文本框中輸入數(shù)值，最終的效果將由兩欄數(shù)值共同決定。修改后，每種顏色分量或透明度的值等于修改前的值乘以左側(cè)文本框中的百分比，再加上右側(cè)文本框中的數(shù)值。例如，一個(gè)實(shí)例原來(lái)的藍(lán)色是100，左側(cè)文本框的百分比值是50%，右側(cè)文本框內(nèi)的數(shù)值是80，則修改后的藍(lán)色分量為130。

4.2【案例16】小小照片瀏覽器 相關(guān)知識(shí)

1．按鈕元件的4個(gè)狀態(tài)

Flash影片中可以有按鈕，按鈕也是對(duì)象，當(dāng)將鼠標(biāo)指針移到按鈕上或單擊按鈕時(shí)，即可產(chǎn)生交互事件，按鈕也會(huì)改變外觀。要使一個(gè)按鈕在影片中具有交互性，需要先制作按鈕元件，再由按鈕元件創(chuàng)建按鈕實(shí)例，并在制作按鈕實(shí)例時(shí)為其分配對(duì)交互事件產(chǎn)生的動(dòng)作。在FlashCS3中，按鈕有4個(gè)狀態(tài)，這4個(gè)狀態(tài)的特點(diǎn)如下： （1）“彈起”（即Up）狀態(tài)：鼠標(biāo)指針沒(méi)有移到按鈕上時(shí)按鈕的狀態(tài)。圖4-1-13“高級(jí)效果”對(duì)話框（2）“指針經(jīng)過(guò)”（即Over）狀態(tài)：鼠標(biāo)指針移到按鈕上時(shí)按鈕的狀態(tài)。（3）“按下”（即Down）狀態(tài)：用鼠標(biāo)按下按鈕時(shí)按鈕的狀態(tài)。（4）“點(diǎn)擊”（即Hit）狀態(tài)：在此狀態(tài)下可以定義鼠標(biāo)事件的響應(yīng)范圍和鼠標(biāo)事件的動(dòng)作。如果沒(méi)有設(shè)置“點(diǎn)擊”狀態(tài)的區(qū)域，則鼠標(biāo)事件的響應(yīng)范圍由“彈起”狀態(tài)的按鈕外觀區(qū)域決定?！包c(diǎn)擊”幀的圖形不顯示。2．創(chuàng)建按鈕（1）單擊“插入”→“新建元件”命令，彈出“創(chuàng)建新元件”對(duì)話框。在該對(duì)話框中選中“按鈕”單選按鈕，在“名稱”文本框中輸入元件的名稱。單擊“確定”按鈕，進(jìn)入按鈕元件的編輯狀態(tài)，此時(shí)時(shí)間軸中有4個(gè)連續(xù)幀，參見(jiàn)圖4-2-3。用戶需要在這4個(gè)幀中分別創(chuàng)建相應(yīng)的按鈕外觀，可以導(dǎo)入圖形、圖像、文字、元件實(shí)例等，但不能在一個(gè)按鈕中添加其他按鈕實(shí)例。最好將按鈕圖形精確定位，使圖形的中心與十字標(biāo)記對(duì)齊，并記下坐標(biāo)值。要制作動(dòng)畫(huà)按鈕，可以使用影片剪輯元件實(shí)例。（2）用鼠標(biāo)選中第l幀（彈起），再制作按鈕“彈起”狀態(tài)的外觀。（3）選中第2幀（指針經(jīng)過(guò)），再按【F6】鍵，使第2幀成為關(guān)鍵幀，并復(fù)制第l幀的按鈕外觀。改變第2幀的對(duì)象，作為鼠標(biāo)指針經(jīng)過(guò)時(shí)的按鈕外觀。另外，可以按【F7】鍵，使第2幀成為空白關(guān)鍵幀，重新創(chuàng)建一個(gè)新對(duì)象，作為鼠標(biāo)指針經(jīng)過(guò)時(shí)的按鈕外觀。

（4）選中第3幀（按下），按照上述方法，制作鼠標(biāo)按下?tīng)顟B(tài)的按鈕外觀。選中第4幀，繪制一個(gè)圖形，用 來(lái)確定鼠標(biāo)事件的響應(yīng)范圍。 （5）單擊元件編輯窗口中的按鈕，返回到主場(chǎng)景，可以看到“庫(kù)”面板中已有了剛才制作的按鈕元件。從“庫(kù)”面板中將其拖曳到工作區(qū)中，即可創(chuàng)建按鈕實(shí)例。 按鈕的各種狀態(tài)不但可以是圖形，還可以是圖像、文字和動(dòng)畫(huà)（影片剪輯或圖形實(shí)例）等，還可以在按鈕中 插入聲音。按鈕的每一幀可以由多個(gè)圖層組成。

3．按鈕實(shí)例的“屬性”面板 按鈕實(shí)例的“屬性”面板如圖4-2-3所示?！皩傩浴泵姘逯兄饕x項(xiàng)的作用前面已經(jīng)介紹了。該面板中的特 有選項(xiàng)是“按鈕選項(xiàng)”下拉列表框，它用來(lái)選擇按鈕的跟蹤模式，其中有“當(dāng)作按鈕”和“當(dāng)作菜單項(xiàng)”兩個(gè)選 項(xiàng)。只有按鈕實(shí)例才有此下拉列表框。圖4-2-3按鈕元件實(shí)例的“屬性”面板4.3【案例17】圖像分解切換相關(guān)知識(shí)1．遮罩層可以透過(guò)遮罩層內(nèi)的圖形和文字看到其下面被遮罩圖層的內(nèi)容，而不能透過(guò)遮罩層內(nèi)的無(wú)圖形處看到被遮罩圖層的內(nèi)容。在遮罩層上創(chuàng)建對(duì)象，相當(dāng)于在遮罩層上挖出了相應(yīng)形狀的孔，形成挖空區(qū)域，該區(qū)域完全透明，其他區(qū)域不透明。通過(guò)挖空區(qū)域，下面圖層的內(nèi)容可以被顯示出來(lái)，而沒(méi)有對(duì)象的區(qū)域成了遮擋物，把下面被遮罩圖層的其余內(nèi)容遮擋起來(lái)。利用遮罩層的這一特性，可以制作很多特殊效果。下面通過(guò)實(shí)驗(yàn)來(lái)說(shuō)明遮罩層的作用。（1）在“圖層1”的第1幀創(chuàng)建一個(gè)對(duì)象，此處導(dǎo)入一幅圖像，如圖4-3-8所示。（2）在“圖層1”的上方創(chuàng)建“圖層2”。選中“圖層2”的第1幀，繪制圖形并輸入一些文字，作為遮罩層中的挖空區(qū)域，如圖4-3-9所示。（3）右擊要作為遮罩層的“圖層2”，在彈出的快捷菜單中選擇“遮罩層”命令。此時(shí)，普通圖層的名稱會(huì)向右縮進(jìn)，表示已經(jīng)與其上面的遮罩層關(guān)聯(lián)，成為被遮罩層，效果如圖4-3-10所示。圖4-3-8導(dǎo)入一幅圖像圖4-3-9圖形與文字圖4-3-10創(chuàng)建遮罩層

在建立遮罩層后，F(xiàn)lash會(huì)自動(dòng)鎖定遮