Rotating Sphere Effect
This tutorial is For Flash 8 and above only.


I saw this interesting effect in many places so I decided to try making a quick one. But using text instead of map image.

Step by Step Tutorial
  1. Create a new symbol, name it TextSymbol and enter the text you like. I'd use font size of 24 or bigger. I recommend using white as the text color.

  2. With the text selected, break it apart.

    Keep doing it until the text becomes curves/shapes and it cannot be broken apart anymore. You can see this the when the selection rectangle is completely gone.

    We need to break apart the text because masking does not work on text.
  3. Create a new symbol and name it AnimatedSphere. Draw a circle about 200x200 pixels and fill it with radial gradient.

  4. Copy the circle and Paste In Place (Edit->Paste In Place) it into another layer. Name the layers like below. So you now have two layers containing the same circle/sphere.

  5. Create a new layer in between Circle and CircleMask layer, name it TextLayer.

  6. Put an instance of TextSymbol into TetxLayer and make all the layers 60 frames long. I changed the document background to black here because it's difficult to see the white text in a white background.

  7. Make a keyframe in frame 6 of the Text layer and move the text to the left of the sphere.

  8. We want to make the text move from right to left using motion tween. So click somwhere between frame 1 and frame 60 of the Text layer and select Motion tween.

    If you play the movie now, it will look like this:

    We need to move the text to be in front of the sphere and we want to make the text appear only inside the sphere.
  9. Select the CircleMask layer and make it a mask layer (ie: right click on the layer and select Mask). For more about masking, see this tutorial.

    If you play the movie now, it will look like this:

    Next, we want to blend the text more with the sphere.
  10. Select the text movie clip on frame 1, and change its Blend mode to Overlay. Do the same thing to the text in frame 60. Note that you need to un-lock the Circle Mask layer and Text layer before you can select the text - see the red circle below).

  11. You might want to add another layer in the bottom so you can see the text. Add Drop Shadow filert to the text (this option is in Window->Properties->Filter) . I also made the text taller.

    Test it:

  12. Let's make the text rotation more continuous. First, make a new layer above the Text layer so your layers look like this. The new layer I created is Text2.

  13. Then, identify the frame where the last portion of the text is entering the sphere. In my case, it's frame 40.

  14. Copy the text and position it on the right side of the existing text.

  15. What we want to do now is to make this text follow the existing text. So, on frame 60, make a keyframe and drag the text to position it next to the existing text.

  16. If you test thge movie now, you see the text following the first text, but then it snags on the last frame because the first frame of the movie has the text outside of the sphere. So what needs to be done is to identify the frame where the first text position looks exatly like the last frame. In my case, it's frame 20.

  17. Add this action on the last frame: gotoAndPlay(20) where 20 is the frame number identified in Step 16.
  18. Test the movie.

Download FLA.

More Fun Stuff

You can preserve the text color by not changing the Blend mode of the Text (eq: in Step 10). If you do that, you need move the Circle layer to the very top and fill the sphere with gradient with decreasing alpha value.

The gradient looks like below. The left marker has Alpha=0%, the right marker is 100%. This in effect makes anything below is gradually dissapear. Convert the circle into a symbol and change the Blend mode to Multiply.

The result is like below (I added another layer with background which you can tween using similar technique as the text):

For more about Blend modes, see this tutorial.
Download FLA.