|
Dear
Friend,
Hello
& welcome back to Firewire,
your friendly guide to the exciting world of web-design
& web-solutions!
In
this newsletter 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.
|
1.
Create a new movie with dimensions of
418px.
X 130px. and
fps = 30
with white color as Background
Color
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'
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
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.
15. Choose
Window > Library > about us button
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
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
|
