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 Position) = origx + nfour*sizex
　　Set Variable: "nfour" = nfour+1
　　End If
　　End If
　　Set Variable: "d" = d+1
　　If (d = 46)
　　Go to and Stop ("stopboxes")
　　End If

　　同时更好地理解这个，将有益于增加剩余命令到Flash电影的其它帧上。后面我们将要解释这个手稿程序。

　　第三个动作：在主时间线上设置剩余的动作

　　（图4）

　　如图4所示，转到BoxMovie Actions图层的第三帧，设置属性和动作，增加以下简单命令：
　　Goto and Play (_currentframe - 1) or Goto and Play (2).

　　在Image图层中，命名帧为“stopboxes”。“Stop”动作在这个帧中在之前已经增加了。

　　接着我们转到BoxMovie Actions图层的第二帧上。

　　第四个动作：对动作进行解释

　　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 Position) = origx + nfour*sizex
　　Set Variable: "nfour" = nfour+1
　　End If
　　End If
　　Set Variable: "d" = d+1
　　If (d = 46)
　　Go to and Stop ("stopboxes")
　　End If

　　上面是这一帧的所有动作。从本质上讲，这一帧被一遍有一遍地播放直到"d"等于46。每次这一帧被播放，"d"就增加1。在这图层的第三帧中的"Goto and Play (_currentframe - 1)"命令就重复地将电影播放到这一帧，就这样"d"每次就增加1。

　　第一个If语句跟踪了新复制的"box"&d图标的位置。"If (GetProperty("box"&d, _x)> squares*sizex + origx - 5"中的"squares"等于你想在屏幕上显示的方框数目，然后再减去5（这里5指你不创建另外的方框）。只要新图标的X位置大于你想要创建一条新线的地方的X位置，新的图标将被放置在下一行中以继续用方框有序地覆盖屏幕。

　　处于第一个If语句下面地Set Property命令放置新的"/box"&d图标在新的直线上。它放置新的图标回到"origx"，此时它的新的y坐标变成了"origy" 加上"sizey"，或者直接在开始的"box"图标下面。其它剩余的If语句控制方框放置到屏幕的位置。那么"n"的用途是什么呢？在这里只要"n"小于你想在屏幕上显示的"squares"数目时，新的方框图标就在屏幕上一个挨一个地被放置；当"n"大一些，"else if"语句就被执行。"ntwo", "nthree", "nfour" 是 "n"的变体。它将继续直到46个方框的图标被创建(这时"d" = 46)。

　　数字46没有别的意思，只是为了全部覆盖屏幕的需要。（一行有9个方块，共有5行），只"d"等于46，程序就指到"stopboxes"帧，这帧上有个“Stop”命令。

　　成果

　　当鼠标移过其中一个方框的时候，"box"图标就播放标"commence"的帧，从本质上讲，它是将图标变成透明以揭开下面的东西，最后再从内存中移除图标。因此"Remove Movie Clip（移除电影夹）"命令处于ChangingBox电影的最后一帧。
　　这里要做到：在ChangingBox电影的播放帧数不能等于屏幕上显示的方框的数目（变量"squares"），因为如果不是这样的话所有的方框就会同步，就会失去闪烁和改变颜色的效果。
　　最后再补充说明如下：如果想要更多的行，只需重复"else if"语句（加入"n"变量）指导你的行数足以覆盖屏幕所有的空间。

【责任编辑：Shiny】