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

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

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.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: