Home arrow Flash arrow Page 2 - Animations and Interaction
FLASH

Animations and Interaction


This chapter provides a quick review of animation basics and the fundamentals of tweening then discusses vector graphic vs. bitmap graphics, working the Timeline and Timeline effects, masking layers and coordinating animated parts. (Chapter 4 from the book, Macromedia Flash MX Professional 2004 by Bill Sanders, Sams, 2004, ISBN 0672326051.)

Author Info:
By: Bill Sanders
Rating: 3 stars3 stars3 stars3 stars3 stars / 15
July 07, 2004
TABLE OF CONTENTS:
  1. · Animations and Interaction
  2. · Vector Graphics Versus Bitmap Graphics
  3. · Working the Timeline
  4. · Using Shape Hints to Morph Fonts
  5. · Tweening Imported Vector Graphics
  6. · Making and Using Guide Layers
  7. · Masking Layers
  8. · Echoing Layers
  9. · Timeline Effects
  10. · Choosing Positions for a Figure
  11. · Animating the Spearman and the Buffalo

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Animations and Interaction - Vector Graphics Versus Bitmap Graphics
(Page 2 of 11 )

Bitmapped graphics can be imported from various sources, ranging from digital photos to user-created graphics developed on drawing applications. As noted in Chapter 1, "Getting to Know Flash Pro," bitmapped graphics are "weightier" (have larger file sizes) than vector graphics in most cases, and Flash has an option for transforming bitmapped graphics into vector graphics (select Modify, Bitmap, Trace Bitmap). Depending on the settings used to convert a bitmapped graphic into a vector graphic, the weight differs significantly. When you're using digital photographs in JPEG format, a good-quality picture will actually result in a much higher weight for a vector graphic than a bitmapped graphic. To reduce the graphic weight, the original JPEG graphic is distorted when it's transformed into a vector graphic, as shown in Figures 4.3 and 4.4.

sanders

Figure 4.3 - The original graphic in JPEG format created with a screenshot.

sanders

Figure 4.4 - Once a bitmapped graphic has been changed to a vector graphic, reduction to a smaller file size can distort the graphic.

Tracing vector graphics from bitmapped graphics has an inverse relationship between quality and size. The graphic in Figure 4.4 only resolved to a SWF file of about 12KB. However, when the bitmap tracing used higher-quality settings, the SWF file with the vector image was 193KB. The bitmapped image in the SWF file was only 12KB as well, so other than blurring the picture and gaining the ability to change the size of the image without pixel distortion, nothing is gained by changing the image from bitmapped to vector graphics. The weight of the SWF files for both the vector graphic and bitmapped graphic are the same.


Starting with the Right Tools - When you need to change the size of a bitmapped graphic, rather than changing it into a vector graphic and making it larger or smaller, it's generally a better idea to change the bitmapped graphic in an application such as Macromedia Fireworks or Adobe Photoshop and then import it into Flash.


Table 4.1 provides an overview of the unique settings in the Trace Bitmap dialog box. Compare the file sizes in the last line of the table to see how the settings have an impact on the file sizes of the bitmap.

Table 4.1 Trace Bitmap Parameters and Settings

Parameter

Settings

Sample 1

Sample 2

Color Threshold

1–500. The lower the setting, the more unique colors that are included.

100

10

Minimum Area

1–1000. Takes into account the number of pixels to consider when assigning color values.

10

1

Curve Fit

The Pixels setting is more exacting than the Normal setting, which gives you a smoother fit and therefore takes more memory.

Normal

Pixels

Corner Threshold

Many Corners, Normal, or Few Corners. The more corners, the more exact the fit.

Normal

Many Corners

SWF File Size

Single graphic in SWF file.

12KB

193KB


The best practice in using the Trace Bitmap dialog box depends on meeting the needs of your project. Ideally, if you can create your graphics in Flash, you won't have to worry about the weight and limitations of bitmapped graphics in your applications.

When imported into Flash, complex vector graphics, especially those created with a program such as Macromedia FreeHand or Adobe Illustrator, can be very heavy. A 50KB FreeHand illustration imported into Flash will not be lighter than a 50KB bitmapped graphic, and although it retains the ability to be changed without distortion, such an image can be very heavy. For example, a 25KB vector graphic image imported from FreeHand will compile into about a 45KB SWF file.

Often a bitmapped graphic may be more appropriate for a Flash movie for nondynamic content such as backgrounds. Also, because certain graphic images such as digital photographs are very heavy when converted to vector graphics, they, too, are best left in bitmapped format.

However, vector graphics can be created in Flash and other applications and used effectively in a Flash movie. The point to keep in mind is that complex and heavy vector graphics won't become less heavy if imported into Flash and compiled into a SWF file.

This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today.

Buy this book now.


blog comments powered by Disqus
FLASH ARTICLES

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials