在Flash中创建简单动画
出自9RIA.com WIKI
Adobe Flash CS4专业版介绍了一个修复动画引擎，它易于使用，与之前的版本相比也更强大。如果你已经精通了基本的引擎，Flash给你提升创造能力提供了空间。
在这篇文章中，我将像你展示如何导入插图到Flash CS4中，创建一个动画，当你创建动画后改变一个动画。
目录 |
要求
为了充分的理解这篇文章，你需要如下的软件和示例文件：
Flash CS4 Professional
向Flash中导入插图
利用Flash CS4，你可以从多个Adobe CS4套装应用程序中导入内容，包括Adobe Photoshop，Adobe Illustrator，和Adobe Fireworks，还有Adobe InDesign CS4和Adobe After Effects CS4。
在这个示例中，我们从Fireworks中导入插图。利用Fireworks CS4，你能够操作栅格和矢量内容。当你缩放他们时，栅格文件(或位图)变得像素化。一个图片是一个栅格图像文件的示例。另一方面，当是缩放矢量文件时它不会像素化。不论你放大或减少多少，矢量图形路径仅仅是重绘而已。
在Fireworks CS4中，你可以创建资源来导入到Flash CS4中。在这个例子中，我利用渐变填充和实线与一个文本框组成一组，创建了一个矢量多边形(如图1)。这个Fireworks文件保存为一个PNG文件，稍后可以导入到Flash CS4中。
图1：Fireworks创建的矢量图形
为了导入一个文件，你必须在Flash启动屏幕中从Create New列中选择创建一个Flash文件(ActionScript 3.0)来创建一个新的Flash CS4文档。
为了导入Fireworks的PNG文件，选择“文件”>“导入”。你有两个可选项：你可以导入到舞台上，也可以导入到库中。舞台是你用Flash创建的影片的主要动画区域。库是一系列的资源或图片，是工程的一部分，但是不一定要在舞台舞台上。库会包含你在Flash中创建的或者从其他应用程序中导入的资源。
通过选择“文件”>“导入”>“导入到库”来将一个Fireworks的PNG设计导入到Flash CS4的库中。然后浏览文件，点击“导入到库”。在导入Fireworks文件的对话框中，选择的选项如图2所示。
图2：Flash CS4专业版中Fireworks导入对话框
在这个例子当中，你希望保持一个矢量可编辑状态，而不是将它转化成一个栅格或者位图设计。为了更复杂的设计，你也许希望作为一个位图导入以保持外观。
当你点击“确认”，这个fireworks资源将被导入Flash。点击库标签，来查看导入的资源。当资源被导入时，这个设计自动地被转成成了一个叫Go.png的图形。
从库中拖拽Go.png到舞台上释放，将图形放置到舞台上。将对象放在左上角。如果你在一开始时你没有放到准确的位置，你也可以使用鼠标重新拖放图形到正确的位置。你的文件看起来就像图3那样。
图3：将Go图形放到舞台上
创建动画
现在，假设你希望制作一个动画，将素材从左上角移动到右下角。
首先，你需要告诉Flash，你希望渐变这个对象。当你使用了一个渐变效果，你必须告诉Flash你希望动画从舞台上哪里开始，到哪里结束。Flash会自动地填充你定义的从开始到结束点中间所有的帧。
在Flash中有两种类型的渐变：运动渐变和形状渐变。当你移动Go图形而不是改变他的形状是，你需要创建一个运动渐变。要做到这样，在Flash中右键点击对象，选择“创建运动渐变”。
这个时候你会注意到，在这个应用程序底部的时间轴有了变化。
时间轴显示了动画样式，以及动画从开始时间知道达到目标结束的一个过程。时间轴被划分为帧，或者独立的时间点，这样来显示动画。
默认地，Flash以24帧/秒的帧频显示单个帧，这意味着每秒动画都在播放，每次播放24帧。时间轴上，红色表示了播放头，它显示了Flash应用程序当前播放到了哪帧。
在你创建动画渐变之前，时间轴是单帧的，包含了你放在舞台上的对象。当你创建了渐变，Flash将时间轴扩展到了24真，并且将播放头放在渐变的末尾。
既然已经在渐变末尾了，你希望Go图形出现在舞台的右下角。为了改变它的位置，仅仅秩序拖放图形到预期的位置。当播放头在24帧是，将Go元件移动到舞台的右下角(如图4)。
图4：在动画中将Go图形设置到最终的目标位置
当你释放对象时，你会留意到一条有很多点的直线出现在图形的开始位置(原始位置)到最终位置(目标位置)之间。这条线被称为运动路径。当你发布文件时不会真的显示出来，但它是一个可视化的提示，向你展示了图形从原始位置到目标位置经过的路径。
既然目标位置已经设置好了，你可以点击定拖拽播放头在时间轴上查看动画。点击并拖拽播放头到第一帧，然后按小回车在Flash中播放动画。你可以看到对象从左上角移动到右下角。
现在，你可以在Flash Player中预览看看是怎样的了。在Flash Player中又在Flash CS4中测试你的动画是一个很好的注意，因为Flash Player预览更加精确地显示了世界和动作，你也许会控制调整你的动画。要在Flash Player中预览，在Flash主菜单中选择“控制”>“测试影片”。
现在，你看到了一个播放动画的新窗口出现。动画将一直循环因为你没有告诉动画什么时候停止。这个我们稍后讨论。
当一个动画创建好后，改变动画
既然你已经创建了原始动画，你可以使用Flash CS4来修改和扩展它。首先，让我们来更改动画的方向。
你现在的动画是将Go元件从舞台的左上角移动到右下角。但是现在你想改变目标位置，从右下角到左上角。
为了做到这个改变，请确保在目标点拖拽你的播放头到动画的最后一帧：第24帧。
要将Go元件移到目标位置，动画方向，简单的点击并拖拽元件到预期位置。在这个示例中，将它移动到舞台的右上角。
现在，运动路径已经更新了。如何你运行或者测试动画，动画将横跨舞台的左边到右边，而不是沿着对角线向舞台的下方。
你同样可以按照这些步骤来修改动画的原始位置，但是你需要将播放头移动到第一帧或者帧1，来做这个改变。在这个示例中，让我们将原始位置从左上角移动到左下角吧。
首先，将播放器移动到第一帧。然后点击并拖拽Go元件到舞台的左下角。
现在，动画和运动路径反应了动画新的起始位置。你可以使用同样的方法来更新动画的原始位置和目标位置。仅仅是将播放器移动到渐变开始或者结束的帧上，然后移动对象到预期的位置。
给你的动画增加中间点
创建点到点的动画也许很容易，但是他们也相当的烦人。更复杂的动画通常在渐变中有很多中间点赋予一些预想的效果。
例如，在这个示例中，你也许想动画从一个角落移动到一个角落再到一个角落，从左下开始，移动到左上，然后右上结束。
要达到这个目的，你需要在动画的中间增加一个中间位置。这个过程和设置原始或目标点一样，但是现在你需要将播放头移动到动画的中间位置。
将播放头移动到12帧(如图5)。
图5：给动画增加一个中间位置，或者中间点
在时间轴的下方是一个小的文本指示，显示了播放头当前的位置。你可以点击拖拽你的鼠标来来取消这个特殊的点，或者双击播放头，手动的输入位置。
既然播放头已经在正确的位置，动画显示元件在运动路径的中间。如果你看得仔细，你会注意到一些细微的点沿着运动路径(如图6)。这些点代表了对象中每个单独帧的位置。从元件的开始点到当前点之间有12个点，因为你的动画现在是在第12帧。Go元件的黑色圆圈是它的注册点，注册点关联元件在运动路径中的位置。
图6：运动路径显示了对象在每一帧的位置，还有对象放在路径上的位置
要创建元件的新的中间目标位置，点击并拖拽它到舞台左上角。
现在，你有三个动画点，从左下角开始，移动到左上角，在右上角结束。
在时间轴上，一个小黑点出现在12帧，它显示了你用来创建动画渐变而创建的中间位置。如果你想改变中间点，将播放头移动到这点，并拖放对象。这将会采用新的中间点更新运动路径。
你还可以贯穿动画来继续增加中间点，每帧有个最大值。仅仅需要将播放头移动到期望的帧，然后移动对象。
改变动画间隔
到目前位置，你已经可以在动画的整个过程中改变图形的位置，但是你没有改变间隔。间隔是动画运行的总时间。在这个示例中，渐变间隔是24帧。以默认的24帧每秒的帧频，你的动画将运行1秒钟。
如果你想改变整个动画的间隔，你需要改变时间轴的动画层。在Flash中，每个渐变都是由一个独立的层来表示。要改变间隔，仅仅拖拽渐变结束点到任何一个更长或者更短的间隔即可。
如果你希望你的动画中24帧每秒的帧频下播放2秒，那么就移动你的鼠标指针到时间轴上渐变结束的位置，将其延长到48帧。当鼠标图标变成一个左右箭头是，点击并拖拽渐变到右边以扩展到48帧。
当你松开鼠标按钮，动画将适当得更新到新的预期间隔。你会注意到，中间点同样的移动到新的渐变中间点。
运动路径现在有两倍的点，因为它现在扩展到48帧，每个点代码了Go图形在每个特定帧的位置。
同样，你可以将动画缩短回24帧，通过点击并拖拽时间轴上渐变的左结尾回到24帧。
给运动路径增加曲线
每段运动路径也都是可编辑的。例如，现在这个动画将元件沿着直线从一点移到一点再到一点。你可以改变他，让渐变沿着沿着曲线移动动画，仅仅通过你的鼠标进行拖放。
在之前，Go元件已经移动到了左上角，让我们来移动它到右上角，通过曲线路径而不是直线路径。要完成这个，只需拖拽与释放在渐变某一部分移动路径。
确保你选择了工具菜单中的选择工具(带有黑色箭头的图标)。
然后沿着舞台上方移动你的鼠标经过运动路径。你会看到一个曲线图标出现的鼠标指针的旁边，这意味着你现在可以拖放运动路径来创建一个曲线了。
现在让我们来创建一个曲线路径，从左上角朝着舞台中心向下，然后向上到右上角。当鼠标指针显示了曲线图标，点击并拖拽运动路径的中线部分朝着舞台中心向下(如图7)。
图7：将直线路径改成曲线路径
当你释放鼠标按钮，运动路径将会更新，向你显示曲线。现在，当你预览动画时，元件将沿着你刚刚创建的曲线运动。如果你想改变两点间的曲线度，你可以再次点击并拖拽曲线。
缩放与旋转动画
同样的，你可以运用变形工具来操作运动路径。在Flash中，变形工具允许你缩放，旋转，倾斜，或者拉伸对象。你可以旋转动画的运动路径，改变初始、中间和目标点的位置，而不用旋转元件本身。
要做到这个效果，采用选择工具选择运动路径。路径将会加深以显示它被选中。
你现在可以通过点击并拖拽它来移动或者重定位运动路径。在这个示例中，选择变形工具。确保运动路径被选中，并选中变形工具。
一旦你选择了变形工具，运动路径的边缘会出现一个方形框。这个被称为边界框，方形框被称为句柄。如果你点击并拖拽句柄，你可以缩放边界框的内容 - 在这里是运动路径 - 在各个方向上。如果你将鼠标指针微微地移出到角落句柄外，鼠标指针会变成显示允许你旋转边界框内容。
当旋转图标出现时，你可以点击并拖拽来改变动画的运动路径的角度。在这个示例中，点击并选择将动画顺时针旋转90度。
当你释放鼠标按钮时，你可以看到运动路径已经改变(如图8)。
图8：旋转动画方向
现在，让我们来调整边界框的高度，以保持动画限制在舞台内。选择上方的句柄并朝下移动。然后朝上移动底部的句柄(如图9)。
图9：缩放动画的运动路径
动画现在已经被旋转与缩放。如果你想测试动画，你会看到他的路径已经改百年了，但是元件本身并没有旋转，因为你仅仅是修改了路径，而不是路径上的对象。
为了结束动画，你需要做的就是在时间轴的最后添加一个stop的动作。点击时间轴底部的新建图层按钮来创建一个新层。
现在，确保是在动画的最后一针，选择了新图层，并创建一个空白关键帧，通过选择主菜单中的“插入”>“时间轴”>“空白关键帧”菜单。
选择“窗口”>“动作”打开动作面板。确保你已经选择了正确的图层，而且你的播放头是在你创建的新的空白关键帧上。在动作面板中(如图10)输入下面的脚本：
stop();
图10：在动作面板中添加脚本
完成后，你会看到你个小a出现在时间轴的空白关键帧上。
就是这样。现在当你预览你的动画时，你会看到它东开始运动到结束，然后就停止，而不是像之前那样一直循环。