更上层楼，酷炫FlashWeb──可控制的文本滚动效果

数码时尚

7Stars

　　FlashWeb中可控制的“文本滚动”效果我们经常在浏览网页时看到，当点击“控制”按钮时，文本可随按钮控制而向上或向下滚动。下面我们就来看看这个效果是如何制作的。

　　Step1：制作前准备

　　文本滚动框需要显示一系列文本，我们将这些文本信息以条目方式保存到名为“text.txt”的文件中，每行一条，并在文件头加上“text=”变量名称。

　　运行Flash MX新建一个文档，使用快捷键“Ctrl+J”打开“Document Properties”窗口，修改该Flash画面大小为500px×350px，设置背景颜色为“#000066”。

　　Step2：设计可控制滚动按钮

　　执行主菜单“Insert/New Symbol...”命令，在弹出“Creat New Symbol”对话框中定义一个名称为“btn_arrow”的按钮(图1)，进入编辑按钮状态。在工具箱中选择“Oval Tool”工具，更改该工具属性的填充颜色为“#FFFFFF”，线条为“hairline”，在页面中心画一个圆，切换至“Arrow Tool”工具，选择该圆的边缘，按“Delete”键将它删除。同样，再利用“Line Tool”工具，在该圆的内部勾勒出一个向下的箭头，使用“#00FF00”色填充箭头内部，最后删除箭头外边线(图2)。

　　解说：在编辑很小的元素时，我们可以更改编辑界面右上角放大列表值，将这个页面放大到800%或更大。

　　Step3：建立两个“Movie Clip”，控制文本滚动方向

　　执行主菜单“Insert/New Symbol...”命令，分别定义两个名称为“text up”和“text down”的Movie Clip。

　　编辑“text up”Movie Clip，在时间轴上右键分别点击第1、2、3帧，执行“Insert Blank Keyframe”命令，插入空关键帧。选择第1帧，执行右键菜单中的“Actions”命令打开动作窗口，展开并双击“Actions/Movie Control/Stop”动作，将它添加到第1帧中(图3)。再为第2个关键帧添加Action为“Set Variable "/ text.scroll"=/ text.scroll-1”，即执行到第2帧时，会告知场景上的Text Field(变量名为text)目前所显示的行数往上移一行，实现向上滚动(图4)。最后设计第3个关键帧的Action为“Go to and Play(2)”实现与第2帧的循环(图5)。

　　复制“text up”这个Movie Clip，并更名为“text down”，更改第2个关键帧的Action为“Set Variable "/ text.scroll"=/ text.scroll+1”，就是当执行到第2帧时，会告知场景上的Text Field目前所显示的行数往下移一行，实现向下滚动。

　　解说：在Flash MX中，添加动作代码有时感觉比较麻烦，需要展开相应动作类目，来选择具体动作。我们可以将需要添加的动作，写入一个文本文件中，然后拷贝到动作列表中。

　　Step4：切换到主场景并安排电影场景，实现Flash电影效果

　　新定义一个bg层，使用“Rectangle Tool”工具，更改线条属性(图6)，在“bg”层中画一个文本滚动框。

　　解说：可以点击属性面板上的“Custom”来设计更复杂的边框效果。

　　再定义Text层，使用“Text tool”工具，在白色区域上放置一个“Text Field”并在属性中设定变量(var)名称为“text”。

　　最后定义button层，导入“text up”和“text down”这两个Movie Clip，并分别命名为up、down(图7)。添加两个“btn_arrow”按钮到编辑区域中，使用快捷键“Ctrl+Shift+9”旋转其中一个按钮至180度，并分别设置其Action(图8)。

　　最后设定场景Actions为“loadVariablesNum("text.txt",0);”把变量载入到电影的场景里。

　　这样，一个可控制的文本滚动效果就制作完成了。