Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

What did we learn about Web Design?


Your final, revised Design Portfolio will be due
during the final exam period Monday, May 8th,
at 10:30. a.m. Be thinking about revising the five
websites in your Design Portfolio:

1) Portfolio page, 2) Web genre website, 3) Image website, 4) Flash Banner ad, and 5) Flash website

a). Basic elements of a webpage
Elements of a basic Flash Banner Ad
c). Elements of a Basic Flash website
). Web Design Criteria for Final Design Portfolios 

1.   Web Design Portfolio Site ( due Jan. 30)

2.      Web genre Site (due March 3 )

3.      Image Site (due March 24)

4.      Flash Banner ad (due April 21

5. Flash Site (Due May 8th)

1. Requirements for Final Flash website

  1. Basic Elements of a Flash Banner Ad
  2. Elements of a Basic Flash Website
  3. Design Criteria for Final Design Portfolios

2..Cool Flash Sites

  1. Ze's Page

2. Waikiki Flash movie Project

  1. Visit Waikiki webpage

  2. Creating Waikiki Flash Movie Intro.
    for Waikiki webpage

  3. Hawaiaan Hilton Flash website

  4. See USA Today for simple Flash movie

  5. Use CD of images, movies, and sounds
    (See flashwaikiki.fla for Waikiki flash movie
    with ".mpg" movie files.")
  6. See girlwalk.html

  7. See samplevideo.fla for the code and
    media materials for girlwalk.html.

  8. Notice that I put the ".mpg" file in to
    a movieclip, which runs twice and then

  9. Notice that I stop all sounds and stop the
    video at the end of the Flash movie.

  10. Study the code in samplevideo.fla to
    learn how I did this.


3. Using Movies in Flash and Dreamweaver

  1. See Girl walking on Beach

  2. See women on Beach

  3. See Surfing movie

  4. See Windsurfing movie

  5. Make sure you use ".mpg" files. Flash
    won't import ".mpeg4 files"

  6. You can resize these smaller ".mpg" files movies to fit in a bigger space on your page. "Mpg" files use an earlier compression system so their movies are smaller.

  7. Don't make small movies too big or they will look
    grainy. So only resize them up a little bit.

  8. You can put ".mpg" files in a movie clip where you cancontrol the sound, how long it plays, and when it appears in your Flash movie.

  9. For now, I would suggest muting the sounds in the ".mpg" movies in your movie clip using stop all sounds.

  10. In order to save these files as ".mpg" files using Pinnacle Studio, I had to include both the video and audio tracks.

  11. Don't use the Microsoft ".wmv" movie file format. It
    is unique to Microsoft's "Movie Player" pluging. Stick with using the ".mpg" file standard.

  12. Remember, when you use movies they make your
    Flash files and webpages load more slowly because".mpg" files are often very big in size.

4. Getting a Flash Movie to loop just three times

  1. Instructions for getting a movie to loop three

  2. tutorial

  3. loop3times.fla

  4. See simple version of Pre-loader code

  5. This trick is accomplished with Actionscript
    coding. Copy the actions at frame 1 and at
    the last frame of the movie.

  6. This is set to loop three times. But you can
    change the number of loops by changing
    some of the code.

  7. Example of Sewall movie that loops 3 times

2. Creating a sliding picture show using Flash

  1. See slideshow1.html

  2. See slidewhow2.html

  3. See oar2.html

  4. See slideshow1.fla

  5. You can add or subtract frames
    in this slideshow to slow it down or
    speed it up.

  6. When you make slideshows like this, try
    to make all the pictures the same size
    and make sure they all line up with other.

  7. If the images don't line up with each other,
    your images will jump a litttle as the movie runs.

1. Using Symbols in Flash

  1. Most advanced Flash users save all their
    images as symbols (movie clips, buttons, or
    graphics) first, and then tween them.

  2. Your Flash movie uses these symbols to
    create and change these images.

  3. Using symbols in your Flash movie makes
    your movie smaller and run less choppy.

  4. If Flash doesn't recognize the two images
    you want to tween as the same, then you will
    have to motion tween the images at the
    start and beginning of the action.

  5. If Flash recognizes these two images as the
    same symbols, Flash will automatically
    create the motion tween.

  6. Symbols are also useful because they can
    be stored in the Library and re-used later in
    the movie.

2. Getting your Web Design Portfolio organized using

  1. See Sewall Class Designs

  2. Create separate folders on the CU server for
    each of your websites, for example, create
    1) web genre, 2) image, and 3) flash

  3. Leave your portfolio website in your main 

  4. So when you want to go to a specific website in
    your design portfolio you must include the
    server folder that it is in. For example:

  5. Try to make sure that you have only one copy of each of your webpage files and folders in your server directory.

  6. So try to clean up your server directory, putting
    website files in specific folders and making sure
    that you don't have multiple copies of files or
    folders in your server directory.

  7. When you are cleaning up your server directory,
    check to see if you have really big image files
    saved as "bmp" or "png" file formats. 

  8. Check to see if you have and flash.fla files in
    your server directory.  When you put a Flash
    movie on the web, you only need to copy over
    the flash.html and flash.swf files, not the flash.fla
    files.  Flash.fla files are really big and take up
    a lot of room on the server.

  9. If you want me to burn you a CD copy of your
    Web Design Portfolio websites come see me 
    next week.

  10. Web Designers often have Design Portfolios both
    on the web and on CD that they can give
    prospective clients to showcase their work.

  11. So by the final, please make sure that all your
    finished websites are linked to your Digital Design
    class portfolio sites in Sewall Class Designs

2. Extra Time to complete your Web Design Portfolios

  1. If you need extra time or software updates in order
    to finish your Web Design Portfolios, please come see me Friday afternoon or Monday between 10:00 and 5:00 p.m..

  2. I will be in my office grading papers all next week from 10:00 to 5:00 p.m.  If you need any help finishing your work, please come see me.

3. The Age of Too Much Information or "Data Smog"

  1. What happens when because of the internet and
    global communication you find you have too much

  2. Does "Data Smog" let you do sub-standard work,
    knowing that no one, or a least not a lot of people,
    will see and judge your work?

  3. How do we discover the bits of truth in this
    vast universe of information?

  4. How do we make our websites and our information
    stand out from the crowd?

  5. Critical thinking, design, style and flair, and constant updating and revising.

  6. Your website, your work, can and should matter.  If
    you make your work stand out, people will be able
    to find it out of the vast universe of information on
    the internet.

4.  Study the Web Design Criteria for Final Design Portfolios. Remember, your webpages do not have
to be perfect.  I will use the "first-glance test" to evaluate your Final Design Portfolios.

 a). Basic elements of a webpage
Elements of a basic Flash movie webpage
). Web Design Criteria for Final Design Portfolios 

1.   Web Design Portfolio Site ( due Jan. 30)

2.      Web genre Site (due March 3 )

3.      Image Site (due March 24)

4.      Flash Banner ad (due April 21

5. Flash Site (Due May 8th)

5.  The "first-glance test": 

      "Do your webpages upon first-glance look 
       ordered, well-designed, and polished?"














Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
5301      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 5 May, 2006

Digital Design Course homepage