|
Dear
Friend,
Hello
& welcome back to Firewire,
your friendly guide to the exciting world of web-design
& web-solutions!
It’s
a frequent requirement on certain web site, to cross
promote the product, while user is reading information
about particular product or services, pointing his attention
on relevant products / services helps site owner to
retain visitor for more time on the site & increasing
the probability of taking him/her to the order page.
Animated banners serve this purpose. As a web designer,
you can always recommend this option to your client.
This systematic guide will help you to understand &
create model banner using Flash MX.
Click
here to download the source (.fla) file.
|
There
are different banner sizes. Some of the sizes are given below
for your reference.
| Dimension
(in Pixel) |
Type |
|
468
x 60
|
Full
Banner |
|
392
x 72
|
Vertical Navigation Bar Banner |
|
234
x 60
|
Full
Banner |
|
125
x 125
|
Half
Banner Square |
|
120
x 90
|
Button Banner |
|
120
x 60
|
Button Banner |
|
88 x 31
|
Micro Button Banner |
|
120
x 240
|
Vertical Banner |
In
this example we will learn to & animate 392 x 72 Pixel
Banner as shown below,
1.
Create a new movie with dimensions of 392
px X 72 px and fps = 24
with white as background
color.
2.
Save this file as 'banner.fla'.
1.
Rename 'Layer 1' as 'Blue Bg'
2.
On the layer named as 'Blue
Bg',
draw a rectangle with the 'Rectangle Tool'  ,
width = 392 px, height = 72 px, color value of the
fill = #184171
3.
Select the outline of the rectangular object and delete it.
4.
Select the rectangular object, choose
Window > Info
and
in the Info panel, keeping top-left Registration
point selected, set x position = 0 and y position
= 0.
5.
Select the rectangular object, convert it into a Movie
Clip (choose
Insert> Convert to Symbol)
with the center Registration point selected and name
it as 'dark blue bg'
1.
Insert a new layer (Choose Insert
> Layer) above the
layer named as 'Blue
Bg'
2.
Rename the layer as 'Green Object'
3.
With the help of 'Pen Tool' 
draw the outline of the curved object as shown in the image
given below.
4.
Use the 'Paint Bucket Tool' 
to apply Solid Fill in the green object outline with color
values as #71D345
5.
Select the outline of the curved
object
and delete it.
6.
Select the curved
object,
choose
Window > Info
and
in the Info panel, keeping top-left Registration
point selected, set x position = 101 and y position
= 0.
7.
Select the curved
object,
convert it into a Movie Clip (choose
Insert> Convert to Symbol)
with the center Registration point selected and name
it as 'green curve'
1.
Insert a new layer (Choose Insert
> Layer) above the
layer named as 'Green
Object'
2.
Rename the layer as 'Yellow Object'
3.
With the help of 'Pen Tool'
draw the outline as shown in the image given below.
4.
Use the 'Paint Bucket Tool'
to apply Solid Fill in the yellow object outline with color
values as #FFCC00
5.
Select the outline of the rectangular
curved object
and delete it.
6.
Select the rectangular
curved object,
choose
Window > Info
and
in the Info panel, keeping top-left Registration
point selected, set x position = 0and y position
= 0.
7.
Select the rectangular
curved object,
convert it into a Movie Clip (choose
Insert> Convert to Symbol)
with the center Registration point selected and name
it as 'yellow bg'
8.
Select the layer
named as 'Yellow Object' and drag it below the layer
named as 'Green Object'.
|
