HTML and Flash for Instructional Designers

Importing external media in Flash

Before using this lesson, you should be acquainted with the timeline, frames, keyframes, symbols, and symbol instances.

You can import a variety of external media in Flash, including still images, video, and audio.

These two rules of thumb are good guidelines for importing any external media, besides vector graphics:

1. Import media at size.
   • If the media source is a image, import it in exactly the size you want it to appear in the finished product.
   • If the media source is an audio file, import the clip trimmed exactly to the length you intend to use.
   • If the media source is a video file, it, too, should be edited, trimmed, and at the dimensions you intend for the final product.
2. Import the highest quality file you can produce/obtain. All media imported should be in an uncompressed format when possible. Flash employs its own compression when exporting. If you import an already compressed file, the result is loss of quality, but little or no difference in final file size.

Download the sample file for still images and audio: importMedia.zip (684 KB). You can try out the example below.

Importing still images

Still images may be categorized as one of two types: vector or raster. Vector images can be scaled to any size without loss of quality, because they consist of mathematical calculations represented as points, lines, and curves. Adobe Illustrator is a common vector graphics program. Most graphics you create with Flash's native tools are also vector graphics.

Raster images are a collection of colored pixels. They have a resolution (e.g., 72 pixels per inch, or ppi). They can suffer from loss of quality when scaled up because the new pixels are interpolated from existing ones.

Importing vector images

There are two ways to import vector images into Flash. One, you can copy the graphic from the external program and paste it into Flash. Two, you can import the file (File > Import). If you import an Adobe Illustrator file, you can choose to import Illustrator layers, or to place the drawing on a single Flash layer.

Importing raster images

Optimally, you should import raster images in the exact pixel dimensions you intend to use in the final product. It's also best to save the image as a lossless 24-bit or 36-bit PNG. (Lossless means that the file retains all image data.) These two measures will ensure that you get optimal quality and file size/download time.

Importing audio

Importing audio is straightforward. Choose File > Import to Library and choose the audio file. The audio shows up in your library as a symbol.

Using audio

The audio symbols in your library can be used in two basic ways. They can be inserted into keyframes on the timeline, or they can be scripted as Sound objects. The advantage of using Sound objects in that you can control the playback of sound independently of the timeline.

To insert sound on the timeline:

1. Insert a keyframe on the timeline at the time you want the audio to begin.
2. In the Properties panel, choose the sound from the Sound drop-down menu in the Properties panel.
3. Select Event, Start, or Stream from the Sync drop-down menu. To learn about the differences between these settings, read Adding a sound to the timeline.

To use a Sound object with an imported audio file:

1. Create a linkage that will allow ActionScript to access the sound symbol.
   1. Click on the sound symbol in the Library.
   2. Choose Linkage from the Library menu.
   3. Give the sound a Linkage Identifier (e.g., "gling").
   4. Check the Export for ActionScript box.
   5. Click OK.
2. Create a Sound object in ActionScript.

   gling_snd = new Sound();

3. Attach the sound symbol to the Sound object.

   gling_snd.attachSound("gling");

4. Tie sound playback to an event. For example, have the sound play when you mouseover an image.

   chime_mc.onRollOver = function() {
   	gling_snd.start();
   }

You can also stream sound from an external (not imported into Flash) audio file in mp3 format.

In the example ActionScript below, you will see lines marked with "//" and highlighted. These lines are comments, which explain the purpose of the preceding line of script.

To use a Sound object with an external mp3 file:

1. Create a Sound object in ActionScript.

   musLoop_snd = new Sound();

2. Load the mp3 file into the Sound object.

   musLoop_snd.loadSound("Loop_30.mp3", false);
   // "Loop_30.mp3" is the path to the external file, relative to the Flash file
   // false keeps the audio from playing until the file completely downloads
   // true would set the audio to streaming, i.e., 
   // it would start playing as soon as it begins to download
   // Note: streaming sounds cannot be looped
   musLoop_snd.stop();
   // prevent the audio from playing until the play button is pressed

3. Tie sound playback to an event. For example, associate sound playback with control buttons.

play_mc.onRelease = function() {
// when the play button is clicked
	musLoop_snd.start(0, 9999);
	// start the music loop from the beginning (time 0) and loop 9999 times
}
stop_btn.onRelease = function() {
// when the stop button is clicked
	stopAllSounds();
	// stop all sound playback

}

Importing video

There are two main ways that you can use video in Flash. It can be embedded in the Flash movie, which is then exported as SWF. Or it can be encoded as FLV and controlled by a separate Flash movie SWF. The first method is preferable for incorporating video with graphics, animation, and/or text. The second method is excellent when you want to use the video as-is.

Download the sample files: embedVideo.zip (2.1 MB) and importVideo.zip (716 KB).

To embed video:

View an example of embedded video.

1. Choose File > Import Video.
2. Choose the video file.
3. Choose Embed video in SWF and Play in timeline.
4. Choose Embedded video and Integrated Audio track. Check Place instance on stage, Expand timeline if needed, and Embed the entire video.
5. Choose an appropriate encoding profile.
6. Click Finish.

To import video as an FLV:

View an example of FLV video.

1. Choose File > Import Video.
2. Choose the video file.
3. Choose Progressive download from a web server.
4. Choose an appropriate encoding profile.
5. Pick a skin for your video controls.
6. Click Finish.

 

Lesson index | Flash overview | Animation with playback controls | Interactive graphic | Importing external media in Flash | Common pitfalls in HTML and CSS | Embedding media objects in HTML