正文 6.3 交互控製及素材運用(1 / 3)

6.3.1 場景跳轉

1.知識要點

在Flash中可以在不同的場景中創建作品,每個場景都有獨立的時間線,如果不通過語句進行跳轉播放控製,播放器將按場景號的先後順序播放每個場景中的時間線。

新建一個場景,單擊“插入”菜單下的“場景”,軟件自動新建一個場景,並且自動命名。修改場景的名字,單擊“窗口”菜單下的“其他麵板”中的“場景”,打開場景控製窗口(快捷鍵為【Shift+F2】),雙擊需要修改的場景名稱,使其名稱處於可以編輯狀態,重命名場景。

在進行項目製作時,根據需要進行不同場景之間的跳轉,其常用的控製語句主要有以下幾種:

nextScene();//將播放頭移到下一場景的第1幀並停止;

prevScene();//將播放頭移到前一場景的第1幀並停止;

gotoAndPlay(“scene1”,1);//“scene1”代表場景的名字,1代表跳轉到場景scene1中的第一幀。

2.案例“春、夏、秋、冬”製作

Step 1 新建Flash文件,設置舞台大小為550×400,命名為“場景跳轉”。

Step 2 同時按下【Shift+F2】打開場景窗口,重命名場景1為“main”,連續新建4個場景,並分別命名為“summer”“winter”“spring”“autumn。

(1)按鈕製作

Step 3 同時按下【Ctrl+F8】新建一個影片剪輯元件,命名為“move”。

Step 4 在影片剪輯“move”中製作一個圓縮小的動畫。在第一幀上繪製一個正圓,填充為白色,並設置顏色麵板上的Alpha為50%,刪除圓的線框顏色。

Step 5 在影片剪輯“move”的第10幀處添加關鍵幀,並運用“任意變形”工具將其縮小到幾乎不見,單擊1~10幀處的任意一幀,製作形狀動畫。並在第10幀添加語句“stop”。

Step 6 同時按下【Ctrl+F8】新建一個按鈕元件,命名為“chun”。

Step 7 在按鈕“chun”元件圖層1第一幀上繪製一個圓,該圓與影片剪輯“move”中的圓相同大小,可以複製過來;調整該圓的顏色為#35B066,Alpha為53%。

Step 8 在按鈕“chun”的第一圖層的第二幀處插入一個關鍵幀,調整該圓的顏色為#35B066。

Step 9 在按鈕“chun”中新建圖層2,命名為“move”,在第二幀處添加空白關鍵幀,將影片剪輯“move”拖到該幀上。

Step 10 在按鈕“chun”中新建圖層3,命名為“word”,在該層上輸入文字“春”,顏色為白色。

Step 11 用與製作按鈕“chun”類似的方法製作按鈕“qiu”、“xia”、“dong”,其中“qiu”按鈕顏色分別為#E79443和#F99797;“xia”按鈕中的顏色為#11AED5和#15D0BD;“dong”按鈕顏色為#4A5CF9和#C28BFC。

(2)“main”場景布局

Step 12 從本書的教學資源“第六章/場景”目錄下導入背景圖片“bg.jpg”,並將其拖到“main”場景下的舞台上,在圖片的屬性窗口中將該背景圖片大小設置得與舞台大小一致,即550×400。

Step 13 選擇舞台上的背景圖片,按【Ctrl+B】鍵,打散圖片。

Step 14 選擇矩形工具,並設置屬性麵板中圓角的半徑為20,選擇油漆桶顏色為#E2BE9B,在舞台上繪製圓角矩形;再一次選擇矩形工具設置圓角半徑為20,填充顏色為#FEA28B,在舞台再繪製一個稍微小一點的圓角矩形。

Step 15 在“main”場景中新建一個圖層,命名為“button”,將四個按鈕拖到舞台並進行排版。

Step 16 在“main”場景中新建一個圖層,命名為“action”,在第一幀上添加控製語句:stop();

Step 17 單擊每個按鈕,並打開腳本編輯窗口,分別輸入以下語句:

按鈕Chun:

on(release){

gotoAndPlay(spring,1)}

按鈕xia:

on(release){

gotoAndPlay(summer,1)}

按鈕qiu:

on(release){

gotoAndPlay(autumn,1)}

按鈕dong:

on(release){

gotoAndPlay(winter,1)}

Step 18 從本書的教學資源“第六章/場景”目錄下導入“春.jpg”、“夏.jpg”、“秋.jpg”、“冬.jpg”四幅圖片到庫中,新建一個場景並命名為“summer”。

Step 19 類似“main”場景的操作,建立三個圖層,分別為“bg”、“button”和“action”。給按鈕添加語句,方法與“main”場景相同。

Step 20 新建一個圖層並命名為“pic”,將“夏.jpg”圖片拖入到場景中,調整其大小。

Step 21 新建一個圖層,命名為“word”,用文本工具輸入“夏”,填充顏色,打散文字,並調整其到合適位置。

Step 22 製作“winter”、“spring”、“autumn”場景,方法與製作“summer”場景相同。

6.3.2 複製影片剪輯

1.知識要點

複製影片剪輯語句duplicateMovieClip是在Flash ActionScript 中應用非常多的語句,許多精彩的特效都離不開這個語句,其語法格式如下:

duplicateMovieClip(目標,新名稱,深度)

“目標”參數為要進行複製的目標影片剪輯。

“新名稱”參數為新複製的影片剪輯的唯一標識符。

“深度”參數為新複製的影片剪輯的唯一深度級別。

removeMovieClip是與duplicateMovieClip經常配合使用的語句,其作用是用來刪除指定的影片剪輯,格式如下:

removeMovieClip(目標)

“目標”參數為用 duplicateMovieClip()創建的影片剪輯實例的目標路徑。或者是用 MovieClip.attachMovie()或 MovieClip.duplicateMovieClip()創建的影片剪輯的實例名稱。

說明

Step 3實現了小人走路從右到左、轉向、再從左返回右的動畫。

2.案例“複製人走路再刪除”

本案例主要是通過按鈕實現在舞台上複製5個影片剪輯,再通過按鈕逐個刪除舞台上的影片剪輯。

(1)素材準備

Step 1 新建文件,命名為“duplicate”。設置場景大小為550×400。

Step 2 同時按下【Ctrl+F8】新建一個影片剪輯“walk”,將繪製好的人走路圖形元件,按照運動規律排列為8幀不同的畫麵,每個畫麵延續3幀。

Step 3 新建一個影片剪輯“mcwalk”,將影片剪輯“walk”拖入到舞台的最右邊,分別在60幀、120幀處添加關鍵幀,選中第120幀執行“修改”“變形”“水平翻轉”;選中第60幀,將影片剪輯平移到舞台的最左邊,並在第61幀處再添加關鍵幀,選中第61幀執行“修改”“變形”“水平翻轉”;分別在1~60幀和61~120幀實現傳統補間動畫。

Step 4 在影片剪輯“mcwalk”第120幀處添加語句:stop();

Step 5 新建一個按鈕“play”元件,用矩形工具繪製一個圓角矩形;新建一個圖層,在該圖層上用文本工具輸入“Play”。用類似的方法再建一個“刪除mc”按鈕。

(2)舞台布局

Step 6 將圖層1重命名為“bg”,並用矩形工具繪製一個背景。

Step 7 新建一個圖層,命名為“mc”,將影片剪輯“mcwalk”拖到舞台的右邊,並在屬性麵板上命名為“mc”。

Step 8 新建一個圖層,命名為“button”,將“Play”按鈕和“刪除mc”按鈕拖入到舞台上。

Step 9 新建一個圖層,命名為“action”,在第1、2、3幀和10幀處添加關鍵幀,將其他各個圖層延長到第10幀。

Step 10 分別在圖層“action”上的第1、2、3幀和10幀上添加語句腳本。

第1幀:

stop();//停止

_root.mc._visible=0//影片剪輯“mc”可見

第2幀:

x=0;

y=0;//初始化x和y的值為0

第3幀:

x = x+1;//變量x自加1

if(x=5){

duplicateMovieClip(mc,mc + x,x);

_root【mc + x】._x = _root.mc._x-15*x;

_root【mc + x】._y = _root.mc._y+30*x;}//如果x小於等於5時,將影片剪輯“mc”複製x個,深度為x,並且重命名為“mcx”;複製的“mcx”的橫坐標為現在橫坐標後退15x個像素,縱坐標為現在縱坐標向上移動30x個像素。

第10幀:

if(x=5){

gotoAndPlay(3);} else {

stop();}//如果x小於等於5則時間線繼續從第3幀開始播放;如果大於5則時間線停止播放

Step 11 分別選中按鈕“Play”和刪除“mc”,添加如下語句:

Play:

on(release){

gotoAndPlay(2);//從時間線2處開始播放}

刪除“mc”:

on(release){

if(x5){

y = y+1;

removeMovieClip(mc+y);} //如果x大於5,則y自加1,並移除影片剪輯“mcy”}

說明

可以將同一個聲音在某處設置為事件聲音,而在另一處設置為數據流式聲音。

6.3.3 控製音頻文件

1. 知識要點

在Flash中使用聲音與使用圖片類似,通過導入就可以將聲音文件添加到庫文件中。Flash可以識別的聲音格式有標準的MP3格式和WAV格式,其他的都不支持。

由於聲音文件占用的磁盤和內存空間相當大,一般最好使用22kHz、16bit單聲道聲音(立體聲的文件大小為單聲道的兩倍)。

Flash中有兩種聲音類型:事件聲音和數據流式聲音(音頻流)。

事件聲音:必須等全部下載完畢才能開始播放,並且是連續播放直到接收了明確的停止命令。可以把事件聲音用做單擊按鈕的聲音,也可以把它作為循環背景音樂。

數據流式聲音:隻要下載了一定的幀數後就可以播放,而且聲音的播放可以與時間軸上的動畫保持同步。

(1)在時間線上添加聲音

Step 1 在新建的Flash文件中,單擊“文件”“導入到庫”,從本書的教學資源“第六章/sound/時間線”目錄下選擇“背景音樂.mp3”聲音文件。

Step 2 從庫中選擇聲音文件“背景音樂.mp3”並拖到舞台上。舞台第一幀處出現一條橫杠,但是播放並沒有發出聲音。單擊該關鍵幀,調整聲音屬性,將同步設置為數據流。

Step 3 在圖層1的時間線上延長幀。運行後可以聽見聲音。

(2)在按鈕上添加聲音

在按鈕上添加聲音的方法類似於在時間線上添加聲音。選中聲音將其拖放到舞台上,就可以在關鍵幀處添加聲音

(3)從庫中調入聲音

聲音不僅可以直接添加到指定的時間線或關鍵幀位置上,而且可以通過腳本語句,將其在文件的任何位置調用,這種方法可以更加便捷地控製聲音的播放。基本Step 如下:

說明

如果在關鍵幀上添加聲音,隻有一幀的情況下,運行文件是聽不到聲音的,因為沒有空間延續讓其播放,隻有延長幀後聲音才能正常播放。

◆ 建立一個可由 AS 控製的聲音對象。

◆ 將庫中指定的聲音附加到這個對象上。

◆ 製作一個有放音和消音圖標的 MC 。

◆ 開始為自動播放,並有放音圖標顯示。

◆ 第一次點擊 MC 後,顯示靜音圖標,存儲當前音量值,同時音量設為0。

◆ 再次點擊,顯示放音圖標,並為聲音對象設置已存儲的音量值。

(4)常用於控製聲音播放的函數和變量

mySound=new Sound();// 新建一個聲音對象。

mySound.attachSound();// 從庫中加載聲音。

mySound.getBytesLoaded();// 獲取聲音載入的字節數。

mySound.getBytesTotal();// 獲取聲音的總字節數。

mySound.start();// 開始播放聲音。括號中若填整數值,即從聲音播放後的這一秒開始播放。

mySound.stop();// 停止聲音的播放。

mySound.getVolume();// 獲取當前的音量大小(範圍從 0~100)。

mySound.setVolume();// 設置當前音樂的音量(範圍從 0~100)。

mySound.duration;// 聲音的長度,單位為毫秒(1000 毫秒= 1 秒)。

mySound.position;// 聲音已播放的長度(單位為毫秒)。

2.控製時間線上的聲音播放控製案例

本案例中聲音文件以數據流的形式被添加在舞台上的時間線,通過控製時間線的播放達到控製聲音的播放。

(1)素材準備

Step 1 新建一個文件,命名為“按鈕控製小球跳動聲音”,設置舞台大小為400×400。

Step 2 從本書的教學資源“第六章/sound/時間線”目錄下導入“背景.jpg”圖片和“按鈕聲效.mp3”、“背景音樂.mp3”兩個聲音文件,這兩個聲音文件分別用於按鈕聲效和背景音樂。

Step 3 同時按下【Ctrl+F8】新建一個圖形文件,命名為“小球”。用橢圓工具配合【Shift】鍵繪製一個正圓,並設置顏色。

Step 4 同時按下【Ctrl+F8】新建一個按鈕文件,命名為“播放按鈕”。選擇多角星形工具,在屬性麵板中單擊“選項”,打開窗口,設置樣式為星形,邊數為5,星形頂點大小為1。設定填充為放射狀填充,設置顏色。

Step 5 選中剛剛繪製的五角星,單擊“窗口”“變形”打開窗口,單擊複製,將其大小改為70且填充顏色為黑色,再複製一份,將填充顏色改為其他顏色,位置錯開一點。

Step 6 在“播放按鈕”的“指針經過”處添加關鍵幀,運用任意變形工具配合【Alt】鍵放大剛剛繪製的五角星。

Step 7 在“播放按鈕”的“點擊”處繪製點擊區域,用矩形繪製一個完全遮蓋五角星的正方形。

Step 8 在“播放按鈕”中新建一個圖層,用鋼筆工具繪製一個三角形,填充為白色。同樣在“指針經過”處添加關鍵幀,並用任意變形工具稍微放大該三角形。