Flash - Image Transition
Some time ago, possibly two months but maybe a little less I bought Adobe Creative Suite 3. Now, I’ve been fairly busy and so I haven’t really had a chance to explore it much, to be honest I still haven’t really. I’ve investigated Photoshop but today I investigated Flash. I didn’t want to do anything too complicated, just a header which faded in and out of different images. Try as I might though I could not get it to work, I looked up several tutorials and none of them were what I wanted and quite frankly difficult to follow. So, for future reference and if anybody else wants to know, here’s what I did for three images.
1) Create a new Flash File (Action Script 3)
2) In the properties tab (at the bottom) resize the stage to be the right size (600 x 200)
3) File - Import - Import to Stage
4) Make sure the X and Y are on 0
5) Rename the layer appropriately
6) Modify - Convert to Symbol - Movie (name the file appropriately)
7) Click on the first frame and in the properties tab choose a motion tween
8. Click on frame 20 then Insert - Timeline - Keyframe, repeat for 40 and 50
9) With frame 50 selected click on the stage area and select the movie. In the properties tab select alpha as the colour and 0%.
10) Create a new layer and repeat steps 3 - 7
11) Move the layer down so the first layer is above the second in the palette. Select keyframe 51 and go Insert - Timeline - Keyframe. Repeat for 70, 90 and 100.
12) Repeat Step 9 only with frame 100 selected and step 10.
13) Move the layer down to the bottom of the palette. Select keyframe 101 and go Insert - Timeline - Keyframe. Repeat for 120, 140 and 150.
14) Repeat step 9 with frame 150 selected.
15) Create a new layer, from the library drag your first image over. Make sure x and y are zero. Repeat step 5, 6 and 7.
16) Select keyframe 151 and go Insert - Timeline - Keyframe
17) Go Control - Loop Playback and then Control - Play. Your banner should transist between images as expected.
You can alter the keyframes I specified depending on how long you want each image to appear on the screen for and how fast you want the fade to be. Experiment!
Click here to see what I produced (sizing incorrect, should be 600×200).
Tags: Flash