Video Player with file browsing on your desktop

Hello All, 
Before going on to a tutorial on using sockets in Adobe Flash Builder, I would like to give some introduction on application development using  Flex Builder.And after I am done with the this, we will go on to create a UDP based data transfer application.
 
 
Before we start with the getting started tutorial , I need you to install Flex Builder 3, the installer of which you can get here. And then, i need you to know , how to create projects and manage project files in the builder ,you can get the tutorial on the same here.
   
 
 Ok, so assuming that you have conformed to the above two prerequisites, we go on to the next step. The following tutorial will illustrate how to create a Video Player using Flex,simultaneously giving you a brief idea of how objects work in Flex.
   
 Before going on to the coding part, it will be good for you to know how the things work in Flex. The whole application code is divided into two parts, the visual elements as one and the client logic related to that in other part. i.e the visual elements are segregated at one place and the codes related to those and client logic at the other. This framework , helps decouple the view from the actions , so basically a GUI designer and the coder who writes functions can work  to build an application parallely. MXML, a declarative XML-based language, is used to describe UI layout and behaviors, and ActionScript™ 3, a powerful object-oriented programming language, is used to create client logic.
  
So now that we have a few basics cleared, lets go on to designing the view of our application.Here we use only MXML and then debug our application to see how it looks.
  
Step 1:Create a new flex project, select Desktop Application when given chioce to create a desktop or web application, and name the project as flvplayer.
  
 The moment the creation step is finished you would see the following script on your screen.This is MXML.  <?xml version="1.0" encoding="utf-8"?>
 <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   </mx:WindowedApplication>
 The above defines a window for the application.
  
Step 2:
 The good news is flex has by default some GUI elements already defined, two of them being a video player and buttons, and these are the only two we will need to build our FLV player.
  Let us embed a videodisplay in our window with three buttons one for playing the video,one for browsing the flv files  and one for pausing.  To define a button you need the mxml tag as :
 <mx:Button x="10" y="551" label="Play" click=""/>
 Here the x and y positions are relative to the container of the button, which right now will be the application window.The label attribute is for  the text which willbe shown on the button and the click attribute will define which function to call when the button is clicked on. As you can see, here you are decoupling the code you need when you press the button.  To define the videodisplay you need the tag:
 <mx:VideoDisplay x="10" y="10" width="778" height="533" id="myVidDisp"/>
 Here the attributes x,y ,width and height are self-explanatory. The id attribute gives a name to this element in the application.This is obvious , as suppose we need two media players in the application window then we  need to identify them by two different names.  So now we will embed all the above requred tags in the MXML. Your code now shoule look like :
 <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#5E5959"
 backgroundGradientAlphas="[1.0, 1.0]" 
  backgroundGradientColors="[#29F27E, #0C776E]" >
  <mx:VideoDisplay x="10" y="10" width="778" height="533" id="myVidDisp"/>
  <mx:Button x="10" y="551" label="Play" click=""/>
  <mx:Button x="63" y="551" label="Pause" click=""/>
  <mx:Button x="691" y="551" label="Browse Files" click=""/>
 </mx:WindowedApplication>
  
Step 3:Giving life to the dumb GUI.
 Now that we have setup a GUI for ourselves, lets go on to give it a life. To embed code in the xmml, we need the script tag. <mx:Script>
      <![CDATA[
       
      ]]>
 </mx:Script>
 In between the CDATA tag would lie our code .The life of the application.  Let us build three functions : 1.To browse a a .flv file
 2.To pause a running video
 3.To play a puased video
  Now , the prototype of a function in AS 3 is as follows:
  <scope> function <functionname>(<passedarguments>):<returntype>
 {
 
 } 
  so if we want a function onPlayClick() which is called when the user clicks on the play button it should look like :
 public function onPlayClick():void
 {
 }
  similarly we will define two more functions onPauseClick() and onBrowseClick() and put them in the script tag. also in the click attributes of the play , pause and browse files button you need to put onPlayClick() ,onPauseClick and onBrowseClick() respectively, after which your code should look like:
  <?xml version="1.0" encoding="utf-8"?>
 <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#5E5959"
 backgroundGradientAlphas="[1.0, 1.0]" 
  backgroundGradientColors="[#29F27E, #0C776E]" creationComplete="init()"   >
  <mx:VideoDisplay x="10" y="10" width="778" height="533" id="myVidDisp"/>
  
  <mx:Button x="10" y="551" label="Play" click=""/>
  <mx:Button x="63" y="551" label="Pause" click=""/>
  <mx:Button x="691" y="551" label="Browse Files" click="browseAndPlay()"/>
     <mx:Script>
      <![CDATA[
       public function onPlayClick():void
       {
        
       }
       
       public function onPauseClick():void
       {
        
       }
             
       public function onBrowseClick():void
       {
    
    
    }
      ]]>
      
     </mx:Script>
     
 </mx:WindowedApplication>
   
Step 4:Throwing life into the functions
  Now for the play and pause functions the code is as simple as  myVidDisp.play() and myVidDisp.pause(). The coding for the browse function is a bit tricky but nothing a newbee cannot grasp.  The code is as follows:
   var file:File=new File();
      var Filter:FileFilter = new FileFilter("Flash Video","*.flv");
   file.browseForOpen("Select a Video File",[Filter]);
      file.addEventListener(Event.SELECT,fileSelected);
    The function
 file.browseForOpen("Select a Video File",[Filter]);
  opens a native broswer for the user to select files to open for the video player.
  And the function 
 file.addEventListener(Event.SELECT,fileSelected);
 can be compared to the click attribute for the buttons we defined above.
 Basically this function says that, for the file, when the event Event.SELECT occurs, that is user selects a file in the browser, you need to call the function fileSelected().
 
 Now we need to define the function fileSelected.
   public function fileSelected(event:Event):void
   {
    var file:File=event.target as File;
    this.myVidDisp.source=file.nativePath;
   }
 Here you can see that we passed the event as an argument as the event stores information about the file seleted by the user.
 
 The statement var file:File=event.target as File, defines a file and typecasts event.target which is an Object to a type of  File Object.
 The statement this.myVidDisp.source=file.nativePath tells the compiler to change the source of the videoplayer to the nativepath of the selected file.
  You final code should look like:
 <?xml version="1.0" encoding="utf-8"?>
 <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#5E5959"
 backgroundGradientAlphas="[1.0, 1.0]" 
  backgroundGradientColors="[#29F27E, #0C776E]" >
  <mx:VideoDisplay x="10" y="10" width="778" height="533" id="myVidDisp"/>
  <mx:Button x="10" y="551" label="Play" click="onPlayClick()"/>
  <mx:Button x="63" y="551" label="Pause" click="onPauseClick()"/>
  <mx:Button x="691" y="551" label="Browse Files" click="onBrowseClick()"/>
     <mx:Script>
      <![CDATA[
              public function onPlayClick():void
       {
        
       }
              public function onPauseClick():void
       {
        
       }
                    public function onBrowseClick():void
       {
        var file:File=new File();
        var Filter:FileFilter = new FileFilter("Flash Video","*.flv");
     file.browseForOpen("Select a Video File",[Filter]);
        file.addEventListener(Event.SELECT,fileSelected);
          
               }
       
       public function fileSelected(event:Event):void
       {
        var file:File=event.target as File;
        this.myVidDisp.source=file.nativePath;
       }
             ]]>
           </mx:Script>
     
     <mx:Script>
      <![CDATA[
       
      ]]>
     </mx:Script>
           </mx:WindowedApplication>
  
Step 5: Debug the application and enjoy your own hand tailored video player.
  Click on the browse button, a browser window will open  , select a .flv file and see your player in action.  Stay tuned for some more tutorials before the weekend.