中職 網(wǎng)頁動畫制作實訓(xùn)拓展練習(xí)題項目10-14 練習(xí)題+答案 2021-2022學(xué)年高二上學(xué)期

中職網(wǎng)頁動畫制作實訓(xùn)拓展練習(xí)題項目10-14練習(xí)題+答案2021-2022學(xué)年高二上學(xué)期高教版中職網(wǎng)頁動畫制作實訓(xùn)拓展練習(xí)題項目10-14練習(xí)題+答案2021-2022學(xué)年高二上學(xué)期高教版中職網(wǎng)頁動畫制作實訓(xùn)拓展練習(xí)題項目10-14練習(xí)題+答案2021-2022學(xué)年高二上學(xué)期高教版網(wǎng)頁動畫制作實訓(xùn)拓展練習(xí)題項目10-14

項目十快樂的生日——電子賀卡的制作拓展訓(xùn)練題：利用flash制作生日賀卡制作步驟：一、新建文檔，默認或根據(jù)你自己的需要設(shè)定。二、導(dǎo)入材料。把一些照片、花朵、相框、蛋糕、生日歌等素材都導(dǎo)入到庫里備用。（這些素材也可以在網(wǎng)上找）三、制作元件。1．新建一個圖形元件名為"花"，把花朵素材拖到場景中，居中對齊（我一般喜歡這樣）。2．回到主場景中，把"花"拖到舞臺布置場景?？梢栽谶@里多放一些花朵，根據(jù)需要布滿場景。布置好后全部選中，點擊右鍵轉(zhuǎn)換為影片剪輯元件，名為“花組”。選定元件，從菜單執(zhí)行插入--時間軸特效--效果--分離命令。分離方向選向上，其它設(shè)置默認就可以了，然后確定。系統(tǒng)會自動產(chǎn)生分離效果，并生成“分離1”影片剪輯。清除層上的幀。把“分離1”元件拖放到這一層。再做一次分離命令，這次把分離方向選向下。這次產(chǎn)生“分離2”元件。清除層上的幀。3．繪制燭光。新建影片剪輯元件，命名為“燭光”。點圖層一的第一幀選橢圓工具，設(shè)無筆觸，填充為放射狀。打開混色器面板，色碼從左到右為：#FFFFCCAlpha0%、#FFE1CCAlpha60%、#FFD8CCAlpha20%、#FFCCCC，Alpha0%。在場影中畫一個95*95像素的正圓，全居中。分別在第5、10、15、20幀插入關(guān)鍵幀，用填充變型工具調(diào)整光暈，然后改變Y軸的位置-4、-10、0、-9、-4，做形狀補間使它有動的效果，鎖定該層。新建圖層二，點選第一幀，用橢圓工具選筆觸無，填充色為放射狀，打開混色器面板，調(diào)整色碼為：#FFFFCC、#FD6602，畫一個橢圓作火苗。用填充變形工具調(diào)整高光點。在第5、10、15、20幀分別插入關(guān)鍵幀，用選擇工具調(diào)整各關(guān)鍵幀的火苗狀作形狀補間使它有動的效果。添加圖層三，用矩形工具畫一個白色的蠟心線在燭光中放好位置。4．新建影片剪輯元件，名為“蠟燭”。圖層一，畫一個圓柱形作為燭柱。在舞臺中居中對齊。新建圖層二，把“燭光”元件放在燭柱上。5．新建影片剪輯元件，名為“生日蛋糕”。圖層一，擺上蛋糕圖片。圖層二，擺放“蠟燭”元件。6．新建按鈕元件。在圖層一，輸入打開賀卡文字。在圖層二用矩形工具畫個矩形，在“彈起”“指針經(jīng)過”“按下”“點擊”各幀分別設(shè)置效果。四、主要任務(wù)：組裝場景。順序從下至上。1.圖層一，點第一幀，從庫中把作封面的圖片拖入舞臺，在對齊面板中匹配大小，全居中。分別在第2、35幀插入關(guān)鍵幀。作第2-35幀的動畫補間，選定第35幀，縮小該圖并將其Alpha設(shè)為為0。在第36幀插入空白關(guān)鍵幀，從庫中另選圖片插入來作背景圖。在第440幀插入幀。2．圖層二，在第二幀插入空白關(guān)鍵幀，加入生日快樂標(biāo)題，擺放好位置。隨你喜歡作補間動畫效果。3．圖層三，在第250幀插入空白關(guān)鍵幀，加入生日祝福語。4．圖層四，在第二幀插入空白關(guān)鍵幀，把“生日蛋糕”元件加入，做從下到上的動作補間，至第100幀。然后在第250、260幀分別插入關(guān)鍵幀，將第260幀的元件縮小到右下角，做250-260幀之間的動作補間。5．圖層五，在第二幀插入空白關(guān)鍵幀，把“分離2”元件拖動到舞臺，放置好中間位置。插入幀到第60幀。將后面的幀刪除掉。6．圖層六，在庫里把裝飾的邊框和星星拖動到舞臺放置好。7．圖層七，在第一幀把按鈕放進來。然后選中按鈕，打開動作面板，輸入語句：on(release){play();}把第二幀及后的幀全部刪除。8．圖層八，點第一幀的空白關(guān)鍵幀，打開動作面板，輸入語句：stop();//停在第一幀，就是卡面上。在第二幀插入空白關(guān)鍵幀，從屬性中聲音選項里把生日歌的音樂選上，同步：數(shù)據(jù)流。

項目十一陽光小寶貝——電子相冊的制作拓展訓(xùn)練：利用flash制作自己的電子相冊制作步驟：1．自己預(yù)備圖片。2．新建立Flash文檔，然后按Ctrl+J修改文檔屬性：3．執(zhí)行“文件”>“導(dǎo)入”>“導(dǎo)入到庫”命令，把所有圖片都導(dǎo)入到庫里面，之后你可以按Ctrl+L查看庫中是否已經(jīng)有導(dǎo)入的圖片了。4．雙擊圖層1改名為pictures。5．然后分別在第2幀、第3幀、第4幀按F6插入關(guān)鍵幀，效果如圖1：圖1第2、3、4幀插入關(guān)鍵幀6.回到第1幀，按Ctrl+L打開庫，然后使用鼠標(biāo)把第一幅圖片拖拽到舞臺合適位置。7．然后選擇圖片，按Ctrl+K打開對齊面板，設(shè)置如圖2：圖2對齊面板的設(shè)置8.然后同樣方法把庫中相應(yīng)的圖片分別放到第2幀、第3幀、第4幀上，并且按照步驟7的方法把圖片分別對齊。最后鎖定該圖層。9．然后制作按鈕，新建立一個圖層改名為buttons：10．然后創(chuàng)建兩個按鈕（你可以自己創(chuàng)建任意外形的按鈕），假如你不會創(chuàng)建按鈕，那么還可以使用Flash自帶的按鈕，執(zhí)行“窗口”>“公用庫”>“按鈕”，可以打開一個按鈕庫，好多種按鈕，你可以選擇自己喜歡的一種，然后放到舞臺上來。11．然后選擇第一個按鈕，然后按F9打開動作面板添加指令：on(release){if(this._currentframe==1){gotoAndStop(this._totalframes);}else{prevFrame();}}12、.選擇第二個按鈕，添加指令：on(release){if(this._currentframe==this._totalframes){gotoAndStop(1);}else{nextFrame();}}13、最后再新建立一個圖層，改名為action。然后為第一幀添加指令：stop();這樣一個簡單的電子相冊就制作好了！按Ctrl+Enter測試吧！Goodluck！

項目十二迪士尼拼圖——Flash小游戲的制作拓展訓(xùn)練：用Flash制作一個類似彈弓的小游戲教程制作步驟：思路是準(zhǔn)備三個小球元件，然后使其中一個可以拖動，使之沿著一條線移動，計算一下移動的角度，最后實現(xiàn)類似彈弓的一個小游戲。網(wǎng)頁教學(xué)網(wǎng)友情提示，本文中的演示動畫在文章最后提供Fla源文件。啟動Flash首先我們繪制兩個元件，非常簡單的。繪制一個小球然后轉(zhuǎn)變?yōu)橛捌糨嬙?，同樣方法再建議一個不同顏色的小球的影片剪輯。然后在主場景中直接輸入如下代碼：attachMovie("sling",

"sling_1",

_root.getNextHighestDepth(),

{_x:20,

_y:200});attachMovie("sling",

"sling_2",

_root.getNextHighestDepth(),

{_x:480,

_y:200});attachMovie("ball",

"ball",

_root.getNextHighestDepth(),

{_x:250,

_y:100});_root.createEmptyMovieClip("elastic",

_root.getNextHighestDepth());ball.onPress

=

function()

{

startDrag(this);};ball.onRelease

=

function()

{

stopDrag();};測試效果如下：然后我們通過修改上面的代碼，在兩個小球之間繪制一條線，可以隨中間小球任意移動。attachMovie("sling",

"sling_1",

_root.getNextHighestDepth(),

{_x:20,

_y:200});attachMovie("sling",

"sling_2",

_root.getNextHighestDepth(),

{_x:480,

_y:200});attachMovie("ball",

"ball",

_root.getNextHighestDepth(),

{_x:250,

_y:100});_root.createEmptyMovieClip("elastic",

_root.getNextHighestDepth());ball.onPress

=

function()

{

startDrag(this);};ball.onRelease

=

function()

{

stopDrag();};elastic.onEnterFrame

=

function()

{

this.clear();

this.lineStyle(2,

0x009900);

this.moveTo(sling_1._x,

sling_1._y);

if

(ball._y>182)

{

dist_x

=

ball._x-sling_1._x;

dist_y

=

ball._y-sling_1._y;

distance_from_sling

=

Math.sqrt(dist_x*dist_x+dist_y*dist_y);

elastic_length

=

Math.sqrt(distance_from_sling*distance_from_sling-18*18);

angle

=

Math.atan2(dist_y,

dist_x)+Math.asin(18/distance_from_sling);

this.lineTo(sling_1._x+elastic_length*Math.cos(angle),

sling_1._y+elastic_length*Math.sin(angle));

}

else

{

this.lineTo(sling_2._x,

sling_2._y);

}

this.moveTo(sling_2._x,

sling_2._y);

if

(ball._y>182)

{

dist_x

=

ball._x-sling_2._x;

dist_y

=

ball._y-sling_2._y;

distance_from_sling

=

Math.sqrt(dist_x*dist_x+dist_y*dist_y);

elastic_length

=

Math.sqrt(distance_from_sling*distance_from_sling-18*18);

angle

=

Math.atan2(dist_y,

dist_x)+Math.asin(18/distance_from_sling)*-1;

this.lineTo(sling_2._x+elastic_length*Math.cos(angle),

sling_2._y+elastic_length*Math.sin(angle));

}

else

{

this.lineTo(sling_2._x,

sling_2._y);

}};

測試效果：在這里我們可以很輕松的計算出小球在線上的角度來。稍微做一下改動。attachMovie("sling",

"sling_1",

_root.getNextHighestDepth(),

{_x:20,

_y:200});attachMovie("sling",

"sling_2",

_root.getNextHighestDepth(),

{_x:480,

_y:200});attachMovie("ball",

"ball",

_root.getNextHighestDepth(),

{_x:250,

_y:100});_root.createEmptyMovieClip("elastic",

_root.getNextHighestDepth());xspeed

=

0;yspeed

=

0;fire

=

false;ball.onPress

=

function()

{

fire

=

false;

startDrag(this);};ball.onRelease

=

function()

{

stopDrag();

fire

=

true;};ball.onEnterFrame

=

function()

{

if

(fire)

{

this._x

+=

(xspeed*0.001);

this._y

+=

(yspeed*0.001);

}};elastic.onEnterFrame

=

function()

{

this.clear();

this.lineStyle(2,

0x009900);

this.moveTo(sling_1._x,

sling_1._y);

if

(ball._y>182)

{

dist_x

=

ball._x-sling_1._x;

dist_y

=

ball._y-sling_1._y;

distance_from_sling

=

Math.sqrt(dist_x*dist_x+dist_y*dist_y);

elastic_length

=

Math.sqrt(distance_from_sling*distance_from_sling-18*18);

angle

=

Math.atan2(dist_y,

dist_x)+Math.asin(18/distance_from_sling);

saved_angle

=

angle;

this.lineTo(sling_1._x+elastic_length*Math.cos(angle),

sling_1._y+elastic_length*Math.sin(angle));

this.lineTo(ball._x,ball._y);

}

else

{

this.lineTo(sling_2._x,

sling_2._y);

}

this.moveTo(sling_2._x,

sling_2._y);

if

(ball._y>182)

{

dist_x

=

ball._x-sling_2._x;

dist_y

=

ball._y-sling_2._y;

distance_from_sling

=

Math.sqrt(dist_x*dist_x+dist_y*dist_y);

elastic_length

=

Math.sqrt(distance_from_sling*distance_from_sling-18*18);

angle

=

Math.atan2(dist_y,

dist_x)+Math.asin(18/distance_from_sling)*-1;

this.lineTo(sling_2._x+elastic_length*Math.cos(angle),

sling_2._y+elastic_length*Math.sin(angle));

this.lineTo(ball._x,ball._y);

}

else

{

this.lineTo(sling_2._x,

sling_2._y);

}};測試效果如下最后我們讓小球自動運動或者你可以用鼠標(biāo)拖動小球。var

ball:MovieClip

=

_root.attachMovie("ball",

"ball",

2,

{_x:250,

_y:100});var

elastic:MovieClip

=

_root.createEmptyMovieClip("elastic",

1);var

point1:MovieClip

=

_root.attachMovie("sling",

"point1",

3,

{_x:50,

_y:200});var

point2:MovieClip

=

_root.attachMovie("sling",

"point2",

4,

{_x:450,

_y:200});var

gravity

=

0.1;var

angle1:Number

=

0;var

angle2:Number

=

0;var

radius:Number

=

13.0;//

Or

whatever

half

the

width

of

your

ball

is.var

elasticCoefficient:Number

=

0.001;//

This

number

will

affect

the

stretchiness

of

the

sling.

The

greater

the

number//

the

tighter

the

elastic

will

be.

var

released:Boolean

=

true;var

forced:Boolean

=

false;var

acc:Object

=

{x:0,

y:0};var

vel:Object

=

{x:0,

y:0};_root.onMouseDown

=

function()

{

ball._x

=

_root._xmouse;

ball._y

=

_root._ymouse;

ball.startDrag();

_root.released

=

false;

vel.x

=

0;

vel.y

=

0;};_root.onMouseUp

=

function()

{

ball.stopDrag();

_root.released

=

true;};ball.onPress

=

function()

{

ball.startDrag();

_root.released

=

false;

vel.x

=

0;

vel.y

=

0;};ball.onRelease

=

function()

{

ball.stopDrag();

_root.released

=

true;};_root.onEnterFrame

=

function()

{

elastic.clear();

elastic.lineStyle(3,

0xFF0000);

if

(released)

{

ball._x

+=

vel.x;

ball._y

+=

vel.y;

}

if

(ball._y>=187)

{

/*

This

area

differs

from

the

code

in

the

tutorial.

The

reason

for

that

is

I

didn’t

read

the

code,

I

just

looked

at

the

examples.

I

try

to

gain

experience

with

problem-solving

by

doing

things

as

close

to

by

myself

as

possible.

*/

forced

=

true;

var

x1:Number

=

ball._x-point1._x;

var

y1:Number

=

ball._y-point1._y;

var

x2:Number

=

point2._x-ball._x;

var

y2:Number

=

point2._y-ball._y;

var

distance1:Number

=

Math.sqrt(x1*x1+y1*y1);

var

distance2:Number

=

Math.sqrt(x2*x2+y2*y2);

_root.angle1

=

Math.atan2(y1,

x1);

_root.angle2

=

Math.atan2(y2,

x2);

var

xOffset:Number

=

Math.cos(angle1+Math.PI/2)*radius;

var

yOffset:Number

=

Math.sin(angle1+Math.PI/2)*radius;

var

xOffset2:Number

=

Math.cos(angle2+Math.PI/2)*radius;

var

yOffset2:Number

=

Math.sin(angle2+Math.PI/2)*radius;

angle1

+=

Math.sin(radius/distance1);

angle2

+=

Math.sin(radius/distance2)*-1;

elastic.moveTo(point1._x,

point1._y);

elastic.lineTo(ball._x+xOffset,

ball._y+yOffset);

elastic.moveTo(point2._x,

point2._y);

elastic.lineTo(ball._x+xOffset2,

ball._y+yOffset2);

}

else

{

forced

=

false;

elastic.moveTo(point1._x,

point1._y);

elastic.lineTo(point2._x,

point2._y);

}

acc.x

=

0;

acc.y

=

0;

acc.y

=

gravity;

if

(released

&&

forced)

{

/*

This

section

applies

the

force

of

the

sling

to

the

ball

in

terms

of

acceleration

based

on

the

stretching

of

the

sling,

in

the

direction

of

the

displacement,

scaled

by

a

coefficient

that

also

encapsulates

the

mass

of

the

ball.

*/

acc.x

+=

distance1*Math.sin(angle2)*elasticCoefficient;

acc.y

+=

-distance1*Math.cos(angle1)*elasticCoefficient;

acc.x

+=

distance2*Math.sin(angle1)*elasticCoefficient;

acc.y

+=

-distance2*Math.cos(angle2)*elasticCoefficient;

}

if

(released)

{

vel.x

+=

acc.x;

vel.y

+=

acc.y;

}};

項目十三開心學(xué)英語——Flash學(xué)習(xí)課件的制作拓展訓(xùn)練：用flash制作一個簡單的課件制作步驟：打開Flash，點擊“文件”-“新建”，在彈出的窗口中選擇“Flash幻燈片演示文檔”，然后點擊“確定”正式進入編輯界面。點擊“插入”-“新建元件”，新建一個名為“背景”的圖形元件，點擊“確定”后進入“背景編輯”界面。選擇“文件”-“導(dǎo)入”-“導(dǎo)入文件到庫”，選擇一個背景圖片導(dǎo)入庫中。雙擊庫中的圖形元件“背景”，進入“背景”元件編輯狀態(tài)，然后將導(dǎo)入到庫中的背景圖片拖入到當(dāng)前窗口中，就完成了“背景”元件的修改操作。點擊窗口左側(cè)的“幻燈片1”進入幻燈片編輯狀態(tài)，將庫中的“背景”元件拖放到當(dāng)前窗口中。然后選擇工具欄中的文字工具，為當(dāng)前幻燈片添加課件標(biāo)題。在“幻燈片1”上右擊，從彈出的菜單中選擇“插入屏幕類型”-“幻燈片”，新建一個新的“幻燈片2”。選擇工具欄中的“選擇”工具，點擊幻燈片1的窗口，然后選擇一種背景色進行填充，然后選擇“文字”工具。在幻燈片2上輸入文本“歡迎交流”文本字樣，并設(shè)置字體的大小和顏色。選擇“幻燈片1”，然后點擊“窗口”→“行為”，打開“行為”面板。點擊“行為“面板中的”+“號，從彈出的的下拉列表中選擇”屏幕“→”轉(zhuǎn)到下一幻燈片“。最后發(fā)布制作的幻燈片文檔。選擇“文件”-“發(fā)布設(shè)置”，打開“發(fā)布設(shè)置”對話框，勾選“Flash（*.,swf）”，輸入要發(fā)布的文件名，最后點擊“發(fā)布”按鈕發(fā)布即可。找到生成的文件”MYDISP.swf“文件，然后右擊，選擇”AdobeFlashPlayer9.0“打開，然后測試效果。當(dāng)點擊第一張幻燈片時就要轉(zhuǎn)到下一張幻燈片上。至此，整個幻燈片制作過程完成。注意事項：制作的幻燈片在播放時需要AdoboFlashPlayer9.0的支持才能正常運行。

項目十四小小童樂園——Flash網(wǎng)站的制作拓展訓(xùn)練：利用所學(xué)知識制作全flash網(wǎng)站制作步驟：制作全Flash網(wǎng)站制作和制作html網(wǎng)站類似，事先應(yīng)先在紙上畫出結(jié)構(gòu)關(guān)系圖，包括：網(wǎng)站的主題、要用什么樣的元素、哪些元素需要重復(fù)使用、元素之間的聯(lián)系、元素如何運動、用什么風(fēng)格的音樂、整個網(wǎng)站可以分成幾個邏輯塊、各個邏輯塊間的聯(lián)系如何以及是否打算用Flash建構(gòu)全站或是只用其做網(wǎng)站的前期部分等等，都應(yīng)在考慮范圍之內(nèi)。實現(xiàn)全Flash網(wǎng)站制作效果多種多樣，但基本原理是相同的：將主場景作為一個"舞臺"，這個舞臺提供標(biāo)準(zhǔn)的長寬比例和整個的版面結(jié)構(gòu)，“演員”就是網(wǎng)站子欄目的具體內(nèi)容，根據(jù)子欄目的內(nèi)容結(jié)構(gòu)可能會再派生出更多的子欄目。主場景作為"舞臺"基礎(chǔ)，基本保持自身的內(nèi)容不變，其它"演員