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

Using Flash to Create Entire
Websites

   

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
b).
Elements of a basic Flash Banner Ad
c). Elements of a Basic Flash website

d
). 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)

1Basic elements of a Flash Banner Ad


2. Elements of a Basic Flash website

3. Good Example of Flash Movie in a Website


2. Useful Flash Library Sites

  1. Flashkit.com

  2. Flash Easy.com

  3. Flash Tutorials

  4. FlashButtons.com

  5. wavcentral.com (Flash Sounds)

  6. Flash Sound Loops


2. .Students' Favorite Flash websites

  1. Macromedia Flash Gallery

  2. Colorado.com

  3. Macromedia Flash Showcase

  4. Business Power: Flash Showcase

  5. TheNorthFace.com

  6. Drive the Mars Rover

  7. Bacardi.com

  8. PeelPub.com

  9. ByMarkdowntown.com

  10. HomeStarRunner.com

  11. CatieCurtis.com

  12. Macrocosmetics.com

  13. Courvoiser.com

  14. Hennessy Cognac.com

  15. Moet.com

3. Using nested symbols and nested
movie clips: graphic symbols and
movie clips within symbols.

  1. See Cars movie with moving wheels

  2. I first made the tires move using a motion tween,
    then I save this as a 'movie clip."

  3. I then added the tires as a movie clip onto the
    stage and drew a car around these tires.

  4. I then saved this entire car, including the
    tires, as a symbol.

  5. I then dragged the symbol of the car with
    the moving wheels onto the stage and
    motion tweened the car to get it to
    move across the screen.

  6. I caused the car to move the other way by
    flipping it horizontally and then motion
    tweening the symbol so that it will appear
    to move across the screen.

  7. See the example of the Cars movie with
    sound


  8. See Cars movie with sound using the movie
    itself as a symbol in this movie.

4. Using the "Go to" actions to have
the Flash movie return to a specific frame

  1. First, name the frames you want to associate
    with actions.

  2. Now go to the frame you want to put the action.

  3. Now open the "Actions panel" and select
    "goto"

  4. In the Frames box, write the name of the
    frame you want the Flash movie to go back to.

  5. Make sure that the name of your frame is
    in quotation marks, for example:


    gotoAndPlay("frames");

  6. Make sure that the frame you name is in its
    own keyframe. The name applies to the
    frame in its own keyframe

5. Creating a drop-down button in
a Flash movie

  1. See example of simple drop-down menu button

    and butt2.fla

  2. In order to create this drop down button, the first
    thing you need to do is create a button, make it
    a symbol, and create the four buttons states for
    this button. Put this button on its own layer.

  3. On a new layer, now create buttons for each of 
    the boxes in your drop-down menu that will pop 
    out of the button when you click on it. Make sure
    you make each of these buttons no bigger than 
    your original button. 

  4. Now make each of these buttons go to a specific 
     URL on a mouse click (on release).

  5. Now group these buttons so that you can select
    on them and move them as a group

  6. Now create a new layer and create a shape that is
    just a little bigger than your "drop-down menu" 
    of buttons

  7. Make sure this shape is the same color as the background. Remember, make sure that the stroke on this shape is the same color as the background as well. You want this shape to conceal your "drop-down" menu behind the button until you want to see it.

  8. Now put the layer with the button on the 3rd layer from the bottom.

  9. Make sure the layer with the "drop-down menu"
    buttons  is the first layer in your movie.

  10. Now make the layer that conceals the "drop-down menu" buttons the second layer in your movie.

  11. Now add two additional keyframes to each of your
    layer so that your movie now consists of three
    keyframes on each layer.

  12. On the first layer--the layer with the "drop-down menu"-- move the drop-down menu buttons  in the second keyframe  so that it is just below the button.  In the first and third keyframes of this layer, the drop-down menu will be above the button, concealed by the invisible background layer which is on layer two.

  13. On the third layer--the layer with the button on it, put a "stop" action on each of the first two keyframes of this layer.

  14. Now select the button that will activate the "drop-down menu" buttons and create an action so that "on release"--on mouseclick--the button will "play", which causes the "drop-down menu" buttons to move down below the button.

  15. This drop-down button will only work if you save the button in the Flash  movie as looping. Don't worry about this because the stop actions in this movie keep this button from moving unless the button is clicked.

  16. When you click the button, it will cause your Flash
    movie to play one frame at a time. The two frames that you play to get this button to work both have
    "stop" actions on them.

5. You don't need to use too many keyframes and too many
frames to make a Flash movie

  1. Try not to use too many keyframes and use "stop"
    actions and other action script in your Flash movies.

  2. The more keyframes and blank frames you use the
    more likely you are to lose control of the actions
    in your movie.

  3. By using few keyframes and action scripting to start and stop actions, you gain more control of your Flash movie.

6. Adding Sound to Flash movies

  1. When you add sound to Flash movies, use MP3s because they are compressed enough to not take up too much file space in your Flash movie.

  2. When you are working with sound in your Flash movie, always put your sound effects on separate layers.

  3. You insert and place sound into a Flash movie by
    adding a keyframe and inserting the sound into
    just that keyframe.

  4. Be careful not to let your sound play over many frames unless you really want it to.  You do this by starting and stoping the sound with a keyframe, so that it will only play the sound in that keyframe.

  5. You import sound into a Flash movie by going to
    "File" and selecting "import."

  6. Flash will now add that sound file to the library of
    symbols in your Flash movie.

  7. To insert the sound, go to the "Sound" panel
    window and select the sound you want to insert.

  8. Remember, make sure that you are on the correct
    layer and have added a keyframe before you try
    to insert a sound.

  9. By using keyframes, you can play a song in just
    one keyframes, because the sound will bounce from one performance to the next by continuously
    repeating the single keyframe.

  10. By putting an MP3 sound file on just one keyframe
    in a Flash movie, you make make this sound file
    play continuously as background music as you
    Flash movie plays.

  11. You can add little sounds and noises by going to
    "Windows" in Flash and selecting "Common Libraries"and choosing "Sound."

  12. By dragging each sound you want to use from the
    Sound library onto the stage, Flash will place this
    sound into the Library for this movie.

  13. You can use the Flash sound library to add little
    sound effects like when you click on a button or
    cause some other small action in your Flash movie.

7. Reminder about Shape tweening

  1. Remember if you want to shape tween "images"
    and words you must first select them and
    select "break apart."

  2. You "break apart" images or text by first
    selecting them and then going to going to "Modify"and then selecting "break apart."

  3. Unless you "break apart" images and text, shape
    tweening will not work.

8. Problems with using Flash alone to create websites

  1. See sewhmflash.html and
    sewflash.fla

  2. Here is the action script to put at the end
    of your Flash movies to get it to open a
    webpage at the end of the Flash movie:

    getURL("http://www.colorado.edu/Sewall/");

  3. See Example of Flash Intro. Page

  4. Flash movies tend to be very big and take
    longer to download.

  5. Flash websites tend to be loud, fast, and very
    dynamic. Many go to these sites for the
    experience, not for the information in that site.

  6. Can we create Flash websites that are both
    entertaining and useful and informative?

  7. What are the possible advantages of using
    Flash tools to create websites?

  8. Flash movies are helping to shift the ground of
    the web. I sense that there will be an increasing
    compromise between small, slow information-filled
    websites and loud, fast, dynamic websites.

  9. Web Designers working today in both Dreamweaver and Flash are helping to create the next generation of websites; sites that are both entertaining, dynamic, interactive, current, and information-filled.

  10. Let's think about what are some basic requirements
    that a Flash website must still have to work as
    a useful website:

    See good example of use of Flash in homepage



    a. Current and easily updated

    b. Easy to navigate and quickly find information

    c. Several different levels of user interactivity

    embedded in the structure of the site

    d. Provide fresh, positive user experiences.

    e. Entertaining but quickly downloads.

    f. Provide users a choice of a Flash-only or
    an Html-only experience.

    g. Serves as a useful archive of information
    for users.

    h. Uses a consistent interface that users can go
    to and quickly navigate to find what they want.

9.. A simple Flash Pre-loader

  1. See Flashkit.com tutorials for Flash .fla files that
    demonstrate how to do certain actions in
    flash.

  2. Basic Pre-loaders and Bar Pre-loaders:Tutorials

3. Pre-loader Examples

  1. Allmen Pre-loader

  2. Simple Pre-loader

  3. One-Moment Please Pre-loader

  4. See Top 100 Flash "fla" downloads

10. Requirements for Basic Flash
movie Websites

  1. Always offer two ways to enter the website,
    either through a Flash movie or through HTML webpage.

  2. Always use a "Pre-loader" if it takes more than
    10 to 20 seconds to download the Flash movie.

  3. Provide clear page titles and section headings.

  4. Provide useful navigation buttons to help
    the user navigate through the website.

  5. Try to balance neat experiences, Flash bells and
    whistles, and quick, useful information.

  6. Be careful not to use Flash techniques just for the
    sake of being cool. Balance fun and cool with
    fast and useful.

  7. Make sure that your Flash movies fit into the
    average size web browser window, which is
    right now at 800 x 600.

  8. Be very careful to not loop your Flash movies so
    that good music and effects very quickly become
    annoying and tiresome.

10. Making the Invisible button trick work

  1. Make sure you make the button a symbol and
    make sure that you make it a "button" and not
    a graphic.

  2. Make sure that you have the same button symbol
    in both keyframes that contain the button.

  3. Make sure that you use this actionscript code
    to activate the buttton:


    on (release) {
    getURL("http://www.colorado.com");
    }

  4. Make sure that you use "0" alpha to make
    this an invisible button.

  5. See simplebutt.htm

  6. You can put invisible buttons on Flash Banner
    Ads, whole Flash movies, and on individual
    objects inside Flash movies.

  1. Flashkit.com
  2. Flash Easy.com
  3. Hotscripts: Flash FLAs
  4. Free Flash Intros: FLAs
  5. Advanced Scripts: Flash FLAs
  6. Macromedia Flash Support Center
  7. Macromedia Flash Gallery

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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: 
32938      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: 28 April, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/flashweb.htm

Digital Design Course homepage