Elements with ID's within symbol instances

This has likely been covered previously so I apologize in advance for repeating the topic. For context, I learned to program as an ActionScript / Flash developer, and one issue I’m trying to resolve in Hype is that Symbols containing elements with unique ID’s cause a conflict when more than one instance exists on the stage. I realize the Flash microcosm != the HTML5 DOM… apples and oranges.

Is there a way to target child ID’s within symbol instances that doesn’t involve using class names in lieu of ID’s and iterating through elements, or worse yet - duplicating the same symbol multiple times in the resource library and assigning unique ID’s to each symbol’s internal elements manually? I’ve searched for JavaScript Hype extensions to do this but haven’t found any to address this.

1 Like

Afaik, no.

Any change to a child in a symbol instance changes all of them with the same change. Doing it outside of hypes runtime with JS may stop things working as expected.

I know you say without using class names but that would be the best thing to use.

You can give each symbol instance parent a unique ID in the inspector. That works.

You then give the symbol children class names. Remember that will propagate to all instances.

Then with JS you can target the symbol and it’s children directly.

    	var someID2_instance_Element = hypeDocument.getSymbolInstanceById('someID2').element()
	 
	
	var someID2_Red_child =  someID2_instance_Element.querySelector('.redEL')
 
	hypeDocument.setElementProperty(someID2_Red_child , 'opacity', 0.5, 1.0, 'easeinout')

symboleInsatnce.hype.zip (20.6 KB)

5 Likes

@MarkHunte Ok, I’ll go with that solution - thank you!

1 Like