Create Flash layout movie clip graphics and buttons with mouse over effect

Page : 1 2 3 4

INTRODUCTION

Dear Friend,

Hello, & welcome back to Firewire, your friendly guide to the exciting world of web-design & web-solutions! As you know changes in the web industry are very fast & every web designer must be ready for the changes. Clients’ need also changes with the change of the technology.Flash has added little magic to the web sites. Due to streaming media technology it is now possible to add sound & animation to the web site, & that too on a low bandwidth. All the latest browsers support Flash Player making flash sites possible for every Internet user.Difference between HTML site & Flash Site is like a beautiful doll doing nothing & a beautiful doll which twinkles eyes with sound. Clients understand this very well. He wants his web site with animation & sound. When text is, huge & sites are more of the content oriented, flash is not recommenced, but an intro in flash is now expected & welcomed. Many clients now prefer two versions of a web site HTML & FLASH.

As a web designer you must be ready to provide Flash designing as one of your services. Changes in the web are common & frequent, alert web designer must anticipate change & should adapt it quickly.

To begin, this newsletter emphasizes on the designing aspect of web designing. You can design great-looking flash websites very easily.

How about getting to the basics? Lets starts with the new flash layout.

This news letter contains:

How to start with the flash layout?

Create graphics

Create buttons.

Give mouseover effect to the buttons.

Use motion tween.

Create a movie clip.

Apply frame actions.

HOW TO START A LAYOUT?

Before starting a layout in Flash, make a drawing of the layout on a piece of paper to decide the interface & color scheme.

flash website templates

Take new file in Flash.

1.	Choose Modify > Movie.
2.	Set Frame Rate to 60 fps and Dimension of 779 px. X 434 px. Select white as background colour.

3.	Choose Modify > Scene
4.	Rename the scene as 'Index'.
5.	Make a border for the layout and divide the layout(vertically) in two divisions. i.e. 300px. X 479px.

6.	Divide the left part into three sub divisions. i.e. Red , Yellow and Purple.

7.	Select the red part then Choose Insert > Convert to symbol and give a name to it. i.e. red

Similarly, convert the other two patches into two graphics.

To give a shadow effect to the graphics: -

1.

Choose Window > Library > red (graphic)

2.

Double click the graphic. Select Insert > Layer

3.

Copy the red patch of layer 1 and paste it on the Second layer.

4.

Select layer 1 and change the color of the patch from red to black.

5.

Choose Modify > Curves > Soften edges
Set the Distance: 10 Number of steps : 10 Direction : Inset

flash website templates

6.

Convert the shadow into graphic (Choose Insert > Convert to symbol) and give it a name i.e. red shadow.

flash website templates

7.

Select Modify > Instance > Color Effect > Alpha :70

flash website templates

8.

Shift the shadow slightly outwards to give a proper effect.

Similarly, make shadow graphics for purple and yellow graphics and place them properly.

Now make two vertical strip graphics of purple and yellow color to fit in the right side of the layout. These graphics balance the layout with left side color panels.

1.

Give a slight shadow effect to the Yellow line graphic.

2.

Set the Yellow line graphic layer, above the Purple line graphic.

flash website templates

© Image Online 2001-2003