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

Flash and the Future of the Web

   

a). Basic elements of a webpage

b). Basic elements of a Flash Banner Ad

c). Elements of a basic Flash movie webpage

d). Web Design Criteria for Final Design Portfolios 

Your final website (5th website) will be due along
with your Design Portfolio during the final exam
period Monday, May 8th, at 10:30 a.m. in the
McKeehan classroom

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 Website (due May 8th with Final)


1. Make sure you have both your "Flash Banner Ad"
and "Simple Flash Movie" assignments linked to
your portfolio page. I will grade both of these
assignments this weekend. Please also send me
the URL for your portfolio webpage. If I can't
find your assignments, I can't grade and give you
credit for them.
See Digital Design Student Portfolio Page .

2. Flash Banner Ads websites

  1. Tips for Making Flash Banner Ads

  2. Flash Banner Ads Example

  3. Additional Flash Banner Ads

  4. Flash Banner Ads -- a Portfolio

  5. Google: Flash Ad Banners

3. See moetad.fla for example of basic
flash banner ad. See moetad.html

-- Making a Flash Banner Ad using the basic advertising elements at www.moet.com . Use moet4.fla for
the basic elements.

3. Adding "actions" to Flash Movies

  1. In complex Flash Movies, you can create a layer
    just to put your actions on, such as a "stop" action.

  2. But you can add a "stop" action to any layer and
    it will stop the entire Flash movie when it
    reaches that layer and that specific frame.

  3. Be careful when you copy frames in Flash Movies, when you copy a frame it will usually copy the
    actions associated with that frame.  So make sure your  actions are located on the right frames to make your movie work.

  4. When you create buttons, make sure you save them as "button" in the "Symbol Properties" box.

  5. In order to add an action to that button, first select
    the button and then select "actions."  In the
    "actions" panel, select "Get URL" and this will
    write the code to make this button clickable:

    on (release) {
    getURL ("http://www.moet.com/home/flash.html?langue=us");
    }

  6. You can also make buttons that on mouse release,
    it will cause the Flash movie to "play" that part of
    the movie:

    on (release) {
    play ();
    }

2. Inserting Sound into Flash movies

  1. You can insert sound in Flash movies by "importing" sound files into your Flash movie.

  2. Create a keyframe on its own layer; this will be
    the sound layer of your Flash movie.

  3. Now go to the "sound" panel menu and select the
    sound that you want to start playing in that
    keyframe.

  4. Stop actions in Flash movie layers will stop all the
    actions except sound actions in a Flash movie.

  5. To stop all the music in a Flash movie, on the
    sound layer where you put your music, put a
    "stop all sounds" action in the frame where you
    want the music to stop.

  6. If you don't stop and start your music, it will
    play as background music on a webpage:

    a) music.html (sound without "stop" action)
    b) music1.html (sound with "stop all sounds" action)

3. Using wipes to fade in and out of different actions in
     a Flash movie

  1. In some movies, we move from one scene to 
    another by using a black wipe that wipes over
    one scene and wipes out in another scene.

  2. You can create wipes in Flash movies by
    creating boxes that have the same color as the
    background, giving them an invisible look.

  3. You can then motion tween these invisible boxes
    over the stage to wipe out one scene and
    wipe in a new scene.

  4. You can also use the "alpha" or "brightness"
    effect to fade in and out from one scene to another.

  5. See a simple version of this wipe in wipe.html


4. Making text rotate in Flash movies

  1. First create the text letter you want to rotate.  Now
    select that letter and make it a symbol and choose
    "movie clip."

  2. Now create a second keyframe, twenty frames into
    your movie.  

  3. Create a motion tween between your first and second keyframe.  In the frame menu panel, select rotate cw (clockwise) and "3 times."

  4. You easing with this motion tween. Notice I "eased out" with the first motion tween--starting slowly and the moving faster, and I "eased in" with the second motion tween-- starting faster and the getting slower.

  5. Notice that I adjusted the size and brightness between each of these motion tweens.

  6. Examples of rotating text:

    a) rotatej.html (rotating text with no "stop" action)
    b) rotatej1.html (rotating text with "stop action")

5. Making a Flash layer a symbol and then putting
    multiple copies (instances) of that symbol on one
    Flash layer

  1. Using a "rotating text" action like the example 
    above, make an entire Flash layer into a symbol.

  2. First select the entire set of frames whose action
    you want to make a symbol by pressing control
    and shift at the beginning of the action and then
    going to the end of the action and selecting
    control shift again.  This will cause the Flash
    layer to become selected.

  3. Now with this Flash layer selected, press
    "control" and "shift" and "c" to copy the selected
    layer.

  4. Now go to Insert and select "New Symbol" and
    select "movie clip."

  5. After creating the new symbol, put the mouse
    cursor in the first frame of this symbol and press
    "control" and "shift" and "v".  This will paste
    this flash layer into its own Flash symbol.

  6. Now that you have created a symbol in your
    Flash movie "library", select that symbol and
    put it on its own layer.

  7. In this case, I will put copies of this symbol on
    three separate layers to illustrate this effect.

  8. Here is an example of the resulting Flash movie:

    a). rotating j's

    b) rotating "j's"

6.  Lynda Weinman on Web Development:

"We're at the absolute beginning [of web
design and development]; in fact, we're 
in prehistoric times. We're witnessing the
emergence of this medium. It's an exciting
time to be involved, but someday people 
will look back on these as the cave[man]
days of  networked communication."

7.  Flash Movie Examples

  1. Macromedia Flash Showcase

  2. Business Power: Flash Showcase
  3. Enter the Whitney Museum's BitStreams
  4. Atomfilms.com

8.  How do Flash movies change the nature of the Internet?

9.  What are the trade-offs between using Flash-heavy
      webpages and information-rich webpages?

10.  Is there a balance between designing visually-stimulating and experientially-rich webpages and content-rich and  information-rich webpages?

11. Jakob Nielsen on critics of Usability and Flash

  1. Are Users Stupid?

  2. Design Darwinism

  3. The Church of Usability

  4. Flash- 99% Bad

  5. Jakob Nielsen on the Dangers of Flash:

            "Youíve said that 99 percent of the time, [use of  the Web-animation tool] Flash is bad. How do you differentiate between Flash as content and Flash  in design?

            I think the question is, do you have content
    that lends itself well to an animated presentation?
    And often there is.
    Customer service would be a 
    good example, if youíre showing someone how torepair some equipment. Unfortunately, this is
    theoretical. Right now, Flash is very rarely
     being used to actually communicate things. 
    Itís more used for showing off.
    "

12.  Who will win the struggle between "Usability experts"and  "Flash and multimedia web designers"?  Or will the web continue to expand to support both information-rich and visually-stimulating and experientially-rich websites

13.  What should be the balance between the web as a site for "experience and stimulation" and the web as a site  for "sharing information and knowledge"?

 

 

 

 

 

 

 

 

 

 

 

 

 

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: 
7341      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: 24 April, 2006

E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/flash5.htm

Digital Design Course homepage