当前位置:软件学堂 > 资讯首页 > 网络编程 > Flash > 三维视觉布局Flash实例教程

三维视觉布局Flash实例教程

2021/9/11 15:57:31作者:佚名来源:网络

移动端
Flash8电脑版v8.0官方版

大小:122.7MB语言:

类型:媒体制作等级:

案例描述:

本例主要讲解三维视觉布局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实例教程源码下载

 


 

标签: flash实例  视觉布局