Flex Examples
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>
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
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; } } } }