I am testing the Hype for a project and need to make a side by side comparison between animals. But I can not do.
I saw all the videos of tutorials but have not found the solution. I searched here in the forum but could not find.
I’m no programmer, I am designer and use the Adobe package. can you help me?
send an example to see what I need to do
thank you!
Is the image you posted an example of what you’re trying to build? If not, do you have an example somewhere you could point us to?
What have you tried so far?
Hello Daniel, thanks for the answer!
This is a picture that I'm building. I have managed to make the buttons to get the right image. Each animal will have a design in comparison to the human that is fixed. I could make a list below where you choose each and the silhouette changes to the correct animal. But I would like to make two fields, A (left side) and B (right side) where clicking on a first animal would occupy the A and click on another B. I could not get a solution to this because it would have to have two sides A and B dynamic content (or show the correct scene). I'm reading and rereading manuals html5 but could not do it. As I said I'm noob in programming but I believe i can do it here in the Hype.
ignore my English, I'm from Brazil.
Here is a rough example.
This uses a global variable to count the number of clicked animals.
The idea is if the click count is 1 then A gets filled, if the number is 2 then B gets filled and the click count goes back to 0.
Click a third time will result in A being filled…
Compare.hype.zip (377.2 KB)
Hello MarkHunte!
Wow, it’s amazing and it worked almost like I want. I need however that each click on the circle below that shows the silhouette of the animal and not the image of the circle / button. I tried to link another image but did not work. I’m trying here but if you can help me more it’ll be very grateful.
thanks and already it helped a lot.
Can you supply the project here or the silhouettes…
The simplest way is to give each button the id of it’s silhouette’s file name.
i.e shrew.png
Then change the code to
var comp_A = hypeDocument.getElementById('aniA')
var comp_B = hypeDocument.getElementById('aniB')
if (!window.clickNumber ){window.clickNumber = 0}
window.clickNumber++;
switch( window.clickNumber) {
case 1:
comp_A.style.backgroundImage = "url('${resourcesFolderName}/" + element.id + "')" ;
break;
case 2:
comp_B.style.backgroundImage = "url('${resourcesFolderName}/" + element.id + "')" ;
window.clickNumber = 0;
break;
}Hello Mark
I will send you the screens of two situations. An animal is small and occupies the empty side. The other animal is huge, so it needs to be transparent to stand in front of the human. On the other screen both are great and need to stay in front and another behind the human. At the same time, by selecting the animal silhouette changes and the name, the text background color and text as well. They are in the correct scale in the example. I do not know if this is possible.
.
This is just an example.
I am not sure it does everything that you want but it may give you a start.
If not then you may have to add the images to the scene and use timelines, properties and JS to hide and show the correct ones.
interatividadesMH1.hype.zip (847.0 KB)
I have given each button an id that matches the correct image file name.
Each button also has the Alternate /title text filed filled in with the latin names.
The JS also uses the id and title to fill in the text fields.
I have also added the Ant Eater in the example
Wow, you got to do as I thought. I will study how did you learn and use in other animals, 78 in total. May I ask just one more thing, how do I get the button is in the correct color when the animal is selected. It is colored in case.
THANK YOU SO MUCH!!!
Hi Mark,
I think I’m very same noob. I could not figure out how you did to hide the images that appear after you click. Can you explain me please? Another question is why the small animal, mouse, as is the B side it on top the human and the A side it is in the clear, how do I correctly position?
There are many ways of doing that.
One is to make your buttons with elements; text, images. Group the elements and set the groups background colour to grey. Have the colour image below the grey one and use JS to change background colour and opacity of the images as needed.
You will need JS to work out which buttons should be selected. This can be complex if you do not know much JS.
There are examples of this already on site…
Because your project is already under way I don’t want to go back and do all the buttons.
So as an alternative I have just thrown together a very rough idea. It is not ideal and not how I would do this mostly if I was starting from scratch.
This one does not allow for a animal to be selected for A and B, they can only appear in A or B.
I simply placed the alternative images under each button and gave each the id of the latin name. and all the same class name.
When a button is clicked it’s ID is added to an array . This array is always limited to two items.
All alternative images are sent backward using z-index
The JS then gets both of the two buttons that are represented in the array and get their alternative title and brings the corresponding alternative images with them as i their id forward.
This is rough and ready…
interatividadesMH2.hype.zip (833.4 KB)
Mark
Very interesting what you said. So I can group each animal and use the own group background to put the color when selected. As the project is in the beginning I will try to do so, leave the circle with the photo and text separately from the background. My biggest problem at the moment is to understand, in the template that you sent, viewing the position of items that are hidden to get position them correctly. Really I could not understand how it works so far. I can not see the hidden elements, and that is frustrating.
hi Mark
I modified this part
comp_A.style.backgroundPosition = "center center"
comp_B.style.backgroundPosition = “center center”
and improved positioning of the elements. But yet they are still misaligned. Could you explain me how do I SEE where is where is made the change of the elements A and B so I try to position them better?
Tks
They are not hidden the buttons are just on top of them.
These are them selected.
Oh No - - – - - I’m going crazy, I can not find it in the software !!!
I managed to unlock the A and field B to correct the location. I have noticed that some images will be misaligned anyway because much difference in size and it hinders.
OPS i was the wrong file open. Still silhouettes are hidden, right? because I see them in resources but I can not select them in the working window.
Ok not sure whats going on with that.
I have changed it to simplify it ( Hopefully)
First I recreated the first three buttons in the original form. Only because where you originally set the hover and press to new images was interfering with the changes. The new buttons only deal with Normal and leave hover and pressed alone.
The buttons Saturation is set to 0%. This makes the grey.
No when the buttons are clicked all Buttons are returned to grey if they are not in the window.currentAnimals global array.
If they are they are set to 100% saturation which will make them colour.
I have commented the code.
interatividadesMH3.hype.zip (569.0 KB)
So we only need the buttons and no other image hidden under them
I open here and think I understand what you said. I will try to apply in a new file, which would be the basis for the final file. Once able to mount the basic structure with the correct files send to you for you to analyze, if you can, to see if I’m doing the right way.
Hi Mark again…
So, I need the box rectangle, where the animal’s name is, change to the same color as the button background.
I tried to insert this code but nothing happened. I identified the ID rectangles and nothing. Really could not understand the basics of code. But with the help of his comments I understood much more.
var Rectangle_A = hypeDocument.getElementById (“Rectangle_A”) style.color = “# 69619C.”;
var Rectangle_B = hypeDocument.getElementById (“Rectangle_B”) style.color = “# 94515F.”;
Even if he had worked it will not work because each group of animals have different colors (the first 14 are pink, next 5 are green, then purple, orange, magenta, blue, gray …)
already modified the image and the text of the first two buttons permanently, see how it was.
Look: interatividadesMH3 MOD -AM.zip (549.3 KB)
