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

click to reach 100% with a progress bar / html5 canvas

Community Beginner ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

Hi,

I would like to design something that you often see in games.

It is a matter of clicking a certain number of times on a button which is on the scene so that the bar reaches 100%.

 

By clicking the bar gradually fills up to 100%. If you stop clicking, the bar gradually empties.

Once reached 100%, we go to the next frame automatically :

click bar.jpgclick bar2.jpg

I've been thinking but can't see how to create something like this using html5 canvas?
Do you have any idea please?

 

Views

305

Translate

Translate

Report

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

correct answers 1 Correct answer

Community Expert , Sep 20, 2022 Sep 20, 2022

create a bar movieclip that contains a fill movieclip (with bottom or left scale point) and a button b:

 

var emptyRate = -.005;  // more neg, quicker it empties
var fillRate = .1;  // more pos, quicker it fills
this.bar.fill.scaleY = 0;
var tl = this;

this.b.addEventListener("click",clickF);
createjs.Ticker.addEventListener("tick", tickF);


function clickF(){
fillF(fillRate);
}
function tickF(){
fillF(emptyRate);
}

function fillF(amt){
tl.bar.fill.scaleY+= amt;
if(tl.bar.fill.scaleY<0){
tl.bar.fill.scaleY =

...

Votes

Translate

Translate
Community Expert ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

Hi.

 

Maybe this prototype is what you're looking for:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/meter_game

 

Please let us know if that's unnecessarily complex.

 

Regards,

JC

Votes

Translate

Translate

Report

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 Beginner ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

Thank you for the quick reply. It's really excellent but maybe a bit too complex.

 

I would just like the bar at the beginning to be empty and fill on clicking to get to 100%.
The user could not lose. If we reach 100% we go to the next image like your creation which is great.


And it shouldn't be too hard to fill the bar when the button is clicked. Because there it's quite hard it's very arcade.

Votes

Translate

Translate

Report

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 Beginner ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

I saw in your code that we could customize the force with
this.playerPower

Votes

Translate

Translate

Report

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 ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

create a bar movieclip that contains a fill movieclip (with bottom or left scale point) and a button b:

 

var emptyRate = -.005;  // more neg, quicker it empties
var fillRate = .1;  // more pos, quicker it fills
this.bar.fill.scaleY = 0;
var tl = this;

this.b.addEventListener("click",clickF);
createjs.Ticker.addEventListener("tick", tickF);


function clickF(){
fillF(fillRate);
}
function tickF(){
fillF(emptyRate);
}

function fillF(amt){
tl.bar.fill.scaleY+= amt;
if(tl.bar.fill.scaleY<0){
tl.bar.fill.scaleY = 0;
} else {
if(tl.bar.fill.scaleY>=1){
tl.bar.fill.scaleY = 1
tl.b.removeEventListener("click",clickF);
createjs.Ticker.removeEventListener("tick", tickF);
// do whatever. bar filled
}
}
}

Votes

Translate

Translate

Report

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 Beginner ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

Thanks it works great too.

Just one last thing.

How do I change my origin point in my bar so that it fills from the bottom and not from the middle?

Is there a transform origin function to add coordinates x=0% and y=50% ?

Votes

Translate

Translate

Report

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 ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

click the free transform tool and move the open circle on your fill movieclip to the bottom:

 

kglad_0-1663700083216.png

 

Votes

Translate

Translate

Report

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 Beginner ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

I had thought about it at the beginning but I thought that there was like in CSS a line of code to add to modify this point.

Thank you both very much for your replies. Everything is perfect. Thanks again. See you soon.

Votes

Translate

Translate

Report

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 ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

LATEST

you're welcome 

Votes

Translate

Translate

Report

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