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

    [STRANGE] Image source change and overlay graphics

    maestro91

      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.clear();
                          activeMask.graphics.lineStyle(2, 0x999999);
                          //Draw frame
                          activeMask.graphics.drawRect(0, 0, this.width, this.height);
                          //Draw resize mark
                          activeMask.graphics.beginFill(0x999999);
                          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.endFill();
                          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.clear();
                          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
                     this.addChild(activeMask);
                     this.activeMask.visible=false;
                     this.addChild(overMask);
                     this.overMask.visible=false;               
                     showPopUp();                         
                     //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);
                  this.drawMask();
                  }
      

       

      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...