Skip navigation
Currently Being Moderated

AS3 bargraph tutorial without XML

Sep 18, 2012 2:45 PM

Hi,

 

Finishing up a project and need to add a basic vertical bargraph to visually display 2 score results. Have extensively searched online and have only found AS3 combined with XML, which for me with limited scripting skill is difficult to separate out in order to just have AS3.

 

The bargraph would have only 2 vertical columns that can rise up proportionate to the positive score (s) and 2 vertical column (mirror image of the up columns) that would become visible only if there is a negative score (s), and starting at mid-screen, go down proportionate to the negative score (s).

 

Scores are available in the project as 2 variables.

 

Has anyone seen a bargraph tutorial like this in AS3? (Need to create a basic building block to get started, then can adapt, add to from there.)

 

Any help appreciated.

 
Replies
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 18, 2012 3:03 PM   in reply to saratogacoach

    there's not enough substance to merit a tutorial.  you would simply y-scale two movieclips (with top reg point) based on those two scores.

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 18, 2012 4:47 PM   in reply to saratogacoach

    my bad.  the reg point should be at the bottom.  if a scaleY of 1 corresponds to a score of 100, you can then use:

     

    import fl.transitions.Tween;

    import fl.transitions.easing.Strong;

     

    var m:Number;

    var b:Number;

    var score:int = 50;

    paramF(0,0,100,1);

    var t:Tween = new Tween(mc, "scaleY", Strong.easeOut, 0, m*score+b, 2, true);

     

    function paramF(x1:Number,y1:Number,x2:Number,y2:Number){

        m = (y1-y2)/(x1-x2);

        b = y1-m*x1;

    }

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 18, 2012 10:55 PM   in reply to saratogacoach

    you're welcome.

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 20, 2012 2:34 PM   in reply to saratogacoach

    what's Dprime?

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 20, 2012 9:17 PM   in reply to saratogacoach

    so Dprime1 and Dprime2 are variables with values between -1 and 1, correct?

     

    if yes, use:

     

    var m:Number;

    var b:Number;

     

    paramF(-1,-1,1,1);

    var t1:Tween = new Tween(bar1_mc, "scaleY", Strong.easeOut, 0, m*DPrime1+b, 2, true);  // where bar1_mc is your bar display for DPrime1

    var t2:Tween = new Tween(bar2_mc, "scaleY", Strong.easeOut, 0, m*DPrime2+b, 2, true);  // where bar2_mc is your bar display for DPrime2

     

    function paramF(x1:Number,y1:Number,x2:Number,y2:Number){

        m = (y1-y2)/(x1-x2);

        b = y1-m*x1;

    }

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 6:50 AM   in reply to saratogacoach

    yes.  you just need to determine what is the minimum value (that will be displayed as a bar with scaleY=-1) and the maximum value (that will be displayed as a bar with scaleY=1.  then use those numbers in paramF:

     

    paramF(minimum,-1,maximum,1);

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 8:19 AM   in reply to saratogacoach

    nothing needs to be re-written.  just use paramF() twice if you want to apply different scaling to the two bars:

     

    var m:Number;

    var b:Number;

     

    paramF(dprime1_min,-1,dprime1_max,1);

    var t1:Tween = new Tween(bar1_mc, "scaleY", Strong.easeOut, 0, m*DPrime1+b, 2, true);  // where bar1_mc is your bar display for DPrime1

     

    paramF(dprime2_min,-1,dprime2_max,1);

    var t2:Tween = new Tween(bar2_mc, "scaleY", Strong.easeOut, 0, m*DPrime2+b, 2, true);  // where bar2_mc is your bar display for DPrime2

     

    function paramF(x1:Number,y1:Number,x2:Number,y2:Number){

        m = (y1-y2)/(x1-x2);

        b = y1-m*x1;

    }

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 9:07 AM   in reply to saratogacoach

    so, if dprime1 is equal to the mean you want the scale to be zero?  ie, no bar seen??

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 10:59 AM   in reply to saratogacoach

    then the code i suggested should work.  you're normaling your variable so the min=-max and therefore if your variable is equal to the mean, scale will be zero.

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 12:29 PM   in reply to saratogacoach

    use:

     

    paramF(mean-3*sd,-1,mean+3*sd,1);

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 2:21 PM   in reply to saratogacoach

    no problem (and, you're welcome).

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 2:28 PM   in reply to saratogacoach

    yes, use:

     

    paramF(mean-3*sd,1,mean+3*sd,-1);

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 21, 2012 2:57 PM   in reply to saratogacoach

    you're welcome.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points