change symbol background color by code

[charlesn79540358]

hello,

Is there a way to change symbol background color by code dynamically?

i have it working like this.

function changebackground(hotbutton){

switch (hotbutton){

case "  2":

exportRoot.hotbtn_3.shape_1.graphics.f("#00FFFF").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

exportRoot.hotbtn_2.shape_1.graphics.f("#FF9900").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

exportRoot.hotbtn_2a.shape_1.graphics.f("#FF9900").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

exportRoot.hotbtn_2b.shape_1.graphics.f("#FF9900").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

break;

case "  3":

exportRoot.hotbtn_2.shape_1.graphics.f("#00FFFF").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

exportRoot.hotbtn_2a.shape_1.graphics.f("#00FFFF").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

exportRoot.hotbtn_3.shape_1.graphics.f("#FF9900").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

break;

}

}

but I'm changing the back ground color by doing it hard coded. I don't want to do this for 10-15 symbols.

thanks

[kglad]

what's the logic used to determine which objects to color?

ie, case 2 colors, 3,2,2a and 2b.  case 3 color 2,2a and 3.  i don't see a logical pattern.

[charlesn79540358]

so when hotbutton = "   2"

I'm changing the symbol 3 background back to it's orginal color

exportRoot.hotbtn_3.shape_1.graphics.f("#00FFFF").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

then

I'm changing sumbol 2 background color to an orange color

exportRoot.hotbtn_2.shape_1.graphics.f("#FF9900").s().p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg");

This is the part i don't want to keep hard coding

exportRoot.buttonname.shape

is there a way we can use a varaible

[kglad]

i don't understand how your response answers my question, but yes, you can use a string in place of shape_1 etc:

exportRoot.buttonname['shape name']

[charlesn79540358]

can we do that with the button name?

so instead of hotbtn_2 can we replace that with a string or variable name?

I'm so sorry maybe I'm not asking the right question I know what I want to do but maybe I'm not asking right.

thank you

[kglad · Accepted solution]

yes, you can:

exportRoot['button string'][shape string']

[charlesn79540358]

Thank you so much!

I got that to work. Is there another way to change the fill color or background color of the symbol instead of having to cold that long string?

.p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg")

thanks again for your help

[kglad]

you're welcome.

to do what you want would require you to convert that background to an object (eg, movieclip), assign it an instance name and then you could use that name in your code.

[charlesn79540358]

So even though we have the button or symbol name hotbtn_2 we just can't talk to it with that?

We have to set up another  object?

Hopefully this makes sense.

Thank you,

[ClayUUID]

If there are only two colors, just make each button image a movieclip with two frames, one color in each frame. Then use gotoAndStop(0) or gotoAndStop(1) to set the color. Or have the two versions in the same frame on top of each other and set their .visible property to show the desired color.

[kglad]

you can use filters to change its color but that's not efficient and it's better to use the solution suggested by ClayUUID​ if you have a small number of different colors to choose from.

[charlesn79540358]

Is there a way we can pull that long string and put it into a variable?

.p("AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg")

something like this var longstring = exportRoot.hotbtn_2.p()

then longstring would equal this AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg

thank you

[kglad]

sure.

var s1 = "AhSBTQgjgiAAgxQAAgvAjgjQAigjAwABQAwgBAjAjQAjAjgBAvQABAxgjAiQgjAjgwAAQgwAAgigjg";

exportRoot['button string'][shape string'].graphics.f("#00FFFF").s().p(s1);

[charlesn79540358]

okay thank you.

But can you grab that long string from the properties of hotbtn_2.

hopefully this makes sense

thank you

[kglad]

i don't believe those strings are created until you publish your project so i don't believe you can retrieve those strings except by checking your published files.

the strings appear consistent with subsequent publishings unless you change a shape.  then it looks like the strings all change.

[charlesn79540358]

Okay thank you. Because my problem is if I have 150 diagrams with button symbols each diagram is going to have different publish strings for the buttons so i was thinking of a way to pull them in dynamically instead of hard coding that long string in every time. But the rule that we have created each diagram must have the same name on each button symbol.

[charlesn79540358]

Also can you retrieve them after the project has been created?

[kglad]

after you publish, you can retrieve the strings.

if you don't make any shape-changes to any of the shapes, i think the strings remain unchanged from one publish to another.

[charlesn79540358]

okay how do you retrieve them?

Thank you so much for your help.

[kglad]

by inspecting the js file in a text editor.

[charlesn79540358]

I know that but you can't retrieve them by javascript code?

[kglad]

well, after checking more carefully i think that can be done, though i've never done it before.

[charlesn79540358]

Okay I will keep trying to figure it out. So far I am almost done with what I want to accomplish.

Thank you so much again.

[kglad]

you're welcome.

[UDESCO]

Yes, you should be able to access the desired shape inside your symbol and change its fill style.

Here is a simple example.

Assuming you have a simple symbol with just a single shape with red color, named mySymbol:

     exportRoot.mySymbol.shape.graphics._fill.style = "#0000FF"; //changes its color to blue.