DIY

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

Flash has evolved into a ubiquitous multi-faceted tool for deploying all kinds of content on to the World Wide Web. Flash's Timeline allows you create smooth and smart animations that can be as simple or as complex as you would like them to be. John Lee shows 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.

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.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

23 comments
bonifaciomars
bonifaciomars

Excellent I do really like it a lot...... your articles are very useful for everyone, beginnings and experts, I even have some of your themes web articles on my web site www.themigrantnews.com/company. I would like to know if you have any article relates a SQL server 2000 issue that I am facing right now, I cannot installed it on my system..... xp sp 2 / while installing the program I got the error ::::::your SQL installation has been tampered. or refers to sqllog.dll....... or even boot.dll....... files, please if you can be able to help me I will very happy. or even better If I have to pay for the service. Kind Regards, Joe www.themigrantnews.com/company. bonifaciomars@aol.com PS: I ALWASY BUY BOOKS FOR SITEPOINT.COM KEEP UP THE GOOD WORK GOD BLESS!!!!

mdbradsh
mdbradsh

Hi....just caught this discussion and wanted to add my two cents. As Flash may be out for you Pro's, it's really on fire with the creative folks. Artists, Photograghers and etc. I can certainly understand keeping a business/corporate site simple and clean, but personal websites are another thing. I hear far more complaints from people about websites being too plain and/or boring in look and interactivity than about taking a couple of seconds to load. Flash is one of the best tools for adding visual interest and interactivity to a website. There's just so much you can do with it. It's versitility is vast. Who wants to sit and make dozens of css sheets for an animation when I can make two images and create a motion tween between them in Flash in just a few seconds? Yes, you do have to keep it as clean and be size conscious as you can, but that's nothing new and has always been the case with everything when it comes to the web. Personally, I think there's some sour grapes out there about it frankly because of their difficulty in learning it and their lack of creativity in using it!

dfirefire
dfirefire

This example is very nice, but it is and remains an illusion of 3D! There is an open ISO standard for 3D, it is called x3d, is derived from VRML and is in fact a real 3D language, allowing to create something like this and a whole lot more without it being an illusion, but actual 3D. This allows you to make shapes, animations, play with camera angles, ... Just take a look at it on www.web3d.org or on my website (or other and better ones). This technology can become the 3D equivalent of flash...

nkemmyown2003
nkemmyown2003

simple and cool, Great job you did there !!!!!!!!!

holywar_1
holywar_1

Thanks thats really nice learning for me, coz its all new (I'm just starting with flash). I wanted to ask though, how can I make this animation to run more smoothly, coz now its kinda blinking as it goes from frame to frame.. I tried to widen it to 72 pixels and its a bit better, but still... Thanks

BALTHOR
BALTHOR

I've seen the trappings of a theory.Shoot a video and turn it into a flash file or a gif.Somebody's new switcher may be able to generate these files.HDTV is on the same Telephone lines.HDTV won't cause ISP throttling.The phone lines are loaded with a Torrent of bits that just work.

justchange
justchange

Flash?? is a tool. And, as such, it has a place in the webdev toolbox. However, its overuse has caused me to despise "Flash?-driven" websites. I use it, in one case, to provide a small, animated logo... the smooth colors and transitions are far superior to most GIF anims, and its filesize not much larger than a quality JPEG. Other uses involve instructional/informational, on-demand "videos". However, when visiting a website (especially after the first time!) when I click or hover over a menu/link, I want an apprpropiate reaction... not a gratuitous animated movie transition to the next menu. That might have been okay a few years ago when Flash? was the-new-thing, but now it's just (as others have said) annoying. (And many of the Flash?-driven image galleries are maddeningly non-intuitive for the casual visitor.) Regarding this article: It is a nice, simple introduction to certain techniques/concepts that are useful to know when Flash? is considered appropriate technology... in a specific context. Outside that appropriate context it has about as much enduring entertainment value as a wind-up toy.

Duggeek
Duggeek

True. It's a simple technique, but how about some gravy? This was a great exercise, even back in the days of Flash 4 and 5.5, but I don't know of a single person (even among my parents) that's limited to 256 colors. There's no need to keep those flat hues for your movie. Here's the gravy: 1. Drill into one of your symbols and select the shape (planet, moon, either one) so that it has the selection-mesh on it. 2. Over in the Color Mixer palette, drop the menu to change the 'mode' of the coloring; select "radial" to have a gradient that starts in the center and fades towards the edges of the shape. 3. You now have two colors to pick; the start of the gradient and the end. All the colors in-between will be automatically handled by the Flash engine. The circle now appears something like a 'bump', but doesn't really have that planetary-body feel to it yet. Read on... 4. Select the bucket tool from the tools palette. When you use the bucket tool with a radial gradient, one click will just change the center of the gradient on the shape. On the same shape, click in the upper-left area of the circle. Now we're talking! It looks like a bona-fide sphere. Other effects are possible, especially if you also have a talent for graphics (a'la Photoshop) and can import those into your movie. Without going through all that, this is probably the best 'finishing touch' for this simple project. Make the same changes for the other circle in the movie (remember to select the shape *within* the movie-clip symbol, the movie clip can't be changed in the same way as a shape) and you've got a couple of serious-looking orbs! Just sayin' ;)

ncuster
ncuster

Wouldn't it be easier to just use an animated .gif?

eclypse
eclypse

Pretty cool, laws yes!

drarrn
drarrn

Wonderful. Just like magic.

AYJE
AYJE

great details, but I was hoping to see the animation in motion at the end. I will have to do it my self.

dougbrong
dougbrong

All I can say is crap. This is what programming has become?

Oz_Media
Oz_Media

It is way easier and much cleaner code, faster load etc. if you simply use CSS to reposition a series of graphics. There are too many Flash heavy sites they use Flash as if it's the only animation tool, resulting in massively boated pages from poor design. While at one time, FLASH was kinda cool, as people experimetned with different animations on their websites. Now it's just 'kin annoying when you hit a site and have to wait for FLASH to load because of the poorly built page some dork spent 5 days building FLASH for, instead of simple navigation. Who's got time to watch your site dance and sing when they need business information? In a corporate or SMB environment, irrelevant Flash is the certain death of your website's effectiveness. I'd suggest keeping it to personal pages where people still get off on that stuff.

riotsquirrl
riotsquirrl

If you have some functional reason for using Flash, *and* you're going to make sure your Web page otherwise meets accessibility requirements, hey, knock yourself out. But nothing annoys me more than going to an organizational Web site and having to click through some stupid animation that conveys nothing.

elm.mcquarters
elm.mcquarters

You see...this is a typical Canadian response/attitude towards a simple attempt by the animation author to give web jockeys a different look at another way to create a cool project. I have money that says this animation "critic" can not show internet visitors their portfolio that rivals the portfolio of the presenter in question. This "critic" has failed to recognize that flash is THE industry standard for today's internet animation community, among corporate, and personal web sites.

Duggeek
Duggeek

If you're talking about the big-budget flash-dev houses and their showcase sites... then okay. If you're talking about smaller e-commerce and the like; Flash can still be useful, and it usually doesn't hurt to have some liveliness on the page. Less is more, to be sure, and not everybody that puts Flash on their site is going to go overboard with it. In my experience, it's a valuable tool to add some depth to a page. Specifically, in the sense of a simple slide-show or when navigating a gallery. Still, if you're speaking towards the completely overblown works (e.g., not a scrap of decent HTML, just a Flash object for the entire page) then I'm in total agreement. I'd also agree with another poster here (you know who you are) that, for small pieces, animated GIF's are far more portable and browser-friendly. HOWEVER... any simple animation timeline in Flash can be exported as animated GIF. It's included! Even though it's not a SWF product, it was still made with Flash. It's the best consumer-accessible animation system I know.

paul.mantegna
paul.mantegna

I agree. Personally I have Flash turned off by default in my browser. I generally browse for information and not "eye candy". Web site navigation in Flash is the scourge of the Internet and displays a high degree of arrogance and ignorance on the part of the site designer/owner.

kcburke
kcburke

I was able to access your FLA file and got the same flicker as the one I created. Is it just my video setup or is the flicker inevitable?

Oz_Media
Oz_Media

While your compilation of words is an entertaining read, your context was off. This is a Flash tutorial I saw available about 4 yeas ago in the Macrodmedia studio, when FLASH was still desirable for corporate sites as well as personal pages. While it does have its place, for the most part, people are getting tired of FLASH. This is common knowledge, as displayed by others here and amongst SE Optimizers, people who trakc web activity closely etc. I also did not comment on the tutorial as it was presented, as it was accurate and helpful for people still thinking of learning basic FLASH. Again though, as you brought the author into it, this is a pretty basic tutorial, available at a dozen free tutorial sites for many years now. As for my portfolio, you haven't a clue, that's simply an unqualified assertion, and what relevance is that anyway. Nobody was denying the quality or effectiveness of the tutorial itself, just the rapidly dying effectiveness of FLASH for retaining visitors. THE industry standard among corporate websites? Please post links to this fact. Personal perhaps, but not corporate. Having studied SEO for over 10 years, I'm confident in telling you that eye candy is corporate site killer #1. Read some of the other comments here to see how acceptable FLASH is to professionals. But that's just my typically Canadian opinion, though I am not a Canadian.

Oz_Media
Oz_Media

As noted above, I do use Flash buttons because Dreamweaver has a great selection of formatted buttons to use. But even a page with a scrolling banner or ad is just not professional enough for me anymore. I've found that from working with C level clients all the time, they don't get off on it and would rather just have a simple page. I am getting tired of everyone thinkin gthey need animations on pages, it's for kids and retail/e-commerce (same thing), but not for professionals at work or corporate environments.

Oz_Media
Oz_Media

I do use FLASH buttons on websites, they are an easy insert from Dreamweaver and work quite effectively without slowing the page or creating eye bullsh1t.

Editor's Picks