Creating a Photo Scrapbook with Flash

Preparing Your Project and Choosing Images

When you decide to build a photo scrapbook in Flash MX 2004, the first step is to keep the design simple. Pick five or six images that you want to showcase; you can add more later if you like. Think about how the pictures will overlap on the stage. The goal is to let users see that more photos exist underneath the one they’re currently looking at. Having a small, curated set keeps the interface uncluttered and makes dragging smoother. Choose pictures that have similar dimensions or crop them so the aspect ratio matches. This makes the final layout look tidy and prevents awkward stretching when you import them into the library.

Open Flash and start a new document. Before you begin placing anything on the stage, you’ll want to tweak the document settings. Go to Modify > Document or hit Ctrl+J to open the Document Properties dialog. Set the stage width and height to a square shape, for example 500 px by 500 px. A square canvas works well for a scrapbook because it gives equal room in all directions for images to float and overlap. If your images are wider than they are tall, you can bump the width a bit to accommodate them. Keep the frame rate at 30 fps to ensure the drag motions feel fluid and there’s no stutter when the user moves pictures across the stage.

In the same dialog, you’ll see a field called “Background color.” If you want your scrapbook to have a neutral backdrop, set this to a light gray or white. Flash will default to white, but you can choose a subtle hue if you prefer. You can also set a “Background image” if you want a patterned or textured background that won’t clash with your photos. After you’ve confirmed the stage size and background, click OK and the document is ready.

Now that the canvas is set, it’s time to get the pictures into Flash. Instead of dragging them directly onto the stage right away, it’s cleaner to import them into the library first. The library lets you work with one file at a time and keeps the stage free from clutter. Go to File > Import > Import to Library. In the import window, choose all the images you selected earlier and click Open. Flash will load them into the library panel. This process can take a few seconds, especially if the files are large, but it saves you from repeatedly opening the same files later.

Once the images appear in the library, they’re still just bitmap assets. Before you can add interactivity, you’ll need to convert each one into a MovieClip symbol. To do that, open the library panel (Ctrl+L), click on the first image, and then hit F8. In the Convert to Symbol dialog, select “MovieClip” from the drop‑down list. Give the symbol a descriptive name that includes the word “image” or a short label, such as “IMG_01.” Naming the symbol makes it easier to remember when you’re setting up behaviors later on. Click OK to create the MovieClip.

Repeat the conversion process for every picture you imported. Naming conventions help keep your library organized. If you have more than a handful of photos, consider adding a prefix like “SCR_” to each name to indicate that they belong to the scrapbook. This extra detail reduces the chance of mixing symbols with other assets from future projects.

At this point, you should have all your images turned into MovieClip symbols sitting in the library. With the document prepared and the assets ready, you’re set to start building the interactive scrapbook. The next section walks through placing the images on the stage, enabling drag behavior, and arranging the stacking order so the chosen picture always appears on top.

Importing Images, Building Symbols, and Adding Dragging Behavior

Begin by dragging the first symbol from the library onto the stage. Position it roughly in the center of the 500 px square. You can move the picture later, but setting a starting point keeps things organized. Once it’s on the stage, press F8 again to confirm it’s a MovieClip. The symbol now appears as an instance on the stage, and its name shows up in the properties panel. This instance name will be the reference point when you attach behaviors, so keep it handy.

With the picture selected, open the Behaviors panel (Shift+F3). The Behaviors panel lets you attach actions without writing code. Click the green plus button in the top left corner, then choose “MovieClip” and “Start Dragging MovieClip.” A dialog appears. Because you already selected the instance on the stage, the dropdown will show it as the default. Leave it selected and choose “Relative” for the dragging mode. Relative dragging means the picture moves in relation to where it was originally placed, not the mouse cursor’s absolute coordinates. Click OK.

By default, Flash attaches the dragging behavior to the “onRelease” event. However, for a scrapbook that feels more immediate, you’ll want the picture to start moving as soon as the mouse button is pressed. Click the “onRelease” checkbox to open the event list, then uncheck it and check “onPress.” This change ensures the picture begins moving when the user clicks, giving a snappier experience.

Next, add a behavior that brings the picture to the front when it’s pressed. Repeat the same process: click the green plus, choose “MovieClip” and “Bring to Front.” In the dialog, keep the instance name selected and hit OK. Change the event from “onRelease” to “onPress” again. This step guarantees that whenever a user clicks a photo, it will appear above all other pictures, making it easier to view.

After that, attach the behavior that stops the drag when the mouse button is released. Click the green plus, select “MovieClip” and “Stop Dragging MovieClip.” The dialog will warn you that this action stops the dragging of any movie clip on the stage. Accept the warning and click OK. Keep the event set to “onRelease.” This final touch ensures the photo stays where the user left it once they let go of the mouse.

Repeat the entire process for each picture in your library. While it may seem tedious, it guarantees that every image has the same interactivity: click to drag, click to bring to front, release to stop moving. You can save time by selecting multiple instances on the stage and opening the Behaviors panel for all of them simultaneously, but the step‑by‑step method makes it clear how each behavior works.

When all pictures have been configured, run a test by pressing Ctrl+Enter. The movie will play, and you should see each image overlapping the others. Clicking on any photo should lift it above the rest, let you drag it around, and drop it anywhere on the stage. The relative dragging keeps the picture in place if you move it to the edge, and the bring‑to‑front behavior ensures that the chosen photo never hides behind another.

At this point you’ve built a fully functional photo scrapbook in Flash MX 2004. The project is lightweight, interactive, and easy to share. If you want to tweak the look further, consider adding a subtle drop shadow to each instance or a fade‑in effect when the movie starts. Those refinements make the scrapbook feel polished without adding much code.

To help you replicate or extend this tutorial, you can download the source files used in this walkthrough. Click here to view and download the files. The files include the original Flash project, the images, and a readme with notes on how the behaviors were set up.

John, the author behind FlashNewz and FLADownloads, has long been a prominent voice in the Flash community. His reviews and tutorials give readers insight into what’s hot and what’s not in the Flash world. With a keen eye for design and a proven track record in advertising creative, John brings style and technical skill to every project. He continues to run his own flash portal as a side project, keeping his finger on the pulse of the community.