Tiago's Weblog

December last year Adobe released their new flash player 9.0.115 codenamed “MovieStar” the codename just hit exactly what is supposed to be, Adobe just gave Flash the possibility to playback mp4 files, this is really really great, if anyone of you know what the H264 codec does/is, then you will jump around like I did as I heard the news.

H264 is a standard codec capable of creating good video quality at substantially lower bit rates eg. half or less the bitrate then mpeg2 or H.263. an additional goal was to provide enough flexibility to allow the standard to be applied to a various broad of applications and systems.

read more about H.264 at WIKIPEDIA

Ok the grey theory is over now, let’s start rocking

We need to ensure that we’re ready for H.264, I’ve created a small checklist that you need to ensure that every point is checked:
1. You need to ensure that you have the latest flash player installed therefore jump over to this site to check if you have version 9.0.115 or higher: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507

2. Update your Flash IDE version to the latest one, at this time it’s 9.0.2, you can update your Flash 9 by selecting HELP on the menu and click on UPDATE, the Adobe Update Application will fire up and search for any updates available on all the Adobe Products installed on your machine, if this method fails for any reason, you can also download the update from this location: http://www.adobe.com/support/flash/downloads.html

3. Lastly you need to have some H.264 content, how do you get it? Well you can shoot your own footage and convert the footage with Quicktime Player Pro or any of the Video Products of Adobe, Premiere & After Effects have already presets done, ready for you to start encoding High quality. In case you don’t have any of the options above I’m providing a sample
H.264 encoded file.

If you accomplished everything written above, the it’s time to get started, fire up your newly updated Flash CS3 and start with a new Actionscript 3.0 document with a size of 1280x720px, yeh this is quite big I know, but if you familiar with the HD standards, the you’ll notice that this the second highest resolution available before getting to full HD resolution which is 1920×1080 px.
Flash is capable to handle any dimensions set, but for the sake of the normal screen size we really can’t provide a 1920px wide video for everyone to watch, unless everyone got a 30″ screen for Christmas..

Now we have this huge stage in front of us, maybe it doesn’t fit completely in our screen, so let’s move over to the zoom dropdown and select “Show All”.

Now that we see the whole stage, move over to the components dropdown and drag & drop an instance of the FLVPlayback component to the stage. While selected move over to the properties panel and give it the exact same size as the stage and position it at the top left corner by inputting at the X & Y coordinates a 0.

At this point your stage should look like this:

While still having the component selected open up the Component Inspector tab by pressing SHIFT+F7 or if you using the default workspace on Flash 9 you can also select the component and click on the parameters tab at the same place where the properties panel is.

On the parameters tab or the component inspector you can setup a whole bunch of parameters, you can play around with them a bit later if you never seen them, our important property is the the source.
Now there is a small error on the Flash Update, the component is ready for H264 files, doesn’t matter if they have a file extension of

the dialog box will never display any of the files above because it’s searching by default for .flv files, don’t fear this is not a big issue, just go to your filename on the dialog box and enter * (yes an asterisk) and voila you’ll see all the mp4′s and mov’s on that specific folder apart from all the other files you have in there like me:

so go on and choose your mp4 file, press OK and WAIT before you also confirm the the last dialog box ensure that you UNCHECK the option “Download FLV for cue points and dimensions”, remember what I told you before? Flash Update has a little issue checking the filenames so I assume that the dialog box is only searching for FLV’s and it will only accept FLV’s metadata, if you unchecked it then you are ready to go on.

Now you are ready to deploy, if you want you can just press CTRL+ENTER to test our your movie, and you’ll see that the file is playing.

Last but not least most people get confused by the fullscreen button not working, the button works but the object settings in the HTML are not allowing to take over the whole screen, Adobe was so nice to create a preset for such cases and you can access it by moving on to FILE -> PUBLISH SETTINGS -> move on to the HTML Tab and select “Flash only – Allow Full Screen”

Go on press the publish button and open the generated HTML, try out the full screen button.. isn’t it a beauty?
Ok guys, that’s it for now, now you know how to playback the highquality videos in Flash.

Have fun with it
Tiago