Solved

How can I load a external image to Bitmapdata object in flash to manipulate the pixels correctly?

Posted on 2009-06-28
2
673 Views
Last Modified: 2013-11-11
Anyone know how to change the following code to make it working, so that I can upload an external image to the bitmap data object in flash. Following code is in the first frame on the root.

Thanks in advance.
Stage.scaleMode = 'noScale';
 

/*

This examples shows how bitmaps can be used to erase or redraw

another bitmap using its alpha channel.

*/
 

var tool; // used to determine the current tool

var toolsize = 40; // size used for tools (width = height)

var tooloffset = toolsize/2; // offset for cursor placement in using tool

var basepoint = new flash.geom.Point(0, 0); // 0,0 point
 

// two bitmaps are used with the image being manipulated

// the first, origbmp contains the original image, unaltered

// the second, drawbmp is the working image seen and

// altered on the screen
 

_root.pic_mc.loadMovie("test.jpg",1);

_root.pic_mc._visible = false;
 

//var origbmp = new flash.display.BitmapData(200, 200, true, 0);

//origbmp.draw(pic_mc);

var origbmp = flash.display.BitmapData.loadBitmap("dragon_bmp");

var drawbmp = new flash.display.BitmapData(origbmp.width, origbmp.height, true, 0);

// drawbmp starts with a copy of the original

drawbmp.draw(origbmp);
 

// two bitmaps are used for the tools, one for erasing

// and one for redrawing, both same size and settings

var erasebmp = new flash.display.BitmapData(toolsize, toolsize, true, 0);

var redrawbmp = erasebmp.clone();
 

// create a movie clip, image_mc, to hold the

// image being erased and redrawn

this.createEmptyMovieClip("image_mc", 1);

// position the image to the left

image_mc._x = 84;
 

// attach the drawing bitmap data object to image_mc

image_mc.attachBitmap(drawbmp, 1);
 
 

// -------------------------------------
 

// TOOLS
 

// select erase tool

erase_btn.onPress = function(){

	

	// tell button movie clips to navigate to appropriate state

	this.gotoAndStop(2);

	redraw_btn.gotoAndStop(1);

	

	// assign tool to equal "erase"

	// this is checked when drawing starts

	tool = "erase";

}
 

// select redraw tool

redraw_btn.onPress = function(){

	

	// tell button movie clips to navigate to appropriate state

	this.gotoAndStop(2);

	erase_btn.gotoAndStop(1);

	

	// assign tool to equal "redraw"

	// this is checked when drawing starts

	tool = "redraw";

}
 

// -------------------------------------
 

// BRUSHES
 

// select circle brush

circle_btn.onPress = function(){

	

	// tell button movie clips to navigate to appropriate state

	this.gotoAndStop(2);

	line_btn.gotoAndStop(1);

	

	// call setToolShape with circle_mc to set

	// the tool(s) shape(s) to a circle

	setToolShape(circle_mc);

}

// select line brush

line_btn.onPress = function(){

	

	// tell button movie clips to navigate to appropriate state

	this.gotoAndStop(2);

	circle_btn.gotoAndStop(1);

	

	// call setToolShape with circle_mc to set

	// the tool(s) shape(s) to a line

	setToolShape(line_mc);

}
 

function setToolShape(shape_mc){

	

	// erasebmp needs to be transparent where it is supposed to

	// be erasing drawbmp.  First fill it with solid white

	erasebmp.fillRect(erasebmp.rectangle, 0xFFFFFFFF);

	// then draw the shape (black) into the bitmap

	erasebmp.draw(shape_mc);

	// copyChannel is used to convert the shape of the tool

	// just added into erasebmp into its alpha channel

	erasebmp.copyChannel(erasebmp, erasebmp.rectangle, basepoint, 1, 8);
 

	// redrawbmp needs to be solid where it redraws drawbmp

	// fill redrawbmp with invisible black (0x00000000) 

	redrawbmp.fillRect(redrawbmp.rectangle, 0);

	// add the shape (solid color)

	redrawbmp.draw(shape_mc);

}
 

// -------------------------------------
 

// WORKING WITH IMAGE
 

// pressing image to erase or redraw

image_mc.onPress = function(){

	

	// depending on selected tool, assign onMouseMove event handler

	if (tool == "erase") this.onMouseMove = useEraserMouseMove;

	else if (tool == "redraw") this.onMouseMove = useRedrawMouseMove;

	

	// initiate onMouseMove handler to work with onPress

	this.onMouseMove();

}
 

// releasing after erase or redraw

image_mc.onRelease = image_mc.onReleaseOutside = function(){

	

	// remove onMouseMove handler

	delete this.onMouseMove;

}
 

// onMouseMove event handler for erasing

function useEraserMouseMove(){

	

	// devise an offset based on the mouse's

	// position in image_mc and tooloffset

	var offset = new flash.geom.Point(image_mc._xmouse - tooloffset, image_mc._ymouse - tooloffset);

	

	// devise a drawing rectangle the size of the

	// the drawing tools at the offset's location

	var drawRect = new flash.geom.Rectangle(offset.x, offset.y, toolsize, toolsize);

	

	// next, copy pixels from the drawbmp back onto itself

	// (makes for no change) but use erasebmp as the alphaBitmap

	// this will add the alpha channel information from erasebmp

	// into drawbmp erasing pixels from drawbmp in the shape of erasebmp

	drawbmp.copyPixels(drawbmp, drawRect, offset, erasebmp, basepoint, false);

	

	// update after each mouse movement

	updateAfterEvent();

}
 

// onMouseMove event handler for redrawing

function useRedrawMouseMove(){

	

	// devise an offset based on the mouse's

	// position in image_mc and tooloffset

	var offset = new flash.geom.Point(image_mc._xmouse - tooloffset, image_mc._ymouse - tooloffset);

	

	// devise a drawing rectangle the size of the

	// the drawing tools at the offset's location

	var drawRect = new flash.geom.Rectangle(offset.x, offset.y, toolsize, toolsize);

	

	// next, copy pixels from the original bitmap back

	// onto drawbmp to update the image. redrawbmp is

	// used as the alphaBitmap to give the tool shape

	drawbmp.copyPixels(origbmp, drawRect, offset, redrawbmp, basepoint, true);

	

	// update after each mouse movement

	updateAfterEvent();

}
 

// -------------------------------------
 

// initialize

erase_btn.onPress(); // start with erase tool

circle_btn.onPress(); // start with circle brush

Open in new window

0
Comment
Question by:prsr4000
2 Comments
 
LVL 22

Accepted Solution

by:
rascalpants earned 500 total points
ID: 24789076
I think you need to use a solution that utilizes AS 3.0 and the BitmapData class.

basically, you would load in an external image into a movieclip, and then turn that movieclip into a bitmap.

here is a link to the class info...  

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html

you would use the draw() method of that class...


import flash.display.Bitmap;
import flash.display.BitmapData;

var clip:MovieClip = this.theMovieClipInstanceName;

var bMapData:BitmapData = new BitmapData(80, 20);
bMapData.draw( clip );

var bmp:Bitmap = new Bitmap( bMapData );
this.addChild(bmp);



rp
0
 

Author Comment

by:prsr4000
ID: 24793251
That was partially helpful. I tried loading the image in a movie clip and assigned the bitmapdata to the new obj. But it was not working as the loading was done instant.

So I added a time delay in loading with a bytes loaded checking as two different frames and it worked.

Thank you for your time.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now