本實例中的方塊矩陣會在橫向和縱向順序翻轉,很象翻動魔方時的效果,最終效果分別如圖1和圖2所示;


圖1 水平翻轉效果


圖2 垂直翻轉效果

　　1.啟動Flash,新建一個影片,設置影片舞臺大小為200px*260px(單位為象素),影片背景色為紫色,顏色代碼為#1B1C47.

　　2.首先制作方塊矩陣里的方塊單元,為了在后面排列矩陣時方便,本例中以一列方塊為單位,每列有8個方塊單元,將8個方塊列水平排列,就成了8*8的方塊矩陣.

　　新建一個圖形元件,命名為square row,進入元件的編輯區(qū)后,使用矩形工具繪制一個無邊框的正方形,填充色為藍色,顏色代碼為#33CCFF,然后連續(xù)復制7個方塊的副本,在垂直方向將其排成一列,如圖3所示:


圖3 制作方塊列

　　3.下面制作方塊垂直翻轉的效果.新建一個影片元件,命名為row flip,進入元件的編輯區(qū)后,將元件square row拖到圖層一中,然后在第20幀插入一個關鍵幀,回到第1幀square row點右鍵,從彈出的快捷菜單中選擇縮放命令,這時在元件四周出現(xiàn)了縮放調整手柄和元件的中心點,首先拖動元件的中心點到元件的最下面,如圖4所示;


圖4 調整元件的中心點

　　然后向下拉動最上面中間位置的手柄,使其高度逐漸縮小,如圖5所示;


圖5 向下拉動方塊列

　　直到方塊列被壓縮成如圖6所示的樣子即可;


圖6 被壓縮后的方塊列

　　4.建立第1幀到第20幀的運動漸變動畫,在上面新建一個圖層,分別復制圖6中壓縮后的元件和圖4中壓縮前的元件到圖層Layer2的第1幀和第20幀,不過這里元件的位置需要放好,將壓縮后的元件放在壓縮前元件的最上部,同樣建立運動漸變動畫,最后在第20幀添加Action: stop();,這時候把時間軸移動到第10幀,會看到圖7所示的翻轉效果:


圖7 垂直翻轉效果

　　5.下面就利用前面做好的垂直翻轉,通過簡單的旋轉操作,將其旋轉成水平位置,就實現(xiàn)了水平翻轉的效果.新建一個元件命名為controller movie,進入元件的編輯區(qū)后,插入兩個關鍵幀,分別設置其幀標簽為horizontal和vertical,然后給兩個幀都添加Action:stop();.其中第1幀設置為水平翻轉效果,第2幀設置為垂直翻轉效果.

　　回到第1幀,將元件row flip拖到編輯區(qū)中,使用旋轉工具將其旋轉成水平,然后復制7個副本,排列其為一個方陣,如圖8所示;


圖8 排列元件成方陣

　　回到第2幀,同樣將元件row flip拖到編輯區(qū)中,也復制7個副本,然后也排列成一個方陣,這里要注意兩幀里方陣的位置要相同,不要出現(xiàn)錯位的現(xiàn)象.

　　6.最后回到主場景中,將元件controller movie拖到舞臺中間,在屬性面板中設置其實例名為box,如圖9所示;


圖9 給方陣設置實例名

　　最后只要在下面添加兩個按鈕,分別用來顯示水平翻轉和垂直翻轉效果,如圖10所示;


圖10 給影片添加控制按鈕

　　給左邊的水平按鈕添加如下Action:

on (release) {

tellTarget ("/box") {

gotoAndPlay("horizontal");

}

}

　　給右邊的垂直按鈕添加如下Action;

on (release) {

tellTarget ("/box") {

gotoAndPlay("vertical");

}

}