Flash 5 Tutorial 2: Creating a Logo with a Shape Transition

© 2000 by David Karlins. All Rights Reserved.

We got some very nice feedback on the first Flash tutorial, so we're back. The plan this time is to create an animated icon that morphs from one shape into another, like the one above. To replay the animation, right-click (Mac users Command-click) and choose Play from the context menu.

Before we get down to the nitty gritty, let me echo the sentiments about our friendly sponsor expressed by Gary Priester in his tutorials. Graphics Unleashed is quickly, and somewhat quietly, accumulating one of the most valuable collections of web graphic tutorials on the planet. Those of us who provide these tutorials not only get a chance to plug our books, but we get paid for these articles.

Graphics Unleashed depends on sales from this site for income, so I really encourage you to purchase your software, instructional videos, and books right here. This series of Flash tutorials draws heavily on my Complete Idiot's Guide to Flash 5, and when you buy it here, the folks at Graphics Unleashed get a nominal payment.

OK, now that we are all clear on where the "free lunch" is coming from, let's dig in! In my first Flash tutorial, I walked you through the process of creating what Flash calls "tweened" animation - where you place an object in one place in Frame 1, somewhere else in Frame 30 (for example), and let Flash do the grunt work of generating the content of the in between (get it, "tween") frames so that the animation is smooth. Generating animation that tweens motion is called ... motion tweening.

For this animated logo, we're going to so something different - shape tweening. Shape tweening generates transitional frame content so that a shape morphs into another shape. Folks coming from a CorelDRAW background like myself will recognize a similarity to blends. And other vector drawing tools have similar blending tools.

In addition to introducing a new kind of tweening, we'll need to begin to utilize Flash layers for this tutorial. Using two layers will allow us to display a static image (Unleash.com) in one layer, while the second layer contains the shape tweening image.

The goal is to generate frames where one element (the text in the upper left) stays in place, while another element morphs into being - as illustrated by the sequential frames on the left.

To pull this off, you need Flash. I didn't notice any differences in Flash 4, so these steps should work for that as well.

1. Start by creating a new Flash movie, and defining a couple of movie properties: As a cheap, easy way to get a blue background, I'm going to assign a movie background - choose Modify, Movie and select blue from the Background Color palette.


2. While we're tweaking movie properties, let's define the movie size so that we create an animated graphic, not a whole screen-sized movie. Do this by entering 300 px (pixels) in the Width box, and 100 px in the Height box. Then OK the dialog box.


3. We'll create the static layer first, that holds the text. With frame 1 selected in layer 1 (and those are the defaults), choose the Text tool (press T on your keyboard) and type text that you'll use in your logo. Keep it short - something like what I've got here. Click outside the text box when you're done. With the text tool still selected, click and drag to select the text, and choose a color from the Fill Color palette (in the toolbox on the left), and a font by choosing Text, Font from the menu.
4. It's considered good form to name layers when using more than one, so if you want to, double-click on the "Layer 1" label in the timeline (at the top of the Flash window) and enter Static, as I've done.
5. Next step is to convert this text to a graphic. We'll lose the ability to edit the text, of course, but we'll gain the ability to apply all kinds of cool tricks to the graphical text. Do this by selecting the text box with the Arrow tool (press V on your keyboard), and clicking on the text. Then choose Modify, Break Apart. Your text is now a bunch of different graphical objects, so be careful not to select individual letters and move them around by accident. You're probably asking "Why not group them?" The answer is that grouping disables some of the shape tweening we'll want to use later.
6. We'll finish up this static layer by creating a new keyframe at the end of our animation. Click in frame 60, and press the F6 function key. As you do, the text is duplicated. That's all for the static layer for now.
7. To create the shape tween layer, click on the word "Static" in the timeline, and choose Insert, Layer. Double-click on the Layer 2 text, and name this layer "Shape Tween." This will help us keep straight which layer has our static image, and which one has our animation.
8. Use the Arrow key to select the text in frame 1 of the Static layer. Click the Copy icon in the toolbar. Then, select frame 1 in the Shape Tween layer, and choose Edit, Paste in Place. This places a duplicate of the graphical text in the new frame. We'll want duplicates so that the text in the Static frame displays throughout the animation, while the text in the Shape Tween layer undergoes a metamorphisis into a logo.
9. Next, find yourself a logo if you don't have one. As usual, I'll piggy-back on Gary's tutorials, and just refer you there for advice on creating a nice vector-graphic logo. I'll wait here while you go find a logo. Still waiting. When you've got one, go on to Step 9.


10. To keep things simple, let's copy and paste your logo into the animation. If you want to import a file, you can refer back to the first tutorial which walked you through that process. Select frame 60 in the Shape Tween layer (the layer matters!), and paste your logo into this frame.
11. Time to assign shape tweening. Click in any frame in the Shape Tween layer in the timeline (at the top of the Flash window). With all the frames selected, choose Modify, Frame from the menu. The Frame palette will open.

12. In the Frame palette, choose Shape from the Tweening drop-down list. Positive easing values speed up the transition at the beginning of the tween, negative values delay most of the transition until near the end of the process. Start with a Distributive shape tween, and experiment with angular later.

Let's summarize what we've done: We created one layer that displays text, unchanged, throughout the animation. This creates the effect of the transition emerging out of the text. We created a second layer where this same text morphs into a logo (in my case, it's a log with text).

As a final touch, you can add a "stop" action to the final frame of the animation to keep it from looping. Do this by clicking in frame 60 in the timeline, in the top layer (whichever that happens to be). Choose Window, Actions. Click on Basic Actions, and double-click on Stop. This stops the animation after it plays once.

This animation is a result of my testing these steps, and serves as a tribute to my man Dave in Oakland and his excellent burgers. Right-click/Command-click and choose Play to see the animation. The sequential frames show the generated morphing in this animation.

To test your animation, simply press the Enter key to watch the movie in Flash. When you've tuned up your animation, and it's ready for the world, use File, Export Movie, and save the animation as a shockwave (*.swf) file, or another animated image format like AVI or MOV, or as an animated GIF.

Discuss the articles with David in the Graphics Unleashed Discussion Forums

Choosing a Web Authoring Tool · Eight Steps to Implementing a Web Site · Step 1: Grabbing a Domain Name · Step 2: Publishing Your Web Content - Finding a Web Server Provider · Step 3: Develop Your Web Strategy · Step 4: Design and Create Your Site · Step 5: Publish and Test Your Site · Step 6: Promoting Your Site · Part I: From CorelDRAW to the Web · Part II: Creating Web Page Background JPEG Files · Part III: Creating a Hover Button in CorelDRAW

Flash 5 Tutorial 3: Using Masking in an Animation · Flash 5 Tutorial 2: Creating a Logo with a Shape Transition · Flash 5 Tutorial 1: Create a Splash Screen

CorelDRAW X4 Unleashed 932 page multimedia ebook with 11.5 hours of tutorial movies for getting the most from CorelDRAW X4! Also available is the Premium Bonus Content Edition with Powertips and a Corel PHOTO-PAINT book.

The ultimate CorelDRAW and Corel PHOTO-PAINT learning experience! Get CorelDRAW Unleashed Boot Camp details! Download Boot Camp Flyer!