Flash动画制作.docx
《Flash动画制作.docx》由会员分享，可在线阅读，更多相关《Flash动画制作.docx（26页珍藏版）》请在冰豆网上搜索。
Flash动画制作
数学教育技术
梁新健
LIANGXJ@JYU.EDU.CN
课程的基本内容
第一部分 FLASH动画制作
参考资料：
《FLASH MX标准教程》
第二部分 几何画板的基本操作
参考资料《几何画板与中学数学微型课件制作》
第三部分 几何画板使用范例
参考资料：
《几何画板实用范例教程》
第一部分 FLASH动画制作
第1章 工具的使用
第2章 动画原理和工作环境
第3章 创建和组织FLASH资源
第4章 动画渐变过程控制
第5章 遮罩效果
第6章 关于按钮
第1章 工具的使用
1，画线工具，椭圆工具，矩形工具
基本操作方法：
选择相应的工具后拖动鼠标
特殊操作方法：
按住shift键拖动鼠标可分别画出：
水平、垂直、450或1350角的直线，圆，正方形。
例1：
按顺序画：
圆、横线、竖线、450的斜线段、正方形。
问：
若先画线后画圆结果如何？
2，钢笔工具
作用：
画多边形、曲线
①，绘制角点（可形成多边形）：
选择钢笔工具后在舞台上单击，然后移到下一个角点上单击，在最后一个角点上双击。
若最后一个角点与第一个角点重叠则形成一封闭图形
②，绘制曲线点：
使用钢笔工具在舞台上拖动一小段后松开鼠标，然后在下一曲线点上拖动，在最后一个曲线点上双击。
例2：
画三角形，四边形，非封闭图形，正弦曲线。
曲线形状的改变：
用部分选取工具选择曲线点，拖动其调整柄。
角点转换成曲线点：
用部分选取工具选择角点后，按住Alt键拖动角点。
删除角点或曲线点：
使用钢笔工具单击要删除的曲线点，移动鼠标到其旁边，当出现－号时单击。
添加角点或曲线点：
使用钢笔工具单击曲线段，当钢笔光标旁出现＋号时单击。
例3：
调整曲线点的调整柄，移动曲线点，将角点转换成曲线点，删除、添加曲线点和角点
3，铅笔工具：
可以画直线、光滑曲线和自由曲线。
画横线和竖线可按住Shift键拖动鼠标。
操作步骤：
选择铅笔工具，在选项下面选择绘图模式，在属性面板中设置颜色、线型、粗细，最后画图。
4，刷子工具:
操作与铅笔工具类似，但功能更强
例4：
使用铅笔及画笔工具画粗细和颜色不同的图形。
5，部分选取工具（白色的箭头）：
可用来选择线条上的点，修改调整柄
操作方法：
选择部分选取工具，单击图形，单击要修改的点，拖动调整柄
6，任意变形工具：
可用以图形的缩放、旋转、偏移以及扭曲等功能。
操作方法：
使用任意变形工具选择图形，拖动其边界或角点可改变图形。
例5：
画一曲线，然后用部分选取工具调整曲线的弯曲度等；画一封闭图形，然后用任意变形工具对图形进行缩放、旋转和扭曲。
7，填充变形工具：
可改变图形的填充模式。
先用颜料桶工具对图形填充（填充类型必须是线性或放射状），然后选择填充变形工具，单击图形，最后拖动相关点修改填充模式
8，墨水瓶工具：
可用于改变图形的边界。
使用方法：
选择墨水瓶工具，然后在属性面板中设置线形与颜色，最后单击图形的边界。
9，滴管工具：
用于在舞台上取色。
10，箭头工具：
在图形内双击可同时选中边框和填充区域；双击边界可选取所有边界，单击只能选择一部分边界。
拖动图形上点可修改图形
11，颜料桶工具：
用于封闭图形内部的填充
操作步骤：
选择颜料桶工具，在调色板中设置填充样式和颜色（可设置变化的颜色），然后单击封闭图形。
例6：
画一圆分别对其作如下形式的填充：
纯色、线性、放射状、位图。
其中线性、放射状方式要求用变化的颜色填充。
12，套索工具：
可用于选择任意形状的图形，然后可修改图形的属性等
13，手形移动工具：
用于移动舞台
14，放大镜工具：
用于放大或缩小舞台的比例
例7：
文字变形
S1:
输入文字
S2:
将文字转换成形状：
连续按2次Ctrl+B，或连续执行2次“修改/分解到组件”
S3:
使用任意变形工具选择文字，在工具面板的选项中选择扭曲按钮，然后拖动文字的边界修改文字形状。
S4:
在文字变形选项内选择封套按钮，然后拖动文字的边界修改文字形状。
修改文字形状
第二章、动画原理和工作环境
2.１，舞台和工作区
舞台：
中间白色区域
工作区：
舞台外面的灰色部分
导出影片后，只有舞台上的内容才会在影片中显示，工作区中的内容通常将不会出现在影片中。
2.1.1 查看舞台：
可通过修改显示比例来查看舞台，也可通过放大镜工具修改显示比例来查看舞台。
2.1.2 设置舞台的显示速度
通过“视图/预览模式”菜单下的相应命令可修改舞台的显示速度，而输出效果不变。
外边框：
只显示场景中所有形状的外框和线条轮廓。
高速显示：
关闭图形的消除锯齿功能并显示所胡绘制的线条样式和颜色。
消除锯齿：
打开线条、形状和位图的消除锯齿功能
消除文本锯齿：
使文本的边缘更加平滑。
2.1.3 使用网格、辅助线和标尺
使用网格、辅助线和标尺可帮助用户定位和对齐对象。
添加网格和辅助线可以用“查看”菜单或快捷菜单，而标尺则直接拖动标尺。
2.2 编辑环境
1，场景编辑模式：
正常状态下的编辑模式。
2，组合体编辑模式：
选择要编辑的多个对象，按Ctrl+G将其组合成一个整体进行编辑。
3，元件编辑模式
元件：
为了更好地制作动画而产生的对象。
建立元件或将对象转换成元件可用插入菜单。
要编辑元件则可使用显示比例左边的按钮，编辑完后可切换到场景编辑模式。
当元件是影片时，产生的动画效果更好。
通过缩放比例左边的下拉菜单可进入已经存在的元件的编辑模式，通过选择该菜单左边的下拉菜单中的内容，可返回各场景中。
例2-1：
天使出场，文件名：
2-1.fla，天使文件：
angle.gif
2.3 时间轴操作
2.3.1 移动播放磁头：
直接拖动播放磁头即可。
作用：
可查看动画效果。
2.3.2 识别帧和关键帧
空白关键帧：
白色圆圈，表示当前帧没有内容。
黑色关键帧：
黑色圆圈，有内容的关键帧。
相同帧：
内容相同的帧，可通过拷贝帧和粘贴帧实现，用于场景的重现。
2.3.3 改变时间轴的显示方式：
单击时间轴右上角的按钮进行设置。
可改变帧的显示宽度等
2.3.4 创建帧标签和帧批注
方法：
选择要创建的帧，然后在属性面板的帧下面的输入框中输入帧标签名，若输入的文本前加//则变成创建帧批注。
作用：
帧批注用于说明，而帧标签则可用于代码中代替帧数字，因在删除帧后帧数字代表的场景会变化，而帧标签代表的场景则不会变化。
2.4 层操作
在flash中每个层可以建立一个或一组对象的动画，要建立多个对象的不同动画，则必须使用不同的层。
2.4.1 创建层：
可以使用时间轴底部的“插入图层”按钮或使用“插入/时间轴/图层”命令。
2.4.2 创建层文件夹：
可以使用时间轴底部的“插入图层文件夹”按钮或使用“插入/时间轴/图层文件夹”命令。
作用：
类似于windows中的文件夹的作用。
2.4.3 显示/隐藏层
作用：
当有多个层时为了更好地修改，可以将其它层隐藏。
操作方法：
单击层名称右边的第一列（即包含有眼睛图标的显示/隐藏列）
2.4.5 锁定/取消锁定层
作用：
锁定后该层不会被修改。
操作方法：
单击层名称右边的第二列（即包含有锁图标的列）
2.5 创建动画
flash动画的种类：
形状渐变动画，运动渐变动画，帧并帧动画和交互动画。
2.5.1 渐变动画
1，形状渐变动画
形状渐变动画产生的条件：
（1）至少有２个关键帧
（2）在这２个关键帧中包含必要的形状
（3）设定了形状渐变的动画方式
其中的形状必须是利用绘图工具直接绘制的图形，文字必须通过转换才能变成形状，文字要转换成形状必须连按２次Ctrl+B
形状渐变动画中可能发生变化的形状的属性有：
１）形状本身，２）颜色，３）大小，
４）位置，５）翻转，６）以上属性的组合
动画制作步骤
１，单击第１帧，在舞台上制作形状
２，在最后一帧处插入关键帧
３，单击最后一帧前的白色帧从快捷菜单中选择创建动画动作
４，选择第１帧或最后一帧，选择任意变形工具，单击舞台中的图形（形状）
５，在属性面板的颜色栏中选择高级，然后单击其右边的设置按钮设置颜色
６，修改形状的其它属性（如变形，翻转，移动，放大，缩小等）
2，运动渐变动画
运动渐变动画产生的条件：
（1）至少有２个关键帧
（2）在这２个关键帧中包含必要的实例、组合体或文字对象
（3）设定了运动渐变的动画方式
实例：
将元件拖动到舞台上即可得到实例（元件存放在库面板，按F11可打开库面板），组合体则是按Ctrl+G将对象组合之后获得的对象
运动渐变动画中可能发生变化的实例属性
１）透明度
２）颜色
３）大小
４）位置
５）翻转
６）以上属性的组合
运动渐变动画的制作步骤与形状渐变动画相同。
例8：
移动动画
操作步骤：
１，制作一图形，或导入一图像，并将其转换成元件
２，右击第一帧选择创建动画动作。
３，在适当位置插入关键帧，然后移动图像
例9：
变形动画
操作步骤：
１，制作一图形，或导入一图像，并将其转换成元件
２，右击第一帧选择创建动画动作。
３，在适当位置插入关键帧，利用任意变形工具修改图像形状，用箭头工具（黑色的箭头）选择图像，在属性面板的颜色栏设置其颜色（色调、亮度、Alpha值等）
４，重复第３步可设置多个关键帧。
例10：
影像重叠特效实例
操作步骤
１，依次选择“显示/网格/显示网格”和“显示/网格/贴近网格”
２，用钢笔工具画一较大的箭头图形，设置其颜色并将其转换成元件。
３，右击第一帧选择创建动画动作
４，在２０帧处插入关键帧，利用任意变形工具将图形缩小，用箭头工具（黑色的箭头）选择图像，在属性面板的颜色栏设置Alpha值为0
５，用鼠标拖动选择图层的第１到２０帧然后执行快捷菜单（或编辑菜单）中的拷贝帧。
６，插入一新图层，在第２帧处插入一关键帧，执行快捷菜单（或编辑菜单）中的粘贴帧命令
７，重复执行第６步插入第３到第１０个图层，其第１个关键帧的位置递增１（如第１０个图层在第１０帧处插入关键帧）
８，选择最后一个关键帧后的空白帧，执行快捷菜单中的移除帧。
例11：
动感球体
操作步骤
１，制作一圆
２，打开混色器，选择“放射状”，设置填充颜色（三组颜色数据：
255，255，255；254，206，129；226，87，29，，第一组在左边，第二组在右边，第三组在左边30%左右位置）。
３，使用“颜料桶工具”填充图形：
在圆内单击
４，选择第１帧，在属性面板的“中间”栏中选择“形状”。
５，右击第一帧选择创建动画动作
６，在１５帧处插入一关键帧，在圆的另一位置上单击
７，在第３０帧处插入一关键帧，将第１帧复制到第３０帧
2.5.2帧并帧动画
每一帧都是一关键帧，每一帧都有一幅图片。
一般用于某一系列图片，如由数码相机取得的图片等。
帧并帧动画的制作方法：
1，创建一个新FLASH文档，然后执行“文件/导入/导入到舞台”，在打开的对话框中选择图片序列文件的第1个文件，单击“打开”后再单击“是”
2，通过执行“插入/元件/影片剪辑”创建一个元件，然后用与1相同的方法导入图片序列，使用时将元件直接拖动到场景中（具体方法在第3章中介绍）
2.6 测试环境
查看动画效果可以按Ctrl+Enter，或执行“控制”菜单中的“测试影片”命令
生成动画文件可通过执行“文件/导出/导出影片”命令，可以生成.swf文件与动画gif文件等。
生成的动画gif文件可以直接插入到ppt文件中
第3章 创建和组织FLASH资源
一、调配颜色
1，在颜色面板中的颜色样本中选择单色
2，在颜色面板中的混色器中设置不同的填充色。
其中填充样式中有：
纯色、线性、放射状和位图
线性：
创建的渐变色从起点到终点是一条直线
放射状：
创建的渐变色从起点到终点是一个圆环图案。
颜色的选取在混色器下面的渐变色定义条中，左边为中心的颜色，右边为外部的颜色，操作是选择在渐变色定义条适当的距离处单击单击鼠标，然后选择颜色
二、文本处理
选择文本工具后在舞台中拖动鼠标，然后输入文本，最后在属性面板中设置文本的格式。
文本的修改：
选择文本工具A，单击要修改的文本然后进行修改。
例：
创建一个可滚动的文本框
1，选择文本工具A，在舞台中拖动鼠标确定文本框的大小
2，在属性面板的文本框类型中选择“动态文本”，并设置文本的格式
3，按住Shift键双击文本框右下角
4，执行“窗口/组件”命令打开组件面板，在组件面板中展开“UserInterface”选择“UIScrollBar”并将其拖动到文本框中，作为文本框的滚动条
5，输入文本内容
三、使用元件和实例
元件是指用户在Flash中所创建的图形、按钮或影片剪辑这3种元素。
元件一旦被创建，就会自动添加到当前影片的库中，然后可以在当前影片或其它影片中重复使用（使用方法是将元件直接从库中拖动到场景中）
在制作运动类动画时，必须使用元件。
元件的构成与类型
元件可以是任何对象。
如绘制的图形、组合体、文字、位图、声音和视频对象等。
但元件中不能包含其它按钮元件的实例。
元件分为三类：
图形元件、按钮、影片剪辑元件。
影片剪辑元件是一个小影片，其创建方法与创建一个Flash动画方法相同。
按钮是一个由4个时间帧组成的动画。
元件是通过“插入/新建元件”命令创建或通过转换得到
图形转换成元件的方法是：
选择图形后使用快捷菜单中的“转换为元件”命令
第4章 动画渐变过程控制
一、形状渐变动画的制作步骤
S1：
制作一个图形或文字
S2：
选择图形，然后按Ctrl+G将其转变为群组（使得得到的形状包括边界），再按Ctrl+B将其转换成形状
S3：
插入关键帧，添加新的形状（可将原形状删除）
S4：
选择第一帧，在属性面板的”补间”栏中选择形状。
例1：
文字改变的形状渐变动画
操作步骤
S1：
利用文字工具输入一个数字0
S2：
按Ctrl+B将其转换成形状
S3：
在第40帧插入关键帧
S4：
在0的右边利用文字工具输入123456789，连续按两次Ctrl+B
S5：
选择第一帧，在属性面板的”补间”栏中选择形状。
例2：
文字变形，将FLASH变为变形文字
S1：
利用文字工具输入一个数字FLASH
S2：
按两次Ctrl+B将其转换成形状
S3：
在第40帧插入空白关键帧
S4：
利用文字工具输入变形文字，连续按两次Ctrl+B
S5：
选择第一帧，在属性面板的”补间”栏中选择形状。
例3：
将矩形转换成圆
S1：
在第一帧处制作一个矩形
S2：
选择矩形，按Ctrl+G将其转变为群组（使得得到的形状包括边界），再按Ctrl+B将其转换成形状
S3：
在第40帧处插入一个空白关键帧，制作一个圆
S4：
选择第一帧，在属性面板的“补间”栏中选择形状。
形状渐变动画的控制
通过添加形状提示可以对形状渐变动画进行控制。
使得形状能按指定的方式变形（形状提示点变化到形状提示点）。
添加形状提示时，字母的顺序必须按逆时针顺序。
正确添加后，首帧的形状提示为黄色，末帧的为绿色。
显示或隐藏形状提示：
通过“视图/显示形状提示”
删除形状提示：
将其拖离图形，然后从菜单中选择相应的命令。
S1：
建立形状渐变动画
S2：
选择第1帧
S3：
执行修改/形状/添加形状提示
S4：
将形状提示移到适当位置
S5：
选择其它关键帧，将形状提示移到目标位置。
例4：
将扇形展开成四分之一圆
S1：
选择第1帧，创建一个圆，用线形工具将其划分成四部分
S2：
在第5帧处插入一个关键帧
S3：
留下圆的四分之一，将其余部分和所有边界删除
S4：
选择第1帧，用线形工具截取一个小扇形，将其余部分和所有边界删除
S5：
在属性面板的补间栏中选择形状。
观察运行效果
S6：
选择第1帧，通过执行三次“插入/形状/添加形状提示”添加3个形状提示，然后将其分别拖到扇形的三个顶点上。
S7：
选择第5帧，将3个形状提示拖动到相应位置。
例5：
旋转的圆环
S1：
制作一圆环
S2：
右击第1帧，选择创建动画动作，在属性面板的旋转栏中选择顺时针
S3：
在第20帧处插入关键帧
运动渐变动画的控制
创建一个按某一路径移动的动画的方法
S１，导入图像或制作图像
使用“文件/导入”命令导入图像
S２，按Ｆ8将图像转换成元件
S３，右击第一帧，选择创建动画动作
S4：
选择第30帧，插入关键帧
S５，创建运动引导层：
执行“插入/时间轴/运动引导层”，单击引导层的第一帧，利用工具在舞台上画一路径。
S６，单击图层１的第一帧，勾选属性面板中的“调整到路径”、“同步”和“对齐”，将元件拖动到路径上，单击最后一帧，拖动元件到路径上。
第五章遮罩效果
遮罩效果是指在指定的区域中显示动画，其中的区域是在遮罩层中设定，这个区域可以是形状、文字和实例等。
用于遮罩的形状必须具有填充区域。
用于遮罩的文字一般要转换成形状。
实例是某一元件的实例，即将库面板中的元件拖动到舞台中形状的图形。
例１:
旋转的地图
１，绘制一光晕：
绘制一个圆，填充方式为径向，颜色组成为#000066，白色和＃000066
２，制作一个地图移动到左边的动画：
插入一新图层（图层2），导入图像（1.bmp），制作图像移动的郊果（从圆的位置移向左边）
３，制作一个地图从右边移动到中间的动画：
插入一新图层（图层3），制作图像移动的郊果（从右边移向圆的位置，其最后一帧的位置与上一图层的第一帧的位置相同）
４，制作遮罩层：
插入一图层，作一圆，大小要能覆盖前面的圆的内部。
选择最后一个图层，从快捷菜单中选择遮罩。
5，将图层2与图层3拖动到图层４下面，使图层4为这两图层的遮罩层
6，添加代码使得图层3与图层2衔接得更好：
选择图层２的最后一帧，选择帧动作中的Ａctions=>MovieControl=>goto=>单击＋号
=>Ａctions=>MovieControl=>goto
例２ 文字遮罩
１，设置背景颜色为#0f2646
２，导入一背景图像（2.bmp），将其转换成图形元件，单击第一帧从快捷菜单中选择创建动画动作
３，在第３０帧上插入一关键帧，向上移动图形
４，插入一图层，在调色板中选择颜色为白色，Alpha为60%，在舞台中插入一文字（TextMask）
５，插入一图层，将图层２的第１帧复制到图层３的第一帧
6，选择图层２，从快捷菜单中选择遮罩
例3美女登场
1，第一位：
从第1帧到最后一帧（第90帧）均存在。
导入一个图像（01.jpg），调整图像大小和舞台大小，使得两者大小相同，并将图像放在舞台中间，使其覆盖舞台（此操作是选择图像或舞台后在属性面板中操作），在90帧处插入一关键帧或普通帧。
2，第二位：
从第1帧到第45帧存在，操作步骤：
S1：
插入一图层，
S2：
选择第1帧，导入另一个图像（02.jpg），调整其大小
S3：
在第45帧处插入一关键帧
S4：
制作一遮罩层：
插入一图层，制作一矩形图形并设置其填充色，选择图形后将图形转换成元件，在第45帧处插入一关键帧，制作从第1帧到第45帧的动画（将图形从舞台左边移动中间）
S5：
使图层3成为图层2的遮罩层：
拖动图层2到图层3下面
3，第三位（03.jpg）：
重复2制作从第45帧到第90帧的遮罩动画。
例4（SetMask）
例4（SetMask）
1，导入一图片（4.gif），设置舞台大小与图片大小相同，然后选择图片后按F8将图片转换成元件，元件名为：
picture，类型为影片剪辑。
2，插入一图层，将图层1的第1帧复制到图层2的第1帧
3，图层1中的图片变暗：
隐藏图层2，选择图层1的第1帧，选择舞台中的图形，在属性面板中的颜色下拉菜单中选择亮度，并设置其亮度为50%
4，给图层2中的元件命名：
隐藏图层1，显示图层2，选择图形，在属性面板中将其命名为pic（在影片剪辑栏下面的输入框中输入）。
5，制作小圆形：
插入一图层，隐藏图层1,2，然后绘制一个小圆形，填充色为白色；选择该小圆形后按F8将图片转换成影片剪辑类元件，元件名为ball，并在属性面板中将其命名为ball（在影片剪辑栏下面的输入框中输入）。
6，编辑元件ball：
双击ball元件进入元件编辑模式。
S1：
插入一图层，将图层1的第1帧复制到图层2
S2：
选择图层2的图形，使用调色板将图形的填充色设为渐变色（径向），渐变色为白色和蓝色过渡，白色的透明度为20%，蓝色的透明度为50%，两者都靠近右边。
S3：
隐藏图层2，将图层1中的图形转换成元件，类型为按钮，名称为maskClicp，并在属性面板中将其命名为maskClicp
S4：
选择该元件，打开动作面板，输入下面代码：
on（press）{
startDrag（"_root.ball"）;
Mouse.hide（）;
_root.pic.setMask（_root.ball.maskClip）;
}
on（release）{
Mouse.show（）;
stopDrag（）;
}
代码解释：
on（press）：
当用户单击时触发大括号内的动作
startDrag（"_root.ball"）：
允许拖动整个球体
Mouse.hide（）：
隐藏鼠标光标
_root.pic.setMask（_root.ball.maskClip）：
设置ball元件内maskClip为动态遮罩。
on（release）：
当用户释放鼠标左键时触发大括号内的动作
Mouse.show（）：
重新显示拖动鼠标光标
stopDrag（）：
停止拖动ball
例5：
文字效果
１，制作三个元件，内容分别为“数学系”中的字
２，选择图层１的第１帧中，将元件１移到（-100，100）位置，右击图层１的第１帧，选择“创建动画动作”，在第３０帧处插入关键帧，元件１在第３０帧处的位置为（100，100）
３，插入一新图层，在第２０帧处插入关键帧，将元件２移到（-100，100）位置，右击图层２的第20帧，选择“创建动画动作”，在第５０帧处插入关键帧，元件１在第３０帧处的位置为（２00，100）
4，插入一新图层，在第4０帧处插入关键帧，将元件3移到（-100，100）位置，右击图层3的第40帧，选择“创建动画动作”，在第7０帧处插入关键帧，元件3在第7０帧处的位置为（300，100）
５，隐藏并锁定图层１，2，３
６，插入一图层，在新图层的第８０帧处插入一关键帧，将元件１、２、３分别拖动到（100，100）、（200，100）、（300，100）处，选择３个图形，执行“修改”菜单中的“群组”命令，然后按Ｆ８将其转换成元件，修改其颜色为白色
７，插入一图层，在新图层的第８０帧处插入一关键帧，建立一白色矩形并转换成元件，大小比字大，将其放在字的左边，在第１１０帧处插入一关键帧，将矩形移动到字的右边，并建立动画
８，将最后一个图层设为遮罩层，在第１，2，３层的第110帧处插入关键帧
例6：
天使出场
1，制作字母动画：
ANGEL五个字母旋转移动动画。
1）输入ANGEL并打将其逐个转换成元件
2）按顺序分别制作L、E
升级会员 