How do I change the fill and stroke separately in a vector graphic using actionscript in flex in flash builder

Question

If I have a rectangle which has a fill of blue and stroke of orange how can I change the stroke to black and the fill to red using actioncript.

When I use the following code it changes the entire rectangle to 0x008000 (green). Either the fill is covering the stroke or it is changing both the fill and stroke to 0x008000 (green).

var myColor:ColorTransform = myRectangle.transform.colorTransform;

                    savedColor = myRectangle.transform.colorTransform;

                    myColor.color = 0x008000;

                    myRectangle.setColorTransform(myColor);

I notice when I convert back to the saved color it brings back the original fill and stroke colors as I want.

            myRectangle.setColorTransform(savedColor);

I just can not change the rectangle to a different color for fill and for stroke when changing for the first time without being saved.

What I want to be able to do is set the fill and stroke to different colors and also control whether or not the fill will cover the stroke.

Please see below a simple flex program one can use to tweak and give an answer back if you can figure it out:

Thanks in advance Lawrence

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="0" minHeight="0" usePreloader="true">
 <fx:Script>
        <![CDATA[
              public var savedColor:ColorTransform;
              protected function button1_clickHandler(event:MouseEvent):void
              {
                   var myColor:ColorTransform = GEN1.transform.colorTransform;
                    savedColor = GEN1.transform.colorTransform;
                    myColor.color = 0x008000;
                    GEN1.setColorTransform(myColor);
                    b1.visible = false;
                    b2.visible = true;
              }
              protected function button2_clickHandler(event:MouseEvent):void
              {
                    GEN1.setColorTransform(savedColor);
                    b2.visible = false;
                    b1.visible = true;
              }
        ]]>
  </fx:Script>

  <fx:Declarations>
  </fx:Declarations>
  <s:Group>
        <s:layout>
              <s:VerticalLayout paddingTop="10"/>
        </s:layout >
        <s:Group>
              <s:layout>
                    <s:HorizontalLayout/>
              </s:layout> 
              <s:Button id="b1" click="button1_clickHandler(event)"  label="Generator 1 ON"/>
              <s:Button id="b2" visible="false" click="button2_clickHandler(event)"  label="Generator 1 OFF"/>
        </s:Group>              
        <s:Group  >
              <s:Graphic version="2.0"  xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"  viewHeight= "645" viewWidth= "1043">
                    <s:Path winding="evenOdd" data="M 341 30 C 341 19 350 10 361 10 C 372 10 381 19 381 30 C 381 41 372 50 361 50 C 350 50 341 41 341 30 Z " blendMode="normal" alpha="1" id="GEN1">
                          <s:fill>
                                <s:SolidColor color="#b6b6b6"/>
                          </s:fill>
                          <s:stroke>
                                <s:SolidColorStroke color="#333333" weight="4" caps="none"/>
                          </s:stroke>
                    </s:Path>
              </s:Graphic>                                    
        </s:Group>
  </s:Group>
</s:Application>

score 0 · Answer 1 · answered Oct 13 '11 at 22:00

Give them IDs:

          <s:Graphic version="2.0"  xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"  viewHeight= "645" viewWidth= "1043">
                <s:Path winding="evenOdd" data="M 341 30 C 341 19 350 10 361 10 C 372 10 381 19 381 30 C 381 41 372 50 361 50 C 350 50 341 41 341 30 Z " blendMode="normal" alpha="1" id="GEN1">
                      <s:fill>
                            <s:SolidColor color="#b6b6b6" id="fill"/>
                      </s:fill>
                      <s:stroke>
                            <s:SolidColorStroke color="#333333" weight="4" caps="none" id="stroke"/>
                      </s:stroke>
                </s:Path>
          </s:Graphic>

Then in ActionScript just change the properties on the class:

fill.color = 0x000000;
stroke.color = 0xffffff;

Thank You very much for this answer. Can I not access this from the GEN1 object's id? The reason I ask is that I have hundreds of vector object in my application and this would dramatically increase the number of ID that I have to keep track of. Thanks in advance for your help. — Lawrence Hutson, Oct 17 '11 at 15:19
The fill and stroke are properties on the gen1 object. So you could do something like this: gen1.fill.color = = 0x000000; or gen1.stroke.color = 0xffffff; — JeffryHouser, Oct 17 '11 at 16:05

How do I change the fill and stroke separately in a vector graphic using actionscript in flex in flash builder

1 Answers1