How can I make my HTML5 canvas job lighter?

[davids52636861]

Hi,

I'm making small interactive animations using HTML5 canvas. I use to do the same in AS2 but now I have to make the switch. Everything works, but it is really heavy. Each customizable zones are movieclips with buttons for each color. Each color is on a frame. 0 is white, 1 is selection, 2 is white, 3 is black, 4 re, etc.

Here's the script to the buttons :

this.buttblack.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()

{

    this.gotoAndStop(3);

}

Anyway, each part is a graphic containing a shape that I did in Illustrator, so it's vectorial. Then, each frame as a symbol, containing the symbol of the shape. All that because if I don't put the part's symbol into another symbol, the browser won't display the right color, it will always show the first color selected only. So, the way I did with a symbol into a symbol helps me to modify the shape when I need to. I only have to change one symbol to change a graphic part and not all the colors one by one.

Anyway, when I was doing flash files, it was around 1 mb. Now, it's close to 3 mb even more and the loading time when you open the html file into a browser is killing me. Any idea how I can make this lighter? Or make the file load faster?

It all works well, Ijust want to make it load faster and be lighter.

Also, a bonus question: When I use the input text box in Animate CC components for HTML5 canvas, is there a way I can limit the amount of characters the user can enter? Let's say if I want to limit the users to enter 15 characters inside the input text box?

[ClayUUID]

Do you have "Compact Shapes" set in the Advanced publish settings?

If the colored shapes don't animate, it might be worth the performance hit to use color filters instead of loading a differently colored version of every shape.

[davids52636861]

Is there a tutorial on how to use the color filters? I'm not a programmer at all, just a graphic designer doing simple stuff in flash/animate.

[ClayUUID]

  wrote

Is there a tutorial on how to use the color filters? I'm not a programmer at all, just a graphic designer doing simple stuff in flash/animate.

// add color filter to clip

function colorClip(clip, rMult, gMult, bMult, rAdd, gAdd, bAdd) {

    var nb = clip.nominalBounds;

    clip.filters = [ new createjs.ColorFilter(rMult, gMult, bMult, 1, rAdd, gAdd, bAdd, 0) ];

    clip.cache(nb.x, nb.y, nb.width, nb.height);

}

// remove all color filters from clip

function removeFilters(clip) {

    if (!!clip.filters) {

        clip.filters = [];

        clip.uncache();

    }

}

// example

colorClip(this.testClip, 0.5, 0.5, 0.5, 255, 0, 0);

EaselJS v0.8.2 API Documentation : ColorFilter

[davids52636861]

I really like how you're willing to help ClayUUID,

But I'm a total newbie to HTML5 (coming from AS2) and I'll save this code somewhere. But Where do I put this code and how can I put my buttons into relation with my object to change it's color?

Let's say I'm in my movieclip named "part1clip" and inside it I got a shape named padpart1. Then, let's say I have a button named buttonblack. How do I put buttonblack in relation with padpart1 so when you click on buttonblack, the shape paspart1 becomes black. Then, I will have to redo the same thing for buttonwhite, buttonred, buttonblue, etc.

For now, I got it to work using to go and stop and having each color on a separate frame.

I work in prepress so this is totally new to me.

[davids52636861]

Yes compact shape is selected.

[rezun8]

after you publish the file and get the folder structure look in the images folder, most of the images can be run thru tinypng to compress them and help reduce file size.

[Colin Holgate]

Another thing to check is whether the curves can be optimized. The ones from Illustrator may have a huge amount of detail that isn't needed. Select a shape and go to Modify/Shape/Optimize. Try different numbers, use the highest number that doesn't make the shape look noticeably different. That should reduce the size of the JS file.

[davids52636861]

Problem is that shapes need to be perfect and precise. I tried it and the result is not satisfying.

[just.emma]

In addition to the other suggestions... since it looks like you may be using quite a bit of text, if you use web fonts instead of static text, that will also cut down on the file size.

Using Google fonts in Animate CC

[ClayUUID]

More broadly, use literally anything instead of static text. Static text will eat you alive.