House.hype.zip (2.0 MB)
I apologize in advance as what I am trying to do seems simple but I am lost in trying to find the solution.
I simply want to click on a symbol and have it play a timeline within that symbol.
It actually works but for only the symbol that is higher up in the timeline list of elements. Is there something I missed that needs to make a symbol only occupy it's size parameter rather than the whole viewport? If the symbols are moved in the Timeline list reversing their listing position it's clearly giving the understanding that a symbol owns the whole viewport with it's assigned onClick event/action.
Thank you in advance to anyone that can help me better understand how to achieve what seems like a simple goal.
The issue is not symbols but rather the your elements inside are blocking the mouse clicking.
When you run into this sort of issue. Go through your elements and set Ignore All Pointer events on any elements that do not need it.
I had been playing around with dialog/modals for Hype.
And have recreated your doc to use them. This example is tailored to your doc. , so some setup for others may be needed., as I have designed the dialog/Model not to cover the whole window ( or look like is is anyway)
Mainly the css controlling the top of the dialog.
top: -390px ;
The modal is created on scene load by a JS function.
The elements for the modal are of scene but can actually be any where. even on the scene( because they get assigned to the dialog they will not show on scene until called.
The images for the model are pulled by the buttons addition HTML Attributes.
They run a JS function to set the image and show the modal.
The modal is opacity 0.
The model timeline will fade it in and then fade it out and close it.
Awesome... Thank you Mark.
I did figure out that the elements in the Symbol were causing the problem based on some additional tests. My thoughts were that if the elements were if css property visibility = hidden it might solve the problem.
Thank you again for your assistance in solving this.
Here is a simple solution using Hype Reactive Content. It utilizes the custom data variable modal to toggle the visibility of overlays. The overlay responds to the variable change through a custom behavior. If the modal equals 1, it triggers the main timeline of the symbol. Take a look inside the symbol to view the custom behavior. Additionally, the close button could simply set modal = 0, but that would be instantaneous. In the example, it continues the main timeline to fade the modal out and then sets modal = 0 as a timeline action. You can create as many modals as needed as symbols… just added the modal equals 2 (increasing the number in the custom behavior) and the data-visibility and the button assignment modal = 2 etc. on each accordingly.
Thanks Max... The Close button makes sense and when I have some time I will add a second linked zone as your example only has the single link. I'm sure, since you know quite a bit about this tech, that your idea will work, but I should still test to learn and better understand.
Hey Max, In learning I have a question... Where are the Custom Behaviors code stored? I don't see anywhere to pull up and review the code in one of the Custom Behaviors.
I understand your example uses your external Library. I've reviewed it in general and tried to duplicate the working buttons and linked Symbols but it does not work. Ha!
I understand we have Buttons.
They call a hidden Symbol that then starts it's default Timeline. It pauses and then onClick of the Whitebackground element, it continues it's Timeline but in reverse, resetting everything and also calls a modal=0 which removes the hidden symbol from the stage.
That all makes sense but in practice my button and hidden symbol does not act as expected. On the new button (Railing) it does start a timeline but then takes one additional click to continue. And then it freezes up entirely. We do set modal=0 at the end of the hidden symbol timeline so I am confused on where the conflict is. House-max-2 2.hype.zip (933.6 KB)
No worries, the version I made for you is using custom behavior signals. So, you need to set the custom behavior listener (On...) inside each symbol and set it to start the timeline. I fixed it for you:
Personally, I tend to write some (a little code) and here is a very simple example with a tiny bit of code. I think it makes it easier as it doesn't use custom behavior signals anymore.
