Change the cursor on specific parts of the Flexbook/Flipbook

Hey experts!

Today I've learn how to work with the cursors in Flex from various forums and webpages, but I have a problem including it in my project.

I'm doing a customize version of Ely Greenfield' Flexbook (with the Landscape Zoomer) and I'd like the cursor to change when the cursor is over specific components of the book:

- When the cursor is over the pages of the book, I'd like to make it a magnifying glass (not sure it's the right word in english) so the user knows he can zoom it.
- When the cursor goes over the edge of the page (I've set a "activeGrabArea: edge;" and "edgeAndCornerSize="150""), it should becomes a little hand.
- Anywhere else on the screen should be normal cursor.

You can check the code I've done so far, but before going further, I'd like to know if what I want to do is realistic and possible? If yes, anyone knows how to determine where the cursor is and how to call the function to change it?

Thanks a lot for the help and have a nice day.
Frank



/* So far, I have done the code to handle only 1 type of cursor, the Zoom*/
import mx.managers.CursorManager;
 
// Embed the SWF that will be used as 
// the custom cursor.        
[Embed(source="assets/zoomCursor.png")]
 
private var cursor:Class;
private var cursorID:int;  
 
private function init():void{
  /* This is the function called on the creationComplete event */
  /* The book is the Flexbook object */
  book.addEventListener(MouseEvent.MOUSE_OVER,showCursor);
  book.addEventListener(MouseEvent.MOUSE_OUT,removeCursor);
}
 
private function showCursor(e:MouseEvent):void{
  cursorID = CursorManager.setCursor(cursor,2,-5,-5);
}
          	
private function removeCursor(e:MouseEvent):void{
  CursorManager.removeCursor(cursorID);
}
 
<qs:FlexBook id="book" 
y="47" 
width="600" 
top="40" 
height="400" 
horizontalCenter="0" 
animateCurrentPageIndex="true"
showCornerTease="true"
edgeAndCornerSize="150"
itemSize="halfPage"
mouseOver="showCursor()"
mouseOut="removeCursor()">

Open in new window

flexbook.txt
The_Kingpin08Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
julianopolitoConnect With a Mentor Commented:
I did it, but needed to change flexbook source code and it is a little tricky. I'll send you the updated flexbook class, so you replace there. I added 2 new events: inEdge and outEdge. Also added a public property "turnedCorner".
Here I'm doing the cursor change to busyCursor cause I do not have a zoom cursor image at hand.

Then add the methods below to your app, and call them in the flexbook component

inEdge="inEdgeHandler()"
outEdge="outEdgeHandler()"
public  function inEdgeHandler():void{		
	if(book.turnedCorner != 0){
		CursorManager.setBusyCursor();	
	}					
}
public  function outEdgeHandler():void{		
	CursorManager.removeBusyCursor();
}

Open in new window

FlexBook.as.txt
0
 
julianopolitoCommented:
yes, possible. i'll take a look, maybe we need to change the source code.
0
 
The_Kingpin08Author Commented:
Fantastic, I wuuld never have been able to do this all alone.
Thanks a lot for the great help!
0
All Courses

From novice to tech pro — start learning today.