How to create a canvas that will fill the entire screen in Flex?

Hey experts!

I have a Flex application and I've create a couple functions that let me drag an image on MouseDown in a specific container, and release it on MouseUp.

My problem comes on the MouseUp listener; if I click the image and drag it while the cursor stays in the container, there's no problem. However, if I start to drag the image, exit the container with the cursor and release the click, as soon as I put the cursor back in the container, the image is still movable without clicking.

To correct this, I've decided to create a container (canvas or box) that would fill the entire browser; then, I'm gonna add the listener for the MouseUp action on this fullsize container, instead of putting it on the canvas containing the image.

I've try this, and it works perfectly. The only problem I have is that the box I created doesn't fill up the entire screen; there's like a 10px margin all around the container. I set it's padding and margin to 0, put it's height/width to 100% but it's still doesn't take the entire browser.

I'd like to know if it's possible to do this or if it's a Flex restriction or something else.

Thanks a lot for your help. Have a nice day
Frank

//
// This function is used to zoom out of the current image.
//
public function zoomOut(target:*):void {
	if(_zoomBtnLevel == 2) {			  
	/* The image already has the focus, so we must reset the scale and position of the book */
	book.height = bookHeight;
	book.width = bookWidth;
	book.x = bookXPos;
	book.y = bookYPos;
			      
	/* We reset the cursor to normal mode */
	book.useHandCursor=false;
	book.buttonMode=false;
	book.mouseChildren=true;
				  
	/* Stop the drag so the user can turn the pages again */
	book.removeEventListener(MouseEvent.MOUSE_DOWN,dragOn);
	book.removeEventListener(MouseEvent.MOUSE_UP,dragOff);
				  
	/* We control the maximum number of time a user can zoom out the page */
	_zoomBtnLevel = _zoomBtnLevel - 1;
	}
}
 
//
// This is the fonction that is called when we zoomIn an image.
// It resizes the image, change the cursor to the little hand, and handles the drag/drop.
//
public function zoomIn(target:*):void {
	if(_zoomBtnLevel == 1) {
	/* The image gets the focus, so we must change the scale of the page */
	book.height = realImageHeight;
	book.width = (realImageWidth * 2);
				  
	/* The cursor becomes the little hand */
	book.useHandCursor=true;
	book.buttonMode=true;
	book.mouseChildren=true;
				  
	/* The user can now drag the page around to see the whole content */
	book.addEventListener(MouseEvent.MOUSE_DOWN,dragOn);
				  
	/* We control the maximum number of time a user can zoom in the page */
	_zoomBtnLevel += _zoomBtnLevel;
	}
}
 
//
// This is the function that will allow to drag the object once the user MouseDown.
// bookContainer is a mx:HBox I create that keeps the book object. It has a width of 100% and a height of 600.
//
public function dragOn( event : MouseEvent ):void {
	/* Determine the canvas limits when grabing/moving the zoomed page */
	var realX:int = - (book.width - bookContainer.width);
	var realY:int = - (book.height - bookContainer.height);
				
	/* The bounds of the active canvas */
	var activeCanvas:Rectangle = new Rectangle(realX, realY, realImageWidth, realImageHeight);
	
	/* Allow to drag the object */
	book.startDrag(false, activeCanvas);
	
	/* This is where we check if the user has MouseUp the object. Note that it can be anywhere on the screen,
	   that's why I add the event on the mainCanvas container, which I'm trying to make 100% of the browser size */
	mainCanvas.addEventListener(MouseEvent.MOUSE_UP,dragOff);
}
 
//
// This function stops the drag.
//
public function dragOff( event : MouseEvent ):void {
	book.stopDrag();
}
 
 
/* This is the container that should fill up the entire screen. It is directly inside the application tag */
<mx:Box width="100%" height="100%" id="mainCanvas" styleName="mainCanvas">
...
...
...
</mx:Box>
 
 
/* This is the style applied to the container inside the CSS */
.mainCanvas {
padding-left: 0;
padding-right: 0;	
padding-top: 0;
padding-bottom: 0;
	
margin-left: 0;
margin-right: 0;	
margin-top: 0;
margin-bottom: 0;
}

Select allOpen in new window