Creating and Inserting an Image
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
- 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:
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.