Posts in Category "ActionScript"

Creating clickable movie clips in ActionScript 3.0

One of the biggest improvements in the ActionScript 3.0 language is the new event model. In previous versions of ActionScript, the event model may have differed slightly (or not so slightly) depending on which symbols you were using. A MovieClip’s event model may have been different from a component or other class/symbol, but now, everything uses the EventDispatcher and addEventListener() method. For an example of the old versus new methods, look at the following example:

// AS2
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.beginFill(0xFF0000);
mc.moveTo(0, 0);
mc.lineTo(100, 0);
mc.lineTo(100, 80);
mc.lineTo(0, 80);
mc.lineTo(0, 0);
mc.endFill();
mc._x = 80;
mc._y = 60;
mc.onRelease = clickHandler;

function clickHandler():Void {
trace("You sunk my battleship!");
}

NOTE: This code often uses an anonymous method, such as: mc.onRelease = function():Void {...}.

In ActionScript 3.0, the same code could be rewritten as follows:

// AS3
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawRect(0, 0, 100, 80);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
mc.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(mc);

function clickHandler(event:MouseEvent):void {
trace("You sunk my battleship!");
}

If you test the following code, you’ll notice that the shape on the Stage is clickable, although the mouse cursor doesn’t show the hand icon. If you want the hand cursor to appear when your mouse is over the movie clip, add the following line of code before the call to the addEventListener() method:

mc.buttonMode = true;

Creating new MovieClips in ActionScript 3.0

Creating new instances of a class has been greatly simplified in ActionScript 3.0. In previous versions of ActionScript, you needed to call createEmptyMovieClip() or createTextField() if you wanted to create a new MovieClip or TextField. Now, in ActionScript 3.0, you can simply call new MovieClip() or new TextField() directly, as shown in the following examples:

// AS2
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.beginFill(0xFF0000);
mc.moveTo(0, 0);
mc.lineTo(100, 0);
mc.lineTo(100, 80);
mc.lineTo(0, 80);
mc.lineTo(0, 0);
mc.endFill();
mc._x = 80;
mc._y = 60;

The previous code creates a new movie clip instance, draws a red rectangle which is 100×80 pixels, and moves the instance to 80,60 on the Stage. Compare that to the following code which does the exact same thing, although using the new drawRect() method instead of having to use the moveTo() and lineTo() methods:

// AS3
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawRect(0, 0, 100, 80);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
addChild(mc);

Note that there are a few differences. Most obvious is the use of the MovieClip() constructor instead of ActionScript 2.0′s createEmptyMovieClip(). Other notable differences are that the drawing methods (beginFill(), drawRect(), and endFill()) are called on the graphics property instead of on the instance itself. Also, in ActionScript 3.0, the x and y properties aren’t prefixed with underscores. Finally, in ActionScript3.0 the instance isn’t added to the display list until you explicitly call the addChild() method.

TIP: In addition to the drawRect() method, you can also call the drawCircle(), drawEllipse(), or drawRoundRect() methods to draw shapes.

If you wanted to instead draw a rounded rectangle, instead of calling the lineTo() and curveTo() methods, you could use the new drawRoundRect() method, as shown in the following code:

mc.graphics.drawRoundRect(0, 0, 100, 80, 15, 15);

Event.ID3

Listening for ID3 tags in ActionScript 3.0 is slightly different from ActionScript 2.0. In ActionScript 2.0, you used the onID3 event handler to detect when the ID3 information was detected, as seen in the following example:

var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var mp3:Sound = new Sound();
mp3.onID3 = function() {
var songInfo:Object = this.id3;
trace("ID3 loaded");
trace("\t artist: " + songInfo.artist);
trace("\t track: " + songInfo.track);
trace("\t comment: " + songInfo.comment);
trace("\t songName: " + songInfo.songName);
trace("\t album: " + songInfo.album);
trace("\t genre: " + songInfo.genre);
trace("\t year: " + songInfo.year);
}
mp3.loadSound(url, true);

In ActionScript 3.0, you instead use the addEventListener() method and a URLRequest object to load the sound, as seen in the following example:

var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
var mp3:Sound = new Sound(request);
mp3.addEventListener(Event.ID3, id3Handler)
mp3.play();

function id3Handler(event:Event):void {
var song:Sound = Sound(event.target);
var songInfo:ID3Info = ID3Info(song.id3);
trace("ID3 loaded");
trace("\t artist: " + songInfo.artist);
trace("\t track: " + songInfo.track);
trace("\t comment: " + songInfo.comment);
trace("\t songName: " + songInfo.songName);
trace("\t album: " + songInfo.album);
trace("\t genre: " + songInfo.genre);
trace("\t year: " + songInfo.year);
}

SoundMixer.computeSpectrum()

I was playing around with ActionScript 3.0′s new SoundMixer.computeSpectrum() method last night, and managed to build this simple example:

var url:String = "http://www.helpexamples.com/flash/sound/song3.mp3";
var request:URLRequest = new URLRequest(url);
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, completeHandler);
s.load(request);
var song:SoundChannel = s.play();
song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
var ba:ByteArray = new ByteArray();

var gr:Sprite = new Sprite();
gr.x = 20;
gr.y = 200;
addChild(gr);

var time:Timer = new Timer(50);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();

function completeHandler(event:Event):void {
event.target.play();
}
function soundCompleteHandler(event:Event):void {
time.stop();
}
function timerHandler(event:TimerEvent):void {
SoundMixer.computeSpectrum(ba, true);
var i:int;
gr.graphics.clear();
gr.graphics.lineStyle(0, 0xFF0000);
gr.graphics.beginFill(0xFF0000);
gr.graphics.moveTo(0, 0);
var w:uint = 2;
for (i=0; i<512; i+=w) {
var t:Number = ba.readFloat();
var n:Number = (t * 100);
gr.graphics.drawRect(i, 0, w, -n);
}
}

(** Sorry about the lack of formatting. I’m working on getting the blog restyled, and adding a bunch new AS2 and AS3 examples.)

UPDATE: Tom Green wrote a great article on the SoundMixer class over on Community MX, check it out: Sound Visualization in Flash CS3.