dynamic border and glow

[Jeff Wheeler]

Hey,

Just a quick question. Is there a way to set the border of a box to be set in actionscript, as well as set a glow property.

I am going to be resizing the box using actionscript so if I have it as an image or in the mc it will be resized and that would be no good.

Cheers,
Jeff:king:

[Jeff Wheeler]

Sorry, I'm really bad at actionscript :mario: :luigi:

[Jeff Wheeler]

Already 20 views but no response, this annoys me alot when this happens. :h: :gm:

[jbum]

There are no built-in properties for such, but you could certainly roll your own using the dynamic drawing routines. e.g.




// some quick & dirty untested code follows (also SLOW as heck...)
//

function drawBox(mc, x, y, w, h, fillColor, borderColor, useFill)
{
mc.moveTo(x,y);
mc.lineStyle(1,borderColor);
if (useFill)
mc.beginFill(fillColor);
mc.lineTo(x+w,y);
mc.lineTo(x+w,y+h);
mc.lineTo(x,y+h);
mc.lineTo(x,y);
if (useFill)
mc.endFill();
}

function InterpolateColor(c1, c2, i, glowThick)
{
var r = (i-1)/glowThick;
var red1 = (c1 >> 16) & 0xFF;
var grn1 = (c1 >> 8) & 0xFF;
var blu1 = (c1) & 0xFF;
var red2 = (c2 >> 16) & 0xFF;
var grn2 = (c2 >> 8) & 0xFF;
var blu2 = (c2) & 0xFF;
var red = red1 + (red2-red1)*r;
var grn = grn21+ (grn2-grn1)*r;
var blu = blu1 + (blu2-blu1)*r;
return (red << 16) | (grn << 8) | blu;
}

function drawBoxWithGlow(mc, x, y, w, h,
fillColor, borderColor,
glowColor1, glowColor2, glowThick)
{
drawBox(mc,x,y,w,h,fillColor,borderColor,true);

// not a great way to achieve a glow, but it should work...
// MUCH faster to use gradients..., or perhaps you could ease-down
// on the alpha...

for (var i = 1; i <= glowThick; ++i) {
// figure out glowColor here...
var glowColor = InterpolateColor(glowColor1, glowColor2, i, glowThick);
drawBox(mc,x-i,y-i,w+2*i,h+2*i,glowColor,0,false);
}
}

[Jeff Wheeler]

I have no clue how to use that and a feeling that it is going to work easily once you tell me.

[jbum]

Well, given some movieclip that you want to draw a frame on, you would do something like:




// in the initialization for the movie

function drawMyFrame()
{
this.clear();
drawBoxWithGlow(this, 0, 0, this.frameWidth, this.frameHeight,
this.frameFillColor, this.frameFrameColor,
this.glowColor1, this.glowColor2, 5);
}


// In your initialization code...
// .. initialize the movie to draw the frame...

mc.onEnterFrame = drawMyFrame;
mc.frameWidth = 200; // whatever size you want here...
mc.frameHeight = 200; // whatever size you want here...
mc.frameFillColor = 0xFF0000; // fill with red
mc.frameFrameColor = 0x00FF00; // frame with green
mc.glowColor1 = 0xFFFF00; // yellow glow
mc.glowColor1 = 0x000000; // fading to black...


Again, I haven't tested this (I'll take a peek at it later when I have some time)....

Having gone thru this exercise, I'm realizing that there is probably no reason for you to be using actionscript at all for what you describe.

If you're trying to prevent a frame from resizing along with a movie, then
put the scaling movie (the resizing one) inside another movie that isn't scaling.

I guess I'm not entirely sure what it *is* you need. :q:

[Jeff Wheeler]

Ok still a bit confused, I've attached a file where I tried to do what you said but I don't think it is quite right and I tried everything I could think of and nothing seemed to work. You can also try your idea of a mc within another mc, didn't quite understand that. :pir:

[jbum]

I'll take a look at your file later tonight ...

[Jeff Wheeler]

ok, thanks

[jbum]

Okay...

LOTS of fixes. After looking at your problem, I realized that what you probably
are after is "How do I have a fixed glow-frame (such as 16-pixels a side) that
doesn't get stretched when I resize the movie.

I found that this is pretty much impossible to avoid, so instead of resizing the
movie (by altering it's _width and _height, I alter an internal variable (fwidth
and fheight) which are used as parameters for drawing the frame. This
way the frame always looks good.

I also modified the frame-drawing function to use gradients. You'll probably
want to tweak it a bit. I moved all your "mc_box" code into the main
frame - it's much easier if all your code resides in one place.

Here's that code. See the attached project file for the whole thing...



function initbox(mc)
{
mc_box.fwidth = 0;
mc_box.fheight = 0;
mc.speed = 4;
mc.width = 100;
mc.height= 100;
mc.xpos = 10;
mc.ypos = 10;
mc.glowColor = 0xFFFF00; // yellow glow
mc.onEnterFrame = drawMyFrame;
}

// build our matrix using the "box" method


function drawBoxWithGlow(mc, x, y, w, h, borderColor,glowColor, gx,gy)
{
var alphas = [75,25,11,0];
var ratios = [0x0,0x44,0x88,0xFF];
var matrix1 = { matrixType:"box", x:x-gx, y:y-gy, w:w+gx*2, h:gy, r:Math.PI*1.5 }
var matrix2 = { matrixType:"box", x:x+w, y:y-gy, w:gx, h:h+gy*2, r:0}
var matrix3 = { matrixType:"box", x:x-gx, y:y+h, w:w+gx*2, h:gy, r:Math.PI*0.5 }
var matrix4 = { matrixType:"box", x:x-gx, y:y-gy, w:gx, h:h+gy*2, r:Math.PI }

var colors = [glowColor,glowColor,glowColor,glowColor];
mc.moveTo(x-gx,y-gy);
mc.beginGradientFill("linear",colors,alphas,ratios,matrix1);
mc.lineTo(x+w+gx,y-gy);
mc.lineTo(x+w,y);
mc.lineTo(x,y);
mc.lineTo(x-gx,y-gy);
mc.endFill();

mc.moveTo(x+w,y);
mc.beginGradientFill("linear",colors,alphas,ratios,matrix2);
mc.lineTo(x+w+gx,y-gy);
mc.lineTo(x+w+gx,y+h+gy);
mc.lineTo(x+w,y+h);
mc.lineTo(x+w,y);
mc.endFill();

mc.moveTo(x+w,y+h);
mc.beginGradientFill("linear",colors,alphas,ratios,matrix3);
mc.lineTo(x+w+gx,y+h+gy);
mc.lineTo(x-gx,y+h+gy);
mc.lineTo(x,y+h);
mc.lineTo(x+w,y+h);
mc.endFill();

mc.moveTo(x,y+h);
mc.beginGradientFill("linear",colors,alphas,ratios,matrix4);
mc.lineTo(x-gx,y+h+gy);
mc.lineTo(x-gx,y-gy);
mc.lineTo(x,y);
mc.lineTo(x,y+h);
mc.endFill();
}

function drawMyFrame()
{
var w = this.width - this.fwidth; // 300
var h = this.height - this.fheight;
var x = this.xpos - this._x;
var y = this.ypos - this._y;

this.fwidth += w/this.speed;
this.fheight += h/this.speed
this._x += x/this.speed;
this._y += y/this.speed;

this.clear();
drawBoxWithGlow(this, 0, 0, this.fwidth, this.fheight,
this.frameFrameColor, this.glowColor, 32,32);
}


initbox(mc_box);

[jbum]

And here's the attached file...