当前位置:软件学堂 > 资讯首页 > 网络编程 > Flash > flash全站动画设计实例教程

flash全站动画设计实例教程

2021/9/11 16:14:54作者:佚名来源:网络

移动端
adobe flashcs5.5简体中文版

大小:537MB语言:

类型:动画制作等级:

案例描述:

本例主要讲解flash全站动画设计实例教程,本例以一个实际应用中的蛋业网站来讲解F1ash全站动画的设计方法,在制作全站时,首先要和客户进行全面的交流,在得到制作材料后开始构思全站的风格,从行业特性和企业文化入手,然后斟酌网站访问人群的年龄范围、教育程度和文化差异来设计奎站。
flash全站动画设计实例教程

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

本例思路:

构思全站的色彩、布局、动画和结构,然后在Photoshop中设计
将图形导入Flash,然后制作出标志动画。
将图形分割到Flash中,然后制作出主页的动画效果。
分析各个菜单的子栏目,然后依次制作出各个栏目。
制作出视频专区,然后将内容排好。
依次制作内页效果,然后测试程序。

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

 

放大显示动画

步骤一、整体思路

1、本例要设计的是一家蛋品企业的宣传站,在于客户沟通后得出以下结论
色彩:使用白色背景,以橙色为主色调,再用淡黄色和黑色作为辅助色,追求清新的画面效果,以突出食欲与环保,如图
布局:每一块内容布局到几何图形中,网站左上角放置企业标志,菜单只进行简单的布置处理
动画:网站加载完成后,播放一段剪短的标志动画在过度到主页,而每一个子栏目只制作一个简单而流畅的过程动画
结构:为提高网站访问速度,因此将各模块分成多个swf文件来制作,单击菜单时再渎取各模块,其结构如图所示。

构思色彩

2、分析完成后,用Photoshop制作出版面,如图所示

模块调用结构图

制作版面


步骤二、制作标志动画
1、把各个元素切割到F1ash中,根据客户意见和动画需要来进行修改。首先制作标志动画,新建一个基于ActionScript 2 0的Flash文件,舞台大小设置为1000×600像素,背景色为白色,帧频为40fpS。每个标志都有不同的规律,根据客户提供的标志来创作其动画,如图所示,这个标志首先要突出巾问的毛体字“蛋”,其次是“光阳”,然后出现“业”宁和拼音。

标志

2、制作出“蛋’’字的手写动面,如图所示,然后将循环选项没置为“只播放一次”,再制作出“光阳”两个字的出现动画,如图所示。

制作手写动画

制作文字动画

3、采用同样的方法制作“业”字和拼音从右渐显的出现动画,标志的动画效果如图所示。

标志动画

步骤三、制作主页动画

1、品牌宣传站里加载条就显得格外重要,设计一个吸引用户眼球的加载条可以提高网站的访问率,本例用鸡蛋来进行设计,如图所示

制作加载条

2、打开在Photoshop中设计的版面,然后将每个元素输出为png文件,再导人Flash中,如图所示。

布局元素

3、当标志动画播放完后,上下两部分元素开始出现,如图所示。

制作元素出现动画

步骤三、制作主页动画

4、新建一个As图层,然后在第310帧按F7键插入空白关键帧,并输入代码stop()将出场动画进行暂停处理,再设置当前菜单为thernenu=“home”,如图所示。

	stop()

	themenu="home"

	_global.jump=false

编写代码

5、第385帧中,使用loadMovie Cthemenu+“.swf,mov):语句来加载子模块的swf文件,并使用一个inov影片剪辑作为容器,如图所示。

loadMovie(themenu+".swf", mov);
stop();

加载容器

6、进入菜单影片剪辑的编辑区域,制作一个透明菜单放置在每个菜单的字上,并将系列名命名为b1~b7,然后绘制一条横线影片剪辑作为菜单的指示线,再复制出几个横线铺在菜单的字下面,并将系列名命名为tl~t5,最后绘制一个三角形来作为缓动跟随,并设置实例名称为tag,如图所示

按钮与元件

7、为按钮添加单击事件程序,如图所示。

	for (j=0; j<=7; j++) {

	 this["t"+j]._visible = 0;

	}

	function pas(id) {//点击按钮后对着重号进行处理

	 for (j=0; j<=7; j++) {//先隐藏所有着重号

	  this["t"+j]._visible = 0;

	 }

	 i = id;//这是用在特效里的,点击按钮时三角形也跟着指示过来

	 this["t"+id]._visible = 1;//显视当前所点的着重号

	}

	b1.onRelease = function() {//菜单:走进光阳

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "intr";//设用swf的字符串

	 pas(1);//处理指示线

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;//播放当前栏的消失动画

	 }

	};

	b2.onRelease = function() {//菜单:视频专区

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "video";

	 pas(2);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b3.onRelease = function() {//菜单:产品中心

	 tag.play();

	 _parent.themenu = "pro";

	 pas(3);

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b4.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "service";

	 pas(4);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b5.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "news";

	 pas(5);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b6.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "person";

	 pas(6);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	b7.onRelease = function() {

	 tag.play();

	 if (_parent.themenu == "home") {

	  _parent.play();

	 }

	 _parent.themenu = "about";

	 pas(7);

	 if (_global.jump) {

	  _parent.gotoAndStop("load");

	 } else {

	  _global.jump = true;

	 }

	};

	

	

	 

 

编写代码

8、添加如图所示的特效代码,然后添加如图所示的缓动代码。

	 var i = 0;

	this.onEnterFrame = function() {

	 for (n=1; n<=7; n++) {

	  if (i == n) {//判断执行缓动的是哪个按钮

	   tag._x += (this["b"+n]._x-tag._x)/5;//缓动公式,当a到b点时为:a=a+(b-a)/5

	   if (tag._x == this["b"+n]._x) {//当运动到终点时,停止执行,即i=0

	    i = 0;

	   }

	  }

	 }

	};

添加特效代码

9、预览主页动画,效果如图所示。

主页动画

步骤四、制作菜单栏目

1、主页动画制作成后,下面制作子栏目动画,如图所示,等个子菜单里都有分栏目,但是有些子栏目只需要设计一种样式,然后使用程序按不同的ID读取数据库就行了,比如“产品中心”和“蛋业资讯”下的子模块。

拓扑图

2、制作第1个子栏目‘’走进光阳”文件,首先绘制一个如图所示的扇形

绘制扇形

3、‘选择扇形,然后设置填充类型为“线性”,再设置第1色标颜色为(R:255,G:128,B:0),第2个色标颜色为R,193,G:58,B:2),第3个色标颜色为(R:165,G:58,B:14)

填充颜色

4、使用遮罩功能为扇形制作展开动画,然后使用“绘图纸外观轮廓”功能查看动画效果,效果如图,在绘制出用于放置菜单的抽象图形,如图所示。

绘制抽象图形

5、使用绘图功能绘制出菜单,如图所示。

绘制菜单

6、返回到“场景1”,再新建一个As图层,并在第1帧添加stop()语句,然后在所有图层的第l帧添加空白关键帧,如图所示。

添加代码

7、在AS图层的第2帧按F7键插入空白关键帧,然后输入如图所示的代码。

	_global.jump = false;

	id=0

	this.onEnterFrame = function() {

	 if (_global.jump) {

	  play();

	 }

	};

	

编写代码

8、在第85帧按F7键插入空白关键帧,然后输入stop()语句将动画进行暂停处理,如图所示,再新建一个用于加载内容的影片剪辑(名称为main);

停止动画

9、在main影片剪辑里,针对第1个菜单来输入加载代码,如图所示,然后将所有子页面的系列名命名为inter_l.swf~inter_8 swf,其加载容器为mov,如图所示

输入加载代码

10、将加载条放置在扇脚处,然后使用一条弧线来搭配整体结构,如图所示.

加载条

11、在菜单中添加代码,当单击菜单时按系列名来加载相应的swf文件,如图所示

	m1.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 1;

	};

	m2.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 2;

	};

	m3.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 3;

	};

	m4.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 4;

	};

	m5.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 5;

	};

	m6.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 6;

	};

	m7.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 7;

	};

	m8.bt.onRelease = function() {

	 _parent.main.mark.gotoAndPlay(2);

	 _parent.main.theid = 8;

	};

	

编写代码

12、制作一个菜单“公司简介”的页面,新建一个flash文件并存储为intr_1,然后将扇形复制过来,如图再将内容排版到扇形的相对位置,如图所示

内容排版

13、在进入企业简介之前,要先播放企业口号,所以制作出企业口号的帧帧动画,如图

制作文字动画

14、制作第二个菜单“公司荣誉”的页面,新建一个flash文件并存储为intr_2,然后按版面要求来放置蛋图形,如图

公司荣誉页面
15、制作第三个菜单“成长历程”页面,新建一个flash文件并储存为intr_3,元素设计如图

成长历程页面

步骤五、制作视频专区

1、制作“视频专区”,使用绘图功能绘制出抽象图形,如图,然后制作出视频区的出场动画,如图所示

绘制抽象图形

2、视频按钮第1个栏目“走进光阳’’的菜单按钮一样,只需制作个,然后将不同的值传递进去就行了,如图所示

	onClipEvent (load) {

	 this.txt = "06年央视《管出来的大市场》";

	 bt.onRelease = function() {

	  _parent._parent.main.linkpath = "flv/video2.flv";

	  if (_parent._parent.main.home) {

	   _parent._parent.main.play();

	  } else {

	   _parent._parent.main.flvplay();

	  }

	 };

	}

	

编写程序

3、发布视频专区程序,预览效果,如图所示

预览效果

步骤六、内页设计

1、制作产品中心的页面,产品中心是个产品列表,需要设置一个用于加载缩略图的产品名元件,然后使程序按矩形阵列来复制,如图所示

产品系列

2、绘制出产品中心的菜单,如图所示,当单击产品后,弹出浏览菜单,如图所示。

产品中心菜单

3、制作客服中心的页面,如图所示。

客服中心页面

4、制作蛋业资讯页面,如图所示,为了体现空间感,因此在背景上绘制几条向远处伸展的图形,如图所示。

蛋页咨询页面

制作伸展动画

5、继续制作纸张翻动效果,如图所示,然后将制作的面板渐渐显示出来,如图所示

面板动画

6、制作菜单和箭头升起的动面,如同所示。

升起动画

7、制作出“人才招聘”栏目,首先绘制一个皇冠图形,如图所示,然后将内容排好,如图所示。

绘制皇冠图形

8、制作最后一个栏目“联系我们”.首先绘制出纸张图形,如图,然后制作出入场动画,如图所示。

绘制图形

入场动画

9、到这一步已经完成了最终的布局效果,如图所示,然后整理好所有的子页面,如图所示,再进行测

所有文件

 

如果你对本章flash全站动画设计实例教程感兴趣欢迎下载源码进行学习研究

flash全站动画设计实例教程源码下载

标签: flash实例  全站动画