《文本字段与组件》PPT课件.ppt

第十一章 文本字段与组件,Flash动画制作,1,2,Flash动画制作,每次运动“随机产生一位数的加法算式”都会得到一个不同的一位数加法，该实例分别用到了静态文本、动态文本和输入文本 。,案例1随机产生一位数加法算式,图11-1 随机产生一位数加法算式完成效果图,3,Flash动画制作,相关理论,1 动态文本,（1）创建动态文本的方法,选择“文本工具”，在场景中拖出一个文本框，在“属性”面板中的“文本类型”下拉列表中选择“动态文本” 。,图11-2 动态文本属性设置,4,Flash动画制作,（2）为动态文本赋值,利用变量给动态文本赋值。用“文本工具”在场景中拖出一个文本框，选中该文本框，在“属性”面板的文本类型中选择“动态文本”，定义一个变量名。,利用动态文本对象的text属性给变量赋值。选择“文本工具”在场景中拖出一个文本框，选中该文本框，在“属性”面板的文本类型中选择“动态文本”，并为这个动态文本命名实例名,相关理论,5,Flash动画制作,1.输入文本,（1）创建输入文本的方法,选择“文本工具”，在场景中拖出一个文本框，在“属性”面板中的“文本类型”下拉列表中选择“输入文本” 。,注：输入文本最重要的是变量名，输入文本变量和其他变量类似，设置输入文本时要给它一个变量名称，以在需要时使用。,相关理论,图11-3 输入文本属性设置,Flash动画制作,案例1随机产生一位数加法算式,1新建文档，设置背景,2设置文本,3设置动作脚本,X1=int(random(10); X2=int(random(10);,动态文本“x1”的随机值,动态文本“x2”的随机值,图11-4 背景设置,图11-5 文本设置,7,Flash动画制作,4设置判断按钮,on(press) if（jg=x1+x2） trace(“答对了！你很棒！“)； else trace(“答错了！再来一次！“)； ,判断按钮上的动作脚本如下：,5测试影片并保存文件,案例1随机产生一位数加法算式,图11-6 测试结果,8,Flash动画制作,有的时候需要用户自己动手填写一些个人信息，当信息填写有误时要重新填写，采用“组件”可以方便地实现这些功能 。,案例2注册页面,图11-7 注册页面完成效果图,9,Flash动画制作,相关知识,1 添加组件的方法,Flash在“组件”面板中存储和管理组件， 选择【窗口】|【组件】命令，可以打 开或者关闭“组件”面板。,2 UI组件详解,图11-8 组件面板,10,Flash动画制作,（1）按钮组件,按钮（Button）是任何表单或Web应用程序的一个基础部分。每当需要让用户启动一个事件时，都可以使用按钮。,在“属性”面板中，可以设置Button组件的参数如下：,icon：给按钮添加自定义图标。,label：设置按钮上文本的值，默认值为Button。,labelPlacement：设置按钮上的标签文本相对于图标的方向，该参数可以是left、right、top或bottom，默认值为right。,相关知识,11,Flash动画制作,（2）下拉列表框组件,需要从列表中选择一项的表单或应用程序，可以使用组合框（ComboBox）组件。组合框组件由3个子组件组成，分别是Button组件、TextInput组件和List组件。组合框组件可以是静态的，也可以是可编辑的。使用静态组合框，,在“属性”面板中，可以设置ComboBox组件的参数如下：,editable：确定ComboBox组件的可编辑（true），还是只能选择（false），默认值为false。,toggle：将按钮转变为切换开关。如果值为true，则按钮在单 击后将保持按下状态，并在再次单击时返回到弹起状态，如果值为false，则按钮行为与一般的按钮相同，默认值为 false。,selected：切换按钮按下和释放两种不同的显示状态。默认值 为false。,相关知识,12,Flash动画制作,data：将一个数值与ComboBox组件中的每个项目相关联。该数据参数是一个数组。,rowCount：设置在不使用滚动条的情况下，一次最多可以显示的项目数，默认值为5。,labels：用一个文本值数组填充ComboBox组件。在“参数”面板中单击Labels参数后面的按钮，在弹出的“值”对话框中添加文本值数组,相关知识,图11-9 创建文本值数组,13,Flash动画制作,（3）复选框组件,复选框（CheckBox）是任何表单或Web应用程序中的一个基础部分。每当需要收集一组非相互排斥的true或false值时，都可以使用复选框。,在“属性”面板中，可以设置CheckBox组件的参数如下：,label：设置复选框上文本的值，默认值为CheckBox。,selected：将复选框的初始值设为选中（true）或取消选中（false）。,labelPlacement：确定复选框上标签文本的方向，该参数可以是left、right、top或bottom，默认值是right。,相关知识,14,Flash动画制作,（4）列表框组件,列表框（List）组件是一个可滚动的单选或多选列表框。在应用程序中，用户可以建立一个列表，以便用户可以选择一项或多项。,在“属性”面板中可以设置List组件的参数如下：,data：填充列表数据的数组值，默认值为“”（空数组）。双击它会弹出“值”对话框，在其中可以添加列表数据的数组值。,labels：填充列表的标签值的文本数组值，默认值为“”（空数组）。双击它会弹出“值”对话框，在其中可以添加列表的标签值。,multipleSelection：一个布尔值，它指明是（true）否（false）可以选择多个值，默认值为false。,rowHeight：用于指明每行的高度，以像素为单位，默认值为20。,相关知识,15,Flash动画制作,（5）文本标签组件,一个标签（Label）组件就是一行文本。在应用程序中常使用一个Label组件为另一个组件创建文本标签。,在“属性”面板中，可以设置Label组件的参数如下：,text：指明标签的文本，默认值为Label。,html：设置标签是（true）否（false）采用html格式。如果将html参数设置为true，就不能用样式来设定Label的格式，默认值为false。,相关知识,16,Flash动画制作,autoSize：设置标签的大小和对齐方式如何适应文本，默认值为none。参数可以是如下4个值之一。 none：标签不会调整大小或对齐方式来适应文本。 left：标签的右边和底部，可以调整大小以适应文本；左边和上边不会进行调整。 center：标签的底部会调整大小以适应文本。标签的水平中心和它原始的水平中心位置对齐。 right：标签的左边和底部会调整大小以适应文本；上边和右边不会进行调整。,相关知识,17,Flash动画制作,（6）单选按钮组件,单选按钮（RadioButton）是任何表单或Web应用程序中的一个基础部分。如果用户需要从一组选项中选择一个选项，可以使用单选按钮。,在“属性”面板中，可以设置RadioButton组件的参数如下：,data：单选按钮相关的值，没有默认值。,groupName：单选按钮的组名称，默认值为radioGroup。,label：设置按钮上的文本值，默认值为Radio Button（单选按钮）。,相关知识,18,Flash动画制作,labelPlacement：确定按钮上标签文本的方向。该参数可以是left、right、top或bottom，默认值为right。,selected：将单选按钮的初始值设置为被选中（true）或取消选中（false）。被选中的单选按钮，会显示一个圆点。一个组内只能有一个单选按钮有被选中的值true。如果组内有多个单选按钮被设置为true，则会选中最后实例化的单选按钮。默认值为false。,（7）文本域组件,需要多行文本字段的任何地方都可以使用文本域（TextArea）组件。默认情况下，显示在TextArea组件中的多行文字可以自动换行。在TextArea组件中，还可以显示html格式的文本（由html参数控制）。单行文本字段使用TextInput组件。,相关知识,19,Flash动画制作,在“属性”面板中，设置TextArea组件的参数如下：,text：设置TextArea的内容。用户无法在“属性”面板或“组件检查器”面板中使用“Enter”键，默认值为空字符串。,html：设置文本是（true）否（false）采用html格式，默认值为false。,editable：设置TextArea组件是（true）否（false）可编辑，默认值为true。,wordWrap：设置文本是（true）否（false）自动换行，默认值为true。,相关知识,20,Flash动画制作,（8）加载组件,需要将图片加载到程序界面中或表单中。类似这样的问题都可以用加载（Loader）组件来设计完成。,在“属性”面板中可以设置Loader组件的参数如下：,autoLoed：设置内容是自动加载（true），还是应该等到调用Loader.load()方法时再进行加载（false），默认值为true。,contentPath：一个绝对或相对的URL，用于指明要加载到加载器的文件。,scaleContent：设置内容缩放以适应加载器（true），还是加载器进行缩放以适应内容（false）。默认值为true。,相关知识,21,Flash动画制作,（9）步进器组件,在浏览页面的时候如果想跳转到指定的页数，只要在一个文本框中输入相应的页数值，或者单击文本框旁边的微调按钮，增加或减小文本框中的数值。这种在程序中需要用户选择数值的情况，都可以用步进器（NumericStepper）组件来实现。,在“属性”面板中，可以设置NumericStepper组件的参数值如下：,value：设置当前步进的值，默认值为0。,minimum：设置步进的最小值，默认值为0。,maximum：设置步进的最大值，默认值为0。,stepSize：用于设置步进的变化单位，默认值为1。,相关知识,22,Flash动画制作,（10）进程栏组件,进程栏（ProgressBar）组件用来制作动画预载画面，显示动画加载进度。,在“属性”面板中，设置ProgressBar组件参数如下：,mode：进度栏运行的模式。此值可以是event（事件）、polled（轮询）或manual（手动）。默认值为事件。,souce：要转换为对象的字符串，它表示要绑定源的实例名。,direction：进度栏填充的方向。该值可以是右侧或左侧，默认值为右侧。,label：指明加载进度的文本。,labelPlacement：与进程相关的标签位置。此参数可以是顶部、底部、左侧、右侧或中间，默认值为底部。,相关知识,23,Flash动画制作,（11）滚动窗格组件,如果需要显示的内容很多，而在应用程序中只有很小的空间来显示它，则可以将其加载到滚动窗格（ScrollPane）中。,在“属性”面板中，设置ScrollPane组件的参数如下：,contentPath：设置要加载到滚动窗格中的内容。,hLineScrollSize：设置每次按下箭头按钮时，水平滚动条移动多少个单位，默认值为5。,gPageScrollSize：设置每次按下轨道时，水平滚动条移动多少个单位，默认值为20。,相关知识,24,Flash动画制作,hScrollPolicy：显示水平滚动条，该值可以为on、off或auto，默认值为auto。,vLineScrollSize：设置每次按下箭头按钮时，垂直滚动条移动多少个单位，默认值为5。,vPageScrollSize：设置每次按下轨道时，垂直滚动条移动多少个单位，默认值为20。,vScroolPolicy：显示垂直滚动条，该值可以为on、off或auto，默认值为auto。,相关知识,25,Flash动画制作,（12）单行文本组件,在任何需要单行文本的字段的位置，都可以使用单行文本（TextInput）组件。该组件可以采用html格式，或作为掩饰文本的密码字段。,在“属性”面板中，可以设置TextInput组件的参数如下：,text：设置TextInput的内容。,editable：设置TextInput组件是（true）否（false）可编辑，默认值为true。,password：设置字段是（true）否（false）为密码字段，默认值为false。,相关知识,26,Flash动画制作,案例2注册页面操作步骤,1.新建文件，导入素材到库,2.制作背景、面板,3.利用组件添加面板上的内容,图11-10 背景和面板设置,图11-11 面板上内容设置,27,Flash动画制作,本章小节,Flash中文本有3种不同类型：静态文本、动态文本和输入文本。在实际制作中可以根据需求来选择所需要的类型。 制作Flash页面时需要UI界面设计，通过组件来实现特定的功能，从而简化制作过