Can I use an animated symbol acting like a mouse cursor?

Question

Hi,
I'd like to use an EDGE animated symbol ( a blinking magic wand) as my mouse cursor (hiding the original cursor) that stays on the stage all the time at a certain point in the timeline and when clicked on a hotspot, goes to another point in timeline where the symbol no longer act as a mouse cursor. I used the following code suggested in the following thread by YOSHIOKA Ume
Re: How to I have an animated symbol follow the coordinates of the cursor when clicked?
1:create a symbol named "Symbol_1"
2:add this code on Symbol_1-Timeline.complete.
//delete this instance when timeline complete. sym.deleteSymbol();
3:add this code on document.compositionReady.
//on/off mousemove event handler method
sym.$("Stage")  
.mouseover(function(){    
sym.$("Stage").on("mousemove",draw);  
//create instance of Symbol_1 on stage.
function draw(evt){  
var instance = sym.createChildSymbol("Symbol_1", "Stage");  
instance.getSymbolElement().css({    
position:"absolute",    
top:evt.clientY,    
left:evt.clientX   });
But the problem is, the symbol is being repeated/drawn one after another according to the above code, which I don't want. Changing the cursor using CSS requires a URL of a image file, not a symbol inside EDGE as it seems. How can I get back the normal mouse cursor in another point in the timeline (and go back to the animated symbol mode again if needed?). If I click on another hotspot element on the stage, do I actually click on the attached symbol as a cursor? Or the hotspot?
Also, how can I put a constraint on the cursor so that it stays within a certain rectangular area smaller than the stage?
A suggestion is much appreciated.

Answer 1

Here is a example I had to move a symbol around as a mouse cursor and play different part of the symbol timeline based on user action.
mouseCursor.zip - Google Drive
To constraint the symbol to stage area,check for the x and y values in the event callback function before moving the symbol.
To get back the normal cursor set the css back to default
ex: sym.getSymbol('Stage').getSymbolElement().css({ 'cursor' : 'default'});