Graphics in Flash
Building a Slide Show Interface
This project is fairly typical of the type of work that can be done in Flash. Your client, a local college, approaches you with an idea. They have a creative photography program and they want to give their students the opportunity to display their work through the web. Being typical clients, they have very little understanding of how this can be done but are clear on the fact that it should be a simple solution.
This tells you two things:
- The project must be consistent in look and feel, and meet the college’s design standards for the web.
- There must be a rigid adherence to both the physical size of the images and how they are named.
After a couple of weeks of trading sketches and ideas you settle on a design, and the time has arrived to construct a prototype, called a comprehensive design, which can be presented to the client.
Adding Custom Colors to Flash
The first step in the process is to build a color palette. Although this may seem like a relatively simple task, it is actually a bit trickier than you may first assume. Most clients use Pantone—a print-based, color-naming system—for their corporate work. Unfortunately, print color and web color are two separate models. You will also discover that, more often than not, when you ask a client for hexadecimal web colors, you will see a blank look. In this case, you got lucky. The client told you the colors are these:
- Dark Blue: #000034
- Medium Blue: #046399
- Light Blue: #D5D7E2
- Gold: #C99B00
If you ever get into a situation where the colors are unavailable through the client, open their site in a browser and take a screenshot of their home page. Import that image into the Flash library and use the Eyedropper tool to sample the colors. You sample a color by clicking on it. The color will appear in the Fill color chip on the Tools panel. Click on the chip and,when the Color chips open, roll the cursor over the image. As you move the cursor, the hexadecimal value of the color that the eyedropper is over will appear. When you find the color you want, click the Eyedropper tool and it will be used as the fill color. Alternatively, you can simply write down the color value.
- Open a new Flash document and select Insert > New Symbol (Ctrl+F8 for a PC or Cmd+F8 for a Mac) to open the New Symbol dialog box.
Name the symbol Swatches and select graphic as its property. Click OK to close the dialog box.
The Symbol Editor opens, in which you can create a palette of swatches.
If you open the library, you will see that the Swatches symbol you just created is now in the library.
Symbols are the building blocks of Flash movies. In many respects, you can think of symbols as reusable assets. When a symbol is on the Stage, it is called an instance. An instance is simply a copy of the original artwork in the library. You can manipulate and distort the instance without affecting the original item in the library.
There are three types of symbols that you can build: movie clips, buttons, and graphics.
Graphic symbols usually contain a bitmap, a vector image, or artwork you can draw on the Stage. Buttons are simply four-frame movie clips that control how the button looks and works, depending on its relation to the mouse. Buttons are used for navigation, rollovers, and hot spots on the Stage.
A movie clip is the most commonly used symbol in the Flash authoring environment. In many respects, you can regard it as being a miniature Flash document. It can have actions; can have a Timeline with as many frames as needed; and can contain other movie clips, buttons, sounds, and practically anything that can be added to a Flash movie.
Symbols are always located in the Flash library. The advantage of using symbols is they keep the SWF file size manageable because Flash is able to use multiple copies of the same symbol. This is why instances are so important. A great way of regarding an instance of a symbol on the Stage is to think of it in terms of a shortcut or alias on your desktop. These files are about 1K in size and can point to files that are 1G in size or larger. Imagine how quickly you would run out of hard drive space if you had 40 references to the file but couldn’t use a shortcut or an alias. It is the same in Flash. The original content sits in the library and instances of the content point to the original content found in a symbol.
Keep in mind that when you import such assets as sounds, video clips, bitmaps fonts and so on, they, too, are added to the library.
- Select the Rectangle tool and draw a rectangle in the open window.
The shape fills with whatever stroke and fill color are currently chosen in the Tools panel.
Click once on the Stroke color chip in the Tools panel and select the No Stroke (the color chip with a red line
through it) option. You don’t need a stroke on the rectangle because you are more concerned with the fill color.
Click once on the Fill color chip and enter the value for the Dark Blue color (#000034) in the input area of the swatches that open. When you press the Enter (PC) or Return (Mac) key, the selection will fill with the chosen color. Repeat this step three more times to create three more rectangles and fill the rectangles with the Medium Blue (#046399), Light Blue (#D5D7E2), and Gold (#C99B00) colors.
A faster way of creating the chips is to draw one, select the object, and with Alt+Shift (PC) or Option+Shift (Mac) held down, click and drag a copy of the selection to a position under the original object. Simply select each copy and fill it with the color needed.
Now that the chips are created, you have the colors identified in Flash. The problem is that these colors will be used quite a bit, and either sampling them or entering their values into the Color palette can be a time-consuming process. One of the features of Flash is the capability to add custom colors to the swatches.
- Select the Medium Blue swatch on the Stage and select Window > Color Mixer (Shift+F9) to open the Color Mixer panel.
The Color Mixer is where you create colors for subsequent use in the movie. Colors you create here can have a
single usage or be added to the Color Swatches panel for multiple usage.
When the Color Mixer panel opens, you will notice that there are a few ways of creating a color. You can enter
the RGB values, enter the hexadecimal values or click on a color in the Color Picker and use the Hue slider to
pick the exact “shade” of the color needed. Regardless of the method chosen, your color will appear in the
swatch at the bottom of the Color mixer. The “type” drop-down list allows you to choose how the color is added
to the selection. Your choices are these:
- Solid: The color will be a solid color.
- Linear: A linear gradient will be used.
- Radial: A radial gradient will be used.
- Bitmap: Uses an image on your computer as the fill. When you choose Bitmap, a dialog box lets you select a bitmap image on your local computer and add it to the library. If the object is larger than the bitmap, the bitmap will be tiled in the object.
In this case, enter the hexadecimal value of Medium Blue into the entry area of the Color Mixer. The blue will appear at the bottom of the Mixer as a large swatch. Now that the color has been created, select Add Swatch from the Color Mixer Options drop-down list.
Open the Color Swatches panel by pressing Ctrl+F9 (PC) or Cmd+F9 (Mac). Medium Blue now appears at the bottom of the swatches. Add the remaining three colors and close the Color Mixer. Click the Scene 1 link on the Timeline to close the Swatches symbol and return to the main Timeline.
This work is licensed under a Creative Commons License.
