VIDEO PLAYER                                                                               as3


    This tutorial shows how to create quiet complex flash based video player. The explanation might not be absolutely clear to everybody so i suggest to work with source files that contain original fla file,sample movie and required external adobe Jscript file. The key features of this player are:
  • volume, progress and loading bars
  • full screen button
  • play,pause,stop,mute,unmute buttons
  • clickable screen for fast pause and unpause
  • interface hides and shows instantly according to mouse cursor leaving or entering stage
  • interface and mosue cursor hides automaticlly after idle for 3 seconds
  • current play time and total length of the movie
At the end we should get something like this :




    Create new actionscript 3.0 file. Set stage dimensions to 600px(width) and 380px(height). Create 5 more layers on timeline. Call them script, mcVideoControls, overlayPLAY overlayPAUSE, vidStream and background. The background layer will contain anything u want to have on the background. Select vidStream layer and drag in Linked Video component with the size of stage. In the instance name box enter this vidDisplay. Select overlayPAUSE layer and draw rectangle again as big as stage so it covers it entirely. Conver it to movieclip, set its transparency (alpha) to 0% and name it btnoverlayPAUSE. Now on the overlayPLAY layer draw exactly the same rectangle, convert it to movieclip, set its color to black and transparency to 50%. You can draw a play button if you want. Set its instance name to btnoverlayPLAY. And now more complicated stuff. Select mcVideoControls layer. Create play, pause, stop, mute, unmute, full screen, normal screen buttons then way you like them. Set their instance names to btnPlay, btnStop, btnPause, btnMute, btnUnmute, btnNS, btnFS. These will serve as control buttons. Now insert dynamic text field and call it lblTimeDuration. Now we will need progress and volume bar scrubbers. Create two small filled circles and conver them to movieclips. Name them mcVolumeScrubber and mcProgressScrubber. Lets make progress bars now. Create two thin rectangles. One red and the other one grey. The red one will represent play progress the grey one load progress. Convert them into movieclips and name them mcFillRed and mcFillGrey. Select both and conver them into one movieclip. Duplicate this movie clip and one of them call mcProgressFill and the other one mcVolumeFill. Now move the scrubbers to the left edge of these two progress movieclips, one to each. This way we created volume bar and movie progress bar. Arrange everzthing weve just created on mcVideoControls layer the way you like it. Select it all and conver it to one big movieclip. Set the instance name of this movieclip to mcVideoControls. Select the script layer, press F9 ,and insert the following script.


Now all you need to do is have the *.swf file, actual movie and the Jscript file in the same directory and everything should work just fine. Make sure the path to the move and the name of movie file , including the format of the movie (*.mov,*.mp4,*.avi ...), are correct in actionscript code (line 27 of the script). Also for the fullscreen feature to work you have to add the following part to the html code of flash object.

<param name="allowFullScreen" value="true" >

Or if the code already contain this line, change the value from false to true.