我经常做网页，对于如何安排网页元素，如何根据网站的客户需求，选用最合适的配色方案，做出最好的网页设计方案。可是越来越多的网页设计中存在flash做的菜单、导航栏、Banner、广告、调查统计动态显示等等，达到了很好的动感效果，这是普通的动态网页无法满足的视觉冲击力。
我通过不断学习Flash的教程，看了许多的Flash源码，尤其国外的网站资源。通过不断练习，对于应用flash特性实现网页内嵌动画有了一些体会，希望能和大家一起分享技术经验。
这是我今天要讲述的Flash案例，刚刚学会就做了一个，还不错吧！如何更好应用MovieClip的创建Motion Tween动画、Shape的Shape Tween变化、遮罩效果的应用，下面先来看一下此Flash中各个场景的时间轴图例。
主场景时间轴：
子场景1（背景动画）时间轴：
子场景2（字动画）时间轴：
子场景3（右下Server动画）时间轴：
我在具体解释动画制作前，我首先要明确的说明Flash中MovieClip的几个重要概念，首先就是MovieClip，它的学名叫做影片剪辑，它在大型复杂的Flash站中有着大量的应用，可以说它是组织一个很好的Flash站的重要组成部分。它拥有自己的时间轴，是与主场景的时间轴同步的；它也有自己的层次结构（譬如：子场景1中的Layer1,Layer2,actions层），也正是MovieClip的这些特性，使得Flash动画绚丽多姿，一个动画中穿插着很多子动画。所以学好三大元件中的MovieClip是关键。
此例程中的背景动画、文字动画、服务器淡出的动画都分别是3个独立的MovieClip，也就上面图中所指的子场景1，2，3。我将从主场景到子场景逐个刨析每一个的层次结构。
主场景：
| 层名称 |
层作用 |
| Layer1 |
动画中的上下两条黑幕，它有两个作用，其一：使浏览者的视线集中在Flash中的主动画区域。其二：它处于最上层，它对于实现背景的动画效果有着很大作用，我将在子场景中详细讲解。 |
| Layer3 |
它是主场景中的背景，是一副对比度和明度较低的图片。如下图所示。 |
| Layer2 |
背景动画层，10-70帧是这一层的活动时间，因为这一层中含有‘子场景1'这个MovieClip，它就长达60帧的动画时间，所以在主场景中也赋予它60帧的活动空间。 |
| Layer4 |
"Frontfree Technology"以及底下两行小字的动画层，这一层也含有一个MovieClip，它共占有34帧,在主场景中的也给它34帧的活动空间，在这里声明一下，并不是主场必须和这一层中的MovieClip播放帧数必须一样。主要是考虑到动画的元素有很多交错的地方，会让浏览者视觉失去焦点，达不到预期的效果，而应该让浏览者的视觉焦点一个个的转移。 |
| Layer5 |
大家应该轻松的了解到那是右下角的Serve图片的动画效果层。 |
子场景1：
选中主场景中的Layer2的第10帧的关键帧，双击编辑区中蓝线以内的区域，就可以MovieClip内部，进一步分析。如图
进入后，就可以看到我在文章开始提到的子场景1的时间轴图例。
| 层名称 |
层作用 |
| Layer1 |
导入了一个大幅的背景图片，把它定义为一个MovieClip，以便调整透明度，以及方便创作Motion Tween的动画。在此层应用这个MovieClip透明度从0%到100%，从大到小的产生动画效果。 |
| Layer2和Layer3 |
是一个比Layer1中的图片小很多的相同的图片，分别定义为一个MovieClip，它们是从透明度100%到0%、面积从小到大的变化，并且和Layer1中的动画交错了几帧，让人产生错觉。如果想单独观察这两层和Layer1的动画效果，只需把其他层设置为不可见就可以了。 |
| Layer6 |
我先来说一下Layer6的作用，它的目的就为了起到屏幕一闪的效果以增强视觉冲击力，通过放置一个白色的但透明度很低的矩形Shape，起到这样的效果。 |
| Layer4和Layer5 |
这两层利用遮罩制作出滤镜扫描的效果，其实做起来很简单，Layer5遮罩层是一个白色（设置什么颜色无所谓）的矩形调整大小，应用Shape Tween的变化。Layer4被遮罩层中的图片是一幅比Layer1中变化的图片变化完毕后还稍微大些的图片。这样，遮罩层面积不断变化，Layer4和Layer1这上下两层中的图片大小不一致，所以给人以滤镜扫描的效果。大家可以通过只观察这三层来理解。 |
| actions |
单独设置一层作为动作脚本层，在最后一帧加上一句脚本:"stop();"。 |
子场景2：
选中主场景中的Layer4的第71帧的关键帧，双击编辑区中蓝线以内的区域，就可以MovieClip内部，进一步分析。如图
进入后，就可以看到我在文章开始提到的子场景2的时间轴图例，此层的动画比较简单，所以我只讲述关键点。
| 层名称 |
层作用 |
| Layer1 |
"Frontfree Technology"字样，由透明到不透明，大小稍有变化。 |
| Layer3和Layer2 |
遮罩关系，实现对Layer1中的"Frontfree Technology"字样的底衬,提示：Layer2中的字号比Layer1的字号要大一个单位。 |
| Layer4和Layer5 |
实现两行小字先后淡出的效果。 |
子场景3:
选中主场景中的Layer5的第104帧的关键帧，双击编辑区中蓝线以内的区域，就可以MovieClip内部，进一步分析。如图
进入后，就可以看到我在文章开始提到的子场景3的时间轴图例。
| 层名称 |
层作用 |
| actions |
脚本层 |
| Layer2 |
白色半透明的蒙板。 |
| Layer3 |
在Layer2中的蒙板渐渐的褪去的同时，起到2次突亮的作用。 |
| Layer4和Layer5 |
第一次应用遮罩，从右到左渐渐显示出一个半透明的、不太清楚的图片。 |
| Layer6和Layer7 |
第二次应用遮罩，从左到右渐渐显示出一个清晰的图片，这主要和Layer4/Layer5组合使用，这样的效果很好。 |
| Layer9 |
不断闪动的线条，好像电光。 |
相信只要大家能从头到尾坐下来，应该对Flash中的MovieClip和遮罩的应用有很深的印象，相信大家都很聪明，只要能勤于思考，可以做出很"眩"的效果。在以后的文章，我还结合Flash的ActionScript来介绍如何实现Flash的互动。
源文件下载
|
