Actionscript ProgressBar DIY in Starling Framework

The Starling Framework doesn't come with the built-in Progress Bar, but the Feathers framework does.

However, i find that it isn't that hard to create a progress bar ourselves, and to be used with the Starling Framework.

Here, what we need to do is to create a ProgressBar class:

    public class ProgressBar extends Sprite
    {
        private const BAR_WIDTH:int = 100;
        private const BAR_HEIGHT:int = 30;
        public var qdMax:Quad; // a static bar
        public var qdMove:Quad; // a moving bar
       
        public function ProgressBar()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }
       
        private function onAddedToStage():void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
           
            qdMax = new Quad(BAR_WIDTH,BAR_HEIGHT,0xf0f0f0);
            qdMove = new Quad(1, BAR_HEIGHT, 0x990000);
            addChild(qdMax);
            addChild(qdMove);
        }
       
        public function updateBarMove(_ratio:Number):void
        {
            qdMove.width = (_ratio)*qdMax.width; //adjust the width
        }
    }

Here, we have a very simple class. The main thing to note here is that, there is a function updateBarMove which takes the parameter of a 'ratio', ranging from 0 to 1, and is to be called from time to time to update the visual bar status. Any example of using this? Here it is:

How to show the progress bar while playing the audio files in Starling Framework (AS3)?

Yup, with the class defined above, we can easily display the progress of the audio files when it is played or paused. Here's the original source as your reference. Now with the onEnterFrame function, it can be performed with ease.

So, assume that you have a button switching from "play" to "pause" and vice versa. When it is "played", we dispatch the Enter Frame Event, as shown below:

      public var pBar:ProgressBar;
    public var sound:Sound;
    public var sc:SoundChannel = new SoundChannel();
    public var musicLength:int;
       private function onEnterFrame(e:EnterFrameEvent):void
    {
       var ratio:Number = sc.position/musicLength;
           
       if(ratio >= 1) //when the audio playing finishes
       {
           sc.stop();
           sc = sound.play(0);
           sc.stop();
           this.removeEventListeners(Event.ENTER_FRAME); //stop updating
       }
           
       pBar.updateBarMove(sc.position/musicLength); //passing a ratio
   }

Here you go, the progress bar is created!