|
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 photo gallery in
Flash 5.0. This photo gallery contains seven photo thumbnails
in a horizontal scroll which can be operated through
the scroll buttons as well as with toggle keys on the
keyboard.
By
clicking any of the thumbnail in the scroll, the big
screen will display a full size image of that particular
thumbnail.
Click
here to download the source (.fla) file.
|
| Note |
To
create this flash photo gallery we should have 7 images
and their respective thumbnails. |
| The
main image size should be 424x242 |
| The
thumbnail size should be 113x62 |
1.
Create a new movie with dimensions of 500px
X 400px and fps=60
with white as background
color.
We
have to create thumbnails as buttons because we have to assign
On Mouse Event actions on each thumbnail.
1.
Choose Insert
> New Symbol
2. Create a Button
and name it as 'thumb1'
3.
Choose
File > Import
4. Select the thumbnail you have created
and press Open
in the Import panel.
5. Rename the layer as 'Thumbnail
1'
6. Insert a new layer (Choose
Insert > Layer)
above the Thumbnail 1
layer.
7. Draw a rectangle outline as a border
of the thumbnail.
8. Similarly,create remaining 6 thumbnail buttons and give
them names accordingly i.e
thumb2, thumb3, thumb4.......
Now
our 7 thumbnail buttons are ready.
Let's put them in a row so that they can scroll properly.
1.
Choose
Insert >
New Symbol
2. Create a movie clip and name it as
'scroll'.
3.
Choose
Window > Library > thumb1
button
4. Drag the thumb1
button from the library on Layer
1
5. Place thumb1
button exactly at x
position=0 and y
position=0 (Choose
Window > Panels > Info)
6.
Rename the layer as
'Thumb 1'
7. Insert a new layer (Choose Insert
> Layer) above the Thumb
1 layer.
8. Choose Window
> Library > thumb2 button
9. Drag the thumb2
button from the library on newly added
layer above the Thumb 1
layer.
10. Place thumb2
button exactly at x
position=154.6 and
y position=0 (Choose
Window > Panels > Info)
11.
Rename the layer as 'Thumb 2'
12. Similarly drag the remaining buttons and place them on
different layers.
13. Select thumb1 button on Thumb 1
layer.
14. Choose Window > Actions.
15. Type the following actions in the Object Actions panel.
|
on
(release)
{ |
|
|
loadMovie
("clip1.swf", "_root.screen"); |
|
} |
*
*
We will know more about this action
in the later part of this newsletter.
Similarly, assign this action to other
thumbnail buttons. Just change the name of the loading swf
name accordingly i.e for
thumb2 - clip2.swf , for thumb3 - clip3.swf and
so on.
The placings for these buttons are given
as below:
|
thumb3
|
x
position=309
|
y
position=0
|
|
thumb4
|
x
position=463.6
|
y
position=0
|
|
thumb5
|
x
position=618.1
|
y
position=0
|
|
thumb6
|
x
position=772.9
|
y
position=0
|
|
thumb7
|
x
position=927.5
|
y
position=0
|
|
16.
Now you can see the thumbnails in one line and at equal distance.
17. Go back into the Scene 1
18. Choose Window > Library >
scroll movie clip
19. Drag the scroll movie clip on the stage at Layer
1
20. Rename the layer as 'Scroll Movie Clip'.
21. Place the scroll movie clip at x
position=97 and y position=330
22. Choose Window > Panels >
Instance
23. In the Instance panel give an instance name 'scroll'
to the scroll movie clip.
|
