手把手教你做Flash网页（上） 高杲 2001年 12期 #1 一、Flash技术与应用 　　 “Flash”、“SWF”这些名词，对大多数网页制作爱好者来说再熟悉不过了。你的第一个反应肯定会是这样的：“Flash， Macromedia 公司的一个网络交互性矢量动画设计软件，SWF则是它最终产生文件格式的后缀”。不错，它使网站设计者可以使用 Flash 随心所欲地为网站设计各种动态 Logo、动画、导航条以及全屏动画，还可以带有动感音乐，完全具备多媒体的各项功能。 　　 从Flash技术的整体来看，它没有Director强。它之所以这么流行，关键的问题是它的体积小，流式播放，适合现有的网络状况。 　　 如今介绍Flash的文章很多，但大多只注重一些特效的介绍，在Flash的网络交互性上的介绍就反而少了，这可是Flash的精华所在。本文就是从一个Flash网页范例的制作全过程来引出从Flash的基本绘图到如何实现Flash网页交互功能的制作手法。最终的目的就是使初学者看了本文以后，可以学会制作出自己的Flash网页来。下面我们就开始吧！注：本教程范例源代码可以到http://flash.xiloo.com/download/source.zip下载得到，以方便读者的学习，本例最终效果大家可到http://flash.xiloo.com/pcw.htm查看。 　　#1 二、Flash网页制作实战 　　 由于Flash涉及的知识面很广，故不可能用一篇文章就把所有的东西讲完，所以本文只是把一些重要东西集中到一个Flash页面上去，通过对Flash页面制作全过程的讲解，使读者迅速掌握Flash网络交互功能的设计方法以及相关脚本语言的应用。设计出来的最终页面效果如图1（^12040701a^）所示。 　　 笔者将它分为四个部分进行讲述：1.最上面的广告条部分（阴影的制作、淡入淡出效果、遮罩的应用）；2.中间的交互式菜单部分（按钮的制作、对实例属性值的定义、素材的处理）；3.最下面的版权和计时器部分（内嵌HTML语言、时间函数的应用）；4.载入页面的制作和脚本的编写（loading的制作、相关脚本的介绍） 　　 注：括号内所包括的即是本系列文章中所要讲解的技术问题。 　　#2 1.广告条部分 　　 广告条部分又分为静态和动态两个部分。 　　 （1）静态部分： 　　 如图2（^12040701b^）这部分的阴影效果主要是两个层来实现的。先在工作区内输入“电脑报读者俱乐部”几个字，然后按“Ctrl+B”，将文字打散。这里一定要注意将文字打散，因为在设计中我们可能为了美观，需要用到很多字体，而在合成的时候Flash只把字体的名称记录下来，在不同的机器上安装的字体是不一样的，所以把文字打散后就会被当作一个元素来处理了，在任何机器上的显示效果都是一样的。打散后，我们把这个字体元素拷贝一下，再建立一个新的层，把拷贝的字体元素粘贴到当前层的工作区（可以用Paste in place，粘贴到相同的位置），这样就出现了两个相同的字体元素。我们选择最下层的那个元素后，选择填充色为黑色，这样该字体元素的颜色为黑色，适当移动该元素，使其看上去是上一层的阴影。好了，阴影的效果就制作出来了，是不是非常简单呀？层的作用是非常关键。背景中的pcwclub也是利用层，然后把填充色的Alpha值改变一下就可以了。 　　 （2）动态部分： 　　 这部分里主要是一个常见的淡入淡出效果，具体制作步骤如下： 　　 ①首先应该建立一个属性为MC（Movie Clip影片夹的英文缩写）的符号，然后在工作区内输入“welcome to you”字样，字体的大小，颜色，字间距，可以点选Flash中的文字属性按钮（在Flash主界面右下角的快速启动栏上）。 　　 ②用选则工具选中“welcome to you”字样，选择Modify（修改）菜单中的Break Apart（打散）将字打散，也可用它的快捷键“Ctrl+B”实现快速打散。打散后，就被还原为图形，也就是说现在工作区的“welcome to you”12个字符，不再是文字，而是图形。这时，如果你对字的颜色有什么要修改的，选择添色工具就可以了。例如，你可以用渐变色，直线型或者是辐射型来做出漂亮的字。 　　 ③将“welcome to you”这12个图形依次分别定义为Graphic Symbol（图形符号）“Symbol 1”（符号1）、Symbol 2（符号2），定义符号的快捷键为F8键。要使这6个符号做相同的或者是不同的运动，都必须建立新的层次，否则制作出的就不是预想的效果。 　　 首先，我们把需要用到的12个字母符号放到第一层上，然后适当调节它们之间的距离和垂直位置。然后建立12个层，在第1层中选中符号2，也就是字母“e”，cut（剪贴），用鼠标点选第2层，使第2层为当前层，然后将鼠标移动到工作区，在工作区内按右键，选择“Paste in Place”（原位粘贴），选择将“Symbol 2”按原位粘贴到Layer2（第2层）上。这样可以不破坏刚才调整的个字母符号的位置。按照这样的方法，其他的符号也是这样粘贴到各个层上面的。此后，我们在这12个层的第32帧处用Insert（插入）菜单中的Keyframe（关键帧，快捷键为F6）分别插入关键帧。 　　 ④这一步主要是对关键帧的调整，也就是关键帧在时间轴上的位置，利用出场时间的不同，达到一种动态的效果。先对一层动画进行设置，用鼠标选中第32帧，然后拖放到第8帧上，然后用鼠标点击第1帧，按右键出现菜单选项，选择“Creat Motion Tween”（在两者之间创建运动），选择完以后，就会看见在1～8帧之间出现了一个黑色的带箭头的直线，底色也变为了蓝色，表明设置成功。别的层中Symbol（符号）的设置与第1层类似，就是在不同层当中的起始帧的位置不同，也就是说，第2层的第一个关键帧应当移动到第3帧上，末尾关键帧则移到第10帧，起始关键帧和末尾关键帧之间有5个帧就可以了，而相邻层之间的首帧相差帧就可以了。具体情况如图3（^12040701c^）所示。 　　 ⑤这一步主要是调整各个层上的首帧和末帧上符号的大小和Alpha值，具体如下： 　　 首先选中第1层首帧的Symbol（符号），也就是字符“w”，选中后不要移动鼠标，按右键出现菜单选项，选中Scale（比例）后，在符号的边框上出现白色方框，可以用鼠标拖动来调整符号的大小，调整合适后，再像刚才一样点击鼠标右键，选择Panels（面板）→Effect（效果），出现符号的效果对话框如图4（^12040701d^）。 　　 在下拉式菜单上选择“Alpha”（透明度），然后点击右边的箭头，选择合适的alpha值，这里选择10%。好了，这个符号的设置工作就搞定了。第8个关键帧上的属性就不用再设置了，保持原样。另外11个层上的符号设置与这个相同，所以就不在这里叙述了。 　　 好了，讲到这里一切OK了，回车试一下，看看效果，是不是非常满意呀，如果不满意可以自己调整一下。 　　 ⑥这个符号编辑完后，接着完成遮罩部分。首先，我们在工作区写上“电脑报俱乐部欢迎您的到来”字样，然后打散，把它创建成一个符号，这个符号如图5（^12040701e^）所示，在layer14。我们再建立一个层layer15，在这个上面建立一个椭圆形的白色色块的符号。在当前层的第100帧上插入关键帧，然后把这个关键帧上的符号移动到14层上的符号的“来”字的位置上，在两个关键帧之间建立运动层。接下来建立一个层16，把14层上的符号原位粘贴就可以了。下来用鼠标点击layer16层，按右键选择Mask（遮罩）即可。 　　 返回到主场景，用矩形绘图工具画一个680×60的方框，我们可以通过查看元素的属性（“Ctrl+Alt+I”）并且输入数值来达到精确定位，如图6（^12040701f^），W和H分别表示元素的宽和高，X和Y则表示它的具体坐标。画完以后，把以前做的那个动态字效果的符号放到主场景内，使它在方框内，当播放的时候看上去与矩形方框好像一个整体。 　　#2 2.交互式菜单 　　 这部分讲的是Flash网页的交互部分，非常重要。本例中交互式菜单的制作当然离不开按钮了，按钮是它的基本元素。并且还包含了几个类似的小型的形变效果。（形变效果，就是一些点到线的变化。形变所要注意的是起始帧和结束帧上的符号都是被打散的，否则就不能做成形变效果了，还要注意的是运动类型一定要选则为Shape（形变）。另外为了完美，需要把起始帧上和结束帧上元素的坐标定位，这样在运动时就不会产生细小的错位）。我们可以按照刚才讲过的，通过查看元素信息来精确定位。 　　 接下来我们看看一个简单的按钮是如何制作的： 　　 按钮符号的时间轴上的每一帧都有一个特定的功能： 　　 第一帧-Up-表示鼠标指针不在按钮上时的状态。 　　 第二帧-Over-代表鼠标指针出现在按钮上面时的状态。 　　 第三帧-Down-表示鼠标点击按钮时的状态。 　　 第四帧-Hit-定义对鼠标做出反应的区域，这个反应区域在影像中是看不见的。四个状态具体如图7（^12040701g^）所示。 　　 具体操作如下： 　　 1）在确认工作区上没有东西被选中后选择Insert（插入）→New Symbol（新的符号），或者按“Ctrl+F8”。在符号属性对话框中，为新按钮输入一个名字，Symbol Properties（符号属性）选项选择Button（按钮）作为符号类型。 　　 Flash这时转到符号编辑模式，时间轴的开头转变成显示四个连贯的分别标注为Up，Over，Down，和Hit的帧。第一帧Up，是一个空白关键帧。 　　 2）要创建Up状态的按钮图像，可以使用绘图工具，或输入一幅图形，或者放置一个其它符号的实体都可以。在这里我们用矩形绘图工具画一个矩形，选择填充色，然后我们输入相关的文字，并打散，如图8（^12040701h^）。 　　 3）点击第二帧，标注为Over，选择Insert（插入）→Keyframe（关键帧）。在第一帧up的基础上调整，调整完后作为第二帧。 　　 4）在Over状态下的按钮图像可以进行改变，可以把原先的图形或符号先删除掉，然后从符号库调用符号。在处理Down和Hit状态下的按钮图像时重复上述第三步和第四步。 　　 Hit帧在舞台上是看不到的，但是它却定义了对鼠标点击所能够做出反应的按钮区域。需要确认的是作为Hit帧的图形应是一个固定的区域，并且要大到足以包围Up、Down和Over帧所有的图形元素。它还可以比看到的按钮大。如果你不指定hit帧，出于Up状态下的对象就会被用作Hit帧，这样鼠标点击按钮时就不太灵敏了，尤其对纯文字的按钮。 　　 5）如果还想给Over状态下的按钮指定音效，首先，导入一个合适的音效文件，文件菜单中file（文件）→import（导入）选项，在本范例中导入的是一个名为“Click”的声音文件。接下来移动鼠标，点击Down状态下的关键帧，按右键，选择“Panels→Sound”面板，在sound标签中选择click文件即可，如图9（^12040701i^）。 　　 上面介绍的是一个简单的按钮的制作过程。我们还可以做一个复杂的按钮。主要是通过把一个按钮放在一个MC（Movie Clip影片夹的英文缩写）中，然后通过脚本的作用，来实现帧的跳转，以编辑在线这个按钮为例，如图10（^12040701j^），具体如下。 　　 我们先建立一个MC，然后把Editor这个按钮放到这个MC的第一帧上，设置脚本为Stop（），接下来我们在第二个帧处插入关键帧，在这一帧上的编辑在线按钮旁边加上一个带有多个按钮的符号，并在帧上设置脚本为Stop（）。我们再回过头来设置第一帧上那个编辑在线按钮，脚本如下： 　　 on （release） { 　　 gotoAndStop （2）; 　　 } 　　 按下此按钮后，将跳到第二帧，并且停止播放。我们给第二帧上的按钮加上返回脚本： 　　 on （release） { 　　 gotoAndPlay （1）; 　　 } 　　 好了，这个带有按钮的MC就做成了，剩下的就是把这个MC放到相应的时间轴的相应关键帧上就可以了。 　　 6）去年，无边框窗口特别火，我接下来可不是要讲如何用JS编写无边框窗口页面，而是要介绍如何用Flash制作出无边框窗口的效果。跟我一起来做吧！ 　　 我们所要做的这个Flash的无边框窗口是运用脚本语言控制Instance（实例）的属性来实现的，本范例中的无边框窗口是电脑报网站读者俱乐部社区的登录窗口，如图11（^12040701k^）。 　　 首先我们要建立一个MC，在工作区内画一个无边框窗口，用文字工具在窗口上设置两个变量框，一个变量名为“Userid”，一个变量名为“PASSWORD”，变量的设定是根据网站登录框中的变量来设置的，如果设置不一样，那么变量的值不能传送过去就得不到认证，当然用户也就无法登录到社区了。制作好符号后，我们把它当作一个实例，名字叫做“Window”。具体做法是，点选登录符号，按右键Panels（面板）→Instance（实例），如图12（^12040701l^）。 　　 然后我们在登录的窗口上再建立两个按钮，一个名为登录，一个是重置。具体做法跟前面一样，主要是按钮上的脚本。鼠标选中按钮，然后按右键选择Actions（脚本），就会弹出脚本编辑框了，如图13（^12040701m^）。 　　 登录按钮上的脚本为： 　　 on （release） { 　　 userid = userid; 　　 PASSWORD = PASSWORD; 　　 getURL （“http://61.128.193.127/ask/login.asp”，“_blank”，“POST”）; 　　 } 　　 最开头的脚本为先设置变量的具体值，然后通过网络地址来传递变量，进行认证，别忘记方式为post（发送），要选中。这个登录框适用范围非常广，例如：邮箱，社区等地方的登录项，只要把相应的变量和地址修改了就可以用了，是不是很灵活呀。 　　 注：由于软件与操作系统兼容的问题，可能用鼠标不好选择变量传递方式，可以用方向键的上下来选择。 　　 在窗口的顶端我们还要安放两个按钮，一个是负责任意拖放窗口的，一个是负责关闭窗口的，如图14（^12040701n^）。 　　 拖放按钮的脚本为： 　　 on （press） { 　　 startDrag （_root.window）; 　　 } 　　 on （release）{  　　 stopDrag  　　 } 　　 关闭窗口按钮的脚本为： 　　 on （release） { 　　 setProperty（） （_root.window， _visible， false）; 　　 } 　　 表面上是关闭，其实是把它的可见属性设置为否了（False）。 　　 另外，登录社区按钮上的脚本则把窗口的可见属性设置为真（True），在主场景的第一帧上的可见属性初始化脚本设置还是为否的，这样整个页面载入的时候，登录框是不可见的。 　　#2 3.版权标识和计时器部分 　　 页面最下面的版权标识，可不是用HTML直接写上去的。是通过Flash5中对文本框可以内嵌HTML1.0语言支持所实现的效果。具体操作是用Text Tool（文本工作）在工作去内建立一个文本框，这里的变量名字为CopyRight，并在选项中要选择HTML选项，如图15（^12040701o^）。 　　 在页面动画的第一帧要对CopyRight变量进行赋值为：copywright=“电脑报编辑部CopyRight2000-2001
联系我们”，这样显示的时候就跟普通的页面是一样的。 　　 计时器部分，如图16（^12040701p^），利用脚本语言来记录一个用户在本页面停留的时间，脚本为： 　　 onClipEvent （enterFrame） { 　　 y = getTimer（）; 　　 t = int（（y-_root.w）/1000）; 　　 time = t; 　　 } 　　 getTimer（）函数返回电影开始播放到当前的时间，以毫秒计。也就是说我们得到的数字必须除以1000才能得到我们平时通用的秒数。_root.w是时间的初始化值，它是放在主场景的首帧上的。int（）是取整数函数。变量框的变量名为time。OnEnterFrame：表示在播放到某一帧时激活事件，在这一帧里，OnEnterFrame会在其他任何事件之后才响应。 　　#2 4.载入页面的制作和脚本的编写 　　 Flash5提供了非常丰富的函数，我们可以利用新的函数来制作出精确的下载状态显示条。 　　 我们在layer1层上放入一个名为loadbar的MC，它是一个MC，能够形象地反映出当前影片的下载状况，如图17（^12040701q^）。 　　 我们建立一个layer2层，在它的上面放入了两个文本框，它们显示的分别是下载数据的百分比和速度，剩余时间和总共的时间。在第二个关键帧上加入以下脚本： 　　 byteloaded = _root.getBytesLoaded（）; 　　 bytetotal = _root.getBytesTotal（）; 　　 loaded = int（byteloaded /bytetotal*100）; 　　 t = getTimer（）; 　　 percent = loaded + “% （” + int（byteloaded/1000） + “ K / ” + int（bytetotal/1000） + “K）”; 　　 percent = percent + “\r下载速度：”+ int（（byteloaded*1000）/（t*1024） + “ K/s”; 　　 loadbar.gotoAndStop（loaded）; 　　 timeloaded = int（t/1000）; 　　 timeremain = int（timeloaded * （bytetotal- byteloaded）/ byteloaded）; 　　 timeremain = int（timeremain / 60） + “\＇” + int（timeremain % 60） + “\”“; 　　 timeloaded = int（timeloaded / 60） + ”\＇“ + int（timeloaded % 60） + ”\“”; 　　 downloadtime = “已用时间：” + timeloaded + “\r” + “剩余时间：” + timeremain; 　　 bytetotal表示总共需要下载的数据量，Loaded表示下载的数据量与总数据量的百分比。loadbar.gotoAndStop（loaded），表示随着数据下载比的增加，loadbar也停在相应的帧上，由于MC总共有100帧，所以在下载数据显示时非常形象。Timeloaded表示当前总共花的时间。Timeremain表示剩余的时间。Timeloaded表示已经用的时间。后面所跟的表达式都是一些简单的数学公式运算，仔细看一下就会明白了。 　　 我们在这一层的第14帧处加入如下脚本来进行动态的检测 　　 if （byteloaded == bytetotal） { 　　 gotoAndStop （“main”， 1）; 　　 } else { 　　 gotoAndPlay （“back”）; 　　 } 　　 当下载数据完毕时（byteloaded = = bytetotal），就跳到指定的场景播放动画。 　　 这个loading程序动画，可以独立出来，也就是说可以在别的Flash页面前加入该loading动画也可以达到精确显示下载的目的，不过最后一帧的场景名需要根据实际情况来改变名称。 　　 另外在把Flash嵌入到页面上的时候可以在页面中加入如下代码： 　　 这样就可以把右键菜单禁止掉。