Creating a Rotating 3D Planet in Flash

26 Apr

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 Realistic 3D Planet!

One Response to “Creating a Rotating 3D Planet in Flash”

Trackbacks/Pingbacks

  1. Illustrate and Animate a Bouncing Ball: Part 1 – Adobe Flash « itechtunes - April 29, 2012

    […] Creating a Rotating 3D Planet in Flash (lokichen88.wordpress.com) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: