Search code examples
javascriptdom-eventsadobe-edge

Create symbol on click at click location

I have an edge animate document where I would like to create/trigger a symbol whenever the user touches anywhere on the stage. I want the center of the symbol to be where their pointer was located on the stage at the time of the click.

I know how to determine the click x,y coordinates using Javascript, but how do I place a symbol in that location?

Solution

  • I did it this way:

    //Create symbol on stage. 
//The number 1 indicates the position in the list 
//of the symbol instances on the stage, 
//like the one you see in the right panel called "Elements".
//Use it to set the z-index (position elements in front or in background).
var myNewSymbol = sym.createChildSymbol("myNewSymbol", "Stage", 1);
var x = e.pageX;
var y = e.pageY;

// I wanted position to be in percentage
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
var xPercent = 100 * x / bodyWidth;
var yPercent = 100 * y / bodyHeight;

//Set the position
myNewSymbol.getSymbolElement().css("position", "absolute");
myNewSymbol.getSymbolElement().css("left", xPercent + "%");
myNewSymbol.getSymbolElement().css("top", yPercent + "%");