学院首页>图形图像>FLASH>Flash3交互动画教学之入门篇

Flash3交互动画教学之入门篇

作者:星哥 来源:未知 添加时间:2006-5-21 11:56:44
  我用个实例向您介绍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 3是一个完全面向对象的工具。在Flash动画中,所有内容(可动的,不可动的,
有交互特性的,无交互特性的)均称为对象。在制作Flash动画前,您必须对您要做什么有一
个大概的计划,甚至可以画成小场景,然后再开始工作。我们的这个例子将建立一个按钮
(button),点击按钮后播放一段动画。背景是一幅位图,在位图上有三个球体,绿球绕蓝球
转,蓝球绕红球转,红球从屏幕右移动到屏幕左。在整个Flash动画下载的时候显示“Loading……”,
当下载完毕后显示按钮。
  所以现在我们要建立的对象有三个球、一幅位图、一个按钮和一个“Loading…”图像。
首先建立位图:在Flash里建立新文件,大小为400×250像素,将背景色设为黑色,然后引入
(File/Import)您选择好的位图,在这里我们使用一枝蒲公英作为背景图案。位图调入后
按F8将位图定义为图形Symbol对象并将其命名为BackGround。
  接下来建立三个球。为了方便,这里我们使用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)进入对象编辑窗口。点输入字符的图标。在屏幕中央输入“Loading……”,然后按
Ctrl+B,填充您喜欢的颜色(我用蓝色),填好后按Ctrl+G。如果您对Flash2有所了解的话应
该知道刚才的操作的目的是将字符对象转换成图形对象。为什么要这样做呢?原因是您使用
的某种字体有可能在别人的机器上并不存在,这时浏览器调用系统默认字体,就达不到预期效
果。还有,对于中文文字,如果字体有缩放或旋转的动作,有可能会出现乱字符。所以我们
通常将字符对象转换成Symbol对象再进行操作。虽然这会使文件大点,但大得并不多。关于字
符的问题还影响到Flash3的一个动态发布工具Flash3 generator,以后有机会再向大家介绍
(这属于高级开发)。
  最后我们做个按钮(button),点击Insert/Create Symbol(或者按F8),然后选中“Button”,
进入button编辑窗口。在该窗口里面,时间条变成了状态条,有“Up”、“Over”、“Down”
和“Hit”四个状态。“Up”是按钮普通的状态;“Over”是鼠标移到按钮上时按钮的状态 ;
“Down”是鼠标按下按钮时按钮的状态 ;“Hit”是按钮能让鼠标产生“Over”和“Down”事
件的区域。选中这四格按鼠标右键选择Insert Frame(或按F5),然后点选“Up”事件格,画您
的按钮,画好后继续完成后面的三个。须要注意的是,如果没有特殊的目的,通常我们把按钮
的所有区域定义为“Hit”区域,而且该区域最好是比较规则的图形。不然用户按按钮的时候
鼠标不容易准确地移到按钮上。
  好了,动画的所有对象我们现在做好了。按Ctrl+E返回动
画编辑场景(Scene)。

二、安排对象出场顺序
  对象出场当然是先显示“Loading……”画面,当文件完全下载后就显示按钮,点击按钮显
示背景并播放动画。
  本例中将建立四层:“ifloaded”、“button”、“planet”和“bg”,分别用来存放
“Loading……”图片、按钮对象、球体对象和背景。
  在第一层中建立五个帧,按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帧建立关键帧,并将“background”对象拉进来。
  现在您的动画已经基本上完成了,但是您会觉得奇怪,刚才我的那些步骤有什么用啊,而且
怎么知道什么时候动画才全部下载完成呢?下面就是最关键的部分 :加入事件。

三、加入事件
  一般的动画纯粹就是按时间线索播放的序列,而交互式动画则必须有可控制的地方,不然
叫什么交互啊!我们这个例子的交互部分就在于 :
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
最吸引人的地方还是您自己的创意和表达方式的完美结合,呵呵,多看看Channel V,ELLE什么的
就知道什么设计是最新潮的,总之,掌握Flash并不是太困难的,关键看您自己了。
Flash更高深的东西还很多,不相信?您去http://chat.lodesoft.com下载LSCHAT! 2.0好了,看看有
什么感触。
站内搜索