HTML5 changing a object's color with buttons

[davids52636861]

Here's the deal. I'm converting to html5 and trying to learn it. In fact, the only script I needed to learn was go to and stop. I build an animation where people can go select a sound system pad and customize it's color. Before, in AS3, I had a movieclip with multiple frames. Each color was on one frame. So when you clicked on the red button, go to and stop frame 4 and the red pad was on that frame. Just as simple as that.

Then, I found that option in HTML5, that's no big deal. BUT!!!! there's a but for sure, HTML5 doesn't seems to understand symbols. The sound pad was 1 symbol and it was repeating on each frame. Then, with tint, I was changing the pad's color on each frame to match the customer's selection. Hope it's clear.

Well, in HTML5, it doesn't get the color applied to the symbol. So if I set the yellow frame first, well if I click on yellow, it's yellow. Perfect. But then, if I click on red, it goes to the red frame but it stays yellow. Like if HMTL5 doesn't understands that the same symbol can have a different color inside the movieclip.

So what are my options? I know I can break apart the symbol, it works when I do that. But you see, there's other parts to this and usually I just rename a symbol, open it and replace the elements inside and then, the correction is made on all the elements in that 2nd movie clip. Now, it means that I would have to replace that element in each frame one by one.

Is there a script that can change a symbol's color? Or is there a way so HTML5 allows symbols to work just like in AS3?

Thank you.

[Nick Gioia · Accepted solution]

If you want it to work in HTML5, you have to use javascript, not AS3.

Here is something similar that I built that you might be looking for.

I am no expert at coding, but I built something really quick that could help you.

You will need to create symbols tshirt symbol and different color symbols on the stage for this.

You will need a tshirt symbol with the instance name "tshirt" and inside that symbol you will create the amount of different colors you on the timeline inside the shirt symbol. For example I did 8. Also you will need to add a layer and add the code stop(); inside the tshirt symbol on the actionscript panel.

Then create different color symbols matching the colors of the different color shirts you made inside the symbol tshirt on the timeline.

Note: these symbol should be made on the stage and not inside the tshirt symbol.

Give each color an instance name: black_btn, gray_btn, red_btn, blue_btn, green_btn, yellow_btn, cyan_btn and magenta_btn.

Than on the main timeline on a new layer add the code you see below:

stop();

/* Click to Go to Frame and Stop

Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.

Can be used on the main timeline or on movie clip timelines.

Instructions:

1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.

*/

black_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame1);

function fl_ClickToGoToAndStopAtFrame1(event:MouseEvent):void

{

  tshirt.gotoAndStop(8);

}

gray_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame2);

function fl_ClickToGoToAndStopAtFrame2(event:MouseEvent):void

{

  tshirt.gotoAndStop(1);

}

red_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame3);

function fl_ClickToGoToAndStopAtFrame3(event:MouseEvent):void

{

  tshirt.gotoAndStop(2);

}

green_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame4);

function fl_ClickToGoToAndStopAtFrame4(event:MouseEvent):void

{

  tshirt.gotoAndStop(3);

}

blue_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame5);

function fl_ClickToGoToAndStopAtFrame5(event:MouseEvent):void

{

  tshirt.gotoAndStop(4);

}

yellow_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame6);

function fl_ClickToGoToAndStopAtFrame6(event:MouseEvent):void

{

  tshirt.gotoAndStop(5);

}

cyan_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame7);

function fl_ClickToGoToAndStopAtFrame7(event:MouseEvent):void

{

  tshirt.gotoAndStop(6);

}

Magenta_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame8);

function fl_ClickToGoToAndStopAtFrame8(event:MouseEvent):void

{

  tshirt.gotoAndStop(7);

}

Hopefully this screenshot helps too

[davids52636861]

I have a hard time to fully understand it. First, I can tell you taht I work in HTML5 canvas.

Do you have a video of that? Or maybe a file I can look at. I've learn AS2 and AS3 on my own years ago but I was able to find examples on the net. Now it's more complicated.

But what you're showing seems exactly what I need to do, I'm just not sure  how to do it.

Plus, when I select a symbol (graphic) it doesn't allow me to give it an instance name.

[davids52636861]

Look at what I used to do in AS2 (it's old)

http://www.chakalhockey.com/THS/THS-Bauer-nxgstr-pad.swf

When I was building it, Each part of the goalie pad is a movieclip. Inside each clip the part is a symbol spreaded on a frame for each color.

So, when I wanted to create the 2nd customizable zone. I took part 1, copied it, rename all the elements. Then, open the symbol 2 inside the movieclip2 and from illustrator, paste the new shape and hop! all colors were changed in one operation since they were all the same symbol only colored with the tint option.

I want to know if a such thing is possible in HTML5 or if I would have to recreate each zone every time like I had to do the first time?

[ClayUUID]

I'm guessing your problem is bitmap caching. The HTML5 canvas element doesn't natively support tinting operations, so when you tint a clip in a Canvas document, the filter is emulated in JavaScript. This is very slow, so any filtered clip is automatically cached to speed up subsequent rendering of the clip.

This leads directly into another behavior-- bitmap-cached clips do not automatically update when their content changes. They get "stuck" in their cached state.

So it's up to you to determine whether the performance impact of using tint filters is acceptable (the larger the image, the slower the operation, and vice versa). If so, using updateCache() on color changes will probably resolve your issue.

Alternatively, you could tint each clip by putting a transparent color overlay over it, or best of all, you could make each color variation directly drawn in that color.

[davids52636861]

ClayUUID, if I want to use the update cache, where do I have to put it exactly?

Right now, each button has this script with the assigned frame.

this.buttyellow.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()

{

    this.gotoAndStop(2);

}

[ClayUUID]

Logic would dictate you put the cache update command where the cache needs to be updated.

function fl_ClickToGoToAndStopAtFrame_2() {

    this.gotoAndStop(2);

    if (this.cacheID) {

        this.updateCache();

    }

}

[davids52636861]

Thanks for the help, but I just can't get it work. And now, when I publish, all the elements are gone and I just got a blank page showing up in my browser.

[ClayUUID]

That means you have a syntax error. Open the browser's error console and refresh to see what it is.

Also, maybe I shouldn't have assumed that "this" is what you're tinting. Exactly which object are you applying the tint to? Does it have a name? If it doesn't, it needs one.

[davids52636861]

The object is a symbol (graphic) and it doesn't allow me to give it an instance name. If I convert it to a movieclip, then I'm allowed to give it a name. Should I do that?

Converting to HTML5 is a nightmare so far. The frustrating part is that I only need one function "Go to and Stop" and to keep my symbols tint color on each frame.

[ClayUUID]

It sounds like maybe you should do that.

[davids52636861]

Still can't make it work. I guess I'll stick to the long version and have my frames colored one by one and drop the symbol thing. For now at least. Because the more I try, the less it works. Thanks for the help. If there's any other way, I'm all open to try them.

[davids52636861]

OK found a way to work it out with only a liitle step added to how I used to work in AS. I got my symbol of the shape I want to customize. It's called "part1". Then, I spread that shape to all the needed frames. Then, I make a symbol from the "part1" symbol so "part1" is inside another symbol. So I got symbol "yellow" containing "part1". Then symbol "red" containing also "part1" and same thing for all other colors.

I apply the "go to and stop" function to the buttons and it works.

Once it's done, to do my 2nd customizable zone, I copy the movieclip1 (containing "part1") and paste it in an other document (to keep the codes and everything since the buttons are all programmed) and I rename all the elements that will change. So movieclip1 becomes movieclip2, "part1" becomes "part2", yellow becomes yellow2 and same thing for all other colors.

I copie the new movieclip2 and paste it back to my working document. I open movieclip2, open yellow2, open par2 and paste from illustrator the new shape and delete the old one that was needed for part1. Then, all my colors in part2 are updated with only one action.

So I can do the same actions to do part3, part4, part 5, etc.

Having the symbol inside a 2nd symbol fixes the cache thing I guess. I'm pretty new to HTML5 but it works.

Hope I'm clear enough but bottom line, it now works.