Ok. I made some major changes to this.
The main reason is because in the way I keep the selections I use persistent symbols, class names and Javascript.
It makes sense then to do away with the timeline selections and use the info we need any way to make the selection persistent.
A quick break down.
There are two persistent symbols.
face symbol
This hold all the selection of hair, eyes, mouth , head etc.
Each element inside the face symbol has been given two class names.
Example.
Element named Cheveux_8 has the two class names
Cheveux_8 and Cheveux
So later we will can use these class names to id the element we want.
avatar parts selection symbol
This holds all the navigation elements shown on the left.
All clickable elements to select the body part are outside the symbols on each scene.
Each clickable element has been given corresponding class names to it’s body part.
(Note I may have some of them mixed up in the head selections )
so the button that selects Cheveux_8 also has the class names Cheveux_8 and Cheveux.
All the buttons for selecting a body part call a single Javascript.
showHideElements() function.
The javascript uses these to classes to work out which element to show and its type.
One of the very first things we do is to create a global variable which will be updated with the information of the selections.
face = {"Visage":"","Cheveux":"","Yeux":"","Nez":"","Bouche":"","Lunette":"","Barbe":""}
This named array will hold the values of the selected elements.
We mainly do this so we can call these values at a later stage or store them if you need else where.
At the moment we only partially use this in the in the javascript being used to make the selections and that is where we update it also.
It is only created once, even though there are many calls to the function.
if (typeof window.face == "undefined") {window.face = {"Visage":"","Cheveux":"","Yeux":"","Nez":"","Bouche":"","Lunette":"","Barbe":""} }
var selection = element.classList[1]//--- Get the calling elements class name at index 1 ( the will be a class at index 0 which will be a hype one)
/*this will be the element to shows class later*/
var selectionType = element.classList[2] //--- get the calling elements class name at index 2 ( the will be a class at index 0 which will be a hype one)
/*this will be the element overall type to use later*/
console.log(window.face)
window.face[selectionType] = selection /// we set the value in the init array by the Type.
var theFaces = hypeDocument.getSymbolInstancesByName('face')//-- get the face symbol/s
for (var i=0; i<theFaces.length; i++) {//--- iterate over any face symbols.
var theFace = theFaces[i]; //-- face symbol
var theFaceElement = theFace.element() // -- face symbol element in the DOM
///--- first we need to hide any elements of this type/class already showing. But only within the symbol. (IMPORTANT we do not do for the whole document as we use the class name elsewhere)
var allThisType = theFaceElement.querySelectorAll('.' + selectionType)
for (ii = 0; ii < allThisType.length; ii++) {
hypeDocument.setElementProperty(allThisType[ii], 'opacity', 0, 1.0, 'easeinout')
}
//-- Now we just need to show this element within the face
var theAvElement = theFaceElement.querySelector('.' + face[selectionType])
hypeDocument.setElementProperty(theAvElement, 'opacity', 1, 1.0, 'easeinout')
}
console.log(window.face)
Application avatar_mhv2.hype.zip (1.0 MB)
This all may seem complicated but it is really very simple.
