Tutorial Photoshop Home Tutorial Photoshop Tutorials Photoshop Tutorials Blog Photoshop Tutorials Articles Tutorial Photoshop Resources Tutorial Photoshop Contact menu
 
RSS 2.0
Photoshop & Flash Tutorials, Articles and Resources Only Photoshop
Only Photoshop
Only Photoshop

Web Menu with Animated Buttons in Flash CS4 Part 1

Animated Button ActionScript 2.0

Tutorial by The Mixer from adobeflashtutorial

This tutorial is divided into three parts, the first part you will learn to make clips that serve as buttons, on the second part learn how to do animation and also insert the code needed to control the animation of each of the buttons and the third parties to insert the instance names in the scene for each button.

Hello animation fan adobe flash, then I have for you the next tutorial in Adobe Flash CS 4 combined with ActionScript 2.0.
In this tutorial you will learn to make a menu for flash websites, learn how to make a Movie Clip which function as a button, the Move Clip will have an animation that simulates the Up and Over states (like a button).

The effect is achieved to obtain can be very attractive as clicking a button on this menu button is lit, making it known that this was the section that was selected.

The best way to light is beginning tutorial. Good luck.

Step 1

Make a new document Ctrl. N.
General Box select Flash File (ActionScript 2.0).

menu-button-01.gif

Step 2

In this step, place the document properties Ctrl. J.
Document dimensions are 395 * 40 pixels width and height.
For this particular document was used as the background color # 000000.
Frame rate 30 fps.

menu-button-02.gif

Step 3

This menu will contain 5 buttons, so you have to create 5 symbols of type Movie Clip.
Insert the first of the five symbols Ctrl. + F8. Register as a symbol name to texthome.
Select the option, Type Movie Clip.

menu-button-03.gif

Step 4

When you are positioned on the symbol text home, proceed to add a static text field with the word HOME. Text Tool (T).
Text properties are static text, place the text in coordinates X: 0.0 Y: 0.0, select the text that you like (Tahoma), 12.0 pt type size and text color # FFFFFF.

menu-button-04.gif

Step 5

Insert the second symbol Ctrl. + F8, which will have the functions of a second button.
In this symbol name text about us.
Select the option type Movie Clip.

menu-button-05.gif

Step 6

In this symbol (text about us). Write the word ABOUT US. Text Tool (T).
Text properties are static text, put this text in coordinates X: 0.0 Y: 0.0, select the text that you like (Tahoma), 12.0 pt type size and text color # FFFFFF.

menu-button-06.gif

Step 7

Repeat steps 3 or 4, that is to get 3 symbols.
This will have 5 symbols in the library text gallery, text services, text contact, about us text and text home.
In each of the symbols have the word GALLERY, SERVICES, CONTACT, ABOUT US, and HOME, as shown in step 4 or 6.

menu-button-07.gif

Step 8

Now create a symbol Ctrl. + F8, attach button multiple by name.
Select the option Type button.

menu-button-08.gif

Step 9

Located at the command multiple button, select the Hit frame in the timeline and then insert a keyframe F6.
Select the Rectangle tool (R), draw a rectangle (the dimensions are not important). Used as fill color for the rectangle # FFFFFF.

menu-button-09.gif

Go to part 2

Go to part 3

View swf movie

Register here to comment and rank Tutorials and Articles

 
spacer
Creativa Int Network: Arte Creativo - Club de Poesía - Creativa Int - Dominio Uruguay - Ecos Regionales
Entrepreneur Help - Foro Creativo - Futbol Paraguay - Hosting Creativa Int - Más Tutoriales - Adobe Flash Tutorials
Recetas de Cocina - Ruta Interior - Sólo Photoshop - Taller Webmaster - Travel México