2011-05-03 3 views
2

롤오버 효과에 약간의 문제가 있습니다. 모든 것을로드 한 후 처음으로. 그러나 버튼을 두 번 클릭하면 (예 : studyState로 이동 한 다음 Sate1로 돌아가는 경우) bordercontainer에 대한 롤오버 효과가 작동하지 않습니다. 이유가 무엇인지 실마리가 없습니다. 나에게 힌트를 줘.롤오버 작동이 중지됩니다.

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
<fx:Declarations> 
    <s:AnimateColor id="animateColorON" colorPropertyName="backgroundColor" colorFrom="#FFFFFF" colorTo="#e7eae4" duration="300"/> 
    <s:AnimateColor id="animateColorOFF" colorPropertyName="backgroundColor" colorFrom="#e7eae4" colorTo="#FFFFFF" duration="600"/> 
</fx:Declarations> 

<s:transitions> 
    <s:Transition id="t1" autoReverse="true"> 
     <s:CrossFade 
      target="{this}" 
      duration="1500" /> 
    </s:Transition> 
</s:transitions> 
<s:states> 
    <s:State name="State1" /> 
    <s:State name="studyState" /> 
</s:states> 

<s:VGroup id="globalGroup" includeIn="State1" width="100%"> 
    <s:Button label="State1 to studyState" click="this.currentState = 'studyState'" /> 
    <s:BorderContainer width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF"> 
     <s:HGroup width="100%" height="30" verticalAlign="middle" paddingLeft="5" paddingRight="5"> 
      <s:Label id="p_dob_label" text="text" width="55%"/> 
      <s:Label id="p_dob_value" text="text" width="40%" verticalAlign="top" textAlign="right" color="#8DA576"/> 
     </s:HGroup> 
    </s:BorderContainer> 
</s:VGroup> 
<s:VGroup id="studyGroup" includeIn="studyState" width="100%"> 
    <s:Button label="studyState to State1" click="this.currentState = 'State1'" /> 
</s:VGroup> 

</s:Application> 
+0

+1 전체 샘플을 제공합니다. 지금 살펴보고 설명하는 동작을 복제 할 수 있습니다. 예상치 못한 조금의 것 같습니다 – JeffryHouser

답변

2

다음은 수정 사항입니다. 상태가 변경되면 이벤트 리스너를 추가하십시오.

<fx:Script> 
    <![CDATA[ 
     import mx.events.StateChangeEvent; 

     protected function application1_currentStateChangeHandler(event:StateChangeEvent):void 
     { 
      // TODO Auto-generated method stub 
      if(bc){ 
       bc.setStyle('rollOverEffect',animateColorON); 
       bc.setStyle('rollOutEffect',animateColorOFF); 
      } 
     } 

    ]]> 
</fx:Script> 

가 BorderContainer에게 ID를 제공해야합니다 : 수동으로 rollOverEffect 및 rollOutEffect 효과를 설정, 리스너에서

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" currentStateChange="application1_currentStateChangeHandler(event)"> 

: 나는 currentStateChangeevent를 사용합니다. 나는 bc를 사용했다 :

<s:BorderContainer id="bc" width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF" > 

왜 그런 효과가 상실되는지 나는 잘 모른다. 가장 좋은 이론은 ActionScript가 장면 뒤에서 어떻게 생성되는지와 관련이 있다는 것입니다. rollOverEffect 및 rollOutEffect는 구성 요소의 속성 인 것처럼 보이지만 실제로는 장면 뒤에서 스타일로 구현됩니다. 나는 어떤 이유로, 상태를 전환 할 때 '효과'스타일이 재설정되지 않을 것입니다. 그러나 생성 된 ActionScript를 반드시 확인해야합니다.

+0

고마워요! 비록 이것에 대해 아직도 약간 혼란 스럽지만. 에 rollOver = "bgcolorOver (이벤트)"에 rollOut = "bgcolorOut (이벤트)" 다음이 두 가지 기능으로 내가에만 효과를 재생해야 : 난 그냥이 같은 bordercontainer을 수정해야 : – Adam

+0

는 쉬운 방법을 발견 : animateColorON.play ([evt.currentTarget]); 이 방법으로 여러 항목에 색상 애니메이션을 사용할 수 있으며 고유 한 ID를 부여 할 필요가 없으며 상태 변경을 전혀들을 필요가 없습니다! 상태를 변경 한 후에 작동합니다. – Adam