I created 5 different symbols. Each symbol is made up of two parts: an initially visible circle and an initially invisible prettier snowflake. They have a physics property so that they fall into the scene. When a circle is clicked on, it triggers a javascript that makes the circle invisible and the pretty flake visible.
I thought it would be easy to duplicate the symbols to easily create a lot of snowflakes, but…the copies will change the visibility of the first five, but won’t change themselves. It seems that there is a problem with the script seeing more than one element using the same Element ID. Is there any way around having to create all unique snowflake instances to have more than the original 5 snowflakes?
Using javascript’s “querySelector” method you can call this on element’s too instead of the document. Therefore it will contain the query to the element it is applied too.
###Example:
I have a rectangle element and a circle element. I want to click the rectangle element and make it disappear and reveal the circle element. I want to duplicate this element so that It will do the same for each duplicate.
###Steps
Create both a circle and a rectangle element.
Give these elements a “class” name. e.g circle and rect respectively.
Group the elements. (ALT-CMD-G)
Click on the group and go to the inspector’s (Actions) panel. Click the plus sign next to “On Mouse Click” and choose “Run Javascript…” as the action and “New Function…” as the function.
Within this function type the following.
var circle = element.querySelector('.circle');
var rectangle = element.querySelector('.rect');
circle.style.display = "none"; // hide the circle
rectangle.style.display = "block"; // reveal the rectangle
Now if you preview this you will see both elements visible at the start. In order to make the rectangle not visible at the beginning you need to click the “eye” () symbol next to the rectangle within the group within the timeline area.
You can now go ahead and duplicate the group to as many copies as you want. You can move them around the scene and highlight them all and apply physics to them. Basically when you click each group the corresponding circle will disappear and the rectangle will appear.
#####NOTE: Instead of using “style.display” you can in fact run timelines, use Hype’s API to set the elements properties of scale, opacity, etc that way each element can animate it’s appearance too. This is just a starter to get going.
@DBear, perfect! Thanks so much. I’ve been playing around with things and then wondered if I could really randomize the snowflakes, so instead of having 5 different groups, just have one group that randomly selects from the 5 snowflakes to make one appear. I know about arrays, so can create a snowflakeImageArray =[“snowflake1”,"",""…etc] and found that one can randomize things with Math.floor(Math.random())
I’m stuck on how to have Hype call upon a snowflake image to display, though.
These days, kind of wishing I had studied coding languages as a second language rather than French.
Instead of manipulating just the "display" property you could even add on a "backgroundImage" property. Therefore changing the ... well, background image :).
element.style.backgroundImage = "url('path to image')"; // element would be whatever you queried using the above method
You can also just set up or drag in the image as an element within the scene and it will automatically be an element with the image in it. It all depends on your setup and what you're trying to achieve.
In this case, similar to before, but let’s say one group instead of 5 different ones: snowflake.
Inside ‘snowflake’, a circle, with its Class Name set to “circle.” It is visible. Using
var circle = element.querySelector(’.circle’);
circle1.style.display = “none”;
When the group is clicked the circle disappears. Great.
Inside the group are 3 different snowflakes that are not initially visible. I want to randomize which one appears when the circle disappears. I have:
var imageArray = [“snowflake1”,“snowflakes2”,“snowflakes3”];
var num = Math.floor(Math.random()* imageArray.length);
var snowflake = imageArray[num];
Assuming that’s correct, I think my problem is converting that into a value that I can then use for the block command.
What you’re doing is fine. imageArray[num] should return a value of either “snowflake1”, “snowflakes2” or “snowflakes3”. I am going to assume that these are the ID’s or classes that have been applied to the “snowflakes” that are in the group. If not, they should be that way you can throw in these lines
####*Edit
I’ve just downloaded your document linked in an above post. Instead of having lots of functions and ID’s, I would follow my example. Here is your document “spliced” with what I did and including your recent question about using an array to have random snowflakes.
for those following along. I’ve just set up an array on scene load that has the filenames of the snowflakes from the resources folder. Then when calling the function on mouse click of each individual element you can add in the randomised variable within the array and get a random url that you can plug into the element’s "style.backgroundImage = '...';" property. It will make sense when you look at the document
don’t feel stupid. You have to learn somewhere. If it makes you feel better. Give the posts a “like” by clicking the heart and share if you find any useful techniques yourself we’re all learning with Hype and together we can make it a very worthwhile tool.
) symbol next to the rectangle within the group within the timeline area.
If it makes you feel better. Give the posts a “like” by clicking the heart 
and share if you find any useful techniques yourself