Rogue Button Behaviors on animation

1

Hey All!

I have built a TON of clickable maps with Hype (essentially simple GIS) for some geography curriculum I've been working on with my mentor. This summer we're once again working on some new ones which have an added layer - instead of just clicking a button to turn a layer on, we've also added new, fresh layers with some text explaining the layer.

This is usually simple - I assign an action to the button "on click" - "continue timeline" - which brings the layer into focus with a pause at the one second mark - the button has "can restart timeline" ticked to continue the animation turning the button and the layer off. This works all the time.

For some reason - and I'm hoping it's just my computer - the new layers are behaving badly. If I go in and click all the text layers at once (as a sixth grader might), sometimes the wrong one turns on. - I've attached the hype file here as well as a link to the current sample. Anyone have any ideas why this might be happening or what I might do to my workflow differently that could keep it from happening?

Link to clickable map: http://textbooks.wmisd.org/1Atest/WB4TradeWinds.html
Link to hype file (Too big to upload here): http://textbooks.wmisd.org/1Atest/WB4SourceFiles.zip

1 Like
2

I should add: The difference between this layer and the map layers is - I've got a button doing two actions - starting a timeline I call "Text Chomp" where things disappear behind a gray box, all the text image layers are turned on behind the "curtain" and then set to 0% opacity, as well as the timeline that then brings the opacity of the necessary layer to 100% opacity.

I considered the issue might be calling two timelines and the exported files having an issue with that when clicked in succession quickly but the same thing happened when I had all of this going on in one timeline (one command on button click instead of two)

3

On a whim I changed the "text chomp" timeline to "start" instead of "continue" - One of those instances where I decided to type out a question in the Hype Forums only to figure it all out through the process of typing out my question in the Hype Forums. Love this magical place! :joy:.

It does some to intermittently cause an issue with hiding the elements on the timeline when "un-clicking" the button to hide the layer again, but that seems to be hit or miss. :thinking:.

4

I tried clicking around, but I couldn't see where it was broken. Is it fixed now?

It might be too late now, but I probably would have managed this dynamically. You can add custom Data Attributes to Hype, such as... data-visible ...and then just use JavaScript to set the values to True / False. Then, it's just a matter of adding a little bit of CSS to hide elements that have the "data-visible" attribute set to false.

1 Like
5

To clarify, does this happen only in the Hype scene editor or on export?

(There is a known bug in Hype where sometimes a completely incorrect element will get selected. Usually this is just cleared up by closing and re-opening the document).

If you can for the items you are hitting, could you provide specific steps to reproduce the problem that you have and what you expect the desired outcome to be? Your document is pretty complex and so it will save time to know your exact intention. Thanks!

6

Well - upon further working with my friend the issue I thought was put to bed last night came back - I think ultimately it's a timeline conflict (summoning two) The one that's up online now is our "okay, that'll work" fix.

In one of our more simple (at least functionality wise) GIS Maps a student clicks a button and it continues the timeline. If it was off, We record 1 second of the layer coming on to full opacity, and then one more second of the layer going down to 0% opacity, with a pause command halfway through. Each "button" is programmed to "continue timeline" of whatever timeline is assigned to the button, with "can restart timeline" selected for infinite layering. This works because each layer is already imported as a semi-transparent PNG file out of Illustrator.

The problem this time is this next set of maps he wants me to build also has a "text" layer and those are not semi-transparent (or you'd see bleed through). So what I was attempting to do was to summon a timeline that cleared everything out first and then ran the fade in/out, using the same mechanics as a regular map (continue timeline with a pause).

What we ran in to after my fix last night was that the more we'd click, the more likely it was something would get stuck. If I clicked on the text button for Winds and then Ocean Currents, things would work fine - but if I went from winds to ocean currents to cause and effect diagram to ultisols sometimes it would load fine, and sometimes (particularly cause and effect for some strange reason) things would fade to a gray box.

Our solution was to get rid of my "Text Chomp" timeline and record each button as a "start animation" where the gray box appeared, hid the transparency change for all layers before running the intended layer up to 100% opacity. Clicking on a different text button then ran this again and things work nicely.

He didn't like that the text stayed on, so I added a "Text off" button. He's happy for now :slight_smile: I only have 8 more of these to build so I'm happy too.

I guess my new question given this terrible explanation of what I'm doing - is there an easier way? @Photics suggested doing some Javascript but that's not my forte, though it's been on my list of things to learn for years now.

I always love coming here even though it's sometimes months in-between visits. Everyone is so helpful and active!

Reconciled version: http://textbooks.wmisd.org/1Atest/WB4TradeWinds.html

7

Great - I'm glad you were able to find a satisfactory solution.

About the one though I had from reading your description is that sometimes Relative Timelines can help in situations where you may be interrupting timelines halfway through, since they are able to animate from any position. It may not be the right solution, but something to think about in your case.

Hah, unfortunately not always! Sometimes we can look at a document and instantly get what you're trying to do, but other times not :slight_smile:. Complex documents can be terrible to describe, but usually a breakdown of specific elements and steps to reproduce is best. Videos often are a great way to give explainers to other folks too -- some of the clearest ones show the document, navigate to the elements, do an animation in hype, show the preview, and then show what they want. In general the approach I'd take is one where someone looking at your document doesn't look at the content of the document - only the animations.

1 Like
8

DO IT! JavaScript is awesome! :slightly_smiling_face:

How about this... would you be interested in a YouTube video about using data attributes to easily make buttons? If so, I can add it to my list of things to do.

1 Like
9

I will have to repay you somehow someday :slight_smile: but yes - I totally would be interested in such a video!

This is how I taught myself qBasic as a kid - only with library books since YouTube wasn't a thing in the late 80s. Have a need to learn one thing, learn what makes it tick, and then keep pushing it forward.

10

Relative timelines - one of those things I've never used and always wondered about - my eyes are bleeding from working on this today but I'm going to try this out and see if that solves the issue!

@jonathan @Photics - you and everyone else on this forum are great! Thanks again for the help!

1 Like
11

Cool, I added it to the list. There are 3-4 ahead in the queue, so maybe in a few weeks it will be ready. I make maps for websites professionally, so I think I’ll give this one a map theme. Hopefully you’ll love it :heart_eyes:

This is not so bad. Basically, a relative timeline picks up from the current state. Here’s a free template that shows how it works…

https://photics.com/free-template-tuesday-20-tumult-hype-colors/

UPDATE: I've been working on the map video the past couple of days. IT'S REALLY GOOD! :blush:

I really want to show a preview, but that would ruin part of the story. HA HA! :smile:

…but basically, I created an example and it's so clean, so nice. Back in 2011, before I started using Hype, I would struggle to make something like this. I'd probably have to make it with Flash. But now, CSS, HTML, and JavaScript is like English to me. I can just image something and then make it — such an amazing feeling.

So, if you're thinking about learning JavaScript, it's not an easy path. But wow, the rewards are fun!

Anyway, hopefully by this weekend it will be ready. It starts the ":superhero:" series of videos. This particular one is general web development, but something like this could easily be dropped into a Hype project, and the basic principles apply to Hype, because Hype uses the same technology — HTML5, CSS, and JavaScript.

1 Like
12

@Photics if you tutor we should talk :slight_smile:

13

I am thinking about doing live classes on YouTube, but I'm not quite there yet.

Right now, I'm still working on the video I said I'd make for you... it's good... soon!

...and I think @jonathan will be especially happy with this one. I'm using Whisk. :blush:

2 Likes
14

I can't believe you're recording the video - seriously man! Thank you! I bought the original "A Book about Hype" back in the day, but I just bought the new version 5 minutes ago - digging the app approach :smiley:

1 Like
15

Nice! :slightly_smiling_face:

The video is uploading now. You can join the Instant Premiere Virtual Barbecue Launch Party. :yum::hamburger:

🦸🏼‍♀️#1
[:woman_superhero:t3:#1] HELP! My Map Doesn’t Work! (Managing Map Layers With HTML, CSS, and JavaScript)

1 Like