This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Away3D Basics 5 - Primitives (Part 2)

Away3D Basics 5 - Primitives (Part 2)

In this tutorial, we keep exploring the simple but very useful primitives available in Away3D. As in the former tutorial, we also have some code that shows you how to use them beyond the basics. Now you'll learn how to build simple panorama viewers by combining the Sphere and Skybox primitives with a hovering camera and we'll also take a look at a cross platform software that can help you create the panoramas.

In this tutorial we'll start off with two very basic primitives and then look at some more complex ones that you can use to create panorama viewers.

Prerequisites

This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. If you are uncertain about how to use the sample Class files provided, check out this tutorial.

Some of the examples in this tutorial use textures. We'll look closer at Textures and materials in a separate tutorial, but if you want to make the source files work with Flash CS3/CS3, read this tutorial first.

The Trident

Need to make it clear how things are displayed in 3D space? Add a Trident. The trident is a very simple primitive that will show the x,y and z axes in your scene. It's very lightweight and great for debugging a complex scene setup. If you wonder how a loaded model is rotated, adding a trident to it will make it much easier to see how thing relate to each other. Click and drag on the example below to see how the Trident makes it easier to see woh the three spheres are placed in 3D space.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: Triaxe.as

Here's how you create a Trident with the default parameters:

 

 var axis:Trident = new Trident();
view.scene.addChild(axis); 

 

The Trident constructor will take two optional parameters, length of each axis and if the letter (x,y,z) for each axis shall be shown.

 

 var axis:Trident = new Trident(200,true); 

 

The code above will make a new Trident where the lines for each axis is 200 units long and with letters for each axis showing. Note that the Trident does not allow you to adjust length/letters after it's been created. This deviates from other Away3D primitives.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExMultipleViews.as ExMultipleViews_view.as

In the example above, we got four views displaying the same scene. The scene in this example is simple, but the Trident makes it easy to see how the camera is set for each of the four views.

The RegularPolygon

The RegularPolygon could also be called Disc since this is what it effectively is. Just as the Plane, it has no depth so when you set it's resolution, you just specify the number of sides and the radius of the disc.

 

polygon = new RegularPolygon({radius:200,sides:3});
view.scene.addChild(polygon); 

 

The number of sides can be set to any number higher than 2. Use the movie below to experiment with the settings.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExRegularPolygon.as

If the texture you use on the polygon is distorted, you can also increase the subdivision of it:

 

polygon.subdivision = 3; 

 

This will subdivide each of the triangles into 3. Download the source file above and add the subdivision parameter to see how it works.

The Sphere

A Cube requires only 12 triangles to be displayed. The Sphere is a much more complex object. To create a Sphere you'll need many more. How many triangles you use will decide the visual fidelity of the sphere. By default, Away3D will use a low number. To make the Sphere appear round, you'll need to set the parameters segmentsW and segmentsH.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: SphereTri.as

Click the plus and minus buttons to increase/decrease the number of triangles the sphere is built of.

Every sphere also has a radius, so to create a Sphere, we will usually need these parameters:

 

var sphere:Sphere = new Sphere({radius:50,segmentsW:10,segmentsH:10}); 

 

We can also set these directly on the object, just as with with other primitives:

 

var sphere:Sphere = new Sphere();
sphere.radius = 50;
sphere.segmentsW = 10;
sphere.segmentsH = 10; 

 

You can also use the yUp-property to change the orientation of the sphere.

 

sphere.yUp = false;

 

This will make the Sphere orient so that you see the top of the sphere facing you. Now you can make a Sphere, but what if you go inside it? By positioning a HoverCamera3D inside a Sphere and looking at the sphere from the inside, you have effectively created a Spherical Panorama viewer. To view an Object from the inside you'll need to use another function that is available to all the primitives that is called invertFaces.

 

sphere.invertFaces();

 

This will flip the texture so that it's only visible from the inside of an object. Here's how this will work.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExPanoramaSpherical.as, image: panoramaSpherical.jpg

Saint Germain en Laye church. The panorama image used here was created by Seb Przd and is distributed under the CC ByNcSa 2.0 license. Seb's done some really cool panoramas, so check out his Flickr account.

Play with the zoom and look up/down in this example for some interesting effects. Note: in many versions of Away3D, there has been a bug related to the invertFaces method that caused the method to do nothing. We can achieve the same result by using this method as well:

sphere.scaleX = -1;

If you have a problem with this example, try replacing invertFaces with the scaleX trick. Remember that if you need an object to be visible from both the inside and outside, you must set the bothSides property.

 

sphere.bothsides = true;

 

Now you've seen how to use a Sphere to create a Spherical panorama viewer. Another popular Panorama format are Cubic panoramas and Away3D has two primitives for this exact purpose.

The Skybox and Skybox6

The Skybox and Skybox6 are really just huge Cube's that have been "rigged" to be used for panoramas. The difference between the two is that Skybox will let you specify 6 separate images, whereas Skybox6 takes a single image in a predefined format of 3 by 2 squares. To create a Skybox, you provide it with a material like this:

 

var mat:BitmapMaterial = new BitmapMaterial( (new texture() as Bitmap).bitmapData );
largeCube = new Skybox6(mat);

 

If you were using the ordinary SkyBox primitive, you'd create six separate materials and use this syntax:

 

largeCube = new Skybox(frontMaterial,leftMaterial,backMaterial,rightMaterial,upMaterial,downMaterial);

 

Below you can see a panorama based on SkyBox6.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExPanoramaCubic.as, image: panoramaCubic3.jpg

When you look at the source code, note this line:

 

largeCube.quarterFaces();

 

This will subdivide the faces of our Skybox so it consists of more triangles. Unless we did this, you would see artifacts in the texture as you rotated. This method is available for all the primitives as well as loaded models. The advantage of using Skybox'es rather than a Sphere for Panoramas is that the Skybox is made of less triangles. this makes them a little more effective, but it also introduces a little distortion. Most people won't notice this, but for high fidelity panoramas, you'll want to use a Sphere along with a bag of tricks to make it almost as efficient as the cube.

So it's easy then? You just make six images and you're ready to go? Not really. The images will need a very special distortion applied to them for this to become seamless. The Skybox6 texture should look something like this. If the image looks different, your Skybox6 won't look as intended.

So how do you go about making 3x2 images?  There are lots of software that makes Spherical panorama images, but this 3x2 format is a little more exotic. While researching this article, I came across a nice priced software called Pano2vr that is cross platform (Win / Mac / Linux) that does a great job at converting panoramas from one panoramic format to another based on 16 different formats. It exports to QuickTime, bitmaps or event Flash. The Flash export option is complete with SWF, images and HTML and you can set hotspots in the panoramas as well. A single user license is 59 Euro (appr $107) so it's not exactly expensive for what it provides and the quality of the conversions are really good. The panorama image above was created using the trial version, so it has some watermarks in it. The full version creates non-watermarked images.

 

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 leolodreamland on 01/12 at 02:24 AM

doesn’t seem to like me substituting a flv file for the jpg as a texture?
“unable to transcode”, why is this?


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

Hi Leon,
Try using the VideoMaterial in Away3D instead. It’s made exactly for progressively streaming FLV files.

J


Posted by leolodreamland on 01/13 at 08:47 PM

ah ok, it gets the error during the embed command tho…


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

Here’s an example of the VideoMaterial:
http://www.flashgamer.com/a/Basic08_videowall.html

Here’s the source if you want to play around with it: http://www.flashgamer.com/a/Basic08_videowall.as

Will be added to a future tutorial.

J


Posted by derek on 02/26 at 07:04 PM

Hello. Iíve been searching everywhere for an example on how to set up video controls and video listeners for the videoMaterial. Iíve sifted through the documentation and canít seem to figure out how to reference the netstream object from the video Material for onStatus events. I would appreciate any help. Thanks.


Posted by Jens C Brynildsen on 03/03 at 11:57 PM

Hi derek,
The VideoMaterial is written with public properties for the Video, NetConnection and NetStream objects, so you just apply listeners as you would to any other Flash video object in Flash.

There’s also public methods for playing, pausing and seeking so you should have all you need to add controls easily (unless I misunderstood something)? You can also look inside the material itself for an example of how to set up the netstatusevents.

J


Posted by shizny on 05/28 at 10:30 PM

I’m having a tough time figuring out what exactly I need to do to take these pictures in the correct manner for skybox6.  I downloaded Pano2vr, but that just looks like it converts an already panoramic to 3x2, how do I actually create the panoramic in the first place.  I just have a normal camera, no fish-eye etc.  And, would I use a panoramic stitching program before I use Pano2vr?


Posted by Jens C Brynildsen on 06/22 at 01:14 PM

@shizny Just try to Google this? Here’s a good tutorial that I found:
http://www.youtube.com/watch?v=WoQNL-VsvJA That one is based on having a proper camera & tripod though but there’s many other options available.

There’s even some quite good software for the iPhone (if you happen to have one) that will both help you capture and stitch panoramas. Just dig around and I’m sure you’ll find a solution that fits your budget.

J

Submit a comment

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