Flash As3 Applying mask to multiple images

I am writing an application that looks into an XML file and pulls out the images within. I would like to pull out the raw images and apply a mask to them dynam开发者_StackOverflow中文版ically.

As you can see below i create a blank movie clip and put the images into it.. At this point i want to create the mask.

var thumbLdr:Loader = new Loader();
    var thumbURLReq:URLRequest = new URLRequest(galleryDir + thumb);
    thumbLdr.load(thumbURLReq);
    // Create MovieClip holder for each thumb;
    //var thumbArray = new Array()
    var thumb_mc = new MovieClip();
    thumb_mc.addChild(thumbLdr);
    addChildAt(thumb_mc, i);

Any help i would appreciate

Regards

You can make life easier by creating your own display object container class that handles the masking logic automatically. The following is a flash application I made to demonstrate this:

image.xml:

<images>
    <image name="Chrysanthemum" url="images/Chrysanthemum.jpg" />
    <image name="Desert" url="images/Desert.jpg" />
    <image name="Hydrangeas" url="images/Hydrangeas.jpg" />
    <image name="Jellyfish" url="images/Jellyfish.jpg" />
    <image name="Koala" url="images/Koala.jpg" />
    <image name="Lighthouse" url="images/Lighthouse.jpg" />
    <image name="Penguins" url="images/Penguins.jpg" />
    <image name="Tulips" url="images/Tulips.jpg" />
</images>

Main.as:

package 
{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.display.LoaderInfo;

    public class Main extends Sprite 
    {
        private var _xmlUrl:String = "xml/images.xml";
        private var _xml:XML;
        private var _bitmaps:Vector.<Bitmap>
        private var _bitmapsLoaded:int;

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);

        }// end function

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            _bitmaps = new Vector.<Bitmap>();

            loadXml();

        }// end function

        private function loadXml():void
        {
            var urlLoader:URLLoader = new URLLoader(new URLRequest(_xmlUrl));
            urlLoader.addEventListener(Event.COMPLETE, onUrlLoaderComplete);

        }// end function

        private function onUrlLoaderComplete(e:Event):void
        {
            _xml = XML(URLLoader(e.target).data);

            loadBitmaps();

        }// end function

        private function loadBitmaps():void
        {
            for (var i:uint = 0; i < _xml.children().length(); i++)
            {
                var loader:Loader = new Loader();
                loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
                loader.load(new URLRequest(_xml.children()[i].@url));

            }// end for

        }// end function

        private function onLoaderComplete(e:Event):void
        {
            _bitmaps.push(Bitmap(LoaderInfo(e.target).content))

            if (_xml.children().length() == ++_bitmapsLoaded) addMaskImages();

        }// end function

        private function addMaskImages():void
        {
            var row:int = 2;
            var column:int = 4;
            var index:int = 0;
            var maskShapePosition:Number = 200;
            var maskShapeSize:Number = 200;

            for (var i:int = 0; i < row; i++)
            {
                for (var j:int = 0; j < column; j++)
                {
                    var maskedImage:MaskedImage = new MaskedImage(_bitmaps[index++], maskShapePosition, maskShapePosition, maskShapeSize, maskShapeSize);
                    maskedImage.x = j * maskShapeSize;
                    maskedImage.y = i * maskShapeSize;
                    addChild(maskedImage);

                }// end for

            }// end for

        }// end function

    }// end class

}// end package

import flash.display.DisplayObject;
import flash.display.Shape;
import flash.display.Sprite;

internal class MaskedImage extends Sprite
{
    private var _maskShape:Shape;
    private var _image:DisplayObject;

    public function get image():DisplayObject { return image }
    public function get maskShape():Shape {return _maskShape }

    public function MaskedImage(image:DisplayObject, maskShapeX:Number, maskShapeY:Number, maskShapeWidth:Number, maskShapeHeight:Number)
    {
        _image = image;
        _image.x -= maskShapeX;
        _image.y -= maskShapeY;
        addChild(_image);

        _maskShape = new Shape();
        _maskShape.graphics.beginFill(0x000000);
        _maskShape.graphics.drawRect(0, 0, maskShapeWidth, maskShapeHeight);
        _maskShape.graphics.endFill();
        addChild(_maskShape);

        this.mask = _maskShape;

    }// end function

}// end package

The following is an image of the application running:

A movie clip has the .mask property, which you can set to another movieclip.

addChild(mask_mc);
thumb_mb.mask = mask_mc;

Where mask_mc is, obviously, the mask movieclip.

There is two ways to add a mask to a displayobject. One thing to remember is that you can not set a mask to multiple clips runtime. Use a container.

1. The timeline way Add a movieclip in your timeline and give it an instance name (like thumbMask). The clip should contain graphics and if it has gradients it should be set to cacheAsBitmap in the inspector panel. Then add a holder displayobject on a new layer for your thumbnails. This is the clip you want to add your images to in the loop. Next, right click the mask layer and click Mask. Make sure the clip masks the holder layer. If you are not familiar with layer masks, just ask google.

2. The script way Could use the same as above or a runtime created mask. Then apply mask like this:

thumbHolder.mask = thumbMask; thumbHolder.cacheAsBitmap = true; thumbMask.cacheAsBitmap = true;