Now that you have the graphics you need it's time to get started.

The first thing to do is to create a new object and call it Button1.

The buttons we are going to make will sit over the 5 orange balls on the 'Tree-left' object. Because we know this, we can set the parent of this object to be the 'Tree-left' object.

Set the appearance of the object to be based upon the 'Button1' graphic you downloaded earlier. If you click 'Apply' at this time you will see the state we are aiming for.

If you move the object into position over the top orange ball on the tree you will see that I have prepared this object to fit precisely in place. If you have trouble manually placing it, do it from the 'Summary' tab. The coordinates you need are 17,202 (assuming your tree and my tree are in the same place!)

We actually want this effect when the mouse goes over the object, not when the mouse is away from the object.

We therefore want this new image to be invisible until the mouse is over, so in the appearance section go to the alpha blending tab and set it's visibility to a uniform 0%.

If you experiment with this value, you will see that as the value decreases from 100% to 0% the object gradually fades until the background is visible. This may give you a hint how we are goint to achieve the effect we want. (Well, it might do!)

This is good, but it would be better if the new image appeared in a more subtle way. While you are on the alpha blending tab change the setting to 'Per frame' and set the values from '0' to '100'. The reason for this will be clear in minute.

If you now click the animation tab we can achieve the effect. We are going to create the impression we want by gradually increasing the visibility of the object in an animation.

The number of 'frames' in this animation is the number of stages we want the fade to go through, so lets say 10. The 'interval' is the time taken to move from one frame of the animation to the next. 50 milliseconds should be fine. You can always experiment with this later and make it faster or slower if you prefer. To setting you specified earlier that the visibility (alpha-blending) would vary from one from to the next will now kick in as you have set up an animation.

There are 2 types of animation. One is like this type using a single image, and varying the transparency frame by frame. The other type is where the individual frames to be shown are contained within the image, which we will come on to later.

To reflect that this animation is of the former type, you must tick the 'Static' check box.

Click 'OK', to exit the dialogue.

If you try moving the mouse over the object you will notice that the image fades in gradually, but when you move the mouse away again it flicks back to the original dramatically, as the object reverts back to it's 'Default' state.

You may have noticed that this state is actually called the 'Default (Mouse out)' state, because it is activated when the mouse moves away from an object.

If you think about it, at the moment the objects 'Default' state is to be invisible as you set it before. What you actually want to have is the reverse of what you have just done, so lets try to do that.

Select the object again and make sure you are looking at it's 'Default' state rather than it's 'Mouse over' state. 'Copy' the settings you created in the 'Mouse over' state and then look at the animation tab.

At the bottom you will see the 'Style' tab, which is set to run the animation 'Forwards' i.e. from 0% to 100% visibility. Change this to 'Backwards' so this happens in reverse.

Now check out your object and it should fade in and out smoothly as you move your mouse over and away from it.

We now need to make this object do something. Create a new object using the panel graphic you downloaded before, and call it 'Panel 1'.

This is going to function as a sort of menu so we will want items that we place on the panel to move with the panel. To allow this to be done, you can configure it's layer class and say that you want the object to function as a container.

Now create another object, and drag it into the centre of the panel, and then release it. Now drag the panel around the screen and the othe object should move with it.

OK, what we want to happen is that we want this panel to appear when the button we created is clicked, then disappear when it is clicked again.

To do this view the 'Relation' information for the object and select 'Menu' or 'Volatile - Closed when a popup opens' from the 'Popup' options depending on your preference. In the first case the popup will only be visible until any object is clicked, the second means that the popup will remain visible until another popup is launched. I'm going to choose 'Menu'.

When you click 'OK' the popup will disappear, which highlights the fact that you need an object to open and close the popup. That's what we created the button for so lets set it up, it's very easy.

You simply need to change the class of the Button you created to 'Popup'. If you configure the popup, you can specify which object you want to popup. We want the 'Panel 1' object to popup so select that.

We can leave the configuration as Open/toggle the popup, so each time the button is clicked the panel's visibility will toggle.

That's it, it's all done.

What you now need to do (if you want more panels) is to replicate this 4 more times for the other buttons and panels to act as 'rollovers' for the next 4 buttons on the left. Remember you can clone objects, this will save time.

It's probably a good idea to practice making some of these buttons, but if you're too lazy, here's the finished version ;)

Download Theme