drawing rounded rectangles in actionscript

[delfick]

hello

i have a project where i need to create some buttons....

the buttons are rounded rectangles with text in them

and the number of buttons can change, so i'm going to make the buttons appear on stage dynamically, so that the roundedness of the buttons changes accordingly (i've found that just resizing rounded rectangles makes the rounded corners a little weird)....


so i've got so far as i've made the button and that's all good...

but i need to find a way of making the text bold on hover

and the background a different colour on press

and i'm new to drawing with actionscript...

thnx for help

(what i have so far is attached)...

[a_modified_dog]

does this approach help ??

this.createEmptyMovieClip("btn_", this.getNextHighestDepth());
btn_._x = 100;
btn_._y = 100;

var textFormat:TextFormat = new TextFormat();
		textFormat.font = "Verdana";
		textFormat.size = 12;
		textFormat.color = 0x13A4A4;
		textFormat.align = "center";
		textFormat.bold = true;

var textFormat2:TextFormat = new TextFormat();
	textFormat2.color = 0x000000;

drawRoundedRectangle(btn_, 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");
function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number, btn_text:String):Void {
	with (target_mc) {
		beginFill(fillColor, fillAlpha);
		moveTo(cornerRadius, 0);
		//line style
		lineStyle(2, 0x000000);
		//start drawing
		lineTo(boxWidth-cornerRadius, 0);
		curveTo(boxWidth, 0, boxWidth, cornerRadius);
		lineTo(boxWidth, cornerRadius);
		lineTo(boxWidth, boxHeight-cornerRadius);
		curveTo(boxWidth, boxHeight, boxWidth-cornerRadius, boxHeight);
		lineTo(boxWidth-cornerRadius, boxHeight);
		lineTo(cornerRadius, boxHeight);
		curveTo(0, boxHeight, 0, boxHeight-cornerRadius);
		lineTo(0, boxHeight-cornerRadius);
		lineTo(0, cornerRadius);
		curveTo(0, 0, cornerRadius, 0);
		lineTo(cornerRadius, 0);
		endFill();
		//create the text
		this.createTextField("label_txt", 1000, target_mc._x, target_mc._y+(boxHeight-18.5)/2, boxWidth, 18.5);
		label_txt.setNewTextFormat(textFormat);
		label_txt.selectable = false;
		label_txt.text = btn_text;
	}
}

btn_.onMouseMove = function() {
	if (this.hitTest(_root._xmouse, _root._ymouse)) {
_root.label_txt.setTextFormat(textFormat2);
	} else {
_root.label_txt.setTextFormat(textFormat);
drawRoundedRectangle(btn_, 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");
}
};

btn_.onMouseDown = function() {
	if (this.hitTest(_root._xmouse, _root._ymouse)) {
drawRoundedRectangle(btn_, 160.8, 27.3, 5, 0x13A4A4, 26, "hello");
	}
};

[delfick]

ok then, that makes sense

how do i clear the rectangle before i draw it again ???

thnx

[a_modified_dog]

btn_.clear();

[delfick]

thnx

now, to the next step, creating more than one at a time..... using

for (i=0; i<3; i++) {
	this.createEmptyMovieClip("btn_"+i, this.getNextHighestDepth());
	this["btn_"+i]._x = 100;
	this["btn_"+i]._y = 100+40*i;
	var textFormat:TextFormat = new TextFormat();
	textFormat.font = "Verdana";
	textFormat.size = 12;
	textFormat.color = 0x13A4A4;
	textFormat.align = "center";
	textFormat.bold = true;
	var textFormat2:TextFormat = new TextFormat();
	textFormat2.color = 0x000000;
	drawRoundedRectangle("btn_"+i, 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");
	function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number, btn_text:String):Void {
		with (target_mc) {
			clear();
			beginFill(fillColor, fillAlpha);
			moveTo(cornerRadius, 0);
			//line style
			lineStyle(2, 0x000000);
			//start drawing
			lineTo(boxWidth-cornerRadius, 0);
			curveTo(boxWidth, 0, boxWidth, cornerRadius);
			lineTo(boxWidth, cornerRadius);
			lineTo(boxWidth, boxHeight-cornerRadius);
			curveTo(boxWidth, boxHeight, boxWidth-cornerRadius, boxHeight);
			lineTo(boxWidth-cornerRadius, boxHeight);
			lineTo(cornerRadius, boxHeight);
			curveTo(0, boxHeight, 0, boxHeight-cornerRadius);
			lineTo(0, boxHeight-cornerRadius);
			lineTo(0, cornerRadius);
			curveTo(0, 0, cornerRadius, 0);
			lineTo(cornerRadius, 0);
			endFill();
			//create the text
			this.createTextField("label_txt", 1000, target_mc._x, target_mc._y+(boxHeight-18.5)/2, boxWidth, 18.5);
			label_txt.setNewTextFormat(textFormat);
			label_txt.selectable = false;
			label_txt.text = btn_text;
		}
	}
	this["btn_"+i].onMouseMove = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse)) {
			_root.label_txt.setTextFormat(textFormat2);
		}
	};
	this["btn_"+i].onMouseDown = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse)) {
			drawRoundedRectangle(btn_, 160.8, 27.3, 5, 0x13A4A4, 26, "hello");
			_root.label_txt.setTextFormat(textFormat2);
		}
	};
}

gives me this

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 13: Type mismatch.
drawRoundedRectangle("btn_"+i, 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");

Total ActionScript Errors: 1 Reported Errors: 1

......

any ideas why ??

[a_modified_dog]

try -

drawRoundedRectangle(this["btn_"+i], 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");

[delfick]

try -

drawRoundedRectangle(this["btn_"+i], 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");

i tried that before....

if i do that, the buttons won't appear....

[a_modified_dog]

hmm .. a slightly different approach here, is this suitable for your project ?

arr = ["Hello0","Hello1","Hello2"];

var textFormat:TextFormat = new TextFormat();
	textFormat.font = "Verdana";
	textFormat.size = 12;
	textFormat.color = 0x13A4A4;
	textFormat.align = "center";
	textFormat.bold = true;
var textFormat2:TextFormat = new TextFormat();
	textFormat2.color = 0x000000;

function init(){ 
for (i=0; i<3; i++) {
	this.createEmptyMovieClip("btn_"+i, this.getNextHighestDepth());
	ref = this["btn_"+i];
	ref._x = 100;
	ref._y = 100+40*i;
	ref.createTextField("label_txt", 1, 30, i+5, 100, 18.5);
	ref.label_txt.setNewTextFormat(textFormat);
	ref.label_txt.selectable = false;
	ref.label_txt.text = arr[i];
drawRoundedRectangle(ref, 160.8, 27.3, 5, 0xFFFFFF, 100);
}
};

init();

	function drawRoundedRectangle(
target_mc:MovieClip, boxWidth:Number, boxHeight:Number, 
cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
		with (target_mc) {
			clear();
			beginFill(fillColor, fillAlpha);
			moveTo(cornerRadius, 0);
			//line style
			lineStyle(2, 0x000000);
			//start drawing
			lineTo(boxWidth-cornerRadius, 0);
			curveTo(boxWidth, 0, boxWidth, cornerRadius);
			lineTo(boxWidth, cornerRadius);
			lineTo(boxWidth, boxHeight-cornerRadius);
			curveTo(boxWidth, boxHeight, boxWidth-cornerRadius, boxHeight);
			lineTo(boxWidth-cornerRadius, boxHeight);
			lineTo(cornerRadius, boxHeight);
			curveTo(0, boxHeight, 0, boxHeight-cornerRadius);
			lineTo(0, boxHeight-cornerRadius);
			lineTo(0, cornerRadius);
			curveTo(0, 0, cornerRadius, 0);
			lineTo(cornerRadius, 0);
			endFill();
				}
buttons(target_mc);
	};

function buttons(ref){
ref.onRollOver = function() {
 trace("over-"+ref);
this.label_txt.setTextFormat(textFormat2);
};

ref.onRelease = function() {
this.label_txt.setTextFormat(textFormat2);
 trace("release-"+ref);
init();
};
};

[delfick]

much better

now i have exactly what i want with

arr = ["Hello0", "Hello1", "Hello2"];
_global.blue = 1287332;
_global.white = 16777215;
_global.black = 000000;
_global.btn_selected = 9;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Verdana";
textFormat.size = 12;
textFormat.align = "center";
textFormat.bold = true;
function setsubstring(thisvar) {
	string = thisvar;
	var nameString:String = new String(string);
	var subString:String = new String(nameString.substr(-1, 1));
	_root.substringresult = subString;
}
for (i=0; i<arr.length; i++) {
	this.createEmptyMovieClip("btn_"+i, this.getNextHighestDepth());
	ref = this["btn_"+i];
	ref._x = 100;
	ref._y = 100+40*i;
	ref.createTextField("label_txt", 1, 30, i+5, 100, 18.5);
}
//creates the movieclips
function init(num, back_colour, back_alpha, text_colour) {
	ref = this["btn_"+num];
	drawRoundedRectangle(movieclip, 160.8, 27.3, 5, back_colour, back_alpha);
	drawRoundedRectangle(ref, 160.8, 27.3, 5, back_colour, back_alpha);
	ref.label_txt.textColor = text_colour;
	ref.label_txt.setNewTextFormat(textFormat);
	ref.label_txt.selectable = false;
	ref.label_txt.text = arr[num];
}
for (i=0; i<arr.length; i++) {
	init(i, _global.white, 26, _global.blue);
}
function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
	with (target_mc) {
		clear();
		beginFill(fillColor, fillAlpha);
		moveTo(cornerRadius, 0);
		//line style
		lineStyle(2, 0x000000);
		//start drawing
		lineTo(boxWidth-cornerRadius, 0);
		curveTo(boxWidth, 0, boxWidth, cornerRadius);
		lineTo(boxWidth, cornerRadius);
		lineTo(boxWidth, boxHeight-cornerRadius);
		curveTo(boxWidth, boxHeight, boxWidth-cornerRadius, boxHeight);
		lineTo(boxWidth-cornerRadius, boxHeight);
		lineTo(cornerRadius, boxHeight);
		curveTo(0, boxHeight, 0, boxHeight-cornerRadius);
		lineTo(0, boxHeight-cornerRadius);
		lineTo(0, cornerRadius);
		curveTo(0, 0, cornerRadius, 0);
		lineTo(cornerRadius, 0);
		endFill();
	}
	target_mc.onRollOver = function() {
		_root.setsubstring(this);
		btn_roll(_root.substringresult);
	};
	target_mc.onRelease = function() {
		_root.setsubstring(this);
		btn_press(_root.substringresult);
	};
	target_mc.onRollOut = function() {
		_root.setsubstring(this);
		btn_rollout(_root.substringresult);
	};
}
function btn_roll(ref) {
	for (i=0; i<=arr.length; i++) {
		if (i == _global.btn_selected) {
			init(i, _global.blue, 26, _global.black);
		} else if (i == ref) {
			init(i, _global.white, 26, _global.black);
		} else {
			init(i, _global.white, 26, _global.blue);
		}
	}
}
function btn_press(ref) {
	_global.btn_selected = ref;
	for (i=0; i<=arr.length; i++) {
		if (i == ref) {
			init(i, _global.blue, 26, _global.black);
		} else {
			init(i, _global.white, 100, _global.blue);
		}
	}
}
function btn_rollout(ref) {
	for (i=0; i<=arr.length; i++) {
		if (i == _global.btn_selected) {
			init(i, _global.blue, 26, _global.black);
		} else {
			init(i, _global.white, 26, _global.blue);
		}
	}
}

the only problem is i keep getting a lot of

Error: A 'with' action failed because the specified object did not exist.

and i can't figure out why..

thnx for your help

[delfick]

anyone have any ideas why ??

[a_modified_dog]

I can only suggest that you use List Variables and check if
all objects are created and all getter/setter events are set.

a " 'with' action failed " error is usually an indicator of incorrectly
set objects

[delfick]

sorry, but are you able to explain how to do this please ??

whilst my knowledge of actionscript is expanding, it is still relatively small :P

thnx

[delfick]

ahhh, here we go, i realised why....i had two drawRoundedRectangles in the init function and further down under the onRoll, onRelease and onOver functions i hade for(i=0; i<=array.length;i++) instead of only i<array.length....

arr = ["Hello0", "Hello1", "Hello2"];
_global.blue = 1287332;
_global.white = 16777215;
_global.black = 000000;
_global.btn_selected = 9;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Verdana";
textFormat.size = 12;
textFormat.align = "center";
textFormat.bold = true;
function setsubstring(thisvar) {
	string = thisvar;
	var nameString:String = new String(string);
	var subString:String = new String(nameString.substr(-1, 1));
	_root.substringresult = subString;
}
for (i=0; i<arr.length; i++) {
	this.createEmptyMovieClip("btn_"+i, this.getNextHighestDepth());
	ref = this["btn_"+i];
	ref._x = 100;
	ref._y = 100+40*i;
	ref.createTextField("label_txt", 1, 30, i+5, 100, 18.5);
}
//creates the movieclips
function init(num, back_colour, back_alpha, text_colour) {
	ref = this["btn_"+num];
	drawRoundedRectangle(ref, 160.8, 27.3, 5, back_colour, back_alpha);
	ref.label_txt.textColor = text_colour;
	ref.label_txt.setNewTextFormat(textFormat);
	ref.label_txt.selectable = false;
	ref.label_txt.text = arr[num];
}
for (i=0; i<arr.length; i++) {
	init(i, _global.white, 26, _global.blue);
}
function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
	with (target_mc) {
		clear();
		beginFill(fillColor, fillAlpha);
		moveTo(cornerRadius, 0);
		//line style
		lineStyle(2, 0x000000);
		//start drawing
		lineTo(boxWidth-cornerRadius, 0);
		curveTo(boxWidth, 0, boxWidth, cornerRadius);
		lineTo(boxWidth, cornerRadius);
		lineTo(boxWidth, boxHeight-cornerRadius);
		curveTo(boxWidth, boxHeight, boxWidth-cornerRadius, boxHeight);
		lineTo(boxWidth-cornerRadius, boxHeight);
		lineTo(cornerRadius, boxHeight);
		curveTo(0, boxHeight, 0, boxHeight-cornerRadius);
		lineTo(0, boxHeight-cornerRadius);
		lineTo(0, cornerRadius);
		curveTo(0, 0, cornerRadius, 0);
		lineTo(cornerRadius, 0);
		endFill();
	}
	target_mc.onRollOver = function() {
		_root.setsubstring(this);
		btn_roll(_root.substringresult);
	};
	target_mc.onRelease = function() {
		_root.setsubstring(this);
		btn_press(_root.substringresult);
	};
	target_mc.onRollOut = function() {
		_root.setsubstring(this);
		btn_rollout(_root.substringresult);
	};
}
function btn_roll(ref) {
	for (i=0; i<arr.length; i++) {
		if (i == _global.btn_selected) {
			init(i, _global.blue, 26, _global.black);
		} else if (i == ref) {
			init(i, _global.white, 26, _global.black);
		} else {
			init(i, _global.white, 26, _global.blue);
		}
	}
}
function btn_press(ref) {
	_global.btn_selected = ref;
	for (i=0; i<arr.length; i++) {
		if (i == ref) {
			init(i, _global.blue, 26, _global.black);
		} else {
			init(i, _global.white, 100, _global.blue);
		}
	}
}
function btn_rollout(ref) {
	for (i=0; i<arr.length; i++) {
		if (i == _global.btn_selected) {
			init(i, _global.blue, 26, _global.black);
		} else {
			init(i, _global.white, 26, _global.blue);
		}
	}
}

well, that problem is fixed

though i still want to know about this list variable thing .....are you still able to help me please with that ??

thnx, your help is greatly appreciated

[a_modified_dog]

ketboard shortcuts
CTRL / Enter - to Test Movie
from Test Movie - CTRL / ALT / V to open List Variables

[delfick]

ok then

thnx

[delfick]

ok then, next problem

i want to load the names for the buttons via an externel file (i.e. xml file)...

the problem is i have absolutely no idea what i'm doing

can someone explain to me how to first create the xml file (so that for each button it has two pieces of information, the name of the button, and the name of a txt file that button will load when pressed)....

and then be able to create an array from this xml file that the dynamically created buttons will then use to create, position and resize themselves to...

thnx for help

(oh, ye, here's my latest version of the dynamic buttons, i changed it a little http://delfick.storage.googlepages.c...oncreation.txt (designed for 800x600 stage)...

[a_modified_dog]

as the original question is resolved, please start a new thread
( prolly get some good answers by posting this to the xml forum )

[delfick]

ok then, will do

[delfick]

ok then, will do

k then, done http://board.flashkit.com/board/show...42#post3853842

[delfick]

ok then, next step....

is it possible to animate the drawing of the buttons ??

mainly fade effects

and animated resizing...

i know how to do it to an actual thing, for example, say i make this function

function animove (plugin, finaly, finalx, animated, speed, action, alpha) {
    if (action == "move") {
        if (animated == "no") {
            plugin._x = finalx;
            plugin._y = finaly;
        } else {
            if (Math.abs(plugin._x - finalx) > 1 || Math.abs(plugin._y - finaly)>1) {
                //Move towards target
                plugin._x += (finalx - plugin._x)*speed;
                plugin._y += (finaly - plugin._y)*speed;
            } else {
                plugin._x = finalx;
                plugin._y = finaly;
            }
        }
    }
    if (action == "resize") {
        if (animated == "no") {
            plugin._width = finalx;
            plugin._height = finaly;
        } else{
            if (Math.abs(plugin._width - finalx) > 1 || Math.abs(plugin._height - finaly)>1) {
                //resize
                plugin._width += (finalx - plugin._width)*speed;
                plugin._height += (finaly - plugin._height)*speed;
            } else {
                plugin._width = finalx;
                plugin._height = finaly;
            }
        }
    }
    if (action == "fade") {
        if (animated == "no") {
            plugin._alpha = alpha;
        } else {
            if (Math.abs(plugin._alpha - alpha) > 1) {
                //fade
                plugin._alpha += (alpha - plugin._alpha)*speed;
            } else {
                plugin._alpha = alpha;
            }
        }
    }
}

then in a movieclip i'd put this

onClipEvent (enterFrame) {
    //{plugin, finaly, finalx, animated, speed, action, alpha)
    _root.animove(this, 20, 40, "yes", 0.01, "resize");
}

but is there a way to do that to stuff drawn onto the stage via actionscript ??
without drawing it into a movieclip and then just apply the effects to that movieclip (if i did that then i'd have movieclips nested in movieclips, no real disaster really, but i'm curious if it could be done

thnx