Archive

Posts Tagged ‘actionscript’

Create a Random Particle Explosion in Actionscript

August 21st, 2008 Adam 1 comment

Here’s a quick and dirty way to create a neat explosion effect. There’s alot of particles on the screen, so it can get resource-intensive if you create too many instances.

click the movie to create the animation.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Here’s the entire code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

// settings
const PARTICLE_MULT = 200;
const PARTICLE_MAX_SIZE = 2;
const PARTICLE_SPEED = 10;
 
// detects mouse clicks
stage.addEventListener(MouseEvent.CLICK, stageClicked);
function stageClicked(e:MouseEvent){
	explosion(e.target.mouseX, e.target.mouseY);
}
 
// explosion function
function explosion(x1:Number, y1:Number):void{
	var particle_qty:Number = Math.random() * (PARTICLE_MULT/2) + (PARTICLE_MULT/2);
	for(var i:int=0; i<particle_qty; i++){
		var pSize:Number = Math.random() * (PARTICLE_MAX_SIZE-1) + 1;
		var pAlpha:Number = Math.random();
 
		// draw the particle
		var p:Sprite = new Sprite();
		p.graphics.beginFill(0xFF0000);
		p.graphics.drawCircle(0,0,pSize);
 
		// create a movieclip so we can add properties to it
		var particle:MovieClip = new MovieClip();
		particle.addChild(p);
		particle.x = x1;
		particle.y = y1;
		particle.alpha = pAlpha;
 
		// choose a direction and speed to send the particle
		var pFast:int = Math.round(Math.random() * 0.75);
		particle.pathX = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + 
			pFast * (Math.random() * 10 - 5);
		particle.pathY = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + 
			pFast * (Math.random() * 10 - 5);
 
		// this event gets triggered every frame
		particle.addEventListener(Event.ENTER_FRAME, particlePath);
		addChild(particle);
	}
}
 
// moves the particle
function particlePath(e:Event):void{
	e.target.x += e.target.pathX;
	e.target.y += e.target.pathY;
	e.target.alpha -= 0.005;
 
	// removes the particle from stage when its alpha reaches zero
	if(e.target.alpha <= 0){
		e.target.removeEventListener('enterFrame', particlePath);
		e.target.parent.removeChild(e.target);
	}
}

I’ll go through the parts of the code:

1
2
3
4
5
6
7
8
9
10

// settings
const PARTICLE_MULT = 200;
const PARTICLE_MAX_SIZE = 2;
const PARTICLE_SPEED = 10;
 
// detects mouse clicks
stage.addEventListener(MouseEvent.CLICK, stageClicked);
function stageClicked(e:MouseEvent){
	explosion(e.target.mouseX, e.target.mouseY);
}

The particle quantity is decided by the constant PARTICLE_MULT. The minimum number of particles is PARTICLE_MULT / 2. The maximum is PARTICLE_MULT. So if it is set to 200, you will see anywhere from 100-200 particles per explosion. Then we add an event listener to see when the user clicks the screen. This will fire the stageClicked function, which calls the explosion function at the cursor’s click position.

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// explosion function
function explosion(x1:Number, y1:Number):void{
	var particle_qty:Number = Math.random() * (PARTICLE_MULT/2) + (PARTICLE_MULT/2);
	for(var i:int=0; i<particle_qty; i++){
		var pSize:Number = Math.random() * (PARTICLE_MAX_SIZE-1) + 1;
		var pAlpha:Number = Math.random();
 
		// draw the particle
		var p:Sprite = new Sprite();
		p.graphics.beginFill(0xFF0000);
		p.graphics.drawCircle(0,0,pSize);
 
		// create a movieclip so we can add properties to it
		var particle:MovieClip = new MovieClip();
		particle.addChild(p);
		particle.x = x1;
		particle.y = y1;
		particle.alpha = pAlpha;
 
		// choose a direction and speed to send the particle
		var pFast:int = Math.round(Math.random() * 0.75);
		particle.pathX = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + 
			pFast * (Math.random() * 10 - 5);
		particle.pathY = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + 
			pFast * (Math.random() * 10 - 5);
 
		// this event gets triggered every frame
		particle.addEventListener(Event.ENTER_FRAME, particlePath);
		addChild(particle);
	}
}

This creates the explosion particles. It just calculates the quantity, then loops through and creates a particle with a random alpha and size ranging from 1 to PARTICLE_MAX_SIZE. It draws a sprite, and then adds the sprite to a MovieClip. The mc is necessary so that we can add the pathX and pathY properties to it. The pathing portion of the function is kinda gangster, so I’m not going to explain it. The pFast variable pretty much makes the explosion path look more randomized by making about 25% of the particles move faster than the others.

44
45
46
47
48
49
50
51
52
53
54
55

// moves the particle
function particlePath(e:Event):void{
	e.target.x += e.target.pathX;
	e.target.y += e.target.pathY;
	e.target.alpha -= 0.005;
 
	// removes the particle from stage when its alpha reaches zero
	if(e.target.alpha <= 0){
		e.target.removeEventListener('enterFrame', particlePath);
		e.target.parent.removeChild(e.target);
	}
}

This is pretty simple. Every frame, this event gets triggered, so your movie framerate will affect the speed of these explosions (mine is set to 30). When the particle alpha reaches 0, it is removed from the stage. Removing the event listener is important.

This is a pretty simple way of doing it. Let me know if you have any suggestions!

Categories: actionscript Tags: , , , , ,

Make a DataGrid row bold

June 17th, 2008 Adam 14 comments

(Update: I’ve updated the itemRenderer so you can make any row bold, not just the last row. Thanks Pedro.)

I haven’t been using Flex for very long (or Flash’s built-in components for that matter), so I’m not too familiar with their capabilities and shortcomings. I became frustrated when I learned that it is far more difficult to style a specific DataGrid row than it is to style a column.

So here’s the dilemma: I have a DataGrid filled with info, and the final row is a sum of the numbers above it. Seems like a very useful application, but I was unable to find any direct help from other blogs or forums.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

I created an extension to DataGridItemRenderer, and simply referenced it in my DataGrid instance by defining its itemRenderer. As you can see, each item has a custom field called “fontWeight”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<mx:DataGrid itemRenderer="dgir">
  <mx:dataProvider>
    <mx:Array>
        <mx:Object Name="Apples" Value="4" fontWeight="normal"/>
        <mx:Object Name="Oranges" Value="3" fontWeight="normal"/>
        <mx:Object Name="Pears" Value="6" fontWeight="normal"/>
        <mx:Object Name="Cherries" Value="7" fontWeight="normal"/>
        <mx:Object Name="Total" Value="20" fontWeight="bold"/>
      </mx:Array>
    </mx:dataProvider>
  <mx:columns>
    <mx:DataGridColumn dataField="Name"/>
    <mx:DataGridColumn dataField="Value"/>
  </mx:columns>
</mx:DataGrid>

The DataGridItemRenderer extension overrides the function validateNow to check the data field named “fontWeight”. Here’s the code from the extension:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package{
  import mx.controls.DataGrid;
  import mx.controls.dataGridClasses.DataGridItemRenderer;
 
  public class dgir extends DataGridItemRenderer{
    public function dgir(){
      super();
    }
 
    override public function validateNow():void{
      if (listData)
      	setStyle('fontWeight', DataGrid(listData.owner).dataProvider[listData.rowIndex].fontWeight);
      super.validateNow();
    }
  }
}
Categories: actionscript, flex Tags: , , , , , , ,