在这个例子中主要是对flex主要功能的演示,其中包括组件拖放,组件属性修改,绑定,事件,特效。具体内容的详细讲解,再接下来的教程中会一一讲解。
好了,我们现在来做我们的第一个小程序
1、先拖一个Panel带我们的舞台
2、在上面放两个Text控件,一个Label ,一个TextInput,一个button,如下图
3、在右面的属性面板中修改这些元素的属性,我们修改一些这组件的文字和id,如下图
4、让我们打开Source面板,IDE已经在这里给我们写好了各个组件的定义,我们刚才在属性面板上的修改,也被添加到这里
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="159" y="38" width="360" height="270" layout="absolute"> <mx:Button x="130" y="133" label="魔法"/> <mx:Text x="130" y="41" text="Hello,somebody" id="hello"/> <mx:TextInput x="88" y="88" id="nameTxb"/> <mx:Label x="45" y="90" text="姓名"/> <mx:Text x="130" y="67" text="Some Magic" id="magic"/> </mx:Panel> </mx:Application>
5、我们把Hello的Text的Text属性修改为 text="Hello,{nameTxb.text}",运行程序,在姓名的输入框输入文字,你看到有什么变化?恭喜你,你已经学会了flex里的绑定。是不是很简单?flex里的绑定很灵活,这会大大加快我们开发的效率。
<mx:Text x="130" y="41" text="Hello,{nameTxb.text}" id="hello"/>
6、我们还有一个Text,我们想给它点magic,这就要用到Flex的特效
在panel标签前加入
<mx:Blur id="blur" blurXFrom="100" blurXTo="0" />
修改button的click为
<mx:Button x="130" y="133" label="魔法" id="btn" click="blur.play([magic])"/>
好了运行以下程序,点击“魔法”按钮,看看有什么效果