Persistent Symbol, can I click it twice?

Symbols
1

I have designed a persistent symbol, it is an animation using and animated button that when clicked will drop down a menu.
How do I set a mouse click to start the animation and then when a menu item is further clicked it reverses the animation? Furthermore if the user decides not to make a choice from the menu and decides to click the button again to close the menu, how do I reverse the animation again? I cannot see a way to add more than one mouse click (tap) and mouse down, mouse up is not working for me. I should add that this symbol will only appear on the iPhone layout as a space saving solution.

Thanks

2

Have a look at :

And see if that helps you with an idea

3

Thanks MarkHunte, looks interesting, will it work with a persistent symbol? Do I need to create a separate timeline? I’m new to symbols.

4

It should do. You would do it all on the symbols timelines.

It is always much easier to help if we can see what you are doing. Can you post a project with your menu and symbol.

5

Thanks, I will as soon as I’m finished! Thanks again.

6

Here is the hype project. An early work in progress.
I’m having problems in many areas.

  • Firstly, the menu on the iPhone layout. How do i get it to close after a selection is made or if its clicked again to close it. Because of the way I have used actions it i.e. Pause and Continue, I am running into problems. When it is clicked or tapped it just runs through to the next pause.
  • Extra space is visible and accessible on the iPhone portrait layout. Why? Is it to do with my breakpoints?
  • I cannot scroll down enough in iPhone portrait layout. Why?
  • I cannot scroll in iPhone landscape. Why?

There are many more issues but I’ll leave at that for now. Any help is much appreciated. My apologies for any confusing explanations.

Thanks

My Hype Project - Kirsty new tablet website

7

There are probably many ways you can approach what you want to do.

But to keep things setup how you have done them and not confuse you understanding of whats what I will try not to adjust too much…

In your example you have the menu symbol that you have set up two dates to work.

Monday and Tuesday.
When you click either you are taken to a new scene respectively . ( This approach I suspect may simplify editing classes for each day at later stage.)

I have put a close button (X) on the class text.

Screen Shot 2015-10-13 at 17.32.45.JPG584×738 101 KB

This button when clicked will run the timeline back in reverse. It will also trigger a custom behaviour :

The custom behaviour is set to go to the end of the main timeline and then start it in reverse.
But we want to target the main timeline in the menu symbol. So we have to add the custom behaviour there.

Once we add it to the symbols custom behaviours, it will be available globally.

This means we can call it from the (x) buttons actions. Which is what we do.

No when the (x) button is click. The text will scroll back up. The Button will disappear and go off stage and classes dates will roll back in to view.

–

Also notice that I have changed the hight for the Mobile scenes. The break points are on width not height.
You may need to create a new layout for each size iPhone.

I have set the iPhone layouts to iPhone 5s and iPhone 6 to show you what I mean.
I am by no means an expert using the layouts but this may give you an idea.

Also in Safari you can now go to the Developers menu and Select: Responsive Design Mode;

Screen Shot 2015-10-13 at 18.24.48.JPG1200×736 93.4 KB

Kirsty New tablet website 01 (original 2).hypetemplate.zip (1.1 MB)

8

Hi MarkHunte

Thanks for going to so much trouble to find a solution to this.
The Responsive Design Mode in Safari is a revelation too, great.
You have answered problem but with my ever in creasing knowledge gap you have raised more.

The x button you created works well, however it does leave the ‘Menu symbol button’ I created active at the same time. To explain a little better, I mean that if the user does not press your x button they can still use the ‘Menu symbol button’ regardless and this causes confusion I think. The other problem follows on from that point and it is, that if you do use my ‘Menu symbol button’ it always proceeds to the next pause action, press it again and it proceeds to the next pause action, press it again and it proceeds to the next pause action, and again and again. Regardless of where or when it is pressed. So my point is how do I control this. Does that make sense, it’s quite hard for me to explain.
There are going to be many other scenes, as the menu items suggest, that I will be adding and I would like to get my head around a solution to this issue now rather than later.

Also, the custom behaviour you created, ‘goBackToClassDates’, completely baffles me. Is this Javascript? I ask as I have no knowledge of Javascript. I’m glad that it works, I was hoping however that using Hype would avoid having to use coding as I am useless at it.

One last point. When I check the deign on an iPhone in Hype Reflex I am able to scroll to the right and see more of the design than I should, i.e. I see more of the background image that should be cropped, how do I stop this? Similarly when I enlarge the height of the layout to enable the user to scroll down it will allow some scrolling but not all the way to the bottom of the layout in portrait, and not at all in landscape.

Thanks in advance for any advice.

9

ooooh k,

So the easiest thing I think is to:

group the sub menus together
group the days together

Then have them off scene at the start.

When the menu button is clicked. Have the sub menus move on scene in as short as period as possible to the correct position and then fad in.
When the classes is clicked have the days move on to scene in the same way as the sub menus do.

Now the trick bits.

When a day is clicked, it will continue the (symbol) timeline as normal, allowing the fade out. But it will hit at 00:01:15 a timeline action to ‘Go to time in timeline’ -> 00:01:15. Which is where the sub menu and days groups are off scene.

Now you will have no days or sub menus in a position to be clicked.

When the (x) button is clicked it will run the same Custom Behaviour.

The Custom Behaviour now has two actions.

Go to time in timeline :-> 00:04:27 and then Continue main timeline.

When it continues it will hit a new timeline action at the 00:05:00 mark.

This action will :

Go to time in timeline :-> 00:04.11 and then Continue main timeline - reveres.

This will act like a back button. This will reload the days and submenus.

Kirsty New tablet 3.hypetemplate.zip (1.1 MB)

So you now have a couple of tricks up your sleeve here.
Off scene movement.
Using the timeline actions with element actions to skip over timeline pauses and the actions.
Using Custom behaviours to access a symbols timeline.

The custom behaviours are not coding or javascript. Have a look at the behaviors in the

http://tumult.com/hype/documentation/3.0/

The most important thing is to make life easier walk though how you want a menu system to work and how you think a user would expect it to work, If you then know you need to have it work a certain way research how before you put down too much into the project.

Otherwise it will become hard trying to fix it.
:smile:

10

Thanks again for all the advice.
I have since worked out it wasn't coding and am now aware of custom behaviours.

I thought that's what I was doing :grinning:

I have now divided the Menu symbol system up to several timelines, this now negates the need for so may pause and continue actions. Its working better.

Thank you for the new breakpoint suggestions too, they are working better so far.

1 Like