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.

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.

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.

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.

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.

As 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.

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.

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

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.

Export 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:

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:

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:

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:

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:

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.

This 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):

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:

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:

These two tricks will increase the playback speed a lot.

Step 10: ightmode

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:

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:

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. Next tutorial: Scrolling photos loaded dynamically with ActionScript 3 Previous tutorial: Setting up Subversion with Adobe Flex 3

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, Id suggest you search the Away3D forums: http://groups.google.com/group/away3d-dev/ 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 dont 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 cant, you probably forgot the invertFaces() method that makes the Sphere viewable from the inside? You could also try removing the materials property when youre 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~ Im 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. Its indeed that the invertFaces method that does not work. Ive logged it as a bug and Im 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: Cant 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 Im 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 Im 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 havent 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 its more than 1500 that can answer the questions and its searchable as well :) J Posted by jungleroger on 02/05 at 02:36 PM Hey all, Wow, Im really impressed by Away3d!! Im 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, Im using Flash CS3 (v9)and away3d_2_0_0 From the link u showed me, isnt 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 havnt done any actionscript before so maybe Im doing something wrong?? Thanks JungleRoger Posted by Jens C Brynildsen on 02/07 at 08:32 PM @jungleroger Thats 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 theres 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. Im living in Turkey. Thank you very much indeed. I would like to receive information from you about my work.

Submit a comment
Only registered members can comment. Click here to login or here to register (CC) Flash Magazine 2011