Transcript FLASH动画制作----游动的鱼

退出
上 课
Flash
动
画
制
作
瓯海白象职中 李霞
前一页
退出
后一页
Flash动画制作 —— 游动的鱼
教学目标
认知目标：
1了解图符idName的设置。
2 掌握attachMovie的用法。
3 掌握利用两点坐标求角度：Math.atan2(y2-y1,x2-x1)
能力目标：
1 提高学生面向对象ActionScript脚本编程能力。
2 提高学生艺术设计，以及艺术实现的能力。
3 促进学生在实践中学习，学习中应用的能力。
情感目标：
通过Flash炫目的效果来激发学生的学习动机，培养
学习兴趣。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
1 激趣——作品展示
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
2 夯基——鱼头、鱼鳍和鱼身图符的绘制
（1）打开Flash，建立影片，设置好场景大小、背
景颜色和帧频。
（2）制作鱼头。新建影片剪辑叫“鱼头”。
idName
选中
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
进入符号编辑区，使用绘图工具绘制一个鱼头，可以
使用椭圆工具先绘制一个椭圆，然后使用箭头工具对
其进行调整，最后再用椭圆工具绘制两个眼睛。
提示：使用箭头工具指向打散图形的边缘，当箭头尾
部出现一个小圆弧时，按住鼠标左键拖动，就可以编
辑图形的形状了。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
(3)鱼头做好后，接下来制作鱼身。新建影片剪辑，名
为“鱼身”。绘制出如下形状并设定一个渐变色填充。
也要给它设定一个idName。在库中右键点击鱼身符
号，在弹出菜单中选“链接…”。接着在弹出的链接属
性对话框中，在标识符栏里填入“body”。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
(4)最后来制作鱼鳍。再新建影片剪辑，名叫鱼鳍，idName
为“fin”。进入编辑区，在第1帧绘制出鱼鳍的形状。
分别在第15帧和第30帧按F6插入关键帧。我
们要做鱼鳍来回扇动的动画。来到第15帧，用
箭头工具编辑形状并用混色器面板调节一下颜
色。最后将第1帧和第15帧都设为形状渐变。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
3 聚焦——如何让鱼儿游动起来
4 探究——旧知识向新知识迁移
1)合作探究能否采用逐帧动画实现效果。
2)合作探究能否采用运动动画实现效果。
3)合作探究能否采用变形动画实现效果。
4)合作探究采用ActionScript脚本实现效果的可能。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
5 导学——师生合作利用ActionScript脚本实现效果
1) 师生合作讨论在场景的第1帧应加入如下动作：
// 初始化鱼儿
N = 20; //鱼的长度
for (i=1; i<N; i++) {
if (i == 1) { //第1节是鱼头
attachMovie("head", "Pieza"+i, (N+1)-i);
} else if ((i == 4) || (i == 14)) { //第4和14节是2个鱼鳍
attachMovie("fin", "Pieza"+i, (N+1)-i);
} else { //其它的都是鱼身
attachMovie("body", "Pieza"+i, (N+1)-i);
}
//设置大小和透明度
this["Pieza"+i]._xscale = 100-3*i;
this["Pieza"+i]._yscale = 100-3*i;
this["Pieza"+i]._alpha = 100-((100/N)*i);
}
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
技术支持：
attachMovie的用法：
myMovieClip.attachMovie( idName, newName, depth [, initObject] )
作用：从库中取一个元件并将其附加到舞台上由 MovieClip 指定的影片中。
参数：idName 库中要附加到舞台上某影片剪辑的影片剪辑元件的链接名称。
newname 附加到该影片剪辑的影片剪辑实例的唯一名称。
depth 一个整数，指定影片所放位置的深度级别。
initObject 一个包含属性的对象，这些属性可用于填充新附加的影片剪辑。
返回: 无
说明:使用 removeMovieClip 或 unloadMovie 动作或
方法可删除用 attachMovie 附加的影片。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
2)师生合作讨论在场景的第2帧应加入如下动作：
//此帧控制鱼的移动
R = 12; //调节移动速度的参数
//控制鱼头跟随鼠标移动
Pieza1._x+=(_xmouse-Pieza1._x)/R;
Pieza1._y+=(_ymouse-Pieza1._y)/R;
//控制鱼头转向鼠标的方向
Pieza1._rotation = 57.29578*Math.atan2(_ymousePieza1._y,_xmouse-Pieza1._x);
//控制鱼身跟随鱼头
for (i=2; i<N; i++) {
this["Pieza"+i]._x+=(this["Pieza"+(i-1)]._x-this["Pieza"+i]._x)/2;
this["Pieza"+i]._y+=(this["Pieza"+(i-1)]._y-this["Pieza"+i]._y)/2;
this["Pieza"+i]._rotation=57.29578*Math.atan2(this["Pieza"+(i-1)]._ythis["Pieza"+i]._y,this["Pieza"+(i-1)]._x-this["Pieza"+i]._x);
}
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
技术支持：
Math.atan2(y, x)
参数：
x 一个数字，指定点的 x 坐标。
y 一个数字，指定点的 y 坐标。
返回：一个数字。
说明：
功能:以弧度为单位计算并返回 y/x 的反正切值。返回值表示
相对直角三角形对角的角，其中 x 是临边边长，而 y 是对边
边长。
就是根据点的坐标来求角。但它返回的是个弧度值，我们还
要把它转变成度数才能用到_rotation属性中。公式：
度数=弧度*180/3.14159265=弧度*57.29578
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
3)师生合作讨论在场景的第3帧action只需一句：
gotoAndPlay(2);
返回第2帧，做成一个循环，使鱼儿不停游动。
6 模仿——学生试用ActionScript脚本实现效果
1 学生进行合作实践“游动的鱼”效果的实现。
2 教师进行巡回指导与答疑
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
7 突破——作品制作步骤小结。
课堂小结：引导学生对“游动的鱼“作品制作步骤进
行小
结，教师加以整理(展示板书）。
8 升华
作业：
1、美化自己的作品。
2、自行创意，设计与制作一个鼠标跟随效果有关的作品。
前一页
主页
后一页
Flash动画制作 —— 游动的鱼
板书设计
“游动的鱼”作品分析与实现
图符
鱼头
鱼身
分析
游动的鱼
实现
ActionScript脚本
鱼鳍
作业:
1美化自己的作品。
2自行创意，设计与制作一个鼠标
跟随效果有关的作品。
第一帧:鱼的生成
第二帧:鱼的游动
第三帧:循环转第二帧
前一页
主页
后一页