Twitter Facebook RSS Logo

Creating a Rotating 3D Planet in Flash

16 Comments

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

Step 4: Creating the earth map

Now insert a new layer above the bg layer, and name it as Globe.

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

Now press Scene 1 to back to the main timeline.

Creating Realistic 3D Planet!

Step 5: Creating the Globe

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

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

Press the outline icon to see the map below it.

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

Step 7: Creating the Globe Animation

Now select the oval layer and apply mask to it. To do that, right click > select mask

Creating Realistic 3D Planet!

Now press Scene 1 to back to the main timeline.

Creating Realistic 3D Planet!

Step 8: Placing the globe on to the stage

Now drag the globe movie clip symbol from the library on to the Globe layer.

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

Select the Glow from the filters menu.

Creating Realistic 3D Planet!

Set the values,
Blur X = 15, Blur Y = 15
Strength = 190%, Quality = High
color #3366ff

for values, see the reference image below

Creating Realistic 3D Planet!

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

Creating Realistic 3D Planet!

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.

Creating Realistic 3D Planet!

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

Creating a Rotating 3D Planet in Flash

Ready-made 3D Rotating Globes Available for Purchase

Spinning 3D Earth Globes (Pack of 5)

16 thoughts on “Creating a Rotating 3D Planet in Flash

  1. Awesome! Just what I’m looking for for a project. Any way I could ask the creator to save as a CS4 file and send to me? All I have is CS4.

    Chris

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Templates

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner