HTML and Flash for Instructional Designers

Embedding media objects in HTML

R541 requires that you include at least one audio or video segment in your final project. While there are a number of formats for delivering audio and video on the Web, this lesson recommends that you deliver both via Flash. The reasons for this are:

• No media plug-in is as ubiquitous as Flash.
• When configured properly, Flash will stream both audio (mp3) and video (FLV).
• Media delivered via Flash will appear/behave the same regardless of browser or operating system.
• Students in R541 must have access to the Flash software (in order to create animation or interactive graphics).
• The procedure for including Flash audio/video is nearly identical to that for other Flash files.

To deliver audio:

An example of this audio delivery method is used on the "music player" in the lesson Importing external media in Flash.

1. Use a Sound object with an external mp3 file:
   1. Create an interface to control the audio; at a minimum, a play and stop button.
   2. Create a Sound object in ActionScript.

      musLoop_snd = new Sound();

   3. Load the mp3 file into the Sound object.

      musLoop_snd.loadSound("Loop_30.mp3", true);
      // "Loop_30.mp3" is the path to the external file, relative to the Flash file
      // true sets the audio to streaming, i.e., 
      // it will 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

   4. Tie sound playback to the control buttons.

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

   5. Publish the Flash file as SWF.
2. Place the SWF and mp3 file together in a folder with your HTML document.
3. Insert the SWF in your Web document.
   1. In Dreamweaver, choose Insert > Media > Flash. Select the SWF and click Choose.

To deliver video:

View an example of FLV video.

1. Import the video as an FLV.
   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.
   7. Publish the Flash file as SWF.
2. Place the FLV and the two SWF files (one named with your filename, and one with the name of the video controls skin) together in a folder with your HTML document.
3. Insert your SWF in your Web document.
   1. In Dreamweaver, choose Insert > Media > Flash. Select the main SWF file (the one with your filename) and click Choose.

 

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