下面我们就重点针对这个网站做一些分析。首先确定尺寸,以及如何布局。大家可以看到这个文件是由3个部分构成的(如图一)
这样大家心里就有点数了,我想你现在可能认为太无聊了吧,说这个东西,但是的确它是一个FLASH网站的灵魂所在,做任何一个网站都要做到心中有数。这时候大的框架有了,就开始进行设计,想想每个部分我应该放些什么,这大多是在PS里面处理的,我就不在罗嗦了。
(加上一点,如果想要在FLASH当中打开是透明图片,那么就请你保存为GIF格式的。)
二网站制作这一部分是重点,我打算先把一些重要的部分分开来说明,然后再做最后的整合,(不过大家注意点了,现实中的制作是按你的思路来的,因为怕按过程来讲大家不好理解),这个网站有3个地方需要分开说明,分别是loading,按钮部分,以及动画的连接。好了,废话不多说了。
1 loading的制作一般来说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();
} // end if
我来做一下翻译,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桢.
好了我们双击这个影片打开后如图:
这里就很简单了
Layer4是一个影片剪辑 它实例名为bar,这就让我们想到了上一个影片剪辑里面的代码,恩,不错,就是利用那些代码动态的对它进行改变,做到滚动条随着影片载入的多少变长。
Layer3是一个动态文本,里面的变量名为txt,同样道理也是利用上一个影片剪辑里面的代码对它进行控制,刚开始的时候为0%到最后的100%。
这样我们就把这个LOADING做好了,可能你会说有点难啊,刚开始嘛,多学习一下,就会有收获的,如果有什么地方还没看懂的地方,请给我留言。
源文件请参考这里:http://bbs.7880.com/read-htm-tid-8876.html
按钮部分的制作按钮的效果制作方法很多,这个网站上的按钮也是目前制作FLSAH按钮非常普遍的方法之一,我们来先看看图片。
当我们播放源文件的时候,会发现当我们鼠标移动到按钮上面时三角形符号会向前移动,当鼠标移开的时候,三角形符号会回到原来的位置。这种效果如何实现的呢?下面我们就来学习一下,我们可以看到整个按钮部分都在一个图层上,有人会问了,这么多的效果在一个图层上就能实现?(呵呵,没错的,这是我们常用的一种手法,利用影片剪辑进行嵌套,这样的做的好处是整个原文件层次划分非常清晰,让人一眼就能知道整个文件的构成)。
我们会发现整个按钮层就是个影片剪辑,双击后里面如图所示
很舒服吧,一目了然,每个图层对应一部分东西,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,双击打开它,如图
呵呵
呵呵,这里面全部都是补间动画构成,没什么好说的,参照源文件。

