搜索
第8章经典实例：制作按钮●8.1要点分析●8.2设计按钮元件●8.2.1直接创建按钮元件●8.2.2使用库中的元件●8.2.3编辑元件●8.2.4使用文件夹管理元件●8.2.5排序元件●8.2.6修改元件属性●8.2.7删除元件●8.3使用元件制作闪烁的星星●8.2设计按钮元件在Flash中，每个元件都有唯一的时间轴和舞台以及若干个图层。它可以独立于主动画进行播放。下面以设计按钮元件为例，介绍元件的创建方法，一起来试试吧。直接创建元件即先利用“创建新元件”命令创建一个空元件，然后在元件编辑模式下制作元件。直接创建元件的具体操作步骤如下。步骤1在Flash窗口中新建“按钮.fla”文件，然后在菜单栏中选择“插入”|“新建元件”命令，如图8-1所示。步骤2弹出“创建新元件”对话框，在“名称”文本框中输入元件名称，然后设置类型为“按钮”，再单击“确定”按钮，如图8-2所示。步骤3返回Flash窗口，即可发现此时已进入按钮元件的编辑窗口，在“时间轴”面板中单击“弹起”帧，然后在工具箱中单击“椭圆工具”图标，接着在“属性”面板中设置笔触颜色为“无”，并单击“填充颜色”图标，在弹出的菜单中单击“线性填充”图标，如图8-3所示。步骤4在元件编辑窗口中按住鼠标左键并拖动鼠标，绘制渐变色椭圆图形，如图8-4所示。●8.2.1直接创建按钮元件●8.1设计按钮元件图8-1选择“新建元件”命令图8-2“创建新元件”对话框图8-3设置椭圆工具属性图8-4绘制渐变色椭圆图形步骤5在工具箱中单击“文本工具”图标，然后在元件编辑窗口中插入文本框，并输入字符“Play”，如图8-5所示。步骤6单击插入的文本框，然后在“属性”面板中的“系列”下拉列表中选择一种字体样式，如图8-6所示。图8-6设置文本的字体样式图8-5插入文本步骤7继续设置文本的字体颜色为“红色”，大小为28，如图8-7所示。步骤8使用选择工具将文本框移动到椭圆图形上，接着使用任意变形工具调整椭圆图形的大小，再选中椭圆图形和文本框，按Ctrl+G组合键组合图形，如图8-8所示。图8-7设置文本颜色和大小图8-8组合文本框和椭圆图形步骤9在“时间轴”面板中右击“指针经过”帧，在弹出的快捷菜单中选择“插入关键帧”命令，这样即可将“弹起”帧中的图形复制到“指针经过”帧中了，如图8-9所示。步骤10单击图形，在菜单栏中选择“修改”|“取消组合”命令，如图8-10所示。图8-10选择“取消组合”命令图8-9选择“插入关键帧”命令步骤11单击文本框，然后在“属性”面板中设置文本颜色为“绿色”(#00FF00)，如图8-11所示。步骤12单击椭圆图形，然后按Alt+Shift+F9组合键打开“颜色”面板，设置径向渐变填充两端的颜色分别为“#FFFFFF”、“#B0FFB0”，如图8-12所示。步骤13再次组合文本框和椭圆图形，然后右击“按下”帧，在弹出的快捷菜单中选择“插入关键帧”命令，在该帧处插入关键帧，效果如图8-13所示。步骤14参考前面的步骤，先取消图形组合，然后为椭圆图形设置另一种填充颜色，并将文本颜色设置为“黄色”(#FFFF00)，再次将两图形组合起来，如图8-14所示。图8-11设置文本颜色为“绿色”图8-12设置径向渐变填充参数图8-13在“按下”帧位置处插入关键帧图8-14为文本和椭圆图形设置另一种颜色步骤15右击“点击”帧，在弹出的快捷菜单中选择“插入关键帧”命令，效果如图8-15所示。步骤16单击“返回场景”图标，返回到场景编辑状态，如图8-16所示。步骤17切换到“库”面板，会看到刚才制作的按钮元件已经自动添加到库中了，把按钮元件拖动到舞台，即可创建按钮元件的实例，如图8-17所示。步骤18选择菜单栏中的“控制”|“启用简单按钮”命令，就可以在场景中测试按钮元件，如图8-18所示。步骤19将指针定位到按钮上，此时的效果如图8-19所示。步骤20单击按钮，此时的效果如图8-20所示。释放鼠标左键后，按钮将恢复到“经过”帧中的颜色。图8-16单击“返回场景”图标图8-15在“点击”帧位置处插入关键帧图8-17插入新创建的按钮元件图8-18选择“启用简单按钮”命令图8-19查看将指针定位到按钮上时的效果图8-20查看单击按钮时的效果元件库在动画制作中经常会用到，在使用元件库之前，先来熟悉一下“库”面板。1．认识“库”面板在Flash程序中，按F11键或Ctrl+L组合键即可打开或隐藏“库”面板了，如图8-21所示。●8.2.2使用库中的元件图8-21“库”面板标题栏：用于显示当前Flash文件的标题。将鼠标指针移到标题栏上，会出现该文件的存储地址，如图8-22所示。若单击标题栏右侧的下拉按钮，可以在弹出的下拉列表中看到所有被打开的Flash文件的名称，若要切换到某个文件，单击相应的文件名称即可。元件预览窗口：用于预览元件项目列表中选定的元件。如果选定的是一个多帧动画文件，还可以通过预览窗口右上角的“播放”图标和“停止”图标观看动画的播放效果。元件项目列表：该列表中列出了库中所有元素的各种属性，包括名称、链接、使用次数、修改日期和类型。由于“属性”面板空间的限制，一般只显示了元件的名称和链接信息，只要单击面板下方的滑块并向右拖动，即可查看元件的其他属性。菜单项：单击该图标，可以打开“库”面板菜单，该菜单中包含了“库”面板中的所有操作，如图8-23所示。图8-22显示Flash文件的存储位置图8-23展开菜单项在库中可以新建元件、文件夹、字型和视频对文件夹的各种操作命令“新建元件”图标：单击该图标，也会弹出“创建新元件”对话框，可以为新元件命名并选择类型。“新建文件夹”图标：单击该图标可以新建一个文件夹，如图8-24所示，接着可以对文件夹进行重命名，再将类似或相互关联的一些文件存放在该文件夹中。“属性”图标：单击该图标，将弹出“元件属性”对话框，在此查看和修改库中文件的属性，如图8-25所示。“删除”图标：单击该图标，可以删除库中元件项目列表中被选中的元件。图8-24查看新建的文件夹图8-25“元件属性”对话框2．使用库中的元件新建元件下面以使用公用库中的元件创建播放按钮为例进行介绍，具体操作步骤如下。步骤1在“时间轴”面板中新建图层2，然后在菜单栏中选择“窗口”|“公用库”|“Buttons”命令，如图8-26所示。步骤2打开“外部库”面板，在元件项目列表中选择要使用元件所在的文件夹，这里单击“classicbuttons”文件夹左侧的三角图标，如图8-27所示。步骤3在展开的“classicbuttons”文件夹列表中单击“playback”文件夹左侧的三角图标，如图8-30所示。图8-26选择Buttons命令图8-27“外部库”面板图8-30单击“playback”文件夹步骤4在展开的“playback”文件夹列表中单击要使用的按钮元件，这里单击“gelRight”元件，并按住鼠标左键向舞台中拖动，插入该元件，如图8-31所示。图8-31插入元件按钮步骤5在舞台中单击“编辑元件”图标，从弹出的菜单中选择“classicbuttons”|“Playback”|“gelRight”命令，如图8-32所示。步骤6进入元件编辑窗口，即可编辑插入的按钮元件了，如图8-33所示。图8-32选择要编辑的元件图8-33编辑元件编辑元件时，Flash会自动将动画中该元件的所有实例都进行更新。用户一般可以通过以下三种方法对元件进行编辑。1．在当前位置编辑元件在当前位置编辑元件的操作步骤如下。●8.2.3编辑元件步骤1在舞台中右击要编辑的元件，在弹出的快捷菜单中选择“在当前位置编辑”命令，如图8-34所示，或者在菜单栏中选择“编辑”|“在当前位置编辑”命令。步骤2此时，在舞台上即可编辑该元件，且其他对象也会以灰色方式显示在舞台上，但不可编辑，如图8-35所示。图8-35进入元件编辑窗格图8-34选择“在当前位置编辑”命令2．在新窗口中编辑元件在新窗口中编辑元件的操作步骤如下。步骤1在舞台中右击要编辑的元件，在弹出的快捷菜单中选择“在新窗口中编辑”命令，如图8-36所示。步骤2此时将打开一个新的文档编辑窗口，如图8-37所示。在该窗口中可以继续编辑该元件。图8-37在新窗口中打开元件图8-36选择“在新窗口中编辑”命令3．在元件编辑模式下编辑元件在元件编辑模式下编辑元件的操作步骤如下。步骤1在舞台中单击要编辑的元件，然后在菜单栏中选择“编辑”|“编辑元件”命令，如图8-38所示。或是在舞台中右击元件，在弹出的快捷菜单中选择“编辑”命令。步骤2这样，即可将窗口从舞台视图改为只显示该元件的单独视图。正在编辑的元件名称会显示在舞台左上角的信息栏内，如图8-39所示。图8-38选择“编辑元件”命令图8-39编辑元件在一些比较复杂的Flash文件中可能需要新建或插入多个元件，为了方便找到需要的元件，可以使用文件夹来管理这些元件，具体操作步骤如下。1．新建文件夹在“库”面板中新建文件夹的操作步骤如下。步骤1在“迷你网站.fla”文件窗口中打开“库”面板，然后单击“新建文件夹”图标，如图8-40所示。步骤2创建的新文件夹名称以高亮显示，如图8-41所示。接着在文本框中输入新建文件夹的名称。●8.2.4使用文件夹管理元件图8-40单击“新建文件夹”图标图8-41输入新建文件夹的名称步骤3名称输入完成后，按Enter键或者在“库”面板的其他位置处单击，即可确认文件夹名称的输入，如图8-42所示。图8-42查看修改名称后的文件夹2．将元件移动到文件夹中将元件移动到文件夹中的方法如下。步骤1如果要将元件放入到文件夹中，只要选中该元件，然后按住鼠标左键向文件夹拖动将元件拖动至文件夹上，如图8-43所示。步骤2释放鼠标左键即可将元件移动到文件夹中，如图8-44所示。图8-44在文件夹中查看移动后的元件图8-43拖动元件步骤3使用类似方法，继续移动元件至文件夹中，整理后的“库”面板如图8-45所示，看起来非常整洁。步骤4在“库”面板中单击某文件夹左侧的图标即可展开该文件夹，查看其中的元件，如图8-46所示。图8-45整理后的“库”面板在默认情况下，“库”面板中的元件是按照名称进行排序的，如图8-47所示。用户也可以按“链接”、“类型”、“使用次数”、“修改日期”等方式对所有的元件及文件夹进行排序，方法如下。步骤1在“库”面板中，单击“名称”选项右侧的图标，按名称对元件进行升序排序，如图8-48所示。步骤2在“库”面板中向右拖动水平滚动条，接着单击“修改日期”选项，按修改日期对元件排序，如图8-49所示。步骤3若要按类型对元件排序，只需要单击“类型”选项即可，如图8-50所示。●8.2.5排序元件图8-46展开文件夹图8-47按名称排序元件的效果图8-48按名称对元件进行升序排序图8-49按修改日期对元件排序图8-50按类型对元件排序元件创建后，用户仍然可以更改其属性，具体操作步骤如下。步骤1在“库”面板中右击要修改的元件，在弹出的快捷菜单中选择“属性”命令，如图8-52所示。步骤2弹出“元件属性”对话框，在“名称”文本框中可以为元件重新命名，在“类型”下拉列表中可以为元件重新设置元件类型，如图8-54所示。设置完成后，单击“确定”按钮即可。●8.2.6修改元件属性图8-52选择“属性”命令图8-54“元件属性”对话框一个动画制作完成后，有时会发现“库”中存在一些无用的元件，此时就可以把它们删除以减小动画文件的大小。方法是在“库”面板中选择需要删除的元件，然后单击下方的“删除”图标即可，如图8-57所示。或者是右击要删除的元件，在弹出的快捷菜单中选择“删除”命令，如图8-58所示。●8.2.7删除元件图8-57单击“删除”图标图8-58选择“删除”命令●8.3使用元件制作闪烁的星星在学习了如何设计按钮元件后，相信大家已经掌握了按钮元件的创建方法，也会举一反三，创建图形元件和影片剪辑元件。下面以使用刚学习的知识，制作沿着鼠标滑过的轨迹而闪烁的星星作品，具体操作步骤如下。步骤1新建“满天星.fla”文件，并在