FLASH中绘图工具的使用

动画状态 1
动画状态 2
关键步骤如下： � 每一个动画效果在单独的一个图层中； � 利用矩形等工具，绘制背景图层效果； � 将每一张图片分别导入到一个图层中， 并创建动作补间动画， 实现位置的移动； � 注意每一张图片出现的时间与间隔，保持视觉性的连贯性。
《电子商务网页美工》课程教案
袁鑫
� 实验内容
� 动作补间动画的设置
设置为“动作”后，属性面板中出现如下 2 个选项： � “缓动”选项：用于设定变形 动画从开始到结束时的运动速度。其取值范围 为-100－100。当选择正数时，变形速度呈减速度，即开始时速度快，然后逐渐速度减 慢；当选择负数时，变形速度呈加速度，即开始时速度慢，然后逐渐速度加快。 � � � � � “缩放”选项：选择此选项，对象在动画过程中可以改变比例。 “旋转”选项：用于设置对象在运动 过程中的旋转样式和次数。 “调整到路径”选项：选择此项，对象在运动引导动画过程中，可以根据引导 “同步”选项：选择此项，如果对象是一个包含动画效果的图形组件实例， 其 “贴紧”选项：选择此项，如果使用运动 引导动画，则根据对象的中心点将
帧，保持文字效果至 25 帧，并设置至合适位置； � 图层 6：创建一个文字的图形元件 mytext，颜色为黄色，然后在第一帧至第
25 帧做一个动作补间动画，实现文字的左右摇晃效果。 � 效果如下图所示：
《电子商务网页美工》课程教案
袁鑫
动画状态
� 课堂案例 5：滴水的效果动画
题目：水滴从上往下滴落，最后泛起涟漪。如下图所示。 （见效果：滴水的效
路径的曲线改变变化的方向。 动画和主时间轴同步。 其吸附到运动 路径上。
《电子商务网页美工》课程教案
袁鑫
� 课堂案例 2：疾驰而过的汽车
题目：根据“汽车”与“公路”两个素材，制作汽车疾驰而过的动画效果。 （效果
见：疾驰而过的汽车.exe） 基本步骤如下：
� � � 导入“汽车”与“公路”两个素材到库中； 将图层 1 改名为“背景” ，并将“公路”素材导入。 新建图层 2“汽车” ，将“汽车”导入第一帧，利用变形工具将汽车缩小，并
移动位置至公路的远处； � 在图层 2 的第 25 帧位置插入关键帧（F6） ，利用变形工具将汽车放大，并移
到位置至镜头前。 � 在第 1 帧至 25 帧中间的任意位置点击，然后选择“动画”效果，即可完成。
动画状态 1
动画状态 2
� 课堂案例 3：小球蹦蹦跳
题目：绘制一个小球蹦蹦跳的效果： （效果见：小球蹦蹦跳.exe）
果.exe）
动画状态 1
动画状态 2
关键步骤如下： � 每一个动画效果在单独的一个图层中； � 绘制水滴，实现从上往下滴落效果（动作补间动画） ； � 绘制椭圆波纹，实现从小放大渐隐效果（动作补间动画） ； � 复制多个椭圆波纹，实现涟漪效果。
� 课堂案例 6：金庸作品六大女主角
题目：根据素材图片，实现多张图片从左到右滚动的动画效果，要求制作背景，并 添加图片滚动效果。最后效果如下图所示： （见效果：金庸作品六大女主角.exe）
基本步骤如下：
� � � 利用椭圆工具、渐变填充工具制作一个小球； 然后将其转化为“图形” ，取名为 ball。 新建一个影片剪辑，取名为 myball，将图形元件 ball 移至第一帧，并在第
20 帧位置插入关键帧， 并移至小球至合适位置； 在第 1 帧至 25 帧中间的任意位置点击， 然后选择“动画”效果，即可实现小球的运动效果。 � � 以同样的方式，创建两个影片剪辑； 回到舞台，拖动三个小球影片剪辑到舞台的不同位置。
� 课堂案例 1：奔跑的豹子
题目：根据“逐帧动画”素材图片，制作逐帧动画，每一帧显示一个动画表情， 不 限于素材图片，自己可以自由地采用其它的图片。效果如下图所示。 （见效果：奔跑的 豹子.exe）
《电子商务网页美工》课程教案
袁鑫
二、基本动画之动作补间动画制作
� 什么是动作补间动画
凡是被选中后周围出现一个蓝框的对象，都可以对其创建 动作补间动画。 补间动作只对某一层上的单一实例有效，分离的对象不能发生补间动作，如果 想让多个对象一起动起来，必须将它们分别放在不同的层上，然后分别制作补间动 作。 动作补间动画可以用于产生这些变化： 物体位置的移动、 物体大小的改变和简单的 形变、物体的旋转、物体的透明度、色调和亮度的改变，以及利用导轨复杂路径运动。 动作补间两端的关键帧应该是同一个实例。 在一个动作补间动画中只能有一个实 例（组合） ，如果在一个 动作补间 动画中 需要放置两个实例的 . . . . . . . . . . . . . . . . . . . . . 解决方案是把这两个 . . . . . . . . . 实例放置到两个不同的 . . . . . . . . . . 动作补间 . . . . 动画中 . . .。 . 如果这两个实例需要同时在舞台上出现的 . . . . . . . . . . . . . . . . . . 话，需要放在不同的层里 . . . . . . . . . . .。 .
《电子商务网页美工》课程教案
袁鑫
湖南商务职业技术学院教师授课课时计划
课程章节 及 主 题 教学目的
创建基本动画（一）
授课老师签字 教研室主任签字
本课要求学生掌握逐帧动画与动作补间动画的制作原理与方法， 并且能够制作这两 类动画。
教学重点 � 逐帧动画 � 动作补间动画 教学难点 � 动作补间动画 教学方法
帧做一个动作补间动画， 实现白色小球从小变大的效果， 设置为： 第 1 帧的效果为 alpha 值 100%， ball 的大小为 25*25； 第 25 帧的效果为 alpha 值 0%， ball 的大小为 140*140； � � 图层 3：绘制一个小球，颜色为黄色，长宽为 70*70； 图层 4：绘制另一个小球的图形元件 ball2，颜色为黄色，然后在第一帧至第
讲授法 实例演示法 实践法
授课班次 授课日期 授课地点 教 学 过 程 及 内 容 提 要
一、复习上次课内容 二、新课引入 三、授课内容
� 逐帧动画 � 动作补间动画
三、实验内容 四、小结 五、课后记
《电子商务网页美工》课程教案
袁鑫
教 � � � 复习上次课内容 新课引入
作品欣赏
学
过
程
及
内
容
上次课实验内容为例，复习上次课知识点。
《电子商务网页美工》课程教案
袁鑫
动画状态
� 课堂案例 4：简单网页 banner 的制作
题目：绘制一个简单的网页 banner 动画。 （见效果：网页 banner.exe）
参考步骤如下：
� 图层 1：利用椭圆工具、渐变填充工具制作一个小球，颜色为浅黄色，长宽为
103*103； � 图层 2：绘制一个小球的图形元件 ball，颜色为白色，然后在第一帧至第 25
授课内容
Flash 作为一款著名的二维动画制作软件，最主要的功能也就是制作动画。它是通 过更改连续帧内容来创建动画的，通过更改连续帧中的内容，来实现不同的动画。在选 择某帧后，可以在舞台中编辑该帧的对象，其中包括增加或减小对象大小、旋转、更改 颜色、淡入或淡出，以及更改对象的形状等。这些操作可以独立使用，也可以互相结合 使用。
动画状态 1
动画状态 2
� 小结
本课要求学生掌握逐帧动画与动作补间动画的制作原理与方法， 并且能够制作这两 类动画。
� 课后记
25 帧做一个动作补间动画，实现黄色小球从小变大的效果，设置为：第 1 帧的效果为 alpha 值 100%，ball 的大小为 25*25；第 25 帧的效果为 alpha 值 0%，ball 的大小为 160*160； � 图层 5：用文本工具书写文字： “湖ห้องสมุดไป่ตู้省农业博览会” ，在 25 帧位置插入普通
� � 完成课堂案例 1、2、3、4、5、6； 课外练习 1：根据“球”素材图片，逐帧显示出“express yourself”单词，
效果如下图所示。 （见效果：express yourself.exe）
�
课外练习 2：绘制马路与汽车两个图形元件，然后制作如下所示的动画效果 。
（见效果：奔驰在马路上的跑车.swf）
提示：有一个办法可以把多个实例或其他类型的对象（如位图、图形、文本等）
快速地分散到各自的层中，以便可以对其分别创建动作补间动画。具体方法如下： 1.用选择工具讲想要分散的对象都选中。如果这些对象位于不同的层中，可以按住 ctrl，单击各个层； 2.选择“修改——时间轴——分散到图层”命令，每一个对象都被放置到一个属于 它的层中。
一、基本动画之逐帧动画制作
逐帧动画，也叫做“帧帧动画”，是最常见的动画形式，最适合于图像在每一帧中 都在变化而不是在舞台上移动的复杂动画。 它的原理是在“连续的关键帧”中分解动画 动作，也就是要创建每一帧的内容，才能连续播放而形成动画。逐帧动画的帧序列内容 不一样，不仅增加制作负担，而且最终输出的文件量也很大。但它的优势也很明显， 因 为它与电影播放模式相似，适合于表演很细腻的动画，通常在网络上看到的行走、头发 的飘动等动画，很多都是使用逐帧动画实现的。