Skip to main content
D
davids52636861
Known Participant
March 9, 2017
Answered

HTML5 changing a object's color with buttons

  • March 9, 2017
  • 3 replies
  • 3198 views

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.

This topic has been closed for replies.
Correct answer Nick Gioia

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

3 replies

D
davids52636861Author
Known Participant
March 10, 2017

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.

C
ClayUUID
Legend
March 9, 2017

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.

D
davids52636861Author
Known Participant
March 9, 2017

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);

}

C
ClayUUID
Legend
March 9, 2017

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();

    }

}

N
Community Expert
Nick GioiaCommunity ExpertCorrect answer
Community Expert
March 9, 2017

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

D
davids52636861Author
Known Participant
March 9, 2017

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices