Symbols bounding-box blocks what is underneath

I'm having the same issue, I have an outline of a state and I'm putting objects in there that I want to click on. 

You cannot avoid this. There will always be bounding boxes for png files.

There are 2 ways to deal with this:

• using SVG files with edgeCommons
• using the html map tags

see sample by Joel posted several months ago for html map here:

https://app.box.com/s/v9kctp1ueqzn6ikcnygp

I have an SVG file of the shape of NY which I made in illustrator.  The outer area is black and the area in NYS is empty with no background.  Objects behind this graphic show through. 

I've loaded EC by adding this code to the compositionReady section:

yepnope({

          load: "http://cdn.edgecommons.org/an/1.1.2/js/min/EdgeCommons.js",

     complete: function() {

                    // Enable SVG access

                    EC.SVG.accessSVG(sym.$("nysmap")).done(

                              function(svgDocument){

                    });

          }

});

I've added the svg file called nysmap to the stage, but I still can't click anything in the hollow area of the image.  Is there anything else I need to do that I'm missing? 

You should have all of it in the SVG files. If your elements are path in the SVG file then you will be able to select them. Hoeever I believe what you have in the middle should be above your background layer.

Check out the video tutorial here:

https://www.youtube.com/watch?v=4UEB6gaLKuw

You will need to add the interactive code in the SVG file and add the script front edgeCommons.

The objects change around within the edge animation.  I don't think that will work for me.  Take a look:

http://www.nysm.nysed.gov/mapinteractive/testmap.html

The central items can be brought forward, but the items along the edge, hmm.  I don't know how I can make those work. 

Let me think if I can figure out a way to make it work.

have you thought about having transparent buttons on top of everything and then call the necessary squares as needed?

YES!  That's what I'm going to do.  I need to dynamically change the value of the link based on the timeline of the square sprite object.  I know how to create an if/then based on the playhead of the timeline, could I also set a variable depending on what item was being displayed? 

Something like this? 

var grid1test = sym.getVariable("grid1");

if (myVariable = "ladybug") {

sym.getComposition().getStage().getSymbol("object_details").$("ladybug").play();

}

else {

}

Let me know how that works!

Ok, this works!! 

In my case the objects in the transparent areas changed, so any transparent link would have to be dynamic. 

Within the objects timeline I set a variable depending on what is being displayed:

sym.setVariable("grid1Value", "ladybug");

Create a transparent layer over the top of the png mask directly over the image of the ladybug.

I create a click state with this logic: 

var grid1Test = sym.getSymbol("grid1").getVariable("grid1Value");

if (grid1Test == "ladybug") {

sym.getComposition().getStage().getSymbol("object_details").getSymbol("ladybug").play(0);

}

else {

}

My layers are heavily nested so you may not need to define them as thoroughly as I have. 

When the object changes to another object in the timeline, I just reset the variable in the timeline:

sym.setVariable("grid1Value", "coyote");

If there were several variables for this block it might be best to create a switch statement rather than an if/then. 

Pretty awesome! Great job on this challenging task.