欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

小菜学Flex2(二 currentState初步使用)

系统研究 夜阑小雨 1064℃ 0评论

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

样例展现:

转载请注明:夜阑小雨 » 小菜学Flex2(二 currentState初步使用)

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址