Sunday, November 14, 2010

Playing with Flex4 UI effects

Just read a nice article on Adobe Developer connection about graphics effects supported in Flex4. Here is the link on Flex4 Basic effects. In programming context the effects are related to animations. One important point to remember is that the effects should be defined under <fx:Declarations> section.


Here is the sample code:
<?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="450" minHeight="350">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Parallel id="parallelEffects" target="{myPanel}">
<s:Rotate3D angleXFrom="0" angleXTo="360"/>
</s:Parallel>
</fx:Declarations>

<s:layout>
<s:BasicLayout/>
</s:layout>

<s:Panel id="myPanel" title="Hindi Poem by Harivansh" x="50" y="50" width="300" height="300" chromeColor="0xCCCC00">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<s:Label fontSize="24" text=" कहते हैं तारे गाते हैं! "/>
<s:Label text="--हरिवंश राय-; "/>
<s:Label text="कहते हैं तारे गाते हैं! सन्नाटा वसुधा पर छाया, नभ में हमने कान लगाया, फिर भी अगणित कंठों का यह राग नहीं हम सुन पाते हैं! कहते हैं तारे गाते हैं! "/>
<s:Button label="Click Me" click="parallelEffects.play();"/>
</s:Panel>
</s:Application>

No comments: