三维视觉布局Flash实例教程

案例描述：

本例主要讲解三维视觉布局Flash实例教程，本倒利用简单的素材动画采布局三堆动画效果，并使用帧播放来制作最简单的Flash交互方式。

学习要点：flash全站的布局方法，flash全站的开发流程和制作思路，使用外部软件来辅助开发全站

本例思路：

导入素材图片，然后布局好各动画模块，再制作出场动画。
使用“文本工具”创建出立体字，然后制作出文字的出场和消失动画。
使用绘图功能制作出显示面板，然后制作显示面板的出现与消失动画。

动画制作完成后的最终效果：

步骤一、制作出场动画

1、新建一个800×600像素，背景色为白色，帧频为30fpS的空白文档。按Ctrl+F8组合键新建一个图形元件(名称为tree)，用于装载导人的动画图片，然后按Ctrl+R组合键导以准备好的素材／三维视觉布局图片，imagel．JPg”文件，此时系统会弹出一个提示对话框，单击“是”按钮就可以导人所有的图片，如图所示。

2、导入所有的图片后，图片会被放置在各个帧上形成帧帧动画，如图所示。

3、预览帧帧动画效果，如图所示，这段动画将作为全站的出场动画

4、返回到“场景1”，然后将最后1帧复制出来，并将其转换为影片剪辑(名称为main)，再设置循环选项为“播放一次”图所示。

5、进入main影片剪辑的编辑区域，然后将图片再转换影片剪辑(名称为tree)，并复制出两份图形，再将其缩小并放置在如图所示的位置。

6、cIrl+R组合键导入以准备好的素材/三维视觉布局图片／bg．jpg”文件，如图所示。

7、为这几个元件制作出场动画，如刚所示。

步骤二、制作文字动画

1、使用“文本工具”制作几个立体字放置在舞台中，如图所示。

2、将每个文字复制一份，然后将其顺时针旋转90。，再设置Alpha为15％，如图所示。

3、将文字分散到各图层，再制作出文字的的场动画，如图所示，然后在第60帧制作文字的消失动画，如图所示

4、返问到main影片剪辑中，然后设置文字图形元件的循环选项为“播放一次”，如图所示。

5、影片剪辑tree的动画播放完后，文字出场动画才开始播放，所以将文字动画的帧放置在影片剪辑tree动画的后面，如图所示。

6、在第80帧按F7键插入空白关键帧，然后在该帧中制作一个透明按钮并将其放在3组文字上如图所示

7、在属性面板中分别设置三组文字的实例名称为b1，b2，b3，然后为三个按钮添加单击事件，并添加一个stop()：语句，如图

	stop();

	b1.addEventListener(MouseEvent.CLICK,clickFun);

	b2.addEventListener(MouseEvent.CLICK,clickFun);

	b3.addEventListener(MouseEvent.CLICK,clickFun);

	function clickFun(e):void {

	 play();

	}

8、单击按钮后，各帧往后播放，按钮也随之消失，如图所示，然后制作小山渐渐消失的动画，如图所示。

步骤三、创建娃示面板

1、使用绘图功能制作一个显示内容的面板，然后创建出从左到右显示出来的动面，如图所示。

2、将3组文字复制到面板中的合适位置，如图所示。

3、新建一个影片剪辑用来布置全站内容，如图所示。

4、创建一个透明按钮放置在右边，再设置实例名称为bt，如图所示，然后添加如图所示的代码，用于单击按钮后播放内容

	stop()

	bt.addEventListener(MouseEvent.CLICK,clickFun);

	function clickFun(e):void {

	 play();

	}

5、显示面板往右运动并移出舞台，此时文字与内容也渐渐消失，因此需要制作各部分的消失动画，如图所示。

6、为了保证最后播放完跳同到第1帧，需要将第1帧的tree渐显出来，因此将第1帧的图形复制过来，如图所示

7、创建传统补间动画，恢复到第1帧的动画效果，如图所示

8、按Ctrl+Enter组合键发布动画，这样一个三维视觉布局Flash实例就制作完成了

 如果你对本章三维视觉布局Flash实例教程感兴趣欢迎下载源码进行学习研究

三维视觉布局Flash实例教程源码下载