I'm planning a game "around the world" with flights from on big city to another. I therefore have a worldmap and let continents zoom in in timelines. So for instance in Europe I want London to be active so that the user can click on it and open some information.
Problem: Zooming in on Europe I create an ellipse for the action - but that ellipse on the main-timeline is positioned somewhere else.
Question: Is there a smart way to position elements (action-triggers) on the world-map and make sure they are zoomed in on a timeline - as for example in Europe?
Conceptually speaking, it is good to think of timelines as more "streams of animations". Timelines do not contain any property states themselves. So if you want to position something "on a timeline" then you must also animate it.
Where things get a little tricky is that since there can be multiple timelines running in parallel non-deterministically (due to interactivity), there's really no great way in the editor experience to show the proper state. Therefore the value of properties (like position) when viewing different timelines is based on whatever the editor's playhead position is on the current timeline. This doesn't mean it will be the actual position when you play an alternate timeline. It is just how the editor is showing it.
So elements tend to have an "initial position" and then whatever the effects timelines may due to it. When editing, you manipulate keyframe values when the playhead is on top of that keyframe. If the playhead is off a keyframe, then the initial value and all keyframes are offset by your changes. There's more info on this on/off keyframe behavior in the documentation on modifying properties.
Hopefully that is clarifying on how to work with timelines or make the appropriate edits. As @h_classen suggested, feel free to upload a zip of your .hype doc if you want more guidance.
Here is an example using the hand drawn US map from @blur (Kevin).
It uses Hype Action Events and Hype Dynamic Camera. The cool thing, it uses data-intersection-action to hide map parts currently not visible on stage. As seen in this video, where I make the stage overflow visible at the end to illustrate this feature.
Amazing example, Max. Looked into it - but I'm afraid I don't get the functionality. Button OK - easy. But I don't see how the js-functionn zoom is called. There's no action on the parts of the map, no action on the zoomedgui..? So: How is the function called? Am I blind?
weltreise.hype.zip (745.4 KB)
Here is the example. I wanted to jump to timeline "Europa" and make the markers for London and Zürich active - so that the user can click on them and get additional information. Therefore I placed an invisible ellipse over Zürich and wanted to add that functionality. But when you zoom out to another timeline (main) that activation element is located somewhere totally different.
I´m not deep in the ActionEvents project, but obviously the click action is defined in the 'initMap()' function, by assigning a data attribute to each path inside the svg, that calls the zoomMap() function.
That is correct, I assign it there… mainly because I was to lazy to add the data attribute to each state manually.
As a summary of Hype Action Events it allows easy event assignments on a elment level by using data attributes … either through the IDE or through code as seen here.
Furthermore, as the name suggests it allows actions … mainly a way to run JavaScript previously in text form (like say on a data attribute).
Wasn't me… but Kevin actaully did put in the hours. One could rewrite it to work with a pasted SVG. The main difference would be the code to determine the width, height and position of an element for the automatic zoom.
Arrrgh. I'm so dumb. Pasting the SVGs into the map results in picture elements. But element.querySelectorAll('.HYPE_element picture').forEach(function(elm){ does not work. Which element would I have to address in the loop?
If you are using SVGs, you can always just paste them into an inner rectangle instead of using the background image option. You could also just draw a ruff SVG shape using the SVG tool and either use it's background image option. If you still need help, or I should look at a file that can't be public, send me a direct message on the forum.
Thank you so much, Max. I'll try and get on with my own poor knowledge - but if I came across some weird problem (which will almost certainly happen) - I'd be back to you. You are very kind. Thank you very much.
