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 Animations and Sound in
Flash Movies


Assignment: Create a simple flash movie using
motion and shape tweening, simple buttons, and
sound. Publish this flash site and place a link to it
on your Portfolio website. (40 points) Due Monday,
April 17, after 5:00 p.m.

Assignment: Work on your Flash Banner Ad, which
is due on Friday, April 21.

1. Your simple flash movie assignment (40 points) is due today. Please e-mail the URL address for your portfolio files (20 points) so that I can grade them.

2. Hand out two handouts:

a. "Using Movie Clips and Graphic Symbols"
b. "Flash Sound Sync Settings"

2 .Basic Sounds for Flash Movies ----Flashsounds.fla

--Download and use this fla file when you want to add
basic sounds to the flash movies you are creating.

2. Remember, your Flash Movie is due Monday, May 8th. Your Flash banner ad is due on Friday April 21st.

  1. Basic elements of a webpage

  2. Elements of a basic Flash Flash Banner Ad

  3. Demo Flash Movie: Protecting Freedom

3. For creating a simple Flash banner ad, use
this file and its enclosed Flash library: sewflash2.fla

-- See sewflash2.html to see what this movie looks

4. Creating Buttons and adding actions to buttons

  1. See ease1.html and ease1.fla
    and buttontst.html and buttontst.fla

  2. To create a button, select "Insert" and then select
    "new symbol" and choose button.

  3. There are four states to a flash button: up, over,
    down, and hit:

    up--defines the initial state of the button.

    over--defines what the button looks like when you
              run the mouse over it.

    down--defines what the button looks like when it
               is clicked.

    hit--defines the area of the button that responds to
           the mouse.

  4. In the up frame of the button, create a shape that you want to use as a button.

  5. Now go to the over frame of the button and add a
    keyframe.  Now change the color of the button in
    the "over" state.

  6. Now go to the down frame of the button and add a
    keyframe.  Now change the color of the button in
    "down" state.

  7. Finally, go to the hit frame and insert keyframe.
    Draw a circle or a box that you want to be the
    "hit" area for this button when the mouse rolls
    over it.

  8. After making a couple of buttons, go back to
    scene one and drag and drop your symbols--buttons- from your Flash movie library.

  9. You can make these buttons when clicked go to
    specific URLs by using actions.

  10. With the button selected in the frame you want the
    action to start from, select "windows" and choose

  11. In the actions panel, first select "basic actions" and
    then select "on Mouse Event." Now choose "on release" to make this button clickable.

  12. In the actions panel, now select "Go to URL" under
    the "basic actions" menu.  This will create a box that will allow you to designate a URL.  

  13. In the "Go to URL" box, make sure you designate 
    whether the URL will open up in the same or a
    new window.

4. Because Flash MX 2004 doesn't come with
sounds effects, I have created a CD of simple Flash
Sound files. You can add these sound files to your Flash program by going to this folder on your computer:

a. C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Libraries

b. Now copy the flash fla sound files from your
computer into this folder.

c. This will add these flash sounds to your Flash MX
2004 program.

d. I will e-mail the Flash sound folders I want you to
add to your Flash program

5. Creating Actionscript code for buttons in Flash
MX 2004

  1. See ease1.fla and ease1.swf for
    example of how this works.

  2. Actionscript for Play button

    on (release) {

  3. Actionscript for Stop button

    on (release) {
  4. Actionscript for stop all sounds button

    on (release) {

  5. Actionscript for go to frame 1 and stop the movie


  6. Actionscript for go to frame 1 and play the movie


2. Making a Flash Banner Ad using the elements of the Flash movie at www.moet.com . Use moet4.fla for
the basic elements.

  1. See Moet Flash movie

  2. I created a CD with images, wav, and mp3 files captured from this Flash movie.

  3. Students are welcome to make a copy of this CD
    to work on creating their Flash Banner Ad movies.

  4. There isn't one Flash movie to be created from these elements.

  5. The art of Flash movie design is what individual artists do with the elements to create their own movies.

3 .Students' Favorite Flash websites

  1. TheNorthFace.com

  2. Drive the Mars Rover

  3. Bacardi.com

  4. PeelPub.com

  5. ByMarkdowntown.com

  6. HomeStarRunner.com

  7. CatieCurtis.com

  8. Macrocosmetics.com

  9. Courvoiser.com

  10. Hennessy Cognac.com

  11. Moet.com

3.Flash Buttons

See ease1.html and ease1.fla

  1. Go to the Control Menu and turn off "Enable
    Simple Buttons. This allows you to move
    your buttons on the page.

  2. Go to the Control Menu and turn on "Enable
    Simple Buttons." This allows you to test to
    see if your button actions work.

  3. If you are having trouble working with your
    buttons, always check to see whether you
    have "Enable Simple Buttons" on or off.

  4. You can select a button to edit its states by
    clicking in the "+" area on that button.

  5. A button has four states: Up, Over, Down,
    and Hit.

  6. You need to add actions to these different
    button states you must first add a keyframe.

  7. You can add sound to these various button
    states, such as on Over or Down. Don't
    overdue these sound effects here.

  8. Just as you can add sounds using the
    "Sound library," so too can you add buttons
    using the "Button library."

  9. The "Hit" state for the button determines how
    big an area around the button will activate it.

  10. To make a button open a link, you need to go
    to the Actions panel and select "Browser/network"
    and choose "Get URL."

  11. You know you have selected the correct Actions
    command, when it ask you to determine three states for your buttons: URL, Window, and variables.

  12. You can't put an Action for a button inside one of
    the Button States. You have to go back to the
    main scene and add a button action from there.

  13. To animate buttons, you can add "movie clips"
    to your button states.

3. Putting Flash movies into webpages

  1. Make sure that the Flash movie is not
    so big that it overwhelms the webpage.

  2. The Flash movie should be a box inside
    the webpage.

  3. First, save the flash movie and copy the
    flash movie ".swf" file onto the web.

  4. Now go into a Dreamweaver webpage and
    select the "Insert" menu and select "Media"
    and then select "Flash." Insert the flash movie,
    that is its ".swf file" into the Dreamweaver

  5. When you put the Flash movie into a webpage,
    Dreamweaver will create a box just big enough
    in the webpage to hold the Flash movie.

  6. If you click on the Flash movie inside the
    webpage, you can set the parameters for
    how the movie will run in your webpage.

  7. You can use the same basic action parameters
    that you used to control sound files on webpage
    with information about looping, autoplay, etc.

  8. Always test the webpage with the Flash movie
    in it to make sure it works properly.

4. Putting Symbols within symbols to create animated Symbols

  1. Remember you can always switch from editing
    a scene to editing a symbol or tween within that
    scene by using the icons on the timeline.

  2. Make an animated action such as a
    rotating ball.

  3. Now select all the layers in this action and
    select "copy frames."

  4. Now go to the "Insert" menu and select
    " Insert New Symbol."

  5. Now select the first frame of this new symbol
    and go to the "Edit" menu and select
    "Paste Frames."

  6. This will paste all the frames in your animation
    into this symbol.

  7. You can now add this animated symbol to
    other layers of the movie.

4. Putting animated actions into movie clips and then inserting them into Flash Movies.

  1. You create "animated movie clip" symbols
    the same way you create "animated graphic"

  2. Use animated movie clip symbols instead of
    animated graphic symbols when you want to
    include the sound, the automatic looping,
    and actions in your animated symbol.

  3. Try to use animated movie clips instead of
    animated symbols because animated movie clips
    aren't as big as animated graphic symbols.

5. Adding Fade ins and Fade Outs to sounds.

  1. When adding sounds, you can controll
    how and from what channel the sound
    fades in and out

  2. Go to edit sounds and select "Effect." You
    can now control exactly how the sound
    comes in and out in your action.

  3. Use start and stop controls to make the
    sound start and stop playing.
  4. See the handout on "Including Sound in
    your Animation".

6. You can add animated movie clips to buttons to make animated buttons.

  1. You can make buttons move, change shape
    and form, and change sounds adding
    animated movie clips to buttons.

  2. Remember, just because you can do wild
    things with buttons doesn't mean you

  3. Use these tricks sparringly.

6. Publishing your Flash Movies on the web

  1. Before you publish your Flash movies on the web,
    test your movie to see if it runs properly. Go
    to "Control" and select "test movie."

  2. You can insert a Flash movie into a Dreamweaver
    "html" file, but Flash loads and runs better if
     you run the Flash movie as its own webpage.

  3. Before you publish your Flash movie, make sure you save it as a working Flash movie file by
    saving it as an "fla" file.

  4. To save a Flash movie, go to "File" and select
    "publish settings." 

  5. Under "publish settings," select "Formats" and choose "Flash (.swf)" and "Html (.html)" as file types. This will save your Flash movie as an html file whichthen plays your Flash movie-- "the .swf file".

  6. Under "publish settings," select "Flash" and then
    set the options for your Flash movie file. You want
    to set the quality of the jpeg files you use, whether
    to "protect from import" your Flash file, and 
    whether your Flash movie loads from "bottom up"
    or "top down."

  7. Under "publish settings," select "HTML" and
    then set the options for your Flash movie html file.
    Here you can set the size of your Flash movie,
    the quality of the images, and whether you want
    your Flash movie to loop.

  8. After selecting your "publish settings," now click
    on "Publish" to make a web version of your Flash 

  9. In order for your Flash movie to play on the web,
    you need to copy both the "flash.swf" and 
    "flash.html" files to the web server you site is on.

  10. When you want to play your Flash movie on the web, you will simply click on the lick to the "flash.html" file that plays the Flash movie--the "flash.swf" file.

7. A Review of Shape Tweening

  1. When you use shape tweening, remember that
    you don't need to make these shapes symbols.

  2. You create one version of the shape in one keyframe and another version of the shape in the end keyframe.

  3. Select shape tweening between these two keyframes.

  4. Notice that it takes Flash a little longer to run a
    shape tween than it does to run a motion tween.

  5. Too much shape tweening in a Flash movie will
    slow down the entire movie.

  6. If you want to transform shapes into text or text into shapes with shape tweening, you must first "break apart" the text so that Flash recognizes the text as shapes rather than text.

  7. You break apart text, by selecting the text and then
    going to "Modify" and selecting "Break apart."

  8. Here are some examples of simple shape tweens.
    Notice how fast or how slow they run depending
    on the complexity of the shape tween.

    a) shapedemo1.html

    b) shapetext.html

8. Creating a stop-action Flash movie and/or a Flash movie slideshow.

  1. See example of a simple button-activated, stop-action movie:  movpic.html. See movpic.fla .

  2. To create this stop-action movie, you need to first
    decide on how big each of your image slides will be.

  3. Remember, you want each image to fill the stage and not overlap with the following image--as is the case in my example.

  4. If the stage is 550 (wide) x 400 (high), you want to make each of your slide images about 550 wide
    and no higher than 370, because you need to
    leave room for a button on the stage.

  5. In Fireworks, adjust the size of each of your slide images to the exact size you want and then save them as a jpeg.  Because this is a Flash movie, you might want to save your jpeg images at 60 % rather than at 80 or 100 %  quality in order to make the Flash movie file smaller.

  6. In Flash, go to "File" and select "import" and import
    each of the images you want to use in your stop-action movie.  For now, just lay them one on top of the other.

  7. After you have imported the images, now lay the images out across the stage so that they make a slide-strip of images, with each image just overlapping the other.

  8. Now select all these images and make this image
    film-strip a symbol.

  9. After making the image film-strip a symbol, add a keyframe on frame 50 and now add keyframes at frames 10, 20, 30, and 40 (The number of keyframes you need to add depends on the number of images in your slideshow.

  10. At keyframes 1, 10, 20, 30, and 40, create motion tweens.

  11. Now for each keyframe from 10 to 40, move the slide-strip of images to correspond to one image being on the stage for each motion tween.  So that each time you motion tween this sildeshow, you will move from one image on
    the stage to the next.

  12. Now put "stop" actions on keyframes 1, 10, 20, 30, and 40. You don't need a "stop" action on your last keyframe ( in this case frame 50).

  13. Now create a new layer and put a small button on it.
    Make this button a symbol and choose "button"
    instead of "movie clip" under the "new symbol"

  14. Move this small button to the bottom of the stage 
    just beneath your slide-strip.

  15. Now select the button and go to the "Actions"
    panel window. In actions, first select "On Mouse
    event" and then "on release" and then select

  16. Your action script should now look like this:

    on (release) {
    play ();

  17. Remember, if you want to vary the sliding motion
    between images in your slideshow, you can use
    easing to vary the speed that each image comes on
    the state.

  18. Now test your image slideshow.  Does the button
    work the way you thought it would?  Do the images
    move at the right speed given your use of easing?

  1. Flashkit.com
  2. Macromedia Flash Support Center
  3. Flash Bible.com
  4. Flash Tools and Software
  5. Flash Jester: Flash Tools
  6. Action Script.com: Flash Tools
  7. A Photo Tour of Sewall














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

Digital Design Course homepage