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.

View all articles by Bilal Abdelkader
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.

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
        _track.graphics.beginFill(0x959595, 0.4);
        _track.graphics.lineStyle(1, 0x666666);
        _track.graphics.drawRect(0, 0, 300, 34);
        _track.graphics.endFill();
        // Bar
        _bar.graphics.beginFill(0xCCCCCC);
        _bar.graphics.lineStyle(1,0x999999);
        _bar.graphics.drawRoundRect(0, 0, 280, 8, 5);
        _bar.graphics.endFill();
        _bar.x = (_track.width - _bar.width)/2;
        _bar.y = (_track.height - _bar.height)/2;
        // Slider
        _slider.graphics.beginFill(0x999999);
        _slider.graphics.lineStyle(1,0x959595);
        _slider.graphics.drawCircle(0, 0, 8);
        _slider.graphics.endFill();
        _slider.x = _bar.x + _slider.width/2;
        _slider.y = _track.height/2;
        _slider.buttonMode = true;
       
        addChild(_track);           
        addChild(_bar);
        addChild(_slider);
    }
}


- 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.

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
        _pane.graphics.beginFill(0x999999);
        _pane.graphics.lineStyle(1,0x959595);
        _pane.graphics.drawRoundRect(0, 0, 70, 34, 10);
        //_pane.graphics.drawRect(0, 0, 70, 34);
        _pane.graphics.endFill();
        // Stop Rectangle
        _rectangle.graphics.beginFill(0xFFFFFF);
        _rectangle.graphics.lineStyle(1,0x959595);
        _rectangle.graphics.drawRect(0, 0, 16, 16);
        _rectangle.graphics.endFill();
        _rectangle.x = (_pane.width - _rectangle.width)/2;
        _rectangle.y = (_pane.height - _rectangle.height)/2;
        // Play Triangle
        _triangle.graphics.beginFill(0xFFFFFF);
        _triangle.graphics.lineTo(0, 16);
        _triangle.graphics.lineTo(16,8);
        _triangle.graphics.lineTo(0, 0);
        _triangle.x = (_pane.width - _triangle.width)/2;
        _triangle.y = (_pane.height - _triangle.height)/2;
       
        addChild(_pane);
        addChild(_rectangle);
        addChild(_triangle);
    }
}