Motion Graphics and the User Experience

Flash Video basics

Well here we are once again. Oh Flash video how long will you rule the virtual video universe? Will HTML 5 kill you dead Flash? Is the new HTML 5 Video Player signaling the end of days? Has Adobe laid-off off to many talented people to still be innovate?

No matter, Flash video is here now, works now and is still the top of the heap. In this tutorial we’ll be running through the basics of video encoding, bringing in that video into flash via a URL connection (externally called video) and controlling that video.

EXAMPLE

DOWNLOADS

Basic Flash Video Encode and Control Exercise | ZIP

GOALS

Video Encode Basics
Importing/attaching video in the Flash IDE
Controlling the Flash Video Player; Play/pause, stop and mute/unmute

RESOURCES

REQUIRED READING

Video Encode Basics

Flash is a bit picky. You need to have your video in a specific few video Codec (compression) for the Flash Player to work. So our first task is to get our “raw” video encoded properly. There are many tools that can be used for that but We’ll be using Adobe Media Encoder that ships with Flash.

ACCEPTABLE FLASH CODECS

Video

Audio

ENCODING RESOURCES

ENCODING TOOL OPTIONS

STEP ONE | WHAT YOU GOT SON?

First things first, it helps to know where you are to know where you are going.

a. Double-click on the .mov file located in Basic Flash Video Exercise > Source > monkey-rock-raw.mov. This should open Apple Qucktime pro.

b. When you .mov is open mouse over to Window > Show Movie Inspector

You should see something this window. Notice the format type is DV, which flash will not allow. Your ‘Raw” movie needs to exported with little to no compression and should look the way you want it to, with a Letter Box or not. Don’t expect to fix a improperly exported “raw” video in the flash encoding process. Start with clean, solid files.

Now that we can see it’s NOT one of the supported Flash Player Codecs let’s make it one.

STEP TWO | WHAT SIZE, WHAT QUALITY?

a. So you may have noticed all those other properties in the QuickTIme inspector window.

FPS: Frames Per Second
Data Size: Current size of your movie file
Data Rate (bit Rate): Physically transferred bits per second over a communication link

b. We need to figure out what the best FPS, Data Size, Aspect Ratio and Data rate will be for our end user. Lucky for us Adobe has built this nice little online tool, Flash Bit Rate Calculator, go there now.

Lets take a look

Aspect Ratio: As we go back a look at what out QuickTime Movie Inspector told us our Movie is 768×576 or 4:3 in ratio so set it to 4:3

Width: Where’s a hint, click on the blue “Grid Quality” link this will give us our best options for sizes as recommended by Adobe. Let’s select 512×384 a a nice middle sized video (grid suggested) Read up, it’s good intel.

Height: Set Automatically because you selected the predefined aspect ratio

Frame Rate: As a rule keep this at 29.97. You can half it, but your audio may drift and end up looking like an old Kung Fu movie.

Video Codec: There’s a lot of options (and opinions) but the most flexible is the h.264 codec. there is some question about future liability issues The main reason is users can view this file type with out the flash player, power to the people!

Audio: Our goal is this set-up to to balance the desire for quality and download speed. It’s a bit easier to give up a bit of quality in the audio end of things.

Audio Codec: Honestly, AAC works just fine and works with our encoder
Sample rate: Affects the quality of the audio, the lower the number the less the quality. To offer an example CD quality would be 44.1
Channels: Setting this to mono usually helps save about half the audio file size. Unless music is critical to your flash application use mono.
Quality: Well, you almost have to test it to get a real idea. I recommend leaving it at medium and test from there.

Adjustments: Just another way to tweak your setting, with a helping hand that is. The only way to see if the Adobe suggested changes work is to give them a try.

STEP THREE | MAKE YOUR ENCODE BABY!

a. Have your settings from the Adobe Calculator handy

b. Go to your application folder and open up the Adobe Media Encoder

c. File > Add > Basic Flash Video Exercise > Source > money-rock-raw.mov

d. Select your file in the window and click the “Settings” Button on the right side of the window (note: if you have the demo copy this feature will not work, use a preset h.264 setting)

c. In the export window give our custom setting a name , How about 512×384? Hit the Save icon ? This will allow us to use these settings later on if we like.

d. On the bottom video tab input your Adobe Bitrate Calculator suggested settings. Don;t forget to scroll down and change in all the setting to our new custom settings. Note the Maximum Bitrate setting can be 3-4 times the Target Bitrate setting. This allows the VBR to do it’s thing, pump up the Bitrate when needed.

e. Now click on the audio tab and plug in our new numbers.

f. Click “OK”

g. Click ” Start Que”

H. Wait. Ponder the universe. Reflect on your mortality.

I. Checkout the file size difference between our new video file and our old clunky, fat video file! wow.

STEP FOUR | CONTROLLING THE VIDEO

a. Download the starter Basic Video Encode and Control Exercise and open basic-flash-video-encode-control-exercise > fla > basic-video-h264-512×445-starter.fla

b. Create four buttons; Stop, Play, Pause and Volume

Lets get down with the actionscript

c. Open up your actions window and put in our first line. As always please pay close attention to the comments in the code.

/*Set up our basic conditions for this video application*/

//First lets load our video via actionscript
videoPlayer.load("monkey-rock-compressed.mp4");

Now let’s set up the buffer

//set the video buffer to five seconds(It wont play until five seconds have downloaded)
videoPlayer.bufferTime=5;

And now the volume so we don’ t blast out our users

//set your deault volume .1 to 1
videoPlayer.volume=.5;

d. It’s listener time. Set up an eventListener for each button. Make sure to give your buttons the proper instance names!

/*setup all our events listeners*/
stopVideo_btn.addEventListener(MouseEvent.CLICK,stopVideo);
playVideo_btn.addEventListener(MouseEvent.CLICK,playVideo);
pauseVideo_btn.addEventListener(MouseEvent.CLICK,pauseVideo);
volumeToggleVideo_btn.addEventListener(MouseEvent.CLICK,toggleVideo);

e. Now we need some function for those eventlisteners to work

Our Stop button


/*Set all our functions*/

//Stop the player and tell the playhead to go back to 0 seconds
function stopVideo(event):void {
 //tell our instance of the video player to stop
 videoPlayer.stop();
 //tell the playhead to go back to the start, or "0" in time
 videoPlayer.seek(0);

}

Our Play button


//Play the video
function playVideo(event):void {
 //Play
 videoPlayer.play();

}

Our Pause button


function pauseVideo(event):void {
 //tell our instance of the video player to pause
 videoPlayer.pause();

}

An finally our fancy toggle mute/un-mute button

//Toggle Volume off/on using a simple conditional statement
function toggleVideo(event):void {

 //if the is more than 0 then set it to 0 or "off"
 if (videoPlayer.volume>0) {

 //Set your volume to 0
 videoPlayer.volume=0;

 } else {
 //if the volume is 0 then set the volume to half power or "on"
 videoPlayer.volume=.5;
 }
}