Rotating 3D Planet in Flash

In this tutorial, you will learn how to create a realistic 3D earth rotating effect using masking effect in Flash.
Tutorial Details
Program: Flash CS5
Difficulty: All
Estimated Completion Time: 40 min
Tutorial Assets

The following assets were used during the production of this tutorial.
Source File.fla


Here we are taking new flash document with action script 2.0.


Step 1: Setting Up Document Properties
Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties.

Now change the stage dimensions as 546×370 and the FPS is 30, as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.


Step 2: Importing necessary images
First import the downloaded used images from the source. To do that, oto the File menu > Select Import > Select Import to Library.


Step 3: Positioning images on to the stage
Before starting we already have layer 1, now name the layer as bg. Drag the bg image from the library on to the stage.

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, check on the “Align to stage” check box.


Step 4: Creating the earth map
Now insert a new layer above the bg layer, and name it as Globe.

Press Ctrl + F8 to create a new symbol. Type the name Map and select type to Movie Clip.

You will enter the Map movie clip. Drag the Planet1_map image from the library.

Now copy and paste this map image and place them close to each other.
Then select images and press ctrl + g to group into one.

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, check on the “Align to stage” check box.

Now press Scene 1 to back to the main timeline.


Step 5: Creating the Globe
Press Ctrl + F8 to create a new symbol. Type the name Globe and select type to Movie Clip.

Now create an oval using oval tool as given in the reference image below:

Open the propertied panel. To open the properties panel, Go to the Window menu > Select the properties. Now go to the POSITION AND SIZE. Break the link by pressing on the link icon. Set the W: 200 and H: 195.

Now insert a new layer below the oval layer and name it as map.

Press the outline icon to see the map below it.

Drag the map symbol from the library on to the map layer.

Here you may see the outline of the oval. Now place the map symbol right aligned to the oval and it should be vertically center align.


Step 6: Creating the map animation
Now select the frame 100 of oval layer and press F5 to insert a new frame. Then select the frame 100 of map layer and press F6 to insert a new key frame.

Press the outline icon of the map layer to see the outline of the map.

Here you will see a line in the center of the map symbol in the outline view. Now move the map symbol to the right side till the center line reach to the right edge of the oval. Do not move the map symbol in the vertical direction.

Now select any frame between the frame 1 and 100 of map layer and create Classic Tween. To do that, right click > select Create Classic Tween.


Step 7: Creating the Globe Animation
Now select the oval layer and apply mask to it. To do that, right click > select mask

Now press Scene 1 to back to the main timeline.


Step 8: Placing the globe on to the stage
Now drag the globe movie clip symbol from the library on to the Globe layer.

Place the globe anywhere on the stage.

Step 9: Finalizing the globe or Apply depth to the globe
Select the globe and open the properties panel. To open the properties panel, Go to the Window menu > Select the properties. Go the FILTERS, and click on the new to apply filter.

Select the Glow from the filters menu.

Set the values,
Blur X = 15, Blur Y = 15
Strength = 190%, Quality = High
color #3366ff
for values, see the reference image below

Again click on the new to apply new filter. Select the Drop Shadow from the filters menu.

Set the values,
Blur X = 50, Blur Y = 50
Strength = 180%, Quality = High
Angle = 0, Distance = 20 px
Inner shadow will be check marked
for values, see the reference image below.

Now press Ctrl + Enter to see you effect. You will find the effect something like this.