flash教案flash入門動畫_第1頁
flash教案flash入門動畫_第2頁
flash教案flash入門動畫_第3頁
flash教案flash入門動畫_第4頁
flash教案flash入門動畫_第5頁
已閱讀5頁,還剩37頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

FLASH入門動畫(一)教學(xué)目標(biāo):①知道FLASH軟件界面及簡單操作;②會使用元件、時間軸等;=3\*GB3③會完成flash的第一個動畫——運(yùn)動的小球。工作任務(wù):任務(wù)一:運(yùn)動的小球制作(一)實踐操作:展示效果圖:(這就是我們要做的第一個Flash作品??蓜e看它簡單,以后我們要制作千變?nèi)f化的Flash電影,很多都會用到它所包含的技術(shù)呢。好吧,不多說了,我們開始吧。)運(yùn)行Flash4,這時系統(tǒng)已經(jīng)打開了一個新文件。選菜單中的Modify->Movie...(或按Ctrl-M)修改當(dāng)前舞臺的屬性。我們可以修改播放速度(FrameRate),舞臺尺寸(Dimensions),是否顯示網(wǎng)格(Showgrid),網(wǎng)格點間距(Grid),網(wǎng)格色和背景色(Colors)以及選用何種度量單位(Ruler)等。我們將參數(shù)設(shè)置為左圖所示,在以藍(lán)色背景,長300點,寬50點的舞臺上制作動畫。一般來說,在互聯(lián)網(wǎng)上播出的動畫,每秒8-12幀的播放速度比較合適一些。

工作環(huán)境設(shè)置好以后,我們首先需要創(chuàng)建一個圖符(Symbol),以便調(diào)用。按Ctrl-F8鍵進(jìn)入建立圖符的選項窗口,給圖符起名叫ball,確定是圖形類(Graphics)后按確定按鈕?,F(xiàn)在我們就進(jìn)入了創(chuàng)建圖符的編輯狀態(tài)。在繪圖工具欄中選橢圓工具。并將其下的參數(shù)設(shè)置為左圖所示。我們已經(jīng)在上一章中詳細(xì)介紹過有關(guān)參數(shù)的設(shè)置問題,這里就不再多說了。圖中的參數(shù)顯示我們將要繪制一個沒有輪廓線,且填充色為桔黃漸近色的球形。桔黃漸近色不是系統(tǒng)自帶的顏色,不過我們可以按照上一章中第七節(jié)所述方法新建這一顏色。在工作區(qū)里用鼠標(biāo)繪制一個小球。如果對所畫的小球不滿意,可以點選小球,按Delete鍵刪掉重畫,也可以在小球上按鼠標(biāo)右鍵,在彈出的菜單中選擇相應(yīng)修改工具進(jìn)行修改。小球圖符做好后,點擊時間軸(Timeline)左上角的或右上角的回到主場景。按Ctrl-L打開圖庫,發(fā)現(xiàn)里面已經(jīng)有一個做好了的名為ball的圖符。在預(yù)覽窗口中把該圖符拖動到工作區(qū)中如下左圖所示的位置。你也可以通過菜單中View->Rulers(或按Ctrl+Alt+Shift-R)打開系統(tǒng)標(biāo)尺精確定位。我們同時還注意到時間軸的第1幀上的小圓圈已經(jīng)由空心變成了實心,表明該幀不再為空。在時間軸第25幀點一下鼠標(biāo)左鍵,該幀變藍(lán)表示被選。按Ctrl-F6鍵插入一個關(guān)鍵幀,點選小球,把它拖到舞臺的另一端,如上右圖所示。雙擊時間軸上的第1幀,彈出該幀的幀屬性對話框,如下圖所示。點擊漸變(Tweening)標(biāo)簽,在其下的Tweening下拉菜單中選運(yùn)動(Motion),按確定按鈕。注意:對于實例來說,只能進(jìn)行運(yùn)動漸變動畫(MotionTweening),不能作形體漸變動畫(ShapeTweening)。而對于形體(Shape)來說,只能作形體漸變。這時時間軸窗口的狀態(tài)如下圖所示,第1幀和第25幀之間出現(xiàn)了一個實線箭頭,且背景變成淡紫色,表示這兩幀之間有一段運(yùn)動漸變動畫。如果兩幀之間出現(xiàn)了虛線,表示過渡不成功,需要重新查看每一個關(guān)鍵幀及其屬性。下面我們來看一看效果:選菜單項Window->Controller,打開控制面板,按播放鈕播放動畫,或者按下Ctrl-Enter另開窗口,以全屏預(yù)覽動畫,可以看到小球從舞臺的左端勻速移動到右端,和本頁中的效果一樣,只不過本站網(wǎng)頁的背景色與Flash電影工作環(huán)境的背景色相同,所以看不出來罷了。問題探究:做好了動畫不要忘記存盤,按Ctrl+S,在彈出的對話框中輸入存檔文件名,確定,這時系統(tǒng)會把源文件用.fla格式存檔。如果這時在Flash中再次按下Ctrl-Enter鍵,則系統(tǒng)會自動生成.swf的電影文件,可以用Flash電影播放器直接觀看。好了,這一節(jié)我們已經(jīng)學(xué)會做一個最簡單也最重要的動畫了,好的開端是成功的一半,我們慢慢會對Flash的強(qiáng)大功能體會更多的。下一節(jié)我們將對小球動畫作繼續(xù)深入的探討。知識拓展:我們將在運(yùn)動的小球的基礎(chǔ)上進(jìn)一步加深對運(yùn)動變形動畫的認(rèn)識。(本節(jié)中的幾個動畫基本上和上一節(jié)是相同的,只不過我們對實例的屬性,運(yùn)動路徑等適當(dāng)做些變化,以便獲取不同的效果??闯錾厦娴膭赢嫼蜕弦还?jié)有什么不同嗎?是的,在小球運(yùn)動的過程中漸漸消失在了背景中。其實這個效果實現(xiàn)起來是非常容易的。運(yùn)動的制作和上一節(jié)一樣。點擊第25幀使處在舞臺最右端的小球被選中,用鼠標(biāo)左鍵雙擊小球,彈出實例屬性對話框,選擇顏色效果(ColorEffect)標(biāo)簽,如下圖所示。在顏色(color)下拉菜單選項中選中透明度(Alpha),在透明度輸入框中輸入百分值0,或?qū)⑵溆疫叺幕瑮U指針拖到最左端,使小球完全透明。點擊OK確定?,F(xiàn)在看一下效果,按Ctrl-Enter看到如上面所示結(jié)果。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:在作業(yè)一基礎(chǔ)上進(jìn)行修改、更新。(要求:用不同方向,不同球體等)上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品。教學(xué)反思:FLASH入門動畫(二)教學(xué)目標(biāo):①進(jìn)一步鞏固使用元件、時間軸等;②會使用運(yùn)動漸變動畫、圖層、引導(dǎo)線等操作=3\*GB3③會完成flash的第二個任務(wù)——運(yùn)動的小球(二)。工作任務(wù):任務(wù)二:運(yùn)動的小球制作(二)實踐操作:展示效果圖:上一節(jié)的小球在運(yùn)動的過程中大小發(fā)生了變化。要實現(xiàn)這一點,我們還是在上一節(jié)做好的動畫的基礎(chǔ)上進(jìn)行修改。在第13幀按F6插入一個關(guān)鍵幀,如下圖所示。雙擊此關(guān)鍵幀發(fā)現(xiàn)漸變(Tweening)標(biāo)簽下的漸變選項已經(jīng)自動設(shè)定為運(yùn)動(Motion),點取消(Cancel)。用鼠標(biāo)右鍵點擊此幀下的小球,在彈出的菜單中選擇放縮(Scale),將小球縮小到一定程度就可以了。用Ctrl-Enter查看結(jié)果同上。因為運(yùn)動導(dǎo)向?qū)邮且粋€單獨(dú)的層,我們將在這個層上繪制小球?qū)⒁哌^的路徑,所以這一節(jié)起我們開始接觸多個圖層的操作。建立導(dǎo)向?qū)佑卸喾N方法,一種是點擊時間軸窗口左下角,在當(dāng)前層上新建一個層。在該層上點鼠標(biāo)右鍵,在彈出的菜單中選擇導(dǎo)向(Guide),使其前面出現(xiàn)對號,這時從該層左邊的符號看出它已經(jīng)成為導(dǎo)向?qū)?。這時,按住Alt鍵,用鼠標(biāo)左鍵點擊小球所在圖層,使小球?qū)优c其上的導(dǎo)向?qū)影l(fā)生關(guān)聯(lián),我們看到小球?qū)酉蛴铱s進(jìn),表示二者已產(chǎn)生關(guān)聯(lián)。還有一種建立導(dǎo)向?qū)拥姆椒ㄊ怯檬髽?biāo)右鍵點擊小球所在層的名稱,在彈出的菜單中選擇增加運(yùn)動導(dǎo)向(AddMotionGuide),在小球圖層上出現(xiàn)新的導(dǎo)向?qū)樱∏驁D層縮進(jìn)顯示二者關(guān)聯(lián)。這時的時間軸顯示應(yīng)如下圖所示。下面我們就在導(dǎo)向?qū)又欣L制一條路徑。為了避免對小球所在層進(jìn)行誤操作,點擊小球所在層上所對應(yīng)的黑點,使該層被鎖定,不能被編輯。點擊導(dǎo)向?qū)拥?幀,在繪圖工具欄選擇鉛筆工具,將其下方參數(shù)修改器中的鉛筆模式按鈕變?yōu)?,顏色選黃色,也可以選其它顏色,因為導(dǎo)向?qū)釉趧赢嫴シ胖胁槐伙@示。然后在工作區(qū)畫一條如下圖所示的線。上面這條就是小球?qū)⒁刂\(yùn)動的路徑?,F(xiàn)在解除小球所在層的鎖定,恢復(fù)該層的可編輯狀態(tài)。在繪圖工具欄中選箭頭工具,將其下方參數(shù)修改器的捕捉(Snap)按鈕選定為狀態(tài)。點擊小球所在層的第1幀,點住小球中心附近將其拖動到路徑最左端,小球中心出現(xiàn)小圓圈,當(dāng)小球接近路徑端點時,中心點自動捕捉到該端點,如下圖所示,這樣我們就把小球放在了路徑的起始位置。同樣,我們再點擊小球所在層的第25幀,將小球中心放置在路徑的另一端。現(xiàn)在,我們就完成了所有的工作。用Ctrl-Enter看一下效果,是不是很不錯?問題探究:我們?nèi)绾螌⒈竟?jié)所學(xué)的各種效果綜合起來使用,例如讓物體沿指定路徑運(yùn)動的同時發(fā)生縮放,旋轉(zhuǎn)及透明度上的變化等。下面,我們還將通過小球的運(yùn)動進(jìn)一步了解如何設(shè)置一些重要參數(shù),以獲得一些特殊效果知識拓展:前面我們通過小球的運(yùn)動介紹了Flash中最基本的動畫--運(yùn)動漸變動畫,這一節(jié)我們?nèi)詫⒗^續(xù)深入學(xué)習(xí)這種方式的動畫。首先我們一起來看一看上面的例子是怎么做出來的。這是一個跳動的球。我們先試著用前兩節(jié)中講過的方法做一下。首先選好舞臺的大小,顏色等,在舞臺上用桔黃梯度色畫一個大小適中的圓球形。(注意現(xiàn)在的這個圓球形是形體而不是實例,你可以對它進(jìn)行重新填色,甚至可以用箭頭工具選擇其中一部分區(qū)域進(jìn)行操作,而實例則作為一個整體出現(xiàn),你只能對它做整體操作。這一點我們在上一章已經(jīng)講過。)我們需要把它做成一個圖符,以方便我們調(diào)用。選中這個圓球形,按F8鍵把它轉(zhuǎn)換成圖符,在彈出的窗口中給這個圖符起名為ball,并確認(rèn)是圖形類圖符,按回車確定。這時圓球形外面出現(xiàn)一個方框,如右圖所示,表示小球已經(jīng)成為一個實例。現(xiàn)在小球位于時間軸的第1幀上,我們把小球拖動到舞臺的最上端,然后在時間軸第18幀上按F6鍵插入一個關(guān)鍵幀,把實例小球從最上端拖動到最下端,然后再在第36幀處按F6插入一關(guān)鍵幀,為了使小球在這一幀能回到原位,我們可以把第1幀的內(nèi)容復(fù)制到這一幀。在第1幀上點鼠標(biāo)右鍵,在彈出的菜單中選CopyFrames,或按快捷鍵Ctrl+Alt-C,復(fù)制第1幀,然后同樣在第36幀處點鼠標(biāo)右鍵,選PasteFrames,或按快捷鍵Ctrl+Alt-P,將第1幀的內(nèi)容粘帖到這一幀上??梢钥吹皆谶@一幀,小球又回到了起始位置。時間軸的狀態(tài)應(yīng)如下圖所示。現(xiàn)在我們來看一下效果,如左圖所示。怎么好象和上面的結(jié)果不一樣,似乎看不出那種重力作用的感覺,看來我們還有點工作沒有做完。雙擊時間軸第1幀,彈出幀屬性對話框,選擇漸變(Tweening)標(biāo)簽,在其下的選項中將Easing所對應(yīng)的指針拖動到最左端,或在右邊的輸入框中輸入-100,如右圖所示,確定。然后,在第18幀雙擊,把Easing所對應(yīng)的指針拖動到最右端,或在右邊的輸入框中輸入100。然后,我們再來看一下效果,按Ctrl-Enter全屏觀看,是不是和我們需要的效果一樣了?現(xiàn)在大家應(yīng)該知道Easing選項的作用了吧。它的作用是在運(yùn)動的過程中產(chǎn)生速度上的變化,默認(rèn)值為0,即為勻速運(yùn)動。當(dāng)Easing所對應(yīng)的指針向左邊移動時,也就是Easing值為負(fù)時,運(yùn)動的物體做加速運(yùn)動,相反,當(dāng)Easing所對應(yīng)的指針向右邊移動時,也就是Easing值為正時,運(yùn)動的物體做減速運(yùn)動。當(dāng)Easing值的絕對值越大時,物體運(yùn)動的加速度越大,物體運(yùn)動時速度變化也就越快。在小球下落的過程中,速度越來越快,所以我們把Easing的值改為負(fù)值,注意在Easing值為-100時,比較接近重力加速度。當(dāng)小球彈起時,速度越來越慢,因此Easing值為正。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:在作業(yè)一基礎(chǔ)上進(jìn)行修改、更新。(要求:用不同引導(dǎo)線,不同運(yùn)動方向速度、不同球體等)上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品。。教學(xué)反思:FLASH入門動畫(三)教學(xué)目標(biāo):①進(jìn)一步鞏固使用元件、時間軸、圖層、引導(dǎo)線等;②會使用復(fù)雜運(yùn)動漸變動畫等操作=3\*GB3③會完成flash的第三個任務(wù)——物理實驗小球撞擊。工作任務(wù):任務(wù)三:物理實驗小球撞擊實踐操作:展示效果圖:下面我們做一個簡單的物理實驗的模擬。如上面所示,桔黃色的小球從空中落下,落地瞬間與地上靜止的綠色小球發(fā)生碰撞,兩球均沿不同軌跡飛出界面。以我們剛才做好的動畫為基礎(chǔ),在時間軸窗口新增加一個層,命名為GreenBall,注意該層上有鉛筆標(biāo)志,表示正在編輯該層。我們用橢圓工具選綠色梯度色繪制一個大小和桔黃色小球差不多的小球,并把它移動到桔黃色小球下方偏右一點,以便桔黃色小球落地時正好與它接觸。在第18幀上按F6新建關(guān)鍵幀,因為這時是與落地的桔黃色小球碰撞產(chǎn)生運(yùn)動的起始位置。在第36幀再按F6增加一個關(guān)鍵幀,并把綠色小球橫向右移出畫面。為了讓綠色小球動起來,我們在第18幀雙擊,在彈出的幀屬性對話框中漸變標(biāo)簽下,選Tweening為Motion。確定后第18幀到第36幀之間會有一個實箭頭。這樣,綠色小球的動畫部分就做好了。下面我們設(shè)法讓桔黃色的小球在與綠色小球碰撞后沿指定的路線飛出畫面。用鼠標(biāo)右鍵在時間軸窗口,桔黃色小球所在層點一下,在彈出的菜單中選Addmotionguide,新增一個導(dǎo)向?qū)印_@時導(dǎo)向?qū)映蔀楫?dāng)前正在編輯的層。我們在導(dǎo)向?qū)由袭嬕粭l路徑。畫好的結(jié)果應(yīng)如左圖所示。繪制這條路徑的方法有很多,一種方法是,可以用鉛筆工具或直線工具畫路徑的直線部分,然后用橢圓工具畫不填充的橢圓,用箭頭工具取其中一段作為路徑的曲線部分。路徑畫好后,用鼠標(biāo)左鍵雙擊桔黃色小球所在層的第1幀,在彈出的幀屬性對話框中漸變(Tweening)標(biāo)簽下在捕捉到路徑(Snaptoguide)前的復(fù)選框中點一下使其被選中,確定。同樣對第18幀進(jìn)行相同的操作?;氐降?幀,選擇箭頭工具(注意箭頭工具的參數(shù)修改器中捕捉按鈕應(yīng)處于按下狀態(tài)),用鼠標(biāo)左鍵點擊桔黃色小球中心附近并把它拖動到路徑直線的最上端,見左圖。在接近端點時,小球中心會自動吸附在端點上。在第18幀,把桔黃色小球拖動到路徑直線的下端,在第36幀,拖動到曲線的末端。做好后,時間軸窗口的設(shè)置應(yīng)如下圖所示,綠色小球所在層位于桔黃色小球所在層上面還是下面無關(guān)緊要。我們用Ctrl-Enter來查看一下效果,如果發(fā)現(xiàn)桔黃色小球并沒有沿指定路線移動,表明關(guān)鍵幀中小球的位置不對,未能真正處于路徑的端點,試著調(diào)整有問題部分的關(guān)鍵幀中桔黃色小球的位置。一次不行,多調(diào)整幾個就行了?,F(xiàn)在我們就可以欣賞這一段稍微復(fù)雜點的動畫了。是不是很有點成就感?下一節(jié)中我們將從另一個方面講解運(yùn)動漸變動畫的用法。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:在作業(yè)一基礎(chǔ)上進(jìn)行修改、更新。(要求:用不同引導(dǎo)線,不同運(yùn)動方向速度、不同球體等)上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品。教學(xué)反思:FLASH入門動畫(四)教學(xué)目標(biāo):①進(jìn)一步鞏固使用元件、時間軸、圖層、引導(dǎo)線等;②會使用復(fù)雜運(yùn)動漸變動畫中旋轉(zhuǎn)運(yùn)動等操作=3\*GB3③會完成flash的第四個任務(wù)——旋轉(zhuǎn)的風(fēng)車工作任務(wù):任務(wù)四:旋轉(zhuǎn)的風(fēng)車實踐操作:展示效果圖:這一節(jié)我們來制作一個旋轉(zhuǎn)的風(fēng)車,從制作中我們不僅要學(xué)習(xí)運(yùn)動漸變動畫的另一種形式:旋轉(zhuǎn)動畫,而且還要練習(xí)用箭頭工具對對象進(jìn)行修改的方法。首先要打開一個新文件?,F(xiàn)在我們先來畫風(fēng)車的一個葉片。選擇繪圖工具欄中的矩形工具,把邊線屏蔽掉,填充色選黃色,在工作區(qū)中間畫出一個矩形如下圖一所示。選箭頭工具,將矩形左上角的頂點向右拖動直到與右上角的頂點重合,如圖二所示。下面我們將對三角形作進(jìn)一步的加工。用鼠標(biāo)分別點住三角形的兩條直角邊拖出一個弧形,調(diào)整使弧形連續(xù),如圖三所示。然后再對三角形的斜邊加工,使它也呈現(xiàn)一定的弧形,如圖四所示。選中葉片,按F8將其轉(zhuǎn)換為圖符,在彈出的圖符屬性框中將葉片命名為yepian,確定是圖形類圖符后回車。這時葉片就變成了實例。按Ctrl-L打開圖庫窗口,為了使葉片旋轉(zhuǎn)時不致發(fā)生偏離的情況,我們需要把葉片調(diào)整到合適的位置,雙擊圖庫窗口中預(yù)覽窗口的葉片,進(jìn)入圖符編輯狀態(tài),如圖五所示,把葉片移動到圖示位置,使其尖端指向十字定位中心。現(xiàn)在我們就做好了一個葉片了。

圖一圖二圖三圖四圖五然后,我們要利用這個葉片做出風(fēng)車其余的葉片。選Flash菜單項Window->Inspectors->Transform,打開變形監(jiān)控面板,如左圖所示。監(jiān)控面板可以幫助我們精確地定義對象以及精確地旋轉(zhuǎn)放縮對象。選中已經(jīng)做好的葉片,按Ctrl-C復(fù)制,再按Ctrl+Shift-V將葉片復(fù)制在原來的位置上。在變形監(jiān)控面板上的旋轉(zhuǎn)(Rotate)項下輸入45,表示將復(fù)制的葉片順時針旋轉(zhuǎn)45度。點應(yīng)用(Apply),發(fā)現(xiàn)新的葉片出現(xiàn)在原有葉片順時針45度位置,如下左圖所示。用同樣的方法再復(fù)制出6個葉片,組成八個葉片的風(fēng)車。注意,復(fù)制其他葉片時,每按一個Ctrl+Shift-V后將變形監(jiān)控面板中的旋轉(zhuǎn)角度值多加45度?,F(xiàn)在我們用鼠標(biāo)拉出一個大框把這八個葉片全部套住,再按F8鍵把這八個葉片轉(zhuǎn)換成一個圖符,起名叫fengche??梢钥吹剑F(xiàn)在八個葉片成了一個整體,其中心為十字定位符,見下圖右。風(fēng)車已經(jīng)做好了,我們現(xiàn)在該讓它動起來了。在第30幀按F6插入一個關(guān)鍵幀。雙擊第1幀彈出幀屬性對話框,在漸變標(biāo)簽下Tweening選擇項目中選Motion作運(yùn)動漸變動畫。在旋轉(zhuǎn)(Rotate)項目中選擇順時針(Clockwise),并將隨后的旋轉(zhuǎn)圈數(shù)設(shè)為1。這樣,風(fēng)車將在第1幀到第30幀之間順時針旋轉(zhuǎn)1圈。現(xiàn)在按Ctrl-Enter來看一看效果吧,怎么樣,還不錯吧。知識拓展:現(xiàn)在我們對已經(jīng)做好的風(fēng)車動畫做一個加工,以便生成如上圖所示的效果。在第60幀處按F6插入一關(guān)鍵幀,在第30幀雙擊鼠標(biāo)左鍵,在彈出的幀屬性對話框中漸變標(biāo)簽下,將Tweening設(shè)置為Motion,并將Rotate設(shè)為Clockwise,其后的次數(shù)欄中填1次。該幀屬性同第1幀,如上圖幀屬性對話框面板所示?,F(xiàn)在風(fēng)車將在第1到60幀的時間里順時針旋轉(zhuǎn)2圈。下面我們對第30幀做一些修改。選擇時間軸上第30幀,用鼠標(biāo)右鍵點擊風(fēng)車實例,在彈出的菜單中選擇Scale,將風(fēng)車縮小一些。隨后,雙擊該風(fēng)車實例,進(jìn)入實例屬性面板,在ColorEffect標(biāo)簽下Color選項中選Tint,設(shè)置如下圖所示。這樣我們就把大小的顏色變化設(shè)置完成了,最后的結(jié)果就如上圖所示。大家也可以想些別的花樣來做一做,這樣可以盡快地熟練掌握運(yùn)動漸變動畫的實現(xiàn)過程。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:在作業(yè)一基礎(chǔ)上進(jìn)行修改、更新。(要求:用不同引導(dǎo)線,不同旋轉(zhuǎn)運(yùn)動方向速度,不同形狀葉片等)上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品,如地球的旋轉(zhuǎn)等。教學(xué)反思:FLASH入門動畫(五)教學(xué)目標(biāo):①進(jìn)一步鞏固使用元件、時間軸、圖層、引導(dǎo)線等;②會懂得運(yùn)動漸變動畫和形體漸變動畫的區(qū)別,會使用形體漸變動畫的操作技巧=3\*GB3③會完成flash的第五個任務(wù)——延伸的直線。工作任務(wù):第五節(jié)延伸的直線實踐操作:展示效果圖:這一節(jié)我們將來學(xué)習(xí)漸變動畫的另一種形式,即形體漸變(Shapetweening)動畫。我們先來學(xué)習(xí)做上面這個直線伸長的簡單動畫,之后我們稍加變化,做一個更有趣的直線伸長動畫。用Flash新建一個文件,按Ctrl-M對電影的屬性作一個調(diào)整,將其設(shè)置為狹長的矩形(如寬Width設(shè)為400,高Height設(shè)為50),將背景色設(shè)為藍(lán)色。用鉛筆工具或直線工具畫一條橫向的短線,長度如右圖所示:。注意要畫一條筆直的橫線,可以按住Shift鍵,再用鉛筆工具或直線工具橫向拖動鼠標(biāo)即可,因為按住Shift鍵以后,線條只能沿水平,豎直及45度角方向變化。然后我們在第40幀上按F6插入一關(guān)鍵幀,或按F7插入一空幀(當(dāng)在這一幀上繪制圖形后,該幀會成為關(guān)鍵幀)。確定這一幀為當(dāng)前幀,我們將在這一幀上繪制一條更長的直線,有兩種方法可以實現(xiàn)這一點。一種是按下F7插入空幀后,點擊時間軸窗口下方洋蔥皮按鈕的左邊第一個,即。這時我們發(fā)現(xiàn)第1幀的短橫線以灰色顯示出來。我們就以它為基準(zhǔn),用鉛筆工具繪制一條長直線,直線左端與短橫線左端對齊。另一種方法要簡單一些,在第40幀按下F6插入一關(guān)鍵幀后,第40幀會具有和第1幀相同的內(nèi)容,即一條短橫線,我們只需要對它加一下工就可以了。選中繪圖工具欄中的箭頭工具,移動鼠標(biāo)到短橫線的右端,鼠標(biāo)形狀如右圖:。點住鼠標(biāo)左鍵并向右拖動,直到直線足夠長為止。選用這兩種方法之一做好第40幀的直線。下面我們就要設(shè)置幀屬性讓直線動起來。用鼠標(biāo)左鍵雙擊時間軸上的第1幀,在彈出的幀屬性對話框中選漸變(Tweening)標(biāo)簽。對其下的Tweening選項進(jìn)行設(shè)置,選擇Shape如下圖所示,回車確定。這時在第1幀和第40幀之間出現(xiàn)一個實箭頭,背景變?yōu)榈G色,表明是形體漸變動畫。按Ctrl-Enter看一下效果,應(yīng)該和上面所示一樣的。知識拓展:現(xiàn)在我們來變個花樣,做一個環(huán)繞矩形四條邊伸長的直線。大家能猜一猜這個動畫是怎么做的嗎?其實有了本節(jié)開頭直線伸長動畫的基礎(chǔ),這個動畫一點也不難做。我們對剛剛做好的直線伸長的動畫加一加工。首先按Ctrl-M對電影屬性作一個調(diào)整,將其高度(Height)設(shè)置為150。為了縮短動畫時間,我們按下Ctrl鍵把鼠標(biāo)移到第40幀上,發(fā)現(xiàn)鼠標(biāo)這時變成黑色,如右圖所示:。把第40幀向左拖動到第20幀位置松開鼠標(biāo),這時動畫時間縮短了一半,發(fā)現(xiàn)直線延伸變快了。點時間軸窗口下的新建一個層,在新層的第21幀按F6插入一個關(guān)鍵幀。按下洋蔥皮按鈕,這時原先層上的直線用灰色顯示出來:。我們從這條線的最右端開始向下畫一條短豎線:。在新層的第30幀按F6插入一個關(guān)鍵幀,該幀具有和第21幀相同的內(nèi)容。用上面講過的方法把這一幀的豎線拉長到合適的長度,同上面動畫中的豎線長度差不多。然后,雙擊第21幀彈出幀屬性對話框,按剛才講過的方法把Tweening設(shè)置為形體漸變動畫。按Ctrl-Enter看一下效果,應(yīng)如下圖所示:我們發(fā)現(xiàn)這并不是我們想得到的結(jié)果,我們希望直線不斷延伸,而不是分段延伸。得到這個顯示結(jié)果是因為橫向直線延伸的動畫在第20幀以后就終止了,在第21幀到第30幀之間,也就是豎線延伸時橫向直線層上沒有內(nèi)容。為了彌補(bǔ)這一點,我們在橫向直線延伸動畫所在層的第30幀上按下F5鍵,使該層在第21幀到第30幀之間仍保留第20幀,也就是最近的一個關(guān)鍵幀上的內(nèi)容,這樣在第21幀到第30幀之間,橫向的直線將一直被顯示出來。再按Ctrl-Enter看一下效果,發(fā)現(xiàn)直線先是橫向延伸,到了右端頂點后轉(zhuǎn)為豎向延伸,這才是我們需要的結(jié)果?,F(xiàn)在再做其它兩條邊的直線延伸就變得很簡單了,再新建兩個層,一條邊一個,方法和上面講過的一樣,我在這里就不再多說了。做好后的時間軸應(yīng)如下圖所示。好了,欣賞一下我們做的動畫吧。體會一下運(yùn)動漸變動畫和形體漸變動畫的區(qū)別。下一節(jié)課中我們還將繼續(xù)介紹形體漸變動畫其它的應(yīng)用。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:在作業(yè)一基礎(chǔ)上進(jìn)行完成矩形上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品,不同形狀直線的延伸,如三角形,圓形等。教學(xué)反思:FLASH入門動畫(六)教學(xué)目標(biāo):①進(jìn)一步通過字符的變形動畫來認(rèn)識形體漸變動畫的作用;②會使用不同字符形體漸變動畫的操作技巧=3\*GB3③會完成flash的第六個任務(wù)——變幻的字符。工作任務(wù):任務(wù)六:變幻的字符實踐操作:展示效果圖:這一節(jié)我們將通過字符的變形動畫來認(rèn)識形體漸變動畫的作用。對于這類變形動畫,只能用形體漸變來實現(xiàn),用運(yùn)動漸變是做不到的。首先,我們新建一個電影文件,按Ctrl-M修改電影屬性,使其寬度和高度均為100,背景為藍(lán)色。選擇繪圖工具欄中的文字工具,把鼠標(biāo)移到電影文件中點一下,會出現(xiàn)一個文字輸入框,選擇好字體,字號,設(shè)定顏色為黃色,輸入字母F,選擇箭頭工具,這時字母F的周圍出現(xiàn)一個陰影方框,表示該字母已經(jīng)成為一個集合體。我們在這個字母上點鼠標(biāo)右鍵,在彈出的菜單上選放縮(Scale),這是F周圍出現(xiàn)放縮手柄,我們把這個字母放大到和上面動畫中字母大小差不多。在時間軸的第12幀點鼠標(biāo)左鍵,按F6插入一關(guān)鍵幀,這一幀的內(nèi)容和第1幀一樣。雙擊這一幀中的字母F,進(jìn)行字符編輯模式,我們把字母F替換成字母L。用同樣的方法,分別在第24幀,第36幀,第48幀,第60幀插入關(guān)鍵幀,并把相應(yīng)的字母變成A,S,H,F(xiàn)。因為要制作的是形體漸變動畫,我們首先要把已經(jīng)集合了的字符打散成形體。選擇第1幀,按Ctrl-B把字母F打散:。然后依次選擇第12,24,36,48和60幀按Ctrl-B把字母L,A,S,H,F(xiàn)分別打散?,F(xiàn)在就可以做動畫了,在第1幀上雙擊鼠標(biāo)左鍵,在彈出的幀屬性對話框中選漸變標(biāo)簽,其下的Tweening選項選Shape,回車確定。然后分別對第12幀,24幀,36幀及48幀如此操作。最后的時間軸窗口應(yīng)如下圖所示:現(xiàn)在我們按Ctrl-Enter預(yù)覽一下效果,應(yīng)如上面的動畫所示。這樣的字符變形很簡單,但是我們總覺得上面的這個動畫中,字符變形有點沒有規(guī)則,變幻得有些莫名其妙。那是因為在形體漸變動畫中,如果用戶沒有指定變形規(guī)則的話,F(xiàn)lash將自動為待變形的形體設(shè)置一些關(guān)鍵點。形體漸變動畫實際上就是關(guān)鍵點位置的變化,形體其余部分的變化可以通過插值的方法計算出來。在Flash中提供了一種人為干預(yù)變形效果的方法,就是設(shè)置提示點(Hints),通過指定相應(yīng)提示點間的變化方法可以指定整個形變的過程。下面我們用具體的實例來說明。以字母A變S的過程為例,因為沒有設(shè)置提示點時,這個變形過程顯得比較凌亂。先按Ctrl+Alt-H打開提示點的顯示。選擇第24幀,按Ctrl-H加入一提示點,以圖一中紅色的小圓圈表示,a用來標(biāo)識提示點??匆豢吹?6幀,發(fā)現(xiàn)字母S上也有一個對應(yīng)的提示點,見圖二?;氐降?4幀,把提示點a拖動到字母A的右下角,如圖三所示,再到第36幀,把提示點a放在如圖四所示位置。這時我們發(fā)現(xiàn)提示點變綠了,回到第24幀,這時提示點由紅色變成了黃色,見圖五,表明提示點的設(shè)置正確。

圖一圖二圖三圖四圖五圖六圖七如果提示點仍是紅色,說明提示點位置設(shè)置不正確,多調(diào)整幾次就會好了。用同樣的方法,我們可以再設(shè)置一到多個提示點,如上圖六和七,我們又設(shè)置了一個提示點b,這樣就可以獲得比較好的變形效果。左圖所示為加入與未加入提示點的字符變形對比。我們可以看出,加入了提示點后字母的變形似乎更有規(guī)則一些。知識拓展:(效果圖展示)上面的這個動畫實際上就是這兩節(jié)中我們所學(xué)的形體漸變動畫的一個綜合運(yùn)用,在變形的過程中還有位置和顏色的變化。也許大家一看就知道是怎么做的了,我就不再多說了,只簡單提兩句。在每一個關(guān)鍵幀上把相應(yīng)的字母向右拖動一段距離,并使用油漆桶工具用不同的顏色填充就行了。大家有興趣,可以自己動手做一做看。當(dāng)然形體漸變動畫不僅僅是作用于文字,所有的形體都適用。所以我們也可以把文字變形的動畫擴(kuò)展到幾何圖形的變化,例如可以把圓形變成三角形,再變成正方形等,大家可以發(fā)揮自己的想象力,多動手練一練,一定會慢慢熟練起來,并創(chuàng)作出很好的作品的。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:在作業(yè)一基礎(chǔ)上進(jìn)行修改,變成漢字等上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品,我們也可以把文字變形的動畫擴(kuò)展到幾何圖形的變化,例如可以把圓形變成三角形,再變成正方形等,大家可以發(fā)揮自己的想象力。教學(xué)反思:FLASH入門動畫(七)教學(xué)目標(biāo):①進(jìn)一步通過文字的輸入和輸出實例,掌握靜態(tài)、動態(tài)及輸入文本的使用;②會制作簡單按鈕及簡單腳本的編寫;=3\*GB3③會完成flash的第七個任務(wù)——文字的輸入與輸出。工作任務(wù):任務(wù)七:文字的輸入與輸出實踐操作:展示效果圖:這一節(jié)我們要來介紹文字的輸入和輸出方法,這是Flash中的一項重要功能,也是我們認(rèn)識Flash交互性的基礎(chǔ)。大家試著在上面的Flash電影下面的文本框中輸入一段文字,然后回車或點“確定”按鈕,看一看有什么效果。再點一點“清除”鍵呢?要實現(xiàn)文本的輸入,就要用到繪圖工具欄中的文字工具,我們先把輸入框做好。點擊工具欄中,選中文字工具,在下面的參數(shù)修改器中設(shè)置好用于輸入的文字字體,字號,顏色以及對齊方式等項,不要忘記一定要點選最下面的,這個按鈕用于設(shè)置文本域。在場景中下方用鼠標(biāo)拉出一個文字框用作輸入,寬度大約比所選字寬稍大一點。然后我們要對所畫的輸入文本框的屬性做一點調(diào)整。在文本框上點鼠標(biāo)右鍵,在彈出的菜單中選最下面的“屬性”(Properties...),進(jìn)入文本域?qū)傩栽O(shè)置面板。如下圖所示,在變量名(Variable)后填“input”,并選中第一項Drawborderandbackground,這樣就會顯示文本域的背景和邊界。設(shè)置變量名是為了方便我們今后的調(diào)用。現(xiàn)在按回車確定。輸出文本框的做法與輸入框相同,我們還和剛才一樣,在文字工具下用其參數(shù)修改器為要輸出的文字設(shè)置字體,字號,顏色等,注意要保證按下,在剛才的輸入框上面拉出一個寬一些的文本域用作輸出。用鼠標(biāo)右鍵點這個區(qū)域選“屬性”進(jìn)入文本域?qū)傩栽O(shè)置對話框。將Variable設(shè)置為“Output”,再將Options中的選項設(shè)置為下圖所示。(關(guān)于每個項目的含義和設(shè)置我們將在本節(jié)的后面部分詳細(xì)介紹。)這樣我們就將輸出文本域設(shè)置成了有邊界和背景,允許多行輸出并自動換行以及禁止編輯等屬性。下面我們還需要做兩個按鈕,分別用來輸入和清除文字。因為是演示,所以我們把按鈕做得簡單些,你也可以直接調(diào)用Flash中已經(jīng)做好了的按鈕。按Ctrl-F8新建一個圖符,給圖符起名為Button,并將圖符的類型設(shè)置為Button。進(jìn)入圖符編輯模式后,用矩形工具拉出一個矩形,我們還可以加入圓角并修改顏色使它更象一個按鈕。注意到我們所繪制的圖形都是在按鈕的UP幀下,為了簡單起見,我們只做這一幀。返回場景中,按Ctrl-L打開圖庫窗口,分兩次從預(yù)覽窗口把按鈕拖動到輸入文本框的下面并排放置,用文字工具在兩個按鈕上分別寫上“確定”和“清除”,如上面的電影所示。下面的步驟要稍微難理解一些,因為我們要用到actions為按鈕加入一些動作,這樣當(dāng)點擊按鈕后才能執(zhí)行相應(yīng)的操作。actions屬于Flash的高級技術(shù),今后我們會重點介紹的。在這里,我們只需要有個大概的印象和認(rèn)識就行了。用鼠標(biāo)左鍵雙擊“確定”按鈕,彈出實例屬性對話框,注意到按鈕類實例比圖形類實例多了一項設(shè)置,就是Actions。點選Actions標(biāo)簽,點為按鈕增加動作,在下拉菜單中選OnMouseEvent,即設(shè)置鼠標(biāo)對事件的響應(yīng)。然后在出現(xiàn)的選項框中選Release和KeyPress,并在KeyPress后的輸入框中按一下回車鍵。這樣我們就把按鈕將要響應(yīng)的鼠標(biāo)事件設(shè)置好了,即當(dāng)按鈕被釋放或按下回車鍵后發(fā)生動作。然后,我們將進(jìn)一步指定在這些事件產(chǎn)生后如何進(jìn)行操作。再點一下,在菜單中選SetVariable,我們在右邊的變量名(Variable)一欄中填入output,在下面的值(Value)一欄填入input。注意必須把值右邊的等價方式按鈕設(shè)為,表示當(dāng)按鈕按下時,output中應(yīng)該具有和input域中相同的內(nèi)容,即二者的值相同。如果選,表示字串內(nèi)容相同,這時無論你在文本輸入框中輸入任何文字,在按下確定按鈕后,輸出框中只會出現(xiàn)input這幾個字符。同時我們注意到在這兩種等價方式下,表達(dá)式的寫法也不相同。同樣,雙擊清除按鈕,我們也為它設(shè)置動作。它的Actions設(shè)置如下所示。表示鼠標(biāo)在該按鈕上釋放時,將output和input里的內(nèi)容全部清空。這樣我們就把這個文字輸入和輸出的演示做好了。知識拓展:(效果圖展示)怎么樣,做的這個文字輸入輸出演示比上面那個漂亮多了吧。大家想一下,如何利用我們前面學(xué)過的知識生成這樣的效果。這個效果很容易實現(xiàn)的,與上面那個動畫最大也最主要的差別是輸入和輸出文本域設(shè)置了邊框和背景色,這使得畫面靚麗了許多。其實,只是利用了層的技術(shù)造成了一個假象罷了。我們還用上面做好的動畫為例,在兩個文本域上分別點鼠標(biāo)右鍵,在彈出的文本域?qū)傩栽O(shè)置框中把Drawborderandbackground前的對勾去掉,如右圖所示。這樣在場景中效果應(yīng)如下圖所示,文本域的邊框和背景不再顯示。新建一個層,把它拖動到原來層的下面,并命名為Background。在該層上用矩形工具選好邊框和背景色繪制出兩個大小和位置分別與輸出輸入框均相同的矩形來,如下圖所示。這樣,文本域就有了邊框和背景色了。然后,我們再給按鈕上上漸進(jìn)色,再加些文字點綴就得到上面的效果了。怎么樣,不難吧。附:文本域?qū)傩詫υ捒蛑懈黜椇x解釋Drawborderandbackground顯示文本域的邊框和背景Password用戶鍵入的任何字符均以*號表示,且文字不能復(fù)制,剪切,從而得到保密Multiline允許文本以多行方式出現(xiàn)Wordwrap使文本在到達(dá)右邊界時自動換行Restricttextlengthto限制用戶文本輸入的最大字符數(shù)Disableediting防止用戶改變文本域的內(nèi)容,使文本域不能被編輯Disableselection使文本域中的內(nèi)容不能被選擇Outlines可以選擇只保存字體的輪廓,或指定的文字,符號等,適當(dāng)選用可大大減小Flash文件的大小

作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成第一個作品。提高作業(yè):在作業(yè)一基礎(chǔ)上進(jìn)行修改,完成第個二個作品。教學(xué)反思:FLASH入門動畫(八)教學(xué)目標(biāo):①進(jìn)一步通過按鈕制作實例一,掌握按鈕元件使用;②會制作簡單按鈕;=3\*GB3③會完成flash的第八個任務(wù)——按鈕制作(一)。工作任務(wù):任務(wù)八:按鈕制作(一)實踐操作:展示效果圖:這一節(jié),我們來學(xué)習(xí)按鈕的制作方法。在上一節(jié)中,我們曾經(jīng)做過一個簡單的按鈕,但是很不全面,現(xiàn)在我們就來學(xué)習(xí)一個完整按鈕的制作過程。新建一個文件,按Ctrl-F8創(chuàng)建圖符,命名新圖符為Button,并在下面的行為(Behavior)選項中選按鈕(Button),確定。這樣我們就進(jìn)入了按鈕的編輯窗口。注意這時時間軸上只有四幀,如右圖所示:。這四幀的含義我們在前面的第一章中已經(jīng)詳細(xì)介紹過。首先我們來畫Up幀上的內(nèi)容,也就是正常狀態(tài)下按鈕的外觀。選繪圖工具欄中的矩形工具,在編輯窗口中間拉出一個不帶邊線的矩形來,為了美觀起見,也可以選參數(shù)修改器中的設(shè)置圓角。用顏料桶工具選中深藍(lán)色,在矩形上點一下,矩形這時以深藍(lán)色填充。選文字工具,設(shè)置適當(dāng)?shù)淖煮w,顏色,字號等,在矩形中間寫上“按我”。選箭頭工具,在剛剛輸入的文字上點鼠標(biāo)右鍵,在彈出的菜單中選放縮(Scale)。我們對文字進(jìn)行放縮處理,使它排放在深藍(lán)色矩形的合適位置。Up幀下的內(nèi)容已經(jīng)做好了,我們現(xiàn)在再來做Over幀的內(nèi)容,也就是鼠標(biāo)滑過按鈕表面時按鈕的外觀。在Over幀上用鼠標(biāo)左鍵點一下,并按F6把這一幀設(shè)為關(guān)鍵幀,這時該幀具有和Up幀相同的內(nèi)容。選擇顏料桶工具,選中灰綠色,用顏料桶在矩形上邊線附近點一下,注意點中間的文字不會有效果,這時矩形框填充灰綠色。選擇箭頭工具,雙擊矩形中間的文字,進(jìn)入文字編輯模式,改變文字工具參數(shù)修改器中的字號和顏色,并在文字輸入框中輸入“我會變色”。這樣,我們又做好了按鈕的第2幀。Down這一幀的做法和前兩幀相同,先用F6在這一幀插入一關(guān)鍵幀,然后一方面用顏料桶工具選黃色填充矩形,另一方面用箭頭工具雙擊矩形中間的文字部分,在文本編輯狀態(tài)下改為“再變一次”。最后一幀是Hit幀。它的作用是定義按鈕對鼠標(biāo)做出反應(yīng)的區(qū)域。一般情況下這一幀可以省略掉,但對于某些特殊情況,你可能會需要為按鈕指定對鼠標(biāo)做出響應(yīng)的特殊區(qū)域,這時這一幀就很關(guān)鍵了。按下F6插入關(guān)鍵幀,把文字部分選中刪除掉就行了,這樣就設(shè)定對鼠標(biāo)響應(yīng)的區(qū)域就是這個矩形區(qū)域。這四幀全部設(shè)置好以后。我們點時間軸窗口左上角的回到主場景中,按Ctrl-L打開圖庫窗口,從它的預(yù)覽窗口中把剛才做好的按鈕拖到工作區(qū)中。按Ctrl-Enter觀看一下效果,應(yīng)該和我上面的按鈕差不多。知識拓展:(效果圖展示)下面我們玩大一點,做一個比較逼真一些的按鈕。按鈕的樣子就如上面所示,怎么樣,還不算太差吧。其實做這個按鈕也不難,幸運(yùn)鳥之前也從來沒有做過按鈕,這次破例做了一次竟然只用了半個小時就做好了,相信大家不會比我差,我也會把制作的步驟說得盡量詳細(xì)一些的。事實上,要做一個逼真的按鈕,最關(guān)鍵的不是制作方法,而是對光影效果的掌握。如上圖所示,現(xiàn)在按鈕處在正常狀態(tài)下,也就是對應(yīng)著按鈕里的Up幀。大家一看就知道,這個按鈕的外觀實際上是由幾個圖片組合在一起的。沒錯,我們現(xiàn)在把組成按鈕外形的幾個圖形類圖符分離開來,大家就更清楚了。下圖所示就是在按鈕正常狀態(tài)下,組成按鈕外觀的三個圖符,從左到右按它們在按鈕中的位置排列。當(dāng)它們?nèi)齻€疊在一起時,由于各部分光強(qiáng)和陰影效果的反差,就形成了上圖所示的樣子。我們先來看一看位于最上面的這個桔黃色圓盤是怎么做的。其實這也是由兩個形體組成的,見下圖。按下Ctrl-F8,新建一個圖符,命名為top,并確認(rèn)是圖形類圖符后回車。在該圖符的編輯模式中,我們先用橢圓工具出除邊線,選棕黃漸進(jìn)色,拉出一個圓球來,注意在繪制圓球前按下Shift鍵,這樣保證拉出的是正圓而不是橢圓。繪制好以后,我們用顏料桶工具,還選用剛才的棕黃漸進(jìn)色在球的右上方點一下,這樣就把高亮點移到了球的右上方,如下面的右圖所示。背景球做好以后,我們點時間軸下方的新建一個層。選中新層的第一幀,用橢圓工具去除邊線,選桔黃色按住Shift鍵拉出一個比剛才的球小一圈的圓來。我們可以在這個桔黃色的圓上點鼠標(biāo)右鍵,用菜單中的Scale命令調(diào)整它的大小。然后,我們用鼠標(biāo)或方向鍵把圓移到球的中間,讓它們的圓心位于同一位置,因為圓所在的層位于球所在層的上面,所以圓也位于球的上面。當(dāng)然,為了更真實一些,這個桔黃色的圓實際也是用漸進(jìn)色填充的,只不過色彩上變化不明顯罷了。下面我們來做按鈕的中間部分,就是上面那個中間亮兩端暗的金屬片樣子的圖符。再創(chuàng)建一個圖形類圖符,命名為Middle,這些我就不多說了。制作這個金屬片的光效有兩種方法。一種方法如下圖所示,先繪制一個任意顏色,不帶邊線且比剛才做的桔黃色圓盤稍大一點的正圓,如下圖一所示。然后我們用箭頭工具在圖中拉出一個矩形框選中這個圓的上半部分,見圖二。選擇顏料桶工具,將顏色設(shè)置為黑白線性漸進(jìn)色,在圖中圓形的陰影部分點一下,結(jié)果變成圖三所示那樣。接著我們在顏料桶工具的參數(shù)修改器中選中來改變漸進(jìn)色的方向。在圓的上半部分點一下,結(jié)果如圖四所示。圖一圖二圖三圖四用鼠標(biāo)拖動平行線上圓形的旋轉(zhuǎn)修改手柄調(diào)整漸進(jìn)色方向為上面暗下面亮的狀態(tài),見圖五。再用鼠標(biāo)拖動平行線上方形的手柄將漸進(jìn)色范圍壓縮為圖六所示狀態(tài)?,F(xiàn)在我們就得到了如圖七所示的半個金屬片光效的圖符。用同樣的方法將圓的下半部分也做好,或者把下面的部分刪除,把上面做好的部分復(fù)制做鏡像再拼在一起也可以得到相同的效果。關(guān)于顏料桶工具的這個參數(shù)修改器我們上一章曾詳細(xì)介紹過,這一節(jié)只是它的一個實際應(yīng)用。

圖五圖六圖七另外一種做金屬光效的方法是先選擇橢圓工具,點擊參數(shù)修改器中的顏色選擇按鈕,再點進(jìn)入顏色設(shè)置面板,進(jìn)入漸進(jìn)色設(shè)置框,選擇黑白線性漸進(jìn)色,按New鍵新建一個顏色,把左邊黑色的指針井拖進(jìn)關(guān)鍵色設(shè)置滑桿的中心位置,如右圖所示。將中間的顏色調(diào)為白色,兩端的顏色設(shè)為黑色,即得到中間亮兩端暗的新線性漸進(jìn)色。用這個顏色直接繪制出一個圓來,該圓就是以這種顏色填充的,然后我們只需要對圓作一個旋轉(zhuǎn)處理以獲得所需的顏色方向就行了。按鈕的最下面的那一層是一個球,我想大家肯定都會做的,我就不再多說了,不過這個球要比中間的那個金屬片還要大一圈。以上是制作按鈕Up幀所要用到的圖符?,F(xiàn)在來做按鈕,按Ctrl-F8新建一圖符,命名為Button,且行為選項為Button。在Up幀把圖庫中已經(jīng)做好的三個圖符依次拖到編輯窗口中,中心對齊排列好即可。按鈕的Over幀與Up幀的內(nèi)容很接近,只不過最下面的那個球的顏色稍微調(diào)亮了一些,如下圖所示,其余的桔黃圓盤和金屬片都不變。按鈕的Down幀在Over幀的基礎(chǔ)上稍加變化,把桔黃色圓盤縮小一些就行了。至于Hit幀,我們只需要把Down幀中桔黃色圓盤和金屬片刪除即可。這樣我們就做好了一個樣子不錯的按鈕。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成該作品。上機(jī)作業(yè)二:按照教師所展示的效果圖模仿完成圓形按鈕。上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品,制作一個有個性的按鈕,大家可以發(fā)揮自己的想象力。教學(xué)反思:FLASH入門動畫(九)教學(xué)目標(biāo):①進(jìn)一步通過按鈕制作實例二,掌握按鈕元件使用;②會使用影片剪輯元件制作成按鈕;=3\*GB3③會完成flash的第九個任務(wù)——按鈕制作(二)。工作任務(wù):任務(wù)九:按鈕制作(二)實踐操作:展示效果圖:大家試著點一點上面的按鈕,看看這個按鈕和上一節(jié)我們講到的按鈕有什么區(qū)別。對了,除了外形不一樣以外,最大的區(qū)別就在于當(dāng)鼠標(biāo)滑過按鈕上方時,是播放一小段動畫而不僅僅是切換成另外一張圖片。這就是我們這一節(jié)要學(xué)習(xí)的,制作一個動態(tài)按鈕。大家知道,按鈕的制作實際上是按鈕的Up、Over、Down和Hit關(guān)鍵幀的制作,上一節(jié)中我們在這四幀中分別放上不同的靜止的圖形類圖符,這樣生成的按鈕就成為靜態(tài)按鈕。相反,如果我們在其中某些關(guān)鍵幀中放入的是動態(tài)的電影片斷(MovieClip),當(dāng)特定鼠標(biāo)事件產(chǎn)生時,就會表現(xiàn)為動態(tài)的效果。這個道理我想是很容易理解的,所以這一節(jié)也會相對簡單一些。下面就讓我們來研究一下上面的這個動態(tài)按鈕是怎么做出來的。首先打開一個新文件,按Ctrl-F8新建一個圖形類(Graphics)圖符并將圖符命名為NextUp。這個圖符將用于按鈕在正常狀態(tài)下的外形。進(jìn)入圖符編輯模式后選矩形工具,拉出一個寬比高稍短一點的紅色矩形來,如下圖一所示。然后我們用箭頭工具把矩形移動到如圖二所示位置,讓十字中心點位于矩形右邊的中心。當(dāng)箭頭移到矩形右上角時,形狀變成圖三所示,大家一看就知道我們要做什么了。如圖四和圖五那樣,分別把矩形的右上角和右下角拉到右邊的中心點位置,這樣,我們就把用作按鈕Up幀的三角形圖片做好了。做這個三角形的方法很多,大家也可以用鉛筆或線條工具試一下。圖一圖二圖三圖四圖五大家注意到鼠標(biāo)滑過上面的按鈕時,按鈕變成黃色三角形,并且重復(fù)調(diào)用四次,所以我們需要為制作這個電影片斷而事先準(zhǔn)備一張黃色三角形圖符。因為它的形狀和剛才做的nextup紅色三角形圖符一樣,所以我們只要對上面做好的圖符稍加修改就行了。新建一個圖形類圖符,命名為nextover,進(jìn)入圖符編輯畫面,按Ctrl-L打開圖庫窗口,從預(yù)覽窗口把紅色的三角形直接拖到編輯區(qū)中,在該三角形被選中的情況下,按Ctrl-B把它打散,用顏料桶工具選黃色的填充色在三角形中點一下。這樣我們就做好了這個圖符。用同樣的方法,我們再做一個名為nextdown的綠色三角形圖符用做按鈕按下狀態(tài)時的外觀。下面我們來制作按鈕Over幀上將要用到的電影片斷(MovieClip)。新建一個圖符,起名為movie,并選擇它的類型為MovieClip。進(jìn)入編輯畫面,發(fā)現(xiàn)與主場景的編輯畫面很相似。從圖庫窗口中選中nextover,從預(yù)覽窗口中把黃色的三角形拖到編輯區(qū)中。在第2幀按F6鍵插入一關(guān)鍵幀,在這一幀上再從預(yù)覽窗口中把黃色的三角形拖到編輯區(qū)中,放在原來的那個三角形右邊,這樣就有兩個并排放置的三角形。在第2幀用鼠標(biāo)左鍵雙擊右邊的三角形,進(jìn)入圖符屬性對話框,在Color標(biāo)簽下把Alpha值設(shè)為80,使得右邊三角形稍稍透明一些。同樣,在第3幀按F6鍵插入關(guān)鍵幀,與其上幀的操作一樣,再拖進(jìn)一個三角形并排放在右邊,然后把最右邊的三角形Alpha值設(shè)為60。第4幀也是如此,只不過最右邊的三角形的Alpha值為40?,F(xiàn)在按鈕主要關(guān)鍵幀上所要放的圖片和電影片斷我們都已經(jīng)做好了,現(xiàn)在就可以動手制作了。按Ctrl-F8新建一按鈕類圖符,取名為button。在Up幀,把紅色三角形nextup從圖庫拖到編輯窗口。在Over幀上用鼠標(biāo)點一下,按F6插入關(guān)鍵幀。因為我們要用電影片斷取代紅色的三角形放在這里,所以要求它們應(yīng)放在同一位置,這里我們提供一種對齊方法。因為在Over幀按的是F6,所以這一幀的內(nèi)容與Up幀一致,均為紅色三角形,從圖庫中拖出名為nextover的電影片斷,把它放在紅色三角形的上方,用鍵盤上的方向鍵調(diào)整它的位置,使它剛剛好把紅色三角形完全遮住。現(xiàn)在在電影片斷被選中的情況下,按Ctrl-X把它從畫面中剪取出來,這時畫面中只剩紅色的三角形。用箭頭工具選中紅色的三角形,按Delete鍵把它刪掉,再按Ctrl+Shift-V把剪取的電影片斷粘帖到原處,這樣電影片斷就與剛才的紅色三角形在同一位置。同樣,也可以用相同的對齊方法把綠色的三角形放在Down幀同一位置上。這樣,一個按鈕就做好了。為了看一下效果,我們回到主場景中,從圖庫中把這個按鈕拖出來,再按下Ctrl-Enter查看結(jié)果。知識拓展:(效果圖展示)嚴(yán)格地說,上面這個按鈕并沒有玩多大,大家一看就應(yīng)該知道是怎么做的,所以也不準(zhǔn)備講得太多。不過這個按鈕雖然很普通,但多少會給大家一些啟發(fā),其實按鈕的變化千姿百態(tài),大家多看看,多想想,就會設(shè)計出有創(chuàng)意的作品來。這個按鈕中,文字出現(xiàn)的次數(shù)比較多,且具有不同的效果,所以把文字做成圖符是必要的,我們首先創(chuàng)建一個新的圖形類圖符,名為AnWo,在編輯狀態(tài)下選文字工具以適當(dāng)大小顏色的字體寫上“按我”兩個字。同樣的方法,我們可以做好名為XieXie的圖符,是由“謝謝”兩個字組成的,用于按鈕Down幀下電影片斷的制作。下面我們來做Over幀下將要用到的電影片斷。按Ctrl-F8鍵新建一電影片斷(MovieClip)類圖符,取名為overmovie。從圖庫中把做好的“按我”圖符拖動到編輯窗口中?,F(xiàn)在新建兩個層,在時間軸窗口把最初的那個層拖到新建的兩個層之間?;氐阶畛醯哪且粚?,用箭頭工具選中“按我”,按Ctrl-C鍵把它復(fù)制到剪帖板中,分別點新建的兩個層的第1幀,按Ctrl+Shift-V把剛才復(fù)制的內(nèi)容分別粘帖到這兩層中,這時三個“按我”文字重合?,F(xiàn)在我們分別對這三個實例進(jìn)行編輯,首先修改原有層。點擊時間軸窗口新建兩個層下對應(yīng)的黑點,把這兩層鎖住。用鼠標(biāo)左鍵雙擊“按我”文字,在實例屬性對話框中把Alpha值改為80。然后把原來的層鎖住,對新建兩個層分別解鎖進(jìn)行編輯,把它們的第一幀“按我”文字的Alpha值均設(shè)為80。在新建兩個層的第12幀分別按F6新增關(guān)鍵幀,然后在第12幀處把兩層中的文字一個向右上方拖出一定距離,一個向左下方拖動一定距離,并分別設(shè)置這一幀中文字的Alpha屬性值為0,也就是全透明,這時新建的這兩層在這一幀中將看不到內(nèi)容,但仍可以選擇文字實例。在原來層的第16幀按F5,使得該層內(nèi)容一直保持到第16幀。這樣這個電影片斷就做好了,我們可以按下回車鍵查看效果。Down幀所需要用到的電影片斷我就不準(zhǔn)備再講了,因為和上面講的差不多做法。這些都做好后,新建一個按鈕類圖符,先用矩形工具拉出一個矩形框來做背景,再把不同的圖符和電影片斷分別放在按鈕的不同幀上,把位置放好就行了。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成作品一。上機(jī)作業(yè)二:按照教師所展示的效果圖模仿完成作品二。上機(jī)作業(yè)三:(選做提高題)根據(jù)所學(xué)自由創(chuàng)作一作品,制作一個有影片剪輯元件的創(chuàng)意按鈕,大家可以發(fā)揮自己的想象力。教學(xué)反思:FLASH入門動畫(十)教學(xué)目標(biāo):①通過殘影技術(shù)制作實例,進(jìn)一步掌握元件使用;②會熟練使用圖層的操作;=3\*GB3③會完成flash的第十個任務(wù)——?dú)堄凹夹g(shù)工作任務(wù):任務(wù)十:殘影技術(shù)實踐操作:展示效果圖:這一節(jié)我們來學(xué)習(xí)殘影技術(shù),也就是上面Flash電影中所展示的。大家不要以為實現(xiàn)這個效果很難,其實只需要簡單的幾步就可以做到。首先,我們新建一個文件,按Ctrl-M選好電影的大小和背景顏色,我們這里選用300X280,背景為天藍(lán)色。用文字工具,選白色方正隸變繁體36號字在場景中寫下“新閃光時代”五個字,如果對文字的大小不滿意,可以進(jìn)行放縮處理,方法如以前所講。因為文字部分要多次調(diào)用,所以我們把它轉(zhuǎn)換成圖符。選中文字,按F8轉(zhuǎn)換,起名為shadowtext,類型為圖形類。我們也可以一開始直接按Ctrl-F8建立新圖符,然后再在圖符編輯窗口輸入文字,這樣也可以做出包含文字的圖符。不過在場景中把文字轉(zhuǎn)換成圖符會簡化我們的操作,大家注意到轉(zhuǎn)換以后的文字在正中心會有一個十字定位符出現(xiàn),我們要做文字的旋轉(zhuǎn)動畫就是繞著這個十字中心旋轉(zhuǎn)的,所以這會省去我們調(diào)整文字位置的麻煩。移動文字圖符到畫面合適位置,使得估計它旋轉(zhuǎn)以后不至于超出邊界。現(xiàn)在我們在第20幀按F6插入關(guān)鍵幀。在第1幀上雙擊鼠標(biāo)左鍵,在幀屬性對話框中選Tweening標(biāo)簽。將其下的參數(shù)Tweening設(shè)為Motion,在Rotate項選擇順時針(Clockwise)旋轉(zhuǎn),在后面的次數(shù)欄里填上1,表示順時針旋轉(zhuǎn)1圈,如下圖所示。設(shè)置好以后,我們按Ctrl-Enter查看一下效果,可以看到文字順時針不停旋轉(zhuǎn)。下面我們回到主場景,點時間軸窗口的新建兩個圖層,在中間一層的第2幀按下F6插入關(guān)鍵幀。點最下面層也就是起初有文字的那一層的第1幀,按下Ctrl-C把文字圖符復(fù)制到剪帖板上,再點中間層的第2幀,按下Ctrl+Shift-V把剪帖的文字圖符粘帖到剛才復(fù)制時的位置上。然后在中間層的第21幀按下F6鍵,然后雙擊中間層的第1幀,設(shè)置幀屬性與剛才相同,參見上圖設(shè)置。同樣,對于最上面層,我們在第3幀按下F6鍵插入關(guān)鍵幀,然后再按Ctrl+Shift-V鍵粘帖剛才復(fù)制的內(nèi)容。在第22幀上按F6再插入一關(guān)鍵幀,雙擊第1幀設(shè)置幀屬性同上所述?,F(xiàn)在時間軸的分布應(yīng)如下圖所示?,F(xiàn)在我們再來看一下效果,在文字旋轉(zhuǎn)時會分成三個連續(xù)的旋轉(zhuǎn)過程。為了達(dá)到殘影的效果,我們需要改變上面兩層文字透明度,使它們看上去顏色淡一些。先修改中間層,為了便于操作,我們把其它兩層都鎖住。選擇第2層的第2幀,雙擊場景中的文字,進(jìn)入實例屬性對話框,在Color標(biāo)簽下把Alpha值改為70。對第21幀做同樣的操作。接著修改最上面層,鎖住中間層,對最上面的層解鎖,選擇第3幀,把Alpha值改為40。對第22幀做同樣的操作?,F(xiàn)在再讓我們來看一下效果,殘影的感覺已經(jīng)有了,只是電影結(jié)尾部分還不十分完善,我們現(xiàn)在在每一層的第30幀分別按F5鍵,這樣每一層都將保留最近的一個關(guān)鍵幀的內(nèi)容直到第30幀。再按Ctrl-Enter,現(xiàn)在的殘影效果似乎已經(jīng)沒有什么可以挑剔的。

知識拓展:(效果圖展示)下面我們來想辦法實現(xiàn)上面這個效果。不難看出,上面的Flash電影先是運(yùn)用了平移的運(yùn)動漸變技術(shù),隨后再運(yùn)用邊旋轉(zhuǎn)邊平移的運(yùn)動漸變。這樣看來,這個效果應(yīng)該是很容易就可以實現(xiàn)的。幸運(yùn)鳥在這里只是想拋磚引玉,提供給大家一種應(yīng)用殘影技術(shù)的思路。具體的制作過程就不再多講了,只是想再強(qiáng)調(diào)兩點在制作中需要注意的地方。一是大家注意到旋轉(zhuǎn)的中心點并不是在文字的正中間,而是在偏右一些的地方。我們可以利用本節(jié)首的Flash動畫源文件,對它的圖符再稍稍編輯一下。在圖符編輯窗口下,用鍵盤上的方向左鍵把文字向左移動一些,使得十字定位點位于文字偏右的位置上,見右圖。二是為了產(chǎn)生文字在旋轉(zhuǎn)后趨于穩(wěn)定的效果,我們加入了對運(yùn)動漸變的Easing設(shè)定。我們在前面講過,使用Easing參數(shù)可以改變運(yùn)動的節(jié)奏,在一般情況下Easing為0表示勻速運(yùn)動,在它大于0時減速,小于0時加速。我們在這里設(shè)置Easing值為80,如下圖所示,使旋轉(zhuǎn)的節(jié)奏在最后趨緩。同樣,我們可以設(shè)置平移運(yùn)動的Easing為小于0的某值,使得平移作加速運(yùn)動,以便平移與旋轉(zhuǎn)二者很好地銜接。這個動畫其它的部分大家應(yīng)該都會做了,做好后的時間軸如下圖所示。大家可以試著做一做,還可以考慮加入導(dǎo)向?qū)涌刂莆淖值囊苿勇窂?,以及加上色彩的變化等。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成作品一。上機(jī)作業(yè)二:(選做提高題)在作品一的基礎(chǔ)上完成作品二。教學(xué)反思:FLASH入門動畫(十一)教學(xué)目標(biāo):①通過遮罩效果制作實例,掌握遮罩層使用及含義;②會靈活運(yùn)用遮罩層的技術(shù),產(chǎn)生風(fēng)格各異的效果來;=3\*GB3③會完成flash的第十一個任務(wù)——遮罩效果工作任務(wù):任務(wù)十一:遮罩效果實踐操作:展示效果圖:這一節(jié)我們來學(xué)習(xí)遮罩。這是一個比較簡單但應(yīng)用廣泛的技術(shù)。如果運(yùn)用得當(dāng),可以產(chǎn)生某些特殊的效果。上面的例子就是遮罩的一種表現(xiàn)形式。下面我們來看一下它是怎么實現(xiàn)的。首先,新建一個Flash文件。按Ctrl-M把電影屬性修改為長條形,大約400X100,背景選天藍(lán)色。然后,選文字工具在場景中輸入“新閃光時代”幾個字。設(shè)置字的顏色為白色,字體為隸書,調(diào)整字號至合適大小。新建一個層,這個層應(yīng)該在文字層的上面。在該層中用橢圓工具繪制一個圓形,顏色無所謂,但要求其直徑要大于剛才輸入的文字高度。選中圓,按F8把它轉(zhuǎn)換成一個圖形類圖符,因為我們在后面要多次調(diào)用。當(dāng)然,不轉(zhuǎn)換也可以,只不過在圓漸變運(yùn)動時,要選擇形體漸變,而不是運(yùn)動漸變。不論是用圖符還是用形體,效果都一樣。這里用圖符。把圓拖到文字的左面如下圖所示:然后我們還在這一層第25幀按下F6鍵新建一個關(guān)鍵幀,再在第50幀按下F6鍵?,F(xiàn)在這兩幀都和第1幀具有相同的內(nèi)容。我們還在打算讓圓先從左向右移動到文字右端,再移回文字左端。所以在第25幀,我們用鍵盤上的方向右鍵把圓從左端移到文字右端,見下圖。移動時可以按下Shift鍵,這樣移動起來會快一些。用鍵盤而不用鼠標(biāo)移動的好處是移動后無需進(jìn)行水平對齊。在圓所在層的第1幀,雙擊鼠標(biāo)左鍵,設(shè)置漸變方式為運(yùn)動漸變,怎么設(shè)不用我再多說了吧。同樣,在第25幀也如是操作。因為第50幀和第1幀內(nèi)容相同,所以不需要再做什么。在圓所在層點鼠標(biāo)右鍵,在彈出的菜單中選擇Mask,也就是把這一層變?yōu)檎谡謱樱旅娴奈淖謱右沧詣幼兂蔀楸徽谡謱?。我們注意到文字只在?幀里有內(nèi)容,為了在整個動畫過程中文字都能顯示出來,我們在文字層的第50幀按F5鍵,這樣該層所有幀的內(nèi)容將和第1幀相同。好了,現(xiàn)在我們來看一看效果,應(yīng)該差不多了,遮罩的感覺已經(jīng)有了?,F(xiàn)在大家應(yīng)該明白為什么圓是什么顏色無關(guān)緊要了吧。因為遮罩就是把遮罩層中對象以外的部分遮蓋住,而只顯示透過對象的被遮罩層的內(nèi)容。所以我們看到的文字的顏色是被遮罩層的,與遮罩層無關(guān)。為了使動畫的效果更明顯一些,我們可以在最下面放上淺一些顏色的文字做底色。我們選中圓所在層,再點新建一個層,把這個新建的層拖到最下面來。在文字層中選中文字,按Ctrl-C復(fù)制,再回到最下層,按Ctrl+Shift-V把文字粘帖到原來的位置上。在文字上雙擊鼠標(biāo)左鍵,進(jìn)入實例屬性對話框。在Color標(biāo)簽下把Alpha值改到50或以下,讓文字顯得透明一些。你也可以把文字打散再填充灰藍(lán)一些的顏色。然后我們選中第50幀,按F5鍵,讓之間所有幀的內(nèi)容與第1幀相同。

現(xiàn)在動畫的效果是不是更好一些了呢?

知識拓展:(效果圖展示)咦,這個作品我們不是在前面做過了嗎,怎么又拿出來了?呵呵,先別急,上面這個例子的效果的確在前面出現(xiàn)過,也就是文字的鏤空效果。不過相同的效果可以用不同的方法來實現(xiàn),我們現(xiàn)在就介紹用遮罩來實現(xiàn)文字鏤空效果的方法。大家還記得我們用的是什么方法嗎?簡單地說,那一節(jié)中我們先要做一個鏤空的色帶,也就是先要畫一個和電影屬性中的設(shè)置同樣大小的矩形覆蓋背景,矩形的填充色和我網(wǎng)頁的背景色相同,再在上面寫上文字,把文字打散融于這個矩形中,再把文字刪掉就形成了鏤空。然后讓圖片在下面移動,就可以得到上面的效果。那么如果我們用遮罩又該怎樣實現(xiàn)呢?其實,方法就更簡單了。首先,我們先按Ctrl-M把電影文件的屬性設(shè)置成與第十節(jié)中這個例子同樣的寬度和高度,將背景色設(shè)置為與網(wǎng)頁背景色相同的天藍(lán)色。在設(shè)置電影文件屬性的背景色時,因為Flash中只提供了部分顏色可供選擇,如果沒有自己想要的顏色怎么辦呢?這里提供一個小竅門。下面的顏色面板是我們在按下Ctrl-M,點擊Background所對應(yīng)的Color按鈕后所得的背景色選擇面板。先隨便選一個顏色退出電影屬性設(shè)置。然后我們點繪圖工具欄中的顏料桶工具,也可以點矩形,橢圓或筆刷工具等,在其下的參數(shù)修改器中找改顏色的按鈕,進(jìn)入顏色選擇面板。點進(jìn)入顏色設(shè)置對話框,在Solid標(biāo)簽下,我們按New新建一個色值,使用顏色區(qū)選擇一種顏色或直接在R,G,B輸入框中填上色值,我在這里分別填上0,112,170,如下圖所示,在預(yù)覽窗口可以看到現(xiàn)在的顏色已經(jīng)和我網(wǎng)頁的背景色一樣了。按Change把設(shè)好的顏色保存下來。點顏色設(shè)置窗口右上角的X關(guān)掉這個窗口。再按Ctrl-M進(jìn)入電影屬性設(shè)置面板,點Background下對應(yīng)的顏色按鈕,進(jìn)入背景色選擇面板,這時我們發(fā)現(xiàn)剛才新建好的天藍(lán)色已經(jīng)出現(xiàn)在顏色選擇面板的最下方了,如下圖所示,選擇它就行了?,F(xiàn)在背景色已經(jīng)設(shè)置成我們需要的顏色了。然后,我們在這一層上寫上文字“新閃光時代”,字體字號及位置與第十節(jié)中鏤空效果的文字相同。新建一個層,把這個層拖到文字層的下面來。還把上次用的圖片放到這一層中,且使該層的內(nèi)容和設(shè)置與第十節(jié)中鏤空效果示例中的圖片層完全一致?,F(xiàn)在我們在文字層的第40幀按F5鍵,保持文字在這40幀里的持續(xù)顯示。然后我們在文字層的點鼠標(biāo)右鍵,在彈出的窗口中選Mask,則圖片層自動成為被遮罩層。設(shè)置好的時間軸窗口如下圖所示:現(xiàn)在我們來看一下效果。按Ctrl-Enter。怎么樣,和第十節(jié)我們講過的效果一樣吧。這種方法好象還要簡單些。與我們這一節(jié)開頭的那個示例比較一下,看看兩者有什么不同。是的,本節(jié)開頭的示例中是移動遮罩層中的對象,而這個示例是移動被遮罩層中的對象,這樣就會形成截然不同的效果了??磥?,靈活運(yùn)用相同的技術(shù),我們也可以產(chǎn)生風(fēng)格各異的效果來。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成作品一。上機(jī)作業(yè)二:(選做提高題)在作品一的基礎(chǔ)上完成作品二。教學(xué)反思:FLASH入門動畫(十二)教學(xué)目標(biāo):①通過放大鏡效果制作實例,進(jìn)一步掌握遮罩層使用及含義;②會靈活運(yùn)用遮罩層的技術(shù),產(chǎn)生風(fēng)格各異的效果來;=3\*GB3③會完成flash的第十二個任務(wù)——放大鏡效果工作任務(wù):任務(wù)十二:放大鏡效果實踐操作:展示效果圖:在這一節(jié)中,我們將利用上一節(jié)學(xué)過的遮罩來實現(xiàn)一個放大鏡的效果。因為講解所需的圖片比較多,所以載入時間也許會長一些,還請大家多等一會兒,因為這一節(jié)的內(nèi)容既重要又有趣,不學(xué)可惜了耶。上面的示例做得還不錯吧,呵呵,也花了我不少時間呢?,F(xiàn)在我就一步一步地來詳細(xì)說明制作過程。新建一個文件。按Ctrl-M把電影屬性設(shè)置為525pxX120px,天藍(lán)色背景。選繪圖工具欄中的文字工具,用黑體48號字選擇白色在工作區(qū)中間寫上“新閃光時代”五個字。略微放大這幾個字到如下圖所示大小,怎么放大不用我多說了吧。雙擊這一層文字“Layer1”,將名字改為“BackgroundText”。在這一層上新建一個層,命名為“MagnifiedText”,這一層將用于顯示放大了的文字。還用文字工具選黑體72號字,用稍有些灰的白色在這一層仍寫上“新閃光時代”五個字。顏色的選用是根據(jù)物理上光學(xué)的知識,放大后的字會損失一部分光線,所以選擇稍灰暗一些的顏色。現(xiàn)在兩層文字重疊在一起。我們的思路是當(dāng)放大鏡從待放大的字的左端移到右端,也就是滑過這五個字時,在放大鏡里也正好同步顯示這五個字,但問題是這兩層中的文字不一樣長度,這就需要我們在動畫過程中還要稍稍向左移動這一層上的文字,使得兩層中的文字起點和終點盡量接近。方法如下:在MagnifiedText層里把72號字的左端移動到下圖所示的位置上,使兩層中的文字左端位置比較接近。然后我們在第40幀里按F6生成關(guān)鍵幀。在BackgroundText層里的第40幀按F5保持第1幀的內(nèi)容?;氐組agnifiedText層里的第40幀上,用鍵盤上的方向鍵把文字向左移動到下圖所示位置上。然后在第1幀雙擊鼠標(biāo)左鍵設(shè)置從第1幀到第40幀的運(yùn)動漸變。下面我們來設(shè)置遮罩層使放大的文字在特定的區(qū)域里才能顯示。在最上面新建一個層,起名為“MaskTopText”,如果新建層不在最上面,把它拖到最上面即可。用橢圓工具畫一個不帶邊線的圓,代表放大鏡,顏色無所謂,直徑比放大層中文字要稍大一些,位置如下圖所示。當(dāng)設(shè)置此層為遮罩層后,只有圓形中的被遮罩層的內(nèi)容才能被顯示出來。為了方便調(diào)用,用箭頭工具選取圓,按F8把它轉(zhuǎn)換為圖形類圖符。在這一層的第40幀按F6插入關(guān)鍵幀,并把圓向右移動到下圖所示位置。雙擊第1幀設(shè)置幀屬性為運(yùn)動漸變。在這一層上點鼠標(biāo)右鍵,在彈出的菜單上選Mask設(shè)為遮罩層,這時下面放大的文字所在層自動成為被遮罩層?,F(xiàn)在我們來觀察一下效果。按Ctrl-Enter發(fā)現(xiàn)隨著圓形的移動,放大的效果已經(jīng)出來了。不過放大的文字下方卻還可以看得到背景文字,這是不真實的,所以我們還要再改進(jìn)一些??磥砦覀兊脤ψ钕旅娴谋尘拔淖忠布右粋€遮罩層,讓代表放大鏡的圓所過之處的背景文字不被顯示。選擇BackgroundText層,點新建一個層,新建的層將位于最下面的文字層上方,給它起名為“MaskBottomText”。在這一層上,我們用矩形工具,以任意填充色(不要與圓的顏色相同)繪出一個不帶邊線的矩形,長度約為1050px,也就是電影屬性設(shè)置的長度的2倍,寬度大約110px,把它放在如下圖所示的位置上。因為這個矩形太長了,這里放不下所以縮小了一半顯示。由于這個矩形所在層的緣故,它遮住了下面的背景文字層,而放大的文字層及其遮罩層上的內(nèi)容可以顯示出來?,F(xiàn)在我們把放大的文字所在層隱藏起來,讓編輯區(qū)里只能看見矩形和圓形。選擇圓形,按Ctrl-C復(fù)制,然后把圓所在層也隱藏起來。選擇矩形所在層,按Ctrl+Shift-V把圓形復(fù)制到這一層原來的位置上,按Ctrl-B把它打散,如下圖所示:然后我們用箭頭工具在圓的外面拉出一個比矩形的高度要大一些的框選中矩形的一部分和整個圓,見下圖。這一步的作用是使圓和矩形融合在一起。在矩形外點一下,取消對這部分區(qū)域的選擇,再一次用鼠標(biāo)點選圓形,按Delete鍵把圓刪除,得到下面所示的圖形:這是一個鏤空的色帶,與以前所講不同的是,這次鏤空的部分是一個圖形而不是文字。而且,我們用它來作遮罩時,有形體的部分下面的內(nèi)容將正常顯示,而中間被鏤空的部分下的內(nèi)容無法顯示出來,這實際上與鏤空的概念是截然相反的,但這個效果正是我們希望的。用箭頭工具拉一個大框套住全部矩形,按F8把它轉(zhuǎn)換為圖形類圖符,以方便調(diào)用。在矩形所在層的的第40幀按F6新建一個關(guān)鍵幀。把這個鏤空的矩形移到下圖所示位置。這個位置的確定是由代表放大鏡的圓的位置所決定的。我們可以對圓所在層恢復(fù)顯示,讓鏤空的矩形中間的空洞在第40幀正好對準(zhǔn)代表放大鏡的圓。在矩形所在層的第1幀設(shè)置幀屬性為運(yùn)動漸變。然后,用鼠標(biāo)右鍵點擊這一層,在彈出的菜單中選擇Mask?,F(xiàn)在我們再來看一下結(jié)果,按下Ctrl-Enter發(fā)現(xiàn),放大鏡效果已經(jīng)是非常明顯的了。為了產(chǎn)生更好的效果,我們再來動手做一個放大鏡加上去,使得效果真加逼真一些。按Ctrl-F8新建一個圖形類圖符。進(jìn)入圖符編輯畫面,按下Ctrl-L打開圖庫窗口。從預(yù)覽窗口中把圓形圖符拖動在編輯區(qū)中,使它中心的十字與編輯區(qū)中心的十字重合。按下Ctrl-B把它打散,再按Ctrl-X把它剪切到剪帖板中。我們再從預(yù)覽窗口中拖一個圓形圖符到編輯畫面中,將它的中心與編輯區(qū)中心的十字重合,如下圖一所示。在圓上點鼠標(biāo)右鍵選Scale。拉動右下角的手柄把圓放大一點,發(fā)現(xiàn)圓的中心并沒有移動,見下圖二。按Ctrl-B把圓打散,用顏料桶工具給圓填充黑色,如圖三所示。

圖一圖二圖三圖四圖五然后,我們按Ctrl+Shift-V把剛才剪取的圓粘帖到原來的位置上,在圖形外面點一下,如圖四所示,這時兩個圓已經(jīng)很好地融合在一起了。點取中間淺黃色的圓,按Delete鍵把它刪掉,就得到圖五中所示的圖形。如果愿意,我們還可以用墨水瓶工具給圖五中的圖形加上適當(dāng)顏色的輪廓線?,F(xiàn)在,放大鏡的透鏡部分我們已經(jīng)做好了,下面來制作手柄。還是在透鏡的編輯窗口下,在另一個區(qū)域里選擇矩形工具拉出一個如下圖六所示的用從暗黑到黑的線性漸進(jìn)色填充的矩形。然后我們用箭頭工具將其下面的三條邊拉出一些弧度來,見圖七。在手柄上點鼠標(biāo)右鍵選Rotate將手柄旋轉(zhuǎn)一個角度,見圖八?,F(xiàn)在我們就把手柄也做好了。如果對手柄的粗細(xì)不滿意,還可以適當(dāng)放縮。圖九是手柄的最終樣式。圖六圖七圖八圖九把手柄移動到透鏡下方適當(dāng)位置處,就得到了完整的放大鏡,見下圖?;氐街鲌鼍?,在最上面新建一個層,在這個層上把放大鏡圖符調(diào)入,同樣在40幀插入關(guān)鍵幀,在第1幀設(shè)置運(yùn)動漸變。使從第1到第40幀里,放大鏡的透鏡始終與MaskTopText層中的圓形位置重合。這樣,我們的工作就基本上做完了。為了使動畫更連續(xù),我們在第80幀插入關(guān)鍵幀,并制作放大鏡移回的動畫。這個大家自己完成吧。對了,因為電影屬性中背景不夠大,我們還需要按Ctrl-M把高度設(shè)置為210px。這樣一個完整的放大鏡動畫就全部做好了。做好后的時間軸應(yīng)如下圖所示。作業(yè)練習(xí):上機(jī)作業(yè)一:按照教師所展示的效果圖模仿完成作品。教學(xué)反思:FLASH入門動畫(十三)教學(xué)目標(biāo):①通過放大鏡效果制作實例,進(jìn)一步掌握遮罩層使用及含義;②會靈活運(yùn)用遮罩層的技術(shù),產(chǎn)生風(fēng)格各異的效果來;=3\*GB3③會完成flash的第十三個任務(wù)—

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論