| Dear
Friend, Hello
& welcome back to Firewire, your friendly
guide to the exciting world of web-design & web-solutions! This
newsletter covers Free Flash MX Tutorial along with Free Flash template to get
practical training. Transitions
between 2 images gives a very elegant feel in a Website or Presentation. When
there are many images and it has to be displayed in a loop, transition plays a
very important role by giving a blending effect when the image changes. As the
role of transitions is very vital we have covered this current newsletter on creating
"Image Transitions in Flash Mx" Click
here to download the free flash template with source (.fla) file. |
1.
Create a new movie with dimensions of 300px. X 175px. and
fps = 31 with white color as Background
Color.
2. Save
the flash file as 'transition.fla'
3.
In
Flash choose File > Import to import image1.png
4.
Rename the Layer 1 as Image 1
5. Select
the Image 1 and choose Insert > Convert to Symbol 6.
Convert it into a Movieclip with Top left as a registration point selected
and name it as 'img1' 7.
Choose Insert > Layer
to Insert the new
layer above Image 1 8.
Rename the Layer 2 as Transition 9.
With the help of Rectangle Tool create a rectangle
of width 15px. and height 175px.( You can change the size as per
your requirement i.e. width 25px and height 175px) 10.
Select the rectangle and choose Insert > Convert to
Symbol 11.
Convert it into a Movieclip with Top left as a Registration point selected
and name it as 'transition'
12.
Choose Window > Align 13.
Align the transition MovieClip
to Left and Top
to the stage
14.
Select the transition MovieClip Right click
on it and Choose Edit In Place 15.
Select the rectangle and choose Insert > Convert to
Symbol 16.
Convert it into a Movieclip with Top left as a registration point selected
and name it as 'white bar' 17.
Rename the Layer 1 as white bar 18.Choose
Edit > Copy Frames 19.
Choose Insert > Layer
to Insert the new
layer above white bar.
Copy white bar Movie Clip and Paste
it in new layer 20.
Select the newly added layer and Choose Edit > Paste
Frames 21.
Automatically it will take the layer name as 'white bar'. 22.
Choose Window > Info 23.
In the Info panel, keeping Top left Registration point selected,
set x position = 15 px and y position = 0 px.(if the width is 25
then the x position should be 25 px and y position should be 0px)
24.
Repeat the same procedure upto it is not cover the over all stage. for that set
the x cordinate respectivley as given below,
| No
| X-
Position | No | X-
Position | | 1 | 30 | 10 | 165 |
| 2 | 45 | 11 | 180 |
| 3 | 60 | 12 | 195 |
| 4 | 75 | 13 | 210 |
| 5 | 90 | 14 | 225 |
| 6 | 105 | 15 | 240 |
| 7 | 120 | 16 | 255 |
| 8 | 135 | 17 | 270 |
| 9 | 150 | 18 | 285 |
(if
You are taken width = 25 then for no1 X position should be (25+25=50) last value
of X position should be 275) 25.
Select frame 2 of all layer and choose Insert >
Keyframe 26.
Select frame 12 of all layer and choose Insert
> Keyframe 27.
Select keyframe 2 of all layers and in the Properties
panel select Tween as 'Motion'
and set Easing value as '100' | 
