How do I… Create an animated image in Flash for my Web page?

Because Flash has evolved into a ubiquitous multifaceted tool for deploying all kinds of content to the Web, it is easy to overlook its streamlined and easy-to-use Timeline animation features. Flash’s Timeline allows you to create smooth and smart animations that can be as simple or as complex as you would like them to be.

In this document, I’m going to show you how simple it is to create the illusion of depth in a Flash animation using nothing more than the Timeline palette and the Oval tool — without a hint of ActionScript code. Mind you, most professional Flash animators do rely on (rather complex) ActionScript for their animation effects, but we’ll work up to that later.

This blog post is also available in PDF form as a TechRepublic download, which includes a sample Flash file created using the technique described.

If you don’t own a copy of Flash CS3, you can download a fully functioning 30-day trial.

Creating a file

Let’s start by opening Flash CS3 and creating a new file. From the File menu, select the New option. In the dialog box that appears, select Type: Flash File ActionScript 3.0. Even though we won’t be using ActionScript at all in this example, let’s keep the file compatible with the most recent iteration.

Your layout should look like Figure A.

Figure A

The default layout of the Flash CS3 workspace

Lots of animation tutorials get you started by having you animate a bouncing ball, but we’ll go a little farther than that. We’re going to animate a moon coming out from behind a planet, revolving around to the front, and then disappearing behind the planet — while increasing and decreasing in size as it comes toward and moves away from the camera on its orbit.

The orbiting idea came from a TechRepublic member who is trying to perform the same function using JavaScript. Can you describe how to accomplish this animation using JavaScript? Submit your answer using our new Blog Submission Tool.

Start by saving your file. It’s always a good idea to save your file as soon as you create it, because as you work and save every few minutes, a fast hit on [Ctrl]+[S] will be a habit that you’ll form quickly.

Let’s start by changing the color of the stage to black so that our planet and moon will be living in outer space instead of on a boring whiteboard.

Go to the bottom of the screen and in the Properties palette, click the Background color box and choose a black swatch. While you’re in the Properties palette, click in the field labeled Frame Rate and change the number from 12 to 24. Since most film animation displays 24 frames per second, this setting will look much more pleasing to the viewer. Refer to Figure B to see how these changes should appear.

Figure B

Making the background of the Flash movie black and changing the Frame Rate to 24 frames per second (FPS)

Next, go to the Layers palette at the top of the screen. It’s tied directly to the Timeline window, so as you add layers to your file, you add layers to the working Timeline. Double-click the first layer and rename it “Planet.” Click the Insert Layer button again and rename the new layer you create “Moon.” Finally, click the Insert Layer button one more time and name the third layer “Mask.” Your Layers palette should resemble Figure C.

Figure C

Creating the layers for the animation

Now let’s get drawing.

Start by selecting the layer named Planet in the Layers palette to ensure that the planet you’re about to draw is on the correct layer. Then, select the Oval tool from the Toolbox on the far left, and for the Fill color, choose a pleasant blue. Also, make sure that no Stroke option is selected; otherwise, when you draw the planet on the stage, it will have a line around it. Refer to Figure D if you are unfamiliar with the Toolbox.

Figure D

Selecting the Oval tool with a blue fill and no stroke in the Toolbox

Go to the Black stage and while holding down the [Shift] key (to constrain our Oval tool into drawing a circle), click and drag to draw a circle on the stage that will represent our planet. Don’t draw the planet too large, or there will not be enough room to animate the moon in orbit.

Next, lock the Planet and Mask layers and select the Moon layer in the Layers palette.

This step is important!

The Timeline can animate only one object on a layer, and it will be much easier for you to create your animations if you keep all of your stage objects on separate layers. Figure E shows you how to lock a layer.

Figure E

Locking the Planet and Mask layers and selecting the Moon layer

Now, go back to the Toolbox and select the Oval tool again. For the fill color, choose an orange-yellow hue. Then, go back to the stage and draw a smaller circle that will represent the moon. Your stage should look like Figure F.

Figure F

The stage with the planet and moon in place

The planet and moon are on the stage, so it’s time to animate the moon. Flash can put an object in motion only if it exists as a Symbol. So before we can put the moon in orbit, we have to turn it into a Symbol.

Click on the moon to select it, then right-click on it to bring up a contextual menu. From that menu, choose Convert To Symbol. A dialog box will appear, as shown in Figure G. Give the Symbol a name of (you guessed it — Moon) and select the Movie Clip option. Click OK to return to the stage, where you’ll notice that the moon has a blue bounding box around it.

Figure G

Converting the Moon object to a Symbol

Rather than painstakingly animating the moon in orbit by hand, you’re going to rely on Flash’s Motion Guides and keyframes to do all of the heavy lifting.

A Motion Guide is exactly what it sounds like: a line that will guide a symbol about the stage. Keyframes are specific frames in the Timeline in which you can change the position or properties of a symbol and have Flash animate the transitions between the frames.

Right-click on the Moon layer and from the contextual menu, select Add Motion Guide. Click on the Motion Guide layer to select it, as shown in Figure H.

Figure H

Selecting the new Motion Guide layer for the Moon layer

The Motion Guide layer is where you will create your orbit path for the moon. Select the Oval tool from the Toolbox again, but this time, select a White stroke and no fill. Then, go back to the Stage and draw a narrow, horizontal oval around the center of the planet, as shown in Figure I.

Figure I

Creating the Motion Guide for the moon’s orbit

Motion Guides work best when they have a beginning point and an end point, but right now our orbit is a closed circle. Choose the Selection tool from the Toolbox and click and drag to select a small segment of the orbit path near the top center. Press the [Backspace] key to delete it. Your Motion Guide should look like Figure J.

Figure J

Breaking the oval to give the Motion Guide a beginning and ending point

Select the Moon Symbol and place it at the left-hand open end of the Motion Guide. It should snap into position via an anchor point in the center of the Moon Symbol. Then, choose the Free Transform tool from the Toolbox and reduce the size of the Moon Symbol to about half of its current size. Your stage should look like Figure K.

Figure K

Reducing the size of the moon and placing it at the start of the Motion Guide

Here’s where keyframes come into play. Go up to the Timeline and click and place your mouse into the 48th frame at the top layer (the one labeled Mask). Click and drag straight down to the bottom layer to select the frame across all four layers. Then, right-click in the selection and from the pop-up menu, choose the Insert Keyframe. Your Timeline palette should look like Figure L.

Figure L

Inserting keyframes at the end of the animation

Now, go back to the Stage and select the Moon symbol. Click and drag it to the opposite end of the Motion Guide, allowing it to snap into place, as shown in Figure M.

Figure M

The Moon at the ending position of the animation

Here is where the magic happens. Go back to the Timeline and select Frame 1 of the Moon layer. Right-click the frame and choose Create Motion Tween. The Moon layer will turn blue, with an arrow leading from keyframe 1 to keyframe 48. If you press the [Enter] key, you will get a preview of the animation, as the moon revolves around the planet.

But our animation lacks depth. Let’s start by making the moon appear bigger as it revolves toward us. Use your mouse to select Frame 24 in the Moon layer and right-click on it. Select Insert Keyframe again, making your Timeline look like the example in Figure N.

Figure N

Inserting a new Keyframe into the middle of the timeline

Now, select the moon on the stage and choose the Free Transform tool from the Toolbox again. This time, increase the size of the moon by about 100 percent (Figure O). Hit [Enter] again to preview the animation and see the moon increase and decrease in size as it moves to and from the camera.

Figure O

Increasing the size of the moon at the new Keyframe

We’re almost there. All we need to do now is make it look as if the moon disappears behind the planet at the back of its orbit.

Lock the Moon layer and the Motion Guide layer and then unlock the Planet layer and the Mask layer. Select the planet and copy it to the Clipboard. Go back to the Timeline and just as you did before, select Frame 6 of the Mask layer and insert a Keyframe. Then, in the same layer, insert another Keyframe at Frame 43. Your Timeline should look like Figure P.

Figure P

Inserting new Keyframes in the Mask layer

Select Frame 1 of the Timeline in the Mask layer. From the Edit menu, choose Paste In Place to drop a copy of the planet in the exact position as it exists on the Planet layer. Repeat this process at Keyframe 43 of the Mask layer. Finally, select Keyframe 48 of the Mask layer, right-click and then select Clear Keyframe to remove the empty Keyframe and extend the mask to the end of the movie.

Press [Ctrl]+[Enter] to test your movie. You’ll see that the Guide layer is not visible in the final SWF file.

That’s all there is to creating an animated 3-D effect with 2-D objects in Flash. Keep the Flash Timeline in mind the next time you need to quickly create a simple, attention-grabbing animation.

Isn't it easy???

Add meaning to Web pages with microformats

One thing that makes the Web so interesting is that it’s constantly changing, as new technologies and techniques are introduced on an almost daily basis. A technology that has gathered steam the past couple years is microformats. Microformats allow you to add context to existing information contained within a Web page.

The semantic Web

The semantic Web is an evolving extension of the Web. It says that Web content can be expressed not only in natural language, but also in a format that can be read and used by software agents. This allows the software agents to more easily find, share, and integrate information.

While the semantic Web is designed for machines first, microformats are designed for humans first. The goal of microformats is to create a web of data that anyone can publish, consume, and so forth. There is a low barrier to entry for the microformats concept, so anyone with an understanding of XHTML can easily publish their own microformats.

What are microformats?

Microformats provide a more formalized technology for adding commonly used semantics to today’s Web. Microformats are a set of open data formats that use existing technology and standards, most notably XHTML. The microformats site makes the following assertions about the technology:

• Microformats are a way of thinking about data.
• Microformats are design principles for formats.
• Microformats are adapted to current behaviors and usage patterns.
• Microformats are highly correlated with semantic XHTML.
• Microformats are a set of simple data formats that many are actively developing and implementing.

A key concept is the usage of existing technologies (such as XHTML) that have been well tested. This allows developers to focus on the data as opposed to the technology.

Microformats in practice

A common application of microformats is providing contact or event data. The hCard microformats specification provides a guideline for including contact data within a Web page.

The hCard standard is a simple, open, and distributed format for representing people, companies, organizations, and places. It closely follows the vCard standard. The hCard standard defines specific elements for defining pieces of data.

The different data elements are specified using the class attribute (all class names are lowercase). The complete contact card is comprised by the vCard class, so this class is applied to a DIV element that contains the complete contact information. Individual data elements on the card are designated with the appropriate class name. For example, a person’s state is designated by the region class.

The following listing provides a look at a possible hCard for myself. It lists my name, organization (TechRepublic.com), city (Louisville), state (Kentucky), and country (USA).

Tony Patton
TechRepublic.com

Louisville,
KY
USA

I could easily include this data in a Web page since it is standard XHTML. The data could be easily read by other applications that understand the hCard format. Also, the data could easily be formatted for presentation using standard CSS since the data is contained within basic XHTML.

The hCard Creator tool provides an easy way to assemble the appropriate hCard for a contact. Another common use of microformats is for providing information about events. This is accomplished with the hCalendar format.

The hCalendar specification is an open standard based on the iCalendar standard. The hCalendar format follows the approach used by the hCard standard; that is, class names are used to tag data elements.

The complete event is contained within a DIV element and assigned the vevent class name. Individual aspects of the calendar entry are contained within this DIV element. The start and end dates are marked by the dtstart and dtend class names with the title attribute containing the full date. The following illustrates a sample event for last week’s Web Development column.

November 6th,
 2007
Web Development
Weekly Web Development column.