First of all create a new Flash document using the size and frame rate shown below. Set the back ground color to #6A6A6A. For tutorial you will need four images with a size of 280x280. Name them image1 - image4 and them import them into the library (file > import > import to library).
Step 2.
Create a circle without an outline, using a darker tone (#494949) for the color, and with the dimensions 350x350
Step 3.
Convert (F8) the circle into an MC (Movie Clip Symbol), named "slideshow".
Step 4.
Double click on the MC to go inside of it. Create a folder called "image", with a layer called "mask" and "image" inside of it. Name the layer, with the circle on, "border".
Step 5.
Click on the 1st frame of the "image" layer and drag "image1" onto the stage. Set the positiion of it as showin in the properties panle below.
Step 6.
Create a circle (with an outline) on the mask layer
Step 7.
Convert the image into an MC called allImages. Click "Export for Actionscript", which will give it an identifier of the same name as the MC. This identifier is needed so that many instances of the the MC can be created, using Actionscript.
Step 9.
This is the 2nd part of this Flash tutorial. Next, right click on the mask layer and choose "mask".
Step 10.
Convert (f8) the circle into an MC named "mask". Since we will be add 4 images we can reuse the circle for all the mask.
Step 11.
We will need to reuse this first image for when the slideshow restarts, so convert (f8) the circle into an MC named "image1".
Step 12.
Click on the 60th frame of the image layer and press f5 to create the frames for the image.
Step 13.
This is the 3rd part of this Flash tutorial. Next, create a key frame (f6) at frame 30 of the mask layer. This frame will be the start of where the mask shrinks, revealing another image below.
Step 14.
And thena another one at frame 60
Step 15.
While the 2nd key frame is still selected, change the x&y position of the mask to 160 and the size of it to 1x1 pixel. The mask should now be tiny and in the center.
Step 16.
Right click on a frame, of the mask layer, inbetween the 2 key frames and choose "create Motion Tween".
Step 17.
Playing the Flash movie now should show the viewable area of the image shrink in size.
Step 18.
This is the 4th part of this Flash tutorial. Next, create another folder called "image2", aswell as a layer called mask and image.
Step 19.
We're going to do the same as we did with the 1st image but, and make a mask over the 2nd image. Drag the mask MC from the library on to the mask layer and create a key frame at frame 90. When the image1 mask has shrunk, revealing the 2nd image, the 2nd image will be visible until the image2 mask starts shrinking.
Step 20.
Create a 2nd key frame at frame 90, set the x & y position of the mask to 160, and the size to 1x1 pixel.
Step 21.
Right click inbetween frame 90 and 120, of the mask layer, to create a motion tween.
Step 22.
This is the 5th part of this Flash tutorial. Next, extend the frames of the image layer to 120.
Step 23.
Right click on the mask ley and choose "mask" from the menu.
Step 24.
Repeat the process for image3, starting the motion tween at frame 150 and ending it at frame 180.
Step 25.
This is the final part of this Flash tutorial. Next, add image 4 and create a mask, with the motion tween starting at frame 210 and ending at frame 240.
Step 26.
The slideshow needs to loops back to image1, which is why we made it into an MC at the start. So, create a new folder called "image1b" and drag the the image1 MC a new layer called "image" and place at mask on a layer called "mask". Extend the frames of both the layers to 240. There is no need to create a tween, because when the movie end it will restart at frame 1.
Step 27.
Lastly, extend the border layer to frame 240.
Save the file and publish the SWF, bringing you to the end of this Flash tutorial! :) Enlarge Slideshow | Download FLA
