A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: Bitmap splitting

  1. #1
    Senior Member
    Join Date
    Aug 2012
    Posts
    115

    Bitmap splitting

    Hello peoples, if can help please.


    I have image on screen inside of clip, I want split bitmap into squares, at most i can split into columns only, here code
    PHP Code:
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Point;

    var 
    splits:Number 100;
    var 
    splitWidth:Number Math.round(imageOnScreen.width splits);
    var 
    splitHeight:Number Math.round(imageOnScreen.height splits);
    var 
    newCopy:BitmapData = new BitmapData(imageOnScreen.width,imageOnScreen.height);
    newCopy.draw(imageOnScreen);

    for (var 
    0splitsi++)
    {
        
    this["bmd" i] = new BitmapData(imageOnScreen.width,imageOnScreen.height,true,0);
        
    this["bmd" i].copyPixels(newCopy,new Rectangle(splitWidth,0,splitWidth,imageOnScreen.height), new Point(0,0));
        
    this["bm" i] = new Bitmap(this["bmd" i]);
        
    addChild(this["bm"+i]);
        
    this["bm" i].* (splitWidth 1);
    }
    // make original image hidden to see copy
    imageOnScreen.visible false
    Any help is advise for me.
    If you can help with making copied file transparent pixel, any help great. thank
    here file too

  2. #2
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    I solve tranpsentcy, need help with split to squares, no just column

  3. #3
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Hi, I solve transprencts, but need help with make image into squares.

    here latest files and code
    PHP Code:
    [SWF(width 630,height 300)]
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Point;
    import flash.events.ProgressEvent;
    import flash.display.Loader;

    var 
    myLoader:Loader = new Loader();
    var 
    MyOrignalImage;
    var 
    MyImage;

    myLoader.load(new URLRequest("http://fc01.deviantart.net/fs44/f/2009/077/9/0/Firefox_Solar_by_0dd0ne.png"));
    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETELoadEnd);
    function 
    LoadEnd(e:Event)
    {
        
    MyOrignalImage e.target.content;
        
    addChild(MyOrignalImage);
        
    MyOrignalImage.350;
        
    MyImage e.target.content;
        
        var 
    splits:Number 100;
        var 
    splitWidth:Number Math.round(MyImage.width splits);
        var 
    splitHeight:Number Math.round(MyImage.height splits);
        var 
    newCopy:BitmapData = new BitmapData(MyImage.width,MyImage.height,true,0x00FFFFFF);
        
    newCopy.draw(MyImage);
        for (var 
    0splitsi++)
        {
            
    this["bmd" i] = new BitmapData(MyImage.width,MyImage.height,true,0x00FFFFFF);
            
    this["bmd" i].copyPixels(newCopy,new Rectangle(splitWidth,splitHeight,splitWidth,MyImage.height), new Point(0,0));
            
    this["bm" i] = new Bitmap(this["bmd" i]);
            
    addChild(this["bm"+i]);
            
    this["bm" i].* (splitWidth 1);//
            //this["bm" + i].y = i * (splitHeight);// + 1
        
    }

    you can paste code itno new as3 documend and it work, but file here too if really need
    Attached Files Attached Files

  4. #4
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    Not sure what you mean. Why are you making it into squares? Is it a visual thing?

    Do traces on your numbers to see what you're doing.
    this["bmd" + i].copyPixels(newCopy,new Rectangle(i * splitWidth,splitHeight,splitWidth,MyImage.height), new Point(0,0));
    trace("splitWidth: " + splitWidth + " splitHeight" + splitHeight);

    You can use modulo to get the y of a grid.

    You can do whatever you want using bitmap-free regular flash and "draw" the movieclip to bitmapdata.

  5. #5
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Hello

    Thanks for look, i get it work, you inspire me to carry on as i try for many hours and go blank.

    It is for visual but this just test mode to get work first.
    PHP Code:
    [SWF(width 630,height 300)]
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Point;
    import flash.events.ProgressEvent;
    import flash.display.Loader;

    var 
    myLoader:Loader = new Loader();
    var 
    MyOrignalImage:*;
    var 
    MyImage:*;

    myLoader.load(new URLRequest("http://fc01.deviantart.net/fs44/f/2009/077/9/0/Firefox_Solar_by_0dd0ne.png"));
    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETELoadEnd);
    function 
    LoadEnd(e:Event)
    {
        
    MyOrignalImage e.target.content;
        
    addChild(MyOrignalImage);
        
    MyOrignalImage.350;
        
    MyImage e.target.content;

        var 
    splits:Number 50
        
    var splitWidth:Number Math.round(MyImage.width splits);
        var 
    splitHeight:Number Math.round(MyImage.height splits);
        var 
    newCopy:BitmapData = new BitmapData(MyImage.width,MyImage.height,true,0x00FFFFFF);
        
    newCopy.draw(MyImage);
        
    /*
        for (var i = 0; i < splits; i++)
        {
        this["bmd" + i] = new BitmapData(MyImage.width,MyImage.height,true,0x00FFFFFF);
        this["bmd" + i].copyPixels(newCopy,new Rectangle(i * splitWidth,i * splitHeight,splitWidth,splitHeight), new Point(0,0));
        this["bm" + i] = new Bitmap(this["bmd" + i]);
        addChild(this["bm"+i]);
        this["bm" + i].x = i * (splitWidth + 1);//
        trace("splitWidth: " +  (i * splitWidth) + " splitHeight" + (i * splitHeight));
        this["bm" + i].y = i * (splitHeight);// + 1
        }
        */
        
    for (var 0splitsi++)
        {
            for (var 
    0splitsj++)
            {
                var 
    bmd:BitmapData = new BitmapData(MyImage.width,MyImage.height,true,0x00FFFFFF);
                
    bmd.copyPixels(newCopy,new Rectangle(splitWidth,splitHeight,splitWidth,splitHeight), new Point(0,0));
                var 
    bm:Bitmap = new Bitmap(bmd);
                
    bm.name "bm" i;
                
    addChild(bm);
                
    bm.* (splitWidth 1);
                
    bm.* (splitHeight 1);
            }
        }

    is so i can make exploding bitmap in mouse click with gallery in the end

  6. #6
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Hellos

    If you can see to help me further please, i have problems with the dragging and depth issue and it give off odd name when click
    PHP Code:
    [SWF(width 630,height 300)]

    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Point;
    import flash.events.ProgressEvent;
    import flash.display.Loader;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.events.ProgressEvent;
    import flash.events.IOErrorEvent;

    import flash.net.URLRequest;
    import flash.filters.*;

    var 
    DropShadow1:DropShadowFilter = new DropShadowFilter(0,45,0x000000,1,2,2,1,1);
    var 
    NewImagePiece:Bitmap = new Bitmap();
    var 
    Spr:Sprite = new Sprite();
    var 
    MyOrignalImage:*;
    var 
    MyImage:*;
    var 
    Pieces:Array = new Array();

    var 
    SplitWidth:Number;
    var 
    SplitHeight:Number;
    var 
    Splits:Number 5;

    // *** loader

    // *** attach loader bar
    var LBar:LoaderBar = new LoaderBar();
    LBar.10;
    LBar.10;

    var 
    MyLoader:Loader = new Loader();

    MyLoader.contentLoaderInfo.addEventListener(Event.OPENLoadStart);
    MyLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESSLoadProgress);
    MyLoader.contentLoaderInfo.addEventListener(Event.COMPLETELoadEnd);
    MyLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERRORLoadError);

    function 
    LoadError(e:IOErrorEvent):void
    {
        
    trace("LoadError");
    }
    function 
    LoadStart(e:Event)
    {
        
    trace("Load started");
        
    addChild(LBar);
        
    LBar.LoaderBarExpand.width 0;
    }
    function 
    LoadProgress(e:ProgressEvent)
    {
        var 
    Percentage:int Math.round(e.bytesLoaded e.bytesTotal 100);
        
    LBar.LoaderBarExpand.width Percentage;
        
    trace(Percentage);
    }

    MyLoader.load(new URLRequest("http://fc01.deviantart.net/fs44/f/2009/077/9/0/Firefox_Solar_by_0dd0ne.png"));

    function 
    LoadEnd(e:Event)
    {
        
    MyOrignalImage MyLoader.content;
        
    addChild(MyOrignalImage);
        
    MyOrignalImage.350;
        
    DoSplit();
        
    removeChild(LBar);
    }

    function 
    DoSplit()
    {
        
    MyImage MyLoader.content;
        var 
    SplitWidth:Number Math.ceil(MyImage.width Splits);
        var 
    SplitHeight:Number Math.ceil(MyImage.height Splits);

        var 
    NewCopyImage:BitmapData = new BitmapData(MyImage.width,MyImage.height,true,0x00FFFFFF);
        
    NewCopyImage.draw(MyImage);

        for (var 
    0Splitsi++)
        {
            for (var 
    0Splitsj++)
            {
                var 
    Spr:Sprite = new Sprite();
                
    addChild(Spr);

                var 
    NewImage:BitmapData = new BitmapData(SplitWidth,SplitHeight,true,0x00FFFFFF);
                
    NewImage.copyPixels(NewCopyImage,new Rectangle(SplitWidth,SplitHeight,SplitWidth,SplitHeight), new Point(0,0));

                var 
    NewImagePiece:Bitmap = new Bitmap(NewImage);
                
    NewImagePiece.name "NewImagePiece" i;
                
                
    with (Spr)
                {
                    
    //filters = [DropShadow1];
                    
    addEventListener(MouseEvent.MOUSE_DOWN,Drag);
                    
    addEventListener(MouseEvent.MOUSE_UP,NoDrag);
                    
    mouseEnabled true;
                    
    buttonMode true;
                }
                
    Spr.addChild(NewImagePiece);

                
    NewImagePiece.* (SplitWidth 10);
                
    NewImagePiece.* (SplitHeight 10);

                
    Pieces.push(NewImagePiece);
            }
        }
        
    //addEventListener(Event.ENTER_FRAME, Animate);
        
    trace("pieces:"Pieces.length);
    }

    function 
    Drag(e:MouseEvent)
    {
        
    this.parent.addChild(this);
        
    e.currentTarget.startDrag();
        
    trace(e.currentTarget.name);
    }

    function 
    NoDrag(e:MouseEvent)
    {
        
    e.currentTarget.stopDrag();
    }
    // *** working on this
    function Animate(event:Event)
    {
        
    // move the pieces;
        
    if (! Pieces.length)
        {
            
    trace("DONE!");
            
    removeEventListener(Event.ENTER_FRAMEAnimate);
        }

    if you can help me animate the pieces also or guide me
    Attached Files Attached Files

  7. #7
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Oh yes, is getting there if anybodies can help it better
    Attached Files Attached Files

  8. #8
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    Looked at the last two examples. Do you program in something else? Youre figuring it out. Most of the issues, programming issues like depth and how your code is structured, fall under oop. If you do a couple hours on an intro to oop (in general, not actionscript), you'll see how oop-based flash and everything else is and that everybody doing flash is doing oop whether they know it or not.

    Have you created clips by hand on the stage in layers? If not, you definitely should because you can physically work with the objects created by actionscript and depths. Plus, it's far more efficient to design on the stage - you don't have to compile the swf to see things.

    You should use clips as containers for other clips for everything. For example, if I'm going to show a jpg, the jpg loader gets added to something like picHolder.pic and picHolder is added to stage.

    Use camelCase for your var/function names. Uppercase first letter means it's a class. I personally just use camelCase but employers may require you to use proper oop naming conventions.

    Your drag function shouldn't have the code about adding itself to the stage or whatever.

    You can store everything in arrays of objects.
    var oTemp:Object;
    var oTemp = new Object();
    var oTemp.stringWhatever = "asdfas";
    var oTemp.intID = 32;
    myArray.push(oTemp);
    trace(myArray[0].intID);

    ....and im out of time!
    Last edited by moot; 01-29-2014 at 11:48 AM.

  9. #9
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    Forgot...

    You can use classes, your code is close already. Open a new as3 file in flash, save it, under Publish, fill in Class with Main (the name of your main class), hit the pencil button to right, and flash will create a new class Main, save it in same folder as your fla and you have a working class.

    You can also put your regular as code in an external actionscript .as file for easier editing. Here's command to include external:
    include "main.as"

  10. #10
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Hellos

    I have making it work properly, i understand your containers advice, now it can drag bits with depth swap and animate explosion

    using image as last time i attach
    PHP Code:
    [SWF(width 630,height 530)]

    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;

    import flash.filters.*;

    import flash.geom.Rectangle;
    import flash.geom.Point;

    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.events.ProgressEvent;
    import flash.events.IOErrorEvent;

    import flash.net.URLRequest;

    import flash.utils.*;

    import fl.transitions.Tween;
    import fl.transitions.TweenEvent;
    import fl.transitions.easing.*;

    var 
    dropShadow1:DropShadowFilter = new DropShadowFilter(0,45,0x000000,1,2,2,1,1);

    var 
    newImageDataPiece:Bitmap = new Bitmap();
    var 
    spriteContainer:Sprite = new Sprite();

    var 
    myOrignalImage:Sprite = new Sprite();
    var 
    myImage:*;
    var 
    thePieces:Array = new Array();
    var 
    pieceBit:Object = new Object();
    var 
    splitAmount:Number 15;
    var 
    splitWidth:Number;
    var 
    splitHeight:Number;

    // *** loader
    var loadBar:LoaderBar = new LoaderBar();
    loadBar.10;
    loadBar.10;

    var 
    myLoader:Loader = new Loader();

    myLoader.contentLoaderInfo.addEventListener(Event.OPENloadStart);
    myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESSloadProgress);
    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETEloadEnd);
    myLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERRORloadError);

    function 
    loadError(e:IOErrorEvent):void
    {
        
    trace("LoadError");
    }
    function 
    loadStart(e:Event)
    {
        
    trace("Load started");
        
    addChild(loadBar);
        
    loadBar.LoaderBarExpand.width 0;
    }
    function 
    loadProgress(e:ProgressEvent)
    {
        var 
    Percentage:int Math.round(e.bytesLoaded e.bytesTotal 100);
        
    loadBar.LoaderBarExpand.width Percentage;
        
    trace(Percentage);
    }

    myLoader.load(new URLRequest("marley.png"));

    function 
    loadEnd(e:Event)
    {
        
    removeChild(loadBar);
        
    myOrignalImage.addChild(myLoader.content);
        
    with (myOrignalImage)
        {
            
    addEventListener(MouseEvent.CLICKdoExplode);
            
    mouseEnabled true;
            
    buttonMode true;
            
    350;
            
    50;
            
    addEventListener(Event.ADDED_TO_STAGEsplitImage);
        }
        
    addChild(myOrignalImage);
        
    addChild(spriteContainer);
        
    spriteContainer.10;
        
    spriteContainer.50;
        
    spriteContainer.name "spriteContainer";
    }

    function 
    splitImage(e:Event null)
    {
        
    removeEventListener(Event.ADDED_TO_STAGEsplitImage);

        
    myImage myLoader.content;

        var 
    splitWidth:Number Math.ceil(myImage.width splitAmount);
        var 
    splitHeight:Number Math.ceil(myImage.height splitAmount);

        var 
    newCopyImage:BitmapData = new BitmapData(myImage.width,myImage.height,true,0x00FFFFFF);
        
    newCopyImage.draw(myImage);

        for (var 
    0splitAmounti++)
        {
            for (var 
    0splitAmountj++)
            {
                var 
    newImageData:BitmapData = new BitmapData(splitWidth,splitHeight,true,0x00FFFFFF);
                
    newImageData.copyPixels(newCopyImage,new Rectangle(splitWidth,splitHeight,splitWidth,splitHeight), new Point(0,0));

                var 
    newImageDataPiece:Bitmap = new Bitmap(newImageData);
                
    newImageDataPiece.name "newImageDataPiece" i;

                var 
    smallBit:Sprite = new Sprite();

                
    with (smallBit)
                {
                    
    //filters = [dropShadow1];
                    
    addEventListener(MouseEvent.MOUSE_DOWN,doDrag);
                    
    addEventListener(MouseEvent.MOUSE_UP,noDrag);
                    
    mouseEnabled true;
                    
    buttonMode true;
                }
                
    smallBit.addChild(newImageDataPiece);
                
    spriteContainer.addChild(smallBit);

                
    newImageDataPiece.= (* (splitWidth 1));// plus 1 for showing split
                
    newImageDataPiece.= (* (splitHeight 1));// plus 1 for showing split

                
    thePieces.push(smallBit);
            }
        }
        
    trace("thePieces:"thePieces.length);
    }

    function 
    doDrag(e:MouseEvent)
    {
        
    e.currentTarget.parent.addChild(e.currentTarget.parent.getChildByName(e.currentTarget.name));
        
    e.currentTarget.startDrag();
        
    trace(e.currentTarget.parent.name);
    }

    function 
    noDrag(e:MouseEvent)
    {
        
    e.currentTarget.stopDrag();
    }

    function 
    doExplode(e:Event null)
    {
        
    with (myOrignalImage)
        {
            
    alpha 0.25;
            
    removeEventListener(MouseEvent.CLICKsplitImage);
            
    mouseEnabled false;
            
    buttonMode false;
        }
        
    // move the thePieces;
        
    for (var i:int thePieces.length 1> -1i--)
        {
            
    pieceBit thePieces[i];
            var 
    xTween:Tween = new Tween(pieceBit,"x",None.easeNone,pieceBit.x,Math.random() * 1000 500,1,true);
            var 
    yTween:Tween = new Tween(pieceBit,"y",None.easeNone,pieceBit.y,Math.random() * 1000 500,1,true);
            
    //var SXTween:Tween = new Tween(pieceBit,"scaleX",None.easeNone,pieceBit.scaleX,Math.random() * 3,1,true);
            //var SYTween:Tween = new Tween(pieceBit,"scaleY",None.easeNone,pieceBit.scaleY,Math.random() * 3,1,true);
            
    var fadeTween:Tween = new Tween(pieceBit,"alpha",None.easeNone,1,0,1,true);
            
    fadeTween.addEventListener(TweenEvent.MOTION_FINISH,endTween);
            
    thePieces.splice(i,1);

            if (
    thePieces.length 1)
            {
                
    //trace("thePieces:", thePieces.length);
                
    trace("Cleared all thePieces!");
                
    thePieces = new Array();
            }
        }
    }

    function 
    endTween(e:TweenEvent):void
    {
        
    with (myOrignalImage)
        {
            
    //addEventListener(MouseEvent.CLICK, splitImage);
            //mouseEnabled = true;
            //buttonMode = true;
            
    alpha 1;
        }
        while (
    numChildren 1)
        {
            
    //reAnimate();
            
    removeChildAt(1);
        }
    }
    // *** working on this; make happen again basically
    function reAnimate(e:Event null)
    {
        
    myLoader.load(new URLRequest("marley.png"));

    hi I can already make class files, i just want to make work here first, thanks, but i like the advice

    never heard camel case afore, I like look of capital start, but I change, thanks
    Last edited by Terrencing; 01-29-2014 at 12:23 PM.

  11. #11
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Hello moot,

    Here is files with class, is it ok!!

    where is better to use private or internal funtion ??
    Attached Files Attached Files

  12. #12
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    Hello

    You were correct about the drag and addchild, i thought it did the same as swap depths , but I use setChildIndex instead, trhanks

  13. #13
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    I'm not advanced in oop at all so you'll quickly get into stuff I can't answer off the top of my head.

    Name your main class Main.

    In general when you're starting doing classes or oop, just make everything private. Learn events and event dispatching. If a class/object needs to communicate to parent, dispatch event, referencing parent in oop is against the rules.

    OOP is "way" to handle data and program. You'll see that nobody is actually doing totally pure OOP, you use as much OOP as you can until it becomes inefficient.

    Use visible to hide/view things that are re-used instead of adding and removing.

    Here is an overview of oop video that I like - it's for programmers. The guy doing it might be an oop dark lord: https://www.youtube.com/watch?v=lbXsrHGhBAU
    Last edited by moot; 01-30-2014 at 10:10 AM.

  14. #14
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,780
    Hi Terrence,

    Here it is for you online, I sent the files too.
    Still needs some tweaking around though.

    http://fruitbeard.net/as3/

  15. #15
    Senior Member
    Join Date
    Aug 2012
    Posts
    115
    thanf you Fruits I like and am making it for me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center