如何制作网页图片轮播

网页图片轮播以其信息量大、流畅性高、交互性强的特点，给浏览者留下了美好的感觉，其强势的视觉冲击力吸引着众多网民的眼球。因而，它被网页制作者青睐并且深爱有加，在网站开发中达到了惊人的使用率。

网页图片轮播又称网页幻灯片。它采用每隔一段时间自动播放下一幅图片的轮流展示办法。当其标签接收到一个Press或RollOver事件后，它会自动跳转或加载到相应图片，并以此为新的起始点，继续轮流播放。这种展示图片的方法和风格完全类似于电子演示文稿中的幻灯片自动播放的特点，因此又得名为网页幻灯片。

网页图片轮播的实现方法主要有两种：一是在记事本中使用通用的网页脚本编程语言编写，二是使用Flash软件制作。其中，基于服务器端脚本编写语言的PHP、ASP最为流行。作为浏览器端应用脚本，编程语言Javascript和网页动画制作工具Flash正在逐渐淡出网页开发工程师的视野，但Flash仍以其简单的工作流程、易于上手的脚本代码，赢得缺乏专业语言编程技能的普通网页制作者的喜爱。

下面结合Flash CS4动画制作工具，介绍一下网页图片轮播的制作过程和设计方法。

一、新建Flash文档

为了精确地设计出4幅完美的图片轮播动画，需要修改Flash文档的大小，导入处理好的4张图片作品。

1．设置动画大小。单击“修改”菜单，在快捷菜单中选择“文档”命令，弹出“文档属性”对话框，根据制作要求（4张图片作品的尺寸：400×210）设置尺寸大小为400像素（宽）×210像素（高），其他项保持默认即可。

2．导入图片素材。执行“文件”→“导入”→“导入到库”命令，随后弹出“导入到库”对话框，在该对话框中选择处理好的图片文件。接着，按Shift功能键，连续选择桌面上轮播文件夹中的4幅图片：tupian1.jpg、tupian2.jpg、tupian3.jpg、tupian4.jpg。

3．打开库面板。单击“窗口”菜单，在下拉菜单中选择“库”命令（或者按Ctrl + L快捷键），打开库面板，即能看见刚导入的4幅图片。

二、创建影片剪辑

在网页图片轮播动画中，精妙绝伦的过渡特效让人目不暇接。利用Flash软件，我们可以在影片剪辑中利用Alpha等渐变技术实现这一动画效果。

1．单击“插入”菜单，选择“新建元件”命令，弹出“创建新元件”对话框，在“类型”文本列表框中选择“影片剪辑”项，名称“元件1”保持不变，单击“确定”按钮，进入“元件1”的编辑界面。

2．将库中的tupian1.jpg拖入“元件1”第一帧的编辑区，执行“窗口”→“对齐”命令（或按Ctrl+K快捷键），弹出对齐面板，设置相对于舞台“水平中齐”和“垂直居中分布”。并在tupian1.jpg图片上右键单击，转化元件类型为影片剪辑，名称为“元件2”，在第二十帧按F6插入关键帧。

3．回到第一帧，选中图片后打开属性面板，在“色彩效果”栏中设置样式为Alpha且其值为0，回到第二十帧，设置图片tupian1.jpg的Alpha的值为100%。在第一帧到第二十帧中间右键单击，在快捷菜单中选择“创建传统补间”命令。

4．单击时间轴面板上的“新建图层”按钮，为元件1添加一个图层，名称默认为“图层2”，并在图层2的第二十帧上右键单击，在弹出的快捷菜单中，单击“插入空白键”命令。执行“窗口”→“动作”命令，在“动作-帧”面板中，输入“_root.gotoAndPlay(2)”（该动作语句的功能是播放完该影片剪辑后，随即跳转到主场景第二帧并继续播放）后关闭该面板。

经过以上4个步骤，第一个影片剪辑“元件1”就创建好了，里面储存了第一张图片和相应的渐变动画效果。按照同样的方法，将剩下的3张图片继续创建成3个渐变影片剪辑，并分别在每个影片剪辑第二个图层的最后一帧分别添加帧动作：“_root.gotoAndPlay(3)”、“_root.gotoAndPlay(4)”、“_root.gotoAndPlay(1)”。这样，在库面板中，元件1、元件3、元件5、元件7就是我们需要的4幅渐变影片剪辑。

三、合成轮播动画

如果想实现元件1、元件3、元件5、元件7等4幅渐变剪辑的连续播放，那么就需要将4个元件拖入同一主场景中。这时，需要我们单击“场景1”按钮，回到主场景中。在第一帧的主场景中，添加元件1到舞台，按下Ctrl+K快捷键，弹出对齐面板，设置该元件相对于舞台“水平中齐”和“垂直中齐”。按照同样的方法，在时间轴面板第二帧、第三帧、第四帧，依次插入3个关键帧，并将元件3、元件5、元件7分别插入相应关键帧的舞台中央。

四、添加轮播标签

为了实现4幅图片轮播动画的交互功能，需要为它添加4个标签。在Flash中可以用添加按钮的办法实现轮播标签。

1．单击“插入”菜单，在下拉列表中选择“新建元件”命令，弹出“创建新元件”对话框，设置类型为按钮，名称保持默认“元件9”后，单击“确定”按钮。

2．在元件9弹起帧的编辑区中，绘制一个没有线框、颜色为#CCCCCC的灰色正方块，设置颜色的Alpha为40%半透明，在指针经过帧中插入关键帧，并修改编辑区中的正方块颜色为#FF9900；在元件9时间轴面板继续新建一图层，输入颜色为#FFFFFF标签文本1，调整其大小与位置，使之处于标签正中央。按照同样的方法继续添加按钮元件10、元件11、元件12。

3．单击场景1回到主场景。在时间轴面板中单击“新建图层”按钮，添加图层2。选定图层2的第一帧，将元件9、元件10、元件11、元件12依次拖入舞台并修改实例大小为20×20,并修改4个按钮实例的X、Y坐标位置，将其适当调整，使之处于同一条直线上并且保持间距相同。

4．选定第一个按钮实例，执行“窗口”→“动作”，打开“动作-按钮”面板，输入“on (rollOver) {gotoAndStop(1)}”。按照同样的方法，依次为剩余三个按钮实例分别添加如下动作脚本：“on (rollOver) {gotoAndStop(2)}、on (rollOver) {gotoAndStop(3)、on (rollOver) {gotoAndStop(4)”。

至此，按钮标签制作完成了。可以按下快捷键Ctrl+Enter导出SWF影片，在测试影片界面中查看制作效果。经过测试发现，按钮响应正常，但动画不能实现影片剪辑的衔接播放，主时间轴只会播放影片剪辑中的第一帧。原因是主场景中的播放级别比影片剪辑高，解决的办法就是在主场景的每一关键帧上添加一条控制语句“stop（）”。

当然，如果你想用充分的时间播放每个影片剪辑，即在每个影片剪辑上停留一段固定的时间，那么你可以将每个影片剪辑帧动作的AS语句“_root.gotoAndPlay（）”替换成“stop（）”，并在主时间轴面板帧上采用限制时间的办法解决。例如：进入主场景的每一个帧的动作面板中，打开专家模式，在“stop（）”语句后添加代码“setInterval(showtime，100)； t1 = getTimer（）；function showtime（）{t2=getTimer（）；a=t2-t1;if(a>3000){_root.play（）}}”。第一个语句意思是Flash每隔100毫秒调用一次showtime函数；第二个语句是在Flash动画启动后，播放头到达该帧时getTimer（）获取一次系统时间；第三个语句为函数showtime（）再次获取一个系统时间，并测算当前的系统时间差，如果超过3000毫秒就立即退出影片剪辑，回到主场景时间轴继续播放。否则，将继续停留在该帧（本实例中，每个影片剪辑需要1.6S，所以Flash播放头会耗时1.4S停留在影片剪辑的第二十帧）。

根据发现的问题，还可以进一步修改Flash影片的瑕疵，直到达到策划的效果要求和设计目标。例如：在主场景中的时间轴面板上添加新的图层，并分别在4个关键帧的舞台中再次添加一个鼠标经过的效果按钮，注意与下层同帧按钮的尺寸、大小完全相同，以显示该帧处于播放状态的效果样式。

五、结束语

利用Flash制作图片轮播动画的过程较为简单，比较适合普通用户。如果你是一位网站管理员，需要经常更新轮播动画内容，并且又不擅长用网页脚本语言编写，那么下载别人允许共享的网页脚本代码也不失为一种好办法，仅需根据自己图片作品的要求修改他人的网页脚本。对共享代码中的网页、图片标题“Title”、引用地址“Imgsrc”、“Alt”属性等内容略加修改，替换上自己的图片作品和文本说明，然后将共享网页代码Head、Body中的内容分别添加到自己网页中的相应位置，同样能够获得精美绝伦的网页图片轮播效果。