4 Replies Latest reply on Jan 7, 2010 7:36 AM by humetw

    Custom composite component missing an Image

    humetw

      I want to initially display a bunch of images with an alpha of 0.4. Each image should have a gray box behind it so images with white backgrounds don't look funny. Eventually I want to use mouse events to raise the alpha on selected images to 1.0, but I haven't gotten that far yet. I also want to use a mask to round the corners of the image.

       

      From what I've read, it sounded like I should create a composite component, specifically a UIComponent subclass that creates an image and a Shape to go behind that image.

       

      I tried to follow the example at http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html and work in stuff from this rounded corners cookbook example http://cookbooks.adobe.com/post_Rounded_Image-6502.html?w=rel, but things aren't working. I see only the gray background shape, not the image. If I comment out the code in updateDisplayList that draws the gray box, I see nothing.

       

      The gray boxes are getting their sizes from the images (indirectly via the measure() method), so it appears the Image objects themselves are getting the right sources set and loaded. They're just never appearing onscreen.

       

      Can anyone advise me on what I might be missing or going about incorrectly? Thanks.

       

      package com.xxxxxxxxx {
      
      import flash.display.Shape;
      
      import mx.controls.Image;
      import mx.core.UIComponent;
      
      public class SelectableImage extends UIComponent {
          private var image:Image;
          private var imageMask:Shape;
          private var background:Shape;
      
          private var sourceChanged:Boolean = false;
      
          public var cornerRadius:int = 5;
      
          private var _source:Object;
          public function get source():Object {
              return _source;
          }
          public function set source(value:Object):void {
              _source = value;
              sourceChanged = true;
              invalidateProperties();
          }
      
          public function Node() {
              super();
          }
      
          override protected function createChildren():void {
              super.createChildren();
      
              image = new Image();
              image.source = source;
              addChild(image);
      
              imageMask = new Shape();
              addChild(imageMask);
      
              background = new Shape();
              addChild(background);
          }
      
          override protected function commitProperties():void {
              super.commitProperties();
              if (sourceChanged) {
                  sourceChanged = false;
                  image.source = source;
                  invalidateDisplayList();
              }
          }
      
          override protected function measure():void {
              super.measure();
              measuredWidth = measuredMinWidth = image.measuredWidth;
              measuredHeight = measuredMinHeight = image.measuredHeight;
          }
      
          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
              super.updateDisplayList(unscaledWidth, unscaledHeight);
      
              background.graphics.clear();
              background.graphics.beginFill(0xCCCCCC);
              background.graphics.drawRoundRectComplex(
                      0, 0, unscaledWidth, unscaledHeight,
                      cornerRadius, cornerRadius, cornerRadius, cornerRadius);
              background.graphics.endFill();
      
              imageMask.graphics.clear();
              imageMask.graphics.beginFill(0x000000);
              imageMask.graphics.drawRoundRectComplex(
                      0, 0, unscaledWidth, unscaledHeight,
                      cornerRadius, cornerRadius, cornerRadius, cornerRadius);
              imageMask.graphics.endFill();
      
              image.alpha = 0.4;
              image.mask = imageMask;
      
          }
      }
      }