Creating Top Panel in Flash along with navigation bar

Top panel in Flash speeds up the whole process of web site designing. This also ensures attentions of the visitor on focused area of the site as highlighted points / features can be incorporated with Animation & sound. As major area of the page is available to incorporate keyword rich text, site passes the most important criteria for search engine friendliness. Looking at all these important factors we have decided to cover current newsletter on creating Flash Top Panel containing menu buttons.

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

Movie Properties

1. Create a new movie with dimensions of 779px. X 210px. and fps = 31 with white color as Background Color.

2. Save the flash file as 'toppanel.fla'

Creating Background

1. In Photoshop create a .png image of top panel and name it as 'trace'

2. In Flash choose File > Import to import trace.png for our reference

3. Rename the Layer1 as 'Trace'

4. With the help of Eyedropper Tool choose the background color at the spot as shown in the image

5. Choose Window > Color Mixer

6. In the Color Mixer panel, choose 'Add Swatch' from the menu to store the selected color

7. Similarly select another color from the background and store it into flash so that we can create a gradient background for the top panel

8. In the Color Mixer panel, select Fill Style as 'Linear' and select the two colors which we have stored.

9. Choose Insert > Layer to insert a new layer above Trace layer

10. With the help of Rectangle Tool create a rectangle of width 779px. and height 210px. to match the stage size

11. The rectangle gets filled with the linear gradient. But we want the gradient effect from top to bottom

12. Choose Paint Bucket Tool from the Tool Box, click it on top of the rectangle and drag the mouse downward so we get gradient fill as shown in the image

13. Select the rectangle and choose Insert > Convert to Symbol

14. Convert it into a Graphic with Center registration point selected and name it as 'background'

15. Rename the layer as 'Background'

For animating objects in the top panel we have created separate .png images from Photoshop like center_panel.png, globe1.png, liks_panel.png, map.png, white_line.png etc.