Flex Examples » duration http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Fading two images using the CrossFade effect in Flex 4 http://blog.flexexamples.com/2009/09/21/fading-two-images-using-the-crossfade-effect-in-flex-4/ http://blog.flexexamples.com/2009/09/21/fading-two-images-using-the-crossfade-effect-in-flex-4/#comments Tue, 22 Sep 2009 00:58:16 +0000 Peter deHaan http://blog.flexexamples.com/?p=1898 The following example shows how you can cross fade two bitmap images using the CrossFade effect in Flex 4.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/21/fading-two-images-using-the-crossfade-effect-in-flex-4/ --> <s:Application name="Spark_CrossFade_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <mx:Button id="btn" label="Play CrossFade effect" click="button1_click(event);" /> </s:controlBarContent>   <fx:Script> <![CDATA[ [Embed("assets/fl_player_appicon.jpg")] private const FlashPlayerIcon:Class;   [Embed("assets/fx_appicon.jpg")] private [...]]]> The following example shows how you can cross fade two bitmap images using the CrossFade effect in Flex 4.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/21/fading-two-images-using-the-crossfade-effect-in-flex-4/ -->
<s:Application name="Spark_CrossFade_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <mx:Button id="btn"
                label="Play CrossFade effect"
                click="button1_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            [Embed("assets/fl_player_appicon.jpg")]
            private const FlashPlayerIcon:Class;
 
            [Embed("assets/fx_appicon.jpg")]
            private const FlexPlayerIcon:Class;
 
            protected function button1_click(evt:MouseEvent):void {
                xFade.stop();
                xFade.bitmapFrom = new FlexPlayerIcon().bitmapData;
                xFade.bitmapTo = new FlashPlayerIcon().bitmapData;
                xFade.play();
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:CrossFade id="xFade" target="{logo}" duration="3000" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:Image id="logo" source="{FlexPlayerIcon}" />
    </s:VGroup>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/09/21/fading-two-images-using-the-crossfade-effect-in-flex-4/feed/ 7 Setting the duration of a sound effect in Flex http://blog.flexexamples.com/2008/08/24/setting-the-duration-of-a-sound-effect-in-flex/ http://blog.flexexamples.com/2008/08/24/setting-the-duration-of-a-sound-effect-in-flex/#comments Mon, 25 Aug 2008 06:54:22 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/24/setting-the-duration-of-a-sound-effect-in-flex/ The following example shows how you can set the duration of a sound effect in Flex by setting the duration and useDuration properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/24/setting-the-duration-of-a-sound-effect-in-flex/ --> <mx:Application name="SoundEffect_useDuration_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:SoundEffect id="soundEffect" source="http://www.helpexamples.com/flash/sound/song1.mp3" useDuration="{checkBox.selected}" duration="{slider.value}" /> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> [...]]]> The following example shows how you can set the duration of a sound effect in Flex by setting the duration and useDuration properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/24/setting-the-duration-of-a-sound-effect-in-flex/ -->
<mx:Application name="SoundEffect_useDuration_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:SoundEffect id="soundEffect"
            source="http://www.helpexamples.com/flash/sound/song1.mp3"
            useDuration="{checkBox.selected}"
            duration="{slider.value}" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="useDuration:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
            <mx:FormItem label="duration:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="5000"
                        value="500"
                        snapInterval="100"
                        tickInterval="100"
                        liveDragging="true"
                        showTrackHighlight="true"
                        enabled="{checkBox.selected}" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="btn"
                        label="Play sound effect"
                        mouseDown="soundEffect.stop();"
                        mouseDownEffect="soundEffect" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

</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/08/24/setting-the-duration-of-a-sound-effect-in-flex/ -->
<mx:Application name="SoundEffect_useDuration_test"
        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.Button;
            import mx.controls.CheckBox;
            import mx.controls.HSlider;
            import mx.effects.SoundEffect;
            import mx.events.SliderEvent;

            private var soundEffect:SoundEffect;
            private var checkBox:CheckBox;
            private var slider:HSlider;
            private var btn:Button;

            private function init():void {
                soundEffect = new SoundEffect();
                soundEffect.source = "http://www.helpexamples.com/flash/sound/song1.mp3";

                checkBox = new CheckBox();
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 5000; /* 5 seconds */
                slider.value = soundEffect.duration;
                slider.snapInterval = 100;
                slider.tickInterval = 100;
                slider.liveDragging = true;
                slider.setStyle("showTrackHighlight", true);
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                btn = new Button();
                btn.label = "Play sound effect"
                btn.setStyle("mouseDownEffect", soundEffect);
                btn.addEventListener(MouseEvent.MOUSE_DOWN, btn_mouseDown);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "useDuration:";
                formItem1.addChild(checkBox);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "duration:";
                formItem2.addChild(slider);

                var formItem3:FormItem = new FormItem();
                formItem3.addChild(btn);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);
                form.addChild(formItem3);

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

            private function checkBox_change(evt:Event):void {
                soundEffect.useDuration = checkBox.selected;
                slider.enabled = checkBox.selected;
            }

            private function slider_change(evt:SliderEvent):void {
                soundEffect.duration = evt.value;
            }

            private function btn_mouseDown(evt:MouseEvent):void {
                soundEffect.stop();
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/24/setting-the-duration-of-a-sound-effect-in-flex/feed/ 0 Using an easing function with the AnimateProperties class in Flex and Flash Player 10 http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/ http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/#comments Tue, 12 Aug 2008 13:47:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/ The following example shows how you can apply an easing function to a property animation in Flex with the beta Gumbo SDK and Flash Player 10 by setting the easingFunction property on the AnimateProperties object instance.

Full code after the jump.

To use the following code, you must have Flash Player 10 and [...]]]> The following example shows how you can apply an easing function to a property animation in Flex with the beta Gumbo SDK and Flash Player 10 by setting the easingFunction property on the AnimateProperties object instance.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application name="AnimateProperties_easingFunction_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <Declarations>
        <AnimateProperties id="animateProps"
                easingFunction="Elastic.easeOut"
                duration="4000">
            <propertyValuesList>
                <PropertyValuesHolder property="rotationY"
                        values="[0, 360]" />
            </propertyValuesList>
        </AnimateProperties>
    </Declarations>

    <Script>
        import mx.effects.easing.*;

        private function animateRotationY():void {
            animateProps.stop();
            animateProps.play([img]);
        }
    </Script>

    <Button label="Rotate y-axis"
            top="10"
            left="10"
            click="animateRotationY();" />

    <mx:Image id="img"
            source="@Embed('Fx.png')"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0" />

</Application>

View source is enabled in the following example.

You can also set the easingFunction property in ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application name="AnimateProperties_easingFunction_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout"
        initialize="init();">

    <Script>
        import flex.effects.AnimateProperties;
        import flex.effects.PropertyValuesHolder;
        import mx.effects.easing.*;

        private var animateProps:AnimateProperties;

        private function init():void {
            var rotYProp:PropertyValuesHolder;
            rotYProp = new PropertyValuesHolder("rotationY", [0, 360]);
            animateProps = new AnimateProperties();
            animateProps.easingFunction = Elastic.easeOut;
            animateProps.duration = 4000; // ms
            animateProps.propertyValuesList = [rotYProp];
        }

        private function animateRotationY():void {
            animateProps.stop();
            animateProps.play([img]);
        }
    </Script>

    <Button label="Rotate y-axis"
            top="10"
            left="10"
            click="animateRotationY();" />

    <mx:Image id="img"
            source="@Embed('Fx.png')"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0" />

</Application>
 
]]> http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/feed/ 0 Displaying a dynamically loaded MP3 file’s ID3 information in Flex using the SoundEffect class http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/ http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/#comments Thu, 06 Mar 2008 06:34:46 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/ In a previous example, “Displaying a dynamically loaded MP3 file’s ID3 information in Flex”, we saw how to load an MP3 into Flex using the Sound class.

The following example shows you how you can dynamically load and play an MP3 in Flex using the SoundEffect class, and access the Sound object and it’s [...]]]> In a previous example, “Displaying a dynamically loaded MP3 file’s ID3 information in Flex”, we saw how to load an MP3 into Flex using the Sound class.

The following example shows you how you can dynamically load and play an MP3 in Flex using the SoundEffect class, and access the Sound object and it’s ID3 information.

Full code after the jump.

I didn’t include all the MP3 files in the source code ZIP. You can download the MP3s from http://ghosts.nin.com/main/order_options. Hooray for free Nine Inch Nails songs and Creative Commons licensing!

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private const NIN_URL:String = "http://ghosts.nin.com/";

            private function playSoundEffect(src:String):void {
                textArea.text = "";

                if (soundEffect.isPlaying) {
                    soundEffect.stop();
                }
                soundEffect.source = src;
                soundEffect.play([soundEffect]);
            }

            private function soundEffect_id3(evt:Event):void {
                var id3Info:ID3Info = Sound(soundEffect.sound).id3;
                textArea.text += ObjectUtil.toString(id3Info);
                textArea.text += "\\n\\n-------------------\\n\\n";
            }

            private function comboBox_change(evt:Event):void {
                var cb:ComboBox = evt.currentTarget as ComboBox;
                playSoundEffect(cb.selectedItem.@source);
            }
        ]]>
    </mx:Script>

    <mx:XML id="playlist" source="data/playlist.xml" />

    <mx:SoundEffect id="soundEffect"
            duration="10000"
            useDuration="true"
            id3="soundEffect_id3(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:ComboBox id="comboBox"
                prompt="Please select a song..."
                dataProvider="{playlist.song}"
                labelField="@title"
                change="comboBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            editable="false"
            width="100%"
            height="100%" />

    <mx:LinkButton id="linkButton"
            label="All songs copyright Nine Inch Nails (2008)"
            click="navigateToURL(new URLRequest(NIN_URL), '_blank');" />

</mx:Application>

View playlist.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/ -->
<playlist>
    <song title="Track 1" source="assets/01 Ghosts I.mp3" />
    <song title="Track 2" source="assets/02 Ghosts I.mp3" />
    <song title="Track 3" source="assets/03 Ghosts I.mp3" />
    <song title="Track 4" source="assets/04 Ghosts I.mp3" />
    <song title="Track 5" source="assets/05 Ghosts I.mp3" />
    <song title="Track 6" source="assets/06 Ghosts I.mp3" />
    <song title="Track 7" source="assets/07 Ghosts I.mp3" />
    <song title="Track 8" source="assets/08 Ghosts I.mp3" />
    <song title="Track 9" source="assets/09 Ghosts I.mp3" />
</playlist>

View source is enabled in the following example.

Note that the SoundEffect only plays the first 10 seconds of each song. If you wanted to play the full song, simply omit the duration property in the <mx:SoundEffect /> tag, and set the useDuration property to false.

 
]]> http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/feed/ 0