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

Drawing and Painting in Flash

Assignment: Work on finishing your Image websites
by Wednesday, April 5th.

Assignment for Friday, April 7th : come to class with
URLs to the Flash websites and Flash banner ads
that you want to use as models for designing your
Flash projects.

Assignment: Practice drawing and painting shapes in
Flash and then converting them into symbols and
motion tweening them.  Can you see that Flash movies
are just sophisticated collections of simple Flash effects.

1.  Learning to create Flash Multimedia

  1. Flash Online Tutorials

  2. Beware of continuous looping of your Flash Movies. Continuous playing of Flash movies
    can be annoying.

  3. a). Flash Example: Sewtest.html--looping
    b). Flash Example: Sewtest.html--non-looping
    c). Flash Example: Sewall Text--looping
    d). Basic Example of Moving Stickman--looping
    e). Sewhall image in Flash Movie--looping
    f). Circles--non-looping
    g). Circles--looping

  4. More examples of Flash websites

    Macromedia Flash Showcase

2. Examples of Flash Banner Advertisements

  3. General Motors Cars

3. Creating Flash fla files and setting Flash movie

  1. You can set the basic properties of your Flash
    movie in the "Properties" box. You can set the
    size of your movie, the background color, the
    frame rate, and the settings for running your
    Flash movie on the web.

  2. Or you can go to "Modify" and select "Document Properties" to change or revise your Flash document properties.

  3. When I first open a Flash document, I like to make sure all my "Window panels" that I need to work on this document are open. I do this by going to "Windows" and selecting "Panel sets" and choosing the panel set I want to work with.

  4. I create a "Panel set" by first opening a Flash file and then going to the "Windows" menu and opening up all the window panels I want to use to work on this Flash file. After first opening up all
    these window panels, I then save the "Panel set" by going to the "Windows" menu and selecting "save panel layout." Panel sets in Flash are like a handy tool box with all the tools open and
    ready at your disposal.

3. Drawing and Painting in Flash 5

  1. You can select either the "stroke" or "fill" area
    of a shape to edit by clicking on it with the "pointer"

  2. If you want to select both the "stroke" and the "fill"
    areas, double click on the shape with the "pointer"

  3. You can also select a shape to work on by selecting
    the "pointer" and then use the  mouse to draw a box around the entire object.

  4. After you have selecting an object, you can then
    make it a symbol by pushing "F8".

  5. Notice that once you create a symbol, Flash stores it in the "library" panel.  If you want to add this symbol to new layers, simply drag the symbol from the library panel to the movie stage.

  6. Remember, put only one symbol per layer in a Flash movie.

  7. After you have created a symbol in a layer in frame 1, then go to frame 30 and add a keyframe by pushing "F6".

  8. Keyframes allow you to create actions for Flash

  9. Remember, you can slow down an action on a layer by adding additional frames by pushing "F5" or you
    can go into "movie properties" and decrease the
    rate of frames per second the Flash movie runs at.

  10. You can add "motion tweens" to layers by going to
    the frame you want to start the action in and
    right-clicking on it and then select "Create
    Motion Tween."

  11. You can vary a "motion tween" action by changing the "easing", the "rotation" and number of times it rotates, the "brightness", the "tint", the "alpha", and  the "advanced" effects.

  12. You can test how your movie looks by moving the
    cursor to the first frame and then hitting return.
    You can also test run a movie by selecting "control" and then "test movie."

3. Using Text, working with layers, and importing
artwork in Flash

  1. You can use guides to help you precisely layout
    objects and shapes in Flash.  When you draw a
    shape, it will then snap to guide.

  2. You can modify a layer by selecting "Modify" and
    then selecting "layer."  Notice, here you can change a layer from normal, guide, to masked.

  3. You can use the "pointer" tool and the "subselect"
    tool to modify various vector points in your shapes.  You can take rectangle edges and make them curvy.

  4. You can "group" and "ungroup" objects in order to
    move them as a group after first selecting them with the "pointer" tool.

  5. In order to work with text as shapes, you must first
    select "modify" and then "break apart."

  6. Notice how some of the Flash sites use various
    text tricks such as making the text appear
    and disappear, move and stop, and even bend
    an skew.

4. Importing Bitmap images into Flash

  1. To import a bitmap image ( a "jpg image file") into a Flash movie, select "file" and then "import." Make sure you import the image into the right layer you are working on.

  2. Bitmap images ("jpg image files") are very big.  After importing bitmap images into a Flash movie, you can convert them into vector images.

  3. You must first select the image and then select
    "modify" and select "trace bitmap."

  4. You will find that you can make these vector images clearer and sharper by adjusting the "color threshold" in the "trace bitmap" panels.

  5. Once you have imported bitmap images ( jpg image files ) and transformed them into vector images, you can then work on them just like you would any shape in Flash.

  6. You can even make these vector images symbols that you can then use Flash to act on.

5. Using the Fill panel to create exciting, colorful effects.

  1. You can use the "fill" panel to change the color
    and range of colors of  your shapes.

  2. You can also select "none" in the "fill panel to make  shapes without any fill at all.

  3. In addition to "none", there are "linear gradient",
    "radial gradient", and "bitmap" fills.

  4. Using the "gradient fills" you can create a rainbow of fill colors for your Flash shapes.

  5. You can also save and reuse these fill gradients
    for additional symbols you create.

  6. You can create more than two gradients for your fills. Simply click in between two gradients and a third gradient fill will be created.

6. Creating motion guides for symbols in Flash

  1. First create a symbol on a layer and add a
    keyframe at frame 15

  2. You can make Flash symbols follow invisible 
    "motion guides"on the Flash stage. These
    guides are located just above the layer 
    with the symbol you want to guide.

  3. You need to create a motion guide by selecting 
    "insert" and then selecting "motion guide".

  4. You can use the the pencil tool or shape tools to
    create motion guides.

  5. Once you have created a motion guide, you
    need to set up your symbol to follow this specific guide.

  6. Now go back to the layer with the symbol you want
    to guide. In the first keyframe, select motion tween and select "snap".  This will snap the symbol to the motion guide.

  7. Now go to the second keyframe, select motion tween and select "snap." This will snap the symbol in the second keyframe to the end of the motion guide.

  8. In Flash movies, these motion guides will be invisible. So no one needs to know that you are precisely alligning the motion with motion guides.

  2. Macromedia Flash Support Center
  3. Flash
  4. Flash Tools and Software
  5. Flash Jester: Flash Tools
  6. Action Flash Tools
















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: 
6510      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: 12 April, 2006

Digital Design Course homepage