Flash, Flex and ActionScript Resources -
Slide Media Player
Bilal Abdelkader
I'm a Telecom & Electronics Engineer, graduated 2 years ago from the Faculty of Engineering in the Lebanese university. I've worked since 3 years for about 2 years as freelancer Flash developer. 
By Bilal Abdelkader
Published on January 25, 2010
A simple dynamic media player with slide bar basis, written in AS3.

Slide Media Player
This tutorial will guide you to create a simple slidebar wich will control an mp3.

Our media player is divided to 4 components:
    - Slide Bar which will control the mp3 position
    - Left Pane to show the current mp3 playing position in percentage of its length
    - RightPane to start/stop the mp3
    - Mask to add some tweening effects to the movie clip

The project is simply a .as file, which contains 5 classes:

- First is the SlideBarContainer,
This classes when instanciated, creates dynamically a rectangular background and place in it a bar and a circular slider, and position them relatively.
All their components are sprites, and it extends the MovieClip class
This way we can add to the stage our slidebar as a movieclip, and control its contents(bar, slider) using the getters/setters functions.

[as]class SlideBarContainer extends MovieClip
    private var _track:Sprite;
    private var _slider:Sprite;
    private var _bar:Sprite;
    public function SlideBarContainer()
        _track = new Sprite;
        _slider = new Sprite();
        _bar = new Sprite();
        // Track background, 0.4);, 0x666666);, 0, 300, 34);;
        // Bar;,0x999999);, 0, 280, 8, 5);;
        _bar.x = (_track.width - _bar.width)/2;
        _bar.y = (_track.height - _bar.height)/2;
        // Slider;,0x959595);, 0, 8);;
        _slider.x = _bar.x + _slider.width/2;
        _slider.y = _track.height/2;
        _slider.buttonMode = true;
} [/as]

- Second class is RightPnaeContainer:
This class represents the right gray rectangle, it simply creates the background (_pane) and place in it two sprites: Triangle as 'Play' symbol, and a square as 'Stop' symbol, and position them relativelly.
these sprites are often controlled from outside by the gettres/setters.

[as]class RightPaneContainer extends MovieClip
    private var _pane:Sprite;
    private var _rectangle:Sprite;
    private var _triangle:Sprite;
    public function RightPaneContainer()
        _pane = new Sprite();
        _rectangle = new Sprite();
        _triangle = new Sprite();
        // Main Pane;,0x959595);, 0, 70, 34, 10);
        //, 0, 70, 34);;
        // Stop Rectangle;,0x959595);, 0, 16, 16);;
        _rectangle.x = (_pane.width - _rectangle.width)/2;
        _rectangle.y = (_pane.height - _rectangle.height)/2;
        // Play Triangle;, 16);,8);, 0);
        _triangle.x = (_pane.width - _triangle.width)/2;
        _triangle.y = (_pane.height - _triangle.height)/2;

page 2
- Third class is LeftPaneContainer:
As its name, this class represents the left rectangle, it's just a background and a text field, which should render the position of the mp3 media, in percentage of its length.

[as]class LeftPaneContainer extends MovieClip
    private var _pane:Sprite;
    private var _textField:TextField;
    private var textFormat:TextFormat;
    public function LeftPaneContainer()
        _pane = new Sprite();
        textFormat = new TextFormat();
        _textField = new TextField();
        // Main Pane;,0x959595);, 0, 70, 34, 10);
        //, 0, 70, 34);;
        // Text Format
        // Text Field  
        _textField.width = _pane.width;
        _textField.height = 20;
        _textField.defaultTextFormat = textFormat;
        _textField.selectable = false;
        _textField.y = (_pane.height - _textField.height)/2;

- Fourth class is the Mask:
This class is just a rectangle sprite with width equal to 1, it will mask the slide bar to extend it and collapse it, to add some tweening effect to the movie clip.

[as]class Mask extends MovieClip
    private var maskSprite:Sprite;
    public function Mask()
        maskSprite = new Sprite();;,0x959595);, 0, 1, 35);;

The Fifth class is SlideMediaPlayer which is our main class, it will contain and use all the above classes:
First. create instance for each class and set its position on the stage:           

New instance of SlideBar, and position is set.

[as]slideBarContainer = new SlideBarContainer();
slideBarContainer.x = (stage.stageWidth - slideBarContainer.width)/2;
slideBarContainer.y = (stage.stageHeight - slideBarContainer.height)/2;[/as]

New instance of RightPane, and position is set, the 'Stop' rectangle should be masked by default.                        

[as]rightPaneContainer = new RightPaneContainer();          
rightPaneContainer.x = slideBarContainer.x;
rightPaneContainer.y = slideBarContainer.y;
rightPaneContainer.buttonMode = true;
rightPaneContainer.rectangle.visible = false;[/as]
New instance of the LeftPane, position is set, and the default text is filled.                   
[as]leftPaneContainer = new LeftPaneContainer();          
leftPaneContainer.x = slideBarContainer.x - leftPaneContainer.width;
leftPaneContainer.y = slideBarContainer.y;          
leftPaneContainer.loaderText.text = "Playing 0%";[/as]

New instance of Mask, position is locked to the slidebar instance, slidebar use it to be masked.
[as]maskSprite = new Mask();
maskSprite.x = slideBarContainer.x;
maskSprite.y = slideBarContainer.y;          
slideBarContainer.mask = maskSprite;[/as]

page 3
As the movie clip is physically settled on the stage, lets begin by adding the dynamic actions to control it:
Create a rectangle to bound the dragging of the slider on the bar space          
[as]bound = new Rectangle( + slideBarContainer.slider.width/2,
  - slideBarContainer.slider.width,
           0); [/as]

Create the sound instance, and load our mp3 media file.           
[as]sound = new Sound();
sound.load(new URLRequest("pop.mp3"));
soundPosition = 0;[/as]

Create the event handlers:
            - Create an event handler assigned to the slider, to be dragged on the bar bound space.           
[as]slideBarContainer.slider.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
private function mouseDownHandler(event:MouseEvent):void{
    slideBarContainer.slider.startDrag(false, bound);
    dragging = true;

            - Create an event assigned to the stage to catch when the slider drag's release, and calculate the new slider position to update the mp3 position, and then play it on the updated position.
[as]stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
private function mouseUpHandler(EVENT:MouseEvent):void{
    dragging = false;
    soundPosition = ((slideBarContainer.slider.x - ( + slideBarContainer.slider.width/2)) / ( - slideBarContainer.slider.width)) * sound.length;

            - Create an event handler assigned to the right pane click, to extend/collapse the slide bar, ease the right pane using the tween class, extend/collapse the mask width we've already created, play/stop the mp3 sound, and switch render between the 'Stop's Rectangle'/'Play's Triangle' sprites.

[as]rightPaneContainer.addEventListener(MouseEvent.CLICK, mouseClickHandler);
private function mouseClickHandler(event:MouseEvent):void
        xTween = new Tween(rightPaneContainer, "x", Regular.easeOut, rightPaneContainer.x, slideBarContainer.x + slideBarContainer.width, 3, true);
        rightPaneContainer.triangle.visible = false;
        rightPaneContainer.rectangle.visible = true;
        widthTween = new Tween(maskSprite, "scaleX", Regular.easeOut, 1, slideBarContainer.width, 3, true);
        xTween = new Tween(rightPaneContainer, "x", Regular.easeOut, rightPaneContainer.x,slideBarContainer.x, 3, true);
        rightPaneContainer.triangle.visible = true;
        rightPaneContainer.rectangle.visible = false;
        widthTween = new Tween(maskSprite, "scaleX", Regular.easeOut, slideBarContainer.width, 1, 3, true);
    extended = !extended;
            - Create an event handler to calculate the percentage of the mp3 position of its length, and update the slider position and the loadertext content on each frame:
[as]addEventListener(Event.ENTER_FRAME, enterFrameHandler);
private function enterFrameHandler(event:Event):void
    if(playing && !dragging){
        slideBarContainer.slider.x = + slideBarContainer.slider.width/2 + ((soundChannel.position / sound.length) * ( - slideBarContainer.slider.width));
        leftPaneContainer.loaderText.text = "Playing " + Math.round(soundChannel.position * 100 / sound.length) + "%";

Create the Play/Stop sound functions:

[as]private function playSound(position:Number)
    soundChannel =;
    playing = true;
private function stopSound()
    playing = false;
That's it.
full code could be found attached.