当前位置:软件学习 > Flash >>

Flash精彩实例——幻彩方块

本教程使用动作手稿程序和复制电影手稿程序来创建鼠标移过的效果,以保持文件大小为最小。本实例实际上是移动方框的一个变本,这里我们详细讨论一下这个程序是如何工作的。完成的实例如下,大家可以用鼠标在上面划过试试效果:

fla原文件下载

  创建颜色改变方框电影夹

  首先,打开一个新的Flash文件;然后创建一个电影夹命名它为"ChangingBox"。在电影夹ChangingBox的第一帧处使用画图工具创建一个简单的正方形,可以选任何你喜欢的颜色。实际上也不一定要是完全的正方形,但一定要是闭合的。方框的左上角应该放置在(0,0)处,即原点处。在第四、第七、第十三帧分别插入一个关键帧。然后回到第一帧并做个形状的变形。
  对第四、第七和第十帧做同样的事情。同样使用油漆桶在第四帧、第七帧和第十帧上改变方框的颜色。在第十三帧(与第一帧相同)上,增加一个动作:Goto and Play (1)。

  当Flash电影夹完成了,就是这13帧一次又一次的播放产生了方框改变颜色的效果。
  现在在第十四帧上增加一个关键帧,命名为"commence",并创建一个Motion Tween(运动变形)。在Flash例子中,在完全消失之前方框水平旋转两次,在你的电影中你可能不会做得这么复杂,可能只是简单得使它消失。现在,在第十六帧和第十八帧上放置关键帧。在第十六张上作个水平的旋转(具体可以:点击第十六帧,再选择Modify(修改)->Transform(变形)->Flip Horizontal(水平旋转))。再转到第十八帧上,点击方框并设置它的alpha为零,这样作是为了实现淡出。然后在第十九帧上插入一个Clear(清除)关键帧,用它你可以清除所有在这个帧上的TWEEN(变形),再为这个帧增加两个动作:第一个动作为"Remove Movie Clip ("")";第二个动作为"Stop"。
  为了创建鼠标移过按钮,请复制第一帧。然后创建一个新的符号,再使它转换为按钮(命名为BoxButton)。在BoxButton图标的第一帧上粘贴你刚才所复制的帧,接着移除形状变形。最后回到ChangingBox电影上。

  增加BoxButton到ChangingBox电影中

  如图1所示,在ChangingBox中增加一个新的图层并在第二图层的第一帧插入BoxButton的图标。再确保BoxButton的左上端处在(0,0)坐标轴上。然后改变BoxButton的alpha值为零,使它完全的透明。接着在第二图层的第十三帧上增加一个Clear(清除)关键帧,这个关键帧应该直接处于这个帧的上方并带有"Goto and Play (1)"的动作。

(图1)

  在方块按钮的属性上转到动作屏幕上。可以点击"OnMouseEvent",再选择"Roll Over",然后增加"Goto and Play ("commence")"的工作,"commence"成为之前键入到ChangingBox电影的时间线上的标签。
  这个ChangingBox电影就这样完成了,我们现在可以回到文件的主时间线上(可以选择Edit(编辑)->Edit Movie(编辑电影))

  创建主电影时间线并增加方框图标

  在主电影时间线上增加两个图层,并从下面到上面对它们进行命名:"Background", "Image", "BoxMovie Actions"。
  在“Background”图层中增加一个背景(如果你想让它更美观)。在这里我创建一个灰色方框,文字的背景就是这个灰色的方框。
  在"Image"图层的第四帧上增加你想当方框消失的时候要覆盖的图片。这里所选的图片有"SolarBurst Web Design."字样。再为这帧增加一个"Stop"(停止)的动作。
  在“BoxMovie Actions”图层上可以完成所有的动作手稿程序。在这一层的第一帧上增加ChangingBox电影的图标并将它放置在几乎是你电影的左上端,在这儿你想让第一个方框显示出来。这里允许你更好地为ChangingBox创建一个开始点(x,y);同时在"ChangingBox"电影地属性中命名图标为“box”。然后在第二帧和第三帧上插入一个关键帧,并在第三帧上插入附加的帧。再回到第一帧。
  你屏幕上现在看起来就应该象图2所示了。

  (图2)

  显示和隐藏方框
  第一个动作:在第一帧上设置属性

  (图3)

  如图3所示。点击第一帧的帧属性再选择“Actions(动作)”。现在你需要设置方块的X和Y属性。点击Set Property,目标是"/box",你想设置“X Position”及数值,它应该是个表达式。这个数值就是当前图标X的位置。为了决定当前X坐标的位置,请打开Object Windows(对象窗口),具体可以选择Window(窗口)-> Inspectors(观察器)-> Object(对象)。你将看到它的尺寸(w(宽度)和h(高度))以及它的位置(X和Y)。同样地可以设置Y坐标位置。下面的语句就是设置属性的例子:
  Set Property ("/box", X Position) = 10.5
  Set Property ("/box", Y Position) = 14.6

  这时候一些变量也需要进行设置。方框开始的X和Y,以及宽度(w)和高度(h)要进行设置。利用"Set Variable"将它命名为"origx"。"Origx"应该等于GetProperty( "/box", _x)。GetProperty是一个表达式,它可以使用表达式编辑器来构造。你同样需要对Y坐标位置做同样的事情:"origy" = GetProperty("/box",_y)。为了决定宽度和高度,你要再一次使用GetProperty命令:在这个例子中宽度和高度变量分别设置为"sizex"和"sizey"。最后超过两个的变量要设置,它们将用于下一帧,具体设置如下:Set Variable: "d" = 1以及Set Variable: "squares" = 9。变量"squares"代表了你想在屏幕上显示的方框数目,在这个例子中使用9个方框。但是方框的数目是取决于你方框的大小和所覆盖的区域。实现的代码如下:

  Set Property ("/box", X Position) = 10.5
  Set Property ("/box", Y Position) = 14.6
  Set Variable: "origx" = GetProperty ( "/box", _x )
  Set Variable: "origy" = GetProperty ( "/box", _y )
  Set Variable: "sizex" = GetProperty ( "/box" , _width )
  Set Variable: "sizey" = GetProperty ( "/box" , _height )
  Set Variable: "d" = 1
  Set Variable: "squares" = 9

  第二个动作:在第二帧上复制电影夹
  在主时间线的第二帧上再次地使用Properties和Actions。这里是ChangingBox 电影 ("box" 图标)被复制到屏幕的地方。
  在Actions(动作)面板,点击Duplicate Movie Clip(复制电影夹)。确保Duplicate Movie Clip圆被封锁了,然后增加你想复制的目标("/box"),新的名字将是"/box"&d(确保它被标记为一个表达式而不是字符串),以及将要复制的深度d成为另外的表达式。
  现在我们需要设置新创建方框的X位置。为了做到这一点,要增加一个Set Property命令:Set Property ("/box"&d, X Position) = origx + d*sizex,要确保这也是一个表达式。为了理解这一句和解释如下:"origx"是"box"图标的X位置,"sizex"是"box"图标的宽度,"d"这次使它等于1.将新建的新图标("/box1")紧邻初始的图标"/box"。在这个时间进程中它将更有益于复制剩余的动作手稿程序命令。以下是实现的代码:

  Duplicate Movie Clip ("/box", "box"&d, d)
  Set Property ("box"&d, X Position) = origx + d*sizex
  GetProperty("box"&d, _x) > squares*sizex + origx - 5
  Set Property ("box"&d, Y Position) = origy + sizey
  Set Property ("box"&d, X Position) = origx
  If (n < squares)
  Set Property ("box"&d, X Position) = origx + n*sizex
  Set Variable: "n" = n+1
  Else If (ntwo < squares)
  Set Property ("box"&d, Y Position) = origy+2*sizey
  Set Property ("box"&d, X Position) = origx + ntwo*sizex
  Set Variable: "ntwo" = ntwo+1
  Else If (nthree < squares)
  Set Property ("box"&d, Y Position) = origy+3*sizey
  Set Property ("box"&d, X Position) = origx + nthree*sizex
  Set Variable: "nthree" = nthree+1
  Else If (nfour < squares)
  Set Property ("box"&d, Y Position) = origy+4*sizey
  Set Property ("box"&d, X Posi

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,