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.