How to make animated menus in Flash CS5? - ActionScript 3.0

Hello welcome you dear userIn this article I would like to show you how you can make a very interestingmenu animated in Flash CS5 with ActionScript 3.0!




So let's start with the opening of the program and select a blank document ActionScript 3.0



If you already have it open a blank document move on to the top menu from which you select INSERT - NEW SYMBOL.


Appears to us a window where you can enter the name and determine the type, in our case it is Movie Clip.


As you see, when you click OK, you receive a new Stage, where we start our new button. So go to the tools palette and select the rectangle and then set the colors to be on your button. I set a border on NOand color, something in the shades of gray. On Stage, draw a rectangle. Use the Text tool and create your text that you want to put on a button, you can also set the color of your text. If you already haveeverything, then select the entire rectangle with the word and use the keyboard shortcut CTRL + C -CTRL + V (MacCMD + C - CMD + V), duplicate your key. Change the colors in powielonym button and set a rectangle on the other.


OK, let's go further. Now you can use the guides with whom you set your buttons properly, so let's get tothe top menu from which to choose VIEW - Rulers and ruler will appear to us in the left and top of the window of our Stage. You can take them out and adjust to the button.


If all you've done it now you can select all button, the top and bottom and choose from the keyboardCTRL + B - use this shortcut twice (MAC 2xCMD + B) in this way we transform the image into individualpixels, both the rectangle and text.
Now go to the timeline and the first line, the second frame, insert a keyframe, you can right-click on a given frame and select Insert Keyframe, as you can see, there is a new frame containing the same as inthe first frame, or with our button. We go further. Now that our animation lasted for a while in the cageshould be 6, 7 or you want to insert a keyframe, which is the same as in the second frame. Then click the right mouse button on the second frame but this time select the CREATE ANIMATION CLASSIC. Now go to frame 6, 7 or so in the end your animation and select it. The next step will shift our rectangles up.So select the last frame and select buttons. Now use the arrow keys on the keyboard you can move upour key.



Well now you can see somethingYou must now turn our animation. The fastest would be if you check all the animation of the second frame in the timeline to the last frame and I copy. So check this animationand using the right mouse button to select Copy FRAMES, then go to the cage, which is already in theanimation and paste this animation, which is copied. Now we turn our cages, which mark what iswkleiliśmy and click the right mouse button and select ROLL FRAMES, now it's all right.
Now we have to create a new layer in the timeline, which called MASKIn the first frame, create arectangle the same as our buttonIt's blue in the picture it will be our MASK



Now go into the timeline and click the right mouse button on the Mask layer and choose the commandMASK. As you can see this option only displays the area, who hid under our blue rectangle.
Then create a new layer, which must be under all the layers. Create a rectangle the same there as in the mask, but its opacity set to 0%. It will be a rectangle with whom we will be actin button on mouse over.
We go further and create another layer, which must be at the top, over all layers. AS name it. In the first frame, create a campaign stop(); click on the layer and press F9 on the keyboard, type in the function stop(); followed duplicate this functionality in a cage 6 or 7, where our button pulls up and the last frameof our animation.



If you already have it all, in the second frame, create a blank keyframe in frame 7, where the second stop function, is right behind it create another such frame. If you did, then select the second frame and move to the right pane and name the frame over


and type 7 in a cage out. Now we can proceed to the next step. Namelyfirst go to the cage where the function stop (); and using F9 gives us a window where they enter the shares of the script through whichwe will correct the department:

script:

___________________________________________________


stop();


this.addEventListener(MouseEvent.MOUSE_OVER, twojaFunkcja);
function twojaFunkcja (e:MouseEvent):void {
this.gotoAndPlay("over");
}




this.addEventListener(MouseEvent.MOUSE_OUT, twojaFunkcja2);
function twojaFunkcja2 (e:MouseEvent):void {
this.gotoAndPlay("out");
}




___________________________________________________


and now proceed to the SCENE 1, and the Library, drag your file to the Stage. If you test the movie it should all work but you can not see the handle when you move the mouse on the button to change it, enter in the button by clicking it twice, and once again enter the cage on the first line of AS and add to the script this function:


___________________________________________________


stop();

this.buttonMode = true;
this.useHandCursor = true;

this.addEventListener(MouseEvent.MOUSE_OVER, twojaFunkcja);
function twojaFunkcja (e:MouseEvent):void {
this.gotoAndPlay("over");
}

this.addEventListener(MouseEvent.MOUSE_OUT, twojaFunkcja2);
function twojaFunkcja2 (e:MouseEvent):void {
this.gotoAndPlay("out");
}
___________________________________________________


Now you can test your movie and everything should work as it should beFeel free to watch videos andsubscribe to a channel on Youtube!

















Brak komentarzy:

Prześlij komentarz