At A Glance Main Projects Tutorials Resume

Messenger


There currently is no messenger. Manually, you can contact me via:
AIM: TecGumbo

Google Talk: palen1c at gmail.com

Twitter: @Technogumbo



How to Make an Open Source Flash Video Preloader


Download the Flash Preloader Source Code

As a preface, this tutorial was written in March of 2008. There are currently much better ways to develop an open source flash application. Developing using this methodology should be avoided. Please check out my most recent open source flash programming tutorial.[LINK]

For roughly eight months I have been toying in the realm of streaming video on the Internet and subsequently Open Source Flash development. It all started when I saw a sweet demonstration of live Internet robotic control of the RoboDS platform using the Red5 media server. At the same time I had recently graduated from college and figured I could put streaming video and flash to good use in my resume.

The Adobe Flash platform was my clear choice in the realm of RIA(Rich Internet Application) development due to its cross browser, and cross platform interoperability and adoption rate. I have many times seen the figure of a 98% browser install rate associated with the flash player. I wanted to make my resume easy to maintain so creating the entire application in flash was not an option. I decided to use Javascript, php, and flash in asynchronous combination in the form of an AJAX enabled, flash embedded final product.
For the first version of my resume, I used FlashMX 2004 in order to make self contained swf video files that would automatically play when loaded using the swfobject script. I followed the great Flash MX preloader tutorial on kirupa in order to make a nifty little preloader for the videos that correspond to each section of the CV.

Enter Open Source Flash - FFMPEG

Now that I have been working in the realm of Open Source Flash for several months, I figured that it would be a good time to replace the self-contained swf videos with one swf that dynamically loaded a series of flv files and still retained the preloader functionality. You can pretty easily encode raw NTSC interlaced DV files into the .flv video format using ffmpeg with a command something like this:

ffmpeg -i(input file) -deinterlace -s 288x190 -b 120k -ar 44100 -ab 40k (output file).flv

In my case, I shot the videos for my resume using a Canon XL1S DV camera, then converted raw DV files to flv after I was done editing them. I then created the swf that dynamically preloads, then plays the flv files using the technique that I am going to try and explain below.

Tools Used

The original primary tool that I used in order to create this preloader was FlashDevelop. It is a great IDE (I actually used it for writing all of the php for this site as well) and packages all of the osflash tools nicely, but will only run on Windows XP with the .NET 2.0 framework. This obviously limits quite a few developers. For this reason, I will show you how to make this AS2 based project from scratch with:

1.your favorite text editor
2.Motion Twin's MTASC Compiler
3.Swfmil

I used Phillipe's great FlashDevelop FLV video streaming example as the basis for loading the video. There are definitely a few tricks in creating the final swf this way. I will do my best to explain them. I am going to assume that you are familiar with some object oriented programming and already have Swfmill and mtasc installed. If you are having problems with this tutorial, you should first try Clemens Hofreither's tutorial on osflash called: How to structure and set up a flash project without using the flash IDE.

Just Getting it to Work

The following assumes that you already have swfmill and mtasc installed and in your operating systems path. In order to compile a working preloader from the sample code, it is just a matter of using swfmil to create a swf that contains your library (The two jpg's named ProgressBar_Full.jpg and ProgressBar_Outline.jpg along with the VideoSurface) and then using mtasc to compile the Preeloader.as and VideoDisplay.as files and inject them into the swf. This can be accomplished in three steps.

Step 1

Download the sample project and unzip it to a folder on your computer. Open a command line prompt on whatever platform you are using and navigate to the unzipped sample project directory.

Step 2

Assuming you are in the sample project directory, first use swfmill to create a swf file that will contain all of your assets (the library). The file assets.xml is set up so that it will import the two jpegs and create an empty movie clip called VideoSurface. Create the swf by using the following command:
swfmill simple assets.xml FlvPlayer.swf
This should create a new file called "FlvPlayer.swf" that contains the two jpg's and VideoSurface.

Step 3

Now we need to compile the Preeloader.as and VideoSurface.as scripts and inject them into the FlvPlayer.swf that we just created to make the final preloader. Assuming you have named the swf that we created above "FlvPlayer.swf" you can do this using the following command:
mtasc Preeloader.as VideoDisplay.as -main -swf FlvPlayer.swf
The -main specifies that the first point of execution will be the "main" function explained in more detail below.

You should now have a working FlvPlayer.swf that will play the file FLVExample.flv included in the project folder!

Explanation of the Code

This project uses what is called the "main entry point" method. If you look in the code for preeloader.as all the way at the bottom, you will see

static function main()
{
application = new Preeloader( _root );
}

So this is the first thing that is run when the application is executed. A new instance of the Preeloader class is being called and passed the _root object. This is so that when the class constructor (the function Preeloader) is run, the "this" keyword can be given the correct scope for the rest of the application. In Clemens tutorial that I mentioned above, he talks about having to use the onLoad event for dynamic placement of all of his assets. This is what we are avoiding with this chunk of code.

So the second thing that is executed is actually the class constructor, the Preeloader function inside of preeloader.as. Preeloader takes an argument of "target", which in this case is _root. You will see that we Assimilate root by using target. As mentioned in the code, this is explained in more detail on Aral Balkans blog post about assimilating _root.

The main bulk of the function Preeloader is actually dynamically placing all of our objects that we want to display on the stage. These objects are being loaded from the swfmil library that we created using the attachMovie method.

attachMovie

Note that the VideoDisplay is special. It creates a new instance of VideoDisplay.as that is treated just like an object. Inside of the util.VideoDisplay class is where you will find the actual swfmil linking to the VideoDisplay object that is a symbol inside of our swfmil video.swf. The actual line of code inside of util.VideoDisplay.as that does this is:

display = parent.attachMovie("VideoDisplay", name, depth, initObj);

You'll notice that in VideoDisplay.as and Preeloader.as, whenever I use attachMovie, the first argument is always the swfmill symbol name.

A very important note about dynamically adding items to the stage like this is that you need to make sure to always use a different depth argument for attachMovie. If you place two objects at the same depth, you will have trouble with them actually appearing on stage when you execute the swf.

Setting the interval to check the loaded percentage

The line in Preeloader.as inside the function Preeloader that says:

interval_ID = setInterval(this,"CheckLoadedPercentage", 500,display.stream);

Means that the function "CheckLoadedPercentage" will be called every 500ms for the duration of the application, or until we use clearInterval. CheckLoadedPercentage is what advances the progress bar and adjusts the loaded percentage.

CheckLoadedPercentage

This function contains an array of all of the video file sizes. This is because in order to figure out the percentage complete, these values are needed. You may be saying, why not just use Netstream.bytesTotal? We don't use this because it doesn't work in Internet Explorer. Netstream.bytesTotal will only return the total bytes once the flv is fully loaded. Once the pctLoaded is 100 or more, we remove the progress bars, clear the percentage text, unpause the now loaded flv, and finally use clearInterval in order to cease the execution of the function CheckLoadedPercentage.

Why do we pause the video until it is loaded? Can't we just set Netstream.setBufferTime?

The answer is no. In Firefox, Netstream.setBufferTime gets ignored, so the flv will start playing immediately. This wouldn't work for users that have slow connections and would make the use of a preloader irrelevant.

How could I expand on this loader?

In my resume application, each time I have Javascript load a video, I pass a specific url to the swfobject script. I have the flv files for the resume named 1.flv,2.flv,3.flv,4.flv,5.flv,6.flv, and finally 7.flv The url that gets passed to swfobject each time I want to load CustomPlayer.swf with a specific flv video looks like this:
CustomPlayer.swf?customizedvideo=1
The example above will load the file 1.flv. I use an additional function in order to extract the value that occurs after customizedvideo in the url string. So if you wanted to load a video called "summervacation.flv" you would call your swf video using the following assuming that you have added another function to parse the url string:
CustomPlayer.swf?customizedvideo=summervacation

Conclusion

The world of open source flash development is something that I found very challenging to get started with due to the complexities of some of the tricks used in order to avoid using the Flash IDE and MX Classes. However, I still believe that in the realm of rich Internet application development, Adobe Flash is still your best bet. I hope that this tutorial has helped you get your own flv preloader up and going and also helped alleviate some of the complexities of open source flash development. For additional reading, please check out the "Related Links".

Comments

Charles
Charles
November 2, 2008 1:13 pm

Be warned. This tutorial is out of date. Rather then use Mtasc your better off to use flashdevelop with the free Flex SDK from Adobe. Thanks for looking at it though

Comments are currently disabled.