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 Text and Graphics 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.


1.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

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

3. See sewflash2.html

3. Creating and Using Scenes in Flash

  1. You can break up Flash movies into separate
    scenes.

  2. One of the reasons to use multiple scenes in a
    Flash movie is to avoid having too many
    complicated layers in one scene.

  3. Break down your Flash movies into scenes
    when the action shifts from one background
    and animated event to another.

  4. When you create a Flash movie, Flash
    automatically creates scene 1.

  5. You can add additional scenes to a Flash
    movie by selecting "Insert" and selecting
    "scene."

  6. Notice that you can remove various scenes
    from a Flash movie by selecting "Insert" and
    selecting "remove scene."

  7. When working with multiple scenes, you
    want to open up the "scenes" panel.  You
    do this by selecting "Window" and then
    "Panels" and then selecting "scene."

  8. In the "scenes" panel, you can add and
    delete scenes, rearrange the order of your
    scenes, and name each scene.

  9. If you are going to use multiple scenes,
    it is a good idea to name them.

  10. In many Flash movies, there are "pre-loader,"
    "introduction," "main movie," and "concluding"
    scenes.

  11. Because each scene will continue to play
    and loop when the other scenes are playing,
    when using scenes you must include a "stop"
    action at the end of each scene. You put this
    "stop" action on the last frame of a scene.

  12. Using stop actions will ensure that each
    scene will play and then stop before the
    next scene plays.

2. See a Photo Tour of Sewall to get images for
this Shape Tween

  1. Shape Tweening using both shapes, images,
    and words.

  2. sewhall.html and sewhall.fla and

    texteffect.html and texteffect.fla


  3. To shape tween text, you need to
    "Break Apart" twice.

  4. To shape tween images, you need to
    "Break Apart" once .

  5. You can't shape tween symbols and images.

  6. You can turn a shape or "Broken Apart" object
    into a symbol, and then you can motion tween it.

2. Limiting the size of Flash movies to reduce
loading time

  1. One of the central problems for web designers is to create websites that quickly load and display their information.

  2. Many advanced Flash movies take a long time to load. Many of these advanced Flash movies include "pre-loader" scenes that tell the reader when the Flash movie will begin to play.

  3. You can reduce the size of Flash movies by using vector graphics and images.  Jpeg graphics and images require bigger image files and increase loading time.

  4. Many really advanced Flash movies require a longer download time because they use a lot of different images and animated graphic tricks.

  5. When using Flash, some designers create complex,
    artistic websites that take a longtime to download
    (especially with a phone modem), but they do so
    in order to create a complex, visual experience.

  6. So if you include a "pre-loader" scene and give the
    reader visual and graphic clues that your site is
    a complex, artsy site, many viewers will wait the
    extra time to view your site.

  7. If you want to create an "information" or "resource"
    site with Flash, you can use vector graphics and small image files to make your Flash website download in about the same time as a normal "html" website.

3. Creating Flash animations: Moving Stickman animations

  1. See the "xiaoxiaomove.com" websites for one of 
    the best examples of advanced animation on the web.

  2. One of the tricks the "xiaoxiao.com" Flash movies use is to make the background move relative to the moving stickman characters to magnify their movement, making it appear that the stickman are moving faster than they actually are.

  3. Let's create a "stickman" animation of our own.
    See stickman.fla and stickman.html

  4. The first thing you need to do is increase the size
    of your stroke to give the stickman added dimension. I increase the stroke to 10.

  5. The first thing we are going to do is create all the limbs and the head for our stickman.

  6. Each of these limbs is going to be its own symbol.  Because we want to be able to rotate each of these limbs independently from the other limb.

  7. After creating each of these limbs and making them
    symbols, we now want to go in and change the 
    "pivot points" of these limbs so that the limbs will
    appear to be moving from the top of the legs and
    the top of the arms.

  8. First select the symbol whose pivot point you want
    to change, then select  "Modify"  and "transform" 
    and  then select "edit center."

  9. Now drag the "center point" of each of the limbs to
    exactly where you want them to pivot from.

  10. Now we are going to animate the stickman by creating small motions frame by frame, making
    the limbs move from the "pivot" point of the stickman's body.

  11. Remember that each symbol must be on its own layer.

  12. You will motion tween each of these symbols in
    order to create a life-like motion effect.

  13. With advanced versions of the stickman you can use "easing" to speed-up and slow-down the action to make it look more life-like.

  14. See my example of a simple stickman.  Note that
    I haven't using easing on this example.


    a) Non-looping stickman


    b) Looping stickman

  15. Remember that you can edit the entire symbol and
    change every instance of that symbol, or you can
    just edit one "instance" of a symbol.  Make sure
    when you edit the entire symbol that is what you want to do.

4. Rotating and Moving Text and graphics

  1. Just as you can create animated motion for a stickman, so too can you create animated motion for text and graphics.

  2. You can make text and graphics move in and out
    of a scence, rotate on the stage, and appear and
    disappear.

  3. You can animate text by first creating a block of
    text that selecting it and and then breaking it
    apart.

  4. After breaking the text block apart, then make it a
    symbol.

  5. Using motion tweening and various effects such as
    alpha, rotation, and easing we can make the text 
    move on and off the page.

  6. See my simple example of such a text effect animation.

  7. One of the more common graphic effects used
    with text requires you to make each letter its own symbol and then move the letters of a word on and off the stage in a slow-motion sequence.

  8. Remember, you can also use shape tweening to have shapes turn into letters or vice-versa.

  9. Each of these text and graphic effects requires careful synchronizing with other effects.  Try
    not to make these effects too fast to too slow.

  10. Remember to vary the action of your motion
    tween by using tweening to speed-up and
    slow-down the motion.

  11. See these examples:

    1. textmorph1


    2.textmorph2


    3. textmorph3


5. Expanding the Fill to make Text look bigger and
more rounded Rotating

  1. In the Properties Box, the text size bar will only make text up to + 96. In order to make bigger text, you have to type in a bigger number.

  2. You can make text look even bigger by first
    making it a shape, by breaking it apart twice.

  3. Having made the text a shape, now go to "Modify"
    and select "Expand Fill." Be careful not to make
    this number to high or the text will be unreadable.

  4. See textmorph4 as example.

6. Distributing Text to layers in order to work with Text

  1. Create text and then "Break Apart" once.

  2. Now go to "Modify" and select "Timeline" and
    now select "Distribute to Layers." This will put
    each text character on its own layer.

  3. See an example of Text distributed to layers.

  4. See textmorph5


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

Digital Design Course homepage