Next step will be making the visualization of menu buttons. First, let's enable button mode so that the hand cursor appears on mouse over. Add to the constructor of the MainMenuItemRenderer class:

buttonMode = true;

And disable reaction on the renderer's movie clips' children:

mouseChildren = false;


Now we will make an animation on mouse over and mouse out. Let's open the MainMenuItemRenderer Movie Clip in website.fla. We create a new layer and place it under the existing layer with text field.



Then we create a rectangle with a shape tool.



We fill it with white color. You can choose any color - it depends on the design of your menu.



Then we convert this shape to a Movie clip.



Let's create one more layer and place it above others. It's a layer for the code. Also we extend keyframes so that there is a place for creating an animation.



Then we add keyframes between which an animation will be created.



We have to name frames "over" and "out". These are the labels for default animation which is implemented in the inherited super class (AbstractMenuItemRenderer). The first half of timeline will be labeled "over":



And the second - "out":



We also create keyframes on the layer with the rectangle.



We'll make a simple animation - the white rectangle will appear on mouse roll over and disappear on roll out. So, we make its alpha channel 0% by default:



And we make it 0% at the last frame of animation:



In the middle keyframe (on mouse roll over) the alpha channel is 100%.

And, of course, we create Motion Tweens between keyframes:



Let's also add stop(); because we'll control the animation manually. We add it at the beginning:



And in the middle, on mouse over:



Menu Item Renderer also supports "show" and "hide" labels. They can be used to create an animation of showing and hiding menu buttons when the menu is opened and closed.



Important: There should be only one keyframe on the text field layer. If you have more keyframes, the text will be reset during the animation, because the proper value is set only in the first keyframe.



Let's compile and check how the menu works. We can see the animation on mouse over and mouse out, and the white selection stays when the button is pressed and the proper page is opened.



The MainMenuItemRenderer class that we at this stage: