Intro

Here’s Pong in JiglibFlash and PV3D that I created. It’s fully explained in the book (and the Wii controller is added as well)!

Directions: Click Drag to Move Around the game. Move your mouse up and down to control the game paddle. 21 points and you win the level, get to level six, and you beat the computer. I’ve never made it to level six…

A bounding box had to be created by Hacking the PV3D plugin created by Bartek Drozd…the rest was easy.

Pong in 3D

Demo

Source

Of course many thanks to Seb Lee-Delisle, who created a similar game in PV3D, it wasn’t Jiglib and not mutli-level, but it was a good place to start and Seb released it under the Commons license-thanks Seb! And thanks to Barteck Drozd who created the PV3D Jiglib plugin that I hacked to create a Pong Bounding box.

The book is almost done…when it is, I’ll start posting more frequently…sorry about the down time.

Intro

I did a port into Papervision3D of the famous Spring Camera example in Away3D. I threw out a few things and added arrow control so you can change the speed of your navigating rod.

It didn’t make the book, but I was able to build a galaxy cruiser out of the next iteration that did.

Spring Camera Port

I’ll start beefing up the explanations once the book is done…sorry about the short introduction. The source code is given below.

Demo

Source

Best … Mike

Intro

I built this JiglibFlash example viewer using Flex modules as a demo for Chapter 9 of the book. It’s fully explained in the book, but I thought I would share the code with you before the book is published. Check it out below:

Jiglib Examples using Flex Modules

Demo

Source
I’m finishing the book this month, so not much time for explanation or many posts. Once the book is finished I’ll start posting like crazy again.

Best Regards…Mike

Intro

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

Image

Below are some Images of what Rebecca created:

Building Outline Around Room 1

Building Outline Around Room 2

Cabaret Room 1

Cabaret Room 2

Viennese Room 1

Viennese Room 2

Intro

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

Demo

Source

Disucssion

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

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.events.*;
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(event.target.data);
starArray=markersXML.myStars.split(”,”);

//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();
myParticles.push(myStar);
starHolder.addChild(myStar);

//Position stars (x, y, z) on stage
myStar.x=skyRadius*(Math.cos(2*Math.PI*starArray[4*i+1]/24)*Math.sin((90-starArray[4*i+2])*Math.PI/180));
myStar.z=-skyRadius*(Math.sin(2*Math.PI*starArray[4*i+1]/24)*Math.sin((90-starArray[4*i+2])*Math.PI/180));
myStar.y=skyRadius*Math.cos((90-starArray[4*i+2])*Math.PI/180);

//Scale stars according to magnitude and give a rand rotation
myStar.scaleX=myStar.scaleY=(1/9)*(3-starArray[(4*i+3)]);
myStar.rotation=180*Math.random();
}

//Add stars to star holder and position the holder
addChild(starHolder);
starHolder.x=400;
starHolder.y=300;

//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
myOsc++;
for(var j:uint = 0; j < starArray.length/4; j++){

//Set new x, y, z for your stars as they rotate
myParticles[j].x=skyRadius*(Math.cos(2*Math.PI*starArray[4*j+1]/24+myOsc/180)*Math.sin((90-starArray[4*j+2])*Math.PI/180));
myParticles[j].z=-skyRadius*(Math.sin(2*Math.PI*starArray[4*j+1]/24+myOsc/180)*Math.sin((90-starArray[4*j+2])*Math.PI/180));
myParticles[j].y=skyRadius*Math.cos((90-starArray[4*j+2])*Math.PI/180);
}}

Intro

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

Demo

Source

Discussion

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.

movie.addChild(map);

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
movie.addChild(map);

//Set your map pivot
map.x=-map.width/2;
map.y=-map.height/2;

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

//Put your movie in a Flex Canvas
mapHolder.rawChildren.addChild(movie);

//Center your Movie
movie.z=0;
movie.x=450;
movie.y=300;

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.

Full Code

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:maps=”com.google.maps.*” layout=”absolute” width=”1200″ height=”800″  backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#9B9FAB, #05184C]“>
<maps:Map xmlns:maps=”com.google.maps.*”
id=”map”
mapevent_mapready=”onMapReady(event)”
width=”800″ height=”600″
url=”http://www.professionalpapervision.com/demos/projects/tour/”
key=”ABQIAAAA4LpFEu2In0mhf90kMq6mnRS-6gvR7plocG5jEAw_XBK5krTJ_RRxjCMUXsM0nZ0Gam53OPR26zHU5w”/>

<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import com.google.maps.*;
import com.google.maps.controls.*;
import mx.events.MoveEvent;

//Create map holder, oscillation angle, and rotation parameters
private var myAngle:Number=0;
private var movie:MovieClip = new MovieClip();
private var stopRotation:Boolean = false;
private var rotationValue:Number = -.05;

//When the map is ready run this function
private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
//Place your map in a move so you can position its pivot
movie.addChild(map);
//Set your map pivot
map.x=-map.width/2;
map.y=-map.height/2;
//Add Map Controls
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
//Put your movie in a Flex Canvas
mapHolder.rawChildren.addChild(movie);
//Center your Movie
movie.z=0;
movie.x=450;
movie.y=300;

addEventListener(Event.ENTER_FRAME, frameLoop);

}

//Pause or rotate button for your map
private function pauseRotate(event:MouseEvent):void{

if(mouseBtn.label=="Stop"){
mouseBtn.label="Start";
stopRotation = true;

}else{
mouseBtn.label="Stop";
stopRotation = false;
}
}

//Map Slider
private function mySliderHere(event:SliderEvent):void{

rotationValue=-mySliderValue.value;

}

//Map animation loop - enable rotation
private function frameLoop(event:Event):void
{
//Iterate animation variable
//Rotate map if stopRotation is equal to false
if(!stopRotation){

movie.rotationX+=rotationValue;

}
}

//Set up canvas components below

]]>
</mx:Script>

<mx:Canvas x=”0″ y=”0″ width=”60″ height=”73″ id=”mapHolder”></mx:Canvas>
<mx:Canvas x=”87″ y=”7″ width=”267″ height=”65″ backgroundColor=”#DFAAF7″>
<mx:Button x=”19.5″ y=”10″ label=”Stop” id=”mouseBtn”   click=”pauseRotate(event)” />
<mx:HSlider x=”87.5″ y=”15″ minimum=”-4″ maximum=”4″ id=”mySliderValue” value=”.05″ change=”mySliderHere(event)” />
<mx:Label x=”108.5″ y=”33″ text=”Speed and Direction”/>
</mx:Canvas>
</mx:Application>

Intro

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 Viewer

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

Flint 3D Particle Viewer

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

Inheritance

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.

Polymorphism

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 :
this._rotationX;
}

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{

myObject.x=myObject.stage.stageWidth/2-myObject.width/2;
myObject.y=myObject.stage.stageHeight/2-myObject.height/2;
}
public static function centerObject2(myObject:DisplayObject):void{

myObject.x=myObject.stage.stageWidth/2
myObject.y=myObject.stage.stageHeight/2
}
public static function centerObject3(myObject1:DisplayObject,myObject2:DisplayObject):void{

myObject2.x=-myObject1.width/2;
myObject2.y=-myObject1.height/2;
}
}}

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

if(!video){
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:

try
{
//statements
}
catch(myError:Error)
{
//statements
}

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.

Intro

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

Demo

Source: http://flex3cookbook3.googlecode.com/files/blowitUp3D.zip

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)

Discussion

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:

The completed code is shown below:

package org.lively3d.particles
{
import flash.display.*;
//Particle Parameters
public class ParticleBlowUp
{
public var velocityX:Number;
public var velocityY:Number;
public var velocityZ:Number;
public var gravity:Number;
public var friction:Number;
public var fade:Number;
public var autoRotate:Boolean;
public var spinX:Number;
public var spinY:Number;
public var spinZ:Number;
public var object:DisplayObject;

public function ParticleBlowUp(obj:DisplayObject)
{
//Set Parameters
object = obj;
velocityX = 0;
velocityY = 0;
velocityZ = 0;
gravity = 0;
friction = 1;
fade = 1;
spinX = 0;
spinY = 0;
spinZ = 0;

}
//Update Parameters
public function myUpdate():void
{
velocityX *= friction;
velocityY *= friction;
velocityY += gravity;
object.x += velocityX;
object.y += velocityY;
object.z += velocityZ;
//Update rotation
object.rotationX += spinX;
object.rotationY += spinY;
object.rotationZ += spinZ;
}
}
}

Next open up Flash and make a few movies (3D card houses) and make sure that those movies are made up of various movies. You’ll iterate over these pieces to simulate the explosion. Shown below are 3 card houses, which explode when you click on them. To get this to happen, you need to give each house an appropriate instance name (house1_mc, house2_mc, house3_mc).

You then attach listeners to each one of these instance names, so when you click on them the explode method is executed.

//Set your click listeners
cards1_mc.addEventListener(MouseEvent.CLICK, explode);
cards2_mc.addEventListener(MouseEvent.CLICK, explode);
cards3_mc.addEventListener(MouseEvent.CLICK, explode);
text_mc.addEventListener(MouseEvent.CLICK, explode);

The explode method is pretty straightforward; each particle is given a random velocity and spin (in x, y, z), and gravity is set to 1, which brings the particles to the ground over time.

The full code is listed below:

import org.lively3d.particles.*;
//Import blowup class
import org.lively3d.particles.ParticleBlowUp;
//Declare particle array and particle
var particles:Array = [];
var particle:ParticleBlowUp;

function explode(event:MouseEvent):void
{
var element:MovieClip = MovieClip(event.currentTarget);
for(var i:uint = 0; i < element.numChildren; i++)
{ //Set random velocity and spin
particle = new ParticleBlowUp(element.getChildAt(i));
particle.velocityX = Math.random() * 20 – 10;
particle.velocityY = Math.random() * -20 ;
particle.velocityZ = Math.random() * 20 – 10;
particle.gravity = 1;
particle.friction = .98;
particle.spinX = Math.random() * 40 – 20;
particle.spinY = Math.random() * 20 – 10;
particle.spinZ = Math.random() * 20 – 10;
particles.push(particle);
}
addEventListener(Event.ENTER_FRAME, myLoop);
}

function myLoop(event:Event):void
{
for(var i:uint =0; i < particles.length; i++)
{
particles[i].myUpdate();
}
}
//Add Listeners
cards1_mc.addEventListener(MouseEvent.CLICK, explode);
cards2_mc.addEventListener(MouseEvent.CLICK, explode);
cards3_mc.addEventListener(MouseEvent.CLICK, explode);
text_mc.addEventListener(MouseEvent.CLICK, explode);

In this post, you’ve learned a very important technique that you will use over and over in coming chapters. You’re not just passing variables to your methods, but movies and objects…and that opens up a whole new world of possibilities.

Intro

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 www.sebleedelisle.com.

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 www.pv3d.org. 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.

IT'S A SNOWY CHRISTMAS

Demo

Download

YouTube

Discussion

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.
snowStorm.update();

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(0×00aa00);
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;

myHolder.addChild(sphere);

}

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);
myHolder.addChild(snowStorm);
//Pull the snow up so it disappears when it hits the reflective surface
snowStorm.y=1000;

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(0×00cc00);
var itsa:Text3D = new Text3D(”IT’S A”, rockwell, itsaMaterial);
//SNOWY
var snowyMaterial:Letter3DMaterial = new Letter3DMaterial(0xcc0000);
var snowy:Text3D = new Text3D(”SNOWY”, rockwell, snowyMaterial);
//CHRISTMAS
var christmasMaterial:Letter3DMaterial = new Letter3DMaterial(0×00cc00);
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:

Main Code

package
{
import flash.events.Event;
import flash.filters.BlurFilter;

import net.pluginmedia.pv3d.SnowStorm;

import org.papervision3d.core.effects.view.ReflectionView;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.special.Letter3DMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.typography.Text3D;

[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
public class MerryChristmas extends ReflectionView
{
private var myHolder:DisplayObject3D = new DisplayObject3D();
private var snowStorm:SnowStorm;
public function MerryChristmas()
{
viewportReflection.filters = [new BlurFilter(3,3,1)];
setReflectionColor(.5, .5, .5);
surfaceHeight = -80;

initText();
initSnow();
initTree();

addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

private function initText():void
{
var rockwell:Rockwell = new Rockwell();

var itsaMaterial:Letter3DMaterial = new Letter3DMaterial(0×00cc00);
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(0×00cc00);
var christmas:Text3D = new Text3D(”CHRISTMAS”, rockwell, christmasMaterial);

itsa.z=-500;

snowy.z = 0;
snowy.x=500;
christmas.z = 500;
snowy.rotationY=-90;
christmas.rotationY = 180;

myHolder.addChild(itsa);
myHolder.addChild(snowy);
myHolder.addChild(christmas);

scene.addChild(myHolder);
}

private function initTree():void
{
var radius:Number = 300;
var height:Number = 500;
var total:uint = 100;

for(var i:int = 0; i < total; i++)
{
var material:ColorMaterial;
if((i & 1) == 0) material = new ColorMaterial(0xaa0000);
else material = new ColorMaterial(0×00aa00);
material.doubleSided = true;
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;

myHolder.addChild(sphere);
}
}

private function initSnow():void
{
snowStorm=new SnowStorm(100, .4,2000);
myHolder.addChild(snowStorm);
snowStorm.y=1000;

}

private function enterFrameHandler(event:Event):void
{
myHolder.rotationY += (viewport.containerSprite.mouseX – myHolder.rotationY) * .01;

snowStorm.update();

singleRender();
}
}
}