FlashCS5动画设计项目-学习情境四网页制作技术报告.ppt

图4-59 导航条位置 4．导入导航条 （1）在场景1编辑状态下新建图层，命名为“导航”。 （2）按“Ctrl+F8”组合建新建一个影片剪辑元件，名称为“导航剪辑”，在“源文件”对话框中选择“情境4|导入案例2|网站导航条”，再在“选择元件”对话框中选择影片剪辑元件“导航剪辑”。 （3）将“导航剪辑”元件拖入场景中的“导航”图层，按锁定元件的长宽比例，将宽度调整为600，坐标（480，30），如图4-59所示。 （4）进入导航条内部，将所有图层的最后一帧拖拽至第40帧。此时，“导航剪辑”的时间轴如图4-60所示。 图 4-60 “导航剪辑”元件内部时间轴 图4-61 页面背景矩形 5．制作首页及其动画 （1）在主场景时间轴上新建图层，命名为“页面”。 （2）在该图层上绘制矩形，宽600像素、高500像素，“笔触颜色”为（#000099）、样式为“极细线”，“填充颜色”为线性渐变，渐变色的四个“颜色指针”分别为（#54D3FF）、（#BFEEFF）、（#83DFFF）和（#4DD1FF）。使用“渐变变形工具”，将渐变色调整为水平方向，如图4-61所示，渐变色的“颜色”面板如图4-62所示。制作完成后，选中矩形，按“Ctrl+G”组合键将其转换为组合。 图4-62 矩形“填充颜色”色 图4-63 页面标题背景 （3）将上述矩形转换为图形元件，命名为“首页”，“对齐”选择为左上角，将矩形所在图层命名为“背景”。在该图层内，再绘制一个无边框矩形，宽598像素，高80像素，坐标为（1，1），“填充颜色”为线性渐变，渐变的四个“颜色指针”分别为（#4DD1FF），（#B4ECFF），（#B4ECFF），（#4DD1FF），使用渐变变形工具，将渐变色调整为水平方向，制作成页面标题背景，效果如图4-63所示，渐变色的“颜色”面板如图4-64所示。 图4-64 标题背景“填充颜色”色 图4-65 首页文字 （4）新建一个图层，命名为“文字”，在该图层中输入首页文字，如图4-65所示。 （5）退出图形元件“首页”的编辑状态，在图形元件“首页”上单击右键，选择“转换为元件”,将其转换为影片剪辑元件，对齐选择左上角，名称为“首页剪辑”。 （6）进入“首页剪辑”元件内部，将元件“首页”所在图层命名为“内容”，并在该图层的第24帧处按“F6”键插入关键帧。返回第1帧，将第1帧上的元件“首页”横坐标改为650，使之处于舞台之外。在该图层的任意帧处单击右键，选择“创建传统补间”。 （7）新建一个图层，命名为“代码”，在第24帧处按“F7”键插入空白关键帧，在该帧处写入代码“stop();”。“首页剪辑”元件的时间轴如图4-66所示。 图4-66 “首页剪辑”的时间轴 6．制作其他页面 （1）按“Ctrl+L”组合键进入元件库，在图形元件“首页”上单击右键选择“直接复制…”，名称改为“作品”。再将“首页剪辑”元件直接复制为“作品剪辑”。 （2）进入“作品”元件内部，将文字图层的内容替换为“我的作品”，新建一个图层，命名为“内容”，打开“学习情境4|效果|页面动画.fla”，将图形元件“页面”元件改名为“作品内容”复制到本例的元件库中，并将这个元件拖入“内容”图层，位置如图4-67所示。 图4-67 作品页面 （3）进入“作品剪辑”元件内部，在“首页”实例上单击右键，选择“交换元件”后，将其替换为“作品”元件。 （4）重复以上三个步骤制作出“心得剪辑”、 “足迹剪辑”和“联系剪辑”三个影片剪辑。其中，“心得”和“足迹”两个图形元件内容请自行设计。此时，元件库内如图4-68所示。 图4-68 元件库内容 图4-70 主场景时间轴 （3）新建图层，命名为“代码”，在5帧上分别按“F7”键插入空白关键帧，在每一帧上都写入代码“stop();”。此时，主场景时间轴如图4-70所示。 图4-71 “我的首页”按钮上的代码 8．为导航按钮添加代码 （1）进入影片剪辑“导航剪辑”内部，选中“我的首页”后方的按钮，在“动作面板”是 “动作-按钮”的状态下输入代码：“on(press){_root.gotoAndStop(“shouye”);}”，代码 格式如图4-71所示。 （2）依次将这段代码复制到后边的4个按钮上，并将“shouye”替换为相应页面的标签。 9．发布网站 （1）选择主菜单“文件|发布设置”，勾选“Flash(.swf) ”和“HTML包装器”，单击发布。 （2）打开“个人主页.html”查看网站效果。网站首页如图4-44所示。 1. 将图形元件转换为影片剪辑元件时，是在图形元件外又罩了一层影片