本科Flash教材-10.ppt

主讲：老虎工作室,Flash动画制作案例教程,第十章组件与幻灯片演示文稿,掌握常用组件的作用,掌握组件事件处理方法,掌握幻灯片演示文稿的制作,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,组件是用来简化交互式动画开发的一门技术，一次性制作，可以多人反复使用，旨在让开发人员重用和共享代码，封装复杂功能，使用户方便而快速地构建功能强大且具有一致外观和行为的应用程序。组件是带参数的影片剪辑，其中所带的预定义参数由用户在创作时进行设置。每个组件还有一组独特的动作脚本方法、属性和事件，它们也称为API（应用程序编程接口），使用户在运行时设置参数和其他选项。组件之间共享核心功能，如样式、外观和焦点管理。添加第一个组件时，此核心功能大约占用20千字节的大小。当添加其它组件时，添加的组件会共享初始分配的内存，降低应用程序的大小。FlashCS3包括ActionScript2.0组件以及ActionScript3.0组件，不能将这两种组件混合。创建新的FlashCS3文档时，必须指定是Flash文件（ActionScript2.0）还是Flash文件（ActionScript3.0），由此确定显示ActionScript2.0组件还是ActionScript3.0组件。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,ActionScript3.0组件分为用户界面(UI)组件和视频（Video）组件两大类，分别存放在【组件】面板中的两个文件夹。这里主要讲述基于ActionScript3.0的用户界面组件。因此，仅对【组件】面板中，“UserInterface”文件夹下的几个有代表性的常用组件做介绍，对于各组件中重复一致的参数，只介绍一次。组件的参数可以在【参数】面板和【组件检查器】面板中设置，它们是组件的类的最常用的参数，还有一些参数则不能在这两个面板中显示，必须使用ActionScript来设置。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,一.Button组件,一个可调整大小的矩形用户界面按钮。label：设置按钮上显示的字符。emphasized：指示当按钮处于弹起状态时，按钮周围是否绘有边框。toggle：将按钮转变为切换开关。如果值为【true】，则按钮在按下后保持按下状态，直到再次按下时才返回到弹起状态。如果值为【false】，则按钮的行为就像一个普通按钮；默认值为false。selected：如果【toggle】参数的值是【true】，则该参数指定按钮是处于按下状态(true)还是释放状态(false)。labelPlacement：确定按钮上的标签文本相对于图标的方向。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,二.CheckBox组件,复选框，被选中后框中会出现一个复选标记。selected：将复选框的初始值设为选中(true)或取消选中(false)。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,三.ComboBox组件,组合框，既可以是静态的，也可以是可编辑的。使用静态组合框，用户可以从下拉列表中做出一项选择。使用可编辑的组合框，用户可以在列表顶部的文本字段中直接输入文本，也可以从下拉列表中选择一项。editable：确定“ComboBox”组件是可编辑的(true)还是静态的(false)。默认值为mpt：设置在列表顶部的文本字段中显示的字符，没有设置时就显示下拉列表中第一项。dataProvider：设置相互关联的一个文本值（下拉列表中各项的显示文本）和数据值。rowCount：设置在不使用滚动条的情况下一次最多可以显示的项目数。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,四.RadioButton组件,单选按钮，用于至少有两个RadioButton实例的组。value：是与单选按钮相关的值。groupName：是单选按钮的组名称。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,五.TextArea和TextInput组件,前者是一个带有边框和可选滚动条的多行文本字段，后者是单行文本字段。condenseWhite：确定是否从包含的HTML文本中删除额外空白。horizontalScrollPolicy和verticalScrollPolicy：显示水平滚动条。该值可以是【on】、【off】或【auto】（默认值）。maxChars：设置在文本字段中输入的最大字符数。restrict：限制用户可输入的字符集。默认值为可以输入任何字符。text：指明显示的内容。htmlText：指明文本是(true)否(false)采用HTML格式。editable：指明组件中字符是(true)否(false)可编辑。password：指明字段是(true)否(false)为密码字段。wordWrap：指明文本是(true)否(false)自动换行。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,六.ScrollPane组件,滚动窗格，在一个可滚动的有限区域中显示影片剪辑、JPEG文件和SWF文件。source：指明要加载到滚动窗格中的内容。该值可以是本地SWF、JPEG文件的相对路径，或Internet上文件的相对或绝对路径，也可以是设置为“为动作脚本导出”的库中影片剪辑元件的类名称。horizontalLineScrollSize和verticalLineScrollSize：指明每次按下箭头按钮时水平滚动条和垂直滚动条移动多少个单位.。horizontalPageScrollSize和verticalPageScrollSize：指明每次按轨道时水平滚动条和垂直滚动条移动多少个单位。scrollDrag：是一个布尔值，它允许(true)或不允许(false)用户在滚动窗格中拖动内容。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,七.Slider组件,一个滑块轨道，通过移动端点之间的滑块来选择值。direction：设置滑块的方向。liveDragging：确定用户在移动滑块时，是否实时调度SliderEvent.CHANGE事件。maximum：滑块轨道最右边对应的最大值。minimum：滑块轨道最左边对应的最小值。snapInterval：用户每次移动滑块时增加或减小的数值。tickInterval：相对于组件最大值的刻度线间距。value：设置滑块位置，也就是当前数值。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,八.ColorPicker组件,在一个方形按钮中显示单一颜色，单击按钮时会出现可用的颜色列表，同时出现一个文本字段，显示当前所选颜色的十六进制值。direction：设置滑块的方向。liveDragging：确定用户在移动滑块时，是否实时调度SliderEvent.CHANGE事件。maximum：滑块轨道最右边对应的最大值。minimum：滑块轨道最左边对应的最小值。snapInterval：用户每次移动滑块时增加或减小的数值。tickInterval：相对于组件最大值的刻度线间距。value：设置滑块位置，也就是当前数值。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.1常用组件,任何基于列表的组件例如List、DataGrid、TileList或ComboBox，都使用dataProvider（数据提供者）获取或设置要查看的项目列表的数据模型。在【参数】面板中，单击dataProvider参数右侧的按钮，会打开一个【值】面板，进行项目列表显示的文本标签和对应数值的设置，其中对应的数值可以不进行设置，文本标签可以进行修改。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.2组件的事件响应,每一个组件实例在用户与它交互时都会广播事件。例如当用户单击一个Button时，它会调度MouseEvent.CLICK事件；当用户选择List中的一个项目时，List会调度Event.CHANGE事件。当组件发生重要事情时也会引发事件，像UILoader实例完成内容加载时，会调度Event.COMPLETE事件。所有事件均由组件类的实例广播，因此组件实例被称为“广播器”。通过调用组件实例的addEventListener()方法，可以注册事件的“侦听器”。例如下面向Button实例aButton添加了一个MouseEvent.CLICK事件的侦听器clickHandler。aButton.addEventListener(MouseEvent.CLICK,clickHandler);addEventListener()方法的第二个参数，也就是侦听器clickHandler，是注册在该事件发生时要调用的函数，也称作“回调函数”。可以向一个组件实例注册多个侦听器，也可以向多个组件实例注册同一个侦听器，侦听器会一直保持活动状态，直到应用程序终止或着使用removeEventListener()方法删除侦听器。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.2组件的事件响应,组件的事件包括该组件继承的所有类的事件，这可以在相关的帮助文档中查出。最基本的是继承自Event对象类，它的一些属性包含了有关所发生事件的信息，其中包括提供事件基本信息的target和type属性。type：表示事件类型的字符串。target：对广播事件的组件实例的引用。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.2组件的事件响应,10-1激情圣诞夜,importfl.events.ColorPickerEvent;importfl.events.SliderEvent;varmyformat:TextFormat=newTextFormat();functionchangeTexta(event:SliderEvent):voidwz.scaleX=event.target.value;wz.scaleY=event.target.value;functionchangeTextb(event:ColorPickerEvent):voidmyformat.color=event.target.selectedColor;wz.setTextFormat(myformat);sl.addEventListener(SliderEvent.CHANGE,changeTexta);cl.addEventListener(ColorPickerEvent.CHANGE,changeTextb);,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.2组件的事件响应,10-2地理判断题,answer.text=;functionselect(evt:MouseEvent)if(rgb.selected=true)answer.text=正确;elseanswer.text=错误;mybutton.addEventListener(MouseEvent.CLICK,select);,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.3视频组件基本应用,在FlashCS3中可以直接导入MOV、AVI和MPG等格式的视频文件。但最好先通过FlashCS3VideoEncoder软件将这些视频处理成FLV格式，然后在FlashCS3中使用。FlashCS3VideoEncoder会随FlashCS3一起安装，默认情况下使用On2VP6编解码器（用于FlashPlayer8及更高版本）和SorensonSpark编解码器（用于FlashPlayer7）对视频进行编码，同时可以对导入的视频进行编辑处理。如图所示，是相应的操作界面。一般情况下，不需要进行过多的调整，使用缺省设置，直接转换即可。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.3视频组件基本应用,FlashCS3中的视频组件FLVPlayback专门针对播放FLV格式而设计，其参数设置如下。,align：在scaleMode参数设置为maintainAspectRatio或noScale时指定视频布局，有9种选择，默认值为center。autoPlay：一个布尔值。设为true则FLV在加载后立即播放，设为false则在加载第一帧后暂停。默认值为true。cuePoints：一个数组，用于指定FLV的提示点。使用提示点可以将FLV中特定的位置与Flash动画、图形或文本同步。preview：可以选择某一帧图像用于创作时的实时预览。要生成运行时的预览图像，必须先导出所选的帧图像，然后通过动作脚本加载。scaleMode：指定在视频加载后如何调整其大小，有3个选择。skin：用于打开“选择外观”对话框选择组件的外观。默认值为None。如果选择None，则FLVPlayback实例将不包含播放、停止、后退功能，用户也无法执行与这些控件相关联的其它操作。如果autoPlay参数设为true，则FLV会自动播放。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.3视频组件基本应用,skinAutoHide：一个布尔值，如果为true，则鼠标未在视频上时隐藏组件外观。此属性只影响通过设置skin参数加载的外观，而不影响从FLVPlayback自定义用户界面组件创建的外观。skinBackgroundAlpha：外观背景的Alpha透明度，是0.0到1.0之间的数字。只能与利用skin参数加载了外观的SWF文件以及支持颜色和alpha设置的外观一起使用。skinBackgroundColor：外观背景的颜色(0 xRRGGBB)。只能与利用skin参数加载了外观的SWF文件以及支持颜色和alpha设置的外观一起使用。source：一个字符串，指定要进行流式处理的FLV文件的URL以及如何对其进行流式处理。URL可以是指向FLV文件的HTTPURL、指向流的RTMPURL，也可以是指向XML文件的HTTPURLvolume：一个数字，介于0到1的范围内，指示音量控制设置。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.3视频组件基本应用,10-3燃烧,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.4幻灯片演示文稿,FlashCS3提供的幻灯片演示文稿，与PowerPoint软件的演示功能很类似，适用于制作多媒体演示文稿。但需要提醒读者注意的是，这一功能只能基于ActionScript2.0来实现。选择【文件】/【新建】命令，打开【新建文档】面板，单击【常规】选项卡，选择【Flash幻灯片演示文稿】，就可以创建一个幻灯片演示文稿。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.4幻灯片演示文稿,在幻灯片演示文稿中，屏幕提供了一个具有结构化构件的用户面。顶层屏幕在默认情况下称为“演示文稿”，是容纳向文档中添加任何内容（包括其他屏幕）的容器。可以将内容放在顶层屏幕上，但不能删除或移动顶层屏幕。在顶层屏幕下面增加的屏幕都是子屏幕，子屏幕还可以再嵌套子屏幕，子屏幕继承父屏幕中的显示内容和设置的行为。在屏幕名称处双击鼠标左键，就可以对其名称进行修改。在屏幕名称上单击鼠标右键，可以打开一个快捷菜单，其中包含多个用于处理屏幕的命令。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.4幻灯片演示文稿,在【属性】面板中选择【参数】选项卡，可以设置参数来控制回放期间屏幕的外观和行为。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.4幻灯片演示文稿,autoKeyNav：确定幻灯片是否使用默认的键盘操作来控制转到下一张或上一张幻灯片。设置为【true】，按键或空格键将前进到下一张幻灯片，按键将返回到上一张幻灯片。设置为【false】，则不采用默认的键盘操作。缺省设置为【inherit】，则幻灯片将从其父项继承【autoKeyNav】，如果幻灯片是根幻灯片，那么设置为【inherit】与【true】相同。overlayChildren：指定在回放期间子屏幕是否在父屏幕上相互重叠显示。如果设置为【true】，则子屏幕将相互重叠显示。缺省设置为【false】，则在一个子项出现后，前一个子项不再显示。playHidden：指定幻灯片在显示之后，处于隐藏状态时是否继续播放。缺省设置为【true】，则幻灯片将继续播放。如果设置【false】，则幻灯片停止播放，再次显示时会从第1帧重新开始播放。autoLoad：【true】指示是自动加载内容，【false】指示等到调用Loader.load()方法时才加载。contentPath：调用Loader.load()方法时要加载文件的绝对或相对URL，相对路径必须指向加载内容的SWF文件。,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.4幻灯片演示文稿,10-4设计作品展示,第10章：组件与幻灯片演示文稿,10.1节,10.2节,10.3节,10.4节,10.5节,10.6节,10.5幻灯片间的转换,为幻灯片设置转换动画效果，要使用另外一个功能行为。行为是预先编写的“ActionScript”脚本，可以使用户将动作脚本编码的强大功能、控制能力和灵活性简单地添加到文档中，而不必亲自编写动作脚本代码。由于行为采用