Search code examples
symbolsrolloveradobe-edge

How can I dynamically change the image in an Edge Animate symbol?

I'm working on a site prototype that has many rollover images in the navigation. Each image is unique, but the rollover and rollout code is identical. I'm trying to create a single symbol that can be used for all of the rollovers, but need some help figuring this out, as it will significantly speed up my work.

I think the pseudocode would work like this

  1. Create a symbol that contains a default rollover image.
  2. In the symbol, add the rollover and rollout code. This adjusts transparency from 0 -> 100 and back.
  3. Create instances of the symbol over each item in the nav.
  4. For each instance, set a variable containing the name of the rollover image to be used.
  5. In that symbol instance, get the variable value.
  6. In that symbol instance, use the image name in the variable to replace the default image.

Question: How do I make step 4-6 work? I have 1-3 working smoothly.

Update: I have #6 solved

Images are all managed by the CSS background-image property rather than the old-school <img src=...>. So to set an image for an element, the syntax is:

$(sym.lookupSelector("[ElementName]")).css('background-image', [image]);

And there's a second part, which is getting [image] right.

  1. Use the default relative URL for Edge images: images/[image]
  2. Use standard syntax for CSS background-image: url(images/[image])

P.S. My last dev work was waaaaay back with Director, PHP and ColdFusion. I still get basic principles such as using functions, objects, instances, inheritance etc, but the language has changed. And I have very very little experience with the DOM.

Appendix: How I'm Doing This Manually

  1. There's a background image of the nav showing all of the unselected states

  2. Each item in the nav has a corresponding rollover image, in a series of elements layered on top of nav element. Each rollover has opacity initially set to 0%.

  3. Each image element has rollover, rollout and click triggers. Rollover and rollout triggers are identical for each. There's also a little more code with rollout that provides a quick fade. This means lots of copying identical code. I hate to think about having to change any part of that code.

Solution

  • I came to the same conclusions as yours.

    Steps 4-5 I did this way: when I create the symbol instance I give it a special name, like "button_image1". Then in the code you can check this property doing:

    var symbolElement = sym.getSymbolElement();
var id = symbolElement.attr("id")
var tokens = id.split("_");
var image = tokens[1];

    And set the right image as background.

    You can put this code on the creation_complete event of the symbol.