FlashMX动画制作实例教程.docx

FlashMX动画制作实例教程.docx

《FlashMX动画制作实例教程.docx》由会员分享，可在线阅读，更多相关《FlashMX动画制作实例教程.docx（43页珍藏版）》请在冰豆网上搜索。

FlashMX动画制作实例教程

2.1 符号和实例简述

用户在使用FlashMX软件进行创作时，经常使用到符号和实例。

简单地说，符号可以是图形、按钮、电影片断、声音文件或者字符。

创建后的符号保存在文件库里，当用户从库中将符号置入舞台上时，这时就创建了一个该符号的实例，不管做了多少个该符号的实例，FlashMX仅把该符号保存一次，所以符号的应用缩小了文件的体积。

例如：

最初做成符号对象在电影中的文件大小增加25KB，那么添加10、20甚至更多的符号实例造成的文件大小增加不会超过100字节。

且这与符号的大小无关。

用户只需将符号当作主控对象，把它存在库中；将符号放入电影中时，使用的是主控对象的实例，而不是主控对象本身。

符号实例的外观和动作无需和原符号一样。

每个符号实例都可以有不同的颜色和大小，并提供不同的交互作用。

例如，可以将按钮符号的多个实例放置在场景中，其中每一个都可以有不同的相关动作和颜色。

每个符号都有自己的时间轴、场景和层，也就是说，可以将符号实例放置在场景中的动作看作是一部小的动画，再将它们放置在较大的动画场景中。

而且可以将符号实例作为一个整体来设置动画效果。

一旦编辑符号的外观，符号的每个实例在场景中就会反映出相应的变化。

例如，用户将场景中出现过几次的正方形符号图形改为椭圆形，那么该符号的每个实例也将变为椭圆形。

2.2 符号的类型

在FlashMX中，符号的种类一共有3种，它们分别是图形符号（Graphic）、按钮符号（Button）和电影剪辑符号（MovieClip）。

每一个符号都有它自己的用途，用户可以选择Insert→NewSymbol命令或按Ctrl+F8组合键创建符号。

在打开的CreateNewSymbol对话框中，可以选择所创建的符号类型，如图2-1所示。

图2-1 CreateNewSymbol对话框

●MovieClip（电影剪辑）符号

MovieClip符号是Flash电影中一个相当重要的角色，大部分的电影其实是由许多独立的MovieClip符号的实例组成的，它可以响应脚本行为，拥有绝对独立的时间轴，不受场景和时间轴的影响。

●Button（按钮）符号

Button符号是一个比较特殊的符号，它不是单一的图像，它用4种不同的状态来显示，按钮的另一个特点是每一个显示状态均可以通过声音或图形来显示。

它是一个交互性的动画。

Button符号对鼠标运动能够做出反应，并且可以使用它来控制电影。

在影片中，用户可以新建一个按钮来执行各种动作，或者选择Window→ConmonLibrares→buttous命令，在打开的Library-Buttons面板中选择一个按钮即可，如图2-2所示。

图2-2 按钮符号

●Graphic（图形）符号

Graphic符号通常由在电影中使用多次的静态（或不具有动画效果的）图形组成。

例如，用户可以通过在场景中加入一朵鲜花符号的多个实例来创建一束花，这样每朵不具有动画效果的花便是图形符号的很好例子，如图2-3所示。

图2-3 创建一束花

2.3 符号的创建与编辑

在FlashMX中，符号可以包含的功能非常广泛，用户在使用Flash创建的一切功能，都可以通过某个或多个符号来实现。

所以在制作FlashMX动画的第一步，就是要创建符号。

至于具体要创建什么类型的符号，则需根据具体的情况而定。

2.3.1 创建新符号

用户在动画或电影的编辑过程中，创建符号的方法有两种，一种是创建一个空符号，另一种是从舞台中选定某个对象来创建符号，然后在符号编辑模式下为其添加内容。

 创建一个空符号的操作步骤如下：

（1）如果用户需要在FlashMX中创建一个空符号，可以在菜单栏中选择Insert→NewSymbol命令，在打开的CreateNewSymbol对话框中选择好符号类型后，单击OK按钮将切换到符号编辑模式，符号名将出现在舞台的左上角。

编辑面板中还包含一个十字准星，代表符号的定位点，如图2-4所示。

图2-4 FlashMX的符号编辑模式

（2）在创建符号内容时，用户可以使用时间轴和绘图工具来绘制，也可以通过选择File→Import（导入）命令，打开如图2-5所示的Import对话框，并中从选择要导入媒体文件、图片文件或其他符号。

图2-5 Import对话框

（3）在打开的Import对话框中选择好需要的文件，单击“打开”按钮将文件导入到FlashMX中，如图2-6所示。

图2-6 导入的文件

 要使用选定的元素创建一个符号的操作步骤如下：

（1）在舞台中使用箭头工具选择需要用的元素，选择Insert→ConverttoSymbol命令或按F8功能键，打开ConvettoSymbol对话框，如图2-7所示。

图2-7 创建选定元素的符号

（2）在ConvettoSymbol对话框的Name文本框中输入符号名称，然后从Behavior选项区域中选择符号类型，并单击OK按钮即可创建符号。

2.3.2 编辑符号

在编辑符号时，Flash将自动更新电影或动画中所有运用该符号的实例。

我们可以在符号编辑模式下进行编辑，也可以在菜单栏中选择Edit→EditinPlace命令在舞台上直接编辑该符号。

此时舞台上的其他对象将以浅色显示，表示和当前编辑的符号的区别，如图2-8所示。

（a）正常模式

（b）编辑模式

图2-8 符号的正常模式和编辑模式

要在舞台上直接编辑符号，必须先选中该符号。

在符号上单击右键，在弹出的快捷菜单中选择EditinPlace命令，如图2-9所示；或者以直接双击Library面板中的符号图标对符号进行编辑。

另外，如果需要将该符号单独提出并在符号编辑状态对其进行编辑，可在该符号上单击右键，并从弹出的快捷菜单中选择Edit命令。

图2-9 符号编辑快捷菜单

2.3.3 复制符号

如果要将一个符号复制一个新的符号，使用复制符号功能就可以很方便地完成该操作。

 复制符号的操作步骤如下：

（1）选择Window→Library命令或按Ctrl+L组合键，打开Library面板。

（2）选中Library面板所需要复制的符号并单击右键，从弹出的快捷菜单中选择Duplicate命令即可，如图2-10所示。

在FlashMX默认的情况下，已复制的符号会在原文件名后加上Copy字样，如图2-11所示。

如果用户需要识别原符号，可以保留此名称。

否则可以在弹出的SymbolProperties对话框中重新命名该符号。

               图2-10 Library面板快捷菜单                图2-11 复制符号

2.3.4 创建电影剪辑符号

当在电影剪辑中需要重复使用一个已经创建的动画，或者要将该动画作为一个实例来操作时，最简单的方法就是将该动画转换为电影剪辑符号。

 将舞台中的一个动画转换为电影剪辑的操作步骤如下：

（1）选中要转换的动画所有层上的所有帧并单击右键，在弹出的快捷菜单中选择CopyFrames（复制帧）命令，如图2-12所示。

图2-12 复制动画上所有的帧

（2）选择Insert→NewSymbol命令，打开CreateNewSymbol对话框，在Name文本框中输入该符号的名称，并选择MovieClip单选按钮，单击OK按钮将创建一个新的符号并进入该符号的编辑模式下。

（3）单击时间轴中的第1帧，选择Edit→PasteFrames命令，粘贴所选择的帧。

经过上述步骤的操作，就可以将该动画转换为一个电影剪辑符号。

当创建电影剪辑符号后，还可以减小动画文件体积，用户可将原文件中的该段动画删除，然后从Library面板中拖入一个电影剪辑符号即可。

2.4 实例的创建与编辑

用户在Flash中创建了一个符号，但是这个符号并不能直接应用到场景中，还需要创建实例。

实例就是把符号拖动到舞台上，它是符号在舞台上的具体体现。

如果符号中有一个按钮，将这个按钮拖动到舞台上，那么，舞台上的这个按钮就不再称作“符号”，而是一个“实例”。

2.4.1 创建实例

用户根据电影剧情的要求将符号创建完成之后，就可以在Flash动画中创建该符号的实例，也可以在其他符号内创建该实例。

电影剪辑实例的创建和图形实例的创建是不同的。

电影剪辑只需要一个单独的关键帧去播放，而图形实例则必须在每一个用户希望出现的帧都要放置。

创建符号实例的操作步骤是首先在时间轴上选取一个图层，然后选择Window→Library命令，打开Library面板，选择所要使用的符号，将其拖拽到舞台中，如图2-13所示。

图2-13 符号拖拽到舞台

实例创建完成后，可以打开实例属性对话框来指定颜色效果、指定Actions、设置图形显示模式以及改变实例的类型。

实例的类型同符号的类型是一致的，除非用户为实例指定了另外的类型。

除此以外，这些修改只影响到实例，不会影响到符号。

2.4.2 改变实例样式

一个符号的每个实例都可以有自己的颜色效果。

当改变某一帧的实例颜色和透明度时，Flash会在显示该帧时做出变化。

如果想得到颜色的渐变效果，就必须对颜色进行运动变化处理。

当对颜色进行运动变化时，需要在实例的开始帧和结束帧输入不同的效果，然后设定运动，实例的颜色将会随时间发生变化。

 改变实例样式的操作步骤如下：

（1）在舞台中选择要编辑的实例，在Properties面板中，单击Color下拉列表框后面的三角按钮，打开Color下拉列表，如图2-14所示。

图2-14 Color下拉列表

（2）在Color下拉列表中选择Brightness选项，并拖动右侧的滑动条，可以改变当前选中实例的亮度，例如：

把它的值设为–60%，则实例的效果如图2-15所示。

Birghtness值为100％时，实例亮度为最大，0％为正常，–100％为最黑。

图2-15 改变实例亮度

（3）在Color下拉列表中选择Tint选项，可以在打开的面板中选择一种颜色，也可以从RGB列表框中输入数值来调整颜色，即可改变该实例的颜色偏差，如图2-16所示。

（4）在Color下拉列表中选择Alpha选项。

在列表框右侧的文本框中输入所需的Alpha数值或者拖动滑动条，即可改变该实例的透明度。

其中当Alpha值为100％时，实例为完全不透明，当Alpha值为0％时，该实例完全不可见。

把它设置为40％时的效果如图2-17所示。

图2-16 改变实例色彩偏差

图2-17 改变实例透明度

（5）在Color下拉列表中选择Advanced选项，则在列表框的右侧出现一个Settings按钮，如图2-18所示。

图2-18 选择Advanced命令

（6）单击按钮

，将打开AdvancedEffect对话框，在该对话框中，可以更改实例的RGB颜色值和Alpha值，如图2-19所示。

图2-19 在高级模式中改变实例

2.4.3 改变实例属性

在制作动画的过程中，用户可以根据实例的需要，改变实例的类型，用来重新定义它在动画或电影中的表现方式。

下面结合把一个影片剪辑的实例转换为图片的实例来详细说明。

 改变实例类型的操作步骤如下：

（1）在舞台中选择需要改变类型的实例，打开Properties面板，如图2-20所示。

图2-20 实例的Properties面板

（2）单击符号的下拉列表框，并从MovieClip、Button和Graphic三个选择中选择用户将要改变的实例类型。

（3）单击按钮

，将打开SwapSymbol对话框，如图2-21所示。

双击符号列表框中的其他任意符号，即可将当前选中的符号替换。

图2-21 SwapSymbol对话框

（4）单击SwapSymbol对话框的

按钮，将弹出如图2-22所示的SymbolName对话框。

通过此对话框可以对当前选中的符号进行复制操作。

图2-22 SymbolName对话框

2.5 制作按钮

按钮也是一类图符，当用鼠标与按钮交互时，根据不同的状态，它会显示不同的外观。

可以在时间轴窗口中指定按钮在各种状态下的外观。

要使一个按钮在电影中具有交互性，需要从按钮图符创建实例，并为它分配动作。

由于按钮图符的创建方法比较特殊，因此，我们专门用一节来介绍按钮的制作方法。

2.5.1 按钮工作状态

在Flash中，按钮工作时有4个状态，它们分别是：

●Up（弹起）状态：

鼠标没有接触按钮时，按钮处于一般状态。

●Over（结束）状态：

鼠标移动到按钮上面，但没有按下时，按钮处于被触摸状态。

●Down（按下）状态：

鼠标左键按下时，按钮处于被按下状态（鼠标右键按下时会弹出菜单）。

●Hit（单击）状态：

与前3种状态不同，但这个区域不会显示在电影中。

在这种状态下可以定义响应鼠标事件的区域范围，但这个区域不会显示在电影中。

一个按钮符号在时间轴窗口中的每一帧都有特定的功能，并且每一帧有固定的名称，分别与上面的4种状态相对应，如图2-23所示。

这时Flash自动切换到图符编辑模式，时间轴窗口中的第一行显示4个连续的帧分别表示为Up，Over，Down和Hit，第1帧（Up帧）是一个空白的关键帧。

图2-23 编辑按钮图符时的时间轴

2.5.2 创建一个按钮符号

 用户可以根据制作中的不同需要在Flash中创建按钮符号，操作步骤如下：

（1）进入Flash操作界面，选择File→New命令，新建一个文件。

（2）选择Insert→NewSymbol命令，在CreateNewSymbol对话框的Name文本框中输入名称，并选择Button单选按钮，如图2-24所示。

图2-24 SymbolProperties对话框

 （3）单击OK按钮，关闭该对话框并进入该按钮的编辑状态。

在时间轴窗口中单击第1帧，使用绘图工具、导入图形或创建其他图符的实例来制作好Up帧的按钮外观，如图2-25所示。

图2-25 第1帧上的图形

注意：

在按钮中，可以使用电影剪辑图符或图形图符，但是不能在一个按钮中再使用按钮。

如果要制作动画按钮，需要使用电影剪辑。

 （4）单击第2帧（Over帧），并在菜单栏中并选择Insert→Keyframe命令，插入一个关键帧。

此时，第1帧的按钮图像仍出现在场景中，然后使用填充工具将该按钮图案填充为其他颜色，如图2-26所示。

图2-26 第2帧上的图形

（5）单击第3帧（Down帧），并在菜单栏中并选择Insert→Keyframe命令，插入一个关键帧。

然后使用填充工具，将该按钮图案填充为其他颜色，如图2-27所示。

图2-27 第3帧上的图形

（6）单击第4帧（Hit帧）后在菜单栏中并选择Insert→Keyframe命令插入一个关键帧。

使用箭头工具将按钮符号选中，然后使用填充工具将该按钮填充为黑色，如图2-28所示。

图2-28 第4帧上的图形

（7）完成以上步骤后单击舞台左上方的Scene按钮，退出图符编辑模式。

（8）在菜单栏中选择Window→Library命令打开Library面板，然后从符号库中把做好的按钮符号拖到场景中任意位置，便可创建按钮符号的一个实例，如图2-29所示。

图2-29 调入符号库中按钮

（9）完成创建按钮的一个实例后，选择Control→TestMovie命令，这时就可以对按钮进行测试了，如图2-30所示。

图2-30 测试按钮

2.6 综合实例

上一节中我们在这4帧中分别放入不同类型的静止图形符号，这样生成的按钮就成为静态按钮效果。

相反，如果在其中某些关键帧中放入的是动态电影片断，当特定鼠标事件产生时，就会表现为动态的效果。

这个道理是很容易理解，下面通过一个综合实例来给大家介绍。

该动画的播放效果是当鼠标停留在按钮上时，会出现一排连续向右侧闪动的三角形动画，用鼠标单击该按钮时将会出现一个连续奔跑的小人。

 具体操作步骤如下：

（1）进入Flash操作界面，选择File→New命令，新建一个文件。

（2）选择Insert→NewSymbol命令，在CreateNewSymbol对话框的Name文本框中输入“三角形按钮1”，并选择Graphic作为符号类型，单击OK按钮。

如图2-31所示。

图2-31 新建一个Graphic符号

（3）进入符号编辑模式后，在绘图工具栏中选择矩形工具绘制出一个正方形图案，并且使用调色板工具将正方形图案填充为红色，如图2-32所示。

图2-32 制作一个正方形图案

（4）使用箭头工具把正方形图案移动到如图2-33所示位置，让十字中心点位于正方形图案右边的中心。

当箭头移到正方形图案右上角时，形状变成如图2-34所示。

                图2-33 调整图案1                    图2-34 调整图案2

（5）分别把正方形的右上角和右下角拉到右边的中心点位置，如图2-35所示。

这样，用作按钮Up帧的三角形图案就做好了，如图2-36所示。

做这个三角形的方法很多，大家也可以使用钢笔或直线工具试一下。

                      图2-35 调整图案3                    图2-36 制作完成

（6）单击

按钮返回到场景中，选择Insert→NewSymbol命令，在CreateNewSymbol对话框的Name文本框中输入“三角形按钮2”，并选择MovieClip作为符号类型，单击OK按钮。

如图2-37所示。

图2-37 新建一个MovieClip符号

（7）返回到场景中单击时间轴第1帧，在菜单栏中选择Window→Library命令，在弹出的Library面板中将“三角形按钮1”符号拖放到舞台中央，如图2-38所示。

图2-38 拖动符号到舞台中央

（8）单击时间轴第2帧并在菜单栏中选择Insert→Keyframe命令，插入一个关键帧。

然后将Library面板中的“三角形按钮1”符号再次拖放到舞台中，放在第一个三角形的右边，这样就有两个并排放置的三角形，如图2-39所示。

图2-39 插入第2帧图像

（9）在时间轴第2帧处使用箭头工具选中右边的三角形，单击Properties面板中的Color下拉列表框，选择下拉列表中的Alpha命令，将Alpha值设为80%，如图2-40所示，使得右边三角形稍透明一些。

图2-40 设定Alpha值

（10）同样，在第3帧插入一个关键帧，与上帧的操作一样，再拖一个三角形并排放在右边，然后将最右边的三角形Alpha值设为60%。

第4帧也是如此，只不过最右边的三角形的Alpha值设为40%，完成后的效果如图2-41所示。

图2-41 完成MovieClip符号制作

（11）单击

按钮返回到场景中，选择Insert→NewSymbol命令，在CreateNewSymbol对话框的Name文本框中输入“三角形按钮3”，并选择Button作为符号类型，单击OK按钮。

如图2-42所示。

图2-42 新建一个Button符号

（12）返回到舞台后，在Library面板中将“三角形按钮2”符号拖放到舞台中央，该符号就被放置在UP帧上，如图2-43所示。

这样，一个具有动画效果的按钮就制作好了。

当用户将鼠标放在该按钮上时，就会看见一排连续向右侧闪动的三角形动画。

图2-43 创建UP帧图像

（13）单击

按钮返回到场景中，选择Insert→NewSymbol命令，在CreateNewSymbol对话框的Name文本框中输入“运动的小人”，并选择MovieClip作为符号类型，单击OK按钮。

如图2-44所示。

图2-44 创建“运动的小人”符号

（14）返回到舞台后，选择绘图工具栏中的椭圆工具、贝塞尔工具以及自由变换工具等进行配合，制作出一个小人的动画图案，具体方法如下：

●首先使用绘图工具栏的椭圆工具在舞台中绘制一个小人的头像，如图2-45所示。

图2-45 绘制小人的头像

●选择绘图工具栏的直线工具，在Properties面板中将直线类型设置为Solid，并把直线的宽度设置为10，如图2-46所示。

图2-46 设置直线工具的属性

●返回到舞台中，选择直线工具绘制小人的身体以及四肢，如图2-47所示。

●完成小人的身体以及四肢绘制后，选择绘图工具栏的自由变换工具调整小人头像的大小及位置，如图2-48所示。

      图2-47 绘制小人的身体以及四肢                   图2-48 使用自由变换工具调整

●这样做出的小人不够逼真，用户可以选择绘图工具栏的贝塞尔工具对小人进行细化处理，如图2-49所示。

注释：

调整小人身体的关节运动是重要的一步，小人关节运动的好坏直接影响到奔跑动画的效果。

用户在细化处理时可以选择贝塞尔工具单击小人的某个关节，再使用上、下、左、右键对其进行微处理。

需要注意的是：

在这里必须用鼠标单击某个节点，使其变为实心色才可以进行编辑，如图2-50所示。

      图2-49 细化处理小人图案              图2-50 对关节进行微处理

（15）第一个模板小人制作成功后，用户就可以对其进行编辑。

首先在时间轴1～4帧上分别绘制4个不同的小人形象，如图2-51所示。

这是小人奔跑的最基本动作，如果用户对小人奔跑的效果不满意，可以在其中加入某些动作细化的关键帧。

图2-51 奔跑的基本动作

（16）以上两组动画制作好之后，就可以将它们合并到场景中了。

首先将三角形按钮符号从Library面板中拖入到场景，然后右击时间轴第1帧，在弹出的快捷菜单中选择Actions命令。

在打开的Actions-Frame面板中选择Actions→MovieControl→Stop命令，如图2-52所示。

图2-52 设置三角形时间轴Stop命令

（17）返回到舞台中鼠标右键单击三角形按钮，在弹出的快捷菜单中选择Actions命令。

在打开的Actions-Frame面板中双击选择Actions→MovieControl→goto命令，另外在面板中将Frame文本框内的数值改为2即可，如图2-53所示。

（18）单击时间轴第2帧，在菜单栏中选择Insert→Keyframe命令，插入一个关键帧。

然后将Library面板中的“运动的小人”符号拖放到舞台中。

（19）右击时间轴第2帧，在弹出的快捷菜单中选择CopyFrames命令，如图2-54所示。

图2-53 设置舞台三角形goto命令

图2-54 选择CopyFrames命令

（20）右击时间轴第3帧，在弹出的快捷菜单中选择PasteFrames命令，将第2帧的动画复制到第3帧中。

然后右击时间轴第3帧，在弹出的快捷菜单中选择Actions命令。

在打开的Actions-Frame面板中选择