Avatar creator : save preset choices

Hi guys.

I speak poor English so I use a translator. I am a graphic designer and I would like to make an avatar creator for the association where I work. I create my different visuals (face shape, hair, eyes, nose …). So I have a scene for each customizable element:

  • Scene 1: home (choice of sex male / female)
  • scene 2: Shape of the face (oval, round, square, triangular)
  • scene 3: Hair (several different hairstyles)
  • scene 4: Eyes
  • scene 5: nose

When you click on the category “face”, there are the different possible forms and the user can choose which appear. When you click on the different face shapes, I want it to appear on my avatar. I did the action: on mouse click -> go to the time in the timeline.

At 00: 01,15, appearance of the round face shape … at 00: 03,15 appearance of the square face shape … No worries for that. But how to make the choice of the user is saved and move to the next scene? I imagine it’s javascript. But I am so bad. I have already done some research but I can not find anything conclusive.

I do not know if you understand what I mean. I attach to you the visuals of my different scenes.

I thank you in advance

This is possible as shown here

but can you post a document for us to work with.

Hi Mark

Here is the hype file. I’m only at the beginning.Generator Avatar.zip (1.7 MB)

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.

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*/

    	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') 


Application avatar_mhv2.hype.zip (1.0 MB)

This all may seem complicated but it is really very simple.

1 Like

Thank you so much !! You are awesome !

Well, I’ll admit it seems very complicated … I tried to continue for other hairstyles.

Obviously it does not work … I renamed the body elements with a class name as you explain it to me. For example, for cheveux 10, the class name is Cheveux_10 Cheveux. For buttons to select a part of the body and call the function showHideElements () I did “on mouse click”
-> execut javascript and I select showHideElements () .I have forgotten something ?

Did you put the Cheveux_10 element inside the face symbol. If not you need to.

All body part images need to be inside the face symbol.


If that’s not it post your new version and I will have a look.

In fact, it’s all ok, I made a syntax error.

Thank you so much !

1 Like

Glad that worked for.

Just another question? I do not know if it was the best way to do it, but I have a hype project to create a man avatar and another to create a woman avatar. On the homepage, I can choose between man and woman and therefore for the woman button, link to my project hype woman. Is it possible ?application_avatar_femme.hype.zip (1.8 MB)
application_avatar_homme-v2.hype.zip (2.7 MB)

My suggestion. is:

Create a new project that is the homepage for the man /women
Each button will then open the url for either the man or woman exported html.

On the man and women projects just remove the first scene that is the homepage.

If you have any buttons on the man or women scenes that go back to the man/women selection page the just use go to url also.

Note page reload will not go back to the homepage but remain on the current page.