FLASH入門動畫C-)

教學目標：①知道FLASH軟件界面及簡單操作；

②會使用元件、時間軸等；

③會完成flash的第一個動畫---運動的小球。

工作任務:

任務一：運動的小球制作(一)

實踐操作：展示效果圖：

(這就是蓑們要做的第二個Flash作品。可別看它簡單，以后我們要制作千

變萬化的Flash電影，很多都會用到它所包含的技術呢。好吧，不多說了，

我們開始吧。)

運行Flash4,這時系統E經打開

了一個新文件。選菜單中的

lodify->Movie...(或按

:tr1)修改當前舞臺的屬性。我

>舞臺尺寸(Dimensions),

i示網格(Showgrid),網格

目(Grid),網格色和背景色

Ruler)等。我們將參數設置為左

1所示，在以藍色背景，長300

3寬50點的舞臺上制作動畫。

一般來說，在互聯網上播出的動

畫，每秒8—12幀的播放速度比較合適一些。

國a工作環境設置好以后，我們首先需要創建一個圖符(Symbol),以便調

?-----1用。按Ctrl-F8鍵進入建立圖符的選項窗口，給圖符起名叫ball,

|10串確定是圖形類(Graphics)后按確定按鈕。現在我們就進入了創建圖符

卬三］的編輯狀態。在繪圖工具欄中選橢圓工具。并將其下的參數設置為左

nisi圖所示。我們已經在上一章中詳細介紹過有關參數的設置問題，這里

就不再多說了。圖中的參數顯示我們將要繪制一個沒有輪廓線，且填

充色為桔黃漸近色的球形。桔黃漸近色不是系統自帶的顏色，不過我們可以

按照上一章中第七節所述方法新建這一顏色。在工作區里用鼠標繪制一個小

球。如果對所畫的小球不滿意，可以點選小球，按Delete鍵刪掉重畫，也可

以在小球上按鼠標右鍵，在彈出的菜單中選擇相應修改工具進行修改。

小球圖符做好后，點擊時間軸(Timeline)左上角的憧紅3I或右上角的￡1

回到主場景。按Ctr-L打開圖庫，發現里面已經有一個做好了的名為ball

的圖符。在預覽窗口中把該圖符拖動到工作區中如下左圖所示的位置。你也

可以通過菜單中View->Rulers(或按Ctrl+Alt+Shift-R)打開系統標尺精確

定位。我們同時還注意到時間軸的第1幀上的小圓圈已經由空心變成了實心，

表明該幀不再為空。

生時間軸第25幀點一下鼠標左鍵，該幀

處藍表示被選。按Ctrl-F6鍵插入一個關

建幀，點選小球，把它拖到舞臺的另一端,

1口上右圖所示。雙擊時間軸上的第1幀，

單出該幀的幀屬性對話框，如下圖所示。

點擊漸變(Tweening)標簽，在其下的

weening下拉菜單中選運動(Motion),按

主意：對于實例來說，只能進行運動漸變

為畫(MotionTweening),不能作形體漸

出動畫(ShapeTweening)。而對于形體

:Shape)來說，只能作形體漸變。

這時時間軸窗口的狀態如下圖所示，第1幀和第25幀之間出現了一個實線箭

頭，且背景變成淡紫色，表示這兩幀之間有一段運動漸變動畫。如果兩幀之

間出現了虛線，表示過渡不成功，需要重新查看每一個關鍵幀及其屬性。下

面我們來看一看效果：選菜單項Window-〉Controller,打開控制面板，按

播放鈕播放動畫，或者按下Ctrl-Enter另開窗口，以全屏預覽動畫，可以看

到小球從舞臺的左端勻速移動到右端，和本頁中的效果一樣，只不過本站網

頁的背景色與Flash電影工作環境的背景色相同，所以看不出來罷了。

Layer1/???I

問題探究：

做好了動畫不要忘記存盤，按Ctrl+S,在彈出的對話框中輸入存檔文件名，

確定，這時系統會把源文件用.fla格式存檔。如果這時在Flash中再次按下

Ctrl-Enter鍵，則系統會自動生成.swf的電影文件，可以用Flash電影播放

器直接觀看。

好了，這一節我們已經學會做一個最簡單也最重要的動畫了，好的開端是成

功的一半，我們慢慢會對Flash的強大功能體會更多的。下一節我們將對小

球動畫作繼續深入的探討。

知識拓展:

我們將在運動的小球的基礎上進一步加深對運動變形動畫的認識。(本節中

的幾個動畫基本上和上一節是相同的，只不過我們對實例的屬性，運動路徑

等適當做些變化，以便獲取不同的效果。

看出上面的動畫和上一節有什么不同嗎？是的，在小球運動的過程中漸漸消

失在了背景中。其實這個效果實現起來是非常容易的。運動的制作和上一節

一樣。點擊第25幀使處在舞臺最右端的小球被選中，用鼠標左鍵雙擊小球，

彈出實例屬性對話框，選擇顏色效果(ColorEffect)標簽，如下圖所示。在

顏色(color)下拉菜單選項中選中透明度(Alpha),在透明度輸入框中輸入百

分值0,或將其右邊的滑桿指針拖到最左端，使小球完全透明。點擊0K確定。

現在看一下效果，按Ctrl-Enter看到如上面所示結果。

InstanceProperties

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成該作品。

上機作業二：在作業一基礎上進行修改、更新。（要求：用不同方向，不同球體等）

上機作業三：（選做提高題）根據所學自由創作一作品。

教學反思：

FLASH入門動畫《二)

教學目標：①進一步鞏固使用元件、時間軸等；

②會使用運動漸變動畫、圖層、引導線等操作

③會完成flash的第二個任務——運動的小球(二)。

工作任務:

任務二：運動的小球制作(二)

實踐操作：展示效果圖：

上一耳的小球在運動的過程中大小發生了變化。要實現這一點，我們還

是在上一節做好的動畫的基礎上進行修改。在第13幀按F6插入一個關鍵幀,

如下圖所示。雙擊此關鍵幀發現漸變(Tweening)標簽下的漸變選項已經自動

設定為運動(Motion),點取消(Cancel)。用鼠標右鍵點擊此幀下的小球，在

彈出的菜單中選擇放縮(Scale),將小球縮小到一定程度就可以了。用

Ctrl-Enter查看結果同上。

■巴口151015202￡

Layer1

因為運動導向層是一個單獨的層，我們將在這個層上繪制小球將要走過

的路徑，所以這一節起我們開始接觸多個圖層的操作。建立導向層有多種方

法，一種是點擊時間軸窗口左下角耳在當前層上新建一個層。在該層上點

鼠標右鍵，在彈出的菜單中選擇導向(Guide),使其前面出現對號，這時從該

層左邊的符號看出它已經成為導向層。這時，按住Alt鍵，用鼠標左鍵點擊

小球所在圖層，使小球層與其上的導向層發生關聯，我們看到小球層向右縮

進，表示二者已產生關聯。還有一種建立導向層的方法是用鼠標右鍵點擊小

球所在層的名稱，在彈出的菜單中選擇增加運動導向(AddMotionGuide),

在小球圖層上出現新的導向層，小球圖層縮進顯示二者關聯。這時的時間軸

顯示應如下圖所示。

下面我們就在導向層中繪制一條路徑。為了避免對小球所在層進行誤操作，

點擊小球所在層上臼折對應的黑點，使該層被鎖定，不能被編輯。點擊導向

層第1幀，在繪圖工具欄選擇鉛筆工具，將其下方參數修改器中的鉛筆模式

按鈕變為理I,顏色選黃色，也可以選其它顏色，因為導向層在動畫播放中不

被顯示。然后在工作區畫一條如下圖所示的線。

■上而這條就是小球將要沿著運動的路徑。現在解除小球所

加以的鎖定，恢復該M的燈編輯狀態。在繪圖1文欄中選

［箭頭□I，帶其下方參數修改器的捕捉(Snup)按鈕選定為

［回狀態。點擊小球所在層的第1幀，點住小球中心附近符

■其拖動到路倒”二端，小球中心出現小刈卷I,'彳小球接近

路徑端點時，中心點自動捕捉到該端點，如下圖所示，這

樣我們就把小球放在了路徑的起始位置。同樣，我們再點擊小球所在層的第

25幀，將小球中心放置在路徑的另一端。現在，我們就完成了所有的工作。

用Ctrl-Enter看一下效果，是不是很不錯？

問題探究：

我們如何將本節所學的各種效果綜合起來使用，例如讓物體沿指定路徑運

動的同時發生縮放，旋轉及透明度上的變化等。下面，我們還將通過小球的

運動進一步了解如何設置一些重要參數，以獲得一些特殊效果

知識拓展：

前面我們通過小球的運動介紹了Flash中最基本的動畫一一運動漸變動畫，

這一節我們仍將繼續深入學習這種方式的動畫。首先我們一起來看一看上面

的例子是怎么做出來的。

這是一個跳動的球。我們先試著用前兩節中講過的方法做一下。首先選好舞

臺的大小，顏色等，在舞臺上用桔黃梯度色畫一個大小適中的圓球形。（注

意現在的這個圓球形是形體而不是實例，你可以對它進行重新填色，甚至可

以用箭頭工具選擇其中一部分區域進行操作，而實例則作為一個整體出現，

你只能對它做整體操作。這一點我們在上一章已經講過。）我們需要把它做

成一個圖符，以方便我們調用。選中這個圓球形，按F8鍵把它轉換成圖符，

在彈出的窗口中給這個圖符起名為ball,并確認是圖形類圖符，按回車確定。

這時圓球形外面出現一個方框，如右圖所示&表示小球已經成為一個實

例。現在小球位于時間軸的第1幀上，我們把小球拖動到舞臺的最上端，然

后在時間軸第18幀上按F6鍵插入一個關鍵幀，把實例小球從最上端拖動到

最下端，然后再在第36幀處按F6插入一關鍵幀，為了使小球在這一幀能回

到原位，我們可以把第1幀的內容復制到這一幀。在第1幀上點鼠標右鍵，

在彈出的菜單中選CopyFrames,或按快捷鍵Ctrl+AlLC,復制第1幀，然

后同樣在第36幀處點鼠標右鍵，選PasteFrames,或按快捷鍵Ctrl+Alt-P,

將第1幀的內容粘帖到這一幀上。可以看到在這一幀，小球又回到了起始位

置。時間軸的狀態應如下圖所示。

!?Layer1/???I

Label]Sound]ActionsTweening

F7Tweenscaling

Rotate：|Automatic

r~Orienttopathdirection

現在我們來看一下效果，如左圖

Synchronizesymbols

麻示。怎么好象和上面的結果不

「Snaptoguide

一樣，似乎看不出那種重力作用

的感覺，看來我們還有點工作沒有做完。雙擊時間軸第1幀，彈出幀屬性對

話框，選擇漸變（Tweening）標簽，在其下的選項中將Easing所對應的指針拖

動到最左端，或在右邊的輸入框中輸入TOO,如右圖所示，確定。然后，在

第18幀雙擊，把Easing所對應的指針拖動到最右端，或在右邊的輸入框中

輸入100。然后，我們再來看一下效果，按Ctrl-Enter全屏觀看，是不是和

我們需要的效果一樣了？

現在大家應該知道Easing選項的作用了吧。它的作用是在運動的過程中產生

速度上的變化，默認值為0,即為勻速運動。當Easing所對應的指針向左邊

移動時，也就是Easing值為負時，運動的物體做加速運動，相反，當Easing

所對應的指針向右邊移動時，也就是Easing值為正時，運動的物體做減速運

動。當Easing值的絕對值越大時，物體運動的加速度越大，物體運動時速度

變化也就越快。在小球下落的過程中，速度越來越快，所以我們把Easing的

值改為負值，注意在Easing值為TOO時，比較接近重力加速度。當小球彈

起時,速度越來越慢，因此Easing值為正。

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成該作品。

上機作業二：在作業一基礎上進行修改、更新。（要求：用不同引導線，不同運動

方向速度、不同球體等）

上機作業三：（選做提高題）根據所學自由創作一作品。

教學反思:

FLASH入門動畫《三）

教學目標：①進一步鞏固使用元件、時間軸、圖層、引導線等；

②會使用復雜運動漸變動畫等操作

③會完成flash的第三個任務——物理實驗小球撞擊。

工作任務：

任務三：物理實驗小球撞擊

實踐操作：展示效果圖：

下面我們做一個簡單的物理實驗的模擬。如上面所示，桔黃色的小球從空中

落下，落地瞬間與地上靜止的綠色小球發生碰撞，兩球均沿不同軌跡飛出界

面。以我們剛才做好的動畫為基礎，在時間軸窗口新增加一個層,命名為Green

Ball,注意該層上有鉛筆標志，表示正在編輯該層。我們用橢圓工具選綠色

梯度色繪制一個大小和桔黃色小球差不多的小球，并把它移動到桔黃色小球

下方偏右一點，以便桔黃色小球落地時正好與它接觸。在第18幀上按F6新

建關鍵幀，因為這時是與落地的桔黃色小球碰撞產生運動的起始位置。在第

36幀再按F6增加一個關鍵幀，并把綠色小球橫向右移出畫面。為了讓綠色

小球動起來，我們在第18幀雙擊，在彈出的幀屬性對話框中漸變標簽下，選

Tweening為Motion。確定后第18幀到第36幀之間會有一個實箭頭。這樣,

綠色小球的動畫部分就做好了。

下面我們設法讓桔黃色的小球在與綠色小

球碰撞后沿指定的路線飛出畫面。用鼠標右

鍵在時間軸窗口，桔黃色小球所在層點一

下，在彈出的菜單中選Addmotionguide,

新增一個導向層。這時導向層成為當前正在

編輯的層。我們在導向層上畫一條路徑。畫

好的結果應如左圖所示。繪制這條路徑的方

法有很多，一種方法是，可以用鉛筆工具或

直線工具畫路徑的直線部分，然后用橢圓工

具畫不填充的橢圓，用箭頭工具取其中一段

作為路徑的曲線部分。路徑畫好后，用鼠標

左鍵雙擊桔黃色小球所在層的第1幀，在彈出的幀屬性對話框中漸變

(Tweening)標簽下在捕捉到路徑(Snaptoguide)前的復選框中點一下使其被

選中，確定。同樣對第18幀進行相同的操作。回到第1幀，選擇箭頭工具(注

意箭頭工具的參數修改器中捕捉按鈕囪應處于按下狀態)，用鼠標左鍵點擊

桔黃色小球中心附近并把它拖動到路徑直線的最上端，見左圖。在接近端點

時，小球中心會自動吸附在端點上。在第18幀，把桔黃色小球拖動到路徑直

線的下端，在第36幀，拖動到曲線的末端。做好后，時間軸窗口的設置應如

下圖所示，綠色小球所在層位于桔黃色小球所在層上面還是下面無關緊要。

■我們用Ctrl-Enter來查看一下效果，如果發現桔黃色小球并沒有沿指定路線

移動，表明關鍵幀中小球的位置不對，未能真正處于路徑的端點，試著調整

有問題部分的關鍵幀中桔黃色小球的位置。一次不行，多調整幾個就行了。

現在我們就可以欣賞這一段稍微復雜點的動畫了。是不是很有點成就感？下

一節中我們將從另一個方面講解運動漸變動畫的用法。

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成該作品。

上機作業二：在作業一基礎上進行修改、更新。（要求：用不同引導線，不同運動

方向速度、不同球體等）

上機作業三：（選做提高題）根據所學自由創作一作品。

教學反思：

FLASH入門動畫《四）

教學目標：①進一步鞏固使用元件、時間軸、圖層、引導線等；

②會使用復雜運動漸變動畫中旋轉運動等操作

③會完成flash的第四個任務——旋轉的風車

工作任務：

任務四：旋轉的風車

實踐操作：展示效果圖：

這一節我們來制作一個旋轉的風車，從制作中我們不僅要學習運動漸變動畫

的另一種形式：旋轉動畫，而且還要練習用箭頭工具對對象進行修改的方法。

首先要打開一個新文件。現在我們先來畫風車的一個葉片。選擇繪圖工具欄

中的矩形工具，把邊線屏蔽掉，填充色選黃色，在工作區中間畫出一個矩形

如下圖一所示。選箭頭工具，將矩形左上角的頂點向右拖動直到與右上角的

頂點重合，如圖二所示。下面我們將對三角形作進一步的加工。用鼠標分別

點住三角形的兩條直角邊拖出一個弧形，調整使弧形連續，如圖三所示。然

后再對三角形的斜邊加工，使它也呈現一定的弧形，如圖四所示。選中葉片,

按F8將其轉換為圖符，在彈出的圖符屬性框中將葉片命名為yepian,確定

是圖形類圖符后回車。這時葉片就變成了實例。按Ctrl-L打開圖庫窗口，為

了使葉片旋轉時不致發生偏離的情況，我們需要把葉片調整到合適的位置，

雙擊圖庫窗口中預覽窗口的葉片，進入圖符編輯狀態，如圖五所示，把葉片

移動到圖示位置，使其尖端指向十字定位中心。現在我們就做好了一個葉片

了。

圖五

然后，我們要利用這個葉片做出風車其余

的葉片。選Flash菜單項Window->

Inspectors->Transform,打開變形監

控面板，如左圖所示。監控面板可以幫助

我們精確地定義對象以及精確地旋轉放

縮對象。選中已經做好的葉片，按Ctr”C

復制，再按Ctrl+Shift-V將葉片復制在

原來的位置上。在變形監控面板上的旋轉

(Rotate)項下輸入45,表示將復制的葉

片順時針旋轉45度。點應用(Apply),發

現新的葉片出現在原有葉片順時針45度

位置，如下左圖所示。用同樣的方法再復

制出6個葉片，組成八個葉片的風車。注

意，復制其他葉片時，每按一個

Ctrl+Shift-V后將變形監控面板中的旋

轉角度值多加45度。現在我們用鼠標拉出一個大框把這八個葉片全部套住，

再按F8鍵把這八個葉片轉換成一個圖符，起名叫fengche。可以看到，現在

八個葉片成了一個整體，其中心為十字定位符，見下圖右。

FraaeProperties風車已經做好了，我們現在該

Label|Sound|ActionsTweening讓它動起來了。在第30幀按

F6插入-一個關鍵幀。雙擊第1

Tweening：［Motion

3幀彈出幀屬性對話框，在漸變

廠Tweenscaling標簽下Tweening選擇項目中

Rotate：IClockwise三|i-ttiime;選Motion作運動漸變動畫。在

旋轉(Rotate)項目中選擇順時

針(Clockwise),并將隨后的旋轉圈數設為1。這樣，風車將在第1幀到第30

幀之間順時針旋轉1圈。現在按Ctrl-Enter來看一看效果吧，怎么樣，還不

錯吧。

知識拓展:

現在我們對已經做好的風車動畫做一個加工，以便生成如上圖所示的效果。

在第60幀處按F6插入一關鍵幀，在第30幀雙擊鼠標左鍵，在彈出的幀屬性

對話框中漸變標簽下，將Tweening設置為Motion,并將Rotate設為

Clockwise,其后的次數欄中填1次。該幀屬性同第1幀，如上圖幀屬性對話

框面板所示。現在風車將在第1到60幀的時間里順時針旋轉2圈。下面我們

對第30幀做一些修改。選擇時■間軸上第30幀，用鼠標右鍵點擊風車實例，

在彈出的菜單中選擇Scale,將風車縮小一些。隨后，雙擊該風車實例，進

入實例屬性面板，在ColorEffect標簽下Color選項中選Tint,設置如下

圖所示。

這樣我們就把大小的顏色變化設置完成了，最后的結果就如上圖所示。大家

也可以想些別的花樣來做一做，這樣可以盡快地熟練掌握運動漸變動畫的實

現過程。

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成該作品。

上機作業二：在作業一基礎上進行修改、更新。（要求：用不同引導線，不同旋轉

運動方向速度，不同形狀葉片等）

上機作業三：（選做提高題）根據所學自由創作一作品，如地球的旋轉等。

教學反思:

FLASH入門動畫《五）

教學目標：①進一步鞏固使用元件、時間軸、圖層、引導線等；

②會懂得運動漸變動畫和形體漸變動畫的區別，會使用形體漸變動畫

的操作技巧

③會完成flash的第五個任務——延伸的直線。

工作任務：

第五節延伸的直線

實踐操作：展示效果圖：

這一節我們將來學習漸變動畫的另一種形式，即形體漸變（Shapetweening）

動畫。我們先來學習做上面這個直線伸長的簡單動畫，之后我們稍加變化，

做一個更有趣的直線伸長動畫。

用Flash新建一個文件，按Ctrl-M對電影的屬性作一個調整，將其設置為狹

長的矩形（如寬Width設為400,高Height設為50）,將背景色設為藍色。

用鉛筆工具或直線工具畫一條橫向的短線，長度如右圖所示：口。注意要畫

一條筆直的橫線，可以按住Shift鍵，再用鉛筆工具或直線工具橫向拖動鼠

標即可，因為按住Shift鍵以后，線條只能沿水平，豎直及45度角方向變化。

然后我們在第40幀上按F6插入一關鍵幀，或按F7插入一空幀(當在這一幀

上繪制圖形后，該幀會成為關鍵幀)。確定這一幀為當前幀，我們將在這一幀

上繪制一條更長的直線，有兩種方法可以實現這一點。

一種是按下F7插入空幀后，點擊時間軸窗口下方洋蔥皮按鈕的左邊第一個，

即母這時我們發現第1幀的短橫線以灰色顯示出來。我們就以它為基準，

用鉛筆工具繪制一條長直線，直線左端與短橫線左端對齊。

另一種方法要簡單一些，在第40幀按下F6插入一關鍵幀后，第40幀會具有

和第1幀相同的內容，即一條短橫線，我們只需要對它加一下工就可以了。

選中繪圖工具欄中的箭頭工具，移動鼠標到短橫線的右端，鼠標形狀如右圖：

1點住鼠標左鍵并向右拖動I,直到直線足夠長為止。

選用這兩種方法之一做好第40幀的直線。下面我們就要設置幀屬性讓直線動

起來。用鼠標左鍵雙擊時間軸上的第1幀，在彈出的幀屬性對話框中選漸變

(Tweening)標簽。對其下的Tweening選項進行設置，選擇Shape如下圖所示,

回車確定。這時在第1幀和第40幀之間出現一個實箭頭，背景變為淡綠色，

表明是形體漸變動畫。

按Ctrl-Enter看一下效果，應該和上面所示一樣的。

知識拓展:

現在我們來變個花樣，做一個環繞矩形四條邊伸長的直線。大家能猜一猜這

個動畫是怎么做的嗎？其實有了本節開頭直線伸長動畫的基礎，這個動畫一

點也不難做。

我們對剛剛做好的直線伸長的動畫加一加工。首先按Ctrl-M對電影屬性作一

個調整，將其高度(Height)設置為150。為了縮短動畫時間，我們按下Ctrl

鍵把鼠標移到第40幀上,發現鼠標這時變成黑色，如右圖所示：

_3_0____3_5____40

*卜o把第40幀向左拖動到第20幀位置松開鼠標，這時動畫時間

縮短了一半，發現直線延伸變快了。

點時間軸窗口下的日斯建一個層，在新層的第21幀按F6插入一個關鍵幀。

按下洋蔥皮按鈕同這時原先層上的直線用灰色顯示出來:

我們從這條線的最

右端開始向下畫一條短豎線：在新層的第30幀按F6插入一個關

鍵幀，該幀具有和第21幀相同的內容。用上面講過的方法把這一幀的豎線拉

長到合適的長度，同上面動畫中的豎線長度差不多。然后，雙擊第21幀彈出

幀屬性對話框，按剛才講過的方法把Tweening設置為形體漸變動畫。按

Ctrl-Enter看一下效果，應如下圖所示：

我們發現這并不是我們想得到的結果，我們希望直線不斷延伸，而不是分段

延伸。得到這個顯示結果是因為橫向直線延伸的動畫在第20幀以后就終止

了，在第21幀到第30幀之間，也就是豎線延伸時橫向直線層上沒有內容。

為了彌補這一點，我們在橫向直線延伸動畫所在層的第30幀上按下F5鍵，

使該層在第21幀到第30幀之間仍保留第20幀，也就是最近的一個關鍵幀上

的內容，這樣在第21幀到第30幀之間，橫向的直線將一直被顯示出來。再

按CtrbEnter看一下效果，發現直線先是橫向延伸，到了右端頂點后轉為豎

向延伸，這才是我們需要的結果。

現在再做其它兩條邊的直線延伸就變得很簡單了，再新建兩個層，一條邊一

個，方法和上面講過的一樣，我在這里就不再多說了。做好后的時間軸應如

下圖所示。

好了，欣賞一下我們做的動畫吧。體會一下運動漸變動畫和形體漸變動畫的

區別。下一節課中我們還將繼續介紹形體漸變動畫其它的應用。

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成該作品。

上機作業二：在作業一基礎上進行完成矩形

上機作業三：（選做提高題）根據所學自由創作一作品,不同形狀直線的延伸，如三

角形，圓形等。

教學反思：

FLASH入門動畫《六）

教學目標：①進一步通過字符的變形動畫來認識形體漸變動畫的作用；

②會使用不同字符形體漸變動畫的操作技巧

③會完成flash的第六個任務——變幻的字符。

工作任務：

任務六：變幻的字符

實踐操作：展示效果圖：

這一節我們將通過字符的變形動畫來認識形體漸變動畫的作用。對于這類變形

動畫，只能用形體漸變來實現，用運動漸變是做不到的。

首先，我們新建一個電影文件，按Ctrl-M修改電影屬性，使其寬度和高度均

為100,背景為藍色。選擇繪圖工具欄中的文字工具同，把鼠標移到電影文件

中點一下，會出現一個文字輸入框11,選擇好字體，字號，設定顏色為黃色,

輸入字母F,選擇箭頭工具，這時字母F的周圍出現一個陰影方相,表示

該字母已經成為一個集合體。我們在這個字母上點鼠標右鍵，在彈出的菜單上

選放縮(Scale),這是F周圍出現放縮手柄我們把這個字母放大到和上

面動畫中字母大小差不多。

在時間軸的第12幀點鼠標左鍵，按F6插入一關鍵幀，這一幀的內容和第1幀

--樣。雙擊這一幀中的字母F,進行字符編輯模式，我們把字母F替換成字母

L。用同樣的方法，分別在第24幀，第36幀，第48幀，第60幀插入關鍵幀,

并把相應的字母變成A,S,H,Fo

因為要制作的是形體漸變動畫，我們首先要把已經集合了的字符打散成形體。

選擇第1幀，按Ctrl-B把字母F打散：Bo然后依次選擇第12,24,36,48

和60幀按Ctrl-B把字母L,A,S,H,F分別打散。現在就可以做動畫了,在

第1幀上雙擊鼠標左鍵，在彈出的幀屬性對話框中選漸變標簽，其下的

Tweening選項選Shape,回車確定。然后分別對第12幀，24幀，36幀及48

幀如此操作。最后的時間軸窗口應如下圖所示：

現在我們按Ctrl-Enter預覽一下效果，應如上面的動畫所示。這樣的字符變

形很簡單，但是我們總覺得上面的這個動畫中，字符變形有點沒有規則，變幻

得有些莫名其妙。那是因為在形體漸變動畫中，如果用戶沒有指定變形規則的

話，Flash將自動為待變形的形體設置一些關鍵點。形體漸變動畫實際上就是

關鍵點位置的變化，形體其余部分的變化可以通過插值的方法計算出來。在

Flash中提供了一種人為干預變形效果的方法，就是設置提示點(Hints),通

過指定相應提示點間的變化方法可以指定整個形變的過程。下面我們用具體的

實例來說明。

以字母A變S的過程為例，因為沒有設置提示點時，這個變形過程顯得比較凌

亂。先按Ctrl+Alt-H打開提示點的顯示。選擇第24幀,按Ctrl-H加入一提

示點，以圖一中紅色的小圓圈表示，a用來標識提示點。看一看第36幀，發

現字母S上也有一個對應的提示點，見圖二。回到第24幀，把提示點a拖動

到字母A的右下角，如圖三所示，再到第36幀，把提示點a放在如圖叫所示

位置。這時我們發現提示點變綠了，回到第24幀，這時提示點由紅色變成了

黃色，見圖五，表明提示點的設置正確。

圖一圖二

如果提示點仍是紅色，說明提示點位置設置不正確，多調整兒次就會好了。用

同樣的方法，我們可以再設置一到多個提示點，如上圖六和七，我們又設置了

一個提示點b,這樣就可以獲得比較好的變形效果。左圖所示為加入與未加入

提示點的字符變形對比。我們可以看出，加入了提示點后字母的變形似乎更有

規則一些。

知識拓展：（效果圖展示）

上面的這個動畫實際上就是這兩節中我們所學的形體漸變動畫的一個綜合運

用，在變形的過程中還有位置和顏色的變化。也許大家一看就知道是怎么做的

了，我就不再多說了，只簡單提兩句。在每一個關鍵幀上把相應的字母向右拖

動一段距離，并使用油漆桶工具用不同的顏色填充就行了。大家有興趣，可以

自己動手做一做看。

當然形體漸變動畫不僅僅是作用于文字，所有的形體都適用。所以我們也可以

把文字變形的動畫擴展到兒何圖形的變化，例如可以把圓形變成三角形，再變

成正方形等，大家可以發揮自己的想象力，多動手練一練，一定會慢慢熟練起

來，并創作出很好的作品的。

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成該作品。

上機作業二：在作業-基礎上進行修改，變成漢字等

上機作業三：（選做提高題）根據所學自由創作一作品，我們也可以把文字變形的

動畫擴展到幾何圖形的變化，例如可以把圓形變成三角形，再變成正方形等，大

家可以發揮自己的想象力。

教學反思：

FLASH入門動畫《七）

教學目標：①進一步通過文字的輸入和輸出實例，掌握靜態、動態及輸入文本的

使用；

②會制作簡單按鈕及簡單腳本的編寫；

③會完成flash的第七個任務——文字的輸入與輸出。

工作任務：

任務七：文字的輸入與輸出

實踐操作：展示效果圖:

這節我們要來介紹文字的輸入和輸出方法，這是Flash中的一-項重要功能，也

是我們認識Flash交互性的基礎。大家試著在上面的Flash電影下面的文本框中

輸入一段文字，然后回車或點“確定”按鈕，看一看有什么效果。再點一點“清

除”鍵呢？要實現文本的輸入，就要用到繪圖工具欄中的文字工具，我們先把

輸入框做好。點擊工具欄中國，選中文字工具，在下面的參數修改器中設置好

用于輸入的文字字體，字號，顏色以及對齊方式等項，不要忘記一定要點選最下

面的囪，這個按鈕用于設置文本域。在場景中下方用鼠標拉出一個文字框用作

輸入，寬度大約比所選字寬稍大一點。然后我們要對所畫的輸入文本框的屬性做

一點調整。在文本框上點鼠標右鍵，在彈出的菜單中選最下面的“屬性”

(Properties...),進入文本域屬性設置面板。如下圖所示，在變量名(Variable)

后填“input”,并選中第一項Drawborderandbackground,這樣就會顯示文

本域的背景和邊界。設置變量名是為了方便我們今后的調用。現在按回車確定。

輸出文本框的做法與輸入框相同，我們還和剛才一樣，在文字工具下用其參數修

改器為要輸出的文字設置字體，字號，顏色等，注意要保證團按下，在剛才的

輸入框上面拉出一個寬一些的文本域用作輸出。用鼠標右鍵點這個區域選“屬性”

進入文本域屬性設置對話框。將Variable設置為“Output"，再將Options中的

選項設置為下圖所示。(關于每個項目的含義和設置我們將在本節的后面部分詳

細介紹。)這樣我們就將輸出文本域設置成了有邊界和背景，允許多行輸出并自

動換行以及禁止編輯等屬性。

下面我們還需要做兩個按鈕，分別用來輸入和清除文字。因為是演示，所

以我們把按鈕做得簡單些，你也可以直接調用Flash中已經做好了的按鈕。

按Ctr『F8新建-一個圖符，給圖符起名為Button,并將圖符的類型設置為

Buttono進入圖符編輯模式后，用矩形工具拉出一個矩形，我們還可以加

入圓角并修改顏色使它更象一個按鈕。注意到我們所繪制的圖形都是在按

鈕的UP幀下，為了簡單起見，我們只做這一幀。

返回場景中，按Ctrl-L打開圖庫窗口，分兩次從預覽窗口把按鈕拖動到

輸入文本框的下面并排放置，用文字工具在兩個按鈕上分別寫上“確定”

和'‘清除"，如上面的電影所示。

下面的步驟要稍微難理解一些，因為我們要用到actions為按鈕加入一些

動作，這樣當點擊按鈕后才能執行相應的操作。actions屬于Flash的高

級技術，今后我們會重點介紹的。在這里，我們只需要有個大概的印象和

認識就行了。

用鼠標左鍵雙擊“確定”按鈕，彈出實例屬性對話框，注意到按鈕類實例

比圖形類實例多了--項設置，就是Actions。點選Actions標簽，點11為

按鈕增加動作，在下拉菜單中選OnMouseEvent,即設置鼠標對事件的響

應。然后在出現的選項框中選Release和KeyPress,并在KeyPress后

的輸入框中按?下回車鍵。這樣我們就把按鈕將要響應的鼠標事件設置好

了，即當按鈕被釋放或按下回車鍵后發生動作。

Definition|ColorEffectActions

ActionsOn(Release,Key：<Enter>)

ease.Key：<CEnter>)Event：FPress

SetVariable："output"=inpu<“Release

EndOnReleaseOutside

ro

-V

roetr

-u

roV

etr

r-

ou

然后，我們將進一步指定在這些事件產生后如何進行操作。再點一下國,

在菜單中選SetVariable,我們在右邊的變量名（Variable）一欄中填入

output,在下面的值(Value)一欄填入inputo注意必須把值右邊的等價方

式按鈕設為三J，表示當按鈕按下時，output中應該具有和input域中相

同的內容，即二者的值相同。如果選庵！1,表示字串內容相同，這時無論

你在文本輸入框中輸入任何文字，在按下確定按鈕后，輸出框中只會出現

input這幾個字符。同時我們注意到在這兩種等價方式下，表達式的寫法

也不相同。

同樣，雙擊清除按鈕，我們也為它設置動作。它的Actions設置如下所示。

表示鼠標在該按鈕上釋放時，將output和input里的內容全部清空。

Definition|ColorEffectActions

Actions

On(Release)

SetVariable：*output

SetVariable：”Input”

EndOn

這樣我們就把這個文字輸入和輸出的演示做好了。

知識拓展：(效果圖展示)

怎么樣，做的這個文字輸入輸出演示比上面那個漂亮多了吧。大家想一

下，如何利用我們前面學過的知識生成這樣的效果。這個效果很容易實

現的，與上面那個動畫最大也最主要的差別是輸入和輸出文本域設置了

邊框和背景色，這使得畫面靚麗了許多。

其實，只是利用了層的技術造成了一個假象罷了。我們還用上面做好的

動畫為例，在兩個文本域上分別點鼠標右鍵，在彈出的文本域屬性設置

框中把Drawborderandbackground前的對勾去掉，如右圖所示

Options：FDrawborderandbackground。這樣在場景中效果應如下圖所示,

文本域的邊框和背景不再顯示。

新建一個層，把它拖動到原來層的下面，并命名為Background。在該層

上用矩形工具選好邊框和背景色繪制出兩個大小和位置分別與輸出輸入

框均相同的矩形來，如下圖所示。

這樣，文本域就有了邊框和背景色了。然后，我們再給按鈕上上漸進色,

再加些文字點綴就得到上面的效果了。怎么樣，不難吧。

附：文本域屬性對話框中各項含義解釋

Drawborderand

顯示文本域的邊框和背景

background

用戶鍵入的任何字符均以*號表示，且文字不能復

Password

制，剪切，從而得到保密

Multiline允許文本以多行方式出現

Wordwrap使文本在到達右邊界時自動換行

Restricttextlengthto限制用戶文本輸入的最大字符數

Disableediting防止用戶改變文本域的內容，使文本域不能被編輯

Disableselection使文本域中的內容不能被選擇

可以選擇只保存字體的輪廓，或指定的文字，符號等，

Outlines

適當選用可大大減小Flash文件的大小

作業練習：

上機作業一：按照教師所展示的效果圖模仿完成第一個作品。

提高作業：在作業一基礎上進行修改，完成第個二個作品。

教學反思：

FLASH入門動畫《八）

教學目標：①進一步通過按鈕制作實例一，掌握按鈕元件使用；

②會制作簡單按鈕；

③會完成flash的第八個任務——按鈕制作（一）。

工作任務：

任務八：按鈕制作(一)

實踐操作：展示效果圖:

這一節，我們來學習按鈕的制作方法。在上一節中，我們曾經做過一個簡

單的按鈕，但是很不全面，現在我們就來學習一個完整按鈕的制作過程。

新建一個文件，按Ctrl-F8創建圖符，命名新圖符為Button,并在下面的

行為(Behavior)選項中選按鈕(Button),確定。這樣我們就進入了按鈕的

編輯窗口。注意這時時間軸上只有四幀,如右圖所示：

UyOver,Down|Hit|

,二tlo這四幀的含義我們在前面的第一章中已經詳細介

紹過。

首先我們來畫Up幀上的內容，也就是正常狀態下按鈕的外觀。選繪圖工

具欄中的矩形工具，在編輯窗口中間拉出一個不帶邊線的矩形來，為了美

觀起見，也可以選參數修改器中的圓設置圓角。用顏料桶工具回選中深

藍色，在矩形上點一下，矩形這時以深藍色填充。選文字工具，設置適當

的字體，顏色，字號等，在矩形中間寫上“按我”。選箭頭工具，在剛剛

輸入的文字上點鼠標右鍵，在彈出的菜單中選放縮(Scale)。我們對文字

進行放縮處理，使它排放在深藍色矩形的合適位置。

Up幀下的內容已經做好了，我們現在再來做Over幀的內容，也就是鼠標

滑過按鈕表面時按鈕的外觀。在Over幀上用鼠標左鍵點一下，并按F6把

這一幀設為關鍵幀，這時該幀具有和Up幀相同的內容。選擇顏料桶工具,

選中灰綠色，用顏料桶在矩形上邊線附近點一下，注意點中間的文字不會

有效果，這時矩形框填充灰綠色。選擇箭頭工具，雙擊矩形中間的文字，

進入文字編輯模式，改變文字工具參數修改器中的字號和顏色，并在文字

輸入框中輸入“我會變色”。這樣，我們乂做好了按鈕的第2幀。

Down這一幀的做法和前兩幀相同，先用F6在這一幀插入一關鍵幀，然后

一方面用顏料桶工具選黃色填充矩形，另一方面用箭頭工具雙擊矩形中間

的文字部分，在文本編輯狀態下改為“再變一次”。

最后一幀是Hit幀。它的作用是定義按鈕對鼠標做出反應的區域。一般情

況下這一幀可以省略掉，但對于某些特殊情況，你可能會需要為按鈕指定

對鼠標做出響應的特殊區域，這時這一幀就很關鍵了。按下F6插入關鍵

幀，把文字部分選中刪除掉就行了，這樣就設定對鼠標響應的區域就是這

個矩形區域。

這四幀全部設置好以后。我們點時間軸窗口左上角的魚與U回到主場

景中，按Ctrl-L打開圖庫窗口，從它的預覽窗口中把剛才做好的按鈕拖

到工作區中。按Ctrl-Enter觀看一下效果，應該和我上面的按鈕差不多。

知識拓展：（效果圖展示）

下面我們玩大一點，做一個比較逼真一些的按鈕。按鈕的樣子就如上面所

示，怎么樣，還不算太差吧。其實做這個按鈕也不難，幸運鳥之前也從來

沒有做過按鈕，這次破例做了一次竟然只用了半個小時就做好了，相信大

家不會比我差，我也會把制作的步驟說得盡量詳細一些的。

事實上，要做一個逼真的按鈕，最關鍵的不是制作方法，而是對光影效果

的掌握。如上圖所示，現在按鈕處在正常狀態下，也就是對應著按鈕里的

Up幀。大家一看就知道，這個按鈕的外觀實際上是由幾個圖片組合在一起

的。沒錯，我們現在把組成按鈕外形的兒個圖形類圖符分離開來，大家就

更清楚了。下圖所示就是在按鈕正常狀態下，組成按鈕外觀的三個圖符，

從左到右按它們在按鈕中的位置排列。當它們三個疊在一起時，由于各部

分光強和陰影效果的反差，就形成了上圖所示的樣子。

我們先來看一看位于最上面的這個桔黃色圓盤是怎么做的。其實這也是由

兩個形體組成的，見下圖。按下Ctrl-F8,新建一個圖符，命名為top,

并確認是圖形類圖符后回車。在該圖符的編輯模式中，我們先用橢圓工具

出除邊線，選棕黃漸進色，拉出一個圓球來，注意在繪制圓球前按下Shift

鍵，這樣保證拉出的是正圓而不是橢圓。繪制好以后，我們用顏料桶工具，

還選用剛才的棕黃漸進色在球的右上方點一下，這樣就把高亮點移到了球

的右上方，如下面的右圖所示。背景球做好以后，我們點時間軸下方的目

新建一個層。選中新層的第一幀，用橢圓工具去除邊線，選桔黃色按住

Shift鍵拉出一個比剛才的球小一圈的圓來。我們可以在這個桔黃色的圓

上點鼠標右鍵，用菜單中的Scale命令調整它的大小。然后，我們用鼠標

或方向鍵把圓移到球的中間，讓它們的圓心位于同一位置，因為圓所在的

層位于球所在層的上面，所以圓也位于球的上面。當然，為了更真實一些，

這個桔黃色的圓實際也是用漸進色填充的，只不過色彩上變化不明顯罷