In this tutorial I will show you how to make a VERY simple fade gallery in flash, 100% done in the timeline. This is the most simple way of creating this effect, useful for website headers, banners and general looping through images. Of course this can always be done using photoshop to make an animated gif, but we’ll save that lesson for another day. Here is an example of your final result:
STEP 1
Open flash and create a new Actionscript 2 file. Set the framerate to 31, rename the first layer ‘pic 1′. You will need to have pre-prepared 4 images for this example, at the same size as your flash stage (default 550 x 400). U now need to import these images into tthe flash library. Go to File > Import to library and select your 4 images, click ok. These images will now appear in your flash library here:
STEP 2
On frame 1 of your ‘pic 1′ layer, drag your first picture from the library and drop it on stage. To get it in the correct position, set the x: and y: positions in the properties panel to 0. This will ensure your image sits in the correct place. Now press f8 to convert to symbol, select graphic and name it ‘GPH_pic1′.Insert keyframes(f6) at frame 30, 90 and 120.
STEP 3
On frames 1 and 120, select your graphic and in the properties panel select the ‘color’ dropdown box and select alpha, then set to 0.
Create motion tweens between 1 - 30 and 90 - 120. This will fade your image in and out.
STEP 4
Create a new layer named ‘pic 2′ and repeat steps 2 & 3 with your second image, then again for the third image. The fourth image is done slightly differently as it is the last in our sequence, and needs to loop back around to the first.
STEP 5
Create a new layer called ‘pic 4′. Drag the image on stage, set it’s position and convert to symbol like you did with the other images. insert a new key frame on frames 30, 60 and 120. <— Note the different frames! —>.
On frame 30 set the alpha to 0, and add motion tweens from frames 1 - 30 and 30 - 60. Now all we need to do is set all of the frames in the correct positions on the timeline. Select frame 1 on your layer called ‘pic 2′, hold shift, and select frame 120. You should now have all 120 frames on this layer selected. Click and drag frame 1 up to frame 90. This will shift all of your frames across by 90 frames. Your timeline at this point should look now like this:
STEP 6
Select frame 1 on layer ‘pic 3′, hold shift and select frame 120. Click and drag the from the first frame upto frame 179. Next, select frame 31 on layer ‘pic 4′ and insert new frame(f5). Convert this frame to a keyframe(f6). Hold shift, and select frame 121. Click and drag once again from frame 1 and place it on frame 268. Remove the tween between frames 30 and 268. Hit control and enter, and admire your gallery! But wait, something is not right, as we are getting an image fade right at the start…
STEP 7
Select frame 29 on layer ‘pic 1′, hold shift, and select the same frame on ‘pic 4′. Hit f6 to enter keyframes. Select frame 1 on layer ‘pic 4′, hold shift and select frame 29 on layer ‘pic 1′ to make the following selection:
Right click the selection and cut frames. Right click the selection again and remove frames. You will notice all of the frames shuffle to the left. Go to the end of your timeline and select frame 329 on ‘pic 4′, hold shift and select layer 329 on ‘pic 1′ to make a group selection. Right cick > Paste frames. Now hit control and enter, you will see there is no longer a problem as the changing frames are now at the end of the sequence.
There are many ways to create fade gallerys, but for banners, headers etc this way is just fine. For larger gallery’s xml importing is a much better way, but that is for another day!
The Dude
Questions? Ask them! Sign up now and email The Dude, or leave a comment below.
Did this post help you? If so help us continue to grow and Digg this page!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
