Crazy Guy
drawing rounded rectangles in actionscript
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)...
Attached Files
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_dog
does this approach help ??
Code:
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");
}
};
Crazy Guy
ok then, that makes sense
how do i clear the rectangle before i draw it again ???
thnx
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_dog
Crazy Guy
thnx
now, to the next step, creating more than one at a time..... using
Code:
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 ??
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_dog
try -
drawRoundedRectangle(this["btn_"+i], 160.8, 27.3, 5, 0xFFFFFF, 100, "hello");
Crazy Guy
Originally Posted by
a_modified_dog
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....
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_dog
hmm .. a slightly different approach here, is this suitable for your project ?
Code:
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();
};
};
Crazy Guy
much better
now i have exactly what i want with
Code:
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
Last edited by delfick; 04-14-2007 at 10:35 PM .
if you find some of my ideas weird, look at my
avatar for the reason
Crazy Guy
anyone have any ideas why ??
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_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
Crazy Guy
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
if you find some of my ideas weird, look at my
avatar for the reason
Crazy Guy
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....
Code:
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
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_dog
ketboard shortcuts
CTRL / Enter - to Test Movie
from Test Movie - CTRL / ALT / V to open List Variables
Crazy Guy
ok then
thnx
if you find some of my ideas weird, look at my
avatar for the reason
Crazy Guy
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)...
if you find some of my ideas weird, look at my
avatar for the reason
FK'n_dog
as the original question is resolved, please start a new thread
( prolly get some good answers by posting this to the xml forum )
Crazy Guy
if you find some of my ideas weird, look at my
avatar for the reason
Crazy Guy
Originally Posted by
delfick
ok then, will do
k then, done http://board.flashkit.com/board/show...42#post3853842
if you find some of my ideas weird, look at my
avatar for the reason
Crazy Guy
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
Code:
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
Code:
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
if you find some of my ideas weird, look at my
avatar for the reason
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Click Here to Expand Forum to Full Width