Skip to any available Digital Media Help Center chapter of Flex 3 Cookbook: Chapter 8 | Chapter 20 | Chapter 21

Chapter 8: Images, Bitmaps, Videos, Sounds

Images, bitmaps, videos, and sounds is a mouthful and a far wider range of topics than could be adequately covered in a single chapter, so this one concentrates on answering the most common questions. As Flash becomes the primary method of delivering video over the Internet and the use of the Flex Framework in creating photo and MP3 applications increases, understanding how to work with all of these elements becomes more and more important.

The Flash Player offers multiple levels of tools for dealing with images and sound. The first avenue of control contains the Image and VideoDisplay classes, MXML classes that simplify much of dealing with images and video and enable you to quickly integrate these assets into your application. The next step down is the flash.media package, which houses the Video, Sound, SoundTransform, Camera, and Microphone classes; their corollaries, Loader, NetConnection, and NetStream, are in the flash.net package. These classes provide much finer control over the integration of sound, video, and images into an application and require slightly more time to perfect. Finally, you can reach down to the bytes of data in the Flash Player: the BitmapData classes and the ByteArray classes. These classes enable you not only to manipulate the bitmap data of the images that you load into the Flash Player, but they also let you create new bitmaps and stream the data out.

Many of the examples in this chapter manipulate images and videos as bitmap data. This is not nearly as difficult as it sounds, because the Flash Player provides numerous convenience methods for working with the BitmapData class, and manipulating the bitmap data directly greatly increases the efficiency of your application. You'll also be working extensively with the NetStream class, for handling video and users' microphones and cameras. NetStream is an effective way of streaming information both to and from server-side applications.

Section 8.1: Load and Display an Image

Problem

You need to display an image in a Flex component.

Solution

Use either an Embed statement to compile the image into the SWF file or load the image at runtime.

Discussion

Flex supports importing GIF, JPEG, PNG, and SWF files at runtime or at compile time, and SVG files at compile time through embedding. The method you choose depends on the file types of your images and your application parameters. Any embedded images are already part of the SWF file and so don't require any time to load. The trade-off is the size that they add to your application, which slows the application initialization process. Extensive use of embedded images also requires you to recompile your applications whenever your image files change.

Alternatively, you can load the resource at runtime by either setting the source property of an image to a URL or by using URLRequest objects and making the result of the load operation a BitmapAsset object. You can load a resource from the local file system in which the SWF file runs, or you can access a remote resource, typically through an HTTP request over a network. These images are independent of your application; you can change them without needing to recompile as long as the names of the modified images remain the same.

Any SWF file can access only one type of external resource, either local or over a network; it cannot access both types. You determine the type of access allowed by the SWF file by using the use-network flag when you compile your application. When the use-network flag is set to false, you can access resources in the local file system, but not over the network. The default value is true, which allows you to access resources over the network, but not in the local file system.

To embed an image file, use the Embed metadata property:

            [Embed(source="../assets/flag.png")]
            private var flag:Class;

Now this Class object can be set as the source for an image:

                var asset:BitmapAsset = new flag() as BitmapAsset;
                img3rd.source = asset;

Alternatively, you can set the property of the source to a local or external file system:

<mx:Image source="http://server.com/beach.jpg"/>

The full example follows:

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

            [Embed(source="../assets/flag.png")]
            private var flag:Class;

            private function imgMod():void
            {
                var asset:BitmapAsset = new flag() as BitmapAsset;
                img3rd.source = asset;
            }

        ]]>
    </mx:Script>
    <mx:Image source="../assets/flag.png"/>
    <mx:Image source="{flag}"/>
    <mx:Image id="img3rd" creationComplete="imgMod()"/>
</mx:VBox>

Section 8.2: Create a Video Display

Problem

You need to display an FLV file in your application.

Solution

Use the VideoDisplay class in your application and use Button instances to play and pause the application if desired.

Discussion

The VideoDisplay class wraps a flash.media.Video object and simplifies adding video to that object considerably. The source attribute of the VideoDisplay is set to the URL of an FLV file, and the autoplay parameter is set to true so that when the NetStream has been properly instantiated and the video information begins streaming to the player, the video will begin playing:

<mx:VideoDisplay source="http://localhost:3001/Trailer.flv" id="vid" autoplay="true"/>

In the following example, buttons are set up to play, pause, and stop the video by using the methods defined by the VideoDisplay class:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:VideoDisplay source="http://localhost:3001/Trailer.flv" id="vid" autoPlay=
"false" autoRewind="true"/>
    <mx:HBox>
            <mx:Button label="Play" click="vid.play();"/>
            <mx:Button label="Pause" click="vid.pause();"/>
            <mx:Button label="Stop" click="vid.stop();"/>
        </mx:HBox>
</mx:VBox>

Section 8.3: Play and Pause an MP3 File

Problem

You want to allow a user to play a series of MP3 files.

Solution

Use the Sound and SoundChannel classes and load new files by using progressive download when the user selects a new MP3 file.

Discussion

The play method of the Sound class returns a SoundChannel object that provides access to methods and properties that control the balance or right and left volume of the sound, as well as methods to pause and resume a particular sound.

For example, let's say your code loads and plays a sound file like this:

var snd:Sound = new Sound(new URLRequest("sound.mp3"));
var channel:SoundChannel = snd.play();

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

Next Page