网页设计师

FLASH3交互动画教学之一入门篇

作者：星哥

　　Macromedia Shockwave Flash3是继FutureSplash，Flash1，Flash2之后的最新flash版本，相信您对flash已经有了基本的了解。什么？还不了解么？好吧，现在就去http://www.nease.net/~xinge/flash看看好了。
　　Flash3在测试阶段就在shockrave面向公众收集意见了，呵呵，我也提出了意见(要求支持对按钮对象的mouse_on提供更多功能)，现在满足了。所以用Flash3提供的交互特性，您一定可以创作出最cool的网络多媒体，当然还可以用在您的application中。本文将简单用个实例想您介绍Flash3的一些基本交互特性和制作方法，这是入门篇，您不用担心自己的水平不够，边读边做，说不定您就上瘾了。
　　本实例在网络上的位置是http://202.102.24.73/flash/lesson1.htm，
　　　　　　　　源文件位置http://202.102.24.73/flash/lesson1.zip，Flash3
　　　　　　plugin的位置在http://202.102.24.73/flash/Shockwave_Flash_Installer.exe

建立基本对象

　　对于一个Flash动画来说，所有内容(可动的，不可动的，有交互特性的，非交互的)均称为对象，这是一个完全面向对象的工具，所以在建立动画前，您必须(至少)对您要做什么大概有的计划，甚至可以画成小场景，然后再开始工作。那么我们的这个例子将建立一个按钮(button)，按下按钮后播放一段动画。背景
是一幅位图，在位图上有三个球体，绿球绕蓝球转，蓝球绕红球转，红球从屏幕右移动到屏幕左。在整个Flash动画下载的时候显示Loading...，当下载完毕显示按钮。

　　所以现在我们要建立的对象有三个球，一幅位图，一个按钮，一个“Loading...”图象。

　　首先建立位图，您可以找一幅300K左右的jpg图象。在Flash里建立新文件，大小为400*250像素，背景色为黑色(现在比较流行)。然后引入(import)您选则好的位图。位图调入到Flash动画中，按Ctrl+G将位图定义为Symbol对象。

　　接下来建立三个球。为了方便，这里我们使用Flash3自己带的例子文件中提供的球对象。您只需要按File|Open as　library选则Flash3的Samples目录下的Symbols-Nested.fla文件，将里面的Clip:Inner orbit 和Clip:Outer orbit对象Drag and　Drop到自己的Flash中。OK，关闭Library窗口。因为刚才的两个Clip对象已经包含了我们需要用的三个球，所以就不需要单独调入球对象了。

　　现在来做“Loading...”图象，这也是个Symbol对象。选则Insert|Create　Symbol(或者按F8)进入对象编辑窗口。点输入字符的图标，字体随便(但必须支持outline的字体)。在屏幕中央输入“Loading...”，然后按Ctrl+B，填充您喜欢的颜色，我用蓝色，填好后按Ctrl+G。刚才的操作如果您对Flash2有了解的话应该理解，目的是将字符对象完全转换成图形(symbol)对象，为什么要这样做，原因是您有可能使用的某种字体在别人的机器上并不存在，而使用字符对象将使浏览者的浏览器调用系统安装的字体，如果没有就会用省缺字体，对于英文字符(1byte)还好，而对于中文(2byte)，如果字体有缩放或旋转的动作时，将可能显示乱字符。所以我们通常将字符对象转换成Symbol对象再进行操作。虽然这会使文件大点，但大的实在行少。关于字符的问题还影响到Flash3的一个动态发布工具Flash3 generator，有机会再和大家介绍(这属于高级开发)。

　　最后我们做个button，随便建立个button，Insert|Create Symbols。然后选Button，进入button编辑窗口。在该窗口里面，时间条变成了状态条，有Up，Over，Down，Hit四个状态。Up是按钮普通的状态，Over是鼠标移到按钮上的按钮的状态，Down是鼠标按下按钮时按钮的状态，Hit是按钮能让鼠标能产生Over和Down事件的区域。选中这四格按鼠标右健选则InsertFrame(或按F5)，然后点Up事件格，画您的按钮，画好后继续完成后面的三个，注意的是，Hit区域如果不是处于特殊目的，通常我们会把按钮的所有区域定义为Hit区域，而且该区域最好是比较规则的图形。不然用户按按钮的时候鼠标不容易准确的移动到按钮上。
　　好了,动画的所有对象我们现在做好了。按Ctrl+E返回动画场景(Scene)。

安排对象出场顺序

　　对象出场当然是先显示“Loading...”，当文件全部读入内存后就显示按钮。按按钮就显示背景并播放动画。
　　建立一层叫ifLoaded然后建立五帧，按Ctrl+L打开library，将刚才做好的“Loading...”图形拉到里面来，然后在第五帧建立空关键帧(Insert　Blank KeyFrame F7)。
　　建立一层叫button，建立120帧，并在第19帧建立关键帧，将button对象拉过来。
　　建立一层叫planet，建立120帧，并在第20帧建立关键帧，并将Clip:Inner　orbit对象拉过来，缩小到合适的大小并将红球拉到屏幕的又边，到第120帧建立关键帧，把红球拉到屏幕左边。回到第20帧，双击第20帧，选则Tweening，并选取Motion。
　　建立一层叫bg，很显然是放背景的。同样是120帧，在第20帧建立关键帧，并将您的位图对象拉进来。
　　现在您的动画已经基本上完成了，但是您会觉得奇怪，刚才我的那些步骤有什么用啊，而且怎么知道什么时候动画才全部调如内存呢？下面就是最关键的部分，加入事件(方法)。

安排对象和帧的事件和方法

　　我们一般的动画纯粹就是按时间线索播放的序列而已。而交互动画则必然能有可控制的地方，不然叫什么交互啊。我们这个例子的交互部分就在于1、在动画没有完全读入内存的时候显示“Loading...”，2、按下按钮才开始播放。
　　我们先完成第一部分。在ifLoaded层上，双点第一帧，输入Action:
　　If Frame Is Loaded
　　　Go to and Stop
　　End Frame Loaded
　　并且定义Go to and Stop的帧是第19帧。
　　双点同层的第五帧，输入Action:
　　Go to and Play
　　定义Go to and Play的帧是第1帧。
　　您现在可以理解了，当第20帧(也就是有背景和球对象的帧被调入内存前显示“Loading...”，当读好后就跳到第19帧显示按钮。
　　现在我们让按钮产生动作。点button层，并点第19帧，在作图区域双点按钮，并输入Action:
　　On(Release)
　　　　Go to and Play
　　End On
　　并定义Go to and Play的帧是第20帧。
　　最后点planet层，双点第120帧，输入Action:
　　Stop
　　这个Stop就是防止循环播放的，虽然在外部描述语句里可以控制是否循环，但您应该养成尽量在动画里控制的好习惯。
　　OK!您终于完成了这个交互动画，还想有什么花哨的地方尽管发挥您的想象力好了。笔者使用Flash是从Super　Splash开始到现在，感觉是Flash最吸引人的地方还是您自己的创意和表达方式　的完美结合，呵呵，多看看ChannelV，ELLE什么的就知道什么设计是最fashion的，总之，掌握Flash并不是最困难的，关键看您自己了。

　　入门篇到此结束，Flash更高深的东西还很多，什么？不相信？好吧，您去
http://chat.lodesoft.com下载LSCHAT!2.0好了，看看有什么感触。

下一篇

　

GO TOP　　返回心得技巧　
这里摘录的文章版权归原作者所有
《网页设计师》阿捷制作©1999-2000