Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Running number

New Here ,
Mar 06, 2023 Mar 06, 2023

How to create a running number from 0 to 75% in adobe animate cc

974
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 06, 2023 Mar 06, 2023

There are various ways to show a text display of progress, but a different approach would be to use a MovieClip that has 100 frames in it, and then you send that MovieClip to the frame that matches the current percentage.

The frames could simply have the numbers in them, but it could be a gauge filling in, or a much more complex animation of something being completed. That might be more entertaining that a textfield with a number in it.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 06, 2023 Mar 06, 2023

does that display indicate anything useful?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 06, 2023 Mar 06, 2023

You can just tween a value and display the numbers in a text field.
Open a new HTML5 project, create a dynamic text field, called myTextField and put this code on frame 1:

 

this.stop();

var _this = this;
var tweenableObject = { value:0 };

var tween = createjs.Tween.get( tweenableObject, {onChange:handleChange} )
.wait( 2000 )
.to( {value:75 }, 2000 );



function handleChange( event ) {
   _this.myTextField.text = Math.round( event.target.target.value ).toString();
}

 



- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 07, 2023 Mar 07, 2023

Thank you so much it works, one more small help, Iam trying to find pie chart with number running in adobe animate, but i couldnd find any. Sample below

infographic-element-in-after-eff.jpg

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 07, 2023 Mar 07, 2023

Unfortunately, there are no pre-built components suitable for data visualization in Animate.

In that case, it might be a good idea to follow @Colin Holgate's  suggestion. Prepare an animated movieclip whose timeline shows the change in numbers and animation in 100 frames, after which you can create and control its instances independently with Tween class. The only changes in the handler function should be:

 

function handleChange( event ) {
    var f = Math.round( event.target.target.value )-1;
    _this["myMovieClipInstancename"].gotoAndStop( f );
}

 

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 07, 2023 Mar 07, 2023
LATEST

Let me try, Thank you so much

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines