庖丁解牛 酷炫FlashWeb移动背景篇

数码时尚

  FlashWeb的背景切换功能可以说是它的一大魅力所在。因为有时候,我们并不会只使用一种背景,很有可能是许多种背景,通过使用交互功能使它们完成自动切换。在很多时候,闪客们喜欢用动画来制作这样的动态效果,而本例中,我们将使用一种交互控制的悬浮图像,来增加FlashWeb的美感,当然,这些悬浮图片都将使用一些3D形式表现的物体,以保证视觉冲击力。

  1.新建一个图层,名称为photomotion,使用“File→Import”命令导入四张制作好的图片,选中这些图片按F8键,转换成影片剪辑,名称为photomotion。

  解说:这些图片的格式都使用了png格式,因为Flash只对png格式的位图保持透明度的支持。

  2.在photomotion影片剪辑的Action面板,输入代码如下:

  onClipEvent(load){

  spd=0

  }

  onClipEvent (enterFrame){

  _x+=(spd-_x)/.6

  }

  解说:

  第一行:当影片剪辑载入时。

  第二行:spd变量的内容等于0。

  第四行:当影片剪辑开始播放时,播放一帧发生一次。

  第五行:影片剪辑的X坐标等于X坐标加上spd变量与X坐标的差除以0.6的值。除数之所以使用小于0的值,是因为,小于0的值可以实现抖动的移动效果,如果你想要缓冲移动效果,可以使用大于0的值。

  3.双击进入photomotion影片剪辑,调整魔方图片的坐标等于X:0,Y:0;音响图片的坐标等于X:-640,Y:0;汽车图片的坐标等于X:-1280,Y:0,窗口图标的坐标为X:640,Y:0(图1)。

  4.将这四个图形分别放置在四个图层中,按F8键,形成各自的影片剪辑,名称分别为car、sound、sigil、windows。

  5.新建一个影片剪辑,名称为photobtnmc,然后绘制四个按钮,如图2所示。

  6.在第一个按钮中输入代码:

  on(press){

  _parent._parent._parent.spd=1280

  }

  7.第二个按钮的代码如下:

  on(press){

  _parent._parent._parent.spd=640

  }

  8.第三个按钮的代码如下:

  on(press){

  _parent._parent._parent.spd=0

  }

  9.第四个按钮的代码如下:

  on(press){

  _parent._parent._parent.spd=-640

  }

  解说:使用这种方法,我们可以在改变变量值的同时,达到让浮动物快速移动的目的。

  10.将这个影片剪辑分别放置在car,sound,sigil和windows四个影片剪辑中,绘制如图3的图形,使按钮看起来不至于太唐突,然后按Ctrl+Enter键测试效果(图3、4、5、6)。

  在下一期中,我们将讲解链接与音乐控制的制作方法。众所周知,多媒体网站与平面网站最大的不同就在于关于音乐的控制。虽然传统平面网站已经开始在音频效果方面加快步伐,但仍然无法与真正的多媒体交互网站相比,因此学习好控制这些背景音乐,也成了初级闪客的当务之急。另外,我们还将学习到制作波表效果的方法,希望可以为你的网站添姿加彩。

  以上源程序及图片部分可以在http://wsmmt.52flash.net/flashweb.rar处下载。

  《电脑迷》第9期光盘已经收录了本教程的源程序、图片以及音效素材。