9 Replies Latest reply on Jan 30, 2017 2:01 PM by resdesign

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

    Topu252

      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.