Getting Started with Gumbo (Flash 10)

Intro

We knew from the start in writing Professional Papervision that the technology would change mid-stream. Mid-stream is here and we are delighted with the changes. And we are incorporating them into your book. Yes, expect the book to cover Gumbo (Flex 4) – and much more.

I just couldn’t resist this graphic below. Is it a bird (gumby)? Is it a plane (dumbo)? No it’s Gumbo!

Open Source Flex 4 Gumbo

In addition to the power of the Flash 10 player, having the open source gumbo code opens up a whole new world of development possibilities.

In this tutorial, you’ill learn how to get started with Gumbo by doing the following;

• Installing and configuring Gumbo
• Creating your first program
• Examining the Gumbo classes

I’m thrilled that Gumbo is here and have already started using it to extend the possibilities of Papervision. You’ll hear much about integrating Gumbo with Papervision in future blog post.

Gumbo Rotating Video Example

A great place to go for Gumbo examples is Peter deHaan’s blog on Flex Examples. I’ve been reading his blog since it first came out and he does really good work in Flex – almost an example everyday. I modified his rotating image Gumbo Code and extended it to play video, and have added a discussion on how to discover what is available in Gumbo. And how to work with Gumbo’s class structure. My extended example can be accessed by clicking on the link below – remember you need the Flash 10 player to run it!

Rotating Gumbo Video

You can watch the demo or download the source from the links below;

Demo: http://www.professionalpapervision.com/demos/web/gumborotatingvideo/

Source: http://flex3cookbook2.googlecode.com/files/RotatingGumboVideo.zip

The Big Deal!!!

So what’s the big deal? Why should you even care about Gumbo? Besides the performance enhancement and ease of use, Flex’s components are now native 3D – no more bitmapdata hacks to get them into Papervision – and if you are interested in building a Flash version of Second Life you just got a major boost. Second Life doesn’t handle data well – Flex 4 is a 3D data animal.

Installing and configuring Gumbo

YouTube (Part 1 Installing Gumbo – Part 2 below):

Getting Started Steps (Covered in YouTube Video)

All these steps are covered in the YouTube video, and they are included here so you can follow along.

1. To download Gumbo, navigate to the following URL:
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4/

2. Download the latest stable build or latest milestone – newest date. Download Adobe Flex SDK.

3. Save latest stable build to your hard drive and extract the files from the .ZIP file

4. In Flex Builder 3, select Window > Preferences from the main menu to open the Flex Builder Preferences dialog box. To add, edit, or remove a Flex SDK, select Flex > Installed Flex SDKs.

5. Click the Add button to launch the Add Flex SDK dialog box and click the Browse button to navigate to the directory where you extracted the nightly SDK build in a previous step.

6. Click OK to apply your changes and add the new Flex SDK. If you want to set the newly downloaded SDK as your default SDK, click the check box to the left of the SDK name. Click OK to dismiss this dialog.

If you want to compile your code against this new SDK you can select Project > Properties from the main menu, select Flex Compiler from the menu on the left, and select your new SDK from the dropdown menu in the Flex SDK version section. Note:Make sure Flash Player 10 is selected.

Also worth mentioning is that you can manage your installed SDKs via the Project Properties dialog menu by clicking the Configure Flex SDKs link, which takes you to the Installed Flex SDKs preferences.

Difference Between Builds

Latest Milestone Release Builds – Releases are builds that have been declared major releases by the development team – Releases are the right builds for people who want to be on a stable, tested release, and don’t need the latest greatest features and improvements

Stable Builds – Stable builds have been found to be stable enough for most people to use. They are promoted from nightly build by the architecture team after they have been used for a few days and deemed reasonable. The latest stable build is the right build for people who want to stay up to date with what is going on in the latest development stream, and don’t mind putting up with a few problems in order to get the latest and greatest features and bug fixes.

Nightly Builds – Nightly builds are produced every night from whatever has been released into the HEAD of the SVN repository. They are untested and may have problems. Some possibly will not work at all.

Different types of Flex SDKs available:

• Free Adobe Flex SDK – An official Adobe product, with released versions found at http://www.adobe.com/go/flex3_sdk. The Adobe Flex SDK contains everything you will need to build and deploy Flex RIAs
• Open Source Flex SDK – For users who want a package that contains only open source code, we offer the Open Source Flex SDK, which is available from this site.
• Adobe Add-ons for Open Source Flex SDK – This package contains all of the items that are in the Adobe Flex SDK and not in the Open Source Flex SDK.

Code Creation and Working with Classes (Covered in YouTube Video)

YouTube Video (Part 2 Code Creation)

After downloading deHaan’s example of the rotating image load it into Flex and get it working. You’ll modify his code to get a button-controlled video (play, stop, pause) instead of an image rotating. Here are the steps below;

• Add the Video Display import statement

import mx.controls.VideoDisplay;

• Add a video1 private variable for your video

private var video1:VideoDisplay

• Add video play, stop, and pause buttons and include their event listeners in the initiation function

fxVideoPlay =new FxButton();
fxVideoPlay.label = “Play Video”;
fxVideoPlay.addEventListener(MouseEvent.CLICK, playVideo);

fxVideoPause =new FxButton();
fxVideoPause.label = “Pause Video”;
fxVideoPause.addEventListener(MouseEvent.CLICK, pauseVideo);

fxVideoStop =new FxButton();
fxVideoStop.label = “Stop Video”;
fxVideoStop.addEventListener(MouseEvent.CLICK, stopVideo);

• Add the buttons to the VGroup

vGroup.addItem(fxVideoPlay);
vGroup.addItem(fxVideoPause);
vGroup.addItem(fxVideoStop);

• Instantiate the Video Display, add its source, position, style, and add to the stage

video1 = new VideoDisplay();

video1.source=”assets/abc7listens.flv”;
video1.width=320;
video1.height=240;
video1.autoPlay=true;

video1.setStyle(“horizontalCenter”, 0);
video1.setStyle(“verticalCenter”, 0);

addItem(video1);

• Finally add the play, pause, and stop button function for your listeners

private function playVideo(evt:MouseEvent):void {
video1.play();
}

private function pauseVideo(evt:MouseEvent):void {
video1.pause();

}

private function stopVideo(evt:MouseEvent):void {
video1.stop();

}

• And that’s it! To see the code click the more button below.

Real Orbiting 3D Particles (Taking Out the Trash)

Intro

As opposed to using billboarding, this program illustrates real 3D orbiting particles. The particles shown below are recycled after a randomly generated lifetime and the size of each particle is proportional to its mass. Each time a particle is generated it is given a new randomly generated lifetime, position (within an emitter window) and velocity. And the Euler gravitational equations are immediately applied as each particle enters onto the stage. Click on the image below to see a demonstration.

Orbiting 3D Particles

Demo: http://www.professionalpapervision.com/demos/web/real3dparticles/

Download: http://code.google.com/p/flex3cookbook2/downloads/list

Discussion

When handling particle creation and annihilation you’ve got to remove extinguished particles or they will weigh down your computer memory and slow your CPU performance. When working with the Flash player the best way to do this is through recycling. That way you don’t have to worry about extinguishing particles.

But if you don’t or can’t recycle, you should know the following about how the Flash player handles its trash.

Handling Your Particle Trash (You better know this)

Once a particle is extinguished it will hang around in your computer’s memory and need to be removed. The removal process is often referred to as trash collection. And this occurs when the Flash player removes unused objects. There are three things that you must do in order for an object to be eligible for trash collection.

· It must be removed from all arrays

· It must be removed from the stage and all display objects

· It can’t have reference to it such as event listeners and any event listeners that are attaché to it must be removed.

Unfortunately once you do all these things it doesn’t mean your trash is going to be collected. You have only made it available for trash collection. In typical Papervision applications you do not have control over trash collection.

The way trash collection works is that as memory usage get to a certain point Flash performs a mark and sweep operation. The Flash player scans your application looking for elements eligible for trash collection and then sweeps them away. So performing the three tasks above doesn’t mean that the item will be immediately removed from your computer’s memory. Trash collection is sporadic with no guarantees as to when it is going to happen. But it will eventually happen so make sure you keep your unused particles ready to go out with the rest of the garbage. Below are a few code snippets to help your out.

1. Use the shift command to remove a particle from the particles array

myParticle = particles.shift();

2. Use the removeChild command to remove a particle from the stage

stageContainer.removeChild(myParticle);

3. Use null to make sure that all references are removed from your particle

myParticle = null;

Use the commands above to make your unused particles available for trash collection. If you don’t want to worry about collecting your unused particles reinitialize as shown in the earlier code example. But Papervsion is like a big particle system and you’ll eventually need to use the code above. Especially when throttling your 3D objects with a timer. More on that later.

The creation of particles systems are treated in detail in the book, but please download the code and play around with it. Also, to see the code click the more button below;

Button Panel Inside a Panorama

Intro

I wrote this code a little time ago, but it’s got some good stuff in it. It demonstrates how to put a button panel inside of a panorama using multiple viewports and cameras. It also shows how to use the switch case to handle button interactivity.

I’ve already lost it once and had to decompile it from the web and reconstruct it. So don’t be surprised if you see the loc_2 variable. I decompiled my own code – the best use of sothink. To see a demo click the image below.

Button Panel Inside of a Panorama

Demo: http://www.professionalpapervision.com/demos/web/buttonpano/

Download (buttonPano): http://code.google.com/p/flex3cookbook2/downloads

Discussion

This is essentially a combination of the button panel and panorama discussed in previous posts. But if you put them together they will not work. The button panel has sorting issues with the panorama. So the trick to make this work is to use 2 separate viewports and two separate cameras. One viewport for the button panel and one for the panorama and similarly for the cameras.

Important Trick(multiple viewports)

The use of multiple viewports to overcome sorting issues is an important trick in Papervision. In addition to solving sorting problems you can use multiple viewports to enhance application performance by separately throttling the viewports based on user interactions.

It’s easy to add more than one viewport, you just declare a new one and add it as shown below

viewport = new Viewport3D(800, 600, true, false);
viewport2 = new Viewport3D(800, 600, true, true);
viewport2.buttonMode=true;
pv3Canvas.rawChildren.addChild(viewport);
pv3Canvas.rawChildren.addChild(viewport2);

Note: This was a Flex program and required the use of rawChildren.

There is an important difference when working with Flex applications where you are using script tags (not an actionscript project). In order to add children to the Flex stage you must put them in a canvas or another component and use the rawChildren tag shown below.

pv3Canvas.rawChildren.addChild(viewport);

This modification allows you to add non-native Flex display Objects to the Flex display stack. This is essential in getting your MXML application to run, otherwise nothing will happen.

It is easy to add multiple cameras as well as shown below:

scene = new Scene3D();
camera = new FreeCamera3D();

scene2 = new Scene3D();
camera2 = new FreeCamera3D();

And when you render you must have two render functions as follows;

renderer.renderScene(scene, camera, viewport);
renderer.renderScene(scene2, camera2, viewport2);

Switch Case

If you’ve done any amount of game programming you’ll agree that switch case is your best friend and it comes in handy when working with the interactivity of our button panel as well. When you click on a button you can extract the buttons name using

param1.face3d.material.name

once you have the name of the button you clicked on you can put it in a switch case and associate it with a specific function for that name as shown below:

private function onClick(param1:InteractiveScene3DEvent) : void
{
switch(param1.face3d.material.name)
{
case “myMat00″:
{
navigateToURL(new URLRequest(“http://n2.nabble.com/Lively3D-f1514083.html”), “_blank”);
break;
}// end case
case “myMat01″:
{
navigateToURL(new URLRequest(“http://code.google.com/p/lively3d/”), “_blank”);
break;
}// end case
case “myMat02″:
{
navigateToURL(new URLRequest(“http://www.youtube.com/mikenku”), “_blank”);
break;
}// end case
case “myMat10″:
{
navigateToURL(new URLRequest(“http://code.google.com/p/flex3cookbook1/downloads/list”), “_blank”);
break;
}// end case
case “myMat11″:
{
navigateToURL(new URLRequest(“http://www.professionalpapervision.wordpress.com”), “_blank”);
break;
}// end case
case “myMat12″:
{
navigateToURL(new URLRequest(“http://www.nku.edu/”), “_blank”);
break;
}// end case
default:
{
break;
}
}

Click the more button to see the complete code.

Guts of a Papervision Application

All Papervision applications have the following elements in common. They can be thought of as the guts of Papervision.

Scene The scene is where objects are placed. It contains the 3D environment and manages all objects rendered in Papervision3D. It extends the DisplayObjectContainer3D class to arrange the display objects.

Viewport The viewport displays the rendered scene. It’s a sprite that is painted with a snapshot of all the stuff contained in the view frustum. The viewport sprite inherits all the sprite methods and can be moved, positioned, and have effects added just like any normal sprite in flash.

Camera The camera is your eye inside of the 3D scene and defines the view from which a scene will be rendered. Different camera settings will present a scene from different points of view. When rendering, the scene is drawn as if you were looking through the camera lens.

Object An object is a combination of vertices, edges, and faces which provide a meaningful form for display, such as a car, avatar, or box. Objects are created in Papervision using primitives, or embedded or imported into Papervision from a modeling application such as Blender, Swift3D, or 3DSMax.

Material The material is the texture which is applied to an object. Textures can consist of various formats such as bitmaps, swfs, or video, and interact with light sources creating bump map effects and shaders.

Renderer The renderer draws a sequence of faces onto the viewport so that they make visual sense. Typically the renderer is set into a loop using onEnterFrame or Timer methods native to the flash player.

Running a Papervision application is like simultaneously recording and projecting your 3D scene as shown in the image below. The scene is the middle man. It’s what the camera films and what the projector projects.

Papervision Films and Projects at the Same Time

You can think of the whole process as a combination of a movie camera and projector which both films and projects your 3D scene simultaneously. The scene is what the camera is pointed at and the objects are the items that the camera films. The materials are what your objects are dressed in and determine how the light interacts with the scene elements. The reels on your projector are your renderer and as your reels turn (using onEnterFrame or Timer methods) they cast the recorded scene onto your screen which is your viewport.

The base code distributed with Chapter 1 of the book provides a great example of these six quantities in action. Click on the links below to see a demo, or download the code.

Demo: http://www.professionalpapervision.com/demos/web/baseview/

Download: (BaseCodeMotion.zip)

YouTube Video:

Click more below to see the code example.

Intro to Blender (ground zero to the Cabaret Room)

As part of the book, we will be modeling the Beverly Hills Supper Club in Blender.

I recently did a series at NKU designed to help people over the Blender learning hump. The sessions were recorded live and go from the basics to architectural framing of a portion of the Supper Club – the cabaret room shown below.

Modeling the Cabaret Room in Blender

These tutorials can also be found under the 3d modeling tab of this blog.

Getting Started (ground zero)

Part 1 Basic Interface

Part 2 Building the Washington Monument

Part 3 Building an Incan Temple

Part 4 Building a sword part 1

Part 5 Building a sword part 2

Part 6 Building a space ship part 1

Part 7 Building a space ship part 2

Building a Penguin

Part 1 New Tools and Commands

Part 2 Adding Wings, Feet, and Finishing Up

Framing the Cabaret Room

Part 1 Getting Started

Part 2 Architectural Framing

Part 3 Extruding the Room

A great resource for learning Blender can be found on Wikipedia at

http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pr

Getting Your Head Around Papervision3D

I recently got a question on “how to get your head around papervision3D”. This was a really good question since going to the next level in Papervison does require some digging. Since there isn’t much out there yet!

Here is what I did;

1. I read all the blog links of course – many of which you can find under mylinks on by book site at

http://professionalpapervision.wordpress.com/

2. I read every 3D book I could get off of Amazon – many of them are less than a dollar if you buy used.

3. I used the video tutorial service lynda.com which actually does two tutorial series on particles (one by Seb) and extensive Flex, 3DSmax, AS3, and Flash. I’ve used lynda for years.

4. I dug really hard on Blender – not much out there – but some tutorials on Youtube, a book on Amazon, and a tutorials series on Wikipedia at

http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/

5. I started digging into the Papervision code and modifying the classes and comparing that to what I was reading in the books I bought off of Amazon. This really helped a bunch. Flex is the best environment to do this in. You can ctrl link to other classes which helps tremendously in tracking things down.

6. I took John Grden’s Papervision Optimization class which was relatively cheap from the rich media institute.

http://www.richmediainstitute.com/

7. I used Sothink to look at what others were doing. If you want to write good code you need to look at good code. But use the old rule – look but don’t touch. No reason to take other people’s code. (This sounds a little pedantic – decompiling is a very sensitive area and I answer a reader’s concern in the comments) You can write your own more rapidly, but it does no harm to look at good ideas. SWF is an open format.

8. I dug through the code of other open source projects such as Sandy, Away3D, WOW, vectorvision , panosalado , Flint Particle System , and Mr. Doobs Previewer.

9. Finally, I prayed a lot.

Hope this helps!

Creating an Adjustable Carousel Primitive

Intro

Typically carousels are created by assembling single planes in a cylindrical configuration stacking rows as needed. But there is another way to do this. You can create a single primitive which constructs all the planes internally. Handling a single primitive requires fewer calculations to manipulate it than handling multiple planes. And you can do more with it.

To see a demo click on the image below. Try clicking on the images they are interactive.

Single Primitive Carousel

Just as in the case of the cube primitive, the carousel primitive can be manipulated as a single primitive. And the number row and column numbers are adjustable.

Web Stuff

Demo: http://professionalpapervision.com/demos/web/carousel/

Download (CarouselPrimitive)
http://code.google.com/p/flex3cookbook2/downloads/list

YouTube How to Video:

How it works

The carousel constructor function shown below gives you the ability to control the horizontal and vertical gap size, number of rows and columns, height and width, segments, and material list.

public function Carousel( materials:MaterialsList, myGap:Number=0, myHGap:Number=0 ,horizNum:int=1, vertiNum:int=1, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0, initObject:Object=null )

Primitive Code

The carousel primitive was created by duplicating the Clickable Button Panel Primitive found in this blog and renaming the class and constructor function to Carousel. Then after adding the appropriate variables, the simple equation for a cylinder was used to place the primitives according to the angle and number created by the horizNum (number of images in a circular row).

var x :Number = myX*Math.cos(myThetaIs)+myZ*Math.sin(myThetaIs);

var z :Number = -myX*Math.sin(myThetaIs)+myZ*Math.cos(myThetaIs);

var y :Number = iy * iH -(textureY+myHGap/2)*(vertiNum/2-n);

var vertex:Vertex3D = new Vertex3D();

vertex[ "x" ] = x;
vertex[ "y" ] = y;
vertex[ "z" ] = z*10;

As the different x, y, and z values are created they are put into the vertex array just as was done in creating the clickable button panel. But notice the term vertex[ "z" ] = z*10; which has a multiplier of 10. This is an issue that must be investigated in the future.

The next issue was changing how the material was named. For the clickable button panel we used a matrix numbering scheme for the material name. We change this scheme when dealing with the carousel primitive to produce a sequential numbering system. This made the images easier to work with and the code is shown below.

var myNumber:Number= horizNum*n+m;
var myMaterial:String = “myMat”+myNumber;

Main Code

Since the carousel contains many images, we do not want to have to list them individually for the material list as we did in the Button Panel case. So we put the image address in a myBitmaps array and iterate through them as shown below to create the materials list.

var materialsList:MaterialsList = new MaterialsList();

for (var i:int = 0; i<myBitmaps.length; i++)
{

var myBitmapFileMaterial:BitmapFileMaterial = new BitmapFileMaterial(myBitmaps[i]);
trace(myBitmaps[i]);
myBitmapFileMaterial.doubleSided = true;

myBitmapFileMaterial.interactive = true;
myBitmapFileMaterial.name=”myMat”+i;

myBitmapFileMaterials.push(myBitmapFileMaterial);
trace(myBitmapFileMaterial.name);

}

for (var ik:int = 0; ik<myBitmaps.length; ik++)
{

materialsList.addMaterial(myBitmapFileMaterials[ik], “myMat” + ik);

}

This is a real time/code saver and can be used to bring in items from an external data base or xml page using HTTP Services.

The Big Problem

In Papervision, pixel measurements lose their meaning due to the 1/z parameter of perspective and as result you end up doing some adjusting. The is true for the carousel. If you change the gap or height components of the Carousel function you must readjust the following parameters to get the carousel to go to the correct image when clicking on it.

var myAdjustLift:Number=35;
var myAdjustHeight:Number=70;
var myLift:Number=myAdjustLift*(plane.vertiNum-1);
var myHeight:Number=myAdjustHeight*(plane.vertiNum);

The myLift parameter adjust the place where you enter the image close up and the myHeight parameter adjusts the individual column spacings entry point. Once you set the parameters above you can change row and column numbers without further adjustments. But if you change vertical gap or image height you need to readjust the parameters above.

There is a nonlinear equation that governs this behavior, but that is the subject of another post…

To see the full Carousel class click the more button below.

Papervision Planetarium (Flex Code – NOMAD constellations)

Intro

I was having so much fun writing chapter 4 (on particles) that I could not resist creating a Planetarium. There are so many things you can do with particles like make fire, smoke, a flock of birds, or even the planetarium shown below.

Click on the image below to view the demo and then we’ll discuss how it was made. And get ready for some major hacking.

Papervision Planetarium

These are real constellations above found on sites like NOMAD and they use standard astro-celestial coordinates.

Web Stuff

Demo:
http://www.professionalpapervision.com/demos/web/planetarium/

Download: (Choose Planetarium)
http://code.google.com/p/flex3cookbook1/downloads/list

How to Video:

How it was Made

If you’re a Papervision purist, stop reading, close this post, and go for a cup of coffee. We are going to hack the heck out of Papervision, and it’s going to get ugly! On the other hand, if you’re ready to rock let’s get started.

The good news is that the entire code is only about 200 lines (counting spaces). Coming from the 2D Flash 8 world that’s pretty amazing. There are two parts to this hack. Creating a SkyMap class and creating the main Flex application which uses the SkyMap class.

Steps for creating the SkyMap class

1. Create a Flex Project – call it Planetarium.
2. Put Cairngorm in your Flex libs folder. To learn more about Cairngorm check out the video tutorials tab at the top of the blog (choose installing Cairngorm). I go over MVC architecture there. The purpose of Cairngorm is to hold the stellar data. Now you could have used just an array and an XML import, but since I build Learning Management systems I just couldn’t help myself. And yes, I just swatted a fly with an elephant – I confess!
3. Place the Papervision classes in the src folder and open up the ParticleField class found in org/papervision3d/objects/special folder. Make a duplicate of it and name it SkyMap and then change its public class name and constructor name to SkyMap. In order to get stars you’ll need to use the ParticleField ParticleMaterial class that I expanded added to in a previous post on
   

   Putting Stars and More into a Skybox (Source)

   Otherwise, you’ll only get circles and squares. I like stars better!

4. Place your sky map data into an xml file using CSV. Check this out on the how to video to see an example.
5. Now change the public class by eliminating length, width, and depth variables and add a radius variable in their place.
6. Finally eliminate the random particle equations (for x, y, and z) and substitute in the celestial equations which use the xml data brought into the Cairngorm array using HTTP services. This code is shown below;

private function createParticles(size:Number):void
{
var c:int;
var r:int;

//Lively Modifications Add Particle Stuff
var myPartNum:Number = modelLocator.myStarData.length/4;
for( var i:Number = 0; i < myPartNum; i++ )
{
var myX:Number=skyRadius*(Math.cos(2*Math.PI*modelLocator.myStarData[4*i]/24)*Math.sin((90-modelLocator.myStarData[4*i+1])*Math.PI/180));
var myZ:Number=-skyRadius*(Math.sin(2*Math.PI*modelLocator.myStarData[4*i]/24)*Math.sin((90-modelLocator.myStarData[4*i+1])*Math.PI/180));
var myY:Number=skyRadius*Math.cos((90-modelLocator.myStarData[4*i+1])*Math.PI/180)
var mySize:Number=size*(3-modelLocator.myStarData[(4*i+3)]);
addParticle(new Particle(material as ParticleMaterial, mySize, myX, myY, myZ));
}}

Steps for creating the main Flex Application

This main application is just a hack of the panorama application created in the post on

Creating a Spherical Panorama in Papervision

Here are the steps;

1. Grab the Spherical Panorama class and rip off the package tags and remove the public class and add void to the constructor function.
2. Create the appropriate Cairngorm folders including a singleton file in the model folder named ViewModelLocator and place an array myStarData in the singleton.
3. Make sure that both your main Flex application and the SkyMap class have the appropriate import and variables strings to bring in Cairngorm and the myStarData model locator array.
4. Put a HTTP services command in Flex that brings in your star data and make sure your application tag contains a call to start up your HTTP services.
5. Parse that data in an Array Collection and comma split it and place that data into your model Locator array.
6. You’re done! The array is now available for your SkyMap. Run your program.

To see the code for both the SkyMap class and the main Flex Application click on the more button below. Or better yet, just download it from the link provided above.

Making Billboard Images in 3DSMax (Videos)

Intro

Being a good Papervision programmer is not enough. You need to also become a good graphic designer. In this two part video series, you’ll learn how to make great looking particles for your web projects.

In Part 1 you’ll learn how to make your particle image in 3DSMax, and in Part 2 you’ll learn how to photo process your image and put it into Flash.

Part 1 (Using 3DS Max to make great images)

Part 2 (Photo processing your image and putting it into Flash)

Intructions

To see the instructions for 3DSMax and learn more about mipmapping click the more button below.

TriLogic Particle Billboarding (Flash Source)

Intro

If you are tired of the boring 0′s and 1′s of boolean logic, trilogic is here – 0, 1, and 2. In the 70′s we were sure that by combining enough NOR and NAND gates eventually our cyber machines would achieve consciousness. The problem was that our yes-no machines could not say (think) maybe – it was 0 or 1. But with trilogic you get a third parameter which allows for energy transfer/activation – or a maybe state.

• zero – no
• one – maybe
• two – yes

The Particle Billboarding code uses trilogic to decide when an animation transfers its moving particles. It’s the simplest example I’ve ever seen of trilogic and could act as a stepping stone for understanding this new approach to computing.

Trilogic used to transfer animation to different states.

The simulation starts with a random distribution and changes to a sphere, disc, torus, ellipsoid, and then loops back to the sphere. But as you roll over the different particles they are energized into orbit. Transferring this energy to the next object uses trilogic. This is the maybe part, dealing with energy distributions is a “maybe term” depending on activation levels. Yes – think of it as a neural net!

The code is simple enough,

if( makingTransition==0){
makingTransition=1;
for(var i:int=0; i<particles.length; i++){
//p.extra["spin"] = 0;
var myX:Number=p.param*Math.cos(p.theta*Math.PI/180);
var myY:Number=p.param*Math.sin(p.theta*Math.PI/180);
var myZ:Number=0;

Tweener.addTween(p, {x:myX, y:myY, z:myZ, time:.5, transition:”easeInOutExpo”, onComplete:setTransNum});

}}
if(makingTransition==2){

p.x=p.param*Math.cos(p.theta*Math.PI/180);
p.y=p.param*Math.sin(p.theta*Math.PI/180);
p.z=0;}

From the code if

makingTransition==0: Stops particle energy friction of present object

makingTransition==1: Transfers particle energy to next object

makingTransition==2: Starts particle energy friction of next object

Check out the code, demo, and development video below.

Web Stuff

Demo: http://www.professionalpapervision.com/demos/web/billboarding/

Download (choose billboarding): http://code.google.com/p/flex3cookbook1/downloads/list

YouTube Video: How it was created.

More Stuff

The code is explained in detail in the book, but I am including it here. It’s not documented, but I will take care of that before the book is released. Click more below to see the entire code (or just download the source from the link provided above).