FLASH制作网站过程详细规划.docx
《FLASH制作网站过程详细规划.docx》由会员分享，可在线阅读，更多相关《FLASH制作网站过程详细规划.docx（42页珍藏版）》请在冰豆网上搜索。
FLASH制作网站过程详细规划
FLASH制作网站过程详细规划
文章来源：
小新技术作者：
佚名更新时间：
2006-5-26【大小】【加入收藏】
-
-
源文件请参考这里:
1网站制作前期准备
往往很多人做FLASH的时候都是拿来就做，不对的地方再进行修改，这样不仅效率低，并且做的时候思绪很乱，导致做出来的效果很差，一个好的网站前期的准备工作必不可少网站做法分为两种一种是把网站做成很多的FLASH文件，然后再进行连接，这样做的好处是修改容易，且思路清晰。
（我常用的做法），另外一种就是大家所看到的这个，各个连接都在一个FLASH文件当中，这种做法需要很高制作能力，对前期的准备工作要求很高。
下面我们就重点针对这个网站做一些分析。
首先确定尺寸，以及如何布局。
大家可以看到这个文件是由3个部分构成的（如图一）
这样大家心里就有点数了，我想你现在可能认为太无聊了吧，说这个东西，但是的确它是一个FLASH网站的灵魂所在，做任何一个网站都要做到心中有数。
这时候大的框架有了，就开始进行设计，想想每个部分我应该放些什么，这大多是在PS里面处理的，我就不在罗嗦了。
（加上一点，如果想要在FLASH当中打开是透明图片，那么就请你保存为GIF格式的。
）
二网站制作
这一部分是重点，我打算先把一些重要的部分分开来说明，然后再做最后的整合，（不过大家注意点了，现实中的制作是按你的思路来的，因为怕按过程来讲大家不好理解），这个网站有3个地方需要分开说明，分别是loading,按钮部分，以及动画的连接。
好了，废话不多说了。
1loading的制作
一般来说loading的制作方法很多，这个网站就是采用一种普通的制作方法，先来看看图片
可以看到整个LOADING的制作就在2个图层的第一桢上，分别是AS层和LOADING层AS层当中输入脚本stop（）;作用是让它停止在第一桢上，这样的话它就不在继续播放了，而看看LOADING层，在画布当中点击它发现是一个影片剪辑，（影片剪辑是相对独立的东西，也就是说虽然场景已经停在第一桢了，但是影片剪辑却可以播放）我们双击这个影片剪辑，打开后如图所示
大家从这个可以看到每个部分都有自己的归属，所以大家在做的时候也要这样，思路很清晰，对于layer2和layer4我们就不在研究了，都是简单的渐显效果，我们重点就是layer5这个图层，发现这个还是个影片剪辑，在20桢的位置上我们点击这个影片，打开动作面板，发现这样的代码：
如下：
onClipEvent（load）
{
this.bar._xscale=0;
total=_root.getBytesTotal（）;
}
onClipEvent（enterFrame）
{
this.bar._xscale=_root.getBytesLoaded（）/_root.getBytesTotal（）*100;
loaded=_root.getBytesLoaded（）;
percent=int（loaded/total*100）;
txt=percent+"%";
if（this.bar._xscale==100）
{
_parent.play（）;
}//endif
我来做一下翻译，onClipEvent（load）当影片载入的时候；
this.bar._xscale=0;this是相对的意思，就是从这个影片开始，bar这个影片当中水平百分比是0
total=_root.getBytesTotal（）;把主场景的字节数赋值给total
onClipEvent（enterFrame）当影片播放的时候
this.bar._xscale=_root.getBytesLoaded（）/_root.getBytesTotal（）*100;把目前载入的字节数除总的字节数，然后再乘100
loaded=_root.getBytesLoaded（）;把载入的字节数赋值给loaded
percent=int（loaded/total*100）;这个就是为了取整，并赋值给percent
txt=percent+"%";在percent值的后面加上一%号，赋值给txt
if（this.bar._xscale==100）
{
_parent.play（）;
}这是一判断语句，如果bar这个影片元件的水平缩放到了100，那么上一层就开始播放，_parent也是相对的意思，表示前一个目录。
从这个代码来看，大家也许会郁闷了，这个bar元件在什么地方，我怎么没看到呢？
不要着急，后面来说。
并且相对应的在layer5这个层的上面有AS层，20桢的位置有代码stop（）；让它停止在20桢位置上。
我们可以看到在40桢的地方有_root.gotoAndPlay
（2）;意思是跳转到场景的第2桢.
[1] [2] [3] 下一页
好了我们双击这个影片打开后如图：
这里就很简单了
Layer4是一个影片剪辑它实例名为bar，这就让我们想到了上一个影片剪辑里面的代码，恩，不错，就是利用那些代码动态的对它进行改变，做到滚动条随着影片载入的多少变长。
Layer3是一个动态文本，里面的变量名为txt，同样道理也是利用上一个影片剪辑里面的代码对它进行控制，刚开始的时候为0%到最后的100%。
这样我们就把这个LOADING做好了，可能你会说有点难啊，刚开始嘛，多学习一下，就会有收获的，如果有什么地方还没看懂的地方，请给我留言。
源文件请参考这里:
按钮部分的制作
按钮的效果制作方法很多，这个网站上的按钮也悄壳爸谱鱂LSAH按钮非常普遍的方法之一，我们来先看看图片。
当我们播放源文件的时候，会发现当我们鼠标移动到按钮上面时三角形符号会向前移动，当鼠标移开的时候，三角形符号会回到原来的位置。
这种效果如何实现的呢？
下面我们就来学习一下，我们可以看到整个按钮部分都在一个图层上，有人会问了，这么多的效果在一个图层上就能实现？
（呵呵，没错的，这是我们常用的一种手法，利用影片剪辑进行嵌套，这样的做的好处是整个原文件层次划分非常清晰，让人一眼就能知道整个文件的构成）。
我们会发现整个按钮层就是个影片剪辑，双击后里面如图所示
很舒服吧，一目了然，每个图层对应一部分东西，5个按钮分别放置在5个图层上，
并且每个按钮又是一个影片剪辑，这时是我们应该就能体会到影片剪辑的能力吧。
因为这5个按钮每个的制作过程都一样我们就挑一个来讲，比如是HOME这个按钮，我们点击它，恩，肯定是个影片剪辑了，然后打开动作面板，会发现几句AS语言如下：
on（rollOver）
{
this.gotoAndPlay
（2）;
}
on（rollOut）
{
this.gotoAndPlay（11）;
}
on（release）
{
_root.gotoAndStop
（2）;}
很简单吧，鼠标经过跳到第2桢，鼠标移开跳到第11桢，这两个是跳转播放是针对这个影片来说的，这点要知道，单击跳转到主场景的第2桢停止，这个是对场景而言的，_root就是场景的意思。
有人会问明明这个是按钮所允许的代码，为什么在影片上也行？
呵呵，其实这个没什么影响，如果你认为不能理解的话，你就换成这种格式的this.onRollOver=function（）{内容}
好了，知道了代码就要知道它们到底是干什么的，我们双击这个影片，打开如图
我们会发现这里面也很简单：
三角形符号从1~10是向右做变色移动，从10~18是回到原来位置，其他内容都是静止的，然后我们来看看AS层分别在第1和第10桢上放了2个脚本，都是stop（）;这样是干什么呢？
想想我们上面我们看到的代码
on（rollOver）
{
this.gotoAndPlay
（2）;
}
on（rollOut）
{
this.gotoAndPlay（11）;
}
呵呵，不难理解吧就是利用这些代码对三角形符号进行控制（需要注意的是明明是在第一和第10桢上有脚本，为什么我们需要跳转第2和第11桢呢？
这是gotoAndPlay是一个很特别的语句，this.gotoAndPlay
（2）;虽然它是跳转到第2桢，但是它实际上是从前一桢开始播放，我以前就因为这个问题发生过错误）
好了，按钮部分到这里就说完了，不难吧~希望大家通过这个可以学会用影片剪辑嵌套的方式去做按钮。
3画面的连接
今天我们就来说说有关这个网站画面是如何连接的，就主场景而言（也就是一打开文件所能看的画面），如图
当我们打开源文件的时候，我们可以看到主场景的所有画面都在上图当中这4个图层的第2桢上（这几个图层的位置做了些调整，方便大家看的清楚），分别是脚本层stop（）;第一部分，第二部分，第三部分（也就刚开始介绍网站准备工作中所划分的3个部分）OK，现在我们来一一介绍下，首先我们来介绍第2部分（因为动画是先播放第2部分的），它所在的图层是layer62，双击打开它，如图
上一页 [1] [2] [3] 下一页
呵呵
呵呵，这里面全部都是补间动画构成，没什么好说的，参照源文件。
。
对于这个AS层的第37桢上有个脚本，打开动作面板，发现这些语句。
stop（）;
_root.cc.gotoAndPlay
（2）;
_root.cc.gotoAndPlay
（2）;这个的意思就是主场景下cc这个影片从第2桢开始播放。
cc？
？
它在什么地方？
呵呵，不要着急，请看下文，这样第2部分就讲完了，其实它是整个构成最简单的部分。
我们返回到主场景中开始说下第3部分，（因为它是第2个开始播放的），它所在的图层是在layer62上，点击后发现原来它是有实例名的，叫cc,哦，它原来在这里啊。
双击打开它如图所示
发现这里面和第2部分也差不多，对，就是很简单的构成，里面的按钮部分也已经提出来讲了，其他的也就是简单的补间了，好了，我们来看看AS层吧，发现在第一桢和第43桢上各有一个脚本
第一桢一个stop（）;这时有人就想问了，为什么在第2部分上我们没看到这个脚本啊，恩，能提出问题说明你动脑筋了，我们来说说原因吧（整个画面的播放顺序是第2部分——第3部分——第一部分，但是我们可以清楚看到这3个部分都是在一个桢上，照理说应该一起播放的，这时候简单的AS脚本就发挥了功效，首先我们先看到第2部分最后一桢上的_root.cc.gotoAndPlay
（2）;说明它播放过后才让第3部分开始播放，而第3部分开头的stop（）;也就是说，非要等到第2部分放完后，我才放，我们可以想一下，假如没有这个stop（）;那么将会在第2部分播放的同时，第3部分也在播放。
这样就会发生错误，你不妨把这个stop（）;去掉，看看会发生什么效果。
）
好了我们接下来说说第43桢处的脚本
stop（）;
_root.aa.gotoAndPlay
（2）;
_root.aa.gotoAndPlay
（2）;里面的aa我们猜也能猜到了，肯定是第一部分的实例名了。
好了就这样第3部分也就分析完了.
接下来我们就来第一部分吧。
。
如图：
这里我们也可以看到虽然图层是多了点（因为内容多嘛），但是构成却一点不复杂，就是多了两个遮照，对于这两个遮照我也不打算太过详细的说，就把那个花形成的遮照稍微说一下
我们先来看看图
通过源文件可以知道，遮照层是一影片剪辑，被遮照层就是花本身，我们双击打开影片如图所示
最后一桢加上AS停止，整个遮照就构成了，我在这里想说的就是遮照方法很多种需要灵活利用，这样我们才能创造出独特的视觉。
好了遮照说完了，其它都是些简单的补间，大家参照源文件看看。
同样在AS层的第一桢上stop（）;用法我们在前面已经说过了，AS的最后一桢上同样也是stop（）;这个用法也很简单，因为已经放完了嘛，当然需要让它停止。
好了整个主场景的连接过程就说到这里，我们再来看看主场景，如图：
从第3桢到第6桢上，每个桢都同样有3个部分组成，这些都是我们前面说的按钮控制的
语句就是
on（release）{
_root.gotoAndStop（你所要控制的是第几桢）；
}
好了，到这里我就把有关制作的方面说完了，希望大家能够参照源文件学会自己分析，有什么不懂的地方给我留言。
。
。
。
三总结
对于网站到这里我们就结束了，总的说由于网站本身难度不高，所以所学的内容比较的少，在这里我要说明的一点，网站的制作不是一成不变的，所以这里只是一个实例，给大家一个最基本制作FLASH网站的过程，通过本教程学习后，希望大家能够学会分析网站的构成，做网站往往它有很多东西都是很局限的，比如LOADING，你的网站有，我的也有，所以要想自己网站有特色，就要对局部进行美化，创新。
这是学到一定程度所必须去尝试的东西。
PS是美化的一个好软件，网站上有很多东西都是在PS上美化后再导入的，遮照是创新的一个好帮手，通常的视觉效果都是通过遮照来实现的
Flash网页制作之详谈loading的制作
文章来源：
ChinaITLab搜集整理作者：
佚名更新时间：
2006-5-7【大小】【加入收藏】
-
-
大家知道，当flash影片或者网页体积相当大的时候，等待页面的出现是非常枯燥的，所以loading的概念就产生了
loading的制作方法有许多许多种，今天详谈一种。
好了，转入正题。
首先，CTRL＋F8新建一个电影剪辑（MC），命名为loading。
然后，进入这个MC，做一个方框，不带边框，只留填充色，选中方框，按F8转换为图形元件。
然后按F6在第100帧做一个关键帧。
回到第一帧，用自由变形工具（Q），将loading条从左或右像中间拖，拖至一条线为止，然后从第一帧做补间。
这样loading动画就是一个从中间向两边延伸的，至于为什么要做100帧的渐变动画，那就是配合100％的AS咯，到100％下载的时候，这个条就延伸完毕咯！
接下来，将名字为loading的MC拖入场景种的第一层，放到合适位置，点F5延长一帧。
将MC实例命名为loading。
然后进入我们的AS部分。
在主场景中新建一层，点击F6延长出一个关键帧，因为第一帧是空白帧，所以第二帧也延长出一个空白关键帧了。
第一帧写入AS：
a=getBytesLoaded（）;//a定义为getBytesLoaded（）
b=getBytesTotal（）;//b定义为getBytesTotal（）
loaded=int（a/b*100）;//定义为a除以b再乘以100，目的是求个百分整数，其实对于这个loading的效果不大，不过打个基础，对于以后功能详细的loading有用。
loading.gotoAndPlay（loaded）;//loading这里就是场景中实例命名的那个loading，在下载的同时，运行这个MC，配合上面的百分整数显示整个下载过程。
第二帧写入AS：
if（a==b）{//如果a的值，就是下载的总值等于flash本身的总值，执行下列语句
nextScene（）;//转到下个场景，这里可以看到，这里的主动画和loading场景是不同的，所以我们要用shift+f2再建立一个新场景，放入主动画，而且必须在loading场景的下面。
}else{//其他情况，就是说a不等于b，多半是没有load完的情况下、
gotoAndPlay
（1）;//回到第一帧，这样做一个循环，当loading不成功的情况下，回到第一帧重新执行下载。
}
这样就完成了，切记，主动画要放在另外一个场景且在loading场景之下。
这次我们介绍用AS配合动态以及静态文本来完成显示详尽下载进程，临时再决定加上百分数的显示。
上次介绍了进度条，这次就不说了，直接进入百分数以及下载进程。
首先在场景用静态文本在合适的7个合适的位置分别写上：
总字节数、已下载字节数、总帧数、已下载帧数、需要时间、实际已用时间和“％”，然后时间轴上用F5延长出一个帧。
然后分别在前六个的右边用动态文本拉出6个合适大小的框，不写任何东西，在“％”的右边用动态文本拉出一个3个字位数的框。
然后分别在属性框里给对应静态文本的动态文本框加变量：
总字节数：
aby
已下载字节数：
bby
总帧数：
af
已下载帧数：
bf
需要时间：
at
实际已用时间：
bt
%：
loaded
然后新建一层，命名为AS（这并不重要，但是养成一个会分门别类的好习惯，大家以后看我放的源文件，不管是层名、还是库里面，我都会分门别类放好，多的时候会建立相应文件夹，这样方便大家找到源文件里面想要的东西），点F6延长出一个关键帧
然后第一帧写入as：
a=getBytesTotal（）;//b定义为已下载总字节数
b=getBytesLoaded（）;//a定义为需要下载的总字节数
loaded=int（b/a*100）;//给变量名为loaded的动态文本框显示出需要下载字节数与已下载总字节数的百分比，想但简单，就是一个数学式，b除以a再乘以100
aby=_root.getBytesTotal（）;//给变量名为aby的动态文本框显示出需要下载的总字节数
bby=_root.getBytesLoaded（）;//给变量名为bby的动态文本框显示出已下载总字节数
af=_root._totalframes;//给变量名为af的动态文本框显示出总帧数
bf=_root._framesloaded;//给变量名为bf的动态文本框显示出已下载帧数
at=int（（（aby-bby）/（bby/bt））+bt）;//给变量名为at的动态文本框显示出总时间，这里也看得出是一个数学式
bt=int（（getTimer（））/1000）;//给变量名为bt的动态文框显示出已用时间，1000是以毫秒计的。
然后在第二帧写入as：
if（a==b）{//如果实际下载的总字节数等于需要下载的总字节数那么，接下句
nextScene（）;//转到下一个场景，也就是说还跟昨天一样，要将主动画放到loading场景之下的一个场景
}else{//其他的，也就是以上条件不能达成
gotoAndPlay
（1）;//回到并播放第一帧，这样做一个循环，下载不成功就做到重新下载。
}
这样就全部完成了，大家看到AS跟数学非常有关系，int这个语句其实是Mathround的简化方式，而大家在第二帧第一行里面的if（a==b）注意千万不要写成a＝b，＝是赋值，＝＝才是等于，大家切记。
-
Flash网站模块化拖动技术探解
文章来源：
ChinaITLab搜集整理作者：
佚名更新时间：
2006-5-7【大小】【加入收藏】
-
-
一.概述
目前MS和Google等大公司的网站里渐渐出现一种技术,可以实现用户界面的页面模块化拖动,我把它称之为网站模块化拖动技术.
先来看看一个MSNmySpace的例子,注意两张图片的不同:
（网址为:
没有MSN账号的要注册）
而实现这一过程,只需用户在网页上拖动相应的模块,就能完全按自己的个人喜好,调整网页模块的位置,当然相信这些公司网站上出现的出于更多的目的是为了增加更多的用户体验,吸引更多的用户.而我们要做的是用flash来实现这一技术,并且加予应用.
首先我们得做个实验,就把网站想像成一块一块的,比如"新闻"一块,"会员登陆口"一块,"最新文章"一块,我们怎么对它们进行拖动呢?
OK,开始理清一下思路,现在我们现在必须考虑的是这些块要怎么排上去?
我们先不管什么"新闻","会员登陆口","最新文章"这些里面的内容,全部当他是MC1,MC2,MC3,实验先从简单化入手!
打开flash,做个类似下图的MC,MC里有个动态文本框,变量名:
mcText,同时给这个MC加上相应链接标识
//======================flash源代码======================//
//先定个边距，10px
varborder:
Number=newNumber（10）;
varXmodel=border;
varMod:
Array=newArray（）;
this.attachMovie（"MC","MC",this.getNextHighestDepth（））;
this.MC._visible=false;
//用二维数组对MC位置进行排列，假定为2行，2列
//列的循环
for（vari=0;i<2;i++）{
varYmodel=border;
//注意二维数组要先定义一维数组
Mod[i]=newArray（）;
//行的循环
for（varj=0;j<2;j++）{
duplicateMovieClip（MC,"MC"+i+j,this.getNextHighestDepth（））;
Mod[i][j]="MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[i][j]].mcText="MC"+i+j;
this[Mod[i][j]]._y=Ymodel;
Ymodel+=Number（this[Mod[i][j]]._height）+border;
this[Mod[i][j]]._x=Xmodel;
xx=Number（this[Mod[i][j]]._width）;
}
Xmodel+=xx+border;
}
//=============flash源代码=============//
这样MC的简单排列就完成了.
在做完了模块的简单排列后,我们必须让每个模块能够按我们所希望的拖动,而且还必须自动排序,这节内容是MC数组的自动排序.
//=============flash源代码=========//
//先定个边距，10px
varborder:
Number=newNumber（10）;
varXmodel=border;
varMod:
Array=newArray（）;
varWmod:
Array=newArray（）;
this.attachMovie（"MC","MC",this.getNextHighestDepth（））;
this.MC._visible=false;
//用二维数组对MC位置进行排列，假定为2行，2列
//列的循环
for（vari=0;i<2;i++）{
varYmodel=border;
//注意二维数组要先定义一维数组
Mod[i]=newArray（）;
//行的循环
for（varj=0;j<2;j++）{
duplicateMovieClip（MC,
升级会员 