Solved

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

Posted on 2009-06-28
2
672 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
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 how to how to record live broadcast.

762 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

21 Experts available now in Live!

Get 1:1 Help Now