全Flash动画网站实现的基础教学Word文件下载.docx
《全Flash动画网站实现的基础教学Word文件下载.docx》由会员分享,可在线阅读,更多相关《全Flash动画网站实现的基础教学Word文件下载.docx(18页珍藏版)》请在冰豆网上搜索。
一、flash网站的基本布局
一般来说,这个结构是我最常用的flash全站结构,在flash中,我会根据不同的页面元素进行分类,然后分布在各个层中,并且起上相应的名字,便于操作,在源文件中建议养成良好的命名习惯,通常一个全站在成型之前,这个文件,我们会对他操作n次,所以为了提高工作效率以及方便日后调用,良好的结构非常重要。
如上图所示,as脚本层放置在最上方,页面中的所有元素都根据实际的深度排列到相应的层中。
bg也就是页面背景放置在最下方。
1:
通常影片的场景大小,我设置成1600*1200,以适应各种显示器分辨率,帧率设置成30,根据需要也可以进行调整。
关于在浏览器中适应浏览的问题,我放到最后说明。
这里先放下。
2:
loading通常放在第一帧,而且除了背景以外,并不安排其他元素在第一帧内,这样可以保证第一帧的数据量很小。
便于loading动画的正确显示。
3:
每个大型的深层次mc,以及经常需要切换到内部的mc,比如页面的mc,导航部分的mc,等等,我通常会在场景外做一个入口,也就是一个色块,因为有的mc并非在内部的第一帧就有内容,在外层的时候他是空白的,所以为了便于操作,在内部的第一帧建立一个色块,便于随时双击进入操作。
4:
不要把所有的动画和内容都安排在主时间轴里,这样的操作会让你在以后的施工中非常的难于调整,甚至无法增添内容。
我认为,应该把内容分成大类,然后相应的做成原件,根据内容的树状结构,相应的安排mc的嵌套。
然后在各个时间轴里,用写在某个位置的as来控制各个时间轴的衔接。
比如mc1和mc2都是内部有非常复杂动画的mc,我们要mc1动画完毕后开始mc2,这时候就不要把两个mc的内部动画放在一个时间轴内,最好是分别mc1,mc2各一帧,同时在mc1内部的最后一帧上写(mc2所在的帧)。
二、loading的制作
关于loading的制作,网上有的是教程,我只用一个最常用的做法,曾经很多教程上介绍如果做一个精妙的loading云云,我从来都没有深究,这段代码,我在无数个老外的源文件中都看到,连其中没有使用的进度显示文本代码都一样。
。
呵呵。
我的每个全站作品都是用的这个,loading原件通常安排在主时间轴上,内部的动画一定要打包成mc,呵呵,这个loading的内部动画安排成100帧,形式可以随意。
只要是个100帧的动画就可以了。
三:
有关于按钮
其实flash站80%的功能都是基于鼠标事件来完成的,所以按钮在网站中的地位不言而喻,在我理解一个flash全站无非就是通过一些按钮的导向来播放不同位置的mc。
按钮有两种方式可以实现。
一种是按钮元件,一种是影片剪辑元件,这两个原件中。
按钮只有4帧,而影片剪辑没有限制,所以如果需要一个有动画效果的按钮的时候,我们就只能用影片剪辑也就是mc来实现。
事实上,我认为,mc在大部分时间里都可以替代按钮,通过脚本控制mc来实现按钮的功能要比按钮灵活的多。
这是一个最通常的动画按钮的内部结构:
新手提示:
这里需要提示的是关于帧标签的概念:
上图中时间轴里标注的s1与s2是帧标签,在帧的属性栏里可以输入,使用了帧标签可以用gotoAndPlay等等语句来播放该真标签所开始的位置,过了该帧标签的范围后,不会停止哦~~。
用帧标签的好处是你无需理会关键桢的数值,在任何地方播放这段动画,都可以含义明了的操作,并且容易解读和记忆。
在这个按钮mc所在的帧上(上图的外层)写上如下脚本,这个按钮就生效了。
=function(){"
s1"
};
s2"
=function(){};
可以看出在用脚本对btn1按钮添加了onRollOver,onRollOut,onRelease事件后,也就是经过,离开,点击,这个mc就拥有了一个按钮的3种状态,至于点击并不松手这种状态,通常并不常用,所以就没有添加,如果需要的话,那么只需要在对应的帧上写onPress事件就可以了
需要注意的是:
利用这样的写法来实现的按钮,时间轴不能过长,也就是说,动作效果不能动画太长,如果时间很长的话,当你的鼠标划过的时候,这个按钮会执行s2部分,而这么长的动画,你并不是想要播放的,这个按钮已经可以说是一段用鼠标事件激活的动画了,不该用鼠标经过这样的事件来激活。
在全站中经常有这样的情况,即是很多按钮都要实现类似或者同一种类的功能,那么一一写onRollOver等等就太烦琐了。
这时候我们就需要用循环的功能了,最开始,如果你看不懂,那么你并不需要去深究到底是怎么写法,粘贴过去,然后去改你需要改的部分吧。
这里有5个按钮,按钮的名字是pm1,pm2---pm5,当鼠标经过这些mc的时候,如果经过的不是已经点过的mc的话,就播放这个mc的“s1”部分,鼠标离开的时候,满足同样条件就播放“s2”部分,点击这个mc的话,上一个被点的mc播放"
部分(通常也就是回到初始的状态)。
stop();
function
rollover()
{
if
!
=
("
);
}
rollout()
release()
["
pm"
+].gotoAndPlay("
nRollOver
rollover;
this["
+i].onRollOut
rollout;
+i].onRelease
release;
+i].indexNum
i;
}
这段代码很简单,是as比较基础的语句,关于for,以及if语句的用法,请自己在网上找,有的是。
其实,做flash站,最常用的语句就是这两个,应该理解透。
新手朋友需要注意的是if后面的条件要用==来判断,如果只写一个=,那么这个条件就永远都成立,因为=是赋值的意思,而==才是判断,这里的for(vari:
Number=1;
i<
6;
i++)部分,如果你有5个按钮那么i<
6,如果6个就i<
7。
需要非常重视的是这个东西,这是一个变量,我叫这个东西为“标志位”,当然也可以叫做,在这里利用这个=来记录当前鼠标事件的对象,当点了btn1的时候,这个=1,_root在as里是顶级的位置,我们写=1就是表明在主时间轴建立一个变量值为1,之所以用顶级位置,就是因为调用起来简单,方便,在任何地方都可以用,这里涉及到路径和层级的知识,稍后说明。
总之在我们需要记录一个数据,比如页数,比如按钮序号,等等的时候,这个“标志位”使用起来是很方便的。
在下面我们还会用到。
另外一个推荐熟悉的部分是movieClipTween这个功能扩展,这个类,或者这个方法,简单的说就是用脚本而不是用时间轴来安排动画,在很多时候,我们如果用脚本的方式来实现一些mc的交互会更加方便,同时更加灵活,这样做的好处是,比如你需要一些按钮,你并不需要为每一个按钮安排时间轴和建立关键桢,所有动作都用脚本生成。
而且很直观,我不是很会形容这个的好处,但是相信没有用过的朋友们一定会习惯并且喜欢这种动画创作方式。
下图为例:
具体的脚本如上所示。
需要知道的是,这个扩展的功能并非flash安装后自带的,你需要下载这个后缀名为mxp的扩展包,安装需要有extentionmanager这是adobe公司的免费软件,如果你安装了dw9就同时安装了。
安装之后,参数的使用方法非常简单,在flash的帮助文档里会添加出相关的项目,虽然是英文的,但是也非常易懂。
四:
flash全站的页面切换
在传统的html站里,我们通过点击超链接来打开另外的一个html,在flash站里,我们当然也可以打开另外一个html页面,但是缺少了动画的翻页就失去了动态效果,所以,在flash全站里,通常都会有比较动感的动画部分来衔接两个页面,也就是说点击链接后,运行一个动画,然后动画完毕后,新的页面也呈现出来了。
这里有个示例网站这是我刚学flash早期的一个主页,一直还没空完成。
在实现这样的效果,我们有非常多的办法,这里我比较常用的是这一种,结构是这样的,很简单...
如图可以看到,翻页动画层在页面内容层之上,最上方是脚本层,把脚本写在最上方的层里,是比较好的做法,在网站进入后,开始播放页面的mc,这mc的第一帧也就是上图中的第一帧,根据需要,我们可以写上一个stop(),页面内容被播放,当首页上的导航按钮点击后,导航按钮内安排了脚本:
start"
),这时候,从第二帧开始的翻页动画mc开始播放,当播放到开始露出下面页面的时候,在时间轴上的相应帧上安排脚本:
这里的是按钮点击时候被赋值的,也就是说,如果我点了按扭2.那么这时候,页面就切换到第二帧,点击3播放page的第三帧。
最后停止,不要忘记写stop()在时间轴的最后。
如图所示页面的部分做成一个大mc,里面每一个页面做成一个mc放在一帧内,这样就对应了每个导航按钮的点击。
在每个页面mc切换前,播放了翻页动画,在翻页动画过程中进行了换帧,于是,我们的目的就达到了。
这个功能实现的方法是很简单的,但是基础的方法是比较通用的,我们在查阅很多国外的flash全站源文件的时候,都会发现类似的方式,通过换帧来达到换页的方法,也是flash全站的一个比较通常的方法,当然还有其他的办法来实现,但是这个基本的方法还是值得新手朋友们掌握的。
五:
文本内容的显示
任何网站中都要有文字,flash网站中的文字,我们在制作的时候有3中选择,一种是静态文本,一种是动态文本,一种是输入文本,静态文本可以使用任何字体,在发布后,浏览者可以看到你源文件中使用的文本,在网站中不需要经常更新的部分,大可用静态文本来写,因为不需要浏览者也拥有你的字体,所以,很方便你对页面所做的美工。
动态文本,通常用来显示后台程序所提供的文本内容,或者flash中动态生成的文字,比如建立一个空白的动态文本,id名起为mytext,那么在他的所在帧上写如下脚本就可以让他显示出指定的文字="
我傻,但我不流哈喇子"
发布后,这个文本框就会显示出相应的文字,因为是动态文本,所以通常在我们需要他的场合都是例如留言本,新闻发布等需要经常更新和变化的部分。
所以如何动态的读入文字就是动态文本使用的目的。
如果你的工作伙伴中有程序员,那么你可以要求他的后台给你传递一个xml文件,然后你在flash端让你的动态文本显示这段xml,你的fl