Flash MX 组件的概念
Flash 的发展推动了网络的进步,是Flash给了网络活力与新鲜。现在,Macromedia又给Flash MX 增加了Components UI(UI组件)。有了Components UI后,我们就可以设计功能更加强大的程序,也不必再象以前那样笨拙地设计下拉菜单或是留言板的界面了。我们将会给大家具体讲解Components UI的功能、使用方法及使用技巧等。文章的最后,我们还会通过几个实例地讲解来帮助大家理解,消化我们所讲的内容。
其实,现在的组件就是对Flash5中的SmartClips(智能剪辑)进行了功能增强,但它们都还只是一些拥有参数的影片剪辑。不过,与SmartClips不同的是MX中的组件也已经有了自己的方法,新增的Properties面板也使我们能更加方便的对这些组件进行设计。
现在,FlashMX中只有7个简单的Components UI:CheckBox(复选框)、ComboBox(组合框)、ListBox(列表框)、PushButton(按钮)、RadioButton(单选按钮)、ScrollBar(滚动条),ScrollPane(扩展组合框),如图1所示。
在FlashMX中,我们可以使用单个的组件为一个界面提供服务。但更加可能的是,我们将会组合多个组件来制作各种复杂的菜单或是一些高级应用程序等等。当然,假如您愿意的话,您也可以改变组件的样式或是替换它们。
开场就这样吧,下面让我们先来了解了解和组件相关的一些基本概念与知识。等大家有了地基(基础知识),那万丈高楼也就指日可待了。
1. 组件的概念
1.1 熟悉组件
学过VC++的朋友对FlashMX中的组件可能有一种亲切感。虽然我们不能象在VC++中那样轻松地为控件添加成员函数,不过我们也不需要那些复杂的功能和函数,我们需要的只是一些更方便的能够解决问题的方法,FlashMX中组件自带的Methods(方法)可以为我们提供不少解决问题的手段。我们也可以看出FlashMX组件的功能主要还是面对网络设计的。在VC中我们可以使用属性面板轻松地设置控件,在FlashMX中我们也有了可提供方便设置的属性面板,如图2所示。
每个组件都有自己的参数设置面板。按快捷键Ctrl+F3打开Parameters(参数设置)面板后,我们可以在面板中对组件的参数进行设置。单击Properties(属性)切换到属性面板后,我们还可以对组件进行一般的设置,譬如我们可以选中一个组件,然后右键单击它,选择Edit命令,接着我们就可以设置这个组件的透明度或是颜色了
1.2 添加组件
在FlashMX中的Window菜单下选择Components命令,或是按快捷键Ctrl+F7打开库面板,如图3所示。
用鼠标左键按住Components面板中的组件,把它拖拽到场景中。这样,我们就简单地把组件添加到场景中了。然后您可以通过其参数设置面板来设定组件的参数。当然,您也可以通过ActionScript来为组件设定参数,这个我们后面介绍。
现在,细心的朋友可能会问:为什么我的Components面板多出了ImageBox、Slider(Skin 1)和Slider(Skin 2)三个组件。其实,您要是想在您的Components面板中增加几个组件并不是一件困难的事情。首先,您要先设计好您自己的组件,或是找到您所喜欢的组件,然后根据路径Flash MX\First Run\Components找到FlashMX中组件存放的文件Flash UI Components.fla并双击它打开。接着,您只要把您的组件导入Flash UI Components.fla的库中即可。最后重新开启FlashMX,打开Components面板您就可以看见新的组件了。另外,不但是组件,我们还让Components面板显示影片剪辑,如上图3所示。但实际上这并无多大的意义,我只是顺便给大家提一下。
Flash MX组件 内置组件的使用
2.1 CheckBox(复选框)
在许多软件中,复选框组件是经常会被用到的,如Visual C++的资源编辑器中我们就可以看见很多的复选框。复选框可以答应我们选择一个或者多个选项,当某选项被选中后,该复选框的小框里就会出现一个小勾。
我们把Components面板中的CheckBox(复选框)组件拖拽到场景中,然后打开它的参数设置面板,如图5所示
在CheckBox组件的参数面板中,各项参数的功能如下:
Label(组件名称):命名复选框组件,如图7所示。
Initialvalue(初始值):初始化组件的状态为选中(true)或是未选中(false)。Alignment(对齐方式):设置复选框的可选方式。Left:勾选框在左面,right:勾选框在右边。
Change Handler(处理函数):执行用户自己定义的函数,该设置选项的参数为用户定义函数的函数名。在函数被调用前,我们需要对它进行定义。
现在我们看一个简单的组件效果。该效果中,当我们选中组件“CheckBox1”时,组件“CheckBox2”也会同时被选中。当组件“CheckBox1”不被选中的时候,组件“CheckBox2”也不被选中,而且会变成灰色,即该组件不可用,但两个组件的名称都会改变,效果如图8所示。但选择组件“CheckBox2”却不会影响到组件“CheckBox1”,效果如图9所示
设置第一个组合框的参数
____________________________________________________________
在Label参数选项里我们重新命名这个复选框的名字为“Paris”。Change Handler参数选项里设置的“func”字符串就是我们自己定义的一个函数的函数名,也就是这个复选框被执行的时候,这个函数将会被调用。
再拖拽一个复选框组件到场景中,然后在Component Parameters面板进行如图10所示的参数设置。“func2”也是自定义的函数。
现在右键单击场景中的第一帧,然后选择Actions命令,在打开的Actions面板中输入如下代码:
//为CheckBox1创建func函数
function func() {
//复选框被勾选后改变组件名称
CheckBox1.setLabel("巴黎");
//得到复选框的被选状态,复选框被勾选时,n_CheckBox1的值为true
n_CheckBox1 = CheckBox1.getvalue();
//假如复选框未被勾选,则修改组件的名称为“Paris”
if (n_CheckBox1 != true){
CheckBox1.setLabel("Paris");
}
//改变CheckBox2的状态
CheckBox2.setvalue(n_CheckBox1);
CheckBox2.setEnabled(n_CheckBox1);
}
//为CheckBox1创建func2函数,代码含义如上
function func2() {
CheckBox2.setLabel("伦敦");
n_CheckBox2 = CheckBox2.getvalue();
if (n_CheckBox2 != true){
CheckBox2.setLabel("London");
}
}
以上代码中,我们先定义了一个func()函数,这个函数的主要功能是在控制组件CheckBox1的同时,对组件CheckBox2也进行着控制。当我们勾选CheckBox1后,复选框CheckBox2也会被勾选,并同时改变两个组件的名称。当CheckBox1不被勾选时,复选框CheckBox2是不可用的。代码中的getvalue()方法是用来获取组件的可选状态的,其返回值为true或false;方法setEnabled()可以设置组件是否可用,假如组件不可用,则呈现灰色不可用状态;方法setLabel()可以改变组件的名称。
2.2 RadioBox(单选框)
选择不会永远都是多项的,有时我们不得不在多项内容中选取其一,于是与CheckBox相对应的便产生了RadioButton组件。该组件是单一选择项组件,我们可以将一些相关的内容列为一组,然后在该组内选择其中符合自己的一项作为正确结果。
我们把Components面板中的RadioButton(单选框)组件拖拽到场景中,然后打开它的参数设置面板(或Alt+F7调出Component Parameters面板)设置相应参数,如图11所示。
在RadioButton组件的参数面板中,各项参数的功能如下:
Label(组件名称):命名单选框组件。
Initialvalue(初始值):初始化组件的状态为选中(true)或是未选中(false)。
GroupName(组别名称):确定该单选框隶属于哪个组别,同一组内的单选框只能有一种单选框可被激活选中,如选中其一则其它单选框将处于无效状态。
Data(数据信息):选择该单选框之后将产生的数据信息。
LabelPlacement(标签位置):组件名称(Label)在单选框的位置方向。Left:
组件名称将显示在单选框的左边;Right:组件名称将显示在单选框的右边。
Change Handler(处理函数):与CheckBox的Change Handler一样,该设置选项的参数为用户定义函数的函数名,这里将执行用户自己定义的函数,当然在函数被调用前,我们需要对它进行定义。
接下来我们来学习一个简单组件效果,该实例中我们设置了一个radioGroup组别,在这个组里有两个RadioButton,一个为“男”一个为“女”用以判定我们的性别,然后我们还将放置一个动态文本框Sex来显示我们的选择信息。当我们选中组件“RadioMale”时,Sex文本框将显示“先生,您好!”,而当我们选中组件“RadioFemale”时,Sex文本框将显示“女士,您好!”。当然,只要我们选中了其中的一项,另一项单选框的焦点必然将失去
首先我们先拖拽两个RadioButton到场景中,分别将这两个RadioButton的Label设置为“男”、“女”;Initialvalue则都设置为False;GroupName则都设置为radioGroup(注重:这里千万将两个RadioButton的GroupName设置为相同,而且拼写的大小写也应当注重);Data则分别设置为“先生,您好!”与“女士,您好!”;LabelPlacement则都设置为Right;Change Handler则都设置为changeLabel(注重:changeLabel为自定义函数,我们在下面会列出它的代码)。
然后我们在场景中创建一个Dynamic Text(动态文本框),将它的Var设置为Sex。
接下来我们在场景中新建一层ActionScript层用以放置代码,在第一帧要害帧内我们编写了这样一个自定义函数:
//此处的changeLabel即是RadioButton的参数设置中Change Handler处设置的changeLabel
function changeLabel(whichRadio) {
sex= whichRadio.getvalue();
}
由于RadioButton组件其自身加入了Group(组别)的判定,因而我们可以将RadioButton实例中的自定义函数与CheckBox实例中的自定义函数作以比较,我们将很轻易的得出一个结果:RadioButton比起CheckBox省去了对同组选项中许多内容的控制,如Enabled等。
下面是我做出的效果:
点击浏览该文件 点击浏览该文件假如有不对的地方,请高手指出,小的一定改正,并向你学习