FLASHCS4课件L5元件库和实例.ppt

《FLASHCS4课件L5元件库和实例.ppt》由会员分享，可在线阅读，更多相关《FLASHCS4课件L5元件库和实例.ppt（31页珍藏版）》请在装配图网上搜索。

1、第五讲 元件、库和实例,内容概要,元件 元件和实例的概述、元件的类型、使用元件的优点 创建元件、编辑元件、 复制元件、删除元件、更改元件类型 库 库面板的使用 专用库与公用库 实例 创建实例、实例的属性、分离实体 课堂练习创建按钮、添加花朵背景,元件和实例概述,元件是Flash中一个比较重要且使用非常频繁的概念。 元件是指在 Flash 创作环境中（或使用 Button (AS 2.0)、SimpleButton (AS 3.0) 和 MovieClip 类）创建过一次的图形、按钮或影片剪辑，可以拥有 Flash 能够创建的所有功能，包括动画。 还可以包含从其它应用程序中导入的插图； 元件一旦

2、被创建（只需创建一次），就会被自动添加到当前文档的库中， 然后可以在当前文档或其它文档中重复使用而不会显著增加文件的大小。 实例是指位于舞台上或嵌套在另一个元件内的元件副本。 实例可以与它的元件在颜色、大小和功能上有差别。 编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。,元件的类型,图形元件：用来重复使用的静态图像 可应用到其它类型的元件当中，是3种元件类型中最基本的类型。 按钮元件：用来响应鼠标单击、滑过或其它鼠标动作的交互式按钮。 可以定义与各种按钮状态关联的图形，可根据对不同按钮状态的设置来触发不同的特殊效果。 影片剪辑：可重用的动画片段。 Flash中最就有交互

3、性、用途最多及功能最强的部分。 影片剪辑拥有各自独立于主时间轴的多帧时间轴（可设想为主电影中嵌套的小电影）；基本上就是一个小的独立影片，可包含交互式控件、声音甚至其它影片剪辑实例；也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。 使用ActionScript可以在剪辑之间发送消息以便相互控制。,使用元件的优点,可加快影片的播放速度：一个元件在浏览中只需下载一次； 可简化影片的编辑操作：若修改元件，同一元件生成的所有实例都会随之更新，可大大节省创作时间，提供工作效率； 可最大程度地减小文件大小：同一元件的多个实例在影片中只保存元件一次，而每个实例只保存附加信息（位置及其它属性）； 制

4、作动作类的过滤动画效果时，必须将图形转换成元件，否则将失去透明度等属性，而且不能制作补间动画。,使用flash制作影片的一般工作流程,影片总体设计计划 制作所需的各种元件 在场景中添加元件的实例，并对实例进行适当的组织和编排 测试并发布影片 使用元件和库可以提高影片的制作效率,创建元件,新建元件 打开“创建新元件”对话框的方法有： 菜单项“插入|新建元件” “库”面板左下角的“新建元件”按钮 “库”面板右上角的“库面板”菜单中的“新建元件” 快捷按钮Ctrl+F8 名称、类型、文件夹 “确定”后，将该元件添加到库中，并切换到元件编辑模式,创建元件（2）,将选定对象转换为元件 在舞台上选择一个或

5、多个对象，执行下列操作之一打开“转换为元件”对话框： 菜单项“修改|转换为元件” 右键快捷菜单中的“转换为元件” 将选中对象拖到“库”面板上 快捷键F8 注册：ActionScript控制元件时的中心参照点 “确定”后，将该元件添加到库中，舞台上选定的对象将自动变成该元件的一个实例。,编辑元件,编辑元件时，可以使用任意绘画工具、导入媒体或其它元件的实例；该文档中该元件的所有实例将随之一起改变。 正在编辑的元件的名称会显示在舞台顶部的编辑栏内 三种编辑方式： 编辑：切换到只显示该元件的单独视图 在当前位置编辑：在原场景中，其它对象以灰显方式出现 在新窗口中编辑”：在单独的窗口单独编辑，可与原场景

6、来回切换,编辑元件（2）,进入元件编辑模式 “编辑”菜单中 右键快捷菜单中 “库”面板菜单中的“编辑” 双击“库”面板中的元件图标编辑 在舞台上双击该元件的一个实例在当前位置编辑,编辑元件（3）,退出元件编辑模式 “返回”按钮 单击编辑栏中的场景名称 双击元件的外部（“在当前位置编辑”时） “关闭”按钮（“在新窗口编辑”时） 菜单项“编辑|编辑文档”。,创建按钮,按钮实际上是四帧的交互影片剪辑，其时间轴上包含四帧： 弹起帧：代表指针没有经过按钮时该按钮的状态。 指针经过帧：代表指针滑过按钮时该按钮的外观。 按下帧：代表单击按钮时该按钮的外观。 点击帧：设定了响应鼠标单击的区域 此区域在 SWF

7、 文件中是不可见的。 时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳转到相应的帧。,复制元件,打开“直接复制元件”对话框 “库”面板中的“直接复制” 右键快捷菜单中 面板菜单中 菜单项“修改|元件|直接复制元件”,删除元件,要从文档中彻底删除一个元件，只能在“库”面板中进行删除 在舞台上进行的删除，只是删除了元件的一个实例 “库”面板中的“删除” 右键快捷菜单中 面板菜单中 “删除”按钮,更改元件类型,打开“元件属性”对话框 “库”面板中的“属性” 右键快捷菜单中 面板菜单中 “属性”按钮 更改“类型”后，确定,内容概要,元件 元件和实例的概述、元件的类型、使用元件的优点 创建元件、

8、编辑元件、 复制元件、删除元件、更改元件类型 库 库面板的使用 专用库与公用库 实例 创建实例、实例的属性、分离实体 课堂练习创建按钮、添加花朵背景,库面板,库是存储和组织管理flash中创建的各种元件的地方 打开“库”面板 菜单项“窗口|库” 快捷键Ctrl+L “库”面板的构成 面板菜单 库名、“固定当前库”按钮、“新建库面板”按钮 预览窗口 搜索栏 库元件列表、“排序”按钮 按钮：新建元件、新建文件夹、属性、删除,专用库与公用库,专用库：存放各自Flash文档中创建的元件。 公用库：Flash 附带的范例公用库，或者自定义创建的公用库。 声音 按钮 类,内容概要,元件 元件和实例的概述、

9、元件的类型、使用元件的优点 创建元件、编辑元件、 复制元件、删除元件、更改元件类型 库 库面板的使用 专用库与公用库 实例 创建实例、实例的属性、分离实体 课堂练习创建按钮、添加花朵背景,实例及其创建,实例是指位于舞台上或嵌套在另一个元件内的元件副本。 实例可以与它的元件在颜色、大小和功能上有差别。 编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。 创建实例 选择时间轴上的某帧的某个图层，将库中已有的元件拖拽到舞台上,实例的属性,“属性”面板 实例名称 实例类型 位置和大小,实例的属性（2）,色彩效果 样式： 无：不设置颜色效果 亮度：用来调整实例的相对亮度和安度。 -1

10、00%100%，-100%为白色，100%为黑色 色调：用来增加某种色调，可用颜色拾取器，也可直接输入 0%100%，0%不受影响，100%完全取代原有颜色 高级：用于调整实例的红、绿、蓝和透明度。 Alpha（不透明度） 0%100%，0%完全不可见，100%完全可见,实例的属性（3）,循环（仅图形元件） 循环：按照当前实例占用的帧数来循环包含在该实例内的所有动画序列。 播放一次：从指定帧开始播放动画序列直到动画结束，然后停止。 单帧：显示动画序列的一帧； 指定要显示的帧。 例如：“rs_l5/改变实例类型.fla”,实例的属性（4）,交换：替换当前指定给所选实例的元件 打开“交换元件”对话

11、框 “属性”面板中的“交换”按钮 “直接复制元件”按钮,分离实例、调用其它文档中的元件,分离实例：断开实例与元件之间的链接，可修改实例且不影响元件本身和该元件的其它实例。 选中实例，然后“修改|分离”或快捷键Ctrl+B 调用其它文档中的元件 “文件|导入|打开外部库”选择要打开的文档后，单击“打开”，打开该文档的“库”面板即可使用,内容概要,元件 元件和实例的概述、元件的类型、使用元件的优点 创建元件、编辑元件、 复制元件、删除元件、更改元件类型 库 库面板的使用 专用库与公用库 实例 创建实例、实例的属性、分离实体 课堂练习创建按钮、添加花朵背景,课堂练习1创建按钮,步骤1：新建元件 打开

12、“创建新元件”对话框，类型为按钮 步骤2：制作弹起帧 将“按钮素材.psd”导入到库 选择“弹起”下的关键帧，将“库”面板中“按钮素材.psd资源”下的“图层1”拖拽到按钮元件的场景中,课堂练习1创建按钮（2）,步骤3：制作指针经过帧 选择“指针经过”下的帧，“插入关键帧” 选中舞台中的实例，打开“变形”面板，将实例放大110% 在“属性”面板中设置“色彩效果|样式|色调”：色调59%，红255，绿0，蓝206 步骤4：制作按下帧 选择“指针经过”下的帧，“插入关键帧” 选中舞台中的实例，打开“变形”面板，将实例放大90% 在“属性”面板中设置“色彩效果|样式|色调”：色调61%，红255，绿

13、255，蓝0,课堂练习1创建按钮（3）,步骤5：为指针经过帧添加文字 选择“指针经过”帧，选中“文本工具”，在空白处键入“flash” 选择文本，在“属性”面板中修改：系列Arial Black，大小50点 将文本分离为图形：分离2次 选择“颜料桶工具”，设置填充颜色为渐变，对文本图形进行填充 选择“墨水瓶工具”，设置笔触颜色为黑色，对文本图形进行描边 选择文本图形和描边，组合；移动到按钮的上方,课堂练习1创建按钮（4）,步骤6：在舞台上添加实例 步骤7：测试影片 Ctrl+Enter 注意按钮的响应范围 步骤8：修改按钮的响应范围 选择“指针经过”下的帧，“插入关键帧” 选中舞台中的实例，打开“变形”面板，将实例放大130%（或者50%） 重新测试影片,课堂练习2添加花朵背景,步骤1：绘制花朵元件（如右上图） 步骤2：将“花朵背景.jpg”导入到舞台，并适当调整大小 步骤3：在舞台上插入若干花朵实例，并分别修改其属性（如右下图）,