You will now create an image to display on your page. Because your clients don't want to deal with any copyright issues, they have requested that you design an image that will represent their company. The Web only supports two graphic types for inline images: GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). Of these, the GIF file format is the more common on the Web. We will first create an image in Flash that does not save files in the GIF format. You will be instructed later in this activity on how to change this image to a GIF format that compresses the size of the image file.

First, open Flash from your program files. You will first create the image below to get acquainted with the variety of drawing tools available in this program. You will then create your own image for this Web page.

• Once Flash is open, click File then New. A blank canvas will appear.
• Select the oval or type the letter O, then place your cursor on the canvas to begin your image. While holding down the left mouse button, drag your cursor to open your circle. You will notice that the color of your circle is not yellow, so you will need to change it. To do this, you must select the circle first.
• Either click on the arrow button on your drawing toolbar or press the letter A. Click on the circle to select it.
• Select the paint can, then on the black square under the hand button. This will open the color palette. Choose the yellow color you want which will then close the color palette. Notice that your cursor has turned to a paint can.
• Click on the circle, then choose the arrow tool again and click off the circle to deselect it.
• To create the eyes, choose the oval tool again and make one small circle on the canvass, not on the yellow circle, and color it black. To ensure that both eyes appear the same, we will just copy the finished product.
• Once you have the eye the way you want it, you need to select it in order to copy and paste the second eye on your canvas.
• Choose your arrow tool and double click on your small black circle. Notice that it appears gray that lets you know that it is selected. Click on edit then copy then edit, paste. Your copy now appears somewhere on your canvas and it now appears selected. Left click on the second circle and while holding down your left mouse, drag it where you want it to appear on your yellow circle.
• Double click on the copied black circle to select it, then drag it on the yellow circle where you want it to appear.
• To create the hat, click the line tool or click the L key. Position your cursor on top of the yellow circle where you want your line to start and while holding down your left mouse button drag it to where the top point of the hat will appear. Release your mouse button to let Flash know that is where you want the line to stop. Press down your left mouse button again and drag it back down to your circle to form the triangle shape of the hat. Release your mouse button.
• Next you will pick a gradient color to fill the triangle. Follow the same directions above for coloring your circle, but choose the gradient color to add fill color to the hat.
• To create the tongue, choose the oval tool again but drag it to form an oblong circle. Make sure you draw it on your canvas and not on your image. Choose a light pink color for the fill. Your tongue still might need some molding to get the right shape. In order to alter the shape, click again on your arrow button, then place it over the shape. Notice the half moon shape behind the cursor. With the half moon displayed, hold down your left mouse button and drag the line to get the shape the way you want it. If you make a mistake, choose edit then undo.
• The last to add to your image is the hair. You will use the paintbrush tool. After clicking on the paintbrush, you will need to select the fill color, paint size, and paint shape. Below the color palette, drop down the size and shape menu and play around with what each of these selections will do. Make sure you draw outside the image on the canvas. Try to get the shape of the hair the way you want. Remember you can use the copy, paste, or arrow selection to achieve your desired outcome.
• When you have the image the way you want it to look, you will cut and paste it in fireworks to change the file format of the object. First you must marquee the object by using the arrow key. With the arrow key selected, click on the outside upper left corner of your object, hold down the left mouse key, then drag a box around your image. Make sure all your image is inside of the square. Click edit then copy (you can cut the object if you are brave at heart), open Fireworks from the programs menu, then click file then new. The program should already calculate the image on the clipboard and will give you the default canvas size. Click the transparent background button then click OK. On the standard toolbar click edit then choose paste. The image should now appear on the canvas.
• To make sure that your image is the size appropriate for your page, click modify on the standard toolbar then select document then image size. Change the width size to no larger than 85 pixels, or even smaller depending on your image then click OK.
• To change the file format, click file then export preview. Make sure GIF format is listed in the preview dialog box.
• Choose index transparency so your image will be all that appears when you place it on your Web page.
• You also change the color by clicking the color in the palette that you want to change and click on the color wheel and choose the color you wish to replace it with. Notice that when you run your cursor over the image, it places an X in the color box that represents the color in the image. Feel free to change colors in the image to get the best results.
• Click export, type in a name for your image. Fireworks will automatically add the GIF file format extension to your image.
• Choose your student folder and name your file smileface, then click save. Your image is now ready to place on your Web page.

You will now create your own image for this Web page activity. Start a new file in flash and experiment with other drawing features in flash to create an image that will reflect the stupid company image. Follow the directions above to convert the image to a GIF format and save it to your student folder.

With this image in your student folder, you will now place it on your Web page. You will place the image after your paragraph. Place your cursor after the closing paragraph tag and press the enter key to start a new line. The general syntax for an inline image is:

<IMG SRC="filename">

The filename is what name you assigned your image when you saved it. You will center the image on the page. You will nest the image tag within a paragraph tag and then set the alignment property to center it in the opening paragraph tag. Return to your text editor with the plainstupid file open. Make sure your image file is also in your student folder or you will have to specify the path to where your file is located, which will be discussed later. Type the following on your new line:

<P ALIGN=CENTER><IMG SRC="filename.gif"></P>

Save your document and reload it in your browser. If your image appears to be too large for the page, resize your image in Fireworks following the instructions above and resave it. Continue until you get the image the size you want.