Flex 系列教程之三 一个简单那的小程序让你了解Flex

在这个例子中主要是对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])"/>

 

好了运行以下程序，点击“魔法”按钮，看看有什么效果