The following example shows how you can set effects on a Flex Image control using ActionScript by setting the showEffect and hideEffect effects using the setStyle() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
private function init():void {
img.setStyle("showEffect", rotate);
img.setStyle("hideEffect", fade);
}
]]>
</mx:Script>
<mx:Fade id="fade" />
<mx:Rotate id="rotate"
angleFrom="-180"
angleTo="0"
easingFunction="Elastic.easeInOut"
duration="2000" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="visible:">
<mx:ToggleButtonBar id="toggleButtonBar"
itemClick="img.visible = event.item.data;">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Show" data="true" />
<mx:Object label="Hide" data="false" />
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Image id="img"
source="@Embed('assets/flashplayer_icon.jpg')"
width="100"
height="100" />
</mx:Application>
View source is enabled in the following example.
Or, you can also create the effect using ActionScript instead of MXML, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.effects.Fade;
import mx.effects.Rotate;
private var fade:Fade;
private var rotate:Rotate;
private function init():void {
// Fade effect
fade = new Fade();
// Rotate effect
rotate = new Rotate();
rotate.angleFrom = -180;
rotate.angleTo = 0;
rotate.easingFunction = Elastic.easeInOut;
rotate.duration = 2000;
img.setStyle("showEffect", rotate);
img.setStyle("hideEffect", fade);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="visible:">
<mx:ToggleButtonBar id="toggleButtonBar"
itemClick="img.visible = event.item.data;">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Show" data="true" />
<mx:Object label="Hide" data="false" />
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Image id="img"
source="@Embed('assets/flashplayer_icon.jpg')"
width="100"
height="100" />
</mx:Application>
View source is enabled in the following example.
FlexExample is an excellent blog! If you add a previous/next post buttons on top of every post then it will be perfect. Sometimes I want to read post by post without get back to main page
thanks a lot!
look at the Recent Posts list on the right hand side. No need to go back to the main page, use the links on the right hand side.
Plus the ‘tags’ links are priceless.
Awesome blog… awaiting all the examples coming for the new Flex 3 features.
paul,
You can also use the previous/next navigation below the comments text area below. There should be links to the previous and next entries (if available).
Peter
CAn you apply this effects for other components,like a datagrid??
thks
Paulo
http://interactividades.blogspot.com
Paulo,
Yes.
Peter
Hi this is cool man …
thanks a lot…
:)
~sara~
http://sara-intop.blogspot.com
hiiiiiiiii its really a gud one i really appreciate it a lot……
wonderful!! this is exactly what i need.
thanks
This is really good one.
Thanks for the example! One question: how do you handle the effect if for example on a Fade effect the visible property is set by ActionScript? If a displayobject is set to visible=false, then the effect is applied and then visible is set to true all on the same frame it doesn’t work. One frame needs to pass before setting visible to true again. I could use callLater() but I wonder if there is a better solution for this?
Hi Peter.
I’m trying to use the Fade effect on a Menu, but it’s not working as expected - I can get the Menu to fade away nicely, but the items in the Menu stay with an alpha of 1 until the Menu background fades completely, then they ‘blink’ away! Doesn’t look too nice.
I’m using an array of objects to populate the Menu in Actionscript, so therefore I can’t apply a Fade effect to the actual dataprovider or anything.
Any tips/pointers?
Cheers,
K.
Kristian,
You can’t fade text, so you will need to embed your font, if you aren’t already.
I don’t think I have any examples of fading Menu control’s with embedded fonts, but there should be several examples of generic font embedding.
Peter
I’ve recently been messing with stuff like this, and have read the documentation and such of how this is all supposed to work…
My current problem is that when I use the getStyle() method to get the “openDuration” and “showEffect” of a Menu object, it always returns null… I was originally doing this to be able to restore these styles, but getting null back every time didn’t let me access the toString() method of the objects, and would throw Errors.
Also, the documentation also states that setting the values to null will default them, but with my showEffect and openDuration, it doesn’t work…
Any ideas? Is this a bug maybe?
OK I figured this out… SOrta…
You can’t always get the value apparently…
So the livedocs say to set the value to null, such as:
myMenu.setStyle(”showEffect”, null);
But, that hardly works on extended class; instead, you should just use .clearStyle(”showEffect”)…
This seems to work every time…
just my $0.02!