Flash项目七动画编程给按钮添加动作代码教案.docx

Flash项目七动画编程给按钮添加动作代码教案.docx

《Flash项目七动画编程给按钮添加动作代码教案.docx》由会员分享，可在线阅读，更多相关《Flash项目七动画编程给按钮添加动作代码教案.docx（16页珍藏版）》请在冰豆网上搜索。

Flash项目七动画编程给按钮添加动作代码教案

教案

（2012至2013学年第二学期）

课程名称：

Flash

授课教师：

叶演习

授课班级：

xxx

教研组：

计电组

项目七--动画编程（给按钮添加动作代码）

章节

项目七第二节

周次

第13周

日期

5月20日

课题

给按钮添加动作代码

课时

总课时6节，其中：

理论2节；实训4节。

授课

方式

讲授、演示、练习

作业

题数

2

拟用

时间

270分钟

教学

目的

1、使用代码制作按钮的方法

2、会制作按钮控制帧跳转

3、会使用静态文本、输入文本、动态文本

4、会制作“计算器”

选用教具挂图

教

学

重

点

教学重点：

制作按钮控制帧跳转

解决措施：

演示、操作实践

教

学

难

点

教学难点：

给按钮添加代码

解决措施：

演示、操作实践

教学

回顾

本章内容重点在于掌握按钮控制影片和帧跳转的功能。

通过教师演示与学生实践相结合，当堂练习巩固所学知识，加强学生对知识的理解与掌握。

通过评选优秀作品，调动学生学习积极性，收到了较好的教学效果。

说

明

审阅签名：

年月日

教学过程

教学内容

教学方法

组织教学

5分钟

上课礼仪，清点人数，集中学生注意力

复习

5分钟

案例小结：

放映上一节课同学们的作品“地图感应”，先让同学们互评，老师再做点评。

互动、点评

导入

5分钟

放映动画“精美课件”、“小球的运动”、“计算器”等丰富有趣漂亮的动画效果。

学习完这节课后，我们同样可以制作出精美的作品！

观赏、点评

讲授新课

60分钟

一，按钮元件（2分钟）

按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。

二，按钮控制小球的运动（35分钟）

创建一个用按钮控制动画播放的实例。

动画运行时，一个小球在画面上循环不停的跳动，在画面左上角有两个按钮，分别单击它们可以控制停止和播放小球的动画

讲授演示制作过程：

（1）打开小球动画影片文档

　　执行【文件【|【打开】命令将小球动画影片文档“小球跳动.fla”打开。

打开以后，我们可以先按下Ctrl+Enter组合键对动画进行测试，观察一下动画效果。

在【测试窗口】中我们可以观察到，小球在舞台上一直循环不停的跳动。

下面我们就创建一个按钮对象，用按钮来控制这个小球动画的播放。

（2）创建按钮元件

　从【窗口】选择【公用库】选择【按钮】，找到自己喜欢的按钮，拖动到舞台

（3）引用按钮实例

　①引用第1个按钮

　　现在按下F11打开[库]面板，在其中你会发现一个按钮元件，即我们刚才创建的名字为“播放按钮”按钮元件。

用鼠标单击这个按钮元件的名字，在【库】面板上面可以看到这个元件的预览效果。

拖动鼠标将这个按钮元件从【库】面板拖放到舞台的左上角合适位置。

这个按钮将要定义的功能是，单击它可以让小球动画继续播放。

②引用第2个按钮

　　现在我们还需要一个控制小球动画停止播放的按钮。

再从【库】面板拖放一个按钮元件的实例到舞台左上角，然后执行【修改】|【变形】|【水平翻转】命令，使这个按钮实例水平翻转一下，这样，舞台上就出现了两个不同效果的按钮元件实例了。

说明：

我们在场景中将按钮元件实例更改了效果，并不影响【库】面板中的按钮元件原来的效果。

讲授、演示、操作、

（4）定义按钮的动作脚本

　①定义第1个按钮的动作脚本

　　选择舞台上的第1个按钮，打开【动作】面板，在其中输入on（，这时弹出一个鼠标事件下拉列表，从其中选择【press】，然后输入：

{

　　play（）；

　　}

这样，第一个按钮的动作脚本就定义完成了，完整的动作脚本

是：

　　on（press）

{

　　play（）；

}

这个动作脚本的功能是，当用鼠标单击这个按钮时，舞台上的动画开始播放。

②定义第2个按钮的动作脚本

　　第2个按钮的动作脚本和第1个的定义过程类似，先选择第2个按钮，在[动作]面板中按照前面的方法定义这个按钮的动作脚本是：

　　on（press）{

stop（）；

　　}

这个动作脚本的功能是，当用鼠标单击这个按钮时，舞台上的动画停止播放。

接下来，按下按下Ctrl+Enter组合键测试一下，两个按钮实现控制小球动画播放的效果出来了。

三、思考：

如何让小球从第第一帧跳转到第20帧？

（23分钟）

提示：

on（press）{

gotoAndStop（20）；

　　}

（1）让两位同学上台操作让小球从第一帧跳转到第20帧。

（2）总结点评这两位同学的操作方法。

小结

3分钟

让两个同学默写按钮实现影片播放、停止、帧跳转的代码

再做个点评和小结

默写、点评

布置作业

3分钟

强化练习这节课所学的代码

板书设计

【实训教案】

项目名称

精美课件

学时

1

实训目的

本案例通过制作一个精美课件掌握以下知识点。

1、时间轴控制函数的使用方法；

2、使用代码制作按钮的方法

教学准备

教师机1台、学生机若干、多媒体演示与控制系统、课件、FLASH教材

组织教学

（5分钟）

上课礼仪，清点人数，集中学生注意力

示范演示

（7分钟）

1、打开素材文件。

（1）选择【文件】/【打开】命令，将教学素材中的“素材\项目七\精美课件\精美课件素材.fla”文件打开，舞台效果如图所示

提示：

该文件有4个图层，如图所示。

其中“特效”、“按钮”和“背景”图层中的内容都固定不变，通过在“课件内容”图层中制作内容不同的关键帧来展示知识点。

目前没有添加任何控制代码，测试影片可以发现课件从头到尾进行循环播放，下面就将使用代码控制课件的播放。

2、添加帧控制代码。

（1）在“特效”图层之上新建一个图层并重命名为“AS代码”图层，选中第1帧，按F9键打开【动作－帧】面板，如图所示。

（2）然后在【动作－帧】面板中输入控制代码。

stop（）;

（3）输入完成后，“AS代码”图层的第1帧显示如图所示

3、添加按钮控制代码。

（1）选中舞台左下角的“上一页”按钮元件，按F9 键打开【动作-按钮】面板，输入控制代码

（2）选中“下一页”按钮元件，按F9 键打开【动作－按钮】面板，输入以下控制代码。

（3）选中舞台右下角的“返回”按钮元件，按F9 键打开【动作－按钮】面板，输入以下控制代码。

（4）选中“退出”按钮元件，按F9 键打开【动作－按钮】面板，输入以下控制代码。

（5）保存并测试影片，即可通过单击控制按钮实现课件的跳转。

巡回指导

（30分钟）

部分学生在输入代码的时候出现粗心，或是单词不会拼写，或是在中文状态下编辑代码，是不对的，通过不断地强调，避免出现错误

结束指导

（3分钟）

1、展示点评部分学生作品；

2、总结利用代码实现帧跳转的方法要领。

项目名称

按钮控制帧跳转

学时

1

实训目的

本案例通过制作一个精美课件掌握以下知识点。

1、使用按钮控制帧跳转的方法

教学准备

教师机1台、学生机若干、多媒体演示与控制系统、课件、FLASH教材

组织教学

（5分钟）

上课礼仪，清点人数，集中学生注意力

示范演示

（7分钟）

1、打开教学资源中的“素材\第9讲\制作按钮\制作模板.fla”文件。

2、执行【窗口】/【公用库】/【按钮】菜单命令，打开【库-按钮】面板，如下图1所示。

3、将【classicbuttons】/【PlayBack】目录下的“gelLeft”、“gelRight”、“gelStop”3个按钮元件拖入到“按钮”图层上，并设置位置如下图所示。

4、选中“AS”图层的第1帧，按F9快捷键打开【动作-帧】面板，然后在右边的输入框内输入代码“stop（）;”，如下图1所示。

5、选中舞台中的

按钮，此时【动作-帧】对话框转换为【动作-按钮】面板，然后输入以下代码。

on（press）{

prevFrame（）;

}

此时的【动作-按钮】效果如下图2所示。

强调要点：

在输入代码的时候，请用户务必注意代码的大小写，因为AS是严格区分大小的，如果大小写混淆，运行程序时将报错。

6、选中舞台中的

按钮，在【动作-按钮】面板，输入以下代码。

on（press）{

gotoAndStop

（1）;

}

7、选中舞台中的

按钮，在【动作-按钮】面板，输入以下代码。

on（press）{

nextFrame（）;

}

8、播放测试影片，单击舞台上的按钮，观察影片的变换并思考按钮的制作方法

巡回指导

（30分钟）

部分学生在输入代码的时候出现粗心，或是单词不会拼写，或是在中文状态下编辑代码，是不对的，通过不断地强调，避免出现错误

结束指导

（3分钟）

1、展示点评部分学生作品；

2、总结利用代码实现帧跳转的方法要领。

项目名称

地图感应

学时

2

实训目的

会使用按钮制作地图感应效果

教学准备

教师机1台、学生机若干、多媒体演示与控制系统、课件、FLASH教材

组织教学

（5分钟）

上课礼仪，清点人数，集中学生注意力

示范演示

（20分钟）

广播“计算器”动画，明确任务。

效果图：

（1）运行Flash8.0，新建一个名为“地图感应”的文件，文档大小设为800*600，背景颜色设置为浅蓝色。

（2）导入图片和按钮声音素材：

黑板、猫头鹰博士、书本、书包、文件夹、铅笔、click按钮声音。

（3）把导入的图片素材一一拖进舞台，放置到适当位置，调节大小、透明度、旋转角度，起到装饰作用美化作用，如图

（4）新建图层“等式”，使用静态文本和矩形工具，绘制如图的等式，先做完加法的等式，其他的都可以通过复制绘制出来，如图

（5）新建图层“文本实例”，在加法等式中的加数矩形框里面添加输入文本，选择文本工具，属性改为“输入文本”并且输入实例名为a1和a2，

（6）在加法等式中的和矩形框里面添加动态文本，选择文本工具，属性改为“动态文本”并且输入实例名为t1，如图

（7）新建图层“按钮”，从【窗口】选择【公用库】选择【按钮】，找到自己喜欢的按钮，拖动到舞台加法等式里面，双击进入按钮，修改按钮的文本为“=”，并在指针经过帧加上添加click按钮声音，如图

（8）给按钮添加代码，如图

（9）至此，加法已经完成，减法、乘法、除法同加法，不一样的是给输入文本跟动态文本取不同的实例名，再给等号按钮添加各自的代码，如图

减法

乘法

除法

（10）测试并保存。

巡回指导

（60分钟）

1、部分同学出现代码拼写错误，或是在中文状态下输入。

强调要切换到英文状态下输入代码。

2、有些同学把输入文本跟动态文本实例名弄错，应该有规律地进行命名，才不会混乱。

结束指导

（5分钟）

通过学生作业抽查，明确计算器的制作方法及要点