|
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 Dynamic Images
Slider in Flash MX. This dynamic images slider loads
five big images from the images folder, which can be
viewed in a sliding manner when the buttons in the layout
are clicked. We can see this type of animation in many
sites for displaying the text content.
By
clicking any of the buttons, big images will be displayed
in a sliding manner.
Click
here to download the source (.fla) file.
|
| Note |
To
create this flash dynamic images slider we should have
5 images. |
| The
images size should be 418 px X 150 px |
1.
Create a new movie with dimensions of 418
px X 240 px and fps =
24 with white
as background color.
2.
Save this file as 'image_slider.fla' at the same destination
where images folder is kept.
1.
Rename 'Layer 1' as 'Grid Lines'
We
have to create dynamic grid lines on the layer named as 'Grid
Lines', same as we had created dynamic grids in our previous
newsletter named as 'Dynamically creating grid using action
script in Flash 5.0'. Instead of a square we are going
to use a line and do some modification in the ActionScript
as shown below.
//
Variable xgridlines is defined for number of grid lines on
x axis
xgridlines = 81;
//
Variable ygridlines is defined for number of grid lines on
y axis
ygridlines = 2;
// Variable distance is defined for
the distance between each grid
distance = 3;
2.
Choose Control
> Test Movie
Grid
Lines will appear as shown in the image given below.
1.
Insert a new layer (Choose Insert
> Layer) above the
layer named as 'Grid
Lines'
2.
Rename the layer as 'Top Panel'
3.
With the help of 'Pen Tool' 
draw the top panel outline with color value #9BA4B2
as shown in the image given below.
4.
Use the 'Paint Bucket Tool' 
to apply Linear Fill in the top panel outline with color values
as #9BA4B2 and #EBEFF4
5.
Select the top panel object along with its outline, convert
it into a Movie Clip with the top-left Registration
point selected and name it as 'top panel'
1.
Insert a new layer (Choose Insert
> Layer) above the
layer named as 'Grid
Lines'
2.
Rename the layer as 'Top Panel Effect'
3.
Select frame 1 on the layer named as 'Top Panel'
4.
Choose
Edit
> Copy
5.
Hide the layer named as 'Top Panel'
6.
Select frame 1 on the layer named as 'Top Panel Effect'
7.
Choose
Edit
> Paste in Place
8.
Choose
Modify
> Break Apart
9.
Use the 'Paint Bucket Tool'
to apply Solid Fill in the top panel effect outline with color
values as #535E6C
10.
Select half portion of the object using the arrow tool and
Press Shift + Right Arrow as shown in the image given
below.
11.
Select other half portion of the object using the arrow tool
and Press Shift + Left Arrow
12.
Select the top panel effect object along with its outline,
convert it into a Movie Clip with the top-left Registration
point selected and name it as 'top panel effect'
1.
Insert a new layer (Choose Insert
> Layer) above the
layer named as 'Top
Panel'
2.
Rename the layer as 'Bar'
3.
On the layer named as 'Bar', draw a rectangle with
the 'Rectangle Tool'  ,
width = 418 px, height = 3 px, color value of the outline
= #000000, color value of the fill = #535E6C
4.
Select the rectangular object along with its outline, convert
it into a Movie Clip with the top-left Registration
point selected and name it as 'bar'
5.
Select the Movie Clip named as 'bar', choose
Window > Info
6.
In the Info panel, set x position = 0 and y
position = 200, keeping top-left Registration point
selected.
1.
Insert a new layer (Choose Insert
> Layer) above the
layer named as 'Bar'
2.
Rename the layer as 'Button Panel'
3.
On the layer named as 'Button Panel', draw a rectangle
with the 'Rectangle Tool' ,
width = 418 px, height = 37 px, color value of the
outline = #FFFFFF, color value of the linear fill
#9BA4B2 and #EBEFF4
4.
Select the rectangular object along with its outline, convert
it into a Movie Clip with the top-left Registration
point selected and name it as 'button panel'
5.
Select the Movie Clip named as 'button panel',
choose Window > Info
6.
In the Info panel, set x position = 0 and y
position = 203, keeping top-left Registration point
selected.
|
