Objectives: To create and animate text around an object or image in Flash MX
Tools & Techniques: Masking, Animation, Fireworks MX, Text Around Path, Exporting From Fireworks to Flash,
Source File: Download

This next lesson is by far one of my favorite effects. It's been a popular logo effect for years and has been created in a variety of programs. We'll be using Flash MX to create the majority of this effect but we'll also be getting a little help from Fireworks MX.

Speaking of Fireworks, let's start out in Fireworks MX to create our circular text. You could use another graphics program to create your circular text such as Freehand or Illustrator, but we'll be using Fireworks for this example.

Step 1: Creating Text Around the Path In Fireworks MX

In this first page of the tutorial we'll be working in Fireworks MX to create our text around a path. If you already know how to do this you can skip to Page 2 and begin creating the effect in Flash MX.

1. Begin by typing out your text. This can be a sentence, a group of words, or the same word repeated.

 

2. Next, select the Ellipse Tool (U) and draw out a perfect circle by holding down the Shift key as you drag out your circle.
3. Select both your text and your circle by either Shift-Clicking each object or using the Pointer Tool (V) (the black arrow) to drag a selection around parts of each object.
4. With both the text and the path (circle) selected, go up to Text > Attach To Path. This will wrap your text around the circle. You may need to make some additional adjustments to your text once it's on the path. If you see that your text is too small, you can increase the font size in the Property inspector the same way you would normal text. Conversely, if you see that some of your words are missing on the path, you will want to reduce your font size.

Note: After you have your font size adjusted, you may still need to adjust some spacing between the words. You do this by adjusting the Kerning. I had to increase my kerning by 1 as you can see in the image below:

 

Step 2: Exporting From Fireworks To Flash

There are several ways to get our Fireworks graphics to Flash. For this example, we'll use the new Quick Export button in Fireworks MX.

Note: If I were working in a production environment, I would chose the shortcut keys, Control-Shift-R/Command-Shift-R to bring up the Export window since I can work faster that way. That being said, I still think the Quick Export button is a very clever and helpful tool for new users.

1. Click the Quick Export button in the top right corner of your Fireworks MX document and select Macromedia Flash > Export swf...
2. In the Flash swf Export Options window, set Objects to Maintain Paths
3. For the Text option, set it to Maintain Editability

Step 3: Importing The Text Into Flash

1. 1. Open Flash and create a new document
2. 2. Go to File > Import... or click Control-R/Command-R to import the .swf file you exported from Fireworks

Flash imports the text around the path exactly as we created it in Fireworks. If you zoom in closely you can see that each letter has been individually grouped.

 

Step 4: Creating the Text Animation

Now we're ready to begin creating our animation. We'll first create the animation and then we'll mask the animation with our can image.

1. Select all the objects on the stage by clicking Control-A/Command-A. Since we started with a new document, the only objects we have on our stage are the letters we imported from Fireworks.
2. Convert the objects to a Graphic by pressing F8. Name your graphic "Text_Graphic"
3. Next, convert Text_Graphic to a Movie Clip by again, pressing F8 and naming the Movie Clip: "Text_MC"

Note: We could have just as easily created the Movie Clip first and then opened the Movie Clip and converted the objects to a Graphic. Either way works as long as you have your Text_Graphic inside Text_MC.

4. Right Click on the Text_MC and select Edit In Place from the drop down menu. This opens the Text_MC and it's inside this Movie Clip you're going to create the rotating animation.

Click the image below to view the full sized image in a new window.

 

5. Create a keyframe at Frame 200 by dragging the Playhead to Frame 200 and pressing F6 at Frame 200
6. Click anywhere in the Timeline between Frame 1 and Frame 200
7. In the Property inspector, set the Tween to Motion and the Rotate to CW (Clockwise)

 

8. Preview your movie by dragging the Playhead back and forth to view the text rotation
9. Return to the main stage by clicking Control-E/Command-E
10. Test your movie in the Flash Player by clicking Control-Enter/Command Enter
11. Save your document

Step 5: Setting the Stage

Now we're ready to bring in the object we're going to rotate the text around. I have a graphic of some cans that were created in a 3D program but of course, ANY object or image can be used here.

1. Import an image or graphic into Flash MX by clicking Control-R/Command-R and browsing to your image
2. Select your image and convert it to a Graphic by clicking F8. Give your graphic a name.
3. Place the graphic on it's own layer and name the layer
4. Name the layer with the Text_MC

 

5. Skew and rotate (click the Q key to select the Free Transform tool) the Text_MC so it resembles the image below. You may need to resize the Text_MC as well. Don't worry about not being able to view the areas of the Text_MC that are obstructed by the cans graphic. We'll get to that next:-)

 

6. Create a new layer and name it Cans2
7. Duplicate Frame 1 of the Cans_Graphic layer by right-clicking on Frame 1 (of the Cans_Graphic layer) and selecting Copy Frames from the drop down menu
8. Paste the frame on Frame 1 of the Cans2 layer by right-clicking on Frame 1 and choosing Paste Frames from the drop down menu
9. Drag the Cans2 layer BELOW the Text_MC layer so the Text_MC layer is in the middle

 

Step 6: Creating the Masking Effect

We're finally ready to create the masking effect!

1. Lock all the layers
2. Create a new layer and name it Mask_Shape
3. Select the Pen Tool and draw out a shape around the parts of the cans where you want to hide the text. For example, in the image below, I drew a shape around the top left can which is where I want the text to "go behind" the cans.

 

4. Make the Mask_Shape layer a mask layer by right-clicking on the layer and choosing Mask from the drop down menu. This will automatically lock the layer and you'll be able to preview the masking effect.

 

5. Preview your movie by clicking Control-Enter/Command-Enter
6. Save your movie

If parts of your text are still visible over the cans, go back and unlock your Mask_Shape and adjust the mask to cover more of the cans.

OPTIONAL STEP 1: Creating the Animated Text Shadow

1. You can quickly and easily create a shadow effect for your text animation by copying the Text_MC at Frame 1 (right-click on Frame 1 of the Text_MC layer)
2. Paste the copied frame on a New Layer by right-clicking at Frame 1 of the new layer and choosing Paste Frames
3. Drag the new layer to the bottom of the other 4 layers
4. Name the layer Shadow_Text
5. Change the Tint of the copied Text_MC layer to a light gray by selecting it and going to the Property inspector and selecting Tint from the Color option.
6. Reposition the shadow Text_MC by Scaling and Rotating it. You may also need to resize the movie clip.

OPTIONAL STEP 2: Creating One Movie Clip From All Layers

You may want to convert all 5 layers to a single movie clip. This will make it easier to move your movie around. It will also make it easier to resize your movie if you need to.

1. Click on the top layer at Frame 1 and drag down to the bottom to select all frames
2. With all layers selected, go up to Edit > Copy Frames
3. Go to Insert > New Symbol... and create a new Movie Clip named Animated Text_MC
4. Right-click in Frame 1 of the new movie clip and choose Paste Frames from the drop down menu
5. Return to the main stage by clicking Control-E/Command-E
6. Create a new layer
7. Delete the bottom 5 layers, you no longer need them
8. Open the Library (Control-L/Command-L) and from the Library, drag an instance of Animated Text_MC to the stage. You now have a movie clip you can easily drag around the stage.
9. Test your movie
10. Save your movie

 

discuss this topic to forum