The code included in the example is twofold:
I am taking advantage of a wonderful feature of HYPE: the fact it automatically generates a unique ID for every element.
The DOM throws errors if any IDs are duplicated, and if there are multiple layouts as in the default export, reusing elements will create duplicated ids. Currently there is no way to tell other than that it is a nested div, what is a element generated by a symbol. I am hacking the Class Attribute in DOM to generate symbol reference names. The code then collects all references to the symbols on the stage, and they correspond to the layering in each nested timeline, so I can look at my stage, and easily figure out where elements are in the arrays for each class-symbol reference.
It is a bit more work up front but it is seamless in it’s integration across layouts.
This way we are able to swap in and out symbols that have similar elements, but can be customized in design to fit the various layouts for responsive design.
To add a symbol name to the DOM see the symbolLoad() function. It is placed on the top of the onSymbolLoad for each symbol.
This code was built with the underlying assumption that HYPE Documents should be built with nested symbols and that timelines are specific only to elements within a given symbol.
I have created a HYPE_Controller that combines the Get/Set methods of the instances(elements) on the stage along with all of the timeline manipulation of the symbol instances, using less verbiage so that ultimately the code is more compact when the author is making complex examples.
I have an extended version of the HYPE_Controller that integrates hitTest as well built on jQuery, but for the purposes of the basic Controller, there is no jQuery involved in this project.
hypeTemplate_BD.zip (165.4 KB)