1 Reply Latest reply on Jul 7, 2009 11:28 PM by maestro91

    [STRANGE] Image source change and overlay graphics


      Hello, i'm having really strange -to me- behavior from a custom image control.


      During initialization, i draw 2 shapes (frames to see a border when clicked or over) then i addchild them to the image on "creationComplete" event.

      By now its all right.


      But at runtime i can upload a user image and then use it as new image, changing the "source" property to the new image just loaded: it works BUT the new image lays over the two shapes...so i cant see the drawings over the image.


      So if i don't upload an image,

           the situation is that i can see the shapes i draw OVER the image

      But if i upload another image,  changing the .source of the image, the new image is OVER the shapes. The shapes are there yet, but i cant see them.


      Any clue from the experts?


      Here is some code:


      drawMask() to draw the shapes


      protected function drawMask():void {   
                  //isActive mask
                  if (activeMask) {
                          activeMask.graphics.lineStyle(2, 0x999999);
                          //Draw frame
                          activeMask.graphics.drawRect(0, 0, this.width, this.height);
                          //Draw resize mark
                          activeMask.graphics.moveTo(this.width, this.height);
                          activeMask.graphics.lineTo(this.width, this.height - 10);
                          activeMask.graphics.lineTo(this.width - 10, this.height);
                          activeMask.graphics.lineTo(this.width, this.height);
                          activeMask.graphics.lineStyle(1, 0x666666);
                          activeMask.graphics.moveTo(this.width - 4, this.height - 1);
                          activeMask.graphics.lineTo(this.width - 1, this.height - 4);
                          activeMask.graphics.moveTo(this.width - 7, this.height - 1);
                          activeMask.graphics.lineTo(this.width - 1, this.height - 7);     \     
                     //isOver mask
                     if (overMask) {
                          overMask.graphics.lineStyle(2, 0x999999, 0.5);
                          //Draw frame
                          overMask.graphics.drawRect(0, 0, this.width, this.height);


      handleCreationComplete() called when instantiation is complete


      private function handleCreationComplete(eventObj:Event):void {
                     //backup for reset
                     this.originalHeight = this.height;
                     this.originalWidth = this.width;
                     //Prepare the masks
                     //Shouts that a UserImage is created
                      var customData:Object = {
                          name: this.name,
                          shortName: "",                    
                          type: "FixedImage"
                     dispatchEvent(new CustomEvent('addElement', customData, true));


      updateDisplayList to draw the masks over the image


              override protected function updateDisplayList(w:Number, h:Number):void {
                  super.updateDisplayList(w, h);


      onUpload when an image is uploaded and the "predefined" image is swapped with the new one


                private function onUpload(event:Event):void {
                   this.x = pop.stpX.value;
                     this.y = pop.stpY.value;
                     this.width = pop.stpW.value;
                     this.height = pop.stpH.value;
                     this.shortName = pop.txtShortName.text;
                     this.description = pop.txtDescription.text;
                     this.path = pop.txtFile.text;
                     this.source = pop._imgTmp.source;
                     //Shouts that a FixedImage is uploaded
                      var customData:Object = {
                          name: this.name,
                          shortName: this.shortName,     
                          type: "FixedImage"
                     dispatchEvent(new CustomEvent('uploadElement', customData, true));


      I even tried to this.removechild of the two shapes and then addchild again after changing the source but nothing...