Setting a complete effect on an Image control in Flex

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.

View MXML

<?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 /&gt block, as seen in the following example:

View MXML

<?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:

View MXML

<?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:

View MXML

<?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>

5 thoughts on “Setting a complete effect on an Image control in Flex

  1. 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”

  2. @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;
                }
            }
        }
    }
    
  3. hi i am a young flex developer,
    i am using swf loader to call another mxml in a host mxml,
    can i set any loading…. effect for the swf loader?

Comments are closed.