A Super Simple FLV Player using ActionScript 3.0

As part of my ongoing pursuit of learning a wide variety of technologies, I decided to see what ActionScript 3.0 was all about. As part of my learning, I decided I wanted to join the ever growing crowd of people that have “created” their own FLV Players. I knew people weren’t actually creating the video player and were really just setting up Video component in the UI and telling it what video to play, yet I still wanted to see how it was done. As such, my journey into ActionScript 3.0 began. Fair warning: I get real lazy about writing clean code, organizing my files, and setting up my development environment when I just start learning something. As such, the following embraces the lazy approach to getting things started.

Prerequisites:

Flex 2 SDK: http://www.adobe.com/products/flex/sdk/
Example FLV Files: http://www.mediacollege.com/flash/video/tutorial/example-flv.html

1) Install Flex 2 SDK

After downloading the flex_sdk_2.zip, I just unzipped the contents in to a work folder, c:\flex_sdk_2. The key resources I used from this package with were the compiler, bin\mxmlc.exe, and the debug Flash player (player\debug\SAFlashPlayer.exe).

2) As a ActionScript3 novice, I browsed a few tutorial sites. Then I went ahead and compiled and ran a few different tutorials. I found that the Beginners Guide to Getting Started with AS3 at http://www.senocular.com/flash/tutorials/as3withmxmlc/ to be very helpful, and you will find it goes into much greater detailon the use of the mxmlc.exe command line tool than I go into here. Next, I decided I want to be cool like everyone else and create an FLV Video Player. After doing a decent search, I noticed that most of the tutorials for creating FLV Video PLayers were using Flash Professional, which is outside of my “just learning” budget. However, I did find what I was looking for in the Adobe Flash Media Development Center. The tutorial taught me a lot more than I initially wanted, but it showed me exactly what I need to do to create my own.

3) Once I read the tutorial, I embarked on creating my own SuperSimpleFLVPlayer. In order to test whatever I ended up making, I needed an example FLV file and I found one at
http://www.mediacollege.com/flash/video/tutorial/example-flv.html. I downloaded ‘20051210-w50s_56K.flv’ and saved it as c:\flex_sdk_2\learning\20051210-w50s_56K.flv.

4) Next, I generated the following source in my favorite text editor:

package {
    import flash.display.Sprite;
    import flash.net.NetConnection;
    import flash.net.NetStream;  

    import flash.media.Video;
    public class SuperSimpleFLVPlayer extends Sprite {  

        private var nc:NetConnection;
        private var ns:NetStream;
        private var vid:Video;
        private var client:Object;
        public function SuperSimpleFLVPlayer () {
            // Initialize net stream
            nc = new NetConnection();
            nc.connect (null); // Not using a media server.
            ns = new NetStream(nc);
            // Add video to stage
            vid = new Video(320,240);
            addChild (vid);
            //vid.x = ( stage.stageWidth / 2) - ( vid.width / 2 );
            //vid.y = ( stage.stageHeight / 2) - ( vid.height / 2 );
            // Changed since when deployed the
           // above set the video player nearly off the screen
           // Since I am lazy, I am just going to 0 them
           // out for now. Apparently, I have a lot more
           // to learn.
          vid.x = 0;
          vid.y = 0;  

          // Add callback method for listening on
          // NetStream meta data
          client = new Object();
          ns.client = client;
          client.onMetaData = nsMetaDataCallback;
          // Play video
          vid.attachNetStream ( ns );
          ns.play ( '20051210-w50s_56K.flv' );
        }
        //MetaData
        private function nsMetaDataCallback (mdata:Object):void {
            trace (mdata.duration);
        }
    }
}

I saved the source as c:\flex_sdk_2\learning\SuperSimpleFLVPlayer.as.

5) From the command line I compiled the file:

c:/flex_sdk_2/learning>../bin/mxmlc.exe
        -use-network=false
        SuperSimpleFLVPlayer.as

Note that I had to use the ‘-use-network=false’ directive. This told the compiler that I will not be using the network in my testing so don’t worry about sandbox issues when trying to load the flv from my local drives. Once I decide, if I decided, to deploy this to a website, I will need to recompile my code without this directive.

6) After compilation succeeded, I loaded the swf in the debug Flash Player:

c:/flex_sdk_2/learning>../player/debug/SAFlashPlayer.exe
        SuperSimpleFLVPlayer.swf

Success. Flash and ActionScript really is multimedia made easy.

Quick Update: I found that once I actually deployed this to a website it started behaving differently than it did in the debug tool, which I am none too happy about. However, for this quick and dirty learning experience, I just changed the vid.x and vid.y to both equal 0 and now it at least put the video into a visible part of the stage. For reference, feel free to check out what I deployed at: http://www.kriggio.com/tromstick/flv/index.html. By the way, feel free to tell me what I am doing wrong if you see anything, I really am just learning ActionScript 3.0 so any “constructive” criticism helps.

---

Possibly related posts: (automatically generated)

• Flash Player Create Content Tutorial, Flash Player Content Writing, Flash C…
• Components