Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Spore Flash Menu
Your Ad Here

Spore Flash Menu


Step 1

Open new document (200*300 for example). Draw square for first button of your menu.

Spore Flash Menu image 1

Step 2

Colour your button with gradient tool.

Spore Flash Menu image 2

Step 3

Here is your first button.

Spore Flash Menu image 3

Step 4

Now copy your buttons and make all buttons for your menu.

Spore Flash Menu image 4

Step 5

That's OK, we now have all backgrounds for the buttons. Lock "background" Layer (or Layer 1 if you didn't rename your Layer), and create new layer, and name it "links".

Spore Flash Menu image 5

Step 6

On new layer, with Text Tool, add text to your buttons.

Spore Flash Menu image 6

Step 7

OK, we have text now. Lock "links" Layer and add another Layer (rotating_logo).

Spore Flash Menu image 7

Step 8

On new Layer, import picture of the Spore logo.

Spore Flash Menu image 8

Step 9

Now select Spore logo wich we imported before, and convert him in Movie Clip (F8).

Spore Flash Menu image 9

Step 10

When you finish, double click on Logo, to enter in Movie Clip.

Spore Flash Menu image 10

Step 11

Now select Logo, and again convert him in Move Clip (F8).

Spore Flash Menu image 11

Step 12

You should have this.

Spore Flash Menu image 12

Step 13

Now make new keyframe (using F6) on 2nd and 10th frame.

Spore Flash Menu image 13

Step 14

Than Create Motion Tween between 2nd and 10th frame.

Spore Flash Menu image 14

Step 15

This is what you had to have.

Spore Flash Menu image 15

Step 16

Now select your Logo and use Free Transform Tool (Q) to rotate Logo.

Spore Flash Menu image 16

Step 17

Rotate 90 degrees CCW.

Spore Flash Menu image 17

Step 18

After rotation, Logo should stay like on picture bellow.

Spore Flash Menu image 18

Step 19

OK, now add new Layer (action), and on first frame add stop(); action code.

Spore Flash Menu image 19

Step 20

On last frame of action Layer, add code gotoAndPlay(2). This means that everytime when action come to last frame, shoud go back to 2nd frame and loop action. With this code, we escape 1st frame, where we have code stop();. If we don't use this, our animation will rotate Logoo for only 90 degrees, and we want animation rotating all the time.

Spore Flash Menu image 20

Step 21

Now go back to _root of your flash movie.

Spore Flash Menu image 21

Step 22

Add ne Layer (buttons).

Spore Flash Menu image 22

Step 23

Draw square around your first button.

Spore Flash Menu image 23

Step 24

It's OK, you should have this.

Spore Flash Menu image 24

Step 25

Select square you just drawn, and convert him in to Button (F8).

Spore Flash Menu image 25

Step 26

OK, we now have our button, but can't see our background and text. Doubleclick to enter in to your button.

Spore Flash Menu image 26

Step 27

Now, drag frame from UP sector, and drop it on HIT sector.

Spore Flash Menu image 27

Step 28

Like this.

Spore Flash Menu image 28

Step 29

Go back to root...and holaaa, we can see now our button. Don't worry, colours will be fine, in flash project file, you see button, but in the final project you won't.

Spore Flash Menu image 29

Step 30

Now copy button on all other button backgounds (Left mouse click for drag and holding Ctrl for copy).

Spore Flash Menu image 30

Step 31

Here is the second...

Spore Flash Menu image 31

Step 32

...and all buttons

Spore Flash Menu image 32

Step 33

Now hide buttons Layer, so we can work on lower Layers. Unlock rotating_logo Layer.

Spore Flash Menu image 33

Step 34

Select your logo, and under properties menu, set name for your logo Movie Clip ("logo01").

Spore Flash Menu image 34

Step 35

Than copy your logo on all buttons (again, Left mouse Drag and Ctrl for copy).

Spore Flash Menu image 35

Step 36

Now rename all other logos. For second, on Properties menu, write "logo02". Do the same with all other buttons.

Spore Flash Menu image 36

Step 37

"logo03"

Spore Flash Menu image 37

Step 38

"logo04"

Spore Flash Menu image 38

Step 39

"logo05"

Spore Flash Menu image 39

Step 40

and "logo 06"

Spore Flash Menu image 40

Step 41

That's fine. Now lock again "rotating_logo" Layer, and unhide buttons Layer.

Spore Flash Menu image 41

Step 42

Now we'll ad action code for all buttons and tell them, what they shoud do on click, or rollOver. Select fisrt button and add action code like on picture above.

Spore Flash Menu image 42

Step 43

Do the same with all other buttons. Different is name of logo (in this case it's logo02), and page on wich you want to go when this button is pressed (in this case: http://www.stutorials.com/photoshop.php).

Spore Flash Menu image 43

Step 44

Same thing wit 3rd button...

Spore Flash Menu image 44

Step 45

....and 4th...

Spore Flash Menu image 45

Step 46

...5th...

Spore Flash Menu image 46

Step 47

....and the last one. After doing all this codes, you just finished your Spore Flash Menu.

Spore Flash Menu image 47

Final movie

Test your movie. You should get something like this.



Author's URL: stutorials.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Spore Flash Menu"

Only registered users can write comment

No comments yet...