I have several symbols - all with interactive elements - that need to appear on the same spot on the stage. Currently, they're manually stacked atop one another on the stage and I'm controlling their opacity with buttons. For example, mouseover buttonA and symbolA gets an opacity of 1 while the opacity of the other symbols stay at 0. This works fine as far controlling which symbol the viewer sees but, since symbolA is manually stacked above the other symbols, only symbolA's interactive elements work. Mousing over buttonB gives symbolB an opacity of 1 but none of the buttons within symbolB work because symbolA is still stacked above it even though symbolA has an opacity of 0.
Is there anyway I can control which symbol is on top of the stacking order using code? For example, I'd like to mouseover buttonB, give symbolB an opacity of 1, give the other symbols an opacity of 0 AND move symbolB to the top of the stacking order so the interactive elements within symbolB work. Would like to be able to do this with all the symbols. I'm new at this so any help would be very appreciated. Thank you very much.
Hi there, you can set the css z-index property of a symbol from within Edge like this:
Code on Stage.compositionReady:
// this puts "yourSymbol" at layer 100
Thank you very much, Tim. I started looking up z-index after I read your post and realized that for those who use greensock, you can also tween the z-index: