Databases
StackOverflow2013
Postsdbo
POHow can I dynamically change the color of an XML button using AS3?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I dynamically change the color of an XML button using AS3?
    primarykey
    data
    text
    <p>I've been struggling with this for a couple of days now, and it feels ridiculous. This isn't something new and I can't seem to find the answer anywhere. I've got three files, so here are some example snippets of how they're set up.</p> <p>Viewer.mxml</p> <pre><code>&lt;fx:Script&gt; &lt;![CDATA[ function changeColorState() { if(some condition is true) { myButton.colorState = TessaButton.PINK_COLORSTATE; } else { myButton.colorState = TessaButton.GRAY_COLORSTATE; } myButton.skin.setCurrentState('up'); } ]]&gt; &lt;/fx:Script&gt; &lt;s:VGroup&gt; &lt;TessaButton id="myButton" labelText="Example Button" click="doSomething(event)" skinClass="ButtonSkin" /&gt; &lt;/s:VGroup&gt; </code></pre> <p>TessaButton.mxml</p> <pre><code>&lt;fx:Script&gt; &lt;![CDATA[ public static const PINK_COLORSTATE:String = 'Pink'; public static const GRAY_COLORSTATE:String = 'Gray'; public var colorState:String = PINK_COLORSTATE;//Default setting ]]&gt; &lt;/fx:Script&gt; </code></pre> <p>ButtonSkin.mxml</p> <pre><code>&lt;s:states&gt; &lt;s:State name="up" enterState="enterStateHandler(event)"/&gt; &lt;s:State name="down" /&gt; &lt;s:State name="over" /&gt; &lt;s:State name="disabled /&gt; &lt;/s:states&gt; &lt;fx:Script&gt; &lt;![CDATA[ //Pretend that these are all shades and tints of pink or gray, too lazy to make up examples public static const GE1_PINK_UP:uint = 0xffa2f7; public static const GE1_PINK_OVER:uint = 0xffa2f7; public static const GE1_PINK_DOWN:uint = 0xffa2f7; public static const GE2_PINK_UP:uint = 0xffa2f7; public static const GE2_PINK_OVER:uint = 0xffa2f7; public static const GE2_PINK_DOWN:uint = 0xffa2f7; public static const GE1_GRAY_UP:uint = 0xffa2f7; public static const GE1_GRAY_OVER:uint = 0xffa2f7; public static const GE1_GRAY_DOWN:uint = 0xffa2f7; public static const GE2_GRAY_UP:uint = 0xffa2f7; public static const GE2_GRAY_OVER:uint = 0xffa2f7; public static const GE2_GRAY_DOWN:uint = 0xffa2f7; private var fillColor1_up:uint = GE1_PINK_UP;//Default setting is pink private var fillColor1_over:uint = GE1_PINK_OVER; private var fillColor1_down:uint = GE1_PINK_DOWN; private var fillColor2_up:uint = GE2_PINK_UP; private var fillColor2_over:uint = GE2_PINK_OVER; private var fillColor2_down:uint = GE2_PINK_DOWN; private function enterStateHandler(e:FlexEvent):void { switch((hostComponent as ButtonProperties).colorState) { case 'Pink': fillColor1_up = GE1_PINK_UP; //And the rest set to the pink colors break; case 'Gray': fillColor1_up = GE1_GRAY_UP; //And the rest set to the gray colors break; } ]]&gt; &lt;/fx:Script&gt; &lt;s:Rect id="fill"&gt; &lt;s:fill&gt; &lt;s:LinearGradient rotation="90"&gt; &lt;s:GradientEntry color.up="{fillColor1_up}" color.over="{fillColor1_over}" color.down="{fillColor1_down}" /&gt; &lt;s:GradientEntry color.up="{fillColor2_up}" color.over="{fillColor2_over}" color.down="{fillColor2_down}" /&gt; &lt;/s:LinearGradient&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; </code></pre> <p>I am under the impression that these colors in the gradient entries will dynamically change when the values of the fillColor variables are changed. In this case, those values get changed when there is a state change on the button to 'up'. By default, these buttons will appear pink. If whatever conditional I have is true, the colorState variable is gray and therefore the buttons should be gray. However, while running this, the trace statements I see in the enterStateHandler, I see that they are properly changing between gray and pink as I need, but they are still visually pink. I don't understand why. If anyone can point me in the correct direction on going about this or if someone can shed light on why this isn't working, please let me know. Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTessa
    1. USTessa
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COAlso, I'd rather not use states to declare button colors as suggested as Option A by nvhdab to this similar question: http://stackoverflow.com/questions/5792051/conditional-color-change-ssolidcolor I'd like to try this person's Option B, but I don't know how to alter the gradient entries. What would the syntax look like?
      singulars
      1. POHow can I dynamically change the color of an XML button using AS3?
      1. USTessa
    2. COAdd [Bindable] before each fillColor... definition. eg: [Bindable] private var fillColor1_over:uint = GE1_PINK_OVER;
      singulars
      1. POHow can I dynamically change the color of an XML button using AS3?
      1. This table or related slice is empty.
    3. COAnd here's info on setting gradients: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/graphics/LinearGradient.html
      singulars
      1. POHow can I dynamically change the color of an XML button using AS3?
      1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload