FLASH CS4 制作网页导航条

FLASH CS4 制作网页导航条
网页动画导航条通常是由各种带有动画效果的按钮组成的。

设计动画导航条时，应首先为动画导航条添加背景，然后再为导航条制作各种按钮，为按钮添加各种动画效果。

例如，使用Flash CS4的动画预设为按钮添加飞入效果等，如图8-36所示。

图8-36 网页导航条
设计过程：
（1）新建fla文件，执行【修改】|【文档】命令，设置【尺寸】为800px×300px。

然后执行【文件】|【导入】命令，导入素材图像，并作为导航条的背景如图8-37所示。

图8-37 导入背景图像
（2）新建triangle图层，然后新建mov 元件，在元件中绘制一个等边三角形，如图8-38所示。

图8-38 绘制等边三角形
（3）新建ball元件，将mov元件从【库】中面板中拖动到ball元件的中心点，然后执行【窗口】|【变形】命令，设置元件的【缩放宽度】和【缩放高度】均为4%，如图8-3 9所示。

图8-39 缩放元件
（4）在【时间轴】面板中，将第100帧转换为关键帧。

右击第99帧执行【创建传统补间】命令，制作三角形向上旋转飞出的动画，并设置【色彩效果】中的Alpha样式的值从40%到0%（第1帧为40%），如图8-40所示。

图8-40 制作三角形飞出动画
（5）在ball元件中，新建一个图层，将该图层第100帧转换为关键帧。

单击该帧，并按F9快捷键打开【动作】面板，输入“st op();”代码。

（6）在【库】面板中，右击ball元件，执行【属性】命令。

在弹出的【元件属性】对话框中，启用【为ActionScript导出】复选框，如图8-41所示。

图8-41 为ActionScript导出
（7）新建triangle元件，将ball元件添加到triangle元件的原点。

然后使用ActionS cript3.0代码调用ball元件实现三角形的放射。

代码如下所示：
var i:int=1;
//声明计数器变量i
addEventListener(Event.ENTER_FRAME,shoot);
//为影片添加帧的播放事件函数shoot
function shoot(event:Event){
//自定义shoot()函数，其参数为事件
this["ball"+i] = new Ball();
//创建ball元件的动态实例
this["ball"+i].rotation=Math.random()*360;
//定义ball的动态实例随机旋转var num:int = Math.random()*10+10; //定义ball的动态实例随机缩放比率this["ball"+i].scaleX=num;
//定义ball的动态实例水平缩放比率this["ball"+i].scaleY=num;
//定义ball的动态实例垂直缩放比率
this["ball"+i].x=400;
//定义实例出现的横坐标
this["ball"+i].y=125;
//定义实例出现的纵坐标
addChild(this["ball"+i]);
//将实例显示于影片中
i++;
计数
if(i>100){
//判断，当计数器的数字大于100时（影片中出现ball的动态实例超过100个时）
removeChild(this["ball"+(i-99)]);
//删除最早出现的实例
}
}
（8）在影片中，新建triangle图层。

然后将triangle元件添加到影片中，即可完成三角形放射的背景，如图8-42所示。

图8-42 将元件添加到影片中
（9）执行【文件】|【导入】|【导入到库】命令，导入5个素材图标。

新建whirl01影片剪辑元件，将index图标拖动到元件中，如图8-43所示。

图8-43 导入index图标
（10）新建hover01影片剪辑元件，将w
hirl01元件拖动到hover01影片剪辑元件中。

然后，在图层第50帧按F5快捷键插入帧，如图8-44所示。

图8-44 插入帧
（11）右击第50帧，执行【创建补间动画】命令，然后再次右击第50帧，执行【3 D补间】命令，元件上方将出现3D旋转的坐标指针，如图8-45所示。

图8-45 创建3D补间
（12）右击第50帧，执行【插入关键帧】|【旋转】命令，创建旋转补间动画，如图8-46所示。

图8-46 创建旋转补间动画
（13）单击第25帧，用同样的方式创建旋转补间动画，并执行【窗口】|【变形】命令，在【变形面板】中设置元件【3D旋转】的Y值为180，如图8-47所示。

图8-47 设置元件3D旋转
（14）用相同的方法设置第50帧处的元件【3D旋转】的Y值为180，如图8-48所示。

图8-48 设置元件3D旋转
（15）在元件中创建新的图层，然后在图层第50帧处按F6快捷键插入关键帧，添加“stop();”代码。

（16）新建btnindex按钮元件，在元件的【弹起】帧处插入元件whirl01
，并输入文
本“首页”，为文本设置“发光”滤镜，如图8-49所示。

图8-49 设置文本发光滤镜
（17）在按钮的【指针…】帧处，按F7快捷键，插入空白关键帧，并将制作好的ho ver01元件插入到影片的相应位置。

输入“首页”文本，并设置“投影”滤镜和“发光”滤镜，如图8-50所示。

图8-50 制作鼠标滑过时的动画
（18）在按钮的【按下】帧处，按F7快捷键，插入空白关键帧。

右击【弹起】帧执行【复制帧】命令。

然后右击【按下】帧执行【粘贴帧】命令，如图8-51所示。

图8-51 粘贴帧
（19）选择按钮元件的【点击】帧，按F5快捷键插入帧，即可完成btnindex按钮元件，如图8-52所示。

图8-52 完成按钮元件
（20）新建btn01影片剪辑元件，执行【窗口】|【动画预设】命令，在【动画预设】面板中选中【从右边飞入】。

然后单击【应用】按钮，将预设动画应用到元件上，如图8-53所示。

图8-53 应用动画预设
（21）选中第24帧处的关键帧，单击【选择】工具，并调整运动路径中的控制柄，使用元件飞入的距离以适应影片播放宽度，如图8-54所示。

图8-54 修改运动路径
（22）在元件中新建图层，并在图层第24帧处按F6快捷键将该帧转换为关键帧。

在关键帧上按F9快捷键，打开【动作】面板输入“stop();”代码。

（23）用同样的方法，制作其他5个按钮，并将按钮依次排放到影片中，即可完成导航条的制作。