How to cut a big image into many movieclips(FLASH)

Question

package  {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import flash.net.URLVariables;
    import flash.net.URLRequest;
    import flash.events.Event;

    public class Init extends Sprite {

        var rects:Array,
        numRects:int = stage.stageWidth / _width + 1,
        _width:Number = 20,
        _height:Number = 80,
        _rotation:int = 0;

        public function Init() {

            init();
        }

        function init():void
        {
            rects = new Array();
            for(var i:int = 0; i < numRects; i++)
            {
                var rect:Rect = new Rect();
                rect.x = i * 20;
                addChild(rect);
                rects.push(rect);
            }

            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        function onEnterFrame(e:Event):void
        {

            for(var i:int = 0; i < numRects; i++)
            {
                rects[i].rotationY += 1;
            }

            _rotation += 1;
            if(_rotation % 180 == 0)
            {
                removeEventListener(Event.ENTER_FRAME, onEnterFrame);
            }

        }

    }

}

And this is the Rect class:

package  {
    import flash.display.Sprite;

    public class Rect extends Sprite {

        private var color:uint,
        _width:Number,
        _height:Number;
        public function Rect(color:uint = 0x000000, width:Number = 20, height:Number = 80) {

            this.color = color;
            this._width = width;
            this._height = height;
            init();
        }

        function init():void
        {
            graphics.beginFill(color);

            graphics.drawRect(0, 0, _width, _height);

            graphics.endFill();


        }

    }

}

So I create many rectangles and move them each loop by 20 pixel, so by now they are filled with color, but what if I have a large image by height equal to these rectangles, and cut that image and fill each of these rectangles with the part of the image, just as making puzzle parts, I've imported the images to my library, but now i don't know how to do it please any ideas?

Vesper Vesper · Accepted Answer · 2012-11-28T16:57:09

In short: If you are splitting an image, use Bitmaps as your Rect children or base, and use underlying BitmapData.copyPixels() method to fill your rects' bitmaps with pixels from one big image. An example:

        var megabase:BitmapData = new BigImage().bitmapData; // BigImage is an embedded asset name
        _sequence = new Vector.<BitmapData>();
        _rect = new Rectangle(0, 0, 64, 64); // my parts of image are 64x64 all, in general you should have (x,y,w,h) declared somewhere
        _point = new Point();
        var smallBD:BitmapData;
        _sequence = new Vector.<BitmapData>();
        for (i = 0; i < ssa.length; i++) {
            // ssa is a (x,y) array defining areas that each sprite will contain
            smallBD = new BitmapData(64, 64, true, 0);
            _rect.x = ssa[i][0];
            _rect.y = ssa[i][1]; 
            smallBD.copyPixels(megabase, _rect, _point);
            _sequence.push(smallBD);
        }

This splits one huge megabase image into several 64x64 images arranged as a Vector of BitmapData objects. You will obviously have a different underlying structure, but the main principle is illustrated here.

How to cut a big image into many movieclips(FLASH)

1 Answers