Jetpack game - Part 3 Circular collision detection
Nov 02

Actionscript 3 - Real bitmap paint.

Actionscript 3 tutorials, Tutorials, Uncategorized Add comments

Hello again. You’ve probably seen these tutorials that shows you how to create a paint program in flash or something like that. But most of them just uses flash’s vector lineTo method, and that’s not such a good way to create a paint program, mostly because it starts to lag pretty much.

So I’ll show how we could do a paint program that uses flash’s own bitmap methods.

First off, create a new ActionScript 3 .fla file, and save it directly as paint.fla somewhere on your computer where you can find it easily.
Then, create a ActionScript file (.as).

Then paste this code into it:

?View Code ACTIONSCRIPT
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
	import flash.geom.Point;
 
	public class paint extends MovieClip {
		var paintStage:BitmapData=new BitmapData(550,400,false,0xFFFFFF);
		var paintDisplay:Bitmap=new Bitmap(paintStage);
		var drawing:Boolean=new Boolean(false);
 
		var vx:Number=new Number(0);
		var vy:Number=new Number(0);
		var len:uint=new uint;
		var i:uint=new uint();
 
		var p0:Point=new Point();
		var p1:Point=new Point();
 
		public function paint() {
			addChild(paintDisplay);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,md);
			stage.addEventListener(MouseEvent.MOUSE_UP,mu);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mm);
		}
		function md(event:MouseEvent) {
			drawing=true;
			p0.x=event.stageX;
			p0.y=event.stageY;
			p1.x=p0.x;
			p1.y=p0.y;
		}
		function mu(event:MouseEvent) {
			drawing=false;
		}
		function mm(event:MouseEvent) {
			if (drawing) {
				p1.x=event.stageX;
				p1.y=event.stageY;
				paintStage.setPixel(event.stageX,event.stageY,0x000000);
				vx=p1.x-p0.x;
				vy=p1.y-p0.y;
				len=Math.sqrt(vx*vx+vy*vy);
				vx/=len;
				vy/=len;
				for (i=0; i<len; i++) {
					paintStage.setPixel(p0.x+(vx*i),p0.y+(vy*i),0x000000);
				}
				p0.x=p1.x;
				p0.y=p1.y;
			}
		}
	}
}

Save it as paint.as in the same directory as the .fla is in. Then go back to the .fla, and open up its settings. The settings should be like this:

Then you can just test it out :)

You could see how the code works yourself. I don’t think anyone actually reads the description of the code anyways.

It should look like this:





Now the movie is a bit resized and it makes the line look broken, but when its in its original size it should be ok.

If you can’t get this to work, you can download the source here.

Share this:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BarraPunto
  • co.mments
  • Fleck
  • Furl
  • feedmelinks
  • Live
  • Spurl
  • StumbleUpon

written by torskmunken \\ tags: , , , , , ,

6 Responses to “Actionscript 3 - Real bitmap paint.”

  1. Joe Says:
    February 2nd, 2009 at 21:11:18

    Hey I have an idea for a tutorial: colors, eraser, a print function and asave function

  2. drClaw Says:
    March 4th, 2009 at 07:27:49

    Thanks for the tutorial! BTW some of us do read the code ;-)

  3. lol Says:
    March 11th, 2009 at 00:07:16

    Its only a green screen lol!

  4. oliv Says:
    April 19th, 2009 at 20:26:04

    what do i do after saving the .as file, need help plz!!

  5. Kristoffer Says:
    May 14th, 2009 at 14:23:46

    Hi, great and quick tut!
    Thanks for it! Was looking aorund for this for a while!

  6. JT Says:
    October 19th, 2009 at 04:49:27

    call me slow, but I’m trying understand what the code is doing. I think I get everything till it starts to find the distance between p0 and p1. but……

    vx/=len;
    vy/=len;
    for (i=0; i<len; i++) {
    paintStage.setPixel(p0.x+(vx*i),p0.y+(vy*i),0×000000);
    }

    Now that I look harder, am I just missing a basic line equation and you are drawing the point along a line and that is to prevent gaps if the mouse was tossed about the stage?

Leave a Reply