Flash的設(shè)計(jì)與制作

1、整理課件整理課件Flash課件的設(shè)計(jì)與制作整理課件一、 FLASH CS4簡(jiǎn)介1、運(yùn)行Flash程序，進(jìn)入開始頁。 整理課件一、FLASH CS4簡(jiǎn)介2、Flash CS4的工作界面 選擇創(chuàng)建文件類型后，進(jìn)入主界面，包括菜單欄 、工具箱、舞臺(tái)與標(biāo)尺、時(shí)間軸面板與浮動(dòng)面板。 整理課件一、FLASH CS4簡(jiǎn)介3、工具箱中新增的工具：（1）3D旋轉(zhuǎn)工具（2）3D平移工具（3）基本矩形工具（4）基本橢圓工具（5）Deco工具（6）骨骼工具（7）綁定工具整理課件4、FLASH CS4的新功能基于對(duì)象的動(dòng)畫使補(bǔ)間動(dòng)畫直接應(yīng)用于對(duì)象而不是關(guān)鍵幀。新增的3D平移與旋轉(zhuǎn)工具可以對(duì)對(duì)象進(jìn)行三維模式的動(dòng)畫處理。新

2、增的動(dòng)畫預(yù)設(shè)面板，可以快速創(chuàng)建動(dòng)畫效果。新增的骨骼工具可以創(chuàng)建反向運(yùn)動(dòng)效果。新增的Deco工具可以進(jìn)行裝飾性繪畫。一、FLASH CS4簡(jiǎn)介整理課件1、課件文字、圖形圖像素材的設(shè)計(jì)的基本原理文字內(nèi)容要簡(jiǎn)明扼要、清晰明了文字的字體要協(xié)調(diào)，位置大小要安排合理圖形圖像的設(shè)計(jì)要滿足教學(xué)內(nèi)容表達(dá)的要求色彩基調(diào)要統(tǒng)一，整體風(fēng)格要協(xié)調(diào)二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整理課件2、課件圖形圖像素材的設(shè)計(jì)與制作使用新的繪圖工具“基本橢圓工具”，以及矩形工具和文本工具繪制以下圖形：二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整理課件制作過程：1、選擇矩形工具繪制黑色矩形條，注意在工具箱最下方選擇“對(duì)象繪制”。2、選

3、擇任意變形工具，將中心點(diǎn)移到矩形下方。3、按住Ctrl+T，打開變形面板，設(shè)置旋轉(zhuǎn)角度為15度，點(diǎn)擊“重置選區(qū)和變形”按鈕，復(fù)制多個(gè)矩形條。4、打開標(biāo)尺，拖出2條互相垂直的輔助線，讓其在矩形的中心點(diǎn)處相交。5、選擇“基本橢圓工具”，在輔助線的交點(diǎn)處按住Shift+Alt鍵，繪制正圓。在屬性面板中，設(shè)置內(nèi)徑為50，開始角度為270。6、導(dǎo)入位圖，設(shè)置橢圓的筆觸為黑色，填充顏色為位圖。選擇“漸變變形工具”，調(diào)整位圖的大小。7、輸入文字，設(shè)置為垂直方向。按住Ctrl+B將文本分離2次，設(shè)置填充顏色為位圖。 8、選擇“任意變形工具”，使用“封套”改變文字的形狀。二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整

4、理課件3、課件文字素材的設(shè)計(jì)與制作將文字分離為圖形，并設(shè)置柔滑填充邊緣，制作彩虹文字效果：二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整理課件制作過程：1、將畫布設(shè)置為黑色。2、選擇文本工具，輸入文字“彩虹文字”，設(shè)置為白色。3、按住Ctrl+B將文本分離2次，按住Ctrl+D將文本復(fù)制并移到下方。4、選擇上方的文字，在菜單中選擇“修改”|“形狀”|“柔化填充邊緣”，在對(duì)話框中設(shè)置距離為10像素，步驟數(shù)為10。5、按住Ctrl+G,可以組合文字。6、選擇下方的文字，設(shè)置填充顏色為彩虹色。7、將下方的文字移動(dòng)到上方，使兩個(gè)文本對(duì)齊。二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整理課件三、課件動(dòng)畫素材的設(shè)計(jì)與

5、制作1.逐幀動(dòng)畫的應(yīng)用 逐幀動(dòng)畫（Frame By Frame），這是一種常見的動(dòng)畫形式，它的原理是在“連續(xù)的關(guān)鍵幀”中分解動(dòng)畫動(dòng)作，也就是每一幀中的內(nèi)容不同，連續(xù)播放而成動(dòng)畫。 逐幀動(dòng)畫在時(shí)間幀上表現(xiàn)為連續(xù)出現(xiàn)的關(guān)鍵幀；或者是非連續(xù)出現(xiàn)的關(guān)鍵幀。整理課件2.補(bǔ)間形狀動(dòng)畫的應(yīng)用 在一個(gè)關(guān)鍵幀中繪制一個(gè)形狀，然后在另一個(gè)關(guān)鍵幀中更改該形狀或繪制另一個(gè)形狀，F(xiàn)lash 根據(jù)二者之間的幀的值或形狀來創(chuàng)建的動(dòng)畫被稱為“補(bǔ)間形狀動(dòng)畫”。 形狀補(bǔ)間動(dòng)畫建好后，時(shí)間幀面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有一個(gè)長(zhǎng)長(zhǎng)的箭頭。三、課件動(dòng)畫素材的設(shè)計(jì)與制作整理課件使用形狀提示在“起始形狀”和“結(jié)束形狀”中添

6、加相對(duì)應(yīng)的“參考點(diǎn)”，使Flash在計(jì)算變形過渡時(shí)依一定的規(guī)則進(jìn)行，從而較有效地控制變形過程。先在形狀補(bǔ)間動(dòng)畫的開始幀上單擊一下，再執(zhí)行“修改”|“形狀”|“添加形狀提示”命令，該幀的形狀上就會(huì)增加一個(gè)帶字母的紅色圓圈，相應(yīng)地，在結(jié)束幀形狀中也會(huì)出現(xiàn)一個(gè)“提示圓圈”，用鼠標(biāo)左鍵單擊并分別按住這2個(gè)“提示圓圈”，放置在適當(dāng)位置，安放成功后開始幀上的“提示圓圈”變?yōu)辄S色，結(jié)束幀上的“提示圓圈”變?yōu)榫G色，安放不成功或不在一條曲線上時(shí)，“提示圓圈”顏色不變。三、課件動(dòng)畫素材的設(shè)計(jì)與制作整理課件3、傳統(tǒng)補(bǔ)間動(dòng)畫的應(yīng)用 所謂“傳統(tǒng)補(bǔ)間動(dòng)畫”，是相對(duì)于Flash CS4提供的全新的動(dòng)畫方式“補(bǔ)間動(dòng)畫”而言的

7、。它指的是，在一個(gè)關(guān)鍵幀上放置一個(gè)元件，然后在另一個(gè)關(guān)鍵幀改變這個(gè)元件的大小、顏色、位置、透明度等，F(xiàn)lash 根據(jù)二者之間的幀的值創(chuàng)建的動(dòng)畫。 與補(bǔ)間形狀動(dòng)畫不同的是，構(gòu)成傳統(tǒng)補(bǔ)間動(dòng)畫的元素是元件，包括影片剪輯、圖形元件、按鈕、文字、位圖、組合等等，但不能是形狀，只有把形狀“組合”或者轉(zhuǎn)換成“元件”后才可以做“動(dòng)作補(bǔ)間動(dòng)畫”。 傳統(tǒng)補(bǔ)間動(dòng)畫建立后，時(shí)間軸面板的背景色變?yōu)榈仙谄鹗紟徒Y(jié)束幀之間有一個(gè)長(zhǎng)長(zhǎng)的箭頭。三、課件動(dòng)畫素材的設(shè)計(jì)與制作整理課件4.補(bǔ)間動(dòng)畫的應(yīng)用 補(bǔ)間動(dòng)畫是Flash CS4提供的全新補(bǔ)間動(dòng)畫方式，是指通過為一個(gè)幀中的對(duì)象屬性指定一個(gè)值并為另一個(gè)幀中的相同對(duì)象的屬性指定

8、另一個(gè)值創(chuàng)建的動(dòng)畫。Flash會(huì)計(jì)算這兩個(gè)幀之間該屬性的值。 傳統(tǒng)的補(bǔ)間動(dòng)畫是由關(guān)鍵幀組成的，而補(bǔ)間動(dòng)畫則是由屬性關(guān)鍵幀組成的。屬性關(guān)鍵幀是在補(bǔ)間范圍中為補(bǔ)間目標(biāo)對(duì)象顯示定義一個(gè)或多個(gè)屬性值的幀。屬性關(guān)鍵幀是以小菱形圖標(biāo)來表示的，但是補(bǔ)間的第一幀例外，它是默認(rèn)的屬性關(guān)鍵幀，以黑色圓點(diǎn)表示。能夠創(chuàng)建補(bǔ)間動(dòng)畫的對(duì)象包括圖形元件、按鈕元件、影片剪輯元件以及文字。補(bǔ)間動(dòng)畫中可記錄對(duì)象的屬性包括位置、傾斜、縮放、顏色、旋轉(zhuǎn)、濾鏡等。若要在文本上創(chuàng)建補(bǔ)間顏色效果，就必須先把文本轉(zhuǎn)換為元件。濾鏡屬性不包括應(yīng)用于圖形元件的濾鏡。 補(bǔ)間動(dòng)畫建立后，時(shí)間軸面板的背景色變?yōu)榈{(lán)色，在起始幀和結(jié)束幀之間有若干個(gè)小菱形

9、圖標(biāo)。三、課件動(dòng)畫素材的設(shè)計(jì)與制作整理課件 在時(shí)間軸面板的右邊有一個(gè)“動(dòng)畫編輯器”面板。通過該面板可以查看當(dāng)前選中的補(bǔ)間屬性及其屬性關(guān)鍵幀。它還提供了向補(bǔ)間中添加具體屬性值的工具，可以精確快速地控制動(dòng)畫的屬性調(diào)整。三、課件動(dòng)畫素材的設(shè)計(jì)與制作整理課件 三、課件動(dòng)畫素材的設(shè)計(jì)與制作補(bǔ)間動(dòng)畫實(shí)例：整理課件 三、課件動(dòng)畫素材的設(shè)計(jì)與制作分別使用傳統(tǒng)補(bǔ)間動(dòng)畫和補(bǔ)間動(dòng)畫制作以下實(shí)例，體會(huì)2種動(dòng)畫形式的區(qū)別：整理課件制作過程：1、使用矩形工具繪制下坡圖形。2、新建圖形元件命名為“球”，繪制正圓，設(shè)置放射狀漸變填充。3、新建圖層，將“球”拖入畫布中，在第20幀和第40幀插入關(guān)鍵幀。4、在第20幀將球移到下坡

10、處，在第40幀將球移到最右邊，分別創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫。在第1到20幀設(shè)置緩動(dòng)值為-100，在第20到40幀設(shè)置緩動(dòng)值為100。5、新建圖層，在第41幀插入關(guān)鍵幀，將“球”拖入畫布中，在第60幀插入幀，創(chuàng)建補(bǔ)間動(dòng)畫，然后將球移到下坡處，然后設(shè)置緩動(dòng)值為-100。6、新建圖層，在第60幀插入關(guān)鍵幀，將“球”拖入畫布中并放到下坡處，在第80幀插入幀，創(chuàng)建補(bǔ)間動(dòng)畫，然后將球移到最右邊，然后設(shè)置緩動(dòng)值為100。二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整理課件 三、課件動(dòng)畫素材的設(shè)計(jì)與制作5.引導(dǎo)層動(dòng)畫的應(yīng)用一個(gè)最基本“引導(dǎo)路徑動(dòng)畫”由兩個(gè)圖層組成，上面一層是“引導(dǎo)層”，下面一層是“被引導(dǎo)層”，同普通圖層一樣

11、。在普通圖層上點(diǎn)右鍵，選擇“添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層”，該層的上面就會(huì)添加一個(gè)引導(dǎo)層，同時(shí)該普通層縮進(jìn)成為“被引導(dǎo)層”，如圖所示，“圖層1”是被引導(dǎo)層，而“圖層3”是普通圖層。整理課件 三、課件動(dòng)畫素材的設(shè)計(jì)與制作引導(dǎo)層動(dòng)畫實(shí)例：整理課件制作過程：1、導(dǎo)入素材圖片，拖入畫布中。2、新建圖層，繪制無填充色的橢圓， 按住Ctrl+T，打開變形面板，設(shè)置旋轉(zhuǎn)角度為45度，點(diǎn)擊“重置選區(qū)和變形”按鈕，復(fù)制3個(gè)橢圓。3、新建圖形元件命名為“球”，繪制放射狀漸變填充的圓形。4、新建圖層，將“球”拖入畫布。5、添加“傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層”，將“圖層1”中的一個(gè)橢圓復(fù)制并粘貼到當(dāng)前位置，用橡皮擦擦掉一個(gè)小口，在第50幀插

12、入幀。6、在“球”所在圖層的第50幀插入關(guān)鍵幀，將球移動(dòng)到橢圓的開口處。并創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫。7、其他的球體動(dòng)畫做法類似。二、課件文字、圖形圖像素材的設(shè)計(jì)與制作整理課件 三、課件動(dòng)畫素材的設(shè)計(jì)與制作5.遮罩動(dòng)畫的應(yīng)用遮罩層上的對(duì)象可以看作是孔，透過孔可以看見被遮罩的層。在Flash中沒有一個(gè)專門的按鈕來創(chuàng)建遮罩層，遮罩層其實(shí)是由普通圖層轉(zhuǎn)化的。只要在某個(gè)圖層上單擊右鍵，在彈出菜單中選擇“遮罩層”，使命令的左邊出現(xiàn)一個(gè)小勾，該圖層就會(huì)生成遮罩層，“層圖標(biāo)”就會(huì)從普通層圖標(biāo)變?yōu)檎谡謱訄D標(biāo)，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”，在縮進(jìn)的同時(shí)圖標(biāo)變?yōu)?。如圖所示，其中“圖層2”為遮罩層，“圖層1

13、”為被遮罩層，“圖層3”為普通圖層。整理課件 三、課件動(dòng)畫素材的設(shè)計(jì)與制作遮罩動(dòng)畫實(shí)例：整理課件制作過程：導(dǎo)入所有的位圖到庫(kù)中。將第一幅位圖拖入舞臺(tái)，作為被遮罩層。新建圖層，第1幀到第20幀制作圓形由小到大，直至遮住全部位圖的補(bǔ)間形狀動(dòng)畫，將此層設(shè)置為遮罩層。新建圖層，拖入第一幅位圖，將其轉(zhuǎn)換為元件，降低其亮度，并將該層拖到最下面。在被遮罩層中插入關(guān)鍵幀，拖入第二幅圖片。在遮罩層中插入關(guān)鍵幀，第21幀到第40幀制作矩形從左到右，直至遮住全部位圖的補(bǔ)間形狀動(dòng)畫。在最下面的圖層插入關(guān)鍵幀，將第一幅圖放入其中。1.以此類推，制作其他切換效果。三、課件動(dòng)畫素材的設(shè)計(jì)與制作整理課件制作簡(jiǎn)易按鈕：四、按鈕

14、和菜單素材的設(shè)計(jì)與制作整理課件2、給按鈕元件添加動(dòng)作（1）應(yīng)用為按鈕添加動(dòng)作腳本模式如下：On(事件名稱)接收事件后觸發(fā)動(dòng)作執(zhí)行的程序；按鈕事件通常包含下列種狀態(tài)：press 在鼠標(biāo)指針經(jīng)過按鈕時(shí)按下鼠標(biāo)按鈕。release 在鼠標(biāo)指針經(jīng)過按鈕時(shí)釋放鼠標(biāo)按鈕。 releaseOutside 當(dāng)鼠標(biāo)指針在按鈕之內(nèi)時(shí)按下按鈕后，將鼠標(biāo)指針移到按鈕之外，此時(shí)釋放鼠標(biāo)按鈕。 rollOut 鼠標(biāo)指針滑出按鈕區(qū)域。 rollOver 鼠標(biāo)指針滑過按鈕。 dragOut 在鼠標(biāo)指針滑過按鈕時(shí)按下鼠標(biāo)按鈕，然后滑出此按鈕區(qū)域。 dragOver 在鼠標(biāo)指針滑過按鈕時(shí)按下鼠標(biāo)按鈕，然后滑出此按鈕，再滑回此按鈕

15、。 keyPress (key) 按下指定的鍵。 四、按鈕和菜單素材的設(shè)計(jì)與制作整理課件舉例說明：用按鈕控制影片的播放和停止。舉例說明：用按鈕控制影片的播放和停止。在播放按鈕上添加語句：在播放按鈕上添加語句：on(release)play();在停止按鈕上添加語句：在停止按鈕上添加語句：on(release)stop();四、按鈕和菜單素材的設(shè)計(jì)與制作整理課件（2）應(yīng)用為按鈕添加動(dòng)作）應(yīng)用為按鈕添加動(dòng)作 事件偵聽器也就是以前版本中的事件處理函數(shù)，是事件的處理者事件偵聽器也就是以前版本中的事件處理函數(shù)，是事件的處理者，負(fù)責(zé)接受事件攜帶的信息，并在接受到該事件之后執(zhí)行事件處理函，負(fù)責(zé)接受事件攜帶的

16、信息，并在接受到該事件之后執(zhí)行事件處理函數(shù)體內(nèi)的代碼。數(shù)體內(nèi)的代碼。 添加事件偵聽的過程有兩步：第一步是使用添加事件偵聽的過程有兩步：第一步是使用addEventListener()方法在事件目標(biāo)或者任何的顯示對(duì)象上注冊(cè)偵聽器函數(shù)，第二步是創(chuàng)方法在事件目標(biāo)或者任何的顯示對(duì)象上注冊(cè)偵聽器函數(shù)，第二步是創(chuàng)建一個(gè)事件偵聽函數(shù)。建一個(gè)事件偵聽函數(shù)。 在之前的語言版本中，常常使用在之前的語言版本中，常常使用on(press)或者或者onClipEvent(mousedown)等方法來處理鼠標(biāo)事件。而在中，統(tǒng)一使等方法來處理鼠標(biāo)事件。而在中，統(tǒng)一使用用MouseEvent類來管理鼠標(biāo)事件。在使用過程中，無

17、論是按鈕還是類來管理鼠標(biāo)事件。在使用過程中，無論是按鈕還是影片事件，統(tǒng)一使用影片事件，統(tǒng)一使用addEventListener注冊(cè)鼠標(biāo)事件。此外，若在類注冊(cè)鼠標(biāo)事件。此外，若在類中定義鼠標(biāo)事件，則需要先引入類。中定義鼠標(biāo)事件，則需要先引入類。四、按鈕和菜單素材的設(shè)計(jì)與制作整理課件MouseEvent類定義了類定義了10中常見的鼠標(biāo)事件，具體如下：中常見的鼠標(biāo)事件，具體如下：CLICK：定義鼠標(biāo)單擊事件：定義鼠標(biāo)單擊事件 DOUBLE_CLICK：定義鼠標(biāo)雙擊事件：定義鼠標(biāo)雙擊事件MOUSE_DOWN：定義鼠標(biāo)按下事件：定義鼠標(biāo)按下事件 MOUSE_MOVE：定義鼠標(biāo)移動(dòng)事件：定義鼠標(biāo)移動(dòng)事件M

18、OUSE_OUT：定義鼠標(biāo)移出事件：定義鼠標(biāo)移出事件 MOUSE_OVER：定義鼠標(biāo)移過事件：定義鼠標(biāo)移過事件MOUSE_UP：定義鼠標(biāo)提起事件：定義鼠標(biāo)提起事件 MOUSE_WHEEL：定鼠標(biāo)滾軸滾動(dòng)觸發(fā)事件：定鼠標(biāo)滾軸滾動(dòng)觸發(fā)事件 ROLL_OUT：定義鼠標(biāo)滑入事件：定義鼠標(biāo)滑入事件 ROLL_OVER：定義鼠標(biāo)滑出事件：定義鼠標(biāo)滑出事件四、按鈕和菜單素材的設(shè)計(jì)與制作整理課件的按鈕動(dòng)作不再直接添加到按鈕元件實(shí)例上，而是添加到幀，通過事件的按鈕動(dòng)作不再直接添加到按鈕元件實(shí)例上，而是添加到幀，通過事件偵聽器跟蹤鼠標(biāo)行動(dòng)偵聽器跟蹤鼠標(biāo)行動(dòng)對(duì)按鈕的操作事件，依靠偵聽器響應(yīng)事件對(duì)按鈕的操作事件，依靠偵聽器響應(yīng)事件。腳本模式如下：。腳本模式如下：/注冊(cè)偵聽器注冊(cè)偵聽器 按鈕實(shí)例名稱按鈕實(shí)例名稱. addEventListener(MouseEvent.鼠標(biāo)事件類別，鼠標(biāo)事件類別，偵聽器名稱偵聽器名稱)； /創(chuàng)建偵聽器函數(shù)創(chuàng)建偵聽器函數(shù) function 偵聽器名稱偵聽器名稱(evt:事件類型事件類型)：void 事件發(fā)生時(shí)的動(dòng)作事件發(fā)生