27 April 2010

Add padding or a solid background to a Movie Clip with Flash Actionscript AS2

I wrote this little function today to add HTML style padding to a Flash MovieClip. It took a lot of testing to get working but it's actually very straight forward and quite a handy one to have in your function arsenal.

It basically draws a rectangle behind all content in the movie clip and repositions the clip on the Stage. It can also be used to add a solid background behind a given MovieClip. Implementation is a synch:

Please see right hand panel before copying >

/*PARAMS:
mc - the MovieClip to pad
xpad/ypad - size of horizontal/vertical padding in pixels
opacity - optionally make the background invisible or semi transparent
color - optionally change the background colour in hex format 0xFFFFFF
*/
addPadding=function (mc,xpad,ypad,color,opacity){
 if(xpad<0 && ypad>0){return(0)}
 if(color==undefined){color=0xFFFFFF;}
 if(opacity==undefined){opacity=100;}
 
 h=mc._height+ypad
 w=mc._width+xpad
 mc.beginFill(color,opacity);
 mc.lineTo(-xpad, -ypad);
 mc.lineTo(-xpad, h);
 mc.lineTo(w,h);
 mc.lineTo(w, -ypad);
 mc.lineTo(-xpad, -ypad);
 //reposition MC to compensate for new dimensions:
 mc._x+=xpad;
 mc._y+=ypad;
}
//sample usage:
addPadding(myMoveClipName,20,20);

Note: This only works if the content inside the MovieClip is positioned  in the positive axis. In other words the registration point 0,0 must be the very top left of the MovieClip

3 comments:

amitabhaghosh197 said...

Hi, Cron,
This is very much helpful.
But I have used your tips in my flash project and it is working fine. I just altered your data for my benefit like this:

/*PARAMS:
t_mc - the MovieClip to pad
xpad/ypad - size of horizontal/vertical padding in pixels
opacity - optionally make the background invisible or semi transparent
color - optionally change the background colour in hex format 0xFFFFFF
*/
addPadding=function (t_mc,xpad,ypad,color,opacity){
if(xpad<0 && ypad>0){return(0)}
if(color==undefined){color=000000;}
if(opacity==undefined){opacity=10;}

h=t_mc._height+ypad
w=t_mc._width+xpad
t_mc.beginFill(color,opacity);
t_mc.lineTo(-xpad, -ypad);
t_mc.lineTo(-xpad, h);
t_mc.lineTo(w,h);
t_mc.lineTo(w, -ypad);
t_mc.lineTo(-xpad, -ypad);
//reposition MC to compensate for new dimensions:
t_mc._x+=xpad;
t_mc._y+=ypad;
}
//sample usage:
addPadding(t_mc,5,5);

but I have a question to you

I am observing a box in my project for which I have given opacity:0; in the extreme right bottom corner. Why this is happening?

Rida Hashmi said...

These Add padding to a Movie Clip hacks for HTML are always helpful & time saving for front End developers like us. I work at an Seo Agency In Lahore & do both web designing & Search Engine Optimization for the people of Pakistan. Looking forward to see more hacks like these from you in future.

Anonymous said...


광양출장샵
광양출장샵
상주출장샵
진안출장샵
상주출장샵
전북출장샵
전북출장샵


Post a Comment

Cron Design Studio: Dublin based web design & software development