实战Flash 5 进度条 |
|||
|
红旗lash5.0中的Action Script采用了流行的Visual J++平台，而在4.0中所用的是Visual Basic，这为设计者们用Flash制作出更复杂的互动电影铺平了道路。 在本文中，我们要讲的是用Flash5制作进度条的实例。由于带宽的限制对于Internet上超过200K的Flash电影，都会由于体积过大而让大多数窄带上网浏览者失去耐心，虽然Flash具有边下载边观看的功能，但始终达不到在本地浏览的效果（本机上的12Fps的播放速度当然要比网上浏览时的1'2Fps甚至几秒钟一帧赏心悦目多了）。所以对于较大的电影来说在前面插入一个进度条是很有必要的，它可以让浏览者知道当前文件的下载进度。 下面我们详细介绍进度条的制作方法。本实例可在www.skmode.net/jeroo/load.swf观看。 一．导入动画 为了更好的展示进度条的作用，最好选择一个比较大的动画，但动画只是作为本文的辅助部分，为说明进度条的作用而存在，所以不必花太多时间在这上面。 为了保持主场景的简洁，我们可以把动画导入到Movie Clip。打开Flash5，选择菜单命令Insert > New Symbol…（符号），在随后出现的Symbol Properties对话框中（如图所示），把插入的动画命名为Mainmovie，然后在Behavior（此选项确定符号的类型）中选择Movie Clip（电影剪辑），单击OK按钮确定。  图1 选中Layer1层，在第一帧中插入一个空白关键帧（方法是选中第一帧，并右击鼠标，在右键菜单中选Insert Blank Keyframe）。然后选择菜单命令File > Import…，导入一个动画。 Flash5可以导入的文件格式包括FHx或FTx（x为7、8、9等数字，表示版本号，它们都是Macromedia的Freehand格式的矢量文件），eps或ai（Adobe的Illustrator文件），dxf（AutoCAD的DXF文件），bmp，jpg，gif，png，swf等格式的图片或动画，在本例中导入的是GIF动画。 完成动画的剪辑后，回到主场景中，把放置动画的层命名为“movie”，在菜单中选择Modify > Movie…，如图2所示，把电影的尺寸调整到适合所输入的文件的大小，把背景色（Background）设为黑色（#000000），按OK按钮确定。再选择菜单Window > Panels > Scene，在场景面板中双击场景名把主场景命名为“FilmLoading”  选中主场景中的Layer 1层（这是每个新建文件中都有的）并改名为movie，在第十二帧处插入一个空白关键帧并选中它。然后选择菜单命令Window > Library打开符号库，选择我们刚才完成的名为“Mainmovie”的电影剪辑，把它直接拖到舞台中。这时剪辑的位置可能和场景所在的位置不符，我们可以调整Info面板（按菜单Window > Panels > Info打开）中的X和Y值，把它们分别设为0就可以了。 我们要为这个实例做的效果是在电影下载的过程中显示一个蓝色的进度条，其下方有一行不断闪动的文字“Loading…”，在文字的旁边是一个百分数表示文件下载的比例。下面我们来一一制作。 二．制作进度条的Movie Clip（电影剪辑） 插入两个新层，分别命名为loader和text。在这两个层中我们将分别放入一个用以控制进度条的Movie Clip（电影剪辑）。现在我们来制作这两个电影剪辑。 1. 制作进度条的电影剪辑 选择菜单命令Insert > New Symbol…（快捷键为Ctrl + F8），在Symbol Properties（符号特性）对话框中，把符号命名为loader，在Behavior（符号类型）中选择Movie Clip。然后单击OK按钮确定。  把当前层命名为white，选取工具栏(1)中的Rectangle工具  ，在舞台(2)中画一个矩形（宽大约是高的10倍，不必十分精确）。选取Arrow工具  ，选中刚才所画的矩形，在Info面板(3)中设置矩形的宽（W）和高（H）分别为250.0和9.0，中心点位置（x，y）为（0，0）。如图所示。 新增一个层并命名为blue bar，把white层隐藏起来（选中white层并按下Show/Hide Layers按钮  ）。同样画一个矩形，用Paint Bucket Tool（即油漆桶）工具填充为蓝色（#0000FF）。在Info面板中设置宽和高分别为W=2.5（总长的1%），H=9.0；坐标值为x=-125.0，y=0.0。要注意的是，这里所画的两个矩形都不能有边框(4) ，你在选取矩形工具的时候，工具栏中Colors区的No Color按钮会被激活，按下Stroke Color（笔画颜色），然后按下No Color按钮  ，这样所画出的矩形就没有边框了。选中blue bar层的第一帧并单击右键，选择Create Motion Tween为第一帧加入动作。接下来，在该层的第100帧处插入一个关键帧，选中刚才所画的蓝色矩形，把它的相关参数改为W=250.0，H=9.0，x=0.0，y=0.0。 这样这个Movie Clip就完成了，你可以选择菜单命令Control > Play(5)（或者直接按回车键）来播放这个剪辑。 备注： ⑴ 如果窗口中找不到工具栏，你可以通过Window > Tools调用它； ⑵ 舞台就是我们的工作区域，即显示影片内容的地方； ⑶ 同样，如果没有看到Info面板，你可以通过Window > Panels > Info打开，或通过Window > Panel Sets > Default Layout打开所有和影片制作有关的浮动面板（系统缺省布局）； ⑷ 由于这里所画的矩形都需要调整大小，去除边框不仅可以节省工作时间，还可以避免不必要的失误（因为改变矩形大小时它的边框并不随之变化）； ⑸ 你也可以选择菜单命令Window > Toolbars > Controller把播放控制工具栏拖到桌面上。 2. 光有进度条是不够的，我们再来加一点东西。 选择菜单命令Insert > New Symbol…，把Symbol命名为text，类型为Movie Clip。然后在工具栏中选择Text按钮，在Character面板（可以通过菜单Window > Panels > Character或快捷键Ctrl + T打开）中设置字体特性如下：Font（字体）=Tahoma，Size（字号）=18，粗体，颜色为白色，见下图。在舞台中任意位置输入“Loading…”，用Arrow工具  选中这段文字，在工具栏中选择Scale（尺寸）按钮  ，按你的需要调整这个文字框的大小，并将文本框的位置设置为（x=0，y=0），就象前面设置矩形那样。  现在我们来为这段文字加上一些效果。 首先，保持这段文字被选中；选择菜单Modify > Break Apart（快捷键为Ctrl + B），把文字转化图片，这样就可以选中字段的任何一部分来加以编辑了。 然后，选取第二帧（就是用鼠标左键单击它），选择菜单中的Insert > Keyframe（快捷键为F6）来插入一个关键帧，然后选取第三帧，再插入一个关键帧……依次类推，在第一帧后面一共插入10个关键帧。这时我们可以看到在每一帧中都有和第一帧一样的文字段。 选中第一帧，用Arrow工具选中第一个字母“L”，如果有困难，你可以在窗口左下角的Magnification（缩放比例）下拉框中选择400%或者更大的比例。选中后按下工具栏中的Fill Color（颜色填充）按钮  ，并选择蓝色（#0000 FF）。然后到第二帧，选中第二个字母“o”，设置为蓝色。然后同样依次类推，在第x帧选中第x个字母并设为蓝色，注意把最后的省略号中的每个点也分别作为一个字符处理。完成后你可以用Controller工具栏来播放这个电影剪辑。这是一个蓝色色块在文字段中循环移动的效果。三．制作电影 以上我们完成了两个Movie Clip的制作，还记得我们在制作前定义了两个新层吗？先按时间线面板右上角的Edit Scene（编辑场景）按钮  ，选择FilmLoading（就是我们最初定义的场景，也是本例中唯一的场景）回到主场景中。然后再按Ctrl+L键打开符号库（Library），选中loader层的第一帧，把刚才做好的loader拖到舞台中。同样选中text层的第一帧，把text拖到舞台中。下面我们为做好的Movie Clip（电影剪辑）编辑动作。这里我们将要使用Flash5强大的动作脚本编辑工具——Action Script，Flash5.0中的Action Script比起4.0中有较大的不同，在本文中由于篇幅的限制我们就不专门讲解Action Script的使用方法了。我们会就实例的制作进程中用到Action语句作一一介绍。 1. 编辑动作函数 在以上的步骤中我们已经完成了三样东西：导入的动画、进度条和带闪动效果的“Loading…”字段。它们之间是有内在联系的，现在要把它们结合成一部完整的Flash电影。下载阶段的画面布局如图所示。  我们知道，进度条是用来反映整个电影下载的进度的，当电影完全被下载到本地时就开始播放。但在Flash5中是如何控制进度条的前进和字段的变化呢？这里就要用到Action Script了。选中movie层的第一帧并插入一个空白关键帧（1）（你可以选择菜单Insert > Blank Keyframe或者快捷键F7）。双击这一帧，打开Frame Actions（帧动作）面板，如图所示，所有的程序都是在这里编辑的。  2．变量定义 我们使用getBytesLoaded和getBytesTotal这两条命令来计算电影下载的比例。前者的作用是取得当前电影下载的字节数；不用说，后者是取得整个电影的字节数。按下Frame Action面板右上角的三角形按钮  ，选择“Expert Mode（专家模式）”，在编辑区输入下列语句。确认无误后关闭Frame Action面板，这时插入动作的关键帧上会出现一个小写的“a”字母。上面的语句中，“loaded”、“total”、“a”和“bytesloaded”都是本例中定义的变量。“loaded”表示已下载的字节数，“total”表示电影的总字节数，“a”是两者的比值乘以100，也就是下载的百分数。注意这里a是一个整数，范围在0到100之间，命令int的作用就是取整。第四句的作用是控制放映剪辑loader中的第a帧，然后使放映头跳出该剪辑。
接下来定义的变量“bytesloaded”就是用来在画面中显示百分比的，不过光有这一句是不够的。你需要在画面中定义一个文本框来显示这个百分比。具体做法如下： 选中Text（文字）按钮  ，在Character面板中设置字体为Tahoma，字号为14。然后在舞台中拖动鼠标建立一个文本框并适当调整位置和大小，不要写任何字，在Text Option面板（Window > Panels > Text Option）中作如下图所示的设置。这个步骤的意义在于把新建的文本框和刚才定义的变量“bytesloaded”联系起来，使之根据变量的变化而显示不同的值。 3. 建立循环 我们已经定义了变量，然后我们要使它们真正的动起来。在movie层的第十帧处插入另一个空白关键帧，选中它并双击，在Frame Action中输入下列语句：
在通常情况下，Flash总是从主场景第一层的第一帧开始播放的，沿着时间线一直往下播，一直到没有内容为止。如果遇到带有Action的帧，则执行其中的命令，按照命令去播放相应的帧或是停止播放。这为制作互动电影创造了条件，你可以通过编辑Action语句控制播放头按照你的意思移动。 上面是一个if循环，还记得在第一帧中有一句loader.gotoAndStop(a)吗？它表示播放第a帧后（只播放这一帧），播放头跳回到主场景中继续前进。当遇到第二个带有“a”标记的关键帧（就是第十帧）后，播放头停下并执行其中的语句。也就是说，比较a和100的大小。如果a < 100，则表示尚未下载完毕，则执行gotoAndPlay ("Loop"（1）)这一句，播放头再转到剪辑loader中。由于loader处于第一帧，所以又要去执行第一帧中的Action。再次取得一个a的值，播放剪辑的第a帧（这个a应该比前一个大一点，表现在画面上就是进度条向前进了一格；如果a没有变化，则进度条也不动）。直到下载完毕（这时a等于100）时，才执行Mainmovie.gotoAndPlay (1)（2）语句，播放主动画。由于播放头是线性运动的，而Mainmovie作为一个剪辑在主场景的movie层中只占了一帧，播放头经过时只能播放剪辑的第一帧，然后就跳到了movie层的下一帧。因为下一帧是空帧，表示电影已经结束，这是播放头自动回到了第一帧，这样就会形成死循环。 怎么办呢？其实很简单，只需双击插入剪辑的那一帧，加入一句stop()语句就可以了。有了stop语句，播放头就能停在这一帧上了，直到这一帧里的内容（就是主动画）全部放完。 这样，我们的实例就基本完成了，最终各层的布局如下图所示。  备注： ⑴ gotoAndPlay语句括号中的参数Loop是指贴在movie层第一帧上的标签。选中该帧后，在Frame面板（可以通过Window > Panels > Frame或者快捷键Ctrl + F打开）中的Label框内输入该帧的标签名“Loop”即可。凡贴有标签的帧在时间线中对应的位置上都会出现一面小红旗。 ⑵ gotoAndPlay所跟的参数可以是帧序号或帧标签。Mainmovie. gotoAndPlay (1)表示从Mainmovie剪辑中的第一帧起开始播放。 4. 输出电影 当以上的步骤都完成以后，我们就可以保存并输出电影了。由于缺省情况下，文件将保存为Flash Movie（fla格式）文件，它不能在网页中自动播放。所以你需要把它输出为swf格式，这样就能在安装了Flash Player插件的网页浏览器中播放了。你可以从以下路径获得本实例的原代码：www.skmode.net/jeroo/load_again.fla。 如果你对本实例有任何疑问，欢迎你给我来信：jeroo@skmode.net。
|
