Edit Flash Images: Change "Fly Catcher" background

Author: Matt Slaybaugh
Date: October 12, 2006
Level: Beginner

Summary

In this tutorial, you will learn about modifying images in a Flash applet by changing the background image used in the Fly Catcher game. You will open the background image in Photoshop or other image editor and make changes, then re-import the image into the Flash library, using the same name.

Experience Needed
Software
  • Flash 8
  • Photoshop
Files — Flycatcher.zip (411 KB)
  • flycatcher.fla
License — "Fly Catcher" (c) 2007, World Wide Workshop Foundation

This software is licensed to the public under the CC-GNU GPL.

Description
Change the background image

The flycatcher game includes very few images, the frog, the fly, and a single image for the background. You can personalize this game by changing any of the graphics. Let's start by editing the background image.

The background image is named backgroundTile in the library, in a folder named elements.

  1. Double-click the graphic named backgroundTile to open it. Notice how the timeline changes.
  2. Create a new layer by clicking the Insert layer button to the left of the timeline. This creates a new layer named Layer 2.
  3. In the toolbar select the Brush Tool.
  4. In the toolbar under Colors click the Fill Color icon and in the pop-up window select one of the red swatches.
  5. In the background image, use your mouse to draw flowers in the grass above and below the water.
  6. When you're finished, save the file and test (ctrl-enter). You will see your changes in the game.

More Project Ideas

Intermediate Projects

  • Change the graphics by replacing the frog with a picture of the face of a friend
    Import a photo of the size 58x70 pixels, import it into the library and replace it with the frog image in the frog movie clip

Advanced Projects

  • Modify the frog image so that it animates as it moves, remove the lily pad and include frames of the frog swimming