第8章文字字段与组件

第8章文字字段与组件 教学要点 动态文本和输入文本文本字段对HTML和CSS的支持全新的UI组件 8 1动态文本和输入文本 动态文本输入文本 8 1 1动态文本 动态文本就是可以动态更新的文本 如体育得分 股票报价等 它是根据情况动态改变的文本 常用在游戏和课件作品中 用来实时显示操作运行的状态 动态文本的用途 8 1 1动态文本 使用 文本工具 就可以创建动态文本框 创建动态文本 8 1 1动态文本 为动态文本赋值的方法有 使用变量赋值通过动态文本对象的text属性进行赋值 为动态文本赋值 8 1 1动态文本 在场景中拖出一个文本框 选中该文本框 在 属性 面板中选择 动态文本 类型 定义变量名为 text 在 动作 面板中 设置第1帧上的脚本 text 欢迎学习动态文本 使用变量赋值 8 1 1动态文本 在场景中拖出一个文本框 选中该文本框 在 属性 面板中选择 动态文本 类型 为它起一个实例名为 test 设置第1帧上的脚本 test text 使用动态文本的实例名字来赋值 使用text属性赋值 8 1 1动态文本 1 MovieClip createTextField 指令作用 动态创建文本框 语法 my mc createTextField instanceName depth x y width height 常用指令 例 创建一个文本框 创建一个文本框 其实例名为textBox 深度为1 x为50 y为50宽度为200 高度为100 程序代码 8 1 1动态文本 2 TextField autoSize指令作用 控制文本字段的自动大小调整和对齐 语法 my txt autoSize例如 my txt autosize center 将文本字段my txt的autosize属性设置为 center 常用指令 8 1 1动态文本 3 TextField removeTextField 指令作用 删除由createTextField创建的文本字段 语法 my txt removeTextField 例如 textBox removeTextField 删除textBox文本 常用指令 8 1 1动态文本 4 TextField border指令作用 设置文本字段是否有边框 如果为true 则文本字段具有边框 如果为false 则文本字段没有边框 语法 my txt border例如 my txt border true 文本字段my txt有边框 常用指令 8 1 1动态文本 5 TextField alpha指令作用 设置或获取由my txt指定的文本字段的Alpha透明度值 有效值为0到100 语法 my txt alpha例如 text1 txt alpha 30 将名为text1 txt的文本字段的 alpha属性设置为30 常用指令 8 1 1动态文本 6 TextField background指令作用 设置文本字段背景是否填充 如果为true 则文本字段具有背景填充 如果为false 则文本字段没有背景填充 语法 my txt background例如 my txt background false 文本字段my txt没有背景填充 常用指令 例 制作数字倒计时效果 预览效果 打开源文件 数字倒计时效果 尺寸为250 200像素 创建3个图层 分别命名为背景 文本显示和AS 在背景图层上 创建一个背景图形效果 创建影片文档 数字倒计时效果 在 文本显示 图层 要创建3个静态文本框和1个动态文本框 创建动态文本 8 1 2输入文本 输入文本可以接受用户输入的文本 是响应键盘事件的一种 是人机交互的工具 输入文本最重要的是变量名 输入文本对象也具有text属性 概述 8 2组件 添加和设置组件的方法用动作脚本控制组件UI组件详解 8 2 1添加和设置组件的方法 在 组件 面板中存储和管理组件 执行 窗口 组件 命令 可以打开或者关闭 组件 面板 组件 8 2 1添加和设置组件的方法 组件的引用方法 用鼠标将 组件 面板中的组件拖放到场景上引用到场景上的组件实例 通常都需要先设置它的属性和参数 引用组件和设置组件参数 8 2 1添加和设置组件的方法 组件实例的外形可以通过 任意变形工具 来实现 在删除组件实例时 除了将场景上的组件实例删除外 还要打开 库 面板 将其中的编译剪辑也删除掉 更改组件外形和删除组件 8 2 2用动作脚本控制组件 用Action对组件进一步编程控制的方法 使用on 处理函数使用一个调度程序 侦听器事件模型 控制组件 8 2 2用动作脚本控制组件 打开 组件 面板 将其中的复选框组件 CheckBox 拖放一个到场景上 使实例处于被选中状态 在 属性 面板中 定义该实例的名称为 复选框实例1 创建复选框组件实例 8 2 2用动作脚本控制组件 在 属性 面板中 单击 参数 按钮 更改 Label 参数为 复选框 其他参数默认 设置复选框实例参数 8 2 2用动作脚本控制组件 如果不用on 函数 编程的一般形式为 listenerObject newObject 先定义一个侦听器对象listenerObject click function eventObject 为侦听器对象上的click事件定义一个函数 函数内部可以通过eventObject对象的各种属性和方法来响应click事件 编程 8 2 3UI组件详解 按钮是任何表单或Web应用程序的一个基础部分 每当需要让用户启动一个事件时 都可以使用按钮 Button组件是可调整大小的矩形按钮 可以给按钮添加一个自定义图标 按钮组件 8 2 3UI组件详解 可以设置Button组件的参数有 label 设置按钮上文本的值 Icon 给按钮添加自定义图标 Toggle 将按钮转变为切换开关 Selected 如果切换参数的值是true 则该参数指定是按下 true 还是释放 false 按钮 LabelPlacement 确定按钮上的标签文本相对于图标的方向 按钮组件 8 2 3UI组件详解 在需要从列表中选择一项的表单或应用程序中 都可以使用ComboBox组件 比较复杂的情况 使用可编辑的组合框 组合框组件由3个子组件组成 Button组件TextInput组件和List组件 组合框组件 8 2 3UI组件详解 可以设置ComboBox组件的参数有 editable 确定ComboBox组件是可编辑的 true 还是只能选择的 false Labels 用一个文本值数组填充ComboBox组件 Data 将一个数据值与ComboBox组件中的每个项目相关联 RowCount 设置在不使用滚动条的情况下一次最多可以显示的项目数 组合框组件 8 2 3UI组件详解 复选框是任何表单或Web应用程序中的一个基础部分 当需要收集一组非相互排斥的true或false值时 都可以使用复选框 复选框组件是一个可以选中或取消选中的方框 可以在应用程序中启用或者禁用复选框 复选框组件 8 2 3UI组件详解 可以设置CheckBox组件的参数有 label 设置复选框上文本的值 默认值为CheckBox Selected 将复选框的初始值设为选中 true 或取消选中 false LabelPlacement 确定复选框上标签文本的方向 该参数可以是下列4个值之一 left right top或bottom 默认值是right 复选框组件 8 2 3UI组件详解 List组件是一个可滚动的单选或多选列表框 在应用程序中 用户可以建立一个列表 以便用户可以在其中选择一项或多项 列表框组件 8 2 3UI组件详解 可以设置List组件的参数有 data 填充列表数据的数组值 默认值为 空数组 Labels 填充列表的标签值的文本数组值 默认值为 空数组 MultipleSelection 一个布尔值 它指明是 true 否 false 可以选择多个值 默认值为false RowHeight 指明每行的高度 以像素为单位 默认值为20 列表框组件 8 2 3UI组件详解 一个标签组件就是一行文本 可以指定一个标签采用Html格式 也可以控制标签的对齐和大小 Label组件没有边框 不能具有焦点 并且不广播任何事件 在应用程序中 经常使用一个Label组件为另一个组件创建文本标签 标签组件 8 2 3UI组件详解 可以设置Label组件的参数有 text 指明标签的文本 默认值为Label html 指明标签是 true 否 false 采用html格式 autoSize 指明标签的大小和对齐方式应如何适应文本 默认值为none 参数 None left center right 标签组件 8 2 3UI组件详解 Loader组件是一个容器 可显示SWF或JPEG文件 可以缩放加载器的内容 或者调整加载器自身的大小来匹配内容的大小 在程序运行时加载内容并监视加载进度 Loader组件不能接收焦点 但Loader组件中加载的内容可以接受焦点 并且可以有自己的焦点交互操作 加载组件 8 2 3UI组件详解 可以设置Loader组件的参数有 autoLoad 指明内容是应该自动加载 true 还是应该等到调用Loader load 方法时再进行加载 false 默认值为true contentPath 一个绝对或相对的URL 指明要加载到加载器的文件scaleContent 指明是内容缩放以适应加载器 true 还是加载器进行缩放以适应内容 false 默认值为true 加载组件 8 2 3UI组件详解 NumericStepper组件允许用户逐个通过一组经过排序的数字 该组件由显示在上下箭头按钮旁边的数字组成 当单击上下箭头按钮时 数字将根据stepSize参数的值增大或减小 直到松开鼠标按钮或达到最大 最小值为止 步进器NumericStepper组件 8 2 3UI组件详解 可以设置NumericStepper组件的参数有 value 设置当前步进的值 默认值为0 minimum 设置步进的最小值 默认值为0 maximum 设置步进的最大值 默认值为10 stepSize 设置步进的变化单位 默认值为1 步进器NumericStepper组件 8 2 3UI组件详解 ProgressBar组件在用户等待加载内容时 会显示加载进程 进程栏允许在内容加载过程中显示内容的进程 进程栏组件 8 2 3UI组件详解 可以设置ProgressBar组件的参数有 mode 进度栏运行的模式 Source 一个要转换为对象的字符串 它表示要绑定源的实例名 Direction 进度栏填充的方向 Label 指明加载进度的文本 labelPlacement 与进程栏相关的标签位置 Conversion 在显示标签字符串中的 1和 2的值之前 用这些值除以该数字 进程栏组件 8 2 3UI组件详解 使用单选按钮 RadioButton 组件可以强制用户只能选择一组选项中的一项 RadioButton组件必须用于至少有两个RadioButton实例的组 可以启用或禁用单选按钮 在禁用状态下 单选按钮不接收鼠标或键盘输入 单选按钮组件 8 2 3UI组件详解 可以设置ProgressBar组件的参数有 label 设置按钮上的文本值 默认值为 RadioButton 单选按钮 data 与单选按钮相关的值 没有默认值 groupName 单选按钮的组名称 默认值为radioGroup Selected 将单选按钮的初始值设置为被选中 true 或取消选中 false labelPlacement 确定按钮上标签文本的方向 单选按钮组件 8 2 3UI组件详解 在需要多行文本字段的地方都可使用文本域 TextArea 组件 默认情况下 显示在TextArea组件中的多行文字可以自动换行 TextArea组件中还可以显示html格式的文本 文本域组件 8 2 3UI组件详解 可以设置TextArea组件的参数有 text 指明TextArea的内容 html 指明文本是 true 否 false 采用HTML格式 默认值为false editable 指明TextArea组件是 true 否 false 可编辑 默认值为true wordWrap 指明文本是 true 否 false 自动换行 默认值为true 文本域组件 例 制作判断是非的程序 预览效果 打开源文件 8 2 3UI组件详解 如果需要加载的内容过多 可以使用滚动窗格来显示这些内容滚动窗格 ScrollPane 组件可以实现在一个可滚动区域中显示影片剪辑 JPEG文件和SWF文件 可以通过将scrollDrag参数设为true来允许用户在窗格中拖动内容 滚动窗格组件 8 2 3UI组件详解 在需要单行文本字段时 都可以使用单行文本 TextInput 组件 TextInput组件可以采用HTML格式 或作为掩饰文本的密码字段 在应用程序中 TextInput组件可以被启用或者禁用 单行文本组件 8 2 3UI组件详解 可以设置TextInput组件的参数有 text 指定TextInput的内容 editable 指明TextInput组件是 true 否 false 可编辑 默认值为true password 指明字段是 true 否 false 为密码字段 默认值为false 单行文本组件 例 制作用户登陆的程序 预览效果 打开源文件 8 2 3UI组件详解 在应用程序中创建窗口