Flash As3将蒙版应用于多个图像

时间:2011-05-07 08:08:15

标签: flash actionscript-3 actionscript

我正在编写一个查看XML文件并将其中的图像拉出来的应用程序。我想拉出原始图像并动态应用它们。

如下所示,我创建了一个空白的影片剪辑并将图像放入其中。此时我想创建遮罩。

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);

我将不胜感激的任何帮助

此致

3 个答案:

答案 0 :(得分:1)

通过创建自己处理屏蔽逻辑的显示对象容器类,可以使生活更轻松。以下是我为证明这一点而制作的Flash应用程序:

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

以下是正在运行的应用程序的图像:

enter image description here

答案 1 :(得分:0)

影片剪辑具有.mask属性,您可以将其设置为另一个影片剪辑。

addChild(mask_mc);
thumb_mb.mask = mask_mc;

其中mask_mc显然是掩码movieclip。

答案 2 :(得分:0)

有两种方法可以将遮罩添加到显示对象。要记住的一件事是,您无法为多个剪辑运行时设置遮罩。使用容器。

  1. 时间表方式 在时间轴中添加一个动画片段并为其指定实例名称(如thumbMask)。剪辑应包含图形,如果它具有渐变,则应在检查器面板中将其设置为cacheAsBitmap。然后在缩略图的新图层上添加一个holder displayobject。这是您要在循环中添加图像的剪辑。接下来,右键单击遮罩层,然后单击“遮罩”。确保夹子遮盖支架层。如果您不熟悉图层蒙版,请询问谷歌。

  2. 脚本方式 可以使用与上面相同或运行时创建的掩码。然后应用这样的面具:

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