<mx:Metadata>
    [Style(name="imageBackgroundAlpha",type="Number",format="Number",inherit="no")]
 
    [Event(name="imageClick", type="com.flexer.ImageRailEvent")]
</mx:Metadata>

// handle one image click
private function handleImageClick(e:MouseEvent):void
{
    // dispatch image shelf custom event
    dispatchEvent(new ImageRailEvent(
        ImageRailEvent.CLICK, 
        _images[uint(e.currentTarget.id)]));
}

cnv.addEventListener(MouseEvent.CLICK, handleImageClick);

cnv.id = i.toString();

package com.flexer
{
    import flash.events.Event;
    import mx.controls.Image;
 
    public class ImageRailEvent extends Event
    {
        // constant
        public static const CLICK:String = "imageClick";
        // params
        // we will save the image it was clicked on
        private var _image:Image;
 
        // constructor
        public function ImageRailEvent(type:String, image:Image = null)
        {
            super(type);
            // Store Image params
            _image = image;
        }
 
        // clone
        override public function clone():Event
        {
            return new ImageRailEvent(this.type, _image);
        }
 
        // image getter
        public function get image():Image
        {
            return _image;
        }
    }
}

// static variable for styling
private static var _classConstructed:Boolean = constructStyle();
private var _imageBackgroundChanged:Boolean = true;
 
private var _imageBackgroundAlpha:Number;

// styling
private static function constructStyle():Boolean
{
    // get style defined for ImageRail
    var style:CSSStyleDeclaration = 
        StyleManager.getStyleDeclaration("ImageRail");
 
    // check to see if there's already an existing 
    // style declaration for this class
    if (style) 
    {
        // its possible for a style to exist without 
        // defining all of the possible styles 
        // in which case we need to check each style
        // explicitly and set a default if needed
        if (style.getStyle("imageBackgroundAlpha") == 
            undefined)
        {
            style.setStyle("imageBackgroundAlpha",0);
        }
    }
    else // create a default style declaration
    {
        style = new CSSStyleDeclaration();
        style.defaultFactory = function():void
        {
            this.imageBackgroundAlpha = 0;
        }
        // set default style
        // this will trigger styleChanged
        StyleManager.setStyleDeclaration("ImageRail",style,true);
    }
 
    return true;
}
 
// override for styling
// triggered when style is changed
override public function styleChanged(styleProp:String):void 
{
 
    super.styleChanged(styleProp);
    // Check to see if style changed. 
    if (styleProp == "imageBackgroundAlpha") 
    {
        _imageBackgroundChanged = true; 
        // invalidating to trigger updateDisplayList
        invalidateDisplayList();
        return;
    }
}
 
// updating canvases with the new style
override protected function updateDisplayList(
    unscaledWidth:Number,unscaledHeight:Number):void 
{
 
    super.updateDisplayList(unscaledWidth,unscaledHeight);
    // Check to see if style changed. 
    if (_imageBackgroundChanged == true) 
    {
        // get image background alpha
        _imageBackgroundAlpha = getStyle("imageBackgroundAlpha");
        // set the alpha to all canvases
        for (var i:uint = 0; i < _canvases.length; i++) 
        {
            (_canvases[i] as Canvas).setStyle(
                "backgroundAlpha",_imageBackgroundAlpha);
 
        }
        _imageBackgroundChanged = false;
    }
}

cnv.useHandCursor = true;
cnv.mouseChildren = false;
cnv.buttonMode = true;