小菜学Flex2（二 currentState初步使用）

currentState意思是当前的状态，Flex可以设置当前页面的多个状态（states），只需要将页面的currentState属性设置为其中某个状态，就会让当前页面变成这个状态时的样式，其中可以设置由A状态转化（transitions）为B状态的过程
下面是实现的代码

1. 38-39为一个Panel，ID为catalogPanel，其中有Click事件
2. 5-15行，为AS3脚本，目的是执行在点击Panel时的改变当前的状态
3. 19-26行为状态集，分别为toLeft和toRight两个状态，toLeft就是设置目标为catalogPanel的left样式值为1，即让此Panel左边距为1，toRight同理
4. 28-36行为转化集，其中Sequence表示按顺序转化，Parallel表示同时转化，这里由于只有Move一种转化，所以不存在顺序或同时转化的情况，duration表示延迟的时间，毫秒为单位。

总的来说，此段代码的意思就是最开始时，即在Application里设置当前状态为toLeft，所以Panel在左边。然后当点击Panel时，Panel的状态变为了toRight，由于设置了变化过程是Move，在1000毫秒完成，所以就有了移动的效果，再次点击，状态又改回为toLeft，则Panal就移回了左侧。

 1 <? xml version="1.0" encoding="utf-8" ?>
 2 < mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  currentState ="toLeft" >
 3      < mx:Script >
 4          <![CDATA[
 5             public function movePanel(): void
 6             {
 7                 if (currentState == 'toLeft')
 8                 {
 9                     currentState = 'toRight';
10                 }
11                 else
12                 {
13                     currentState = 'toLeft';
14                 }
15             }
16          ]]>
17      </ mx:Script >
18     
19      < mx:states >
20         < mx:State  name ="toLeft" >
21            < mx:SetStyle  target ="{catalogPanel}"  name ="left"  value ="1" />
22         </ mx:State >         
23         < mx:State  name ="toRight" >
24             < mx:SetStyle  target ="{catalogPanel}"  name ="right"  value ="1" />
25          </ mx:State >
26      </ mx:states >
27     
28      < mx:transitions >
29         < mx:Transition  fromState ="*"  toState ="*" >
30             < mx:Sequence  id ="t1"  target ="{catalogPanel}" >             
31                 < mx:Parallel >
32                       < mx:Move  duration ="1000" />
33                 </ mx:Parallel >     
34              </ mx:Sequence >
35          </ mx:Transition >
36      </ mx:transitions >
37     
38      < mx:Panel  id ="catalogPanel"  width ="400"  height ="300"  x ="0"  y ="0"  click ="movePanel();" >
39      </ mx:Panel >
40     
41 </ mx:Application >
42

样例展现：