7.8.2导航条制作

7.8.2　导航条制作

7.8.2.1　实例简介

这是一个导航条的实例，效果如一卷画卷，单击左下角的文字按钮可左右移动，以显示出各主要景点的图片和文字说明，可以让游客非常方便地查询到旅游景点的简介，效果如图7-73所示。

图7-73　导航条的效果

7.8.2.2　知识提要

1．利用影片剪辑的EnterFrame事件，接收按钮的信号的动画制作技巧。

2．在影片中导入、使用图片方法。

3．使用隐形按钮。

7.8.2.3　制作步骤

（1）创建影片文档

新建文件，场景大小为600×200，帧频24，背景色为#0xff9933。

（2）创建元件

本实例主要用到三个元件：隐形按钮、menu、导航菜单。

步骤一，执行“插入/新建元件”命令，新建一个按钮元件，名称为“but”，如图7-74所示。

图7-74　创建“but”元件

在“but”元件的第4帧插入一个空白关键帧，用“矩形工具”插入一个矩形，如图7-75所示。

步骤二，制作导航菜单

执行“插入/新建元件”命令，新建一个图形元件，名称为“导航菜单”。

在时间轴的第1帧，插入一个静态文本框，输入导航栏目的文字“宫廷区　长廊　佛香阁昆明湖苏州街”。

步骤三，menu电影元件，这是一个用来放置前面导航菜单中对应栏目的图片和文字说明的MC。

图7-75　隐形按钮的制作

执行“插入/新建元件”命令，新建一个电影剪辑元件，名称为“menu”。

首先需要导入相关景点的图片。执行“文件/导入/导入到库”命令，在弹出的对话框中选择相关的图片所在地址，并选取对应的图片。然后单击“打开”按钮，把图片导入到“库”中，如图7-76所示。

图7-76　导入图片

从“库”中把图片拖放到已画好的蓝色矩形条上，注意矩形条的坐标为（600，−3），5张图片的坐标分别为（600，1），（1200，1），（1800，1），（2400，1），（3000，1）。这样，待到单击按钮时，图片就可以滑动到预先设定好的位置。接着执行“文字工具”在图片的旁边输入相应的文字说明。“menu”完成的效果如图7-77所示。

图7-77　“menu”电影剪辑的部分效果

（3）设置场景

步骤一，回到主场景中，并创建3个图层，分别命名为“MC”“but”和“导航菜单”在场景的“导航菜单”图层的第1帧中，从库里拖出“导航菜单”的图形元件，在“but”图层的第1帧中插入“but”的按钮元件，并且使按钮覆盖在“导航菜单”的图形元件上，一共插入5个“but”按钮元件，每一个对应“导航菜单”上一个栏目，并分别给按钮实例命名为“but1”“but2”“but3”“but4”“but5”。

步骤二，在场景的“MC”图层的第1帧中，从库里拖出“menu”的影片剪辑元件，在属性栏注册名为“menu”，放置在场景中适当的位置。

（4）定义动作脚本

步骤一，在“but1”按钮实例上添加脚本：

on（release）{

root.menu.Xpos=−600　　//在影片menu上设置变量Xpos为−600，以下类同。

}

在“but2”按钮添加脚本：

on（release）{

_root.menu.Xpos=−1200

}

在“but3”按钮添加脚本：

on（release）{

_root.menu.Xpos=−1800

}

在“but4”按钮添加脚本：

on（release）{

_root.menu.Xpos=−2400

}

在“but5”按钮添加脚本：

on（release）{

_root.menu.Xpos=−3000

}

步骤二，在“menu”的影片剪辑上添加脚本：

onClipEvent（load）{

Xpos=−600；设置影片调入时变量Xpos的初始值；

}

onClipEvent（enterFrame）{　　//调用enterFrame事件；

Xsquare=_root.menu._x；　　//把影片menu的横坐标用变量Xsquare来表示；

Xdiff=Xpos-Xsquare；　　//计算影片调入时设置的，或者从按钮上得到的变量Xpos与影片menu的横坐标的差；

Xmove=Xdiff/10；//取差的1/10作为影片移动的距离（可看作移动速度）

_root.menu._x=Xsquare+Xmove；//影片的横坐标加上移动的距离，作为下一次影片的横坐标

updateAfterEvent（enterFrame）；//将更新显示影片的新位置的图形.

}

通过本节的学习，读者不仅要学会制作各种实例，更重要的是要不断地体会，学会举一反三，达到学以致用的目的。