Dynamically change symbol position

Hi there,

  I would suggest having the fade in / fade out animation inside of the symbol, with labels for both fade in and fade out. Then, you would reference those labels in the button's mouseover and mouseout actions in the Open Actions panel using code like this:

mouseover

sym.getSymbol("mySymbol").play("fadeIn");

mouseout

sym.getSymbol("mySymbol").playReverse("fadeOut");

  Just make sure that you put the fadeOut label at the end of the fade in animation, that way you don't have to animate a fade out as well, you can just play fade in backwards to get the same effect! : )

  I am attaching a sample file for your reference, just click the image below to download it. Let me know if you need additional help or clarification. I hope this helps!

You can use css to place your popup.

Below is a sample file to place randomly, an element, a symbol already on the stage, and a symbol loaded on the stage.

https://www.box.com/s/qkx7wxjry1uwhzudt95j

I tried your link, but I get a message that the owner has removed the file. Do you have another link?

Here are 2 different randomizing that might help you.

randomize position of symbols.zip - Box

random gopher.zip - Box

Thank you very much. The css() did not work for me maybe because I had scaled the symbol?

I was able to dynamically change the text with text():

sym.getSymbol('fraction1').$('numerator').text('15'); //this works

yet this does not work

var n = "30";

sym.getSymbol('fraction1').$('numerator').css("left", n);

Some css properties require the its unit option px, pt, % and so on.

In your case add px after 30 like this

          var n="30px";

Darrell

Thank you, Darrell, I tried that "30px". I also tried 30 + "px". Neither worked

Have you tried just doing

var n = 30;

without any quotation marks?

It should work.

You must be doing something different. If I put the above in a click event on a button it works fine!

How are you implementing it?

Darrell

Sample Preview:  http://www.heathrowe.com/edge/cssmove/

Click green button element numerator moves 30 pixels to the right, based on

          var n = "30";

          sym.getSymbol('fraction1').$('numerator').css("left", n);

Download: http://www.heathrowe.com/edge/cssmove/cssmove.zip

I have a symbol named "fraction1" that lives in another symbol I named "Topic1". It contains a text element named "numerator". I want "numerator" to move to the right 30 pixels on creationComplete of "Topic1".

From creationComplete of "Topic1" I added the lines :

var n = "30";

sym.getSymbol('fraction1').$('numerator').css("left", n);

I have a symbol named "fraction1" that lives in another symbol I named "Topic1". "fraction1" contains a text element named "numerator". I want "numerator" to move to the right 30 pixels on creationComplete of "Topic1".

From creationComplete of "Topic1" I added the lines :

var n = "30";

sym.getSymbol('fraction1').$('numerator').css("left", n);

Darrell,

It works on the click of a button, but not on creationComplete

On the creationComplete event of a symbol the css() function does not work. This might be a bug in Edge Animate

"On the creationComplete event of a symbol the css() function does not work." No. It runs fine.

Your sentence means (i assume) you are using Chrome, isn't it?

I'm using Safari

So i am testing with Safari too (v 7.0.6).

Proof that: CSS properties runs using the creationComplete panels: creationComplete css.zip - Box

Your problem comes from another css property: position, display, margin, float...

I don't see your file.

Thank you, Joel,

You're right some css properties do work but for some reason moving the object with the "left" property does not work. I was talking about moving an element 30 pixels to the right. What doesn't work is

sym.getSymbol("fraction").$("den").css("left", 30);

or

sym.getSymbol("fraction").$("den").css("left", "30px");

This line does not work. Try it

Do you know of an alternative?