Flash在网络中的应用已经越来越广了，不仅仅用来制作网站宣传片，产品广告，还可以用来代替传统的Html网页成为网站中的一部分，使用Flash制作的页面不仅视觉效果突出，而且交互功能也非常的强，所以现在好多商业网站都使用Flash技术来制作，这次我们就来看看如何具体的制作一个纯粹的Flash页面。(本例源文件请点击这里下载)所有  热点网络 热点下载  热点网络学院  版权所有=


　　下面就来模拟一个具体的商业操作，给一家叫Ways2Web的公司制作其网站首页，最终效果如图1所示：


图1

　　从图1中可以大致看到这个页面的布局和效果。最左边是纵向移动的网站名称Ways2Web,页面的主题是中部和右部，其中中下部是网站的几个栏目，为了说明问题，这里只暂时设置了四个栏目，根据需要可以添加更多的内容，上面的线框就是具体到每个栏目中的具体内容了，这个线框是动态出现的，只有选择一个栏目后，会从页面右边滑入，然后展开，在展开的同时会显示具体的内容。基本上这就是整个页面的结构了，不过大家可以根据自己的构思和创意，丰富页面的内容。

　　此页面看上去比较简单，但是制作起来一点都不轻松，这也是商业站点制作的一个特点吧，下面就更我来一起制作这个网站页面。

　　1.首先启动Flash,新建一个大小为800px*600px(单位为象素)的影片，设置背景色为黑色。

　　2.将主场景中默认的图层Layer1更名为Background,从外部导入一副合适的图片，作为整个页面的背景，调整图片位置覆盖住整个舞台区域，最后将图片打散，在属性面板中调整其透明度为17%,如图2所示；


图2

　　最后在第250帧插入一个关键帧，这也是整个影片的播放长度。

　　3.在背景层上添加图层Car,我们可以巧妙的利用背景图中两栋大楼之间的街道，来布置几辆汽车从其间驶过的效果，一来丰富了页面内容，二来更体现了一定的真实性。新建一个影片剪辑Car,使用绘图工具绘制一个简单的小汽车，如图3所示即可：所有  热点网络 热点下载  热点网络学院  版权所有=


图3

　　这里为了使小汽车在页面中可以明显的看到，特意加了两个比较亮的车灯。接下来新建一个影片剪辑carmove,制作汽车运动的效果。添加两个图层Car1和Car2,将汽车car拖到car1的第1帧，在第180帧插入关键帧，将汽车向下移动一段距离，最后建立一个运动过渡效果，按照同样的方法在图层car2的第12帧插入关键帧，将汽车引入，如图4所示放在前一辆车的后面，然后在第212帧插入关键帧，也建立运动过度动画，这这样就完成了两辆汽车相继运动的效果。


图4

　　回到主场景中，在图层car的第90帧插入关键帧，然后将元件carmove拖进舞台,适当缩小其尺寸，调整其位置到图5所示的两栋大楼之间的街道的最远端。


图5

　　如果想多在页面上显示一些汽车，可以继续添加图层，然后延迟一段帧后在引入元件carmove,本实例我们引入了两次carmove,所以最后一共出现四辆汽车。

　　3.在图层car添加图层Plane,既然地面上有汽车了，如果天空上能飞过几架飞机就更好了，所以新建一个影片剪辑元件Plane,使用绘图工具绘制如图6所示的飞机外形；


图6

然后建立一段飞机由右向左飞的运动渐变动画，这里制作飞机飞行的动画需要一些小技巧。以为在主场景中的背景图中有一些高楼大厦，所以飞机在飞过这些高楼的时候有可能从楼的后面飞过，这时候飞机会暂时小时，然后才会从楼后飞出，所以在制作这断运动渐变的时候，需要在中间设置一些飞机透明度为的运动过程，具体在哪里设置需要慢慢调整，调整一点，就将元件放到主场景中的图层plane中观察一下，直到最终和实际完全符合。这个过程比较枯燥的，不过如果能细心调整，最后出来的效果也是非常不错的。

　　4.新增一个图层V2,使用直线工具在舞台的上部绘制两条交叉的直线，交叉点位于舞台左上方，直线颜色设置为灰色，此直线用来分离页面的主标题和具体内容，如图7所示：


图7

　　在第13帧插入关键帧，然后回到第1帧，设置此帧的两条直线的透明度为0,最后建立两关键帧之间的运动渐变效果，实现了直线从无到有的渐显过程。

　　5.在图层v2上新建图层v1,在第13帧插入关键帧，然后选择并复制图7中的垂直线，然后选择编辑/粘贴到当前位置命令，将复制出来的直线粘贴到原来直线的位置，琐定图层v1,以免对其误操作，然后在图层v2的第24帧插入关键帧，将直线向右水平移动一小段距离，如图8所示：


图8

　　回到第13帧，设置此帧的直线透明度为0,最后建立两关键帧之间的运动渐变效果。

　　6.在图层v2上添加图层h2,在第25帧插入关键帧，在舞台下部绘制一条水平线，如图9所示：


图9

　　然后在第36帧插入一个关键帧，将新画的水平线垂直向下移动一段距离，回到第25帧，设置直线透明度为0,最后建立两关键帧之间的运动渐变。

　　7.在图层h2上面添加图层h1,在第13帧插入关键帧，选择舞台最上面的水平线并复制，然后选择编辑/粘贴到当前位置，将这条水平线复制一个副本，位置和原水平线位置一样，然后在第24帧插入一个关键帧，将复制出的直线垂直移动到舞台上靠下的位置，如图10所示，并建立两关键帧之间的运动渐变效果。


图10

　　第5,6,7三步使用了许多网站贯用的作法，由线生线并伴随透明度变化的移动效果，这样可以保持页面的动画感，不至于使人感到页面停止。

　　8.接下来连续添加两个图层，分别为tittle和tittle_shadow,分别设置网页的标题和标题阴影。新建一个影片剪辑，使用文本工具在其中纵向输入网站标题，然后将文本转化为另一个影片剪辑，以方便在里面进行运动过渡的设置，如图11所示：


图11

　　然后在影片剪辑中制作一段文本自上向下运动的运动渐变效果即可。
回到主场景中，将制作好的网站标题拖到图层tittl的第一关键帧，并调整其位置到舞台靠左上方，如图12所示；


图12

　　9.调整图层tittle_shadow到图层tittle的下部，然后在第80帧插入关键帧，这里设置网站标题阴影效果。新建一个影片剪辑，同样使用文本工具输入纵向的网站标题，设置文字颜色为灰色，同样制作一段由上向下移动的运动效果，如图13所示：


图13

　　回到主场景中，将做好的标题阴影拖进舞台，调整其位置和原标题位置相同即可。

　　上面两步的作用是产生一个网站标题不断从页面左边滑过的效果，可以吸引人的注意力到此。

　　10.在图层tittle上面连续添加7个图层，分别命名为line1到line7,在每个图层的第33帧插入关键帧。首先回到图层line1,使用直线工具在上面两条水平线和左边两条垂直线之间的空间里绘制一条垂直线，调整其长度和这个包围区域的高度相同，调整其位置到此区域的最左边，如图14所示：


图14

　　按照相同的方法在每层都绘制一条垂直线，并逐渐向右调整位置，然后在第65帧分别插入关键帧。最后效果如图15所示：


图15

　　然后回到分别回到所有7个图层的第33关键帧，设置所有直线的透明度为0,分别建立关键帧之间的运动过渡效果，到此步为止，时间轴窗口如图16所示：


图16

　　上面几步都是设计页面整体效果和变化的，下面开始设计页面的菜单及其相应的变化效果。

　　11.在图层line7上面连续添加七个图层，分别为shoot1到shoot7，在这几个图层中，将制作一个过度效果，从而引出最后的网站菜单。

　　分别在图层shoo1,shoot2和shoot3的第68帧插入关键帧，在图层shoot4和shoot5的第67帧插入关键帧，在图层shoot6和shoot7的第66帧插入关键帧。

　　使用矩形工具在舞台中绘制一个小的正方形，填充为灰色，然后将其转化为影片剪辑，在舞台中再复制出一个副本，分别调整两个正方形的位置到图17所示的位置，也就是下面两条水平线之间的靠右的垂直线上：


图17所有  热点网络 热点下载  热点网络学院  版权所有=


　　分别在两图层的第77帧插入关键帧，向右移动两个正方形一段距离，如图18所示，最后建立两关键帧之间的运动渐变效果，


图18

　　按照相同的方法分别在剩余的图层中制作方形向右移动的效果，只不过越后面的方形其透明度值越低，这样就形成了图19所示的残影效果；


图19
时间轴设置如图20所示：


图20

　　12.在图层shoot7上添加四个图层，分别为shine1到shine4,用来制作菜单的光晕效果。在图层shine1的第79帧插入关键帧，使用椭圆工具在绘制图21所示的椭圆：


图21

　　然后分别在第85帧和第89帧插入关键帧，分别调整第79帧和第89帧两帧中椭圆的透明度为0,最后分别在三个关键帧之间建立两个运动渐变动画效果，这样就完成了一个简单的光晕效果。

　　按照相同的方法分别在图层shine2,shine3和shine4建立完全一样的效果，不同点是后面图层中效果的起始帧都是前一图层中效果的结束帧，并且椭园的位置依次向右移动，这些椭圆所在的位置也是后面网站菜单所在的位置，打开洋葱皮工具后各椭圆分布如图22所示：


图22

　　时间轴如图23所示：


图23

　　13.在图层shine4的上面新建四个图层，分别为button1到button4,用来设置网站的菜单。在图层button的第79帧插入关键帧，使用文本工具输入网站的一个栏目名称，并将其转换为元件，调整其位置到最左边的椭圆上，如图24所示：


图24

　　在第85帧也插入一个关键帧，回到第79帧，设置文本的透明度为0,最后设置两关键帧之间为运动渐变效果，形成一个菜单由无到有的效果，按照同样的方法，分别在图层button2,button3和button4制作其它三个菜单，只不过每一个菜单的起始帧都比前一个菜单的结束帧位置再延长4个帧，最后菜单的整体效果如图25所示：


图25

　　相应的时间轴窗口如图26所示：


图26

　　14.现在给每个菜单添加相应的Action动作脚本，使的点击菜单后跳到与其对应的栏目所在的帧。

　　给第1个菜单设置如下Action:

on (press) {

mctoplay = "130";

play();

}

　　给第2个菜单设置如下Action:

on (press) {

mctoplay = "160";

play();

}
给第3个菜单设置如下Action:

on (press) {

mctoplay = "190";

play();

}

　　给第4个菜单设置如下Action:

on (press) {

mctoplay = "220";

play();

}

　　15.在图层button4上面连续添加四个图层，分别为box1,box2,box3和box4,这四个图层分别设置四个网站栏目的内容。

　　回到图层box1,在第130帧插入关键帧，使用矩形工具在舞台右侧的外部绘制一个细长的矩形，设置为黑色轮廓和灰色的填充色，并将其转化为元件，如图27所示；


图27

　　分别在第137,145,152和160帧插入关键帧，来到第137帧，向左水平移动矩形到舞台上，如图28所示；


图28

　　来到第145帧，使用缩放工具在垂直方向调整矩形，增大矩形的高度。如图29所示：


图29

　　复制第137关键帧中的内容，来到第152帧并粘贴，使这两个关键帧中的内容完全相同，同样复制第130帧中的内容，在第160帧中粘贴，使这两个关键帧中的内容完全相同，最后分别建立5个关键帧之间的4段运动渐变效果，按照顺序就是：菜单框飞入舞台，菜单框打开显示栏目内容，菜单框合上，菜单框飞离舞台，这也是点击菜单按钮后将要发生的一系列事件。

　　然后复制图层box1中从第130到160之间的所有帧，分别在图层box2的第160关键帧，图层box3的第190关键帧和图层box4的第220关键帧上粘贴，使其它3个菜单也有相同的效果，此时时间轴如图30所示；


图30

　　16.最后建立一个图层AS,用来添加控制页面的Action动作脚本。

　　在第129帧添加Action: gotoAndPlay(mctoplay);

　　在第145帧添加Acton: stop();

　　在第160帧添加Acton: gotoAndPlay(mctoplay);

　　在第175帧添加Acton: stop();

　　在第190帧添加Acton: gotoAndPlay(mctoplay);

　　在第205帧添加Acton: stop();

　　在第220帧添加Acton: gotoAndPlay(mctoplay);

　　在第235帧添加Acton: stop();

　　在第250帧添加Acton: gotoAndPlay(mctoplay);

stop();所有  热点网络 热点下载  热点网络学院  版权所有=


　　这样，一个简单的商业性的Flash网页就制作完成了，制作过程中并没有应用一些很复杂的技术和效果，使用的全部是Flash中最基本的技巧和方法，这也是商业作品和其它娱乐类作品最主要的不同点，商业作品更注重的是作品的实用性和方便性，而其观赏性并不放在主要地位，只要把握好上面几点，就可以很轻松的完成商业作品的制作。