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

Importing images, shape tweening,
and buttons in  Flash

   
Assignment: Practice creating play, stop, and
stop all sounds button. Practice creating shape
tweens.



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 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. Saving Flash Movies: You can save Flash Movies
in a number of formats

  1. swf files

  2. animated gif files
  3. quicktime movie files

  4. Windows Projector (.exe file)

  5. Macintosh Projector



3. Using Flash Files and Resources from
Flash User Community websites.

  1. Flashkit.com

  2. Flashkit.com Tutorials

  3. Macromedia Flash Support Center

  4. Flash Bible.com

  5. sewflash2.fla

3. Masking in Flash

  1. See Spotlight

  2. See Sewall Students

  3. See mask.fla , mask2.fla , and spot1.fla

  4. In masking, there is always the layer that is
    going to be "masked" and the layer that the
    mask will be shown through.

  5. In this case the masked layer is the picture
    of Sewall students .

  6. The next layer above the masked layer is
    the "layer mask" that selectively reveals
    objects in the masked layer.

  7. In this case, we have created a layer with a
    white ball that moves across the screen over
    the masked layer of the Sewall students.

  8. Remember that layer masking only works with
    black and white objects. White objects will
    show the object being masked.

  9. After creating the masked layer and the layer
    mask right above it. Select the layer mask
    layer and right click and chose "Mask". This
    will cause the layer mask layer to mask the
    masked layer.

  10. Notice that after you do this these two
    layers will be linked together, because one
    layer depends on the actions of the other layer.

  11. You can always undo the masking by selected
    the layer mask layer and turning the "Mask"
    off.

  12. If you turn the mask off, these two layers will
    once again be separate, independent layers in
    a Flash movie.

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
like

4. Make a Rounded Rectangle in Flash

  1. Select the Rectangle tool (R)

  2. Select the Rounded Rectange Radius
    option from the Flash tools menu

  3. You can select a radius from 2 to 100.

4. Easing Explained

  1. You can "ease in" or "ease out"

  2. "Easing in" (100+) means the action starts up fast
    and then slows down

  3. "Easing out" (100-)means the action starts up
    slow and then speeds up.

  4. Leaving easing at zero will make the object
    move at the same speed throughout.

  5. Example of "easing out" and "easing in"

5... Importing Images into a Flash movie
(see imagechange.html)

  1. Use A Photo Tour of Sewall to get an image.

  2. Use redcar.jpg, students.jpg, or studlawn.jpg to
    import an image into sewflash.fla.


  3. You can add images to a Flash movie by
    importing them. Select "File" and then select "import."  

  4. If you want the image to be sharp, import a jpeg
    file and then incorporate this image into your movie.

  5. You can import an image file and convert it from a
    "bitmap" file to a "vector" file by selecting the
    image and then selecting "modify" and "Trace
    bitmap."

  6. After you have converted the "bitmap" image file
    into a "vector" file, the file will be smaller and easier to work with in Flash. However, you will lose some of the quality and sharpness of the original image.

  7. When you are converting an image file by using
    "trace bitmap," you can vary the quality an sharpness of the "vector" image you create by changing the "color threshold" from a large
    number (200) to a smaller number (50).  The lower the number in the color threshold, the better the quality and the bigger the "vector" file.

  8. If you want to make sure your images are sharper, keep them in a "bitmap" format such as jpeg.

3.  Using motion tweening to transform an image from a
     a raw image to a sharply defined image.

  1. You will often see in Flash an image that begins a little blurry and undefined and slowly transforms into a high-quality, well-defined image.

  2. See flowers.html & sunflower.html as an example.
    Download and look at flower.fla


  3. You can create this "transforming picture effect"
    by using motion tweening and varying the "color threshold" of your vector image.

  4. On the same layer, you can motion tween various
    versions of the same vector image and vary their
    color thresholds from a high number (220) to a low
    number (40) and then ending the motion tween with
    the jpeg version of this image.

  5. Remember that each time you change the color
    threshold of the image, you must then make it
    a symbol. You will end up have five or six symbols
    of this image, which each look different from the last. (See flowers.html and sunflower.html)

  6. When you are using this "transforming picture effect", make sure that you don't make the transformations too fast or make the action jerky and jumpy.

  7. Always test this image effect.  If you need to add more frames to slow the effect down, then do so. 
    If you need to add more versions of the image at different "color thresholds" to make the effect
    less jerky, then do so.

4.Using the transform panel to make an image appear
as if it is zooming in and out

  1. See Sewall Movie

  2. Download and look at zoom.fla

5. Shape tweening effects using Flash

  1. Examples of Shape tweens


    a) From Triangle to Circle


    b) From Circle to Box


    c)Sewact demo


    d) Tubaman

  2. Remember, that you don't make elements that
    you shape tween into "symbols."

  3. If you are going to shape tween text, you must
    first select it and select "modify" and "break
    apart."

  4. First create the initial shape you want to tween.

  5. Then go to frame twenty and create a keyframe.

  6. After creating a keyframe, select and cut the shape
    you created in frame one from your keyframe at frame 20.

  7. Now create a second shape that you want the first
    shape to transform into, for example you could have a circle transform into a square.

  8. Now go back to your first keyframe and select
    "shape" tween.

  9. Notice that shape tweening is often unpredictable and requires  more computer power so that the effect may often seem to go a little slower than the rest of your Flash movie.

  10. You can use "shape hints" to help direct how and
    where the shapes will transform from one shape to
    the other.

4. Creating Buttons and adding actions to buttons

  1. See ease1.html and ease1.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
    "actions."

  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."Open Common Library" and "normal mode" are not
available for Flash MX 2004.

5. Instead of using "Open Common Library,"
Flash MX 2004 uses "File," "Import," and
"Open External Library" (Use this feature to
share material from other flash movies

6.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) {
    play();
    }

  3. Actionscript for Stop button


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

    on (release) {
    stopAllSounds();
    }

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

    gotoAndStop(1);

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

    gotoAndPlay(1);

  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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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: 
18557      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/flashpub.htm

Digital Design Course homepage