Flash CS6动画与制作 电信学院.

Presentation on theme: "Flash CS6动画与制作 电信学院."— Presentation transcript:

1 Flash CS6动画与制作 电信学院

2 第5章 游戏制作 教学提示 1 教学重点与难点 2 教学内容 3 本章小结 4

3 第5章 游戏制作 教学提示 本章主要通过“猫鼠游戏”、“飘雪动画”、“猴子看香蕉”和“花瓣动画”4个导入案例来讲解使用ActionScript动作脚本制作交互动画的方法与技巧。最后通过“打飞机游戏”综合项目介绍制作游戏类Flash作品的相关知识技能。

4 第5章 游戏制作 教学重点与难点 Flash编程的基础知识，时间轴控制函数，随机函数，影片剪辑属性及控制函数，影片剪辑的复制与移除，按钮及影片剪辑的事件处理函数，鼠标控制方法，if语句，for语句的使用

5 第5章 游戏制作 教学内容 5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例
5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例 5.5 “花瓣动画”案例 5.6 “打飞机游戏”案例

6 5.1 概述 本节内容 1. 动作脚本概述 2. “动作”面板介绍

7 5.1 概述 一、 动作脚本概述 Flash动画中经常需要实现人和动画的交互以及动画内部各对象的交互。

8 5.1 概述 二、 “动作”面板介绍 1. “动作”面板是Flash的程序编辑环境，它由脚本窗口、脚本命令列表框和脚本导航器共3部分组成

9 第5章 游戏制作 教学内容 5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例
5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例 5.5 “花瓣动画”案例 5.6 “打飞机游戏”案例 9

10 5.2 “猫鼠游戏”案例 本节内容 1. 案例效果 2. 操作步骤 3. 技术拓展

11 5.2 “猫鼠游戏” 案例 一、案例效果 重点与难点：ActionScript动作脚本的应用技巧，按钮的事件处理器函数，时间轴控制函数的使用

12 5.2 “猫鼠游戏” 案例 二、操作步骤 1.新建文档并命名，并把文件保存为“猫鼠游戏” 2.导入图片，制作所需元件

13 5.2 “猫鼠游戏” 案例 二、操作步骤 3.主场景设置 （1） （2） （3） （4）

14 5.2 “猫鼠游戏” 案例 二、操作步骤 4.图层及按钮的动作脚本 “AS”图层第1帧动作脚本 “AS”图层第40帧动作脚本

15 5.2 “猫鼠游戏” 案例 二、操作步骤 “鼠”按钮元件动作脚本 15

16 注意：只能为主时间轴或影片剪辑内的关键帧添加动作脚本，不能为图形元件和按钮元件内的关键帧添加。
5.2 “猫鼠游戏” 案例 三、技术拓展 1、ActionScript脚本的应用技巧 动作脚本又可称为ActionScript脚本，可以添加在关键帧、按钮和影片剪辑实例上。 添加动作脚本后的关键帧会变成 状。 注意：只能为主时间轴或影片剪辑内的关键帧添加动作脚本，不能为图形元件和按钮元件内的关键帧添加。

17 5.2 “猫鼠游戏” 案例 三、技术拓展 2、按钮事件处理函数的使用 on函数的语法格式如下： on（鼠标事件）
5.2 “猫鼠游戏” 案例 三、技术拓展 2、按钮事件处理函数的使用 on函数的语法格式如下： on（鼠标事件） ｛此处是语句，用来响应鼠标事件｝ 缩放舞台三种方法：放大镜工具；视图菜单-缩放比率；工作区右上角 移动舞台：双击手形工具，可以将舞台移动到最合适当前窗口的位置

18 5.2 “猫鼠游戏” 案例 三、技术拓展 3、时间轴控制函数的使用
5.2 “猫鼠游戏” 案例 三、技术拓展 3、时间轴控制函数的使用 时间轴控制函数用来控制时间轴的播放进程，它包括9个简单函数，利用这些函数可以定义动画的一些简单的交互控制。 注意：时间轴控制函数可以添加在关键帧、按钮和影片剪辑实例上，每个函数都包括英文格式的括号，并以英文格式的分号结尾，脚本的书写是区分大小写的。

19 第5章 游戏制作 教学内容 5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例
5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例 5.5 “花瓣动画”案例 5.6 “打飞机游戏”案例 19

20 5.3 “飘雪动画”案例 本节内容 1. 案例效果 2. 操作步骤 3. 技术拓展 4. 练习

21 5.3 “飘雪动画”案例 一、案例效果 重点与难点：随机函数（Random），影片剪辑复制语句（duplicateMovieClip），条件语句（if … else）等的运用，以及对影片剪辑各种属性的作用及设置方法的介绍 21

22 5.3 “飘雪动画”案例 二、操作步骤 1.新建文档并命名，并把文件保存为“飘雪” 2.制作“落雪”元件 （1）制作“雪花”元件
5.3 “飘雪动画”案例 二、操作步骤 1.新建文档并命名，并把文件保存为“飘雪” 2.制作“落雪”元件 （1）制作“雪花”元件 （2）制作“飘雪”元件 22

23 5.3 “飘雪动画”案例 二、操作步骤 （3）制作“落雪”影片剪辑元件 23

24 5.3 “飘雪动画”案例 二、操作步骤 3．制作主场景动画 4．测试并保存影片
5.3 “飘雪动画”案例 二、操作步骤 3．制作主场景动画 4．测试并保存影片 注意：放置两层“落雪”影片剪辑，目的是为了实现雪花下落的层次感。 24

25 5.3 “飘雪动画”案例 三、技术拓展 1．随机函数的使用 随机函数有两种引用格式：random（）和Math.random（）
5.3 “飘雪动画”案例 三、技术拓展 1．随机函数的使用 随机函数有两种引用格式：random（）和Math.random（） （1）random（number）函数 （2）Math.random（）函数 注意：onClipEvent（EnterFrame）为影片剪辑的事件处理器；EnterFrame表示的是播放影片剪辑所在帧时触发本事件，即执行｛｝内的语句。 25

26 5.3 “飘雪动画”案例 三、技术拓展 2．复制/移除影片剪辑 （1）复制影片剪辑duplicateMovieClip语句
5.3 “飘雪动画”案例 三、技术拓展 2．复制/移除影片剪辑 （1）复制影片剪辑duplicateMovieClip语句 （2）复制一个影片剪辑的操作步骤 （3）复制两个影片剪辑 （4）复制多个影片剪辑 （5）移除影片剪辑removeMovieClip语句 缩放舞台三种方法：放大镜工具；视图菜单-缩放比率；工作区右上角 移动舞台：双击手形工具，可以将舞台移动到最合适当前窗口的位置 注意两个问题：①深度不能相同，上例用的变量i表示深度，所以肯定不会相同；②引用动态实例名时，要加上路径，this表示当前路径，语法为“路径["mc"+i]”，此处与点语法不同，中间没有点。 26

27 5.3 “飘雪动画”案例 三、技术拓展 3．影片剪辑属性的设置 （1）_x和_y属性 （2）_width和_height属性
5.3 “飘雪动画”案例 三、技术拓展 3．影片剪辑属性的设置 （1）_x和_y属性 （2）_width和_height属性 （3）_xscale和_yscale属性 （4）_xmouse和_ymouse属性 （5）_alpha属性 （6）_rotation属性 （7）_visible属性 （8）setProperty语句 （9）getProperty语句

28 5.3 “飘雪动画”案例 三、技术拓展 4．条件结构if语句的使用 （1）if语句 （2）else语句 （3）else if语句
5.3 “飘雪动画”案例 三、技术拓展 4．条件结构if语句的使用 （1）if语句 （2）else语句 （3）else if语句 注意：小括号里的条件是一个计算结果为true或false的表达式。本语句作用是当条件计算为true或非0数值时，执行｛｝内的命令。

29 5.3 “飘雪动画”案例 四、练习 制作下雨效果的动画

30 第5章 游戏制作 教学内容 5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例
5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例 5.5 “花瓣动画”案例 5.6 “打飞机游戏”案例 30

31 5.4 “猴子看香蕉”案例 本节内容 1. 案例效果 2. 操作步骤 3. 技术拓展

32 5.4 “猴子看香蕉”案例 一、案例效果 重点与难点：ActionScript动作脚本中影片剪辑元件的处理事件和鼠标拖放操作函数的使用 32

33 5.4 “猴子看香蕉”案例 二、操作步骤 1.新建文档并命名，并把文件保存为“猴子看香蕉” 2.导入图片，制作所需元件 33

34 5.4 “猴子看香蕉”案例 二、操作步骤 3．制作“香蕉”影片剪辑元件 34

35 5.4 “猴子看香蕉”案例 二、操作步骤 4．制作“猴子”影片剪辑元件 35

36 5.4 “猴子看香蕉”案例 二、操作步骤 5．制作猴子“眼睛”影片剪辑元件 36

37 5.4 “猴子看香蕉”案例 二、操作步骤 6．主场景设置 37

38 5.4 “猴子看香蕉”案例 三、技术拓展 1．影片剪辑的事件处理器的使用 onClipEvent的语法格式如下：
5.4 “猴子看香蕉”案例 三、技术拓展 1．影片剪辑的事件处理器的使用 onClipEvent的语法格式如下： onClipEvent（系统事件） ｛此处是语句，用来响应事件｝ 注意：Flash中的事件包括用户事件和系统事件两类。用户事件指的是用户直接交互操作而产生的事件，如单击鼠标、按键盘键等。系统事件指的是Flash自动生成的事件，如影片剪辑在舞台上第1次出现或播放头经过某帧。 38

39 5.4 “猴子看香蕉”案例 三、技术拓展 2．影片剪辑的on事件 3．影片剪辑的拖放操作 （1）startDrag函数
（2）stopDrag函数 缩放舞台三种方法：放大镜工具；视图菜单-缩放比率；工作区右上角 移动舞台：双击手形工具，可以将舞台移动到最合适当前窗口的位置 39

40 5.4 “猴子看香蕉”案例 三、技术拓展 4．眼珠的旋转范围计算 40

41 第5章 游戏制作 教学内容 5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例
5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例 5.5 “花瓣动画”案例 5.6 “打飞机游戏”案例 41

42 5.5 “花瓣动画”案例 本节内容 1. 案例效果 2. 操作步骤 3. 技术拓展 4. 练习

43 5.5 “花瓣动画”案例 一、案例效果 重点与难点：了解循环结构for语句的使用，鼠标控制方法和影片剪辑的事件处理器的使用方法 43

44 5.5 “花瓣动画”案例 二、操作步骤 1.新建文档并命名，并把文件保存为“花瓣动画” 2.导入背景图片 44

45 5.5 “花瓣动画”案例 二、操作步骤 3．制作所需元件 45

46 5.5 “花瓣动画”案例 二、操作步骤 4．布置主场景 5．定义动作脚本 6．测试并保存动画 46

47 5.5 “花瓣动画”案例 三、技术拓展 1．循环结构for的使用
5.5 “花瓣动画”案例 三、技术拓展 1．循环结构for的使用 2．鼠标控制方法 与条件判断语句一样，循环语句也是最具有实用性的语句。在满足条件时，程序会不断重复执行，直到设置的条件不成立时，才结束循环，继续执行下面的语句。 注意：在设置循环语句的条件时，必须注意条件的逻辑性和合理性，特别要避免程序陷入死循环。比如，如果将以上for循环的参数设置为for（i=1; i>0; i++），这个条件就会永久成立，则导致程序陷入死循环。 47

48 5.5 “花瓣动画”案例 四、练习 试着做一个满天星星的动画，星星可以跟随鼠标指针运动，天上的星星为40颗，分布的坐标范围为横坐标0～800，纵坐标为0～600，星星的大小和透明度不变。 48

49 第5章 游戏制作 教学内容 5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例
5.1 概述 5.2 “猫鼠游戏”案例 5.3 “飘雪动画”案例 5.4 “猴子看香蕉”案例 5.5 “花瓣动画”案例 5.6 “打飞机游戏”案例 49

50 5.6 综合项目：打飞机游戏 本节内容 1. 项目概述 2. 项目效果 3. 操作步骤 4. 技术拓展 5. 练习

51 5.6 综合项目：打飞机游戏 一、项目概述 Flash游戏以游戏简单，操作方便，绿色，无需安装，文件体积小等优点被广大网友喜爱。Flash游戏又叫Flash小游戏，因为Flash游戏主要应用于一些趣味化的、小型的游戏之上，以完全发挥它基于矢量图的优势。 打飞机是“射击类”系列游戏的一个Flash小游戏，Flash小游戏是一种通过Flash软件和 Flash 编程语言FlashActionScript制作而成的SWF格式小游戏。 51

52 5.6 综合项目：打飞机游戏 二、项目效果 重点与难点：掌握按钮的使用，绝对路径和相对路径灵活运用，理解深度的概念，会使用动作脚本进行简单游戏的开发 ;学会使用attachMovie方法来添加影片剪辑和使用removeMovieClip（）来删除影片剪辑 52

53 5.6 综合项目：打飞机游戏 三、操作步骤 1．制作界面和文字动画 53

54 5.6 综合项目：打飞机游戏 三、操作步骤 54

55 5.6 综合项目：打飞机游戏 三、操作步骤 2．制作飞机、靶等相关元件 55

56 5.6 综合项目：打飞机游戏 三、操作步骤 3．制作“飞机被击中”元件 56

57 5.6 综合项目：打飞机游戏 三、操作步骤 4．布置主场景 57

58 5.6 综合项目：打飞机游戏 四、技术拓展 1．Flash游戏制作流程 （1）素材的收集和准备 （2）制作 （3）测试 58

59 5.6 综合项目：打飞机游戏 四、技术拓展 2．全局变量与局部变量 （1）全局变量，顾名思义就是在整个影片中都可以访问的变量.
5.6 综合项目：打飞机游戏 四、技术拓展 2．全局变量与局部变量 （1）全局变量，顾名思义就是在整个影片中都可以访问的变量. （2）局部变量就是在声明它的语句块内（例如一个函数体）是可访问的变量，通常是为避免冲突和节省内存占用而使用。 59

60 5.6 综合项目：打飞机游戏 四、技术拓展 3．全局函数与自定义函数 Flash中自定义函数的一般形式为：
5.6 综合项目：打飞机游戏 四、技术拓展 3．全局函数与自定义函数 Flash中自定义函数的一般形式为： Function 函数名称（参数1，参数2，……，参数n） ｛ //函数体：即函数的程序代码 ｝ 自定义函数必须调用才被执行。调用自定义函数的一般形式为： 路径.函数名称（参数1，参数2，……，参数n） 60

61 5.6 综合项目：打飞机游戏 四、技术拓展 4．attachMovie和removeMovieClip函数的应用
5.6 综合项目：打飞机游戏 四、技术拓展 4．attachMovie和removeMovieClip函数的应用 （1）attachMovie（MovieClip.attachMovie 方法） 简单的来说，Flash中attachmovie（）就是把库中已经命名的元件调用进来使用。 （2）removeMovieClip（目标） “目标”参数为用 duplicateMovieClip（）创建的影片剪辑实例的目标路径。或者是用 MovieClip.attachMovie（）或MovieClip.duplicateMovieClip（）创建的影片剪辑的实例名称。 缩放舞台三种方法：放大镜工具；视图菜单-缩放比率；工作区右上角 移动舞台：双击手形工具，可以将舞台移动到最合适当前窗口的位置 61

62 5.6 综合项目：打飞机游戏 四、技术拓展 5．with的用法 6．eval（ ）的用法 7．增量运算符 62

63 5.6 综合项目：打飞机游戏 五、练习 1. 用拖放函数设计制作一个包含9块小图片的拼图游戏动画。拼图游戏的两个画面如下图 所示。 63

64 5.6 综合项目：打飞机游戏 四、练习 2.设计一个“打企鹅”游戏：动画中包含两个画面，第一个画面上，制作漂亮的标题，并有企鹅在跳动，再加上有一个“PLAY”按钮；第二个画面上，则出现九个洞，企鹅从洞中一冒出，就用棒子敲打企鹅，屏幕上就会出现你的得分，规定时间到，屏幕上会出现“PLAY AGAIN”按钮，参考效果如下图 所示。 64

65 本章小结 本章首先通过4个导入案例，来讲解使用ActionScript动作脚本制作交互动画的方法与技巧，设计各种有趣的Flash游戏。最后将通过综合项目“打飞机游戏”讲解游戏的制作流程和动作脚本的相关知识