SketchUp for the Supper Club by Rebecca Wilson

April 27, 2009


Rebecca Wilson, one of my graphic designers, has just completed a series of introductory tutorials on SketchUp. In the tutorials she demonstrates how to use SketchUp to build the rooms in the Beverly Hills Supper club.

Video 1 Basic Tools

Video 2 Model a Room

Video 3 Importing Furniture

Video 4 Texturing


Below are some Images of what Rebecca created:

Building Outline Around Room 1

Building Outline Around Room 1

Building Outline Around Room 2

Building Outline Around Room 2

Cabaret Room 1

Cabaret Room 1

Cabaret Room 2

Cabaret Room 2

Viennese Room 1

Viennese Room 1

Viennese Room 2

Viennese Room 2

Flash CS4 Planetarium in 49 Lines

April 22, 2009


In Chapter 7 of the book I change the  Planetarium example (shown in a previous post) so that it only uses XML (threw out Cairngorm). And in the process I thought, hey this should be easy to do in CS4. And it was! Check it out below…a planetarium (with real star data) in 49 lines of code…including comments.

Flash CS4 Planetarium in 49 Lines

Flash CS4 Planetarium in 49 Lines




There are two main steps in getting this to go:

Step 1: Get a star object into your library so you can instantiate it onto the stage like you would your particles class – this step saves you tons of code: var myStar = new Star();

Star in the Library for Instantiation

Star in the Library for Instantiation

Step 2: Treat your stars like a particle system. This lets your stuff then into an updatable array so you can rotate them:

The rest of this stuff you’ve seen before, and I go through the discussion in the book and in the YouTube video above so I just show the code below: myParticles[j]

Sample Star Data (CSV)

AND, 2.065, 42.316, 0,
AND, 1.161, 35.616, 1,
AND, 0.655, 30.85, 1,
AND, 0.139, 29.083, 1,

CS4 Planetarium in 49 lines

import flash.display.*;

//Create star parameters
var myStar:Star;
var skyRadius:Number = 240;
var myOsc:int=0;
var starHolder:MovieClip= new MovieClip();

//Create a star array to hold CSVdata and particle array
var starArray:Array=new Array();
var myParticles = new Array();

//XML Statements used to bring in XML data
var urlRequest:URLRequest = new URLRequest(“data/starData.xml”);
var xmlLoader:URLLoader = new URLLoader(urlRequest);
xmlLoader.addEventListener(“complete”, readXml);

//XML parser and CSV splitter
function readXml(event:Event):void{
var markersXML:XML = new XML(;

//Set the initial star system in place and add to a Movie holder
for(var i:uint = 0; i < starArray.length/4; i++){

//Instantiate stars and place them in a particle array
var myStar = new Star();

//Position stars (x, y, z) on stage

//Scale stars according to magnitude and give a rand rotation

//Add stars to star holder and position the holder

//Create your animation loop using an Enter Frame Listener
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void{
//Increment oscillation parameter and iterate over stars
for(var j:uint = 0; j < starArray.length/4; j++){

//Set new x, y, z for your stars as they rotate

Putting 3D Google Maps on the Web (using Flash 10)

April 18, 2009


To this point, I’ve been putting Google Maps into Air applications due to the Flash Sandbox issue encountered in PV3D (discussed in a previous post). But in CS4, guess what, it’s not an issue. They go right on the web as you can see from the demo below:

Google Map in 3D on the Web

Google Map in 3D on the Web




Now here is how you do it, and it’s so simple you will not believe it. Use the code below to put your map into a movie where it’s free to move freely in 3D.


Placing a Google Map on a CS4 Plane is easier in Flex 4 (Gumbo) than it is in PV3D. All you do is throw your map into a movie clip using the code below, and then center it to get your map pivot right. The code snippet below sets your map in a movie clip, centers its pivot, sets map controls, places your movie in a Flex canvas, and centers your movie on the stage.

//Place your map in a movie so you can position its pivot

//Set your map pivot

//Add Map Controls
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());

//Put your movie in a Flex Canvas

//Center your Movie

The map also has two additional Flex components; a button, which stops it from spinning and a slider, which adjusts its speed and direction of rotation.

This is the great power of CS4 over PV3D. You can now bring native Flex components into your 3D environment in conjunction with your 3D objects. Bringing Flex components into PV3D is a difficult task and requires the use of the draw BitmapData feature. But with CS4 it occurs natively, and those components can be manipulated in 3D as well.

Hey that’s it, how crazy can that be! And all the controls and buttons are fully functional and in the right place.

Note: You could have just rotated the map directly, but you put it in a movie to control positioning and its pivot point.

The rest of the code is shown in the link below and discussed in greater detail in Chapter 7 of the book.

Read the rest of this entry »

2 and 3D FLINT Particle (Gumbo) Viewers

April 17, 2009


I used to have an old truck, that I payed way too much for, and on its sixth repair trip … the mechanic said there had been too many hands in it. What did that mean? And then it just died and nobody knew why. It’s true for software as well – too many people working on a project can kill it … you just need a few bright folks. And with Flint, there was just one, Richard Lord. It demonstrates how powerful just one guy can be.

In chapter 6 of the book, we cover Richard’s incredible FLINT particle system and its use in PV3D … super job Richard Lord!!! This guy must have a cranium cavity the size of the grand canyon.

However, in the prep for the particle chapter I really got tired of having to wait for his different example apps to come up, so I created 2 and 3D fast particle viewers (in Flex 4 Gumbo) . You can view the apps below and download the source code as well. They work very similarly to the MD2 viewer posted earlier, so I won’t cover how they were made here.

Download Source for both Apps here

2D Viewer Demo (click this link or image below)

Flint 2D Particle System

Flint 2D Particle Viewer

3D Viewer Demo (click this link or image below)

3D Particle Viewer

Flint 3D Particle Viewer

A Little Extra OOP (for particle systems)

April 16, 2009

A Little Extra OOP

Working with particle systems requires that you delve a little deeper into the wonderful world of OOP (Object-Oriented Programming). There are a few new concepts (and some you’ve already seen) that will take you a long way when working with particle systems: encapsulation, inheritance, access modifiers, polymorphism, getters and setters, static properties and methods, static constants, and throwing errors.

Encapsulation involves exposing only what is necessary in order to use a class. You can think of it as the dials on your car radio. You don’t need to understand electronics to turn on your car radio. The circuitry is behind the scenes and the same is true about your code. You can have very complex code structures hidden using encapsulation and reveal only the bare minimum of what your user needs to interact with. This has been one of the cornerstones of PV3D and you’ll find many complex code structures beneath the sub-layer of PV3D’s commonly used classes.


Key to many applications in PV3D is the concept of inheritance. You can recognize when inheritance is in play by the “extends” keyword. The class you extend will therefore inherit all the properties and methods of the class it extends. So in the simple starter code below the new “ClassExtends” class will inherit from the Sprite class all of its methods and properties.

package {
import flash.display.Sprite;

public class ClassExtends extends Sprite
public function ClassExtends()

Inheritance saves you tons of space and labor by allowing you to write reusable code, and you can attach that code to other classes, thus extending their functionality very easily.


It’s often joked that polymorphism is a word that will impress friends at parties, most likely it will get them going the other way. Polymorphism is the concept that an object that inherits from a class can be used in place of an instance from that class.
So to cut through all the formalism, it’s all about data types. If I’ve extended a class by the Movie class then that class can be treated as the Movie datatype. Think of it as the king’s son. If the king is allowed into the thrown room, so is his son, because in a sense he is an extended version of the king. There’s much more to polymorphism of course (or it wouldn’t have such a big name), but this is enough to get you through particles.

Access Modifiers

You’ve already dealt with access modifiers. They give you the ability to control your encapsulation, exposing and restricting various code elements in the sub-layers of your program, defining what properties and methods are exposed for use behind the scenes. As discussed in a previous chapter access modifiers use the keywords: public (everyone), private (within your class), protected (available to descended or sub-classes), internal (same package where defined).

Getters and Setters

If you open up the PV3D’s DisplayObject3D class you’ll find tons of getter and setter methods and if you’ve never seen this before it may seem a little strange, but it has its roots in the “best practice” of keeping all your class properties private. But you can still access those properties through pubic methods (so you protect the private property but expose it using public methods). And since this approach is used so much special methods “get” and “set” have been created just for the process of getting and setting data. Get allows you to get the private property, and set allows you to change that private property. If you only have a get method and not set method the property is read-only…you can’t change it.

In the code snippet below taken from the DisplayObject3D class you get and set the value of X rotation. The first step is to set your “_rotationX” property to private. Note: the underscore in front of the property “_rotationX” is just a convention, which indicates that the property is private.

So to illustrate this principle, in the statement below the “_rotationX” property is set to private.

private var _rotationX :Number;

By using the get and set methods you can access the “_rotationX” property as shown:

public function get rotationX():Number
if( this._rotationDirty ) updateRotation();

return Papervision3D.useDEGREES ? this._rotationX * toDEGREES :

public function set rotationX( rot:Number ):void
this._rotationX = Papervision3D.useDEGREES ? rot * toRADIANS : rot;
this._transformDirty = true;

Now, in your main program, all you need to do is reference rotationX to get or set your private property. For example, if want to get or set the x rotation of a cylinder use the code below:

get method: cylinder.rotationX
set method: cylinder.rotationX = 45;

You’ll use getter/setter methods as you add various physical properties to your particles.

Static Properties and Methods

Static properties and methods are attached to a class, as opposed to the instance of a class. A good example of this is aligning an object to the center of the stage. You do this all the time and it would be handy to have some reusable code that does this for you automatically. Using static properties and methods allows you to do this, and you won’t have to create an instance of this class every time you need it, but you will access it directly.

package utils
//Visual objects (top level objects) need to be imported.
import flash.display.DisplayObject;
public class Utils
public static var centerMyObject:String=”Center Object!”;
public function Utils()

//Because of polymorphism you can pass in any object that inherits from the Display Object class

public static functioncenterObject1(myObject:DisplayObject):void{

public static function centerObject2(myObject:DisplayObject):void{

public static function centerObject3(myObject1:DisplayObject,myObject2:DisplayObject):void{


Another important category of static classes commonly used in PV3D is the Tweener class (such as TweenLite or Caurina). Typically, an object needs to be tweened in a certain way, which makes this approach ideal. Just toss your object into a static tween method and away you go. Tweeners are handled in more detail in a later chapter.
Static Constants

A static constant is like a static variable, but it never changes. Just open up the ObjectDisplay3D class and you’ll see tons of them. Static constants are typically used with events and have the following form.
* tells Mesh3D’s render() method to sort by measuring from the center of a triangle*/
public static const MESH_SORT_CENTER:uint = 1;
The convention is to use all caps when creating static constants and the separation of words with underscores. This is what Flash does with its static constants.
Throwing Errors (Try/Catch)

Why in the heck would you want to throw or create an error…aren’t there enough of them? When Flash has an error it doesn’t always know what to do with that error (or provides vague information). Throwing errors (and catching them) gives you the ability to take control of the process, directing Flash on what to do for certain types of errors or providing more details to the user about that error. The example below checks to see if a video is available; if it is not available an error is thrown

throw new Error(“No Video Available”)

It’s important to understand that when Flash encounters a throw statement that no more code can be run in the routine (its current script is terminated). It works somewhat like a return statement in a loop, but there’s more. When an error is thrown, Flash stops the current process and looks for some code that can catch what is being thrown.
To catch that thrown error you can use a try/catch block as shown below:


When an error is thrown, Flash looks to see if it was thrown within a try/catch block, if it was, it goes to the next position in the stack and executes its catch statement. The try/catch block gives you the ability to do something when your error occurs as opposed to stopping your code, which could potentially wreck your program.
Now that you have a little more OOP under your belt, you can now proceed to build advanced particle systems.

Flash CS4 Exploding House of Cards (3D Particle Class)

April 15, 2009


Exploding an object is serious gaming fun. There’s just something about the human psyche that loves to see things blow up. In this post, we show you how to create a card house in Flash CS4 and then how to blow it up by treating the cards as particles.

Exploding House of Cards

Exploding House of Cards



YouTube Video 1: Building a House of Cards in CS4 (Part 1)

YouTube Video 2: Building a House of Cards in CS4 (Part 2)

YouTube Video 3: Making Your CS4 Card House Explode (Part 3)


The first step in making things explode is to add a spin (x, y, z) property to your Particle3D class (developed in the book).

You can accomplish this in the following three steps:

Exploding an object is serious gaming fun. There’s just something about the human psyche that loves to see things blow up. The first step in making things explode is to add a spin (x, y, z) property to your Particle3D class. You can accomplish this in the following three steps:

Step 1: To keep things straight rename your Particle3D (developed in the book) class to ParticleBlowUp and add a spin (x, y, z) property

public var spinX:Number;
public var spinY:Number;
public var spinZ:Number;

Step 2: In the constructor function, set the spin (x, y, z) equal to zero.

spinX = 0;
spinY = 0;
spinZ = 0;

Step 3: And in your animation method “myLoop” update the rotation of the particle by iterating the spin (x, y, z) amount.

this.rotationX += spinX;
this.rotationY += spinY;
this.rotationZ += spinZ;

And that’s all you have to do to your Particle3D (now named ParticleBlowUp) class. See the book for more details…

You’re Only Half Way

But to get your particle system to explode you want to transfer a multi-part movie clip into your Particle class (using polymorphism). Then iterate over the elements of that movie clip, so you can spin those elements off into space in different directions, simulating an explosion.

To do this, make the following changes to your Particle3D class shown below:

1. Remove the “extends Sprite” statement from your ParticleBlowUp class; this allows you to bring in an object into your ParticleBlowUp class.

2. Create a public property “obj” and data type it as a Display Object:

public var obj:DisplayObject

3. Add “obj” to your constructor method, declare “obj” as an object in your constructor method.
4. Finally, change all the “this” keywords to object so that the transformations are applied to the object passed in through the constructor.

To see the rest of the discussion click the link below:

Read the rest of this entry »

Hacking Plugin Media and

April 11, 2009


Seb Lee-Delisle is the technical director at Plug-in media and is famous world wide for his particle effects and his very entertaining presentations. During the Christmas season Seb usually releases a snow particle system to the open source community. You can download Seb’s snow systems and more from his blog at

In this post, you’ll take Seb’s snow-storm particle effect and combine it with another great blog release found on John Lindquist’s site at John also releases tons of great PV3D examples and you should take the time to visit his site as well.

You’ll combine Seb and John’s work to produce a reflecting snowy Christmas scene shown below. This is a great example of hacking two different software apps to produce a superior one.







If you haven’t guessed it yet, hacking in the open source community is a good thing, and the book emphasizes going beyond the surface of PV3D and making it better (or hacking the heck out of it)!

Making it Snow for Christmas

You’ll want to start by either going to Seb and John’s blogs and downloading the corresponding snow storm and Flint Christmas scene, or by downloading the Merry Christmas code from the book’s chapter code (or link above).

John uses this Christmas scene as an example of Flint particles. The problem is that his snow is just 2D and does not interact with the reflective surface. Seb has 3D snow that will interact with the surface. So you’re going to delete the FLINT particle snow system (you’ll learn about FLINT in a later post) and add Seb’s snow.

Here are the steps:

1. Delete the Flint Particle system from John’s code.
2. And import Seb’s snow storm package into to John’s code and instantiate it using the following code:

snowStorm=new SnowStorm(100, .4,2000);
// Also, make sure that you update the snow in your animation loop (enterFrameHandler) or it willnot show up.

3. John uses planes for Christmas ornaments, you can “snaz” this up a bit by replacing the planes with spheres, and by reducing the segments to 2×2 you make your ornaments look like crystals.

for(var i:int = 0; i < total; i++)
var material:ColorMaterial;
if((i & 1) == 0) material = new ColorMaterial(0xaa0000);
else material = new ColorMaterial(0x00aa00);
material.doubleSided = true;
//Add a sphere instead
var sphere:Sphere = new Sphere(material, 10, 2,2);
sphere.x = Math.cos(i) * (radius – i * 3);
sphere.z = Math.sin(i) * (radius – i * 3);
sphere.y = i / total * height;



4. You now have 3D snow and cool looking ornaments, but the snow is out of wrack and at this point you’ll need to adjust a few parameters to make it look just right. In this case, we want the falling snow to disappear just as it touches the reflective surface . To accomplish this adjust the following parameters

snowStorm=new SnowStorm(100, .4,2000);
//Pull the snow up so it disappears when it hits the reflective surface

In addition to changing your particle parameters you raise your snow’s y-position so it just touches the reflective surface before being recycled. Next you have to go into the snow class itself and adjust the particle ratio. In the SnowStorm class in the update method make the following change:

if(particles.length/10 < maxFlakes)

This is what I call emotional (or intuitive) programming. You might not know completely how the code works but by changing a few parameters you bring everything into agreement. This can be both dangerous and fun! So make sure you keep back up copies in case you really mess something up.

This causes your particles to be regenerated more rapidly and close the gap that appears due to particle lag. Now matter what you create, you’ll always need to make adjustments. Get used to going down to sub classes and changing parameters.

Flex is a great tool for surfing logically to classes that you need to modify. Just roll over a method and hold down the command key (MAC) or alt key (PC) and when you do the method, class, or property will underscore and when you click on it you will automatically navigate to that method even if it is in another class.

5. Finally you want to change the words from MERRY CHRISTMAS to IT’S A SNOWY CHRISTMAS. You’ll need to play around with the spacing of the words a little to get it right (this is where a little knowledge of trig is helpful).

//IT’S A
var itsaMaterial:Letter3DMaterial = new Letter3DMaterial(0x00cc00);
var itsa:Text3D = new Text3D(“IT’S A”, rockwell, itsaMaterial);
var snowyMaterial:Letter3DMaterial = new Letter3DMaterial(0xcc0000);
var snowy:Text3D = new Text3D(“SNOWY”, rockwell, snowyMaterial);
var christmasMaterial:Letter3DMaterial = new Letter3DMaterial(0x00cc00);
var christmas:Text3D = new Text3D(“CHRISTMAS”, rockwell, christmasMaterial);

The final results are shown below in the figure above. To see the entire code download it from the source or click the more button below:

Read the rest of this entry »

Slicing Images in 3D and Adding Interactivity

April 5, 2009


One of the things I really hate about slicing up images … is slicing them. It’s just so time intensive in Photoshop, Illustrator, or Gimp and then I never get it right or the site specs change and I have to re-slice (and God forbid re-program). So I’ve developed a method for slicing them programmatically – no more hand made clothes, all made by machine! Let me show you how it works.

Click the image below to see the demo (click on the slices to rotate them, or you can drag them as well):

Split Image and Interactivity

Split Image and Interactivity


Note: You must use the Flash 10 player. I built this in Gumbo as an ActionScript project.


YouTube Demo


In this post we actually handle three important concepts

  1. Slicing an Image
  2. Polymorphism & Encapsulation
  3. Static Properties/Methods & Interactivity

These concepts are key OOP principles briefly discussed below, but are given much more detail in the book. And are essential in understanding PV3D.

Slicing an Image

Slicing an image is pretty easy using copyPixels. You just bring in your image and copy the portion of the image that is your split as shown below:

// loop through all pieces
for(var x:uint=0;x<6;x++) {
for (var y:uint=0;y<4;y++) {

// create new map piece bitmap
var newmapPieceBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth,pieceHeight));
newmapPieceBitmap.bitmapData.copyPixels(image.bitmapData,new Rectangle(x*pieceWidth,y*pieceHeight,pieceWidth,pieceHeight),new Point(0,0));

// create new sprite and add bitmap data to it
var newmapPiece:Sprite = new Sprite();
mapPiece=new MapPiece(newmapPiece,x,y);

// set location
mapPiece.x = x*(pieceWidth+5)+20;
mapPiece.y = y*(pieceHeight+5)+20;

// add to stage


You’ve got to loop twice to get both column and row as you use copyPixels to grab your slice. If you check out Gary Rosenzweig’s book ActionScript 3.0 Game Programming University you’ll find that he uses a similar slicing technique. But in addition to Gary’s approach, we use Polymorphism & Encapsulation typically found in PV3D. Their use is briefly discussed below, but is treated in greater detail in the book.

Polymorphism & Encapsulation

The heart of PV3D is encapsulation and by using polymorphism we can create a MapPiece class that enables us to easily work with the map pieces. Polymorphism is used to grab the map pieces and treat them as instantiated objects as shown in the MapPiece class below:

package objects.primitives
import flash.display.Sprite;

public class MapPiece extends Sprite
private var mapPiece:Sprite;
private var locX:uint;
private var locY:uint;
private var myXPos:Number;
private var myYPos:Number;

public function MapPiece(mapPiece:Sprite,locX:uint,locY:uint)


Interactivity is accomplished in two ways: (1) by adding a listener, and (2) using Static Properties and Methods.


The instantiated map piece has a mouse click listener added to each map piece using the code below:


Static Properties and Methods

By creating a static properties and methods class you can create reusable code. This is done for the drag and drop class shown below.

package utils
import flash.display.Sprite;

public class DragDropStatic
public function DragDropStatic()


public static function DragDrop(mySprite:Sprite):void
mySprite.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
mySprite.addEventListener(MouseEvent.MOUSE_UP, dropMe);
function dragMe(event:MouseEvent):void
function dropMe(event:MouseEvent):void


Once the class is created then it’s easily executed using


All of this is handled in greater detail in Chapter 6 of the book.

Check out the source code by downloading it from the link above or clicking below.

Read the rest of this entry »

12 Tips on Creating Low Polygon Models

April 1, 2009


Low polygon modeling is an essential element is creating successful 3D websites. The following tips should help you get started. In addition, make sure you watch the SketchUp video tutorials found at

They are excellent!!!

Tip 1: Reduce face count by simplifying geometry such as windows and doors. It’s more important to show position and proportion than the trim. Use images of windows and doors as opposed to trying to model them exactly. When ever possible, use entire building photos to model building sides.

Tip 2: Use simplified structures. As opposed to trying to create a grainy surface (or wood lattices) based on vertex manipulation (or multi-primitive placement), just use a texture that has a grainy look (or PNG lattice). This can go a long way…use it whenever you can. Use PNG (for transparency) or JPG images at 72ppi.

Tip 3: Keep curved surfaces to a minimal number of faces. Reduce the number of sides of a polygon. Many times you can get a way with using a 3-sided polygon to draw a column as opposed to a 12-sided polygon. The savings are huge…

Tip 4: Avoid hidden structures. If you can’t see it don’t draw it. Many models have internal structures that are revealed when opening a door or hatch (like the inside of a tank). Separate those structures using a portal engine and don’t draw them until you need them. Or for example, why draw the bottom of a house or its internal walls if you don’t see it. Delete them.

Tip 5: Be aware of levels of detail. Focus on where your user will be looking. If your user’s eye is not drawn to a certain area of the screen approximate detail with an image. Or if an object is always going to be viewed from far away, don’t detail it.

Tip 6: Use single faces when possible. Many times a single face (or combination of single faces) can be used to approximate structures. A tree, for example, can be created from two or three single faces (as was shown in Chapter 3), as opposed to drawing multiple polygons to represent the branches and leaves.

Tip 7: Turn repeated geometry into instantiated components, in which case your computer only has to remember a single definition. And optimize the component definition itself (such as removing backsides that aren’t seen).

Tip 8: Paint small or insignificant structures with colors as opposed to using a texture.

Tip 9: Use Picasa, Gimp, or Photoshop to optimize your images. Bringing down image size and file size will increase your model’s performance on the web. There is a trade off between image quality and web performance. And use mip-mapping (discussed in the next chapter) whenever possible.

Tip 10: Avoid lines. Drawing lines in Papervision3D is expensive; make sure you have the lines turned off. And avoid using composite components and transparency in PV3D; it taxes your processor.

Tip 11: When shading use Pixel Bender or the Fast Shading techniques developed in this book.

Tip 12: Watch your polygon count as you model; in 3DSMax hit the 7 key and your polygon and vertices number will appear at the upper left hand corner of your screen.

Finally, CS4 lets you use large polygon faces without getting PV3D image sag. This greatly reduces the number of polygons needed to model buildings.