We are going to start with the drop down menu.
Create a new movie clip and draw a rectangle and a text box. Write "Menu".
Create another MC and draw a rectangle and a text box. Write "Home".
This one is going to be an item in our drop down menu.
Make 2 more item MC's, "Contact" and "About". Don't forget to make them in the same height and width.
Now make a new MC and export it for ActionScript with the identifier "DropDown".
Right click the second frame of this MC and select "Insert Blank Keyframe". Insert a third and a forth blank frame as well.
In the second frame add the "About" MC, in the third add the "Contact" MC then the "About" MC and in the forth frame add all item MC's.
Frame 2:
Frame 3:
Frame 4:
In the last frame open the actions window and add this:
| stop(); |
This is a simple animation to scroll the items on our menu, and when it gets to the last frame we stop the animation.
Get back to the main timeline and drag the "Menu" MC to the stage, right click it and select "Actions".
Add this code:
| onClipEvent(load)
{ //First we create a variable to know whether our menu is open or not. var menuOpen = false; } onClipEvent(mouseDown) { //when we use the mouse we check if the mouse is over the "Menu" MC. if (this.hitTest(_root._xmouse, _root._ymouse, true)) { //if the menu was open, we remove the drop down and set menuOpen to false if (menuOpen) { _root.DropDown.removeMovieClip(); menuOpen = false; } //if the menu was closed we attach the drop down MC and set menuOpen to true. else { _root.attachMovie("DropDown", "DropDown", 10); _root.DropDown._x = 100; _root.DropDown._y = 100; menuOpen = true; } } } |
We finished the menu, so let's change the mouse pointer.
Create a new MC, and draw a pointer like this one:
The position of the drawing needs to be like above.
Drag this MC to the stage and give it an instance name of "pointer".
Open the action window of the main timeline and add this code:
| //first we hide the default mouse pointer.
Mouse.hide(); //then we swap the depths of the pointer, so it doesn't get overlapped by the drop down. _root.pointer.swapDepths(20); this.onEnterFrame = function() { //here we set the position of our pointer to the position of the mouse. pointer._x = _xmouse; pointer._y = _ymouse; } |
That's all, we just made a drop down menu and a new mouse in Flash.
Reply