Quicktip:Event handling

I've been seeing a lot of this(image) following the launch of ActionScript 3. For me, having the debugger version of Flash Player installed it manifests as an error dialog box telling me that loading did never complete. If you don't have the debugger version of the Flash Player this will only result in the application stopping without any message.

What puzzles me a bit is how often I see this error and the share number of professionally build Flash sites where this occurs. Now, this is completely avoidable. It's just a question of handling your events.

Basically there are 6 event you handle when loading stuff over http(s). You don't actually need to do anything upon the occurrence of an event(however it is smart to do so), you simply need to handle it in order to avoid FP throwing an error shown above. Do this and your app will feel so much more well made to the end user.

Sound visualizer using SoundMixer

This time you'll get a complete class drawing a visualizer graph for the sound playing(or, actually the bytes in the sound). You can show the graph as a raw sound wave or as grouped by frequency(where a fourier transformation has been applied). This is just a simple demo, but you can separate out different frequencies to get some really cool effects. Play around with it and see what you get. PS: You do need to provide your own sound ;-)

package {
import flash.display.GradientType;
import flash.display.MovieClip;
import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundMixer;
import flash.net.URLRequest;
import flash.utils.ByteArray;

[SWF(width='512',height='300',backgroundColor='0x000000',frameRate='30')]

public class SpectrumTest extends MovieClip{

private var _eql:Boolean = true;//Show as grouped by frequenzy
private var _completeGraph:Boolean = false;//Complete graph fill
private var _spikeAmp:uint = 100;//Amplifier for graph peaks
private var _graphFill:Array = new Array(0xFF0000, 0xFFDF21);//Colorfill for graph

private var _soundBytes:ByteArray;

public function SpectrumTest(){
var s:Sound = new Sound(new URLRequest("yoursoundfile.mp3"));
s.play(0, 3);
this._soundBytes = new ByteArray();
this.addEventListener(Event.ENTER_FRAME, drawGraphHandler);
}

private function drawGraphHandler(evt:Event):void{
graphics.clear();
graphics.clear();
graphics.beginGradientFill(GradientType.LINEAR, this._graphFill, [1,1],[0,255]);
graphics.moveTo(-1, 150);

//Get the bytes
SoundMixer.computeSpectrum(this._soundBytes,this._eql);

for(var i:uint=0; i<(stage.stageWidth * .5); i++){ 

var num:Number = -this._soundBytes.readFloat() * this._spikeAmp + stage.stageHeight * .5; 

graphics.lineTo(i*2, num); 

} 

if(this._completeGraph){ 

graphics.lineTo(512, 300); 

graphics.lineTo(0, 300); 

graphics.lineTo(-1, 150); 

} 

} 

} 

}

Briefly: SWF and FLV formats opens up

Adobe has announced the Open Screen Project which will be one big step in the openness direction of the SWF and FLV file formats. In practice this means that you can build your own Flash player, or an FLV flayer. So, iPhone Flash player anyone?

Ryan Stewart has written a more in depth explanation on what this announcement means.

Quicktip: Skewing an image using ActionScript 3

So you want to skew an image, or a MovieClip or perhaps any other DisplayObject. You could do this manually in the Flash editor of course, but what if you need to do it dynamically, or in Flex.. Here is how.

//If you prefer to draw one visually, skip down
/*var target:MovieClip = new MovieClip();
target.graphics.beginFill(0x000000);
target.graphics.lineTo(100,0);
target.graphics.lineTo(100,100);
target.graphics.lineTo(0,100);
target.graphics.lineTo(0,0);
target.graphics.endFill();
//center it on the stage
target.x = stage.stageWidth *.5-50;
target.y = stage.stageHeight *.5-50;
//add the mc to the stage
addChild(target);*/
/*****/
//Set the skewing angle
var degX:Number = 15;
var degY:Number = 15;



//Get the transform matrix for the object to skew
var m:Matrix = target.transform.matrix;
m.b = Math.tan(degY *(Math.PI/180));
m.c = Math.tan(degX +(Math.PI/180));



//Apply the matrix to the transform object
var t:Transform = new Transform(target);
t.matrix = m;



//Apply the skew
target.transform = t;


Looks like a lot of code, but remember that the first 10 lines of code(not counting comments) are just to draw a MovieClip onto the center of the stage. The actual skew is achieved in just 8 lines of code.

When applying this to a movieclip it will look something like the image in the top of the post.