Linking a Skin to a Pre-existing FLV File

In Flash, on the top menu, select: Window > Components. You will see two folders, "User Interface" and "Video." Open the video folder to view all available components. You can drag a pre-designed skin to the stage. Once it appears, on the parameters menu (which is on the lower bar, along with the Properties menu), select "Source." Here you can type or paste the external address of a previously produced FLV file.

Once you write the link properly, publish it on the browser to see it work. You may need to enable Flash player to access an external source. If so, you'll get the warning from the browser; follow the instructions. You'll need to quit the browser, and possibly Flash to reset the connection with the server. Your file should stream fine after this. If you want to make sure you are connecting properly with the video source prior to proper publishing, you may preview your project on flash player by selecting in Flash: Publish > Preview > Flash...

Three Ways of Creating Video Playback Skins on Flash

• Choose a default skin (as shown in the third video streaming lecture)
• Customize UI controls separately: both design and behavior
• Develop your own skin

The default skin is covered in the first lecture. Customizing UI controls is covered below. Developing your own skin is covered in the third lecture.

Customize User Interface (UI) Controls Separately

To customize your own skin, again select at the top of your computer menu: Window > Components. You will see two folders, "User Interface" and "Video." open the video folder to view all available components. Drag the components you want to use, which include:

• Backbutton
• BuffferingBar
• CaptionButton
• ForwardButton
• Mutebutton
• FullScreenButton
• MuteButton
• PauseButton
• PlayButton
• PlayPauseButton
• SeekBar
• StopButton
• VolumeBar

Edit the them similarly to others Flash Symbols. Actionscript is already embedded, which you can modify, but it is highly suggested to leave it alone for now. To test a basic customized User Interface:

• Import a video into Flash as described in Lesson 3, only choose no skin for the player.
• Insert a second layer on your Flash timeline, make sure it is at the top and name it "Actions."
• Select your video, which is considered a component, and on the Parameters menu name it anything you like, just make it relevant. I'll name it "VideoTest."
• Rename the layer the video is on "VP" (for Video Player).
• From the Video File Folder in your components window, select the "PlayPauseButton" and drag it to stage.
• Make sure you have the button selected; on the Properties panel give it the name "Play_Pause"
• Select, and right click on the Actions layer--from the drop-down menu select "Actions." An Actionscript window will appear. Write the following code: videoTest.PlayPauseButton = Play_Pause;

Note that the Actionscript has a basic set up, which you can use with any component and pre-designed buttons: "name_of_component.name = instance_name_of_button

In other words:

• VideoTest.PlayPauseButton = Play_Pause;

is equivalent to

• VideoTest.muteButton = Mute_Button;

Experiment with all the buttons listed above.

Note that the name of the mute button in the action script has the first letter "m" in lower case. This is so even though its name on the file library appears with uppercase. The way to check that you have coded the object's name properly is if the Actionscript window shows the name in blue, otherwise you will get a script error, and you will need to debug.