abc328圖書館歡迎您光臨！觸摸式相冊(cè)的制作原理與方法
教學(xué)目的：通過本節(jié)教學(xué)了解和掌握用as語句打造鼠標(biāo)接觸小圖即顯大圖的觸摸式相冊(cè)的制作原理與過程，并結(jié)合圖組無限循環(huán)滾動(dòng)的運(yùn)用，使相冊(cè)更為生動(dòng)、漂亮、實(shí)用。
教學(xué)對(duì)象：本教材是針對(duì)有一定動(dòng)畫制作基礎(chǔ)及對(duì)工具箱、屬性面板、動(dòng)作面板、as語句和相關(guān)界面有所了解的朋友們編制的，因此省略了一些步驟，還望諒解。
教學(xué)要點(diǎn)：圖組滾動(dòng)、動(dòng)作面板、實(shí)例名稱、as語句。
作前準(zhǔn)備：
準(zhǔn)備14張圖片或照片，經(jīng)過制圖軟件（ps、fw）處理后，規(guī)格約為410*285，保存到指定的文件夾待用。
制作步驟
1.啟動(dòng)FLASH8 軟件。
2.確立文檔屬性
設(shè)置動(dòng)畫尺寸為550*400，其它默認(rèn),點(diǎn)擊確定，進(jìn)入場(chǎng)景1。 如圖1所示：
圖1
3.導(dǎo)入素材到庫
首先，將準(zhǔn)備好的所有素材導(dǎo)入到庫中，待用。
4.創(chuàng)建圖形元件
（1）選擇“插入－新建元件”，建立一個(gè)名為“邊框”的圖形元件。點(diǎn)擊確定，進(jìn)入元件編輯區(qū)。添加一個(gè)圖層，共兩個(gè)圖層。
（a）選擇圖層1第一幀，用矩形工具在舞臺(tái)拖一個(gè)規(guī)格為410*285的，紅色的，無邊線的矩形，再拖一個(gè)規(guī)格為101*285的，綠色的，無邊線的小矩形，將其轉(zhuǎn)換為圖形元件，然后使其和紅色矩形并列接觸在一起。如圖2所示：
圖2
（b）選擇圖層2第一幀，用矩形工具畫一個(gè)和紅綠矩形相對(duì)應(yīng)的邊框，顏色和邊框粗細(xì)自定。如圖3所示：
圖3
分別選中紅綠矩形刪除。如圖4所示：
圖4
（2）選擇“插入－新建元件”，建立一個(gè)名為“圖組”的圖形元件。點(diǎn)擊確定，進(jìn)入元件編輯區(qū)。就一個(gè)圖層。
選擇圖層1第一幀，分別依次從庫中拖出14張照片，規(guī)格為100*70，豎向排列組合在一起。框選第1－4張照片，復(fù)制－粘貼，將其移到第14張照片的下方，垂直對(duì)齊。如圖5所示：
圖5
5.創(chuàng)建影片剪輯元件
（1）選擇“插入－新建元件”，建立一個(gè)名為“滾動(dòng)”的影片剪輯元件。點(diǎn)擊確定，進(jìn)入元件編輯區(qū)。添加一個(gè)圖層，共兩個(gè)圖層。
（a）選擇圖層1第一幀，從庫中拖出綠色小矩形圖形元件到舞臺(tái)，全居中。在用任意變形工具將其加寬5個(gè)像素。上鎖。如圖6所示：
圖6
（b）選擇圖層2第一幀，從庫中拖出綠色圖組圖形元件到舞臺(tái)，將其上邊線和小矩形上邊線對(duì)齊。如圖7所示：
圖7
在第400幀插入關(guān)鍵幀，用鍵盤方向鍵垂直上移，使下邊的第一張照片的上邊線和矩形的上邊線對(duì)齊（和上邊的第一張照片在第1幀上的位置相同），然后，在下移一個(gè)像素。創(chuàng)建本區(qū)域間的補(bǔ)間動(dòng)畫。如圖8所示：
圖8
（2）選擇“插入－新建元件”，建立一個(gè)名為“大圖”的影片剪輯元件。點(diǎn)擊確定，進(jìn)入元件編輯區(qū)。就一個(gè)圖層，命名為圖片。
選擇圖片圖層第2－14幀插入空白關(guān)鍵幀，從庫中分別依次拖出照片1－14，放置在相對(duì)應(yīng)的空白關(guān)鍵幀的舞臺(tái)之上，規(guī)格均為410*285。全居中。其時(shí)間軸和第14幀上的舞臺(tái)實(shí)例顯示，如圖9所示：
圖9
6.編輯制作場(chǎng)景
返回場(chǎng)景1，添加五個(gè)圖層，共六個(gè)圖層。自下而上命名為背景、圖片、滾動(dòng)、遮罩、邊框、as。
（1）選擇背景圖層第一幀，用矩形工具，打開混色器，制作一個(gè)規(guī)格為550*400的，線性背景。全居中。上鎖。如圖10、11所示：
圖10
圖11
（2）選擇圖片圖層第一幀，從庫中拖出大圖影片剪輯元件到舞臺(tái)，將其放置在舞臺(tái)的左半部，垂直居中。上鎖。如圖12所示：
圖12
在屬性面板填寫其實(shí)例名稱為：mc 。上鎖。如圖13所示：
圖13
（3）選擇滾動(dòng)圖層第一幀，從庫中拖出滾動(dòng)影片剪輯元件到舞臺(tái)，將其放置在大圖的右邊，使其上邊線和大圖上邊線水平對(duì)齊。上鎖。如圖14所示：
圖14
（4）選擇遮罩圖層第一幀，從庫中拖出綠色小矩形元件到舞臺(tái)，將其放置在滾動(dòng)影片剪輯上，上邊線和其上邊線水平對(duì)齊。如圖15所示：
圖15
設(shè)置該圖層為遮罩層。
（5）選擇邊框圖層第一幀，從庫中拖出邊框圖形元件到舞臺(tái)，垂直中齊，和大圖、滾動(dòng)相對(duì)應(yīng)擺放。上鎖。如圖16所示：
圖16
（6）選擇as圖層第一幀，按f9，打開動(dòng)作面板，在as編輯區(qū)輸入，如下幀語句：
this.mc.gotoAndStop(1);
var ts = this.mc._totalframes;
var i = 0;
while (i < ts)
{
duplicateMovieClip(mc, "mc" + i, i);
var mm = this["mc" + i];
mm.gotoAndStop(i + 1);
mm._height = 40;
mm._width = 60;
mm._x = 75 * (i % 7) + 49;
mm._y = 25 + Math.floor(i / 7) * 350;
mm.onRollOver = function ()
{
var _loc2 = this._currentframe;
this._parent.mc.gotoAndStop(_loc2);
};
++i;
}
鎖定該圖層。
7.本作業(yè)完成后時(shí)間軸顯示如圖17所示：
圖17
8.測(cè)試存盤
*說明：
1.本教程中的小圖不進(jìn)入場(chǎng)景，它們是通過腳本設(shè)定其數(shù)量、規(guī)格和位置。如要增減圖片，需要修改語句中的相關(guān)數(shù)據(jù)。
2,本實(shí)例較之前邊講到的觸摸式相冊(cè)不同的是：鼠標(biāo)離開后仍顯示其剛接觸的圖片，更便于欣賞。
3,如果添加悅耳的音樂，其會(huì)更加賞心悅目。如，
我寶貝孫女的相冊(cè)最終效果顯示：
http://hsb456.16789.net/s-helpSite/domName/hsb456/2010262281495729.swf全屏下載祝你成功！
進(jìn)入更多教程來源地址：
