Noob Help Progress Bar with N transitions

Hi. I’m using Haxe and OpenFL.

I’m new and I’m trying to code up a progress bar that moves through 4 states including 0%. But I’m not displaying the %, but instead a number in the middle of the bar.

The bar is just a rectangle and needs the left-to-right color fill-up to take up 0/3, 1/3, 2/3, or 3/3 based on some trigger. This is a component of something someone else is working on, so I just need the trigger-related stuff as more of a template or something easily tailored.

I was looking for source code to no avail. I don’t want to do anything outside of Haxe/OpenFL or that would majorly affect the performance. I am using Haxe Develop.

Can anyone post source code for this?

::EDIT::

What I need is:

  1. progress bar) not preloader
  2. How to Class this and instantiate (and display/run) in Main
  3. How to design the state transition (hardest for me)

Even just systematic guidance would help, I am running in circles here, Thanks!

Do you want a progress bar for loading the app itself, or do you want a bar that updates while the app is running?

In the first case, check out yupswing’s example.

In the second case, check once per frame for progress, and whenever it reaches one of those thresholds, redraw the bar.

I meant the second case. It’s going to be used within an app when someone is completing some tasks successfully. It shows their progress.

Are you saying I can generate one easily from within Haxe Develop from some tool in the GUI?

Here’s some code for a simple progress bar:

class ProgressBar extends Shape {
    private var barWidth:Float;
    private var barHeight:Float;
    
    /**
     * A value between 0 and 1. 0 represents 0% progress,
     * 1 represents 100%, 0.5 represents 50%, etc.
     * 
     * The word "set" indicates that this variable has a setter.
     * That means you can set progress = (whatever), and the
     * setter function will run. In this case, the setter function
     * redraws the progress bar to match the progress.
     */
    public var progress(default, set):Float;
    
    public function new(width:Float, height:Float) {
        barWIdth = width;
        barHeight = height;
        
        //Set the progress to 0 to draw an empty bar.
        progress = 0;
    }
    
    private function set_progress(value:Float):Float {
        //Store the value for later.
        progress = value;
        
        //If the progress bar was already drawn, clear it.
        graphics.clear();
        
        //Set the fill color.
        graphics.beginFill(0x0000FF);
        
        //How round should the round rectangle be? (Optional.)
        var roundness:Float = barHeight / 5;
        
        //How much space will the fill take up? (Horizontally, that is.
        //It always fills the full vertical space.)
        var fillWidth:Float = barWidth * progress;
        
        //Draw the fill based on the values above.
        graphics.drawRoundRect(0, 0, fillWidth, barHeight, roundness);
        
        //Stop filling the shapes we draw, because next up is the outline.
        graphics.endFill();
        
        //Set the outline color and thickness.
        graphics.lineStyle(4, 0x00FFFF);
        
        //Draw the outline.
        graphics.drawRoundRect(0, 0, barWidth, barHeight, roundness);
        
        //Haxe requires setter functions to have a return statement.
        return progress;
    }
}

The main thing to understand here is that the Graphics class lets you draw rectangles of any width you like. All you need is a way to turn values like 1/3 or 2/3 into a rectangle width, and Graphics will draw it for you.

With a class like this, you can do the following:

class Main extends Sprite {
    private var progressBar:ProgressBar;
    
    public function new() {
        progressBar = new ProgressBar();
        progressBar.x = 200;
        progressBar.y = 100;
        addChild(progressBar);
        
        updateProgress(200, 500);
    }
    
    public function later():Void {
        progressBar.progress = 1 / 3;
    }
    
    public function evenLater():Void {
        progressBar.progress = 2 / 3;
    }
    
    public function laterStill():Void {
        progressBar.progress = 1;
    }
    
    //Alternately...
    public function updateProgress(bytesLoaded:Int, bytesTotal:Int):Void {
        progressBar.progress = bytesLoaded / bytesTotal;
    }
}
1 Like

Thanks a lot!

I will try this and edit this message later with feedback.

Could you please show me an example with this along with the Main.hx that’s executing it? I am having even very basic types of trouble, such as setting up the Main properly and calling stuff.

I don’t yet have a proper grasp of Java-like setups and syntax, and the two Main functions thing confuses me. I would really like to try out the code you gave me so I can customize it, and learn from it by analyzing it.

Thank you! (as soon as possible would be really great, though I already appreciate your answer.)

When using OpenFL, setting up your main class is very easy. You don’t need two main functions; in fact, you don’t even need one. All you need is the new() function.

I’ve updated my code above to include the class definition.

Thanks!

I changed a few things to get rid of some errors but it’s basically the same. I am still getting this error:

src/Main.hx:13: characters 12-40 : Invalid package : should be src

This is the line 13:

12 - class Main extends Sprite {
13 - private var progressBar:ProgressBar;

Is it is a problem of libraries?

::EDIT::

I have of course begin my files with package; or package src; depending on the file and included these libraries (not enough?):

import openfl.display.Sprite;
import openfl.Lib;
import openfl.display.Shape;

What does your project.xml file look like? In particular, is there a <source /> tag?

1 Like

Dealt with that yeah, but now it’s telling me updateProgress is not defined.

(in Main) - unknown identifier: updateProgress

::EDIT::

Almost there! But I don’t know how I should define updateProgress correctly, assuming it’s what needs to be done. I’ll keep trying but code would be awesome.

Thanks for all your help so far.

updateProgress() was one of the sample functions in my example. You can copy it from there, or you can replace that line with “progressBar.progress = 200 / 500.” (Or use whatever other numbers you like.)

1 Like

Thanks

How can I get this to properly show up on the screen? It works now but I basically just get black screen, sometimes a flash of a small qhite bar in the lower left, then black screen only.

Well, I got some kind of a bar to appear once I moved the super() to another place. Now I just need to change the look of everything, make it so transitions are visible (they either aren’t happening or are instant), and add an interaction that causes them.