Using the New Animate Class in Flex 4 (Gumbo) to Animate an Icon

9 Sep
2008

Here is a simple Example of How you can animate an Icon using the New Flex 4 effects. It is pretty simple and doesn’t require any explanations. So let’s Jump into the example Need Flash Player 10 to view it and Make sure to visit the Forums if you have any questions.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:adobe/flex/halo"
    xmlns="http://ns.adobe.com/mxml/2009"
    xmlns:ns="library:adobe/flex/gumbo" xmlns:local="*" 
        backgroundColor="0xFFFFFF"
    >
     <Declarations>
     	<ns:Animate id="myAnimate">
     		<ns:propertyValuesList>
     			<ns:PropertyValuesHolder property="rotationX" values="[0,360]"/>
     			<ns:PropertyValuesHolder property="alpha" values="[.1,1]"/>
     			<ns:PropertyValuesHolder property="rotationZ" values="[0,360]"/>
     			<ns:PropertyValuesHolder property="rotationY" values="[0,360]"/>
     		</ns:propertyValuesList>
     	</ns:Animate>
     </Declarations>
     <Script>
     	<![CDATA[
 
     		private function onClick():void
     		{
     			myAnimate.play([airIconImage]);
     		}
 
     	]]>
     </Script>
 
   <mx:Image source="@Embed('assets/air.jpg')" id="airIconImage"/>
   <mx:Button label="Click Here to Trigger the Effect" click="onClick()"/>
 
</mx:Application>