This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Create the Earth and heavens in less than an hour with Away3D

Create the Earth and heavens in less than an hour with Away3D

3D is one of the many cool things made possible with Flash Player 9 and the super fast Virtual Machine. This tutorial will show you how to create a realistic looking interactive earth, complete with a sun and a starlit sky. Scared? Don't be - it's easy with Away3D!

3D is all the rage in the Flash community these days. There are several engines available and each has strengths and weaknesses. Carlos Pinho has compiled a nice list of what's available. For this tutorial, we'll use the engine called Away3D that can produce some really beautiful results.

This is how the finished result of this tutorial will be. Click and drag with the mouse to orbit the earth.

Make sure JavaScript is turned on. You need to upgrade your Flash Player



The scene is obviously not technically correct, but good enough for our purpose.


Step 1: Getting the software

Create a folder on your harddrive and name it "Earth3D". Download Away 3D from the main download page http://away3d.com/downloads/. The version used for this tutorial is 2.5. This version is made for Flash Player 9 and the file you should download is called "away3d_2_5_0.zip". If you are using Flash CS4 or a more recent tool that can author for Flash Player 10, you should rather download and use the Flash Player 10 version called "away3d_3_5_0.zip". This tutorial should work with later versions when they arrive.


Put the file in the "Earth3D" folder you just created and expand it. When expanded, you'll get a new folder called "away3d_2_5_0". Inside the folder, you'll find two more folders called "away3d" and "nochump". Move these two folders into the "Earth3D" folder and delete the "away3d_2_5_0".

Open Flash, create a new Flash file (Actionscript 3) and save the file in the "Earth3D" folder as "earth3D.fla". Set the background to a dark color. That's it for the preparations.

 


Step 2: Preparations

If you don't have too much experience with Actionscript 3, some of this code may seem new to you. I'm assuming that many of those testing this may be designers with limited AS3 experience, so if you're a seasoned coder you may skip ahead of explanations like the one below.

For Away3D to work, we'll need to tell Flash what parts of the 3D engine we want to use. This is done using the "import" statement. There are several parts we need, so multiple import statements are required. You can probably guess from the names what some of these will enable us to do.

Click frame 1 on the timeline and open the Actions panel. Copy the code below and paste it into the Actions panel.

// import the required parts of Away3D
import away3d.containers.*;
import away3d.core.base.*;
import away3d.primitives.*;
import away3d.materials.*;
import away3d.core.utils.Cast;
import away3d.cameras.*;

// import some filters we'll use later
import flash.filters.BitmapFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
import flash.filters.GlowFilter;



We'll also need to store some variables to hold information about rotation, mouse interaction and more. Copy and paste the lines below just after the import statements.

// variables
var move:Boolean = false;
var lastPanAngle:Number;
var lastTiltAngle:Number;
var lastMouseX:Number;
var lastMouseY:Number;
var skies:Sphere;

 

Step 3: Setting up the 3D environment

Just as in Flash, Away3D has a stage where you do your "drawing". In Away 3D, we refer to this as a Scene3D. Since this is 3D, we can move freely around between 3D objects. For this purpose we'll need a camera. Away3D offers 3 kinds of cameras:

  • Camera3D - Moves around freely in 3D-space
  • TargetCamera3D - Targets an object
  • HoverCamera3D - Hovers around an object

Since we want the camera to orbit the earth, we'll use a HoverCamera3D. This is also the camera that is the easiest to use for beginners trying out 3D. Notice that in the code below we'll set both zoom and focus, just as on an ordinary camera.

In addition we'll also need a viewport (View3D). Paste the code below after the existing code.

// Set the scene
var scene:Scene3D = new Scene3D();
// Create and set up the camera
var camera:HoverCamera3D = new HoverCamera3D({zoom:2, focus:200, distance:400});
camera.panAngle = -180;
camera.tiltAngle = 15;
camera.hover(true);
camera.yfactor = 1;
var view:View3D = new View3D({scene:scene, camera:camera});
// Add viewport to the Flash display list so it's visible
addChild(view);
// Adjust view 
view.x = 250; 
view.y = 200;

Apart from creating the Scene, Camera and View, we are also setting some initial properties. The HoverCamera is always looking at the centre of the stage (unless you change this)  and we use the properties "panangle" and "tiltangle" to rotate around this point in 3D space. Now we have all we need except something to look at. We'll start be creating a basic looking sphere that will be our basis for the earth. Paste the code below after the existing code.

var globe:Sphere = new Sphere({material:"blue#white",radius:150,segmentsH:18, segmentsW:26});
view.scene.addChild(globe);
view.render();

imageAs you see from the code above, we are sending some properties into the constructor function. The material, the radius and the number of triangular segments the sphere is built from. We'll use more complex textures later, but for now we'll just use a standard blue wireframe material with white edges. The radius property should be obvious, but segmentsH and segmentsW sets the mesh resolution for our sphere.

Now it's time to test the file! Hit CTRL+Enter (Apple-Enter on Mac) to view our sphere through the camera. By adjusting the panangle, tiltangle, zoom, focus and distance parameters, you can experiment to see how the HoverCam works.

Step 4: interactivity

Viewing the sphere is alright, but we want to be able to play around with it ourselves. To do this, we have to read the position of the mouse, but only when the mouse-button is pressed. Paste the code below after the existing code.

function MouseDown(event:MouseEvent):void
{
    lastPanAngle = camera.panAngle;
    lastTiltAngle = camera.tiltAngle;
    lastMouseX = stage.mouseX;
    lastMouseY = stage.mouseY;
    move = true;
}

function MouseUp(event:MouseEvent):void
{
    move = false;
}

function onEnterFrame(e:Event):void
{
    // rerender viewport
    var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.
    if (move) {
        camera.panAngle = cameraSpeed*(stage.mouseX - lastMouseX) + lastPanAngle;
        camera.tiltAngle = cameraSpeed*(stage.mouseY - lastMouseY) + lastTiltAngle;
    }
    camera.hover();
    view.render();
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

The first of these three functions will be executed when the user clicks the stage. We set this up by creating a function that will accept mouse input (a MouseEvent). At the end of the code block above, we connect this function to the stage using the "addEventListener" command. At the click, we record some values from the camera and mouse and then set the "move" variable to true, allowing rotation. The next function is set up the same way, but it only turns off the "move" variable.

The last function will be executed on every frame. If the mouse is down (move is set to true), we'll update the rotation based on the current and former mouse position. These last two steps are the most complex parts of this tutorial. From here on it's all fun - export the SWF to give the sphere a spin!

 

Step 5: Adding a texture

When looking for a suitable texture for the Earth, I came across JHT's Planetary Pixel Emporium a great site offering beautiful texture maps of the earth and the rest of the planets in our solar system. All the textures are based on publicly available sources and can be used freely. The site offers some extremely high resolution images at a nominal charge as well as freely downloadable ones in low resolution. We'll also use some modified versions of these so, we've collected the ones we'l use in this ZIP file (3.1Mb). Download and expand the file in your project directory.

Back in Flash, select File -> Import -> Import to Library and locate file "earthmap1k.jpg". Once the file is imported, open your Library (Window -> Library), right click the image and select "Linkage" from the dropdown menu. Check the "Export for Actionscript" checkbox.

image

This will allow us to use the image directly in Away3D like this:

 

globe.material = new BitmapMaterial(Cast.bitmap("earthmap1k.jpg"));

 

Export the file to see the earth in all it's glory.

 

Step 6: Add some skies

It looks good, but kind of flat don't it? Let's see what we can do about that. The earth has an atmosphere with skies around it. If we add this, it'll provide depth. Away3D can use any bitmap that Flash supports as a texture. By adding a sphere with a transparent PNG file depicting the clouds, we'll be able to see the globe behind the skies. We can also rotate the skies separately from the earth itself for some added depth.

Import the file "earthcloudmap.png" to your Library and use the Linkage dialogue to make it available for Actionscript as done before. This images is composed of two of the files from JHR's site.

 

skies = new Sphere({material:"earthcloudmap.png",radius:153,segmentsH:18, segmentsW:26});
view.scene.addChild(skies);

 

imageExport the movie. Looks a bit broken maybe? What is happening here is that Away3D does not render the two spheres properly by default.

Locate the line in the code where we created our view and change it to this:

 

 
var view:View3D = new View3D({scene:scene, camera:camera, renderer:Renderer.CORRECT_Z_ORDER});

 

This last parameter will make the 3D engine do a proper Z-sort of all objects. We will also need to import a new class at the top of the document for this to work:

 

import away3d.core.render.*;

 

This line will import the required renderer. The result looks better, but it's also a little slower. Export to see the result. Let's make the skies move a bit as well?

 

Change the onEnterFrame function to this:

 

function onEnterFrame(e:Event):void
{
    // rerender viewport
    var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.
    if (move) {
        camera.targetpanangle = cameraSpeed*(stage.mouseX - lastMouseX) + lastPanAngle;
        camera.targettiltangle = cameraSpeed*(stage.mouseY - lastMouseY) + lastTiltAngle;
    }
    camera.hover();  
    view.render();
    if(skies)
        skies.rotationY += .015;
}

 

The two last lines here is the only change. If the skies exist, we'll apply a slight rotation to it (0.015 degrees per frame). This makes the scene even more convincing. Test it and see for yourself.

 

Step 7: Add stars

Let's add the stars while we're at it. When looking for a stars texture, I found this tutorial created for a different purpose. The resulting image looks like it could work and since this is a published tutorial from an educational resource with sample files created from scratch, we'll assume that it is legal to use the "star_map_small.jpg" texture for our purposes.

The camera itself is positioned 400 units from the centre of the Scene. As long as we make our sphere larger than 400 units, the camera will be inside the sphere, looking at the inside of it. Let's try this out:

 

var heavens:Sphere = new Sphere({material:"star_map_small.jpg",radius:1200,x:0,y:0,segmentsH:9, segmentsW:9});
view.scene.addChild(heavens);

 

When you append this to the end of the code, you won't see any stars. The reason is that if a 3D mesh is double sided, it'll require twice as many calculations. 3D engines save where they can to achieve the maximum speed possible. If you wish, you can turn on rendering of both sides, but you can also flip the direction of the material like this:

 

heavens.scaleX = -1;

 

When you append this to the end of the script, the stars will light up. Also note that since this is a dark texture with details that are hard to see, we're only using a low resolution sphere (9x9 segments).

 

Step 8: add the sun

While we're at it, let's add the sun as well. Import the "sunmap.jpg" image and update the Linkage option to Export for Actionscript as we did with the formers materials.

 

var sun = new Sphere({material:"sunmap.jpg",radius:50,x:150,y:100,z:600,segmentsH:6, segmentsW:6});
view.scene.addChild(sun);

 

imageThis will make a new sphere with the sun-texture. It'll be quite small and positioned slightly above (Y-axis) and to the right (X-axis) of the gobe. It'll also be further away from the earth (Depth, Z-axis). When you test now, you'll see the sun just behind the earth upon startup and it'll move along when you rotate.

 

Step 9: Optimize

There is one problem however. Even though the sun is only 6 by 6 segments, the performance is beginning to suffer. To make sure it plays smoothly, we should optimize a bit here. The amount of triangles is the main issue here, so let's reduce it. While good-looking, the extra globe for the skies is the main cause of our problem. It consists of many polygons and it requires the renderer to use the proper Z-sorting.

The other way to solve this is to combine the skies and the globe texture into one (sometimes referred to as a "prebaked" texture). In reality, the skies are much closer to the surface of the earth so this will actually add more realism (or at least we can use that as an excuse). We'll start by commenting the two lines where we make the skies (two slashes in front of the code):

 

// skies = new Sphere({material:"earthcloudmap.png",radius:153,segmentsH:18, segmentsW:26});
// scene.addChild(skies);

 

Next, lets import "earthmap1k.png" to the Library. This is a new texture that I've made using Photoshop that combines the two images into one. Set it up for use with Actionscript as before and append this line of code to the existing script:

 

globe.material = new BitmapMaterial(Cast.bitmap("earthmap1k.png"));

 

We'll also set the camera back to using the simple renderer that don't enforce the Z-order of objects. Replace the line that sets up the View3D with this line:

 

var view:View3D = new View3D({scene:scene, camera:camera, renderer:Renderer.BASIC});

 

These two tricks will increase the playback speed a lot.

 

Step 10: Nightmode

The idea of the "prebaked" texture can be taken further. Let's do a little Photoshop work and combine the nigh image from HR into the day image. Import "earthmap1k_night_day.png", set it up for use with Actionscript and append the lines below:

 

var newMaterial:BitmapMaterial = new BitmapMaterial(Cast.bitmap("earthmap1k_night_day.png"));
globe.material = newMaterial;

 

Much better, isn't it? Did you notice how the night-time lights flicker when you rotate?

 

Step 11: Atmosphere

Let's add the finishing touch. By setting the "ownCanvas" property, any 3D object in Away3D can use standard Flash filters. Copy and append the code below and we're at the final stage of this tutorial:

 

var myFilter1:Array = new Array()
myFilter1.push(new GlowFilter(0xFFFFAA, 1, 25, 25, 3, 1, false, false));
sun.ownCanvas=true;
sun.filters=myFilter1;

var myFilter2:Array = new Array()
myFilter2.push(new GlowFilter(0xFFFFFF, 0.4, 15, 15, 2, 1, false, false));
globe.ownCanvas=true;
globe.filters=myFilter2;

 

Closing words

This tutorial is just a start. Why not add the entire solar system? JHR has all the textures you need. How about adding a zoom feature or a camera that can move freely (did I hear spaceship?). How about a lens flare? The possibilities are almost endless.

While Away3D is easy to work with, it currently suffers from a lack of documentation. This will likely improve over time and the Away3D team lists several learning resources at their main site. The best way to learn is however to look at other people's code. For this tutorial, we learned a lot from this example published by Rob Bateman, one of the Away3D developers. This one also explains some of the other materials and shaders that Away3D offers. Click here to download the finished FLA file for this tutorial.

Before starting to build your own 3D worlds, keep in mind that the Flash Player has it's limits and that 3D Flash is still in it's infancy. Adobe has already sneaked that they will add some hooks in Flash Player 10 that will enhance this seriously, but until then we'll have to limit the scope of our projects. We also know that Adobe is talking directly to the makers of both Papervision3D and Away3D to make sure that these engines are ready soon after the launch of Flash Player 10. In the meantime, let's play, learn and have fun with what we can do at this stage.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by archevial on 02/12 at 01:00 AM

Any chance you can elaborate on adding points on the sphere that correspond to lat/long?


Posted by Jens C Brynildsen on 02/13 at 10:27 AM

Heya,
I’d suggest you search the Away3D forums: http://away3d.com/forum/ as I know that question have been asked many times there already. ok?

J


Posted by graemekyuss on 03/10 at 03:56 PM

Great tutorial, only one problem though, my stars don’t appear, any common mistakes I might have made?


Posted by Jens C Brynildsen on 03/13 at 01:03 PM

Hi graemekyuss,
A simple way to find out - do you see the sphere that the stars should be on? If you can’t, you probably forgot the invertFaces() method that makes the Sphere viewable from the inside?

You could also try removing the materials property when you’re creating the heavens Sphere. This will cause it to display with a random color material making it easier to debug.

J


Posted by John Brightman on 03/27 at 10:16 AM

Hi~ I’m new to away3D, and I was just thinking, what should I do if I want to create a board to show the infromation of the different area of the earth, like when the mouse roll over the asia, the board will display “asia”, and when mouse come to africa the board will display information about it. To do this I need adhere a transparent MovieClip on to the sphere(to dispatch RollOver event) and it need to rotate with the sphere.
If you have some way to do this, please tell me, I really appreciate it, thanks in advance!


Posted by Jens C Brynildsen on 03/27 at 10:51 AM

@John The easiest way would probably be to use a MovieMaterial. Import your earth texture into a MovieClip and then draw transparent targets for the MouseEvents on top of the earth texture.

This way you could listen for virtually any area on the sphere.

J


Posted by k9design on 05/21 at 05:36 PM

Hi Jens. Thanks for the great Tutorials. I am also having the the missing starfield issue. The invertFaces is there. And I also used the fla source provided. I tried turning off the inversion and scaling down the sphere to encompass the Earth but within view, and then the starfield showed up. Turning on the inversion, would make there spehere have the polygons showing. So it seems the issue is the invertFaces not working. I used the source from the latest svn.


Posted by Jens C Brynildsen on 05/21 at 11:04 PM

@k9design The issue with the starfield is a bug in the current version of the Away3D engine. It’s indeed that the invertFaces method that does not work. I�ve logged it as a bug and I�m also working on preventing such errors in the future.

You can get around this by using:
heavens.scaleX = -1;

instead of
heavens.invertFaces();

J


Posted by zszen on 07/12 at 01:34 PM

I finish the joy , but it will show me split line at first when I use best quility view.


Posted by garydev on 01/23 at 01:34 PM

Hello,
Thank you for the tutorial.

I am getting this error and can not figure out the problem or the solution:

Error: Can’t cast to bitmap: earthmap1k.jpg
  at away3d.core.utils::Cast$/bitmap()
  at 3Dworld_fla::MainTimeline/frame1()

The symptom is that I am unable to map an image to the sphere.


Posted by Jens C Brynildsen on 01/29 at 10:01 AM

@garydev I just tested the files with the latest Flash 9 version (2.4) and I’m not getting this error. If you could tell what version you are using, I can try to help you.

J


Posted by garydev on 01/29 at 10:54 AM

Hi Jens:
I figured the problem out. It was not casting the bitmap because when I assigned the lingage Flash defaults the bitmap to imagex rather than imagex.jpg

Once I added the file extension to the linkage input field it worked perfectly.

On the other hand. I moved on to attempt to add my own 3ds model. I know that issue is outside the scope of this thread, but any help on that would be very much appreciated.

When I look for other examples of this I found some as but it is throwing errors. Here is what I’m trying to add a 3ds model to the Earth from this tutorial.

// import the required parts of Away3D
import away3d.containers.*;
import away3d.core.base.*;
....
view.render();


Posted by Jens C Brynildsen on 01/29 at 12:45 PM

@garydev Yeah. This is quite out of topic and I haven’t written the tutorial covering loading assets yet.

The best place to get the answer is by posting the question on the Away3D Dev-group (http://groups.google.com/group/away3d-dev). There it’s more than 1500 that can answer the questions and it’s searchable as well :)

J


Posted by jungleroger on 02/05 at 02:36 PM

Hey all,
Wow, I’m really impressed by Away3d!!

I’m stuck on part 3 of this tutorial tho.. can anyone help?

I get these errors:
On line 15:

1046: Type was not found or was not a compile-time constant: View3D.
And
1180: Call to a possibly undefined method View3D.
And
1120: Access of undefined property scene.


Posted by Jens C Brynildsen on 02/06 at 09:56 PM

@jungleroger It sounds like you are missing one or more of the import statements? Do you have this line in your code?

import away3d.containers.*;

If you have that, then Away3D is not properly set up on your machine. If that is the case, just keep on reading the other Away3D tutorials here and start with this one http://www.flashmagazine.com/Tutorials/detail/installing_away3d_for_flash_flex_or_flashdevelop/ that will help you set things up.

J


Posted by jungleroger on 02/07 at 12:48 PM

Hi Jens,

The import statments are there, just copied and pasted from above.
As for the setup of away3d, I’m using Flash CS3 (v9)and ‘away3d_2_0_0’
From the link u showed me, isn’t it as simple as keeping the away3d and nochump in the same folder as the project file?
I did try putting the classpath in the actionscript publish settings but nothing happened.

I havn’t done any actionscript before so maybe I’m doing something wrong??

Thanks
JungleRoger


Posted by Jens C Brynildsen on 02/07 at 08:32 PM

@jungleroger That’s very odd. Could you try using 2.4 from the download page? http://away3d.com/downloads/

Also check out this thread: http://www.gotoandlearnforum.com/viewtopic.php?f=29&t=15461 Looks like there’s some relevant advice there. According to Google, this is a quite common problem? http://www.google.com/search?client=safari&rls=en&q=1046:+Type+was+not+found&ie=UTF-8&oe=UTF-8

J


Posted by Nerkek on 10/22 at 12:03 AM

We are really grateful. Thanks to your work in front of me opened a big lead. I’m living in Turkey. Thank you very much indeed. I would like to receive information from you about my work.


Posted by carlos on 03/01 at 01:36 PM

Hi Jens, first of all I’m from spain, so my english writing it`s so bad. I hope you understand this.

I have made this tutorial and change de material to a MovieClip material from my library, inside this MC I have a bitmap and a button. I made de material interactive so I can CLICK on the button inside this MC but

How can I interact to this button from the main root.

For example: if i want to scale de 3d sphere by clicking in the button inside de MC.

Thanks.
Carlos


Posted by morantis on 04/09 at 03:54 AM

I know that no one has posted for some time, I just wanted to add for those new to AS and new to Away3D that the copy and paste feature here is not quite right. If you show errors when running these, check that a command has not gotten pulled into the comments.  It happens and can be trouble for you if you are new.  After pasting, look closely at the shaded gray text and look for anything that may be script and not comments.  Email me at terry [at ] lipperd.com if you have any questions.


Posted by Jens C Brynildsen on 04/13 at 12:10 PM

@morantis thanks for helping out! I’ll try to see what is causing this. Is it the same in all browsers?


Posted by Jens C Brynildsen on 04/13 at 12:19 PM

@carlos you english is just fine. Sorry that I could not answer in a timely manner :(

However - what you do is to create the material where you need it (i.e. on the root), add the event listener to it and then reference that when you create the material (something like sphere.material = root.myMaterial).

I’m assuming that since you read this tutorial, you’re using Flash? If you just get used to the approach of using the Document class as a main setup class and then create other classes for each task that needs to be performed, things like this is much easier. It takes a little practice getting the structure of 3D projects right, so just keep at it? There’s also many good books on OOP and how to structure code that will help you with this.

J


Posted by mtree on 07/20 at 05:20 PM

Hi,
I downloaded the Away3d on the downloads page (away3d_4_0_0_molehill) but cannot see a “nochump” folder.

The only folders that can in it were “lib” and “src”.

Therefore following the instructions, I get to the end of step 3, test it and it doesn’t work. Am I right in thinking it is to do with the folder set up?

As I can’t find “away3d_3_5_0.zip” to download as stated in this tutorial, I am stuck. I would be so grateful if someone could give some advice on what to do?

Many thanks


Posted by vivek on 07/24 at 02:09 AM

I am learning and and i felt really good after completing this tutorial. I want to be able to click and a particular and have the camera zoom in to that part of the globe and then get linked to a website.. is that possible? how do i do that?


Posted by Jens C Brynildsen on 08/08 at 11:08 AM

@mtree Make sure you open the “Releases” submenu on the Downloads page on the Away3D website and you’ll find it: http://away3d.com/download/away3d_3.5.0

@vivek Just work through the other 12 tutorials and you’ll be able to do most things you’ll want.


Posted by mazan on 11/17 at 12:19 AM

Hello Jens,

I tried to know how make the earth move round the sun 360 degree, please i need help to know how i can do it, I’m new in away3d, could you help me at actionscript, thanks.

Best


Posted by Jens C Brynildsen on 11/25 at 09:32 AM

@mazan I’m really sorry that I can’t run this site as a general support forum. I simply don’t have the time :-S

However - don’t despair - visit the Away3D Forums http://away3d.com/forum/ That is the place to go for general questions and if you just keep reading through the tutorials on this site, you’ll also find the answer.

J


Posted by DustinAllan on 02/19 at 04:58 AM

Hello, I’m a highschool student and I just completed this tutorial with no problems. However, I am looking to add some navigational points (to use for my class assignment which is to create a Flash-Based website.) to navigate to other pages/sites. If there is a way to do this, could you email me with details? Much Appreciated!

Submit a comment

Only registered members can comment. Click here to login or here to register