Spore Flash Menu

Step 1

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

Step 2

Colour your button with gradient tool.

Step 3

Here is your first button.

Step 4

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

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".

Step 6

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

Step 7

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

Step 8

On new Layer, import picture of the Spore logo.

Step 9

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

Step 10

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

Step 11

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

Step 12

You should have this.

Step 13

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

Step 14

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

Step 15

This is what you had to have.

Step 16

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

Step 17

Rotate 90 degrees CCW.

Step 18

After rotation, Logo should stay like on picture bellow.

Step 19

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

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.

Step 21

Now go back to _root of your flash movie.

Step 22

Add ne Layer (buttons).

Step 23

Draw square around your first button.

Step 24

It's OK, you should have this.

Step 25

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

Step 26

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

Step 27

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

Step 28

Like this.

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.

Step 30

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

Step 31

Here is the second...

Step 32

...and all buttons

Step 33

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

Step 34

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

Step 35

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

Step 36

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

Step 37

"logo03"

Step 38

"logo04"

Step 39

"logo05"

Step 40

and "logo 06"

Step 41

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

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.

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).

Step 44

Same thing wit 3rd button...

Step 45

....and 4th...

Step 46

...5th...

Step 47

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

Final movie

Test your movie. You should get something like this.