Flex - Effects

출처

http://airdocs.kr/docs/flex2/langref/mx/effects/package-detail.html
http://blog.keutgens.de/download/flexEffectExplorer/current/swf/TransitionsAndEffects.html

Class	설명
Blur	컴퍼넌트에 애매하게 해 효과를 적용할 수 있습니다.
Dissolve	컴퍼넌트가 투명으로부터 불투명하게, 또는 불투명으로부터 투명하게 추이하는 것 같은 애니메이션 효과를 설정합니다.
Fade	투명으로부터 불투명하게, 또는 불투명으로부터 투명하게 변화시킵니다.
Glow	컴퍼넌트에 발광 효과를 적용할 수 있습니다.
Move	지정된 시간 간격으로 컴퍼넌트의 위치를 변경합니다.
Resize	지정된 시간 간격으로 컴퍼넌트의 폭, 높이, 혹은 그 양쪽 모두의 값수를 변경합니다.
Rotate	특정의 점을 중심으로서 컴퍼넌트를 회전시킵니다.
Zoom	중심점을 기준에 object를 확대 또는 축소합니다.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

  <!-- http://airdocs.kr/docs/flex2/langref/mx/effects/Fade.html -->
  <!-- Simple example to demonstrate the Fade effect. -->
  <!-- 0.0 = 투명 / 1.0 = 불투명 -->
 <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <mx:Panel x="10" y="10" width="122" height="177" borderStyle="none">
    <mx:Label text="Fade effect." fontSize="14" visible="{cb1.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
    <mx:Image source="fx.gif" visible="{cb1.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
    <mx:CheckBox id="cb1" label="visible" selected="true"/>
  </mx:Panel>
   
  <!-- http://airdocs.kr/docs/flex2/langref/mx/effects/Blur.html -->
  <!-- Simple example to demonstrate the Blur effect. -->
  <!-- blurXFrom, blurXTo, blurYFrom, blurYTo 값의 범위 0.0 ~ 255.0 -->
  <mx:Blur id="blurImage" duration="1000" blurXFrom="0.0" blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0"/>
  <mx:Blur id="unblurImage" duration="1000" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/>
  <mx:Panel x="140" y="10" width="122" height="177" borderStyle="none">
    <mx:Label text="Blur effect." fontSize="14" visible="{cb2.selected}" hideEffect="{blurImage}" showEffect="{unblurImage}"/>
    <mx:Image source="fx.gif" mouseDownEffect="{blurImage}" mouseUpEffect="{unblurImage}"/>
    <mx:CheckBox id="cb2" label="visible" selected="true"/>
  </mx:Panel>
 
</mx:Application>