Flex Builder, Papervision and GTween – great way to get the ball rolling again

Greetings all, still haven’t fixed the PC, and no plans in buying a new one. But, being forced to use a Macbook with no games installed(damn DotA) and a slow connection, I managed to find some time to get back into Flash and ActionScript.

I finally figured out how to setup external class libraries in FlexBuilder, which took longer than I would have hoped. Now I can use Papervision3D, Away3D and have a central library for all other API’s and classes.  It’s not as enjoyable as FlashDevelop, but, it’s better than nothing.

I also started playing with PV3D, which is just awesome. Very fun to play around with, and I can’t wait to make something I could use for my eternally work-in-progress site.

And finally, there’s a new tweening engine on the block. It’s called gTween and it’s made by Grant Skinner, so you know it’s great. Like TweenLite, it aims for speed and it’s also very lightweight. It’s still in beta, and not as powerful and feature-packed as TweenMax or other tweening engines. I haven’t tested it enough to choose it over TweenLite yet, but, I like it’s different approach to creating and managing (yep, you could manage, edit, reuse and even nest) tweens. Check it out here.

And, yeah, I would post my little “experiment” with Papervision, but I can’t seem to extract/find the swf file. I even tried using the .as file as a Document class to a Flash file, but I still can’t double-click and play the movie.

I am also having trouble with FlexBuilder, whenever I Run/Play button to test a project, it often doesn’t show anything until several retries or not at all, but using the .as file as a Doc class to a Flash file, it plays fine. Any help would be very much appreciated.

[Learn] A “pixelating” effect on a Bitmap

I did a little experimenting with the BitmapData class, and came up with this.
I found this effect from a gallery somewhere, and thought it would be cool to try my hand at it, for learning purposes.

Click on the image below to see the effect.

What’s happening is, I get the size of the image, divide it by the size of the “pixels” I want, then create an array of Rectangles positioned in a grid over the image.
I then fill each Rectangle with the color of the pixel in it’s center by using the getPixel() and fillRect() methods of the BitmapData class.
Here is the central function doing the pixelating.

private function pixelate(bitmap:Bitmap, strength:Number):void {
var _x:int = 0; // position of the rectangle
var _y:int = 0;
if (strength > 1){
_strength = 1;
}
var _strength:Number = strength; // multiplier for size of "pixels"

var _w:Number = bitmap.bitmapData.width * _strength; //size of "pixels"
var _h:Number = bitmap.bitmapData.height * _strength;

var nH:int = Math.ceil(bitmap.bitmapData.width / _w); // number of rectangles needed horizontally
var nV:int = Math.ceil(bitmap.bitmapData.height / _h);// number of rectangles needed vertically

var rectangles:Array = []; // Rectangles array

//create rectangles
for (var i:int = 0; i < nV; i ++){
var targH:Number = _h;
if (i >= nV - 1){
targH = bitmap.bitmapData.height - _y;
}
for (var j:int = 0; j < nH; j ++){
var targW:Number = _w;
if (j >= nH - 1){
targW = bitmap.bitmapData.width - _x;
}
rectangles.push(new Rectangle(_x, _y, targW, targH));
_x += _w;
}
_x = 0;
_y += _h;

}
//fill in rectangles
for (i = 0; i < rectangles.length; i++){

var rect:Rectangle = rectangles[i];
var pix:uint = _states[0].getPixel((rect.x + rect.width / 2), (rect.y + rect.height / 2));
bitmap.bitmapData.fillRect(rect, pix);
}

saveCurrentState(bitmap.bitmapData);

}

Now for the reverting to the original image part, I had to improvise. Since I overwrote the BitmapData with a bunch of filled rectangles, I couldn’t do much with it.
So I used an array which stores each “state” the BitmapData is in. And I could just retrieve the BitmapData in the array and copy it into the original BitmapData.

private function saveCurrentState(bitmapData:BitmapData):void {
_states.push(bitmapData.clone());
}
private function revertToState(stage:int):void {
try{
bmData.copyPixels(_states[stage], bmData.rect, new Point(bmData.rect.x, bmData.rect.y));
}catch (e:Error){
throw new Error("Invalid state. ");
}
}

To create the animation, I just called the pixelate() function through a Timer at 300 milliseconds.

A little heads-up about the Flash Player 9 Garbage Collector

I want to give a heads-up to all those just beginning with AS3 about how it handles memory. I had to find out about this the hard way, and now have to redo a lot of stuff.

Flash Player 9 introduced a new system management feature called a garbage collector (GC). Basically, what it does is “sweep” for objects that can not be used/accessed anymore, and delete them, freeing memory. Until those ‘null’ objects are removed by the GC, they will sit in memory until the Player is closed.

So, whenever you want something to be deleted (escpecially with CPU intensive particle systems), you must be aware of what and where you are referencing your objects, so you could easily remove them.  You have to do this by hand. One method is to set all objects you want to delete, and all references to it,  to null. Even then, you have to wait for the GC to do its “sweeping motion” for those objects to be deleted.

Another thing to watch out for are event listeners. Make sure you remove any listeners (by calling removeEventListener()) from objects you want to delete, since they also hold a reference to your objects.

Check this article series for more details and info about the GC and resource management in Flash Player 9/AS3.

And lastly, it is about unloading external swf’s through Loader. You might think that using unload() from a Loader would remove that swf completely, but that isn’t the case.  In fact, unload() does a pretty poor job at “unloading” swfs. Here is a quote from another article that explains this in great detail:

In AS3, calling Loader.unload() simply removes the reference to the loaded movie. If any other references exist to the loaded content, it will not be unloaded.

My site has been delayed by almost a month now, trying to figure out and fix my memory leak problem. I finally have an idea of what’s wrong, now I have to figure out a solution.

[Learn] Timer class in AS 3.0

It’s been a while since my last post. My connection has been down for a few days, so I haven’t got the chance to post. But during this downtime, I found some time to create some experiments in Flash/AS3.0 (maybe I’ll post it soon). I needed to call a method at timed intervals in this one experiment, and I thought I was in trouble. I never got around to getting how AS2.0 handled timers, if I did manage to do timers, they end up dirty.

AS3.0 has a much much better Timer class to handle just such events. Now, I’m not going to bother comparing the AS3 Timer class with AS2′s timer handling, I’m just going to give a quick intro to the class.

First, you need to create a new Timer object. The constructor has 2 parameters, delay and repeatCount. delay is the time in milliseconds the intervals will be. repeatCount is the number of times the Timer will run, assigning it 0 will set it to run infinitely.

var myTimer:Timer = new Timer(1000, 5);

Now, we want to write a function that will get called when an interval is passed (every 1 second), and when the whole timer finishes counting (after 5 seconds). The Timer class dispatches two events, TimerEvent.TIMER is dispatched when an interval is passed, TimerEvent.TIMER_COMPLETE is dispatched when the timer is finished (I love how simple that is).

stage.addEventListener(TimerEvent.TIMER, everySecond);
stage.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);

function everySecond(e:TimerEvent):void{
    trace("tick tock!");
}
function onComplete(e:TimerEvent):void{
    trace("Timer finished!");
}

Now, we just need to start the timer. The Timer class has 3 methods, start, stop, and reset. Those are fairly self-explanatory. We could now add the following lines:

myTimer.start();
//modify the onComplete function
function onComplete(e:TimerEvent):void{
    trace("Timer finished!");
    myTimer.reset();
    myTimer.start();
}

So now, when our timer finishes, it will automatically start all over again. This will trace

tick tock!
tick tock!
tick tock!
tick tock!
tick tock!
Timer finished!
tick tock!
tick tock!
...

This was just a really quick intro to the Timer class, I just felt like sharing this because I was so relieved at how easy it was to handle timed events now.

Read the online documentation!

Adobe’s ActionScript online docs that is. This has got to be the best resource you will ever find if you have trouble with ActionScript. I only found that out myself yesterday. I always thought that the online docs, or any other documentation/reference/manual, were scary to look at. Just the sight of all those complicated words that don’t seem to mesh together terrifies me. But when I was bored the other day, I decided to just read up on the BitmapData class just for kicks, and as I was reading, I surprisingly understood everything I read! I have never used the BitmapData class before, but I think I’ll be doing a lot of experiments with it soon (I have seen what others could do with it).

It has been laid out so well, everything is explained thouroughly, with simple and understandable examples and it’s searchable. It’s basically one giant tutorial about ActionScript! If there is one, I would love to buy a print/book of the online docs, because I hate reading on the monitor for extended periods of time. And yes, I’ll be reading the online docs for extended periods of time.

[Learn] How to load images/swf’s in AS3

I am in the process of converting from AS2 to AS3 right now, so I am going to try my best to post everything I learn in this blog. It might help others out there who are still also in the process of converting. To those who aren’t, you should.

This time it is about loading external images/swf’s.

In AS3, there are several types of DisplayObjects you could use to display on the stage (thus the name), along with MovieClips, Sprites(simple movieclips), Bitmaps(for bitmap data) and Loaders.
The Loader object is obviously what we would use to load these external visual data.

Basically, the Loader is just like a MovieClip, since they have a common superclass (well actually MovieClip is derived from Sprite, which is a sibling of Loader). It’s a like a MovieClip that could load objects. So, if you are coming from AS2, it would make things easier to think of it as just a MovieClip.

So, to load an image named “image.jpg”, first you need to create the Loader object. In the first frame of your timeline:

var loader:Loader = new Loader();

Now you need the url of the image to load it. The Loader object has a load() method that takes a URLRequest parameter. It’s just a class that handles url’s very well. Heh, I don’t really know much about it, you could read more of it in documentation.

var imageUrl:URLRequest = new URLRequest("image.jpg");

Now that we have our Loader object and our URLRequest, we could now load our image. It’s just simply calling the load() method of Loader and passing our URLRequest as argument.

loader.load(imageUrl);
addChild(loader);

After loading and adding it to the stage, you could do anything with it as you please.

loader.x = 50;
loader.alpha = .5;

Of course, you would want to have preloading for this kind of stuff. And yes, the Loader object generates similar events to the MovieClipLoader object we so loved in AS2. But all this happens very differently in AS3. All the information about the object being loaded is being held by a LoaderInfo object inside the Loader object.

So here is the code that traces the amount of kilobytes loaded adds the Loader object to the stage if loading is completed.

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loading(e:Event):void{
trace(loader.contentLoaderInfo.bytesLoaded);
}

function loadComplete(e:Event):void{
trace("loaded");
addChild(loader);
}

Hope this post helps others who are still starting to move to AS3. A lot has changed between the two, but AS3 is definitely the better one.

Practical PHP Progamming – Wiki eBook

I have a lot of goals this summer vacation. And one of them is to learn basic PHP. Right now, I don’t really see any need for it, given my current web experience, but I guess it would be a very useful skill to have.
So here is the eBook I am reading to learn PHP. Very comprehensive, and easy to understand.