Flex 3 Cookbook: Chapter 8, Images, Bitmaps, Videos, Sounds
Pages: 1, 2, 3, 4, 5, 6, 7, 8

You cannot literally pause a sound during playback in ActionScript; you can only stop it by using the SoundChannel stop method. You can, however, play a sound starting from any point. You can record the position of the sound at the time it was stopped, and then replay the sound starting at that position later.

While the sound plays, the SoundChannel.position property indicates the point in the sound file that's currently being played. Store the position value before stopping the sound from playing:

var pausePosition:int = channel.position;
channel.stop();

To resume the sound, pass the previously stored position value to restart the sound from the same point it stopped at before:

channel = snd.play(pausePosition);

The following complete code listing provides a combo box to allow the user to select different MP3 files, pause, and stop playback by using the SoundChannel class:

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            public var sound:Sound;
            public var chan:SoundChannel;
            public var pausePos:int = 0;

            private const server:String = "http://localhost:3001/"

            private var dp:ArrayCollection = new ArrayCollection(["Plans.mp3", 
"Knife.mp3", "Marla.mp3", "On a Neck, On a Spit.mp3", "Colorado.mp3"])

            private function loadSound():void {
                if(chan != null) {
                    //make sure we stop the sound; otherwise, they'll overlap
                    chan.stop();
                }
                //re-create sound object, flushing the buffer, and readd the event 
listener
                sound = new Sound();
                sound.addEventListener(Event.SOUND_COMPLETE, soundComplete);
                var req:URLRequest = new URLRequest(server + cb.selectedItem as 
String);
                sound.load(req);
                pausePos = 0;
                chan = sound.play();
            }
            //
            private function soundComplete(event:Event):void {
                cb.selectedIndex++;
                sound.load(new URLRequest(server + cb.selectedItem as String));
                chan = sound.play();
            }

            private function playPauseHandler():void
            {
                if(pausePlayBtn.selected){
                    pausePos = chan.position;
                    chan.stop();
                } else {
                    chan = sound.play(pausePos);
                }
            }

        ]]>
    </mx:Script>
    <mx:ComboBox creationComplete="cb.dataProvider=dp" id="cb" change="loadSound()"/>
    <mx:Button label="start" id="pausePlayBtn" toggle="true" click=
"playPauseHandler()"/>
    <mx:Button label="stop" click="chan.stop()"/>
</mx:HBox>

Section 8.4: Create a Seek Bar for a Sound File

Problem

You need to create a seek control for a user to seek different parts of an MP3 file and a volume control to change the volume of the MP3 playback.

Solution

Pass a time parameter to the Sound play method to begin playing the file from that point. This creates a new SoundTransform object that should be set as the soundTransform of the SoundChannel.

Discussion

The play method of the sound file accepts a start-point parameter:

public function play(startTime:Number = 0, loops:int = 0, sndTransform: SoundTransform
= null):SoundChannel

This creates a new SoundChannel object to play the sound returns that object, which you access to stop the sound and monitor the volume. (To control the volume, panning, and balance, access the SoundTransform object assigned to the SoundChannel.)

To control the volume of the sound, pass the SoundTransform object to the . We create a new SoundTransform object with the desired values and pass it to the SoundChannel that is currently playing:

var trans:SoundTransform = new SoundTransform(volumeSlider.value);
chan.soundTransform = trans;

The SoundTransform class accepts the following parameters:

SoundTransform(vol:Number = 1, panning:Number = 0)

The panning values range from -1.0, indicating a full pan left (no sound coming out of the right speaker) to 1.0, indicating a full pan right. A full code listing is shown here:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
creationComplete="loadSound()">
    <mx:Script>
        <![CDATA[

            private var sound:Sound;
            private var chan:SoundChannel;

            private function loadSound():void {
                sound = new Sound(new URLRequest("http://localhost:3001/Plans.mp3"));
                chan = sound.play();
            }

            private function scanPosition():void {
                chan.stop();
                //divide by 10 because the Slider values go from 0 - 10 and we want 
a value
                //between 0 - 1.0
                chan = sound.play(positionSlider.value/10 * sound.length);
            }

            private function scanVolume():void
            {
                var trans:SoundTransform = new SoundTransform(volumeSlider.value, 
(panSlider.value - 5)/10);
                chan.soundTransform = trans;
            }

        ]]>
    </mx:Script>
    <mx:Label text="Position"/>
    <mx:HSlider change="scanPosition()" id="positionSlider"/>
    <mx:Label text="Volume"/>
    <mx:HSlider change="scanVolume()" id="volumeSlider"/>
    <mx:Label text="Pan"/>
    <mx:HSlider change="scanVolume()" id="panSlider"/>
</mx:VBox>

Section 8.5: Blend Two Images

Problem

You want to manipulate and combine multiple images at runtime and use filters to alter those images.

Solution

Cast the images as BitmapData objects and use the combine method of the BitmapData class to combine all the data in the two bitmaps into a new image.

Discussion

The BitmapData and Bitmap classes are powerful tools for manipulating images at runtime and creating new effects. The two classes are frequently used in tandem but are quite different. BitmapData encapsulates the actual data of the image, and Bitmap is a display object that can be added to the display list. The BitmapData object is created and drawn into as shown here:

var bitmapAsset:BitmapAsset = new BitmapAsset(img1.width, img1.height);
bitmapAsset.draw(img1);

First, set the height and width of the BitmapAsset, ensuring that the object is the correct size, and then draw all the data from an image. This captures all the data in the image as a bitmap and allows you to manipulate that data. In the following example, the colorTransform method manipulates the color data of the BitmapData object, and the two bitmaps are merged via the merge method. The colorTransform method applies the data from a ColorTransform object to the BitmapData object. The ColorTransform object modifies the color of a display object or BitmapData according to the values passed in to the constructor:

ColorTransform(redMultiplier:Number = 1.0, greenMultiplier:Number = 1.0, 
blueMultiplier:Number = 1.0, alphaMultiplier:Number = 1.0, redOffset:Number = 0,
greenOffset:Number = 0, blueOffset:Number = 0, alphaOffset:Number = 0)

When a ColorTransform object is applied to a display object, a new value for each color channel is calculated like this:

• New red value = (old red value * redMultiplier) + redOffset
• New green value = (old green value * greenMultiplier) + greenOffset
• New blue value = (old blue value * blueMultiplier) + blueOffset
• New alpha value = (old alpha value * alphaMultiplier) + alphaOffset

The merge method of the BitmapData class has the following signature:

merge(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, redMultiplier
:uint, greenMultiplier:uint, blueMultiplier:uint, alphaMultiplier:uint):void

Pages: 1, 2, 3, 4, 5, 6, 7, 8

Next Page