Creating a Photo Scrapbook with Flash

This week we are going to create a photo scrapbook using Flash MX 2004. The goal for this project is to create an easy and fun photo viewing application that allows the user to drag pictures within the movie and bring the chosen picture to the front for easy viewing.

Click here to view and download the source files used in this tutorial

To start things out, choose the pictures that you want to include in your Scrap Book. To help keep the design less cluttered I chose 5 pictures. You can add more pictures as needed using the same process.

Now open Flash and create a new Flash document. As with most Flash projects you are going to want to change the document properties to suit your needs. Open the document properties dialog box by going to Modify > Document or CTR+J.

Once the Document Properties dialog box is open change the dimensions of the project to fit the needs of your pictures. Take a look at your pictures and find a size that will allow for overlapping so the user will be able to see that there are more pictures below and around the currently selected image. I changed the properties for my project to 500px by 500px. Also, you may want change your frame rate to 30 fps. This will keep the pictures from stuttering as they are dragged across the movie area.

Now it’s time to import your images into your movie. Go to File > Import and select either to import to the stage (your work area) or to import to the library. I chose to import to the library so I could work with one image at a time. Once you have selected your files and imported them it’s time to start adding pictures to your scrapbook.

Open your library panel and select one of your images and drag it to your work area (CTR+L).

For each of your images will need repeat the next few steps in order to add interactivity to your scrapbook.

With the image select hit F8 to convert your image to a symbol. Once the dialog box is open to convert your image to a symbol select the movie option and name your instance for future reference. Hit OK.

With your movie clip selected open your behaviors panel (SHIFT+F3). Now click on the blue plus button in the top left hand corner and select Movieclip > Start Dragging Movieclip. This will open a dialog box that lets you select which movie clip to drag and if it should be relative or absolute. Since you already selected your movie clip it should already be selected. I used relative for this project so make sure relative is selected and hit OK.

By default Flash will select the on release event. Simply click on the box with on release and select on press.

Again, click the blue button and select movie clip, but now select bring to front. Hit ok on the options dialog box and make sure to change the on release event to on press.

Now do this again except this time select the stop drag option. Hit OK when it tells you this behavior will stop the dragging of any movie clip. Keep the on release event for this option.

Now repeat this for each of your pictures. Once you have all of your pictures finished it’s time to test your movie. If all of the options were selected properly you should have a simple easy to use photo scrapbook to share with your friends.

If you have any questions or comments about this tutorial let me know! I’ll be glad to help.

Having created the outlines for FlashNewz and FLADownloads, John has become a strong voice in the Flash Community. His reviews and tutorials give great insight and knowledge to readers around the world. He has a keen eye for what’s hot and what’s not in the Flash world. He has also developed and continues to run his own flash portal as a side project to keep his mind on the Flash community

Being a key designer for advertising creative, he’s got style when it comes to grabbing readers attention. With a proven track record, there isn’t much this guy can’t handle.