Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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!
Great job,
I am trying to do the effect with either when the app is loaded. So there is no triggers as such or . Any thoughts? Thanks.
thank mate! ! your example really helped!
but I have a question, how do you apply the effect when you are setting the object on stage with addchild?
thanks!
can this be applied to viewstack childs?
I have saved all the files to my desktop and compiled them to swf.
assests/flashplayer_icon.jpg
f1.as
f1.mxml
When I run it in firefox, the flashplayer_icon rotates but in wrong center, which is top left corner. What am I doing wrong? What should I do to make rotating center same as them image center.
Thanks
my question is , i am working on a project which as one application page and tens of external components imported at run-time .
since the components has buttons and menus , i am able to make any effect coz it should with in any application !!??
This is what i want. Impressive Explanation
flexexamples is a cool blog. I has found anything I want at here. Cam on ban!(Thanks you!)