CSci 220 - Lecture 26

Web Page Design

© Morris Firebaugh

I. Conclude Flash and Introduce Interface Design


II. Conclude Flash

A good review of Flash is available at

Example 3: Motion Along a Curved Path with Tweening

1. Open Flash 4 and open the Graphics Library

2. Drag the objects you wish to appear in the animation scene to the stage, adding each object to a separate layer. (E.g., Aliens, Running Man, and Mouthman)

3. Name the layers appropriately by Modify --> Layer

4. Move to frame 1 and set a keyframe by Insert --> Keyframe for all three layers

5. Select a final frame (e.g., 40) and set a keyframe for all three layers

6. Select the "Man" layer and choose Insert --> Motion Guide

7. Select frame 1 and use the pencil tool to draw a curve from the beginning point (Mouthman) to the end point (Aliens) of the animation curve

8. Select the Arrow tool and click the Snap modifier (Magnet), and drag the center of the man to the beginning point. A black ring appears when it locks to the motion guide.

9. Choose Insert --> Create Motion Tween

10. Select the last keyframe (#40) and move the man to the end point in Aliens

11. Select Modify --> Frame to open the Frame Properties dialog box, click the Tweening tab, and select "Orient to Path Direction", then OK

12. Use the Controller to play the resulting Curve Animation

13. Save the animation using File --> Export Movie --> Flash

A Final Try for ShockWave Music

III. Concepts of Interface Design

The basic problem - how to design attractive, easy-to-use, interesting interfaces for Web pages to play on a wide variety of browsers, monitors, and machines.

Example: Ananova, the Virtual Newscaster from London

Steps in designing the interface

  1. Set the goals of your Web site
  2. Define the audience you want to reach
  3. Outline the content you want to present
  4. Define the "look and feel" of your Web site

Interface Elements and Controls




IV. Techniques of Layout Design

Elements available for Layout Design

Three Approaches

V. Typography on the Web - Equations & Math Symbols

Until the <MATH>...</MATH> container tags recommended by the W3 Consortium are implemented, we have three choices for representing math symbols and equations in HTML documents:

The printable Latin-1 Character codes from ASCII 134-255 include such characters as


In addition to representing characters by their ASCII numeric codes, as above, certain characters can also be represented by mnemonics and thus "neutralized" as HTML tag code. For instance, the set of characters

may be represented by the mnemonics

Certain low-level math formatting may be done by the tags, <sup> and <sub>. For instance,

is generated by the HTML code


is generated by the HTML code


Greek and Technical Fonts - Symbol Font

<FONT face="fontName">...text...</FONT> tag.



Mathematical Equations via Images


  1. MS-Word Equation Editor was used to produce the following equations
  2. SNAP = <apple> + <shft> + 4 keys to snap a picture
  3. Paste into Graphic Converter to change background to transparent
  4. Save as a GIF file and embed in your document



While these may not be quite perfect, they are completely respectable graphical representations of mathematical equations.



VI. Laboratory Assignment

Assignment # 13  

Updated April 5, 2001