In this article we are going to make a jumping 3D box menu effect. This is just like a web site menu containing 5 buttons. On click of any of these buttons, a 3D rolling box will appear on top of the respective button.

Click here to download the source (.fla) file.

Movie Properties

1. Create a new movie with dimensions of 418px. X 130px. and fps = 30 with white color as Background Color

Creating Gradient Background

1. With the help of Rectangle Tool create a gradient rectangle of the stage size.

2. Select the gradient rectangle along with its outline, convert it into a Movie Clip (Choose Insert > Convert to Symbol) with the center Registration point selected and name it as 'background'.

3. Also rename the layer as 'Background'

Creating Buttons Menu Bar

1. Create a 5 buttons menu bar in Flash. You can also use an image for the same. Here we have imported panel.png as a button panel image.

2. Choose Insert > Layer to insert a new layer over Background layer and name it as 'Buttons Panel'

3. Choose File > Import to import the button panel image.

4. Select the button panel image, choose Window > Info and in the Info panel set X position = 209 and Y position = 90 with the center Registration point selected

Creating Menu Buttons

1. Choose Insert > Layer to insert a new layer over Buttons Panel layer and name it as 'About Us Button'

2. Using the Text Tool, type 'About Us' on the stage with settings in Properties panel (Choose Window > Properties) as shown in the image.

3. Select About Us text on the stage, choose Insert > Covert to Symbol to convert the text into a Button and name it as 'about us' and set Registration point at center.

4. Choose Edit > Edit in Place to go inside about us button.

5. Rename Layer 1 as 'About Us Text'

6. Select frame at 'Hit' stage.

7. Choose Insert > Frame.

8. Choose Insert > Layer to insert a new layer over About Us Text layer and name it as 'Mouseover'

9. Select and drag Mouseover layer down so that it can come below About Us Text layer

10. Select frame at 'Over' stage and choose Insert > Keyframe

11. Create a mouseover object in Flash or you can also import an image for mouseover. Here we have imported mouseover.png as a button mouseover.

12. Select the mouseover image on the stage and choose Window > Align

13. Press the below shown tabs in the Align panel to place the mouseover image in exact center.

14. Choose Insert > Convert to Symbol to convert the mouseover image into a Graphic and name it as 'button mouseover'. Set Registration point at top left.

16. In Library, click the top right tab to open the Options menu

17. In the Options menu, select 'Duplicate...'

18. Create a duplicate button of about us button and name it as 'products'

19. Double click the products button in the Library to go inside it.

20. Change the About Us text to 'Products' and also rename the layer accordingly.

21. Similarly, create other three buttons i.e. Services, Clients, Contact Us

22. Choose Window > Scene and in the Scene panel select Scene 1 to go back into Scene 1

23. Select about us button and choose Window > Properties

24. In the Properties panel type the Instance Name as 'but1'

25. Insert a new layer above About Us Button layer and name it as 'Products Button'

26. Choose Window > Library > products button

27. Drag the products button on the stage and place it on the frame 1 of Products Button layer.

28. In the Properties panel type the Instance Name as 'but2' for products button

29. Similarly, place the remaining buttons on different layers and assign them Instance Names accordingly i.e. but3, but4, but5

Creating 3D Box Animmation

1. Choose Insert > New Symbol and create a Movie Clip named as 'box'

2. Create a frame by frame animation of 3D rotating box.

3. Here we have created an animation of 21 frames.

The object at frame 1 should exactly match with the object at frame 21 to create a proper animation. The dimensions of the box at frame 1 and 21 should be
110 X 110