A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Disintegrate an mc?

  1. #1
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796

    Disintegrate an mc?

    Hey there, does anybody have any routines for creating a pixel-disintegrate effect as seen in golden oldie games like Impossible Mission?

    The ideal function would maybe use Bitmap.filter to make a copy of the mc then run a for loop that would delete pixels bit by bit, and issue a return variable if it's become completely erased.
    Anybody?

  2. #2
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,379
    You could also try doing a threshold test to slowly take all colors from the bitmap and turn them into a transparent color. Also, threshold returns the number of pixels changed, so you just have to wait until thresholdCallReturnValue = bitmapDataWidth * bitmapDataHeight. I've not tested it, but in theory it sounds like it might do what you're thinking.
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  3. #3
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796
    import flash.display.BitmapData;
    import flash.geom.Point;
    var bm:BitmapData = new BitmapData(400, 300, true);
    var cont:MovieClip = _root.createEmptyMovieClip("cont", this.getNextHighestDepth());
    var interval:Number;
    var td:Number = 0;
    var tp:Number = bm.width*bm.height;
    var dissolveSpeed:Number = 800;
    bm.draw(BitmapData.loadBitmap("pic"));
    cont.attachBitmap(bm, this.getNextHighestDepth());
    onMouseDown = function () {
    dissolve(Math.random()*10 | 0);
    };
    function dissolve(randomNum:Number) {
    var newNum:Number = bm.pixelDissolve(bm, bm.rectangle, new Point(0, 0), randomNum, dissolveSpeed, 0);
    clearInterval(interval);
    if (td<tp) {
    interval = setInterval(dissolve, 10, newNum);
    }
    td += dissolveSpeed;
    }

    -Actually does what I require with one small drawback- instead of taking in account of the transparent pixels in the grabbed image file it just loads a bunch of whitespace the size of the bitmapData. Anyone know how this can be avoided?

    p.s. thanks for the threshold tip- i'll try it.

  4. #4
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    maybe create an array based on the bitmap object from your object to apply this effect, e.g

    PHP Code:
    var pixelArray:Array = new Array();
    for (var 
    i:int=0;i<(bitmapData.width*bitmapData.height);i++){
        
    pixelArray[i] = i;
    }
    //now we have 1 array- element for each pixelAspectRatio
    function removePixel(){
        var 
    nr:int pixelArray.splice(random(pixelArray.length),1);//pick 1 random number from the array and remove it from the array- so it wont be used twice
        
    var y:int Math.floor(nr/bitmapData.width)+1;//y coordinate of the pixel
        
    var x:int = (nr+1)-(y*bitmapData.width);
        
    bitmapData.setPixel32(xy,0x00000000);//set pixel translucent

    (I dont think the code will work right away- but I guess you get the idea)

    I remember some similar fancy effect on the C64 in testdrive - but it had some rotation or random pattern only within a certain grid pattern.
    Last edited by renderhjs; 03-02-2008 at 07:59 AM.

  5. #5
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796
    Thanks.
    Actually I think I may have found a working solution. The one problem I have left is how do I grab the mc- (at the frame it's on) create an identical bitmapData image of that frame, delete the original and paste the image at the exact same spot?
    If I can work that one out I'll post the code for FlashKit posterity.

  6. #6
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    well to copy you just use bitmapData.draw(movieCLip);
    no sure anymore where it was but with .bound or something like that you can get a bounding box from any movieClip (like minX,minY,maxX,maxX) and use those to get the rectangluar bitmap crop for your bitmapData. If you draw() then the movieClip into the bitmapData you need to add a Matrix as 2nd parameter as well to get the offset.

  7. #7
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796
    Yeah I tried what you suggested and it did in fact work well in grabbing the bitmap at the correct frame, however I'm still running into problems with positioning it properly and draw doesn't seem to ignore the transparent alpha around the sprite, I'm still getting a big chunky block with the desired image in the middle.
    Will get back on this tomorrow. Thanks for the help so far guys.

  8. #8
    Zombie Coder EvilKris's Avatar
    Join Date
    Jun 2006
    Location
    Fukuoka, Japan.
    Posts
    796

    [resolved]

    Bit of code borrowed from here/bit there, Bob's your auntie.
    Probably not the most efficient routine as it uses the entire stage size for bitmap Data and as a result pixelates the whole thing (though you only ever see the mc dissolve), but works a treat for a 5 second bit of death fx.


    Code:
    //CONTROL USING ARROW KEYS - SHIFT ACTIVATES DISINTEGRATE //FUNCTION
    //JUST PUT AN INSTANCE OF AN MC ON STAGE AND NAME IT 'mouse'
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Matrix;
    import flash.geom.ColorTransform;
    var stageW:Number = 1000; //Stage size
    var stageH:Number = 1000;//Stage width
    
    var myBmp:BitmapData = new BitmapData (stageW, stageH, true, 0x00000000);
    this.createEmptyMovieClip ("bmp", 1);
    this.createEmptyMovieClip ("mc", 2);
    this.mc.attachMovie ("mouse", "mouse", 0);
    mc.mouse._x = 200;
    mc.mouse._y = 350;
    this.bmp.attachBitmap (myBmp, 0);
    var speed:Number = 5;
    var td:Number = 0;
    var tp:Number = myBmp.width*myBmp.height;
    
    var dissolveSpeed:Number = 10000; //scale this number accordingly, extra fast on less than 1000x1000
                                     //stage size
    
    this.onEnterFrame = function () {
    
    	if (Key.isDown(Key.LEFT)) {
    		mc.mouse._x-=speed;
    	} else if (Key.isDown(Key.RIGHT)) {
    		mc.mouse._x-=-speed;
    	}else if (Key.isDown(Key.UP)) {
    		mc.mouse._y-=speed;
    	}else if (Key.isDown(Key.DOWN)) {
    		mc.mouse._y-=-speed;
    	}
    	if (Key.isDown(Key.SHIFT)) {
    			myBmp.draw (mc);
    			removeMovieClip(mc);
    			
    			dissolve(Math.random()*10 | 0);
    			
    	}
    };
    
    function dissolve(randomNum:Number) {
    	
    	var newNum:Number = myBmp.pixelDissolve(myBmp, myBmp.rectangle, new Point(0, 0), randomNum, dissolveSpeed, 0);
    	clearInterval(interval);
    	if (td<tp) {
    		interval = setInterval(dissolve, 10, newNum);
    	}
    	else
    		myBmp.dispose();
    
    		
    	td += dissolveSpeed;
    	
    }

  9. #9
    Senior Member
    Join Date
    Apr 2003
    Location
    Seattle
    Posts
    176

    renewed interest in disintigration effect

    Hello,

    I have gone over EvilKris's code and instructions and tried applying it to a frame on the timeline where an MC named "mouse" sits, however nothing occurs upon testing the movie. I would love to have a jpg inside of an mc disintigrate and this seems to be the answer, yet I'm looking for a little help in applying it...

    Cheers!

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