Flex Examples » completeEffect http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Playing a sound effect when a ProgressBar control completes in Flex http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/ http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/#comments Tue, 01 Jul 2008 06:55:07 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/ In a previous example, “Setting a complete effect on a ProgressBar control in Flex”, we saw how you could apply an effect that plays once a Flex ProgressBar control completes (reaches 100%).

The following code shows how you can play an embedded sound effect once a Flex ProgressBar control completes using the mx.effects SoundEffect [...]]]> In a previous example, “Setting a complete effect on a ProgressBar control in Flex”, we saw how you could apply an effect that plays once a Flex ProgressBar control completes (reaches 100%).

The following code shows how you can play an embedded sound effect once a Flex ProgressBar control completes using the mx.effects SoundEffect class and the ProgressBar class’s completeEffect effect/style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, slider.maximum);
            }
        ]]>
    </mx:Script>

    <mx:SoundEffect id="ding"
            source="@Embed('ding.mp3')" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="percentComplete:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            completeEffect="{ding}" />

</mx:Application>

View source is enabled in the following example.

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/30/playing-a-sound-effect-when-a-progressbar-control-completes-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.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.controls.ProgressBar;
            import mx.controls.ProgressBarMode;
            import mx.effects.SoundEffect;
            import mx.events.SliderEvent;

            [Embed("ding.mp3")]
            private var dingMP3:Class;

            private var ding:SoundEffect;
            private var slider:HSlider;
            private var progressBar:ProgressBar;

            private function init():void {
                ding = new SoundEffect();
                ding.source = dingMP3;

                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 100;
                slider.value = 0;
                slider.snapInterval = 1;
                slider.tickInterval = 10;
                slider.liveDragging = true;
                slider.setStyle("showtrackHighlight", true);
                slider.addEventListener(SliderEvent.CHANGE,
                            slider_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "percentComplete:";
                formItem.addChild(slider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                progressBar = new ProgressBar();
                progressBar.mode = ProgressBarMode.MANUAL;
                progressBar.setStyle("completeEffect", ding);
                addChild(progressBar);
            }

            private function slider_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, slider.maximum);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/feed/ 3 Setting a complete effect on an Image control in Flex http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/ http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/#comments Mon, 30 Jun 2008 06:51:29 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/29/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"); } [...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/feed/ 0 Setting a complete effect on a ProgressBar control in Flex http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/ http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/#comments Sun, 16 Mar 2008 06:40:34 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/ The following example shows how you can apply an effect that plays once a Flex ProgressBar control completes (reaches 100%).

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/ --> <mx:Application name="ProgressBar_completeEffect_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ private var timer:Timer;   private function init():void { timer = new Timer(10); timer.addEventListener(TimerEvent.TIMER, timer_timer); [...]]]> The following example shows how you can apply an effect that plays once a Flex ProgressBar control completes (reaches 100%).

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_completeEffect_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private var timer:Timer;
 
            private function init():void {
                timer = new Timer(10);
                timer.addEventListener(TimerEvent.TIMER, timer_timer);
            }
 
            private function timer_timer(evt:TimerEvent):void {
                progressBar.setProgress(progressBar.value + 1, 100);
            }
 
            private function progressBar_complete(evt:Event):void {
                timer.stop();
            }
 
            private function resetProgressBar():void {
                progressBar.setProgress(0, 100);
                progressBar.scaleX = 1.0; // 100%
                progressBar.scaleY = 1.0; // 100%
                progressBar.alpha = 1.0; // 100%
            }
 
            private function playProgressBar():void {
                resetProgressBar();
                timer.start();
            }
        ]]>
    </mx:Script>
 
    <mx:Parallel id="progressBar_completeEffect">
        <mx:Fade alphaTo="0.0" />
        <mx:Zoom zoomHeightTo="0" />
    </mx:Parallel>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Play"
                click="playProgressBar();" />
        <mx:Button label="Reset"
                click="resetProgressBar();" />
    </mx:ApplicationControlBar>
 
    <mx:ProgressBar id="progressBar"
            complete="progressBar_complete(event);"
            completeEffect="{progressBar_completeEffect}"
            mode="manual"
            labelPlacement="center"
            width="80%"
            height="60%"
            creationComplete="init();" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/feed/ 6 Displaying images from an XML file using the Repeater component http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/#comments Thu, 04 Oct 2007 06:44:41 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ The following example shows you how to use the Repeater component to display images loaded from an external XML file.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="imagesXML" source="images.xml" /> <mx:Zoom id="zoom" /> <mx:HBox id="hBox"> <mx:Repeater id="rep" dataProvider="{imagesXML.image}"> <mx:Image source="{rep.currentItem.@src}" [...]]]> The following example shows you how to use the Repeater component to display images loaded from an external XML file.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="imagesXML" source="images.xml" />

    <mx:Zoom id="zoom" />

    <mx:HBox id="hBox">
         <mx:Repeater id="rep"
                 dataProvider="{imagesXML.image}">
            <mx:Image source="{rep.currentItem.@src}"
                    toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
                    completeEffect="{zoom}" />
        </mx:Repeater>
    </mx:HBox>

</mx:Application>

images.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<images>
    <image src="images/Button.png" alt="Button" />
    <image src="images/ButtonBar.png" alt="ButtonBar" />
    <image src="images/CheckBox.png" alt="CheckBox" />
    <image src="images/ColorPicker.png" alt="ColorPicker" />
    <image src="images/ComboBox.png" alt="ComboBox" />
    <image src="images/DataGrid.png" alt="DataGrid" />
    <image src="images/DateChooser.png" alt="DateChooser" />
    <image src="images/DateField.png" alt="DateField" />
</images>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/feed/ 12