James Rice
作者简介：James是专注于Web开发的自由创作者，并向个人、小型或大型商务公司提供Web开发咨询。访问他的个人工作室：jamesrice.net，他的个人weblog：jamieblog.com
阅读级别：8.7
译序：本篇教程运用一点数学计算技巧，希望对ActionScript脚本爱好的朋友有些帮助。
Flash的基本知识你已经学过，但是你一直不太明白怎样以设计师的角度去创建一个精细的基于Flash界面的Web站点。在这篇教程中，我将向你展示采用一个简单的方式创建交互式的动画，动画中用到了ActionScript技术。
示例中，ActionScript将被用于缩放一个基本的图形，除此以外，ActionScript同样用于其它场合，如运动时的效果，透明效果，或颜色变化等。假设你已经大致了解一些ActionScript语法的知识，并会使用一些创作Flash动画的工具，如DreamWeaver Flash MX。如果你对这些都不是很了解，建议你暂时停一下，先去阅读一点Flash 初级教程。
在我们的工程中将包含一个带有handle（句柄，你可以理解为汽车的方向盘）的Slider Bar（滑动条），它将用于在stage（舞台）上控制一个正方形的大小，拖动handle，正方形将随着扩大或缩小。
图片1：
开始
首先，我们需要设置我们的stage并创建几个symbols（符号），建一个新的Flash文档，并设置550像素宽、500像素高。设置frame（帧）速率为25帧/秒。
图片2：
下一步，创建3个简单的symbols－全部的电影Clips（剪辑、片段）。制作每个符号，选择Insert （插入） > New Symbol （新符号）。我们会把这些symbols存储在library（库）中，过一会我们会把它们放置在stage上。
命名第一个电影片段为“shape”，并在里面创建一个10 x 10像素大小的正方形，使用align（排列）面板在定位正方形到垂直和水平方向的中心，同时，正方形的注册点（定位点）应该是在这个正方形的中心。
图片 3：
让我们返回到主时间线， 创建一个新的电影片段，命名它为“handle”，利用它控制刚才我们创建的正方形大小。“handle”大小是个小矩形8像素宽、30像素高，与正方形一样，中心对齐到垂直和水平位置。
图片 4：
返回到主时间线创建最后一个符号－“handle”滑动时的轨迹线，创建这个电影片段命名为“slider”。在这片段内部，只需简单放置一个400像素长的水平线，使用1像素的线型。然后，对齐这条线，左端的坐标是x=0,y=0，用Align 面板完成。
图片5：
到现在为止，我们已制作完了我们需要的3个symbols。现在，合并“handle”和“slider”，从library面板中点击并进入我们刚才创建的“slider”符号，在当前层上方插入一个新的层，依照下面的图，从library面板中拖动一个“handle”符号实例到stage（舞台）上。用属性面板设置handle的位置：0,-15，以及将这个实例的命名为“handle”，这个handle将被定位在slider－轨迹线的左端，它的属性见下面图片显示：
图片6：
你的slider－轨迹线现在看起来像下面的图片：
图片7：
引入ActionScript代码：
是引入ActionScript时候了！在刚才的slider符号中，在已存在的两个层上再建一个层并命名为“actions”。在actions层上选择第一帧并打开Actions（ActionScript）面板。拷贝或重新敲入下面的代码：
handle.onPress = function(){
this.startDrag(false,0,0,400,0);
};
handle.onRelease = function(){
this.stopDrag()
}
代码包含了两个事件的处理，第一个handle.onPress 函数定义了：当我们的光标在符号实例“handle”上并且鼠标按下的时候将要发生些什么。其中，我们用到了Flash函数startDrag();这将允许我们从左到右拖动这个handle，在拖的动作中我们通过函数startDrag()中的数值参数来限制拖动范围，这个函数看起来是这样：startDrag(lock, left, top, right, bottom).
“lock”参数是true或false：被拖动的对象是否在拖动范围的中心点，在这个教程中这个参数被赋于false，我们更关心的是如何用数值来限制slider的运动范围，我们设置top和bottom坐标为0，left和right分别为0和400，这样handle就可以沿着我们预设的范围滑动了。第二个函数 handle.onRelease 是当鼠标释放时，对handle的拖放将被停止。
返回到主时间线，创建一个层命名为“control”，放置一个slider实例在这个stage上，并定位它在75,450。如果你选择Control(控制) > Test Movie（测试电影），将出现一个滑动条，左右拖动handle，这个handle不会控制一些东西。
现在，在主时间线上创建另一个层，命名为“shape”，从符号库library中拖动一个刚才创建好的正方形图形符号到这个stage上，定位它在270,210并在属性面板中命名它“shape”。
图片8：
至于slider电影片段，我们现在需要添加一些动作到主时间线上，在主时间线中现有的层上再创建一个层，并命名它“actions”。在这个层的第一帧上点击并打开actions（动作）面板，在第一帧中放置下面的代码：
shape.targetWidth = shape._width;
shape.targetHeight = shape._height;
shape.onEnterFrame = function() {
var speed = 5;
this._width += (this.targetWidth - this._width)/speed;
this._height += (this.targetHeight - this._height)/speed;
};
头两行代码初始化我们的两个变量。我们创建变量targetWidth和targetHeight 并设置它们等于图形符号的初始高度和宽度。注意，这初始化只发生一次：在我们电影的开始时。
代码的第二部分为符号shape指定了一个onEnterFrame事件处理函数。这个事件对于你可能还比较陌生，但不久你将知道它的好处！onEnterFrame 中定义的一些动作代码在每一帧中都会执行，如果你的帧速率是25帧/秒，在onEnterFrame 中的动作代码将会运行25次/秒。
在这个函数里面，我们用了一个数学公式定义了图形大小的变化。宽度和高度的计算代码是相同的，因为我们处理的是一个正方形并且是等比缩放。
由于计算宽度和高度的代码行的相同性，所以详细介绍这两行代码中的一行：计算真实高度的代码：
this._height += (this.targetHeight - this._height)/speed;
this._height 是图形的真实高度；这个值变化后，图形的大小将在电影中被真实的反映。
this._targetHeight 是一个变量用于保持轨迹以反映真实高度的变化。
真实高度this._height和目标高度this._targetHeight的差值是真实高度的增量，由于每一帧均要执行这行代码，真实高度this._height将快速地逼近目标高度this._targetHeight ，同样的图形大小会有一些变化的痕迹。这是本篇教程的关键部分！
如果你的数学学得不太好，并对此感到有点困惑，请拿出一张纸和一支笔。写下图形的初始高度：10，目标高度：100，重复执行代码，你将看到会发生：真实高度会越来越接近目标高度，调整“speed”变量决定真实高度到达目标高度的快速程度。
开始运行
差不多完成了！你可以测试一下电影（如果你想这么做的话）。你将看到在底部的滑动条以及一个小的正方形（这个正方形是静止的）。为何不去移动这个正方形呢？因为我们还没有告知滑动条应该变化这两个值：targetHeight和targetWidth。
双击滑动条让我们再一次编辑这个符号，在actions层上的第一帧上点击，并重新打开这个actions面板。你将看到刚才我们为slider滑动条符号加入的拖放代码。只需要再添加一点代码到这里，就完成了这部电影的全部功能。用下面的代码代替已存在的代码：
handle.onPress = function(){
this.startDrag(false,0,0,430,0);
};
handle.onRelease = function(){
this.stopDrag()
}
handle.onEnterFrame = function(){
_root.shape.targetWidth = this._x +10;
_root.shape.targetHeight = this._x +10;
};
头两个函数是相同的，第三个函数是新加的，看起来似乎有些熟悉。对，我们利用onEnterFrame 事件处理函数将滑动条上的handle的坐标与targetWidth和targetHeight这两个值相关联在一起，并且设置目标宽度和高度为handle的x坐标加10。
由于在starDrag()函数中定义了handle的x坐标值范围在0－400之间，因此被缩放图形的目标大小在10到410像素之间（宽：10－410，高：10－410），你可能会把“＋10”去掉，并使图形大小在0以下，我可不想让它消失，呵呵。
恭喜！
返回到主时间线，点击Control(控制) > test movie（测试电影），测试一下吧！如果你完全按照上面的步骤去做，你将会看到正确的演示效果。
下载全部源代码：http://www.sitepoint.com/examples/actionanim/source_file_mx.fla
