[RESOLVED] Painting Program Key Press Variables Help

**rysky** · 12-01-2010, 07:18 PM

Hello, I'm currently working on a few small paint programs designed to emulate certain famous painters. I'm using a pretty basic AS2 painting program and simply manipulating it to my needs, but have run into a few problems that trial and error have not been able to fix.

For two of the programs I would like the up and down arrows of the keyboard to change the size of the brush, which is currently set by the variable ranWidth (one of the other programs uses random widths for the brush).

For one of the programs, the left and right arrows will increase or decrease the paint opacity.

One of the programs will be a pointillism style drawing program, so instead of drawing a line as it does currently, I'm trying to have it draw a series of dots, without having to click down every time.

Third, my color selection right now changes randomly each time the user clicks down. This works fine for some of the programs, but others it really is neccesary to choose a color. I've tried creating buttons with on release functions that would change the color variable but havn't got them to work properly.

I know its a bit of a list but I think most of the coding is fairly simple, I'm just new to actionscript and trying to learn the ropes. I've used keys to change items before but am not having any luck. Any help for one or all of the items would be greatly appreciated.

Here is my basic script for one of the painting programs. This one simply draws lines in different colors at random sizes.

Actionscript Code:

painting = createEmptyMovieClip('painting',1);

theBrush = new Object ();
theBrush.onMouseDown = function() {
    isPainting = true;
    painting.moveTo(_xmouse,_ymouse);
    painting.lineTo(_xmouse+1,_ymouse+1);
    color = Math.round( Math.random()*0xFFFFFF );
}

theBrush.onMouseMove = function(){
    if(isPainting){
        painting.lineTo(_xmouse,_ymouse);
    }
}

theBrush.onMouseUp = function(){
    isPainting = false;
}
Mouse.addListener(theBrush);

painting.onEnterFrame = function(){
    ranWidth = Math.round((Math.random() * 25)+5);
    painting.lineStyle(ranWidth,color,100);
}

**dawsonk** · 12-01-2010, 07:43 PM

code for up/down arrows to change width of brush

Code:

painting = createEmptyMovieClip('painting', 1);
theBrush = new Object();
theBrush.onMouseDown = function() {
	isPainting = true;
	painting.moveTo(_xmouse,_ymouse);
	painting.lineTo(_xmouse + 1,_ymouse + 1);
	color = Math.round(Math.random() * 0xFFFFFF);
};
theBrush.onMouseMove = function() {
	if (isPainting) {
		painting.lineTo(_xmouse,_ymouse);
	}

};
theBrush.onMouseUp = function() {
	isPainting = false;
};
var ranWidth = 5;
var maxWidth = 50;
theBrush.onKeyDown = function() {
	if (Key.isDown(Key.UP)) {
		(++ranWidth > maxWidth) ? ranWidth = maxWidth : null;
	}
	if (Key.isDown(Key.DOWN)) {
		(--ranWidth < 1) ? ranWidth = 1 : null;
	}
};

Key.addListener(theBrush);
Mouse.addListener(theBrush);
painting.onEnterFrame = function() {
	painting.lineStyle(ranWidth,color,100);
};

**rysky** · 12-01-2010, 08:12 PM

Thanks dawsonk, that worked perfectly! I was also able to modify it to do the code for the opacity change! Sweetness. Now I just need the dots really. Color selection would be a plus.

**dawsonk** · 12-02-2010, 12:19 PM

Needs Flash player 8 or higher...

This will do the dots and color selection...

For the palette, need to place a bitmap in the library, export linkage set to "libraryBitmapPaletteColors".

Code:

import flash.display.BitmapData;

var ranWidth = 5;
var opacVal = 100;
var maxWidth = 50;
var color = 0xCCCCCC;

var painting = createEmptyMovieClip('painting', 1);
var linkageId = "libraryBitmapPaletteColors";
var myBitmapData = BitmapData.loadBitmap(linkageId);
//trace(myBitmapData instanceof BitmapData); // true

var palette = this.createEmptyMovieClip("palette", this.getNextHighestDepth());
palette.attachBitmap(myBitmapData,this.getNextHighestDepth());
palette._x = 10;
palette._y = 10;

var chip = this.createEmptyMovieClip("chip", this.getNextHighestDepth());
var bitmapData:BitmapData = new BitmapData(10, 10, false, color);
chip.attachBitmap(bitmapData,1);

theBrush = new Object();
theBrush.cX = 0;
theBrush.cY = 0;

theBrush.onMouseDown = function() {
	if (!palette.hitTest(_xmouse, _ymouse, false)) {
		isPainting = true;
		painting.lineStyle(ranWidth,color,opacVal);
		painting.moveTo(_xmouse,_ymouse);
		painting.lineTo(_xmouse + 1,_ymouse + 1);
		this.cX = _xmouse;
		this.cY = _ymouse;
	} else {
		color = myBitmapData.getPixel(palette._xmouse, palette._ymouse);
		bitmapData = new BitmapData(10, 10, false, color);
		chip.attachBitmap(bitmapData,1);
	}
};

theBrush.onMouseMove = function() {
	if (isPainting) {
		if (Math.sqrt(((this.cX - _xmouse) * (this.cX - _xmouse)) + ((this.cY - _ymouse) * (this.cY - _ymouse))) > ranWidth) {
			painting.moveTo(_xmouse,_ymouse);
			painting.lineTo(_xmouse + 1,_ymouse + 1);
			this.cX = _xmouse;
			this.cY = _ymouse;
		}
	}
};

theBrush.onMouseUp = function() {
	isPainting = false;
};

theBrush.onKeyDown = function() {
	if (Key.isDown(Key.UP)) {
		(++ranWidth > maxWidth) ? ranWidth = maxWidth : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.DOWN)) {
		(--ranWidth < 1) ? ranWidth = 1 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.RIGHT)) {
		(++opacVal > 100) ? opacVal = 100 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.LEFT)) {
		(--opacVal < 10) ? opacVal = 10 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
};

Key.addListener(theBrush);
Mouse.addListener(theBrush);

**rysky** · 12-06-2010, 03:22 PM

Thanks dawsonk, works great. If I can bother you for one more, is it possible to make it so when someone draws a line it creates a straight line either vertical or horizontal depending on which way they draw?

**dawsonk** · 12-06-2010, 06:57 PM

Are you asking for something like, Press the 'shift' key to constrain the direction?

Code:

import flash.display.BitmapData;

var ranWidth = 5;
var opacVal = 100;
var maxWidth = 50;
var color = 0xCCCCCC;
var isShifted = false;

var painting = createEmptyMovieClip('painting', 1);
var linkageId = "libraryBitmapPaletteColors";
var myBitmapData = BitmapData.loadBitmap(linkageId);
//trace(myBitmapData instanceof BitmapData); // true

var palette = this.createEmptyMovieClip("palette", this.getNextHighestDepth());
palette.attachBitmap(myBitmapData,this.getNextHighestDepth());
palette._x = 10;
palette._y = 10;

var chip = this.createEmptyMovieClip("chip", this.getNextHighestDepth());
var bitmapData:BitmapData = new BitmapData(10, 10, false, color);
chip.attachBitmap(bitmapData,1);

theBrush = new Object();
theBrush.cX = 0;
theBrush.cY = 0;
theBrush.dir = null;

theBrush.onMouseDown = function() {
	if (!palette.hitTest(_xmouse, _ymouse, false)) {
		isPainting = true;
		painting.lineStyle(ranWidth,color,opacVal);
		painting.moveTo(_xmouse,_ymouse);
		painting.lineTo(_xmouse + 1,_ymouse + 1);
		this.cX = _xmouse;
		this.cY = _ymouse;
	} else {
		color = myBitmapData.getPixel(palette._xmouse, palette._ymouse);
		bitmapData = new BitmapData(10, 10, false, color);
		chip.attachBitmap(bitmapData,1);
	}
};

theBrush.onMouseMove = function() {
	if (isPainting) {
		var diffX = this.cX - _xmouse;
		var diffY = this.cY - _ymouse;
		if (Math.sqrt((diffX * diffX) + (diffY * diffY)) > ranWidth) {
			if (!isShifted) {
				painting.moveTo(_xmouse,_ymouse);
				painting.lineTo(_xmouse + 1,_ymouse + 1);
				this.cX = _xmouse;
				this.cY = _ymouse;
			} else {
				if (this.dir == null) {
					if (Math.abs(diffX) > Math.abs(diffY)) {
						this.dir = 0;
					} else {
						this.dir = 1;
					}
				}
				if (this.dir == 0) {
					painting.moveTo(_xmouse,this.cY);
					painting.lineTo(_xmouse + 1,this.cY + 1);
					this.cX = _xmouse;
				} else {
					painting.moveTo(this.cX,_ymouse);
					painting.lineTo(this.cX + 1,_ymouse + 1);
					this.cY = _ymouse;
				}
			}
		}
	}
};

theBrush.onMouseUp = function() {
	isPainting = false;
};
theBrush.onKeyUp = function() {
	if (!Key.isDown(Key.SHIFT)) {
		isShifted = false;
		theBrush.dir = null;
	}
};
theBrush.onKeyDown = function() {
	if (Key.isDown(Key.SHIFT)) {
		isShifted = true;
	}
	if (Key.isDown(Key.UP)) {
		(++ranWidth > maxWidth) ? ranWidth = maxWidth : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.DOWN)) {
		(--ranWidth < 1) ? ranWidth = 1 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.RIGHT)) {
		(++opacVal > 100) ? opacVal = 100 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.LEFT)) {
		(--opacVal < 10) ? opacVal = 10 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
};

Key.addListener(theBrush);
Mouse.addListener(theBrush);

**rysky** · 12-06-2010, 07:56 PM

Not exactly what I was thinking but works great none the less. I've been trying to look at the code and edit some things as the program with straight lines will not use dots. The earlier code was much simpler and I'm afraid I'm a bit lost now. What do I need to delete to change this most recent code to a block brush instead of a rounded one?

One last thing and I'm done i swear. I appreciate your help very much. What about increasing the brush size depending on how long the mouse is held down, then reverts back to normal on mouse up? This is with a rounded brush. No need for straight lines.

**dawsonk** · 12-07-2010, 07:50 PM

Code:

import flash.display.BitmapData;

var ranWidth = 5;
var opacVal = 100;
var maxWidth = 50;
var color = 0xCCCCCC;
var isShifted = false;
var newWidth = ranWidth;

var painting = createEmptyMovieClip('painting', 1);
var linkageId = "libraryBitmapPaletteColors";
var myBitmapData = BitmapData.loadBitmap(linkageId);
//trace(myBitmapData instanceof BitmapData); // true

var palette = this.createEmptyMovieClip("palette", this.getNextHighestDepth());
palette.attachBitmap(myBitmapData,this.getNextHighestDepth());
palette._x = 10;
palette._y = 10;

var chip = this.createEmptyMovieClip("chip", this.getNextHighestDepth());
var bitmapData:BitmapData = new BitmapData(10, 10, false, color);
chip.attachBitmap(bitmapData,1);

theBrush = new Object();
theBrush.cX = 0;
theBrush.cY = 0;
theBrush.dir = null;

theBrush.onMouseDown = function() {
	if (!palette.hitTest(_xmouse, _ymouse, false)) {
		isPainting = true;
		painting.lineStyle(ranWidth,color,opacVal);
		painting.moveTo(_xmouse,_ymouse);
		painting.lineTo(_xmouse + 1,_ymouse + 1);
		this.cX = _xmouse;
		this.cY = _ymouse;
		newWidth = ranWidth;
	} else {
		color = myBitmapData.getPixel(palette._xmouse, palette._ymouse);
		bitmapData = new BitmapData(10, 10, false, color);
		chip.attachBitmap(bitmapData,1);
	}
};

theBrush.onMouseMove = function() {
	if (isPainting) {
		var diffX = this.cX - _xmouse;
		var diffY = this.cY - _ymouse;
		//if (Math.sqrt((diffX * diffX) + (diffY * diffY)) > ranWidth) {
		if (!isShifted) {
			//painting.moveTo(_xmouse,_ymouse);
			newWidth += 0.2;
			painting.lineStyle(newWidth,color,opacVal);
			painting.lineTo(_xmouse + 1,_ymouse + 1);
			this.cX = _xmouse;
			this.cY = _ymouse;
		} else {
			if (this.dir == null) {
				if (Math.abs(diffX) > Math.abs(diffY)) {
					this.dir = 0;
				} else {
					this.dir = 1;
				}
			}
			if (this.dir == 0) {
				//painting.moveTo(_xmouse,this.cY);
				painting.lineStyle(ranWidth,color,opacVal);
				painting.lineTo(_xmouse + 1,this.cY + 1);
				this.cX = _xmouse;
			} else {
				//painting.moveTo(this.cX,_ymouse);
				painting.lineStyle(ranWidth,color,opacVal);
				painting.lineTo(this.cX + 1,_ymouse + 1);
				this.cY = _ymouse;
			}
		}
		//}
	}
};

theBrush.onMouseUp = function() {
	isPainting = false;
};
theBrush.onKeyUp = function() {
	if (!Key.isDown(Key.SHIFT)) {
		isShifted = false;
		theBrush.dir = null;
	}
};
theBrush.onKeyDown = function() {
	if (Key.isDown(Key.SHIFT)) {
		isShifted = true;
	}
	if (Key.isDown(Key.UP)) {
		(++ranWidth > maxWidth) ? ranWidth = maxWidth : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.DOWN)) {
		(--ranWidth < 1) ? ranWidth = 1 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.RIGHT)) {
		(++opacVal > 100) ? opacVal = 100 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
	if (Key.isDown(Key.LEFT)) {
		(--opacVal < 10) ? opacVal = 10 : null;
		painting.lineStyle(ranWidth,color,opacVal);
	}
};

Key.addListener(theBrush);
Mouse.addListener(theBrush);

**rysky** · 12-07-2010, 09:30 PM

a little tweaking and that worked perfect. thanks!

what about changing the brush to a square brush instead of rounded for the last code before this one (first instance with shift button down). Ive already edited it to draw lines again instead of dots but i need the brush to be square.

**dawsonk** · 12-08-2010, 09:57 AM

Code:

painting.lineStyle(ranWidth,color,opacVal, true, "none", "square");

**rysky** · 12-08-2010, 03:53 PM

thanks, i was forgetting the add those other two variables.

when i paint though the square is rotated like 90 degrees so it looks like a diamond. any way to fix this?

Thread: [RESOLVED] Painting Program Key Press Variables Help

Thread Tools

Display

[RESOLVED] Painting Program Key Press Variables Help

Posting Permissions