Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Conceptualizing Animation, Effects, and their Tools

Animation is the art of creating a series of differing images that creates the appearance of movement when played in rapid succession over time. In Flash, these images are placed on frames, which play at a rate that you specify. Faster frame rates create animation and effects that appear smoother to the eye. Slower frame rates (lower numbers) create jerkier animation. The kind of animation or effect you create determines how fast you need your frame rate to be.

Many people consider drawing and cartooning (such as character animation, lip syncing, and manipulating drawn objects) to be animation. Effects are very similar to animations, and some people might even consider them to be the same thing. Effects, in the context of this book, include ways of manipulating color, changing brightness, fading objects, and integrating video in Flash. You might consider these to be visual effects. These kinds of effects often involve the same techniques as animation, although they typically produce very different visual results in your SWF files.

There are many different tools that you can use with Flash to create animation and effects. It is easier to produce amazing effects and animation when you combine the power of several different software packages and use a variety of techniques to integrate the technology. For example, you can use Swift 3D (Electric Rain) to create 3D effects and then import the files into Flash to display. Or, you could composite video effects using Adobe After Effects and import a rendered video file into your FLA document where you could add Flash animation to complement the video. Although using external software like Swift and After Effects goes beyond the scope of this book, you will learn how to use Flash to create animation you could combine with other technologies such as these.

Finding software for effects and animation

There is a lot of software available for you to use in conjunction with Flash to create animation and effects. Although you do not have to use anything more than the Flash authoring tool for your effects and animations in the following projects, you might be interested in investigating some of the other tools that you can use to further the capabilities of your SWF files, and enhance your creativity.

Toon Boom Studio:
Used for creating amazing 2D animation, Toon Boom is an excellent choice for drawing and creating graphics for Flash. You can even create simple animations using the powerful drawing tools, and then import native files from Toon Boom into Flash using an extension or output directly to a SWF file. Toon Boom also includes lip-sync and 3D camera tools.

Swift 3D:
You can use Electric Rain's Swift 3D to create 3D animations quickly and efficiently. You can export directly to a SWF file or import the native file format into Flash by using an extension. You can import raster images, model realistic 3D objects, and animate those objects using this software.

Adobe Photoshop and Macromedia Fireworks:
One of the leading graphics and photo-editing software packages, Photoshop provides a vast amount of control over your photos, creates bitmap graphics, and combines images and effects to achieve original and creative results. The native file format, PSD, can import directly into Flash. Macromedia Fireworks is an inexpensive web graphics program that integrates seamlessly with Flash MX 2004, enabling you to switch between the two programs quickly and effortlessly. You can maintain editable objects in Flash when you import a Fireworks PNG file. PNG is perhaps the best image file format to import into Flash. Other popular choices for image creation and editing include Corel Painter and PaintShop Pro.

Adobe After Effects:
Adobe After Effects (and other video editing and compositing packages) lets you edit videos and add effects and produce professional-looking content. You can also create text effects and modify content by using a timeline and keyframes, much like Flash. After Effects can output to a SWF file; if you have Flash MX Professional, you can output FLV (Flash Video) files.

FLA files are the native file format in Flash because you can edit only FLA files using Flash. SWF files (that you export from Flash) are open format. Therefore, other programs can import and export SWF files, and the files can play in different players.

Adobe Illustrator:
Illustrator is an industry leading vector-graphics program. Illustrator is used to create static vector drawings, from technical illustrations and diagrams to cartoons and greeting cards. Many Flash designers use Illustrator to create vector illustrations that they import into Flash to animate. Flash has a range of import settings for Illustrator's AI files.

Inputting your art

If you are cartooning or animating drawings, you might need to get your drawings from paper into digital format. Many artists and animators use a scanner to input drawings into the computer. They might scan the image into a program such as Photoshop. Then the artist traces the scanned image in Photoshop, Flash, or another image-editing program, typically by using a graphics tablet. Then the artist uses Flash to manipulate and animate the illustrations, as you'll do in this book.

Other artists might draw directly into Flash or image-editing software using a graphics tablet. A tablet is an input device that lets you draw directly into the computer and uses a pen as the input device. The pen acts as the mouse pointer. Tablets have varying amounts of pressure sensitivity. If you press down harder on the tablet, the marks you make in Photoshop or Flash appear darker or wider, just as if you were drawing with a pencil. The software that you use must support pressure sensitivity. For example, Flash supports pressure sensitivity when you use Wacom tablets.

Tablets greatly range in price, depending on quality, size, and features. Many tablets are relatively inexpensive. If you purchase a tablet to draw in Flash, make sure that you purchase one that is compatible with the software. Flash is compatible with Wacom tablets, but if you choose a different brand, you should do research on the compatibility or make sure you can return the product if it doesn't work with Flash.

Some artists feel more comfortable with a pen, or pencil and paper, than a tablet. However, tablets work very well and can create drawings that look incredibly similar to pencil drawings and even paintings. Either way works very well, so it is up to you which method works the best for you personally.

Using and mimicking video

Video is commonly used for effects and content in Flash, particularly with the improved editing support available in Flash and effective compression offered by the FLV (Flash Video) format. The benefit of using Flash to present video footage is that you can integrate animation and effects with video, which is not as easy or even possible in other media players. This can be done quickly and easily in Flash, and allows you to use video footage in projects that wouldn't otherwise support using it, such as SWF banners on a website.

If you don't use video, you can use a series of bitmap images to mimic video content. You might use Photoshop or Fireworks to create a series of images that you import into Flash and add sequentially across frames on the Timeline. You can also use a video editor to output a series of images instead of a video file. This effect is sometimes used for Flash content because transparent video is not yet supported in Flash.

You can edit transparent video in another program (such as Final Cut Pro), and then output to an image format that supports transparency (such as PNG). Then you can import the series of PNG files into Flash for further editing, and you can use what appears like transparent video in Flash.

Transparent Video

Transparent video allows you to create a video with transparent regions; for example, a transparent background. A person who edits video might remove the background using blue screen technology (software can be used can easily remove a very colorsuch as bright bluefrom footage), and then overlay the remaining video over different footage, an image, or a Flash animation! When you see a SWF file with video of a person appearing to stand in front of a Flash animation, it's possible that blue screen was used to remove the former background and replace it with the same color as the SWF file's background. However, transparent video was not used for this effect.

An everyday example of blue screening is used in the nightly news when a weather person appears to stand in front of a giant map of your region. He or she typically stands in front of a blue (or green) screen, and the video of the region or weather patterns is added for the television broadcast. This kind of technique is also commonly used for special effects in movies, such as when they use large amounts of computer animation.

Using color and palettes

When you design a website, color is an important consideration for several reasons. A wise combination of colors looks attractive and affects the look and feel of your site. You can use colors to communicate messages to your visitors, enhance quality, and generate interest in your content. However, you need to be careful about which colors you use when you target specific audiences.

Flash contains palettes and swatches that you use to select colors (Figure 1.2). You can use predefined palettes that you select in Flash, or you can create your own and import palettes from other files and programs. You can apply these colors to your drawings or to the background of the SWF file.

You can also specify colors by their hexadecimal, Red Green Blue (RGB) or Hue Saturation Brightness (HSB) values. These color modes represent colors in different ways, and you can switch between them in Flash. RGB uses three numerical values to define a color, and HSB uses a value for the degree of rotation on the color wheel, and uses percentages for saturation and brightness of the color. Hexadecimal color mode uses a base-16 system of representation. It's a combination of six numbers and letters that define the color, which you are probably familiar with if you've ever defined color in a111 file or set color values in ActionScript. These six numbers and letters (made up of 0-9 and A-F) use sets of two characters for each color channel: red, blue and green. It organizes the sets as RRGGBB, where RR specifies the red value, GG specifies the green value, and BB specifies blue. You can view the RGB color mode equivalents to a specified hexadecimal in the Color Mixer panel (Window > Design Panels > Color Mixer).

This book primarily uses hexadecimal values for defining colors.

You can select colors by clicking them anywhere in Flash or on the desktop with what's called the Eyedropper tool.