0 Replies Latest reply on Jul 15, 2009 7:45 PM by Mundek

    problem getting, then changing and setting, text color on a Text object

    Mundek

      Hello Everyone:

      I'm trying to get the letters in a word (each letter is an individual text object) to cycle through three different colors when clicked. Right now, all they do is change from their original color, blue, to black when clicked. No further "cycling" occurs.

      I'm appending the code. The part of interest is (probably?) in what is presently (and inaccurately) the "traceTextEvent()" function/method. It starts around line 90 of the code.

      BTW, I'm working on this in Flex Builder 3 on a Windows Vista machine.

      Any helpful comments or suggestions would be appreciated.

      Cheers,
      Ray M.

       

       

      CODE

      ===================================================================================

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
           <mx:Script>
                <![CDATA[
                     import mx.core.UIComponent;
                     import mx.controls.Text;
                     import mx.containers.Box;
                     import mx.containers.Canvas;
                     import mx.events.FlexEvent;

                     internal var theWord:String = new String();
                     internal var myCanvas:Canvas = new Canvas();
                     internal var textArray:Array = new Array();
                     internal var spriteArray:Array = new Array;

                     internal var stressRadius:int = new int();
                     internal var stressHitWidth:int = new int();
                     internal var stressHitHeight:int = new int();
                     internal var horizontalOffset:int = new int();
                     internal var verticalOffset:int = new int();

                     internal var textColor:Object = new Object();

                     private function init():void
                     {
                          theWord = "functional";
                          stressHitWidth = 16;
                          stressHitHeight = 10;
                          stressRadius = stressHitWidth/4;
                          horizontalOffset = 0;
                          verticalOffset = 20;
                          textColor.color1 = "000000";
                          textColor.color2 = "ff0000";
                          textColor.color3 = "0000ff";

                          var mxmlApp:Application = Application(Application.application);
                          mxmlApp.layout = "vertical";

                          for (var i:int=0; i<theWord.length; i++) {
                               trace("letter at i: " + theWord.charAt(i) + "; position: " + Math.pow(2, i));

                               myCanvas.width = 600;
                               myCanvas.height = 450;
                               myCanvas.setStyle("horizontalGap", 2);
                               myCanvas.addEventListener(FlexEvent.CREATION_COMPLETE, traceCanvasCreationEvent);

                               // create Sprite for indicating stress
                               var aSprite:Sprite = new Sprite();
                               aSprite.graphics.beginFill(0x000000, 0);
                               aSprite.graphics.drawRect(0,0,stressHitWidth,stressHitHeight);
                               aSprite.graphics.endFill();
                               aSprite.graphics.beginFill(0xFF00FF);
                               aSprite.graphics.drawCircle(stressHitWidth/2,stressHitHeight/2,stressRadius);
                              aSprite.graphics.endFill();
                              aSprite.addEventListener(MouseEvent.MOUSE_OVER, traceSpriteEvent);

                               // create a UIComponent for wrapping the stress Sprite
                               var aUIComponent:UIComponent = new UIComponent;
                               aUIComponent.addChild(aSprite);

                               // create Text component for displaying text
                               var aText:Text = new Text();
                               aText.setStyle("fontSize", 48);
                               aText.setStyle("color", "0x"+textColor.color3);
                               aText.htmlText = "<b>" + theWord.charAt(i) + "</b>";
                               aText.selectable = false;
      //                         aText.visible = false;
                               aText.setStyle("horizontalAlign", "center");
                               aText.name = Math.pow(2, i).toString();
      //                         aText.name = i.toString();
                               trace("aText.name: " + aText.name + "; width: " + aText.width);
                               aText.addEventListener(MouseEvent.MOUSE_OVER, traceTextEvent);
                               aText.addEventListener(FlexEvent.CREATION_COMPLETE, traceTextCreationEvent);

                               // add Text to Panel
                               myCanvas.addChild(aText);

                               // push references to components into their respective arrays
                               // for later access/control
                               textArray.push(aText);
                               spriteArray.push(aUIComponent);
                          }
                          mxmlApp.addChild(myCanvas);
                          // test access of components via Array
                          // textArray[2].htmlText = ".";
                          //for (var i:int=0; i<theWord.length; i++) {
                          //trace("i: " + i + "; width: " + textArray[i].width);
                          //}
                     }
                     private function traceTextEvent(e:Event):void
                     {
                          // NOTE: Must use e.target.parent + property because the MouseEvents trace here
                          // are from the UITextFields within the Text components, and we're interested in
                          // the name, coordinates, etc. of the Text component, _not_ of the UITextField
                          trace("textEvent> target: " + e.target + "; name: " + e.target.name);
                          trace(">>> target.parent: " + e.target.parent + "; name: " + e.target.parent.name);
                          trace(">>> currentTarget: " + e.currentTarget + "; name: " + e.currentTarget.name);
                          trace(">>> x: " + e.target.parent.x + "; y: " + e.target.parent.y + "; width: " + e.target.parent.width + "; height: " + e.target.parent.height);

                          var currentColor:String = e.currentTarget.getStyle("color").toString(16);
                          trace(">>> currentColor: " + currentColor);

                          switch(currentColor) {
                               case textColor.color1 :
                               currentColor = textColor.color2;
                               break;

                               case textColor.color2 :
                                    currentColor = textColor.color3;
                                    break;

                               case textColor.color3 :
                                    currentColor = textColor.color1;
                                    break;

                               default :
                                    currentColor = textColor.color1;
                          }
                          e.currentTarget.setStyle("color", ("0x"+currentColor));
                          trace(">>> after switch >>>currentColor: " + "0x" + currentColor);
                     }
                     private function traceSpriteEvent(e:Event):void
                     {
                          // NOTE: Must use e.target.parent + property because the MouseEvents trace here
                          // are from the UITextFields within the Text components, and we're interested in
                          // the name, coordinates, etc. of the Text component, _not_ of the UITextField
                          //trace("spriteEvent> target: " + e.target.parent + "; name: " + e.target.parent.name);
                          //trace(">>> x: " + e.target.parent.x + "; y: " + e.target.parent.y + "; width: " + e.target.parent.width + "; height: " + e.target.parent.height);
                          trace("spriteEvent> target: " + e.target + "; name: " + e.target.name);
                          trace(">>> x: " + e.target.parent.x + "; y: " + e.target.parent.y + "; width: " + e.target.width + "; height: " + e.target.height);
                     }
                     private function traceTextCreationEvent(e:Event):void
                     {
                          trace("textCreationEvent> target: " + e.target + "; name: " + e.target.name);
                          trace(">>> x: " + e.target.x + "; y: " + e.target.y + "; width: " + e.target.width + "; height: " + e.target.height);
                          myCanvas.addChild(spriteArray[powerOfTwo(e.target.name)]);
                          //powerOfTwo(Math.pow(2, int(e.target.name)).toString());
                          spriteArray[powerOfTwo(e.target.name)].x = e.target.x;
                     }
                     private function powerOfTwo(aString:String):int
                     {
                          var k:int = int(aString);
                          var power:int = 0;
                          if (k==1) { power=0 }
                          else {
                               while (k > 1) {
                                    k = k/2;
                                    power = power+1;
                               }
                          }
                          //trace("powerOfTwo>> power: " + power.toString());
                          if (k == 1) {
                               return(power);
                          } else {
                               return(0);
                          }
                     }
                     private function traceCanvasCreationEvent(e:Event):void
                     {
                          trace("Canvas created!!!");
                          var j:int = horizontalOffset;
                          for (var i:int=0; i<theWord.length; i++) {
                               trace("i: " + i + "; textArray[i].width: " + textArray[i].width);
                               trace("i: " + i + "; spriteArray[i].width: " + spriteArray[i].width);
                               textArray[i].y = verticalOffset;
                               textArray[i].x = j;
                               spriteArray[i].x = j + ((textArray[i].width/2) - (stressHitWidth/2));
                               spriteArray[i].y = textArray[i].y + textArray[i].height;
                               trace("textArray[i].x: " + textArray[i].x);
                               trace("spriteArray[i].x " + spriteArray[i].x);
                               j = j + textArray[i].width;
                          }
                     }
                ]]>
           </mx:Script>
      </mx:Application>