This tutorial demonstrates how to create menus in Hippo Animator.
We’ve already added some buttons in some rounded boxes to this movie
to create a menu we need to add a new time line.
We’ll arrange the buttons we have already created like a menu,
hold shift to select all the buttons.
Makes sure you select the home button last, then use the align menu to make the buttons the same size.
The same distance apart in the same left position we add a rounded box as the background of the menu
move it behind.
The buttons in arrange it then we add another rounded box to use as a shadow.
We reduce the opacity have this box to make it look more like a shadow.
The menu was complete. Return to the movie.
Add a button to the editor, we will use it to show the menu.
In the movie properties, turn off loop and auto play.
This won’t be an animation.
Create a new frame for the button at frame 1.
This will be the frame where the menu was shown.
Add the menu timeline to the editor at frame 1.
In the On Click event for the button add the script go to and stop 1.
Click play to test the movie.
When you click the button, the movie jumps to frame 1 and the menu is shown.
Add a hot spot to the library, place the hot spot in the editor at frame 1 and arrange it so that it fills the entire movie.
Move a hot spot behind the menu. In the On Click event for the hot spot, add the script Go To And Stop 0.
The hot spot covers the movie when is clicked anywhere.
The menu will disappear. Let’s also add a test function to the home button.
In this case alert(“home”); also add go to and stop 0.
Press Play and test the home button in the menu.
Home button shows an alert in the hot spot hides the menu.
When you click anywhere else, we can achieve the same effect without using timelines.
Drag the menu in the hot spot to frame 0 and delete the bottom at frame 1.
Turn of the time line for the menu and set its script ID to menu.
So turn of the time line for the hot spot and set its script ID to hotspot.
Turn off visible for the hotspot and the menu.
Change the script for the button too menu.visible = true and hotspot.visible = true;
change the script for the hot spot to menu.visible = false and hotspot.visible = false;
Test the movie.
You get the same effect without using the time line.
Click here to Download Hippo Animator.
This HTML5 Software is supported on Windows and Mac OS X.