Flash MX 2004 Pro :: Video and Media Components 2:: GC211/Web Motion Graphics 3

Video and Media Components 2

notes for Flash 7 Pro only

This is a continuation from Video and Media Components, part 1.

In part 2, we will be looking at using the video editing capabilities available during import; exporting Flash videos in the FLV file format; working with the local Embedded Video object, and a quick look at the MediaPlayback component.

In Video and Media Components, part 3, we look at using the Media Components to load and control playback of FLV (and MP3) files, and some basic scripting for when greater control is required.

In Flash, create a new document and save it as: three_simple_steps.fla
While the video editing capabilities of Flash are minimal, they do allow the author an easy way to trim video clips of unwanted false starts, throat-clearing, and other content artifacts without having to open up a separate video editor. Final Cut this is not ... it's Flash, after all ... but even just the ability to set in and out points can speed up your workflow.

Editing during Import

Import the video video_clip
video_clip.mov on a Mac; video_clip.avi on a Win
1. File -> Import -> Import to Library ...
  Navigate to and select the video_clip file appropropriate to your platform
2. Importing Quicktime:
  If you have imported a Quicktime file, click: Next
3. The Video Import Wizard asks if you want to edit the video before encoding:
  1. Select: Edit the video first (*)
  2. Click: Next
  The editing screen/panel's left portion contains the clip library ... where you can store and sequence any clips you create. The right section contains the preview area, in and out point controls, and playback controls.
4. Click on the Preview Clip button, to review the imported video
  The talking head speaks about three things to consider when working with Flash, two of which are meaningful. In this first exercise, we will simply trim off the second or so of dead air at the beginning of the clip and at the ending of the clip.
5. To the left of the Preview Clip button are six controls:
  The left-most and right-most arrows do not affect playback ... instead, they move the In and Out points to the current position of the playback head.
  
  The inner four controls backstep, play, stop, and step forward through the clip.
6. Trim the second or so of dead air at the beginning of the clip:
  1. Drag the playback head back to the beginning
  2. Click on the Play control
  3. At about the 1 second mark, the talking head begins to speak. Click on the Stop button.
  4. Scrub the playback head until you see the talking head about to speak.
  5. With the playback head at the point where the talking head is about to speak, click on the left-most arrow control (Set in point to current position)
  6. Drag the playback head towards the end of the clip
  7. Click on the Play control
  8. Just after the talking head finishes speaking (about 1 second before the end of the clip), click on the Stop button.
  9. Scrub the playback head if you need to compensate for a late click on the Stop control
  10. With the playback head at the point where the talking head has finished speaking, click on the right-most arrow control (Set out point to current position)
    
    The white area on each end represents the part of the video which will be trimmed; the blue part indicates what will be included. The yellow downward pointing arrow above the timeline is the playback head. The white half-triangles below are the in and out points.
  11. Click on the Preview clip button
    With the in and out points set, the Preview clip button will play just the part between the in and out points.
  12. Now click on the Create clip button
    This extracts a clip from the imported video, and places it in this panel's library list:
  13. Rename the library clip to: trimmed
  14. Click: Next
  This takes us back to the Compression and Advanced settings part of the video import wizard
Compression profile -> DSL/Cable 512 kbps
The talking head wants to look good
Advanced settings -> Create new profile ...
You may use these suggested settings, or experiment to improve on them ...
1. Color:
  1. Hue: -4
  2. Saturation: -4
  3. Gamma: 1.02
  4. Brightness: 0
  5. Contrast: 0
2. Dimensions:
  Now we have an opportunity to work with scaling and cropping the margins:
  1. Scale: 50%
    Because of the aspect ratio of the camera, the video's dimensions started at 720 x 480. Let's shoot for 320 x 240 as our final clip size.
    
    At 50% scaling, this takes us to 360 x 240 ... we would like to crop 20 pixels from each side
  2. Crop Left: 40px
  3. Crop Top: 0px
  4. Crop Right: 40px
  5. Crop Bottom: 0px
  No, that is not a mistake: we do in fact want to crop 20 pixels from the left and 20 pixels from the right.
  
  However, we are also scaling this clip, and the cropping is done before the scaling. So if we want to end up with a width of 320 after scaling the original by 50%, then we need to start with a width of 640. If the original video was 720 pixels wide (why does this all of a sudden sound like one of those horrible word math problems?), we need to crop a total of 80 pixels before we scale it ... 40 pixels from the left, and 40 pixels from the right.
3. Track options:
  1. Import into -> Movie Clip
  2. Audio track -> Integrated
4. Click: Next
5. Profile Name: TalkingHead
6. Click: Next
7. Click: Finish
  We can see why the Quick Encode option was included ...
8. Extend the timeline (automatically insert the correct number of frames)?: Yes
  We are asked this because we elected to Import this video into a movie clip ...
Examine the results:
1. Drag an instance of the trimmed movie clip onto the stage
2. Select the instance, and look at it's size in the Property Inspector or Info panel
  We should see our target size of 320 x 240
3. Save and test movie
  Looking at the results, we can see that the little bit of color correction helped.
  
  We can also determine that the compression settings were on the over-generous side: we didn't really need that higher bandwidth setting.
  
  Since the content is a talking head, we didn't really need about two-thirds of the total image ... who really cares about the poster in the background, or Audrey the plant ... . The next time, we could scale even smaller, and be more agressive in our cropping.
4. Close the file three_simple_steps.fla
Next, let's chop up the imported video, and resequence the list of important things to consider, so instead of them being presented 1, 2, and then goofy 3, we'll present them in reverse order.

Creating multiple clips
Create a new Flash document, and save it as: clips.fla
Import the video video_clip
video_clip.mov on a Mac; video_clip.avi on a Win
1. File -> Import -> Import to Library ...
  Navigate to and select the video_clip file appropropriate to your platform
  1. If you have imported a Quicktime file, click: Next
2. Would you like to import the entire video or edit the video first:
  1. Select: Edit the video first (*)
  2. Click: Next
  We want to end up with four separate clips: the introduction, step1, step2, and step3
3. Create the Introduction clip:
  Use the playback controls to visually establish where the following sentence is located:
  
  "There are three things to consider when working with video in Flash."
  
  The starting/In timecode is approximately 1.583, and the ending/Out timecode is approximately 6.721
  
  There are several ways in which you can set the In and Out point markers (the half-triangles beneath blue horizontal clip timeline indicator): (1) you can simply drag each marker into position; (2) you can scrub (drag) the playback head above the timeline indicator back and forth to visually establish an In/Out point, then drag the In/Out point indicator to that position; (3) work with the Play and Stop controls (and the Backstep and Forwardstep controls for fine-tuning) until the playback head is in position, and then use the Set In/Out point controls to jump the In or Out point indicator to the playback head's current position.
  1. Set the In point control to where the introduction sentence begins
  2. Set the Out point control to where the introduction sentence ends
    The blue area of the clip timeline has shrunk to between the In and Out points
  3. Click on the Preview Clip button (to preview the selected area)
  4. Click on the Create Clip button to extract (copy) the selected area
    The clip library area now has a clip with the original name of the imported video
  5. Rename the newly-created clip: Introduction
4. Follow the same basic procedure, create the Step1 clip:
  Use the playback controls to visually establish where the following sentence is located:
  
  "One: work with uncompressed video and audio."
  
  The starting/In timecode is approximately 7.488, and the ending/Out timecode is approximately 13.628 - the timecodes specified here are only for your visual reference
  
  Note: Once a single clip has been added to the clip library, the editing screen becomes focused on the selected clip. When creating a subsequent clip, you might find it easier to set the In and Out points with the Set In/Out point buttons at either end of the playback controls.
  1. Use the Set in point to current position button to set the In point control to where the step one sentence begins
  2. Use the Set out point to current position button to set the Out point control to where the step one sentence ends
    The blue area of the clip timeline has shrunk to between the In and Out points
  3. Click on the Preview Clip button (to preview the selected area)
  4. Click on the Create Clip button to extract (copy) the selected area
    The clip library area now has a clip with the original name of the imported video
  5. Rename the newly-created clip: Step1
5. Follow the same basic procedure, create the Step2 clip:
  Use the playback controls to visually establish where the following sentence is located:
  
  "Two: do all of your major editing outside of Flash, in a standalone application."
  
  The starting/In timecode is approximately 14.396, and the ending/Out timecode is approximately 21.566
  1. Use the Set in point to current position button to set the In point control to where the step one sentence begins
  2. Use the Set out point to current position button to set the Out point control to where the step one sentence ends
  3. Click on the Preview Clip button (to preview the selected area)
  4. Click on the Create Clip button to extract (copy) the selected area
    The clip library area now has a clip with the original name of the imported video
  5. Rename the newly-created clip: Step2
6. Follow the same basic procedure, create the Step3 clip:
  Use the playback controls to visually establish where the following sentence is located:
  
  "Three: don't forget to smile."
  
  The starting/In timecode is approximately 22.103, and the ending/Out timecode is approximately 26.140
  1. Use the Set in point to current position button to set the In point control to where the step one sentence begins
  2. Use the Set out point to current position button to set the Out point control to where the step one sentence ends
  3. Click on the Preview Clip button (to preview the selected area)
  4. Click on the Create Clip button to extract (copy) the selected area
    The clip library area now has a clip with the original name of the imported video
  5. Rename the newly-created clip: Step3
  Not covered in this tutorial:
  
  Combining the list of clips into a single library item:
  
  This takes all of the clips in the list and combines them into a single Embedded Video asset in the Library
  
  Reordering the clips:
  
  The up and down arrows moves the selected clip in the library/list into a new position: the position determines it's order when combining the list of clips
  
  Update clip:
  
  When a clip is selected in the library/list, it's In and Out points can be modified. Once a new In and/or Out point is established, clicking on the Update clip button modifies the original In/Out points
  
  Note: If we had wanted to rearrange the order of the four clips, we could have used the up/down arrows to change the order in the library/list, and then selected the Combining checkbox. This will create a single Embedded Video asset in the library.
7. Click: Next
  We're done creating the individual clips, and you should now be at the Encoding/Settings screen
Complete the importation process:
1. Compression Profile -> DSL/Cable 256 kbps
  This will allow us to compare the results from that of the previous exercise.
2. Advanced Settings -> TalkingHead
  These are the same settings we established for the previous example
3. Click: Finish
It will appear as if four separate video files are being imported: in fact, Flash is only importing the four sections/clips we defined earlier (Introduction, Step1, Step2, and Step3).
Open the library
You should see four embedded video assets in the library, each named after the clip we defined upon import (Introduction, Step1, Step2, and Step3). These embedded video assets behave pretty much like Graphic symbols: their playback is wedded/synchronized to the playback of whichever timeline they are located upon.

What this means is that if you drag an instance of an embedded video asset onto the main timeline/stage, it will play back in sync with the main movie's timeline: stop the main movie timeline and you stop the video instance.

If you want independent playback of the video, place the embedded video asset inside of a movie clip, and place the movie clip instance on the stage. Since movie clip timelines are independent of the main movie timeline, you would now have independent control of the playback of the movie and the embedded video.

Different ways to use (embedded) video

The remainder of this exercise is designed to explore different ways in which video can be used in and with Flash ... the end result is not meant to make sense as a completed project. Instead, the journey through the next steps is meant to explore different ways of working with video.

Embedded video on the main timeline
Drag the Introduction video asset from the Library onto the stage
Flash is intelligent enough to ask if you want to extend the layer containing the video, so as to display the entire video
1. Do you want the required number of frames automatically inserted?: Click Yes
  You can drag or align the video instance, and it's new position will be reflected in all of the other frames on that layer
To control playback:
To control playback of an embedded video placed on the main timeline, use the traditional ActionScript to stop and play the main timline:
1. Insert two more layers, and rename them: Actions, Embedded Video, and Buttons
2. On the Buttons layer, add four button instances
  You can grab four from the Common Library of Buttons (any four will do, including gel Rewind, gel Stop, and gel Right from the Playback folder, and Circle with Arrow from the Circle Buttons folder)
3. Apply instance names to each button instance:
  rewind_btn
  
  stop_btn
  
  play_btn
  
  next_btn
4. Select keyframe 1 of the Actions layer, and apply this ActionScript:
```
rewind_btn.onRelease = function () {
  gotoAndStop(1);
}
 
stop_btn.onRelease = function () {
  stop();
}
 
play_btn.onRelease = function () {
  play();
}
 
next_btn.onRelease = function () {
  nextScene();
}
 
stop();
```
5. Insert a keyframe in the last frame of the Actions layer (frame 62), select it, and apply:
```
gotoAndStop(1);
```
6. Save and test movie
  Controlling the playback of an embedded video placed on the main timeline is simply a matter of controlling the playback of the main timeline
Embedded video in a movie clip
Insert a new Scene (Scene 2)
1. Insert two more layers, and rename them: Actions, Video MC, and Buttons
Create a Movie Clip, and embed the Step3 video:
1. Create a new Movie Clip symbol named: MC Step3
2. Drag the Step3 video asset from the Library onto the symbol-edit stage
  1. Do you want the required number of frames automatically inserted?: Click Yes
    You can drag or align the video instance, and it's new position will be reflected in all of the other frames on that layer
  2. Insert a new layer, and name the layers: Actions, and Embedded Video
  3. Select keyframe 1 of the Actions layer, and apply this ActionScript:
```
stop();
```
3. Exit symbol edit mode back to editing Scene 2 of the main timeline
4. Drag an instance of MC Step3 onto the Video MC layer
  1. Give it the instance name: step3_mc
To control playback:
To control playback of an embedded video placed inside of a movie clip, use the traditional ActionScript to stop and play the movie clip:
1. On the Buttons layer, add five button instances
  You can grab four from the Common Library of Buttons (any four will do, including gel Rewind, gel Stop, and gel Right from the Playback folder, and Circle with Arrow from the Circle Buttons folder). You can re-use the Circle with Arrow by dragging a second instance onto the stage, and flipping it horizontally or rotating it by 180°
2. Apply instance names to each button instance:
  rewindmc_btn
  
  stopmc_btn
  
  playmc_btn
  
  prev_btn
  
  next_btn
3. Select keyframe 1 of the Actions layer, and apply this ActionScript:
```
rewindmc_btn.onRelease = function () {
  step3_mc.gotoAndStop(1);
}
 
stopmc_btn.onRelease = function () {
  step3_mc.stop();
}
 
playmc_btn.onRelease = function () {
  step3_mc.play();
}
 
prev_btn.onRelease = function () {
  prevScene();
}
 
next_btn.onRelease = function () {
  nextScene();
}
 
stop();
```
4. Save and test movie
  Controlling the playback of an embedded video placed in a movie clip is simply a matter of controlling the playback of the movie clip.
In the next example, we will create an empty Embedded Video object (sometimes referred to as a "Local Video Object"), and then dynamically (by means of ActionScript) associate ("attach") an external FLV during runtime.

Export an FLV

An FLV file is a Flash Video file which can be progressively downloaded (streamed) without the need of any special streaming server software, and uses regular old HTTP to access
Export an FLV (FLash Video file):
1. Select the Step2 video clip in the Library
2. Open the Step2 embedded video's properties dialog box:
  1. Double-click on the Step2 video icon
  2. Select the Step2 asset, and from the Library, Panel Options -> Properties ...
  3. Select the Step2 asset, and click on the Properties button
    The italicized"i" in the blue circle at the bottom of the Library panel
3. In the Embedded Video Properties dialog box, click on the Export ... button
  1. Save as (file name): step2.flv
  2. (Location): (same folder that this SWF is being saved to)
  3. Click: Save
4. Click: Cancel
  ... to dismiss the Embedded Video Properties dialog box
Preparation
Insert a new Scene (Scene 3)
1. Insert two more layers, and rename them: Actions, Embedded Video, and Buttons
Set up the movie navigation controls:
1. On the Buttons layer, add six button instances
  You can grab five from the Common Library of Buttons (any five will do, including gel Rewind, gel Stop, and gel Right from the Playback folder; Playback - Loop also from the Playback folder; and Circle with Arrow from the Circle Buttons folder). You can re-use the Circle with Arrow by dragging a second instance onto the stage, and flipping it horizontally or rotating it by 180°
2. Apply instance names to each button instance:
  rewindVideo_btn
  
  stopVideo_btn
  
  playVideo_btn
  
  attachVideo_btn
  
  prev_btn
  
  next_btn
3. Select keyframe 1 of the Actions layer, and apply this ActionScript:
```
prev_btn.onRelease = function () {
  prevScene();
}
 
next_btn.onRelease = function () {
  nextScene();
}
 
stop();
```
  This provides us with the basic movie navigating controls
Create a local Video object
Create a local video object:
1. In the Library Panel: Panel Options -> New Video
  This creates an empty Embedded Video asset in the Library with the default name: Embedded Video 1
2. Rename the Embedded Video 1 asset in the Library: Container
3. Drag an instance of the Container local video object onto the stage (Embedded Video layer)
4. Give the empty embedded video instance the instance name: step2_video
5. Change the dimensions of the embedded video instance:
  1. W: 320
  2. H: 240
Dynamically loading external FLV into an Embedded Video instance
Stream (attach) an external FLV video clip through the local video object:
Automatically
1. Select keyframe 1 of the Actions layer, and add this ActionScript:
```
var my_nc = new NetConnection();
 
my_nc.connect(null);
 
var step2_ns = new NetStream(my_nc);
 
step2_ns.onStatus = function (infoObject) {
    if(infoObject.level.toLowerCase() == "error") {
          // your own error handling code here
        trace(infoObject.code);
    }
} 

step2_video.attachVideo(step2_ns);

step2_ns.play("step2.flv");
```
  Explanation
2. Here's the same script, but with comments:
```
// streaming an FLV through a local video object
 
  // provides mechanism for playing external FLVs
var my_nc = new NetConnection();
 
  // open local connection
my_nc.connect(null);
 
  // we've established a connection; this controls the stream
var step2_ns = new NetStream(my_nc);
 
  // can perform error checking
step2_ns.onStatus = function (infoObject) {
    if(infoObject.level.toLowerCase() == "error") {
          // your own error handling code here
        trace(infoObject.code);
    }
} 
 
  // attach the NetStream instance with the video object
step2_video.attachVideo(step2_ns);
 
  // start the stream
step2_ns.play("step2.flv");
```
  new NetConnection()
  
  The NetConnection is like a pipeline ... all it really does is establish a conduit by which information (or a video stream) can travel
  
  NetConnection.connect(null)
  
  The connect() method normally specifies a server URL. Using the value null establishes a local (http:// or file://) connection ... meaning, bypass any special server-side appication (Flashcom server)
  
  new NetStream(NetConnection_instance)
  
  This "connects" the pipeline to the server side of things.
  
  NetStream.onStatus()
  
  The event handler to use to check on any problems with the stream (of information). The infoObject parameter/placeholder stores two fields (has two properties): level, which can have the string value "error" or "status"; code, which contains a status message
  
  EmbeddedVideoInstance.attachVideo(NetStream_instance)
  
  This "connects" the other end of the pipeline to the embedded video instance on the stage
  
  NetStream.play("URL")
  
  This says what to send down the pipeline and to start sending it
3. Save and test scene
  If all went well, the external FLV should immediately begin playing in the embedded video instance, step2_video. If not, and there was a server- or file-related problem, the Output window should have a brief status message.
  
  You can verify this by moving the step2.flv file out of the current folder, and Test Scene again. This time, the Output window should display a status message, like: "NetStream.Play.StreamNotFound". After testing, move the step2.flv file back into the current folder.
On demand

Frame actions are taken automatically when the playback head sweeps through the frame. Button actions are initiated by user input. To (progressively download and) play, all we need to do is put the play() statement within a button action.
1. Establish an event callback for the attachVideo_btn button
  1. Comment out the step2_ns.play("step2.flv"); statement
  2. Beneath it, add the same statement within a callback method for the attachVideo_btn instance:
```
 
  // start the stream
// step2_ns.play("step2.flv");
 
attachVideo_btn.onRelease = function () {
    step2_ns.play("step2.flv");
}
 
```
2. Save and test scene
  Now the external FLV will only load and play when a user clicks on the attachVideo_btn button.
The frame 1 ActionScript so far:
```
// streaming an FLV through a local video object
  
var my_nc = new NetConnection();
my_nc.connect(null);
var step2_ns = new NetStream(my_nc);
step2_ns.onStatus = function (infoObject) {
    if(infoObject.level.toLowerCase() == "error") {
        trace(infoObject.code);
    }
} 
step2_video.attachVideo(step2_ns);
  
  // start the stream
  // step2_ns.play("step2.flv");
attachVideo_btn.onRelease = function () {
    step2_ns.play("step2.flv");
}
  
prev_btn.onRelease = function () {
  prevScene();
}
  
next_btn.onRelease = function () {
  nextScene();
}
  
stop();
```
Controlling playback

To control playback:

Add the following ActionScript to frame 1:

 
rewindVideo_btn.onRelease = function () {
    step2_ns.seek(0);
    step2_ns.pause(true);
}
  
stopVideo_btn.onRelease = function () {
    step2_ns.pause(true);
}
  
playVideo_btn.onRelease = function () {
    step2_ns.pause(false);
}

Explanation:

NetStream.seek(seconds)

It is not the local video object that is being manipulated ... it is just a "window" through which we are displaying a stream. If we want to "rewind" the video stream, we tell the stream to go back to the beginning ... to go to the 0'th second of the stream (actually, the nearest keyframe of the specified value).

NetStream.pause()

This single command does double duty: it pauses a stream that is playing, and plays a stream that is paused, if no argument is supplied. In other words, it acts like a toggle.

NetStream.pause(true)

If the Boolean true is supplied as an argument, this pauses the stream.

NetStream.pause(false)

If the Boolean false is supplied as an argument, this resumes the stream.
Save and test scene
You should now be able to stop, start, and rewind the video stream, just as you could do similar things with an embedded video clip.
Modify the two movie navigation button actions to close the stream when you leave this scene:
(In other contexts, whenever you leave that part of your presentation where you are no longer displaying the video)
```
 
prev_btn.onRelease = function () {
    prevScene();
    step2_ns.close();
}
  
next_btn.onRelease = function () {
    nextScene();
    step2_ns.close();
}
 
```

The completed frame 1 ActionScript should now look like this:

// streaming an FLV through a local video object

  // provides mechanism for playing external FLVs
var my_nc = new NetConnection();

  // open local connection
my_nc.connect(null);

  // we've established a connection; this controls the stream
var step2_ns = new NetStream(my_nc);

  // can perform error checking
step2_ns.onStatus = function (infoObject) {
    if(infoObject.level.toLowerCase() == "error") {
          // error handling code here
        trace(infoObject.code);
    }
} 

  // attach the NetStream instance with the video object
step2_video.attachVideo(step2_ns);

  // start the stream
    // step2_ns.play("step2.flv");  // uncomment to stream automatically

  // start the stream
attachVideo_btn.onRelease = function () {
    step2_ns.play("step2.flv");
}

  // control video stream "playback"
rewindVideo_btn.onRelease = function () {
    step2_ns.seek(0);
    step2_ns.pause(true);
}

stopVideo_btn.onRelease = function () {
    step2_ns.pause(true);
}

playVideo_btn.onRelease = function () {
    step2_ns.pause(false);
}

  // movie navigation
prev_btn.onRelease = function () {
  prevScene();
  step2_ns.close();
}

next_btn.onRelease = function () {
  nextScene();
  step2_ns.close();
}

stop();

One way to avoid having to deal with this NetConnection/NetStream ActionScript is to work with the Media Components.

Export an FLV
1. Select the Step1 video clip in the Library
2. Open the Step1 embedded video's properties dialog box:
  1. Select the Step1 asset, and from the Library, Panel Options -> Properties ...
  2. In the Embedded Video Properties dialog box, click on the Export ... button
    1. Save as (file name): step1.flv
    2. (Location): (same folder that this SWF is being saved to)
    3. Click: Save
3. Click: Cancel
  ... to dismiss the Embedded Video Properties dialog box
Preparation
Insert a new Scene (Scene 4)
1. Insert two more layers, and rename them: Actions, Media Components, and Buttons
2. On the Buttons layer, add one button instance
  You can grab the Circle with Arrow from the Circle Buttons folder, and flipping it horizontally or rotating it by 180°
3. Apply instance names to each button instance:
  prev_btn
4. Select keyframe 1 of the Actions layer, and apply this ActionScript:
```
prev_btn.onRelease = function () {
  prevScene();
}
    
stop();
```
  This provides us with the basic movie navigation controls
Media Components

The Media Components provide an easy way to stream FLVs and MP3s, and control their playback, with a minimum of scripting. Of course, like with most components, you can gain much greater control over them if you need to, if you do control them with ActionScript.

First, let's explore how easy it is to use these components.
From the Components panel, in the Media Components folder, locate the MediaPlayback component
The MediaPlayback component is a combination of the MediaDisplay and MediaController components
1. Drag the MediaPlayback component onto the stage (Media Components layer)
2. Give it the instance name: step1Display
Establish the size of the step1Display instance:
The chrome around the display area is about 8 pixels on each side. Since our video clip is 320 x 240, the width of the component should be 320 + 8 + 8 = 336

The height of the clip is 240, so the height begins at 240 + 8 + 8 = 256

The control part of the MediaPlayback is about 70 pixels, so the final height is 256 + 70 = 326
1. With the step1Display instance selected, go to the Property Inspector and:
  1. Unlock the proportionate scaling (click on the lock icon so that it looks unlocked) feature
  2. W: 336
  3. H: 326
Configure the component via the Component Inspector
1. With the MediaPlayback instance selected, open/launch the Component Inspector
  
  In the Parameters tab:
2. Filetype: FLV (*)
3. Video Length:
  If the FLV was created by the Flash Video Exporter, the FLV will have the appropriate metadata so that the Video Length field does not have to be filled in. For this component to function completely, the Video Length field does need to be set properly.
  
  Here's a quick and dirty way to get that time:
  1. Create a second Flash project FLA, and save it as test.fla (same folder as the FLV)
  2. Drag a MediaPlayback component onto the stage
  3. Make sure the MediaPlayback instance is selected
  4. Open the Component Inspector, and enter the URL of the FLV (step1.flv in this case)
  5. Make sure the MediaPlayback instance is selected
  6. Open the Actions panel, and enter:
```
on(change) {
    trace(this.playheadTime);
}												
```
    We are sending the MediaPlayback component's current (playback head) time to the Output window
  7. Save and test movie
    Look at the last entry in the Output window ... this is the length of your FLV. If testing with the step1.flv, the time should be around 6.166 seconds. But remember, you may have edited this clip much differently, so your time value should be different
  8. Close this test FLA
4. Video Length:
  Now that you have an actual value, enter the length that you determined
  1. First, select the Milliseconds checkbox: [x]
  2. Then, enter the length of the video: hh:mm:ss:ms
    Video Length: 00: 00: 6: 166 (be sure to use your own value)
5. Automatically Play: [x]
  Select this option if you want the FLV to automatically play once enough of it has loaded
6. Use Preferred Media Size: [x]
  Select this option to preserve the height and width dimensions if the display area is larger than those dimensions. If the display area is smaller, the video will be scaled to the smaller size, even with this checkbox selected. This only prevents it from growing larger than it's original size.
7. Respect Aspect Ratio: [ ]
  This option only becomes available if the Preferred Media Size is deselected.
8. Control Placement: Bottom (*)
  You have the option as to where to place the playback controls
9. Control Visibility: On (*)
  On leaves the controls always visible, Off leaves the controls invisible (not available), and Auto makes them visible when the user cursors over the region the controls normally occupy
10. Cue Points:
  The bottom region of the Components Inspector (MediaPlayback) is for setting Cue Points, which can be used to trigger behaviors ... sort of like setting up your own triggering events.
Save and test scene
If all went well, the FLV should be automatically loaded (and the background behind the progressbar should show the file as it is streaming); the playback head should be seen moving as the video plays out; the controls for pausing, playing, and rewinding should all be working.

And no ActionScript was necessary to make this component work!
Save, test movie, and close clips.fla
In the first two parts of this tutorial, we looked at different ways in which video could be used within a Flash Project: imported and placed on the main timeline and imported and placed in a movie clip, and controlled by basic ActionScripting of the playback of the main timeline or a movie clip; imported and exported as an FLV, and then used as an external asset, loaded at runtime, and played back through a local embedded video instance or through Media Components. It was only the use of the (Flash 6 compatible) local Embedded Video object that required any special knowledge and use of ActionScript to enable and control playback.

However, should you need greater control over the MediaPlayback or other Media components:

Scripting the MediaPlayback component

Before we get started with the MediaPlayback component, let's first look at using the two other media components which make up the MediaPlayback.

Concluded in Video and Media Components, part 3 ...

completed as of Sunday, Apr 04, 12:45pm

April 04, 2004

Home

Editing during Import

Creating multiple clips

Different ways to use (embedded) video

Embedded video on the main timeline

Embedded video in a movie clip

Export an FLV

Preparation

Create a local Video object

Dynamically loading external FLV into an Embedded Video instance

Automatically

On demand

Controlling playback

Preparation

Media Components

Scripting the MediaPlayback component