FLASHCS4课件L5元件库和实例

第五讲第五讲 元件、库元件、库和实例和实例内容概要内容概要l元件元件l元件和实例的概述、元件的类型、使用元件的优元件和实例的概述、元件的类型、使用元件的优点点l创建元件、编辑元件、创建元件、编辑元件、l复制元件、删除元件、更改元件类型复制元件、删除元件、更改元件类型l库库l库面板的使用库面板的使用l专用库与公用库专用库与公用库l实例实例l创建实例、实例的属性、分离实体创建实例、实例的属性、分离实体l课堂练习课堂练习创建按钮、添加花朵背景创建按钮、添加花朵背景元件和实例概述元件和实例概述l元件是元件是Flash中一个比较重要且使用非常频繁的概念。中一个比较重要且使用非常频繁的概念。 是指在是指在 Flash 创作环境中创作环境中（或使用（或使用 Button (AS 2.0)、SimpleButton (AS 3.0) 和和 MovieClip 类）类）创建过一次的创建过一次的图形、按钮或影片剪辑，可以拥有图形、按钮或影片剪辑，可以拥有 Flash 能够创建的所能够创建的所有功能，包括动画。有功能，包括动画。 l还可以包含从其它应用程序中导入的插图；还可以包含从其它应用程序中导入的插图；l元件一旦被创建（元件一旦被创建（只需创建一次只需创建一次），就会），就会被自动添加到当前文档被自动添加到当前文档的的中，中， 然后可以在当前文档或其它文档中然后可以在当前文档或其它文档中重复使用而不会显著重复使用而不会显著增加文件的大小增加文件的大小。是指位于舞台上或嵌套在另一个元件内的是指位于舞台上或嵌套在另一个元件内的元件副本元件副本。l实例可以与它的元件在颜色、大小和功能上有差别。实例可以与它的元件在颜色、大小和功能上有差别。l编辑元件会更新它的所有实例，但对元件的一个实例应用效果则编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。只更新该实例。元件的类型元件的类型：用来重复使用的静态图像：用来重复使用的静态图像l可应用到其它类型的元件当中，是可应用到其它类型的元件当中，是3种元件类型中最基本的类种元件类型中最基本的类型。型。：用来响应鼠标单击、滑过或其它鼠标动作：用来响应鼠标单击、滑过或其它鼠标动作的交互式按钮。的交互式按钮。l可以定义与各种按钮状态关联的图形，可根据对不同按钮状态可以定义与各种按钮状态关联的图形，可根据对不同按钮状态的设置来触发不同的特殊效果。的设置来触发不同的特殊效果。：可重用的动画片段。：可重用的动画片段。lFlash中最就有交互性、用途最多及功能最强的部分。中最就有交互性、用途最多及功能最强的部分。l影片剪辑拥有各自独立于主时间轴的多帧时间轴（可设想为主影片剪辑拥有各自独立于主时间轴的多帧时间轴（可设想为主电影中嵌套的小电影）；基本上就是一个小的独立影片，可包电影中嵌套的小电影）；基本上就是一个小的独立影片，可包含交互式控件、声音甚至其它影片剪辑实例；也可以将影片剪含交互式控件、声音甚至其它影片剪辑实例；也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。辑实例放在按钮元件的时间轴内，以创建动画按钮。l使用使用ActionScript可以在剪辑之间发送消息以便相互控制。可以在剪辑之间发送消息以便相互控制。使用元件的优点使用元件的优点：一个元件在浏览中只：一个元件在浏览中只需下载一次；需下载一次；：若修改元件，同一元：若修改元件，同一元件生成的所有实例都会随之更新，可大大节省件生成的所有实例都会随之更新，可大大节省创作时间，提供工作效率；创作时间，提供工作效率；：同一元件的多个：同一元件的多个实例在影片中只保存元件一次，而每个实例只实例在影片中只保存元件一次，而每个实例只保存附加信息（位置及其它属性）；保存附加信息（位置及其它属性）；4.制作动作类的过滤动画效果时，必须将图形转制作动作类的过滤动画效果时，必须将图形转换成元件，否则将失去透明度等属性，而且不换成元件，否则将失去透明度等属性，而且不能制作补间动画。能制作补间动画。使用flash制作影片的一般工作流程1.影片总体设计计划影片总体设计计划2.制作所需的各种元件制作所需的各种元件3.在场景中添加元件的实例，并对实例进行适在场景中添加元件的实例，并对实例进行适当的组织和编排当的组织和编排4.测试并发布影片测试并发布影片l使用元件和库可以提高影片的制作效率使用元件和库可以提高影片的制作效率创建元件创建元件l新建元件新建元件l打开打开“创建新元件创建新元件”对话框对话框的方法有：的方法有： 1.菜单项菜单项“插入插入|新建元件新建元件”2.“库库”面板左下角的面板左下角的“新建元件新建元件”按钮按钮 3.“库库”面板右上角的面板右上角的“库面板库面板”菜单中的菜单中的“新建元件新建元件”4.快捷按钮快捷按钮Ctrl+F8 l名称、类型、文件夹名称、类型、文件夹l“确定确定”后，将该元件后，将该元件添加到库中，并切换添加到库中，并切换到到元件编辑模式元件编辑模式创建元件（创建元件（2）l将选定对象转换为元件将选定对象转换为元件l在舞台上选择一个或多个在舞台上选择一个或多个对象，执行下列操作之一对象，执行下列操作之一打开打开“转换为元件转换为元件”对话框对话框： l菜单项菜单项“修改修改|转换为元件转换为元件” l右键快捷菜单中的右键快捷菜单中的“转换为元件转换为元件”l将选中对象拖到将选中对象拖到“库库”面板上面板上l快捷键快捷键F8l注册：注册：ActionScript控制控制元件时的中心参照点元件时的中心参照点l“确定确定”后，将该元件添加后，将该元件添加到库中，舞台上选定的对象将自动变成该元件的一个到库中，舞台上选定的对象将自动变成该元件的一个实例实例。 编辑元件编辑元件l编辑元件时，可以使用任意绘画工具、导入媒体或其它元件编辑元件时，可以使用任意绘画工具、导入媒体或其它元件的实例；该文档中该元件的所有实例将随之一起改变。的实例；该文档中该元件的所有实例将随之一起改变。l正在编辑的元件的名称会显示在舞台顶部的编辑栏内正在编辑的元件的名称会显示在舞台顶部的编辑栏内l三种编辑方式：三种编辑方式：l编辑编辑：切换到只显示该元件：切换到只显示该元件的单独视图的单独视图 l在当前位置编辑在当前位置编辑：在原场景：在原场景中，其它对象以灰显方式出现中，其它对象以灰显方式出现 l在新窗口中编辑在新窗口中编辑”：在单独的：在单独的窗口单独编辑，可与原场景来窗口单独编辑，可与原场景来回切换回切换编辑元件（编辑元件（2）l进入元件编辑模式进入元件编辑模式l“编辑编辑”菜单中菜单中l右键快捷菜单中右键快捷菜单中l“库库”面板菜单中的面板菜单中的“编辑编辑” l双击双击“库库”面板中的面板中的元件图标元件图标编辑编辑l在舞台上双击该元在舞台上双击该元件的一个实例件的一个实例在在当前位置编辑当前位置编辑编辑元件（编辑元件（3）l退出元件编辑模式退出元件编辑模式l“返回返回”按钮按钮l单击编辑栏中的场景名称单击编辑栏中的场景名称l双击元件的外部（双击元件的外部（“在当前位置编在当前位置编辑辑”时）时）l“关闭关闭”按钮（按钮（“在新窗口编辑在新窗口编辑”时）时）l菜单项菜单项“编辑编辑|编辑文档编辑文档”。创建按钮创建按钮l按钮实际上是四帧的交互影片剪辑，其时间轴按钮实际上是四帧的交互影片剪辑，其时间轴上包含四帧：上包含四帧：l弹起帧：代表指针没有经过按钮时该按钮的状态。弹起帧：代表指针没有经过按钮时该按钮的状态。 l指针经过帧：代表指针滑过按钮时该按钮的外观。指针经过帧：代表指针滑过按钮时该按钮的外观。 l按下帧：代表单击按钮时该按钮的外观。按下帧：代表单击按钮时该按钮的外观。 l点击帧：设定了响应鼠标单击的区域点击帧：设定了响应鼠标单击的区域l 此区域在此区域在 SWF 文件中是不可见的。文件中是不可见的。l时间轴实际上并不播放，它只是对指针运动和动作时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳转到相应的帧。做出反应，跳转到相应的帧。 复制元件复制元件l打开打开“直接复制元直接复制元件件”对话框对话框l“库库”面板中的面板中的“直接复制直接复制”l右键快捷菜单中右键快捷菜单中l面板菜单中面板菜单中l菜单项菜单项“修改修改|元件元件|直接复制元件直接复制元件”删除元件删除元件l要从文档中彻底删除要从文档中彻底删除一个元件，只能在一个元件，只能在“库库”面板中进行删除面板中进行删除l在舞台上进行的删除，在舞台上进行的删除，只是删除了元件的一只是删除了元件的一个实例个实例l“库库”面板中的面板中的“删除删除”l右键快捷菜单中右键快捷菜单中l面板菜单中面板菜单中l“删除删除”按钮按钮更改元件类型更改元件类型1.打开打开“元件属性元件属性”对话框对话框l“库库”面板中的面板中的“属性属性”l右键快捷菜单中右键快捷菜单中l面板菜单中面板菜单中l“属性属性”按钮按钮2.更改更改“类型类型”后，后，确定确定内容概要内容概要l元件元件l元件和实例的概述、元件的类型、使用元件的优元件和实例的概述、元件的类型、使用元件的优点点l创建元件、编辑元件、创建元件、编辑元件、l复制元件、删除元件、更改元件类型复制元件、删除元件、更改元件类型l库库l库面板的使用库面板的使用l专用库与公用库专用库与公用库l实例实例l创建实例、实例的属性、分离实体创建实例、实例的属性、分离实体l课堂练习课堂练习创建按钮、添加花朵背景创建按钮、添加花朵背景库面板库面板是存储和组织管理是存储和组织管理flash中中创建的各种元件的地方创建的各种元件的地方l打开打开“库库”面板面板l菜单项菜单项“窗口窗口|库库”l快捷键快捷键Ctrl+Ll“库库”面板的构成面板的构成l面板菜单面板菜单l库名、库名、“固定当前库固定当前库”按钮、按钮、“新建库面板新建库面板”按钮按钮l预览窗口预览窗口l搜索栏搜索栏l库元件列表、库元件列表、“排序排序”按钮按钮l按钮：新建元件、新建按钮：新建元件、新建、属性、删除、属性、删除专用库与公用库专用库与公用库：存放各自：存放各自Flash文档中创建文档中创建的元件。的元件。：Flash 附带的范例公用库，附带的范例公用库，或者自定义创建的公用库。或者自定义创建的公用库。l声音声音l按钮按钮l类类内容概要内容概要l元件元件l元件和实例的概述、元件的类型、使用元件的优元件和实例的概述、元件的类型、使用元件的优点点l创建元件、编辑元件、创建元件、编辑元件、l复制元件、删除元件、更改元件类型复制元件、删除元件、更改元件类型l库库l库面板的使用库面板的使用l专用库与公用库专用库与公用库l实例实例l创建实例、实例的属性、分离实体创建实例、实例的属性、分离实体l课堂练习课堂练习创建按钮、添加花朵背景创建按钮、添加花朵背景实例及其创建实例及其创建是指位于舞台上或嵌套在另一个元件内的是指位于舞台上或嵌套在另一个元件内的元件副本元件副本。l实例可以与它的元件在颜色、大小和功能上有差别。实例可以与它的元件在颜色、大小和功能上有差别。l编辑元件会更新它的所有实例，但对元件的一个实编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。例应用效果则只更新该实例。l创建实例创建实例l选择时间轴上的某帧的某个图层，将库中已有的元选择时间轴上的某帧的某个图层，将库中已有的元件拖拽到舞台上件拖拽到舞台上实例的属性实例的属性l“属性属性”面板面板l实例名称实例名称l实例类型实例类型l位置和大小位置和大小实例的属性（实例的属性（2）l色彩效果色彩效果l样式：样式：不设置颜色效果：不设置颜色效果：用来调整实例的相对亮度和安度。：用来调整实例的相对亮度和安度。-100%100%，-100%为白色，为白色，100%为黑色为黑色：用来增加某种色调，可用颜色拾取器，也可直接：用来增加某种色调，可用颜色拾取器，也可直接输入输入0%100%，0%不受影响，不受影响，100%完全取代原有颜色完全取代原有颜色：用于调整实例的红、绿、蓝和透明度。：用于调整实例的红、绿、蓝和透明度。0%100%，0%完全不可见，完全不可见，100%完全可见完全可见实例的属性（实例的属性（3）l循环（仅图形元件）循环（仅图形元件）l循环：按照当前实例占用的帧数来循环包含在该实循环：按照当前实例占用的帧数来循环包含在该实例内的所有动画序列。例内的所有动画序列。 l播放一次：从指定帧开始播放动画序列直到动画结播放一次：从指定帧开始播放动画序列直到动画结束，然后停止。束，然后停止。 l单帧：显示动画序列的一帧；单帧：显示动画序列的一帧； 指定要显示的帧。指定要显示的帧。l例如：例如：“rs_l5/改变实例类型改变实例类型.fla”实例的属性（实例的属性（4）l交换：替换当前指定给交换：替换当前指定给所选实例的元件所选实例的元件l打开打开l“直接复制元件直接复制元件”按钮按钮分离实例、调用其它文档中的元件分离实例、调用其它文档中的元件：断开实例与元件之间的链接，可：断开实例与元件之间的链接，可修改实例且不影响元件本身和该元件的其它修改实例且不影响元件本身和该元件的其它实例。实例。内容概要内容概要l元件元件l元件和实例的概述、元件的类型、使用元件的优元件和实例的概述、元件的类型、使用元件的优点点l创建元件、编辑元件、创建元件、编辑元件、l复制元件、删除元件、更改元件类型复制元件、删除元件、更改元件类型l库库l库面板的使用库面板的使用l专用库与公用库专用库与公用库l实例实例l创建实例、实例的属性、分离实体创建实例、实例的属性、分离实体l课堂练习课堂练习创建按钮、添加花朵背景创建按钮、添加花朵背景课堂练习课堂练习1创建按钮创建按钮l步骤步骤1：新建元件：新建元件l打开打开“创建新元件创建新元件”对话框，类型为对话框，类型为按钮按钮l步骤步骤2：制作弹起：制作弹起帧帧l将将“按钮素材按钮素材.psd”导入到库导入到库l选择选择“弹起弹起”下的下的关键帧，将关键帧，将“库库”面板中面板中“按钮素按钮素材材.psd资源资源”下的下的“图层图层1”拖拽到按拖拽到按钮元件的场景中钮元件的场景中课堂练习课堂练习1创建按钮（创建按钮（2）l步骤步骤3：制作指针经过帧：制作指针经过帧l选择选择“指针经过指针经过”下的帧，下的帧，“插入关键插入关键帧帧”l选中舞台中的实例，打开选中舞台中的实例，打开“变形变形”面板，面板，将实例放大将实例放大110%l在在“属性属性”面板中设置面板中设置“色彩效果色彩效果|样式样式|色调色调”：色调：色调59%，红，红255，绿，绿0，蓝，蓝206l步骤步骤4：制作按下帧：制作按下帧l选择选择“指针经过指针经过”下的帧，下的帧，“插入关键插入关键帧帧”l选中舞台中的实例，打开选中舞台中的实例，打开“变形变形”面板，面板，将实例放大将实例放大90%l在在“属性属性”面板中设置面板中设置“色彩效果色彩效果|样式样式|色调色调”：色调：色调61%，红，红255，绿，绿255，蓝蓝0课堂练习课堂练习1创建按钮（创建按钮（3）l步骤步骤5：为指针经过帧添加文字：为指针经过帧添加文字l选择选择“指针经过指针经过”帧，选中帧，选中“文本工文本工具具”，在空白处键入，在空白处键入“flash”l选择文本，在选择文本，在“属性属性”面板中修改：系面板中修改：系列列Arial Black，大小，大小50点点l将文本分离为图形：分离将文本分离为图形：分离2次次l选择选择“颜料桶工具颜料桶工具”，设置填充颜色为，设置填充颜色为渐变，对文本图形进行填充渐变，对文本图形进行填充l选择选择“墨水瓶工具墨水瓶工具”，设置笔触颜色为，设置笔触颜色为黑色，对文本图形进行描边黑色，对文本图形进行描边l选择文本图形和描边，组合；移动到按选择文本图形和描边，组合；移动到按钮的上方钮的上方课堂练习课堂练习1创建按钮（创建按钮（4）l步骤步骤6：在舞台上添加实例：在舞台上添加实例l步骤步骤7：测试影片：测试影片lCtrl+Enterl注意按钮的响应范围注意按钮的响应范围l步骤步骤8：修改按钮的响应范围：修改按钮的响应范围l选择选择“指针经过指针经过”下的帧，下的帧，“插入关键插入关键帧帧”l选中舞台中的实例，打开选中舞台中的实例，打开“变形变形”面板，面板，将实例放大将实例放大130%（或者（或者50%）l重新测试影片重新测试影片课堂练习课堂练习2添加花朵背景添加花朵背景l步骤步骤1：绘制花朵元件（如：绘制花朵元件（如右上图）右上图）l步骤步骤2：将：将“花朵背景花朵背景.jpg”导入到舞台，并适当调整导入到舞台，并适当调整大小大小l步骤步骤3：在舞台上插入若干：在舞台上插入若干花朵实例，并分别修改其花朵实例，并分别修改其属性（如右下图）属性（如右下图）