The following example shows how you can add a complete effect on a Flex Image control by setting the completeEffect effect using MXML, CSS, or ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function button_click(evt:MouseEvent):void {
image.load("assets/Fx.png");
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Load Image"
click="button_click(event);" />
</mx:ApplicationControlBar>
<mx:Image id="image"
completeEffect="Fade"
maintainAspectRatio="true"
width="100%"
height="100%" />
</mx:Application>
View source is enabled in the following example.
You can also set the completeEffect effect using an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function button_click(evt:MouseEvent):void {
image.load("assets/Fx.png");
}
]]>
</mx:Script>
<mx:Style>
Image {
completeEffect: Fade;
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Load Image"
click="button_click(event);" />
</mx:ApplicationControlBar>
<mx:Image id="image"
maintainAspectRatio="true"
width="100%"
height="100%" />
</mx:Application>
Or, you can set the completeEffect effect using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.effects.*;
private function init():void {
image.setStyle("completeEffect", Fade);
}
private function button_click(evt:MouseEvent):void {
image.load("assets/Fx.png");
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Load Image"
click="button_click(event);" />
</mx:ApplicationControlBar>
<mx:Image id="image"
maintainAspectRatio="true"
width="100%"
height="100%"
initialize="init();" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.ApplicationControlBar;
import mx.controls.Button;
import mx.controls.Image;
import mx.effects.*;
private var button:Button;
private var image:Image;
private function init():void {
button = new Button();
button.label = "Load Image";
button.addEventListener(MouseEvent.CLICK, button_click);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(button);
Application.application.addChildAt(appControlBar, 0);
image = new Image();
image.maintainAspectRatio = true;
image.percentWidth = 100;
image.percentHeight = 100;
image.setStyle("completeEffect", Fade);
addChild(image);
}
private function button_click(evt:MouseEvent):void {
image.load("assets/Fx.png");
}
]]>
</mx:Script>
</mx:Application>
{ 4 comments… read them below or add one }
nice, is there a way to add fadeOut for hideEffect ?
where can I find the value for effects? such as you used in your script “Face”
Nice post!
This is a really nice, simple example – thanks!
@cool
I’ve wanted to implement the same thing and I’ve done this by adding a custom effect to a class extending Image called sourceChangingEffect. The component shouldn’t be named Photo but in this case I was using it to display Photo objects. Feel to try it out. I’m not sure if I have it completely spot on but some testing shows it works well.
package com.arc90.fresh.controls { import flash.events.Event; import mx.controls.Image; import mx.core.mx_internal; import mx.effects.EffectManager; import mx.events.EffectEvent; import mx.styles.StyleManager; use namespace mx_internal; //-------------------------------------- // Effects //-------------------------------------- /** * Played when the source is changed but before it is replaced with * the new provided source. */ [Effect(name="sourceChangingEffect", event="sourceChanging")] /** * */ public class Photo extends Image { //----------------------------------------------------------------- // // Class variables // //----------------------------------------------------------------- /** * @private * Trigger when static instance is created to set defaults. */ private static var classConstructed:Boolean = constructClass(); //----------------------------------------------------------------- // // Class methods // //----------------------------------------------------------------- /** * @private * Triggered to run when static instance is created so defaults * are set. */ private static function constructClass():Boolean { EffectManager.registerEffectTrigger("sourceChangingEffect", "sourceChanging"); return true; } //----------------------------------------------------------------- // // Variables // //----------------------------------------------------------------- /** * Storage for the boolean indicating that a sourceChangingEffect the new * the new been specified. */ protected var hasSourceChangingEffect:Boolean = false; /** * Storage for the new source property value. When a * sourceChangingEffect style is defined we need to temporarily * store the new source before actually committing it. Once the * effect is done then we commit the new source value. */ protected var newSource:Object; //----------------------------------------------------------------- // // Constructor // //----------------------------------------------------------------- /** * Constructor. */ public function Photo() { super(); } //----------------------------------------------------------------- // // Overridden properties // //----------------------------------------------------------------- //---------------------------------- // source //---------------------------------- /** * @private */ private var sourceChanged:Boolean = false; /** * @private */ override public function set source(value:Object):void { if (value == source) return; // if we made it this far then we have changed the source, if // we'vebeen given a sourceChangingEffect style then we need // to wait before committing the new source value if (StyleManager.isValidStyleValue(getStyle("sourceChangingEffect"))) { if (isEffectStarted) { removeEventListener(EffectEvent.EFFECT_END, effectEndHandler); endEffectsStarted(); } // if source wasn't defined then we are setting it for the // first time if (!source) super.source = value; else { hasSourceChangingEffect = true; addEventListener(EffectEvent.EFFECT_END, effectEndHandler); dispatchEvent(new Event("sourceChanging")); } } else // otherwise we work as we would normally, just commit new value { hasSourceChangingEffect = false; removeEventListener(EffectEvent.EFFECT_END, effectEndHandler); super.source = value; } newSource = value; } //----------------------------------------------------------------- // // Event handler // //----------------------------------------------------------------- /** * @private */ private function effectEndHandler(event:EffectEvent):void { removeEventListener(EffectEvent.EFFECT_END, effectEndHandler); if (hasSourceChangingEffect) { // now that our effect has finished commit the new source, // the parent (SWFLoader) takes care of everything we need super.source = newSource; } } } }