How to make an element disappear?


(Jon Mason) #1

Hello,

PLEASE HELP! I have a project to complete in Hype, I’ve never used it before, and I am struggling.

I am creating a hamburger creation tool for a food company. It enables people to change the bun, change the cheese, change the relish - you get the idea.

The burger is photographed from the side and I have all of the individual elements as transparent PNGs. When you click on one of the bun options it replaces the current bun (in the composite image) with the new one that has been selected.

I have done this using relative timelines, so I have created a button in the actions palette, when this is tapped it jumps to the timeline for the corresponding bun, and the selected bun slides in.

The problem is that I need the previously selected bun to disappear before the new one slides in, otherwise you will be able to see the previous bun (because the new image/bun in a transparent PNG) underneath the new one. It will also lead to layering issues.

PLEASE HELP! shout if you need more detail.

Thanks in advance.


(Mark Hunte) #2

Hi
##Please Post a Document
If you show other members of the community that you made an attempt and have some work to show what you have already tried, it will make helping you get unstuck much easier.
##Include a zip file
Zip files are better than links because links can go dead.
Just drag a zip file of your .hype document onto the editor.
##Search
Also do not forget to search before you post as there are many questions that have already been asked that may match yours.


(Freelancer) #3

Jon,

At the beginning of the timeline where you’re sliding the new bun in, you should be able to hide the previous bun by setting its visibility to HIDDEN. You’ll find the DISPLAY attribute in the VISIBILITY section on the Elements Inspector:

Likewise, you can set VISIBILITY of the original bun to VISIBLE and hide the other bun by changing the DISPLAY to VISIBLE or HIDDEN as needed on other timelines.

John


(Jon Mason) #4

Thank you for your advice John.

Can I just ask one more question?

I don’t quite understand how when I click the button to trigger the next bun’s timeline how this button will also effect the timeline of the previous bun.

I have built a basic model (attached as a zip file). When you click on the burger elements across the top of the page you’ll notice that the last selected item does not disappear from the main image - this is what I need to do.

Is there a simple way to do this?

Jon.


(Jon Mason) #5

Sorry, it didn’t attach, here it is…Burger model.zip (1.6 MB)


(Mark Hunte) #6

Ok now we have an example. :smile:

One way…

If you look at the example below, you will see I have simplified the approach.

I have change two sets of elements. The Buns and the Topper. ( The rest I have left for you to change)

Buns.

We only need one timeline.

We put both animations on a single timeline. In this case Buns.

For bun 1 we reverse the animation, so the buns starts in the view and flows off the scene.
We leave it at the 0 frame.
We then have bun 2 start on the 1 second frame. We do not change it’s direction.

For the bun buttons.

We group each text and bun image together. And removed the mouse click actions from them. ( also corrected the pointer)

Now for the bun 1 button group,
We add a on mouse click and set it to continue timeline ** Buns** in reverse.

For the bun 2 button group,
We add a on mouse click and set it to continue timeline ** Buns** ( normal direction)

Lastly on the scene’s on scene load we have the ** Buns** timeline jump to 00:01.00

We repeat for each burger item as above.

This is all shown with the Buns and the Topper.

Burger model_MHv1.hype.zip (535.6 KB)