# ActionScript 2.0 - Cropping an uploaded photo with a circl

**URL:** <https://forum.kirupa.com/t/actionscript-2-0-cropping-an-uploaded-photo-with-a-circl/287892>\
**Category:** flash\
**Created:** [May 7, 2009, 3:11pm UTC](https://forum.kirupa.com/t/actionscript-2-0-cropping-an-uploaded-photo-with-a-circl/287892 "2009-05-07T15:11:23Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![eclare329](https://avatars.discourse-cdn.com/v4/letter/e/7993a0/32.png) [@eclare329](https://forum.kirupa.com/u/eclare329)\
**Post date:** [May 7, 2009, 3:11pm UTC](https://forum.kirupa.com/t/actionscript-2-0-cropping-an-uploaded-photo-with-a-circl/287892/1 "2009-05-07T15:11:23Z")

</div>

I’m working on a project that involves uploading a photo and then directing the user to crop their face - similar to JibJab. I have a great .php and Flash code but it crops in a square.

\_global.max\_w = image.\_x + image.\_width;  
\_global.max\_h = image.\_y + image.\_height;  
\_global.start\_w = image.\_x  
\_global.start\_h = image.\_y  
\_global.cropFile = “imageCrop.php”  
k = new Object();  
k.onMouseDown = function(){  
// the Resizer  
if(\_xmouse \>= start\_w && \_ymouse \>= start\_h && \_xmouse \<= max\_w && \_ymouse \<= max\_h){  
this.box = createBox(\_xmouse,\_ymouse,1);  
timerID = setInterval(resizeBox,1,this.box)  
}  
}  
k.onMouseUp = function(){  
if(!timerID){  
return;  
}  
clearInterval(timerID);  
this.\_oldMouseDown = this.onMouseDown  
this.\_oldMouseup = this.onMouseUp  
this.onMouseDown = undefined;  
this.onMouseUp = undefined;  
addSnaps(this.box,this.box)  
}  
Mouse.addListener(k);

function createBox(x,y,d){  
\_root.createEmptyMovieClip(‘resizer’,d);  
resizer.\_x = x  
resizer.\_y = y  
return resizer;  
}

function resizeBox(b){  
var w = \_xmouse-b.\_x  
var h = \_ymouse-b.\_y  
/_if(w+b.\_x \> max\_w) w = max\_w-b.\_x  
if(h+b.\_y \> max\_h) h = max\_h-b.\_y  
if(w+b.\_x \< start\_w) w = start\_w-b.\_x  
if(h+b.\_y \< start\_h) h = start\_h-b.\_y_/  
adjustBox(b,w,h);  
}

function adjustBox(b,w,h){  
if(w+b.\_x \> max\_w) w = max\_w-b.\_x  
if(h+b.\_y \> max\_h) h = max\_h-b.\_y  
if(w+b.\_x \< start\_w) w = start\_w-b.\_x  
if(h+b.\_y \< start\_h) h = start\_h-b.\_y  
with(b){  
clear();  
lineStyle(0,0xFFFFFF,100);  
beginFill(0x000000,30);  
moveTo(0,0);  
lineTo(w,0);  
lineTo(w,h);  
lineTo(0,h);  
lineTo(0,0);  
endFill();  
}  
cropping.text = "coords: " + b.\_x + ", " + b.\_y;  
cropping.text += "  
size: " + w + ", " + h;  
}

function addSnaps(b,res){  
var bound = b.getBounds(this);  
for(var a = 0; a \< 4; a++){  
this[‘box’+a] = createQuad(“box”+a, a+2, 7, 7,\_root);  
this[‘box’+a].\_x = (a%3==0 ? bound.xMin : bound.xMax) - this[‘box’+a].\_width/2  
this[‘box’+a].\_y = (a\>1 ? bound.yMax : bound.yMin) - this[‘box’+a].\_height/2  
this[‘box’+a].onPress = function(){  
this.startDrag(false,start\_w,start\_h,max\_w-this.\_width,max\_h-this.\_height)  
this.pressed = true  
}  
this[‘box’+a].onRelease = function(){  
stopDrag();  
this.pressed = false;  
}  
timerID2 = setInterval(checkBox,1,res);  
}  
}

function createQuad(nome,d,w,h,where){  
where.createEmptyMovieClip(nome,d);  
with(where[nome]){  
lineStyle(0,0xFFFFFF,100);  
beginFill(0x000000,0)  
moveTo(0,0);  
lineTo(w,0);  
lineTo(w,h);  
lineTo(0,h);  
lineTo(0,0);  
endFill();  
}  
return where[nome]  
}

function checkBox(res){  
if(!box0.pressed){  
box0.\_y = box1.\_y  
box0.\_x = box3.\_x  
}  
if(!box1.pressed){  
box1.\_y = box0.\_y  
box1.\_x = box2.\_x  
}  
if(!box2.pressed){  
box2.\_y = box3.\_y  
box2.\_x = box1.\_x  
}  
if(!box3.pressed){  
box3.\_y = box2.\_y  
box3.\_x = box0.\_x  
}  
res.\_x = box0.\_x+box0.\_width/2  
res.\_y = box0.\_y+box0.\_height/2  
adjustBox(res,((box1.\_x-(box1.\_width/2))-box0.\_x+(box0.\_width/2)), (box3.\_y-(box3.\_height/2))-box0.\_y+(box0.\_height/2))  
}

// ----------------------  
// KEYB LISTENER  
// ----------------------  
keyb = new Object();  
keyb.onKeyUp = function(){  
if(Key.getAscii()==32 && resizer != undefined){  
applyMask();  
}  
}  
Key.addListener(keyb);

function applyMask(){  
var bound = resizer.getBounds(\_root);  
for(var a = 0; a \< 4; a++){  
this[‘box’+a].unloadMovie();  
}  
image.setMask(resizer);  
\_root.attachMovie(‘saveBtn’,‘saveBtn’,10);  
saveBtn.\_x = bound.xMax - saveBtn.\_width/2  
saveBtn.\_y = bound.yMax + saveBtn.\_height/2  
saveBtn.onRelease = function(){  
myVars = new LoadVars();  
myVars.file = \_root.phppassed;  
myVars.x1 = bound.xMin  
myVars.y1 = bound.yMin  
myVars.x2 = bound.xMax - bound.xMin  
myVars.y2 = bound.yMax - bound.yMin  
myVars.send(\_global.cropFile,"\_blank",“POST”);  
saveBtn.enabled = false;  
}  
}

I’ve been trying to make it a circle for a week. I’m familiar with Actionscript but not fluent so I’m a bit shaky on discovering what is needed. Any help would be wonderful.