3.4 Key and Mouse listener for enable cropping.
Now that we have showed the image we can enable the listener on the key object to enable image cropping area to appear
// ----------------------
// Mouse Listener
// ----------------------
// what to display in the text area
_info1 = "Press [k] to save portion of image"
_info2 = "Press [Mouse] to apply mask"
_info3 = "Press [SPACE] to save image"
_info = _info1
// define the max area for the cropping tool
function enableCrop(){
_global.max_w = _root.superImage.mymask._x + _root.superImage.mymask._width;
_global.max_h = _root.superImage.mymask._y + _root.superImage.mymask._height;
_global.start_w = _root.superImage.mymask._x
_global.start_h = _root.superImage.mymask._y
}
// disable the cropping tool
function disableCrop(){
_global.start_w = undefined
_global.start_h = undefined
_root.superImage.resizer.removeMovieClip();
_root.box0.removeMovieClip();
_root.box1.removeMovieClip();
_root.box2.removeMovieClip();
_root.box3.removeMovieClip();
delete _root.box;
}
// remove key and mouse listener
// in case they already exist
Mouse.removeListener(_$k);
Key.removeListener(keyb)
disableCrop();
// prepare a new listsner
_$k = new Object();
// on mouse release:
_$k.onMouseUp = function(){
if(_root.box == undefined) return;
_root.box.onEnterFrame = undefined;
// crsate the box for the cropping tool
addSnaps(_root.box,_root.box)
_root.superImage.cont.enabled = true;
_root._info = _root._info3
}
// add the mouse listener
Mouse.addListener(_$k);
// this create just a new movie clip
function createBox(x,y,d){
if(_root.superImage.resizer!=undefined) _root.superImage.resizer.removeMovieClip();
_root.superImage.createEmptyMovieClip('resizer',d);
superImage.resizer._x = x
superImage.resizer._y = y
return superImage.resizer;
}
// this function will adjust the crop area
// following tha mouse movement
function resizeBox(b,force){
var w,h
if(force!=undefined){
w = force-b._x
h = force-b._y
} else {
w = _xmouse-b._x
h = _ymouse-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
if(!(b instanceof MovieClip)) return;
if(b != ""){
with(b){
trace(w)
clear();
lineStyle(0,0xFFFFFF,100);
beginFill(0x000000,30);
moveTo(0,0);
lineTo(w,0);
lineTo(w,h);
lineTo(0,h);
lineTo(0,0);
endFill();
}
}
}
// add the little blox at the cropper corner to enable resize
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;
}
_root.box.onEnterFrame = function(){ _root.checkBox(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){
trace('res:' + 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))
}
// finally, load the cropped imahe
function saveImageCrop(){
var bound = superImage.resizer.getBounds(_root);
myVars = new LoadVars();
myVars.file = imageClip.full_path;
myVars.x1 = bound.xMin - _root.superImage.cont._x
myVars.y1 = bound.yMin - _root.superImage.cont._y
myVars.x2 = (bound.xMax - _root.superImage.cont._x) - (bound.xMin - _root.superImage.cont._x)
myVars.y2 = (bound.yMax - _root.superImage.cont._y) - (bound.yMin - _root.superImage.cont._y)
myVars.send(_root.cropFile,"_blank");
_root._info = _root._info1
}
// ----------------------
// KEYB LISTENER
// ----------------------
keyb = new Object();
keyb.onKeyUp = function(){
if(Key.getCode() == Key.SPACE && _root.box != undefined){
_root.saveImageCrop();
_root.disableCrop();
}
if(Key.getCode() == 75){ // "k"
// start the cropper
if(!_root.box){
_root._info = _root._info2
_root.box = createBox(30,50,1);
_root.resizeBox(_root.box,300);
_root.box.onEnterFrame = function(){ _root.resizeBox(this) }
_root.superImage.cont.enabled = false
}
}
}
Key.addListener(keyb);
disableCrop();
4. Conclusion
I know it's hard to understand this tutorial since I cannot explain all the functions and actions used in the application, but it can't be possible otherwise we would lost our goal: see how to connect and call remote methods using AMFPHP.
I hope that looking at the .fla file you can understand better all the actions. (I try to write clear code there ;) )
In conclusion: AMFPHP it's a great resource for working with flash and PHP since it is a porting of the official macromedia flash remoting under PHP. It's make all our work easier when we would like to communicate throught the server.
download the files used in this tutorial
(p.s. remember to download first the AMFPHP files from: http://www.amfphp.org )
