updating numerical dynamic text

[montana321]

Have a dynamic text field called:  rpmText.

Need to populate the field with a number that is controlled and constantly updated by the frames of a movie clip on stage.

For example, from frame 0-30 the field should read 0, but from frame 30-60, the numbers will rapidly count up to 1,000.

Could someone point me in the direction of tutorials/resources to pull this off?

[ClayUUID]

Just set the .text property of the textfield to whatever you want it to display.

[montana321]

I think the point is I have no idea how to do this...much less dynamically linking it to test field that continually updates on the fly.

[Colin Holgate · Accepted solution]

You would think that adding a number to the field each frame would do it, but humans would notice that, so having it increase by a random amount would be more interest. You also want it to stop at exactly 1000.

So, this script in frame 1 of the movieclip would repeatedly set the text in the field that is also on the stage next to the movieclip:

createjs.Ticker.addEventListener("tick", rpm.bind(this));

var rpmValue = 0;

function rpm() {

  var f = this.currentFrame;

  if (f >= 30) {

  rpmValue += Math.random() * 10;

  rpmValue += 30;

  }

  this.parent.rpmText.text = Math.min(1000, Math.round(rpmValue));

}

It will set the value to 0 until the movieclip reaches frame 30, then it will add at least 30, plus a random amount up to 10, to the field. You could increase either number to make it get there quicker.

[montana321]

Colin,

Thanks a lot for your help.  Worked perfectly.

Only issue was that in addition to a play button that triggers the movieclip, I have a slider bar that allows to slide back and forth through the movieclip's timeline.  So when I use the play button your solution works perfectly.

However when I move the slide back in the other direction (going backwards) the numbers don't reverse.

[montana321]

Colin,

If I had needed to dynamically change the value in a dynamic text box on the stage based off the .x position of an object on the stage, how would you do that?  For example when handle.x is less than 82 the rpmText.text value is 0, but as the handle.x position moves from 82 to 92 (to take an example), the rpm rapidly climbs to 150?

Was trying to rework the sample you had given me last week, but I'm floundering.  Would've thought that there'd be a tutorial on the web vaguely similar to what I was doing to get me started, but I'm not finding anything.  

[Colin Holgate]

To handle the going backwards case you could change the rules a bit. Instead of adding a random value you could set the value to something based on the current frame, plus some randomness to make it interesting. This should work for either direction:

createjs.Ticker.addEventListener("tick", rpm.bind(this));

var rpmValue = 0;

function rpm() {

  var f = this.currentFrame;

  if (f >= 30) {

  rpmValue = (f-30) * 33 + Math.random() * 10 + 1;

  }else{

  rpmValue=0;

  }

  this.parent.rpmText.text = Math.min(1000, Math.round(rpmValue));

}