AS3 bargraph tutorial without XML

[saratogacoach]

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.

[kglad]

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.

[saratogacoach]

Hi,

Thanks kglad for your reply and suggestion. I started there today, drawing a vertical movieclip vector 60 X 300, placing the top at stage center (will now adjust the reg point to top). Would probably create a cover for each half of the stage, background color the same as the stage, toggle visibility, to hide the column until it rises. But, I need to move it -Y, maybe 1-3 pixels/second to create the illusion of the column growing upward to a height governed by the score it represents.

Same for a mirror image bottom column that would go downward by Y, maybe 1-3 pixels/second until it represented a negative score.

2 scores, positive or negative, so 4 columns.

But how to script in AS3 smoothly moving up or down Y at a specific time-related speed, proportionate to the score value? That's where I'm stuck.

I've tried script like:

stop();
var score1val:Number = 25; 
var colT1:Timer = new Timer(1000, score1val);
colT1.addEventListener(TimerEvent.TIMER, timerListener10);
function timerListener10 (e:TimerEvent):void{
v1.scaleY +=.02
}
colT1.start();

But this has an un-smooth movement, is not the right effect.

Maybe motion Tween? (Not sure how this works.)

[kglad]

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;

}

[saratogacoach]

Thanks kglad,

Very helpful. Looks like the optimal way to go.

I'll play with it, see if I can build on it.

Probably will have more questions.

[kglad]

you're welcome.

[saratogacoach]

Hi kglad,

I've been trying to use the Tween bar graph column for a couple of days, but unsuccessfully. Not an issue of the AS3: it works fine. More a problem with my design: I'm not able to get my brain around how best to display results (2 separate Dprime values) so that the user can see  how they scored in relation to normal distribution larger sample results (for which I have the mean Dprimes and standard deviations (SD's). Larger sample Dprime means and SD's are also categorized by gender of exercise taker, but that, for now, is not part of my challenge.

Since it's a normal distribution ("bell curve"), I am having difficulty figuring out a way to display visually these user results. Would be nice if, based on Dprime (and gender), when the user gets to the score page, a column rises or go down (Dprime results range from small minus numbers with decimal places to small positive numbers with decimal places (for example, 1.90) from screen center for  Dprime1 and similarly another colu7mn rises/goes down for Dprime2. But the math formula to "translate" Dprime falling within 1, 2, maybe 3 SD's is beyond my math ability so far, and then it would need to be scripted in AS3.

Have you seen any examples that display results that are in a normal distribution?

Maybe there is a totally different way to design a display other than a bar graph?

Any suggestions welcome.

[kglad]

what's Dprime?

[saratogacoach]

I'll try:

For purposes of the exercise, it represents a calculation of target hits minus false hits (target word chosen-distractor word chosen),  divided by each's total n to create a rates, corrected for "empty cells,", then standardized using a probit function. The Dprimes for 2 exercises can then be compared with the mean Dprimes and SD's for larger samples. The study/article on which this is based concluded that there were statistically relevant inferences that could be drawn from scores within specific SD ranges (primarily 1 SD up or below).

While results would be validated by other exercises, assessment, and informing of results would be properly done, floowed up, etc., part of this process could be a basic visual display of where a set of results fits in to the larger result sample. (I had envisioned one column of a bar graph representing Dprime1, going/Tweening up for an above mean Dprime value, or down for a below mean Dprime value, and proportionate Y/-Y to how many SD's above, and a second column of the bar graph representing Dprime2 and moving/Tweening similarly.

Sorry to be "long-winded," but hopefully this sheds some light on Dprime, etc. Unfortunately, my conceptualization has gotten  ahead of my skills to achieve this.

[kglad]

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;

}

[saratogacoach]

Hi kglad,

Thank you for this.

While the hit rate for correct hits and the hit rate for incorrect/detractor hits, once corrected for empty cells,  is a number between - .999 and + .999 (not quite -1 and +1), once the probit function is applied to get the Dprime for each (Dprime1 and Dprime2), the Dprimes (in this exercise and in the published study) are small positive or negative numbers (with several decimal points).

For example:

1.187936394038008

-2.8015852188468133

While mean and SD ranges are different in a large sample for males and females, an example is mean = 1.80 and SD = .90.

So in that example, a Dprime1 of 1.187936394038008 would be below the 1.80 mean and the bar column should go down proportionate to the amount below the mean Dprime.

The Dprime2 scores measure incorrect responses (detractors), so high (above the mean) Dprime2's should probably produce a reverse column movement: having high negatives probably should be displayed by the Dprime2 column going down, not up. Maybe a way to add a script item, for Dprime2, that would reverse the Y? Above mean Dprime1's should move the Dprime1 column up, below mean Dprime2's should move the Dprime1 column down, while above mean Dprime2's should move the Dprime2 column down, and below mean Dprime2's should move the Drpime2 column up. Whew! (But the optimal result in this exercise is high Dprime1's and low Dprime2's. The example Dprime2 above, -2.8015852188468133, would actually be considerably below the mean and therefore "good.")

Returning to the original issue, so while corrected score rates are between -.999 and +.999 (cannot be -1, 0 or 1, and are changed to -.999 to +.999), Dprimes are small negative or positve numbers (to several decimal points) as illustrated above.

Can the script be changed to reflect this?

[kglad]

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);

[saratogacoach]

Thank you. The bars work, with the numbers given as examples above. Plus setting the min and max as follows: since almost all cases fall within 3 SD's (>99%), I can probably use minimum calculated as - (mean + 3*SD). Same for maximum except + (mean + 3*SD).

But, then a problem:

The minimum value and maximum value for Dprime1 is different than the minimum and maximum value for Dprime2. They each have different mean and SD (and these are different for male and female large sample results). So, the way ParamF is currently written would need to be changed. The same paramF cannot govern both t1 and t2. Needs to be separated. But how to script this?

Then, without duplicating names and throwing errors, I could "duplicate" t1 and t2 functions/tween (so t1 and t2 for males, t3 and t4 for females).

Once that is done, then some way to alter the script so Y for Dprime2 (bar2_mc) is reversed. Currently, -2.8015852188468133 moves the bar2_mc down. May want to display this as moving up (since for Dprime2, a strong negative number is actually "positive"). Is there a way to change that part of the script to do this?

[kglad]

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;

}

[saratogacoach]

Still needs some tweaking.

If the Dprime1 is below the mean, the column should go down. So, a result like 1.187936394038008 with a mean of 1.80 should not produce an upward movement (SD .70 X 3 + 1.80, therefore a range of min: -3.90 and max: +3.90).

But column goes up. Should go down.

Not sure how to create a compensating formula to account for the mean in addition to the min/max range. Above mean, column goes up, below the mean, column goes down.

[kglad]

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

[saratogacoach]

Yes.

The 0 point would be the mean for Dprime1 or the mean for Dprime2.

Above the Dprime1mean, Dprime1 column up, below the mean, Dprime1 column down.

For Dprime2: above the Dprime2 mean, Dprime2 column down, below the Dprime2 mean, Dprime2 column up. (Reversed from Dprime1)

If Dprime1 or Dprime2 = 0, it does appear that the bar would not move (no visible bar). In that case I could probably show a text explanation that the score is average (neither above or below average). More likely situation, Dprime1 or Dprime2 will be a small positive or negative number, so the bar may move but be impreceptible. Again, a text box showing above or below average would be used to indicate that the score is above or below average.

I think this would work OK. (Can't think of any other way to display normal ditribution results.)

[kglad]

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.

[saratogacoach]

(1) I'm afraid I've gotten "lost." I'm not sure what to use as Dprime1 minimum, Dprime2 minimum?

If I use mean + 3* SD, then it doesn't seem to work. This would create a top for the range that includes >99% of all values, using 3.90 (mean + 3*SD). A -3.90, which is created by  - (mean + 3*SD,) would provide a bottom of the range to include >99% of values. 99% of all values in a normal distribution are within + or - 3*SD of the mean. (

But when I test this, using for example a 1.187936394038008 Dprime1, a range of (min) -3.90, (max) 3.90 (mean 1.80 and SD .70), it doesn't work.

This is below the mean of 1.80. So, should go down, but instead goes up.

(2)

Is there a way to reverse the movement for Dprime2's bar(bar2_mc)?

It should go up for below the mean Dprime2's and down for positive Dprime2's, unlike Dprime1.

[kglad]

use:

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

[saratogacoach]

Hi kglad,

Thank you very much for this strong help. While I can get the script working and the bars moving, so far my design seems faulty. It may simply be better to say, using text, that a specific result is withing average range (-1 SD and +1 SD) or above average (+1 SD) or below average (-1 SD) of the mean.

While the bar/column concept may be visually interesting, so far I haven't been able, even with your heroic help, to create a viable display that is clear and accurate.

Again, this is my design's fault, not your brilliant scripting and math formulations.

[kglad]

no problem (and, you're welcome).

[saratogacoach]

Actually, after some more testing of the original design, I think I can use this.

I would need to change the Dprime2 bar's ((bar2_mc) script so that it goes down for positive Dprime2 values and goes up for negative Dprime2 values.

Is there a way to do this in the script? I tried non-dynamically rotating the bar on the stage, but this didn't work as needed.

[kglad · Accepted solution]

yes, use:

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

[saratogacoach]

Thank you!