CSDN博客

img yjgx007

ActionScript动画入门

发表于2004/5/17 17:48:00  1654人阅读

 

James Rice

作者简介:James是专注于Web开发的自由创作者,并向个人、小型或大型商务公司提供Web开发咨询。访问他的个人工作室:jamesrice.net,他的个人weblogjamieblog.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

 

到现在为止,我们已制作完了我们需要的3symbols。现在,合并“handle”和“slider”,从library面板中点击并进入我们刚才创建的“slider”符号,在当前层上方插入一个新的层,依照下面的图,从library面板中拖动一个“handle”符号实例到stage舞台)上。用属性面板设置handle的位置:0,-15,以及将这个实例的命名为“handle”,这个handle将被定位在slider-轨迹线的左端,它的属性见下面图片显示:

 

图片6

 

你的slider-轨迹线现在看起来像下面的图片:

 

图片7

 

引入ActionScript代码:

是引入ActionScript时候了!在刚才的slider符号中,在已存在的两个层上再建一个层并命名为“actions”。在actions层上选择第一帧并打开ActionsActionScript)面板。拷贝或重新敲入下面的代码:

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”参数是truefalse:被拖动的对象是否在拖动范围的中心点,在这个教程中这个参数被赋于false,我们更关心的是如何用数值来限制slider的运动范围,我们设置topbottom坐标为0leftright分别为0400,这样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;
};

头两行代码初始化我们的两个变量。我们创建变量targetWidthtargetHeight 并设置它们等于图形符号的初始高度和宽度。注意,这初始化只发生一次:在我们电影的开始时。

 

代码的第二部分为符号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”变量决定真实高度到达目标高度的快速程度。

 

开始运行

差不多完成了!你可以测试一下电影(如果你想这么做的话)。你将看到在底部的滑动条以及一个小的正方形(这个正方形是静止的)。为何不去移动这个正方形呢?因为我们还没有告知滑动条应该变化这两个值:targetHeighttargetWidth

 

双击滑动条让我们再一次编辑这个符号,在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的坐标与targetWidthtargetHeight这两个值相关联在一起,并且设置目标宽度和高度为handlex坐标加10

 

由于在starDrag()函数中定义了handlex坐标值范围在0400之间,因此被缩放图形的目标大小在10410像素之间(宽:10410,高:10410),你可能会把“+10”去掉,并使图形大小在0以下,我可不想让它消失,呵呵。

 

恭喜!

 

返回到主时间线,点击Control(控制) > test movie(测试电影),测试一下吧!如果你完全按照上面的步骤去做,你将会看到正确的演示效果。

 

下载全部源代码:http://www.sitepoint.com/examples/actionanim/source_file_mx.fla

 

0 0

相关博文

我的热门文章

img
取 消
img