Flash As3, применяющий маску к нескольким изображениям

#flash #actionscript-3 #actionscript

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

Я был бы признателен за любую помощь

С уважением

Ответ №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
  

Ниже приведен образ запущенного приложения:

введите описание изображения здесь

Ответ №2:

Видеоролик имеет свойство .mask, которое вы можете установить для другого видеоролика.

 addChild(mask_mc);
thumb_mb.mask = mask_mc;
  

Где mask_mc — это, очевидно, видеоролик с маской.

Комментарии:

1. не забудьте добавить mask_mc в список отображения. В некоторых особых случаях (альфа-маска) вам нужно cacheAsBitmap = true размещать клипы.

2. Итак, с точки зрения начинающих, это маскировка исходного видеоролика, а затем помещение его в новый видеоролик?

3. Я не думаю, что это то, что здесь происходит. У вас просто есть оба видеоролика на вашей сцене, и вы устанавливаете один в качестве маски другого, точно так же, как маскированные слои во Flash (хотя я могу ошибаться)

4. хорошо, это имеет смысл… давайте посмотрим, смогу ли я заставить это работать сейчас.

Ответ №3:

Существует два способа добавить маску к displayobject. Следует помнить одну вещь: вы не можете установить маску для нескольких клипов во время выполнения. Используйте контейнер.

  1. Способ временной шкалы Добавьте видеоролик на свою временную шкалу и присвоите ему имя экземпляра (например, thumbMask). Клип должен содержать графику, и если в нем есть градиенты, для него должно быть установлено значение cacheAsBitmap на панели инспектора. Затем добавьте держатель displayobject на новый слой для ваших эскизов. Это клип, в который вы хотите добавить свои изображения в цикле. Далее щелкните правой кнопкой мыши слой маски и выберите «Маска». Убедитесь, что клип маскирует слой держателя. Если вы не знакомы с масками слоев, просто спросите в Google.

  2. Способ сценария может использовать тот же, что и выше, или созданную во время выполнения маску. Затем примените маску следующим образом:

thumbHolder.mask = Маска для большого пальца; thumbHolder.cacheAsBitmap = true; thumbMask.cacheAsBitmap = true;