Designing a Home Page – Lesson 41

Designing a Home Page

Lesson 4

2 Designing a Home Page – Lesson 4

Objectives Understand the basics of site architecture

and document sizing. Use a background (comp) image as a

guide. Create and use graphic and movie clip

symbols. Create and use layers and guides. Import and place JPG files. Create a template movie clip.

3 Designing a Home Page – Lesson 4

Spend some time planning your site Before attempting to create a Web site, plan it

carefully. Create a site architecture diagram that

displays the pages to be created and the links between the pages.

Plan the size of your pages to account for the target browser.

Browsers all have title bars, menus, and other interface objects.

If your target resolution is 800 x 600, your page display area is actually less than that due to the browser interface components.

4 Designing a Home Page – Lesson 4

A site architecture diagram

The figure below shows one example of a site architecture diagram. This diagram shows 4 pages to be created and the relationships between the pages.

The arrows are used to indicate hyperlinks between the pages.

5 Designing a Home Page – Lesson 4

Use “comp” images as a guide when creating your movie Many Web designers create a “comp”

image before creating their Flash movie. A “comp” image may be a rough or a

detailed image of how the page will look when finished.

Comp images can be created in some other application, such as Fireworks or PhotoShop.

The comp image can be imported into Flash and used as a background image.

The Flash movie will be built using the comp image as a guide.

6 Designing a Home Page – Lesson 4

An example of a comp imageThis figure shows a comp image that has been placed in the work area. Place the comp image on its own layer and give it a name that indicates its purpose.

Position the layer where it needs to be in order to use it as a guide when creating the final artwork.

7 Designing a Home Page – Lesson 4

Use graphic and movie clip symbols You can create graphic and movie

clip symbols to assist you in creating your Flash movie.

Once the symbols are created, drag them from the library onto the Stage area.

Use the Align panel options to align multiple images when necessary.

8 Designing a Home Page – Lesson 4

An example of a movie clip symbol in use

The left figure below shows an example of a movie clip symbol (the small rectangles that will be used to resemble film sprocket holes) being placed on the Stage. The comp image is shown as the background image.

The right figure shows the movie clip symbols after they have been aligned with the top edge of the left symbol and are in alignment with the holes shown in the comp image.

9 Designing a Home Page – Lesson 4

Place images using rulers and guides When you turn on the Rulers option, a ruler

will appear across the top of the window and down the left side.

You can place objects by dragging them to a specific ruler coordinate.

You can also turn on the Guides option. Guides can be dragged from either ruler to some

specific spot on the Stage and then released. Guides appear as slim green lines on the Stage area,

but do not print. Objects can be made to “snap” to the guides when

they are close to enable precise placement of objects.

10 Designing a Home Page – Lesson 4

An illustration of guides

This figure shows a portion of the Stage with several guides placed. The guides can be used to precisely measure or lay out an area before dragging an object into the area.

Guides can be locked in place to prevent them from being accidentally moved while manipulating other objects.

11 Designing a Home Page – Lesson 4

Use layers to help organize your movie When using a comp image to plan your movie,

place it on its own layer. When the final artwork is in place, delete that layer from the document.

When you have completed work on a layer and it is exactly how you want it to appear, lock the layer to prevent it from being updated inadvertently.

You can tag a layer as a Guide layer to use while building your document, and that layer will not show up when the document is previewed or published.

12 Designing a Home Page – Lesson 4

The Layer Properties dialog box

The figure below shows the Layer Properties dialog box. You can name the layer in this box. Specify a name that is meaningful and describes the content of the layer.

Toggle these option boxes to show/hide the layer or to lock/unlock the layer.

You can indicate if the layer is a Guide layer here.

13 Designing a Home Page – Lesson 4

Import JPEG images When you have your layers set up and you are

ready to place final artwork, you can import an image and place it in the proper location on the Stage.

To import an image: Click the File menu, point to Import, and then click

the Import to Stage option. Locate the drive and folder that the image is in,

select the image, and click the Open button. A copy of the image will appear on the Stage and will

be selected. Drag it to the desired location using the ruler or

guides to position it, or use the arrow keys on the keyboard to position it where you want it to be.

14 Designing a Home Page – Lesson 4

Create template movie clips For artwork that you will use repeatedly,

you can create a template from it to use when needed.

To do so: Click the symbol in the library that you want

to use as the template. Click the Options menu and choose the

Duplicate option. Name the duplicate and click OK to create

the template clip.

15 Designing a Home Page – Lesson 4

Summary

In this lesson, you learned: The basics of site architecture and document

sizing. To use a background (comp) image as a guide. How to create and use graphic and movie clip

symbols. To create and use layers and guides. How to import JPG files. How to create a template movie clip.