行业应用实例

第14章行业应用实例实例1网站导航动画实例2片头制作实例3个人相册实例4产品演示习题十四1．实例分析本例将制作网站导航动画，如图14.1.1所示。在制作过程中，将主要学习直接复制元件的方法。实例1网站导航动画图14.1.1效果图2．操作步骤（1）选择“文件”→“新建”命令，创建一个新的动画文件。（2）按“Ctrl+J”键，弹出“文档属性”对话框，设置“尺寸”为“550px×400px”，“背景颜色”为“黑色”，单击“确定”按钮。（3）更改“图层1”的名称为“线条”，如图14.1.2所示。图14.1.2更改层名（4）选择工具箱中的直线工具，单击属性面板中的“笔触颜色”按钮，在弹出的颜色列表中选择“彩虹渐变色”（见图14.1.3），然后在舞台上绘制两条水平直线，如图14.1.4所示。图14.1.3设置直线的颜色图14.1.4绘制水平直线（5）选中“线条”层的第60帧，按“F5”键插入帧。（6）单击时间轴面板中的“插入图层”按钮，插入一个名为“网格”的层。（7）更改笔触颜色为“#99FF00”，在“网格”层的第1帧中绘制一条直线，如图14.1.5所示。图14.1.5绘制直线（8）选中该直线，按“F8”键，弹出“转换为元件”对话框，在“名称”文本框中输入“网格”，在“类型”选项区中选中“图形”单选按钮，如图14.1.6所示。图14.1.6“转换为元件”对话框（9）单击“确定”按钮关闭对话框。此时，舞台中的直线将变为“网格”元件的一个实例，如图14.1.7所示。图14.1.7转换为元件后的直线（10）选中该实例，双击鼠标左键，进入其编辑窗口。此时，舞台中的其他对象将处于不可编辑状态，并且以淡色方式显示。（11）在舞台中绘制多条水平和竖直直线，以形成网格，如图14.1.8所示。图14.1.8绘制网格（12）单击“场景1”图标，返回到主场景，如图14.1.9所示。（13）选中“网格”实例，在属性面板的“颜色”下拉列表中选择“Alpha”选项，在“Alpha数量”文本框中输入“20%”，更改其透明度，如图14.1.10所示。（14）选中第60帧，按“F6”键插入关键帧，然后移动网格到如图14.1.11所示的位置。（15）选中“网格”层的第1帧，在属性面板的“补间”下拉列表中选择“动画”选项，创建一段运动补间动画，如图14.1.12所示。（16）单击时间轴面板中的“插入图层”按钮，插入一个名为“波形1”的层。图14.1.9返回到主场景图14.1.10更改“网格”实例的透明度图14.1.11右移网格图14.1.12创建运动补间动画（17）在舞台中绘制如图14.1.13所示的波形。（18）选中第2～14帧，按“F6”键插入关键帧，如图14.1.14所示。图14.1.13绘制波形图14.1.14插入关键帧（19）分别选中第1～13帧，将其中的部分波形删除，删除后的效果如图14.1.15所示。第1帧第2帧第3帧第4帧第5帧第6帧第7帧第8帧第9帧第10帧第11帧第12帧第13帧图14.1.15波形在第1～13帧中的效果（20）单击时间轴面板中的“插入图层”按钮，插入一个名为“波形2”的层。（21）选中第39帧，按“F6”键插入关键帧，然后在其中绘制另一段波形，如图14.1.16所示。（22）选中第40～56帧，按“F6”键插入关键帧，如图14.1.17所示。图14.1.16绘制另一段波形图14.1.17插入关键帧（23）分别选中第39～55帧，将其中的部分波形删除，删除后的效果如图14.1.18所示。第39帧第40帧第41帧第42帧第43帧第44帧第45帧第46帧第47帧第48帧第49帧第50帧第51帧第52帧图14.1.18波形在第39～55帧中的效果第53帧第54帧第55帧图14.1.18波形在第39～55帧中的效果（续）（24）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“w”，在“类型”选项区中选中“图形”单选按钮，如图14.1.19所示。图14.1.19“创建新元件”对话框（25）单击“确定”按钮，进入该元件的编辑窗口。选择工具箱中的文本工具，在属性面板中设置字体为“TimesNewRoman”，字体大小为“25”，文本颜色为“#99FF00”，然后在舞台的中心位置输入“w”，如图14.1.20所示。图14.1.20输入文本（26）选择“窗口”→“库”命令，打开库面板，选中“w”元件，单击鼠标右键，在弹出的快捷菜单中选择“直接复制”命令，弹出“直接复制元件”对话框，在“名称”文本框中输入“e”，如图14.1.21所示。图14.1.21“直接复制元件”对话框（27）单击“确定”按钮，关闭对话框，然后在库面板中双击“e”元件，进入其编辑窗口（见图14.1.22），更改字符“w”为“e”，如图14.1.23所示。图14.1.22“e”元件的编辑窗口图14.1.23更改字符（28）重复第（26）和（27）步的操作，复制“l”、“c”、“o”、“m”和“t”元件，并依次更改其中的字符为l，c，o，m和t。（29）单击时间轴面板中的“插入图层”按钮，插入一个名为“w”的层。（30）选中第15帧，按“F6”键插入关键帧，并从库中拖动“w”元件到如图14.1.24所示的位置。（31）选中第45帧，按“F6”键插入关键帧，然后选中第15帧中的“w”，更改其透明度为“20%”，如图14.1.25所示。图14.1.24拖入“w”元件图14.1.25更改“w”的透明度（32）选中“w”层的第15帧，在属性面板的“补间”下拉列表中选择“动画”选项，创建一段运动补间动画，如图14.1.26所示。图14.1.26创建运动补间动画（33）单击时间轴面板中的“插入图层”按钮8次，插入8个图层，并为它们分别命名，如图14.1.27所示。图14.1.27插入8个新层（34）在“e”层的第18帧、“l”层的第21帧、“c”层的第24帧、“o”层的第27帧等帧中，依次插入关键帧，如图14.1.28所示。图14.1.28插入关键帧（35）从库中拖动相应元件到“e”～“o”层，并调整它们的位置，如图14.1.29所示。（36）选中“e”～“o”层的第45帧，按“F6”键插入关键帧。（37）选中“e”层第18帧中的“e”实例，在属性面板的“颜色”下拉列表中选择“Alpha”选项，在“Alpha数量”框中输入“20%”，更改其透明度，如图14.1.30所示。图14.1.29拖入并排列相应元件图14.1.30更改“e”实例的透明度（38）重复第（37）步的操作，依次更改“l”层第21帧、“c”层第24帧、“o”层第27帧等帧中实例的透明度。（39）依次选中“e”层的第18帧、“l”层的第21帧、“c”层的第24帧、“o”层的第27帧……，在属性面板的“补间”下拉列表中选择“动画”选项，创建8段运动补间动画，如图14.1.31所示。（40）单击时间轴面板中的“插入图层”按钮，插入一个名为“声音”的层。（41）选择“文件”→“导入”→“导入到舞台”命令，弹出“导入”对话框，导入声音文件“清空回收站时奏幻想空间.WAV”。图14.1.31创建运动补间动画（42）选中“声音”层的第1帧，在属性面板的“声音”下拉列表中选择导入的声音文件，将其添加到动画中，此时，声音在时间轴中将以波形显示，如图14.1.32所示。图14.1.32将声音添加到动画中（43）更改声音的重复次数为“2”，此时，时间轴中将相应出现两段相同形状的波形，如图14.1.33所示。图14.1.33使声音重复播放两次（44）选择“窗口”→“其它面板”→“场景”命令，打开如图14.1.34所示的场景面板，单击“添加场景”按钮，添加“场景2”，此时，在Flash8的工作界面中将显示场景2的编辑窗口。图14.1.34场景面板（45）更改场景2“图层1”的名称为“边框”，然后在其中绘制如图14.1.35所示的图形。（46）选中所绘图形，按“F8”键，弹出“转换为元件”对话框，在“名称”文本框中输入“背景网格”，在“类型”选项区中选中“图形”单选按钮，单击“确定”按钮，关闭对话框。（47）更改“背景网格”实例的透明度为“60%”，效果如图14.1.36所示。图14.1.35绘制图形图14.1.36更改“背景网格”实例的透明度（48）选中“边框”层的第96帧，按“F5”键插入帧，然后单击时间轴中的“插入图层”按钮，插入一个名为“按钮”的层。（49）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“自我简介”，在“类型”选项区中选中“按钮”单选按钮，如图14.1.37所示。图14.1.37“创建新元件”对话框（50）单击“确定”按钮，进入元件的编辑窗口，选择工具箱中的矩形工具，在属性面板中设置笔触颜色为“#006600”，填充颜色为“#996600”，在舞台的中心绘制一个矩形，如图14.1.38所示。（51）选中“指针经过”帧，按“F6”键插入关键帧，然后更改该帧中对象的填充颜色为“#FF6633”，并且选中“按下”帧，按“F5”键插入帧。（52）单击时间轴面板中的“插入图层”按钮，插入“图层2”，然后选择工具箱中的文本工具，在属性面板中设置字体为“幼圆”，字体大小为“21”，文本颜色为“#CCFF00”，在舞台的中心位置输入“自我简介”，如图14.1.39所示。图14.1.38绘制矩形图14.1.39输入文本（53）单击时间轴面板中的“插入图层”按钮，插入“图层3”，然后选择“文件”→“导入”→“导入到舞台”命令，弹出“导入”对话框，导入声音文件“TRADEOK.WAV”。（54）选中“图层3”的“按下”帧，按“F6”键插入关键帧，然后在属性面板的“声音”下拉列表中选择导入的声音文件，将其添加到按钮中，如图14.1.40所示。图14.1.40将声音添加到按钮中（55）在库面板中选择“自我简介”元件，单击鼠标右键，在弹出的快捷菜单中选择“直接复制”命令，弹出“直接复制元件”对话框，在“名称”文本框中输入“梦幻收藏”，如图14.1.41所示。图14.1.41“直接复制元件”对话框（56）单击“确定”按钮，关闭对话框，然后在库面板中双击“梦幻收藏”元件，进入其编辑窗口（见图14.1.42），更改文本为“梦幻收藏”，如图14.1.43所示。图14.1.42“梦幻收藏”元件的编辑窗口图14.1.43更改文本（57）重复第（55）和（56）步的操作，复制“作品展区”、“生活点滴”、“娱乐天地”和“友情链接”元件，并对其中的文本进行相应更改。（58）单击“场景2”图标，返回到场景2的编辑窗口。（59）从库面板中拖动“自我简介”、“梦幻收藏”、“作品展区”、“生活点滴”、“娱乐天地”和“友情链接”元件到如图14.1.44所示的位置。（60）选择“窗口”→“动作”命令，打开动作面板，如图14.1.45所示。图14.1.44拖入按钮元件图14.1.45动作面板（61）选中“自我简介”实例，在动作面板中输入以下代码：on(release){gotoAndPlay(2);}（62）重复第（61）步的操作，为“梦幻收藏”、“作品展区”、“生活点滴”、“娱乐天地”和“友情链接”实例添加代码，并将代码中的2依次更改为18，34，50，66和82。（63）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“图1”，在“类型”选项区中选中“影片剪辑”单选按钮，如图14.1.46所示。图14.1.46“创建新元件”对话框（64）单击“确定”按钮，进入其编辑窗口，选择“文件”→“导入”→“导入到舞台”命令，弹出“导入”对话框，导入动画文件“50427.gif”，如图14.1.47所示。（65）重复第（63）和（64）步的操作，创建“图2”元件，并在其中导入动画文件“51157.gif”，如图14.1.48所示。图14.1.47“图1”元件的内容图14.1.48“图2”元件的内容（66）同样创建“图3”～“图6”元件，并分别导入动画文件“50978.gif”、“51266.gif”、“51