Tuesday, December 9, 2008

ZSorter - Bunny Squad Cards

View SWF

Download FLA
CJLibrary CS4

What would you do if you want to create a simple 3D carousel effect like this?
Use Papervision3D you say?
I would say it's a waste of CPU resource.

For simple 3D effects such as the example above,
using more light-weighted Z-sorting engines would be a better idea.
So I wrote my own ZSorter class which does just that,
implementing the easiest Z-sorting algorithm: The Painter's Algorithm.

Monday, December 8, 2008

Flag Distortion

View SWF

Downlaod source
CJLibrary CS4

I've added a wind effect to my Fenozix physics engine.
Combined with DynaShape, I created this flag distortion effect.
The principle behind this is rather simple:
I created the nodes and the spring links among them with Fenozix.
Then I visualized the flag through DynaShape.drawTriangles().

Wednesday, November 26, 2008

Fenozix physics engine

View SWF
Download source

I've written a simple 2D particle physics engine called Fenozix.
It can simulate gravity and spring constraints.
Used in company with DynaShape, some interesting visual effects can be done at ease.

The example above is a simple demo of combining Fenozix and DynaShape.
There are invisible nodes hung between two draggable nodes.
And these invisible nodes are used as control points for curves.

Sunday, November 16, 2008

CJLibrary CS4

Go to the CJLibrary CS4 project homepage

I've done some tweaks to my CS3 library in order to fit it in CS4.
(mainly doing performance-related adjustments, such as using Vector instead of Array)

After realizing there sure are many classes in the library,
I've decided to upload the library to an SVN repository for maintenance convenience.
Also, my Emitter and PBJ2AS projects are now a part of the CJLibrary CS4 project,
meaning that there'll probably be no more updates and available downloads for these two projects.

And I thought I might well as share this library with everyone.
Thus, I've opened a Google Code SVN repository to store this library.
So if you're interested, please drop by and play with this library.

Hope you'll like it :)

Saturday, November 15, 2008

Smooth curves

View online

Download source

It's been always a pain to me trying to add smooth curving functionality to DynaShape.
Thanks to Andy Woodruff's tutorial, now it's no more a problem.
Now DynaShape can handle both line segments and curves drawing.
Enough said, just check out the example!

Monday, November 10, 2008

new MotionBlurFilter()

How tempting is it to apply a custom filter easily as in the illustration above?
With the help of the PBJ2AS API, it's now possible!

Go check it out at my new PBJ2AS project homepage!

Saturday, November 8, 2008

MotionBlur filter

View online

Download source
(You'll need the latest release of FlashDevelop 3 to open the project)

As you all know, the BlurFilter in Flash can only do horizontal and vertical blur.
This MotionBlur Pixel Bender filter can do blur of all angles.
I used only 5 levels of blur in the filter for Flash Player efficiency consideration.

Actually the same effect can be done completely using the original BlurFilter.
All you have to do is use BitmapData.draw() to take a "snapshot" of the rotated image.
Then apply a BlurFilter on the BitmapData.
Finally, use another Bitmap.draw() to take a snapshot of the "righted" blurred image.

Friday, October 31, 2008

The Carnivorous Bunny screenbomb!!

Download fullscreen version

Watch SWF online

I've got no idea why I made this...
guess I was bored and it's Halloween!!

Friday, October 24, 2008

The Infinite Whack-A-Bunny Game

Play online

Download EXE & source

I demonstrated how to make a simple whack-a-bunny game in my own private Flash workshop.
I promised my friends when I got home I'll upload the source file.
But I thought the original game I made during the workshop was too simple and doesn't look quite good.
So I decided to remake the entire game from scratch.

I used my own Emitter particle engine and Jack Doyle's TweenLite engine.
This was made within 30 minutes, cheers~

Remember to turn on your speakers.
Hope you like it and enjoy :)

Tuesday, September 9, 2008

AIR Tester

Download AIR Tester

In Flash and Flex,
when you want to test your AIR applications,
you are actually testing them on ADL.

Outside of your IDEs,
if you open your .swf files,
they're opened with regular Flash Players,
which cannot execute AIR-specific commands properly.

You can choose to either run your .swf files through ADL,
or publish an AIR package then install it to test your AIR application.
I find both these two methods quite bothersome.

Thus, I decided to make this little tool, AIR Tester.
You can load your .swf through this application,
while executing AIR-specific commands without any problem.
Additionally, I've added a little screenshot function.
You can take a snapshot of your .swf movies and save them as .png files.

Or you can just use this AIR Test as a .swf "screenshot camera".
It's all up to you.
Hope you like it :)

Tuesday, August 26, 2008

XParticle - External Custom Particle

Goto the Emitter project homepage

In the new Emitter v1.1.1, there's a new class called XParticle.
You can set it as your document class.
And by following the instructions,
you can create your own external custom particle ready to be loaded by Emitter.

The latest Emitter Config Object Generator now supports XParticle loading.
So you can preview what your particle would look like while tweaking parameters.

Sunday, August 24, 2008


View online

Download source

I just tweaked this set of Emitter parameters out by ECOG.
And I found it quite interesting to use an opaque circle as particle.
It kind of creates a cel-shading-ish fire effect.

Saturday, August 23, 2008

Sakura 2

View online

Download source

This time, the SakuraFall effect is achieved not by ZContaienr but Emitter.
Emitter lacks the perspective camera functionality which ZContainer possesses indeed.
But Emitter has better efficiency in return.
I was just trying the new addChildMode property of Emitter v1.1.0.
(Yes, Emitter is updated to version 1.1.0, go to the Emitter GoogleCode project homepage to download it!!)

This new property can either be the value "top", "bottom", or "random".
"Top" means new particles are added from the top of the display list, and "bottom" means otherwise.
"Random" mode adds new particles at random depths in the display list.
So you can see some sakura petals are inbetween two blue spheres in the demo.

Emitter Config Object Generator

Download the Emitter Config Object Generator

Here it is~ the Emitter Config Object Generator!!
I found it quite time-consuming each time I tried out some Emitter effects.
Every trial-and-error requires a lot of time for re-compilation of the entire program.

Thus, I decided to make this Emitter Config Object Generator, ECOG for short (ee-kog).
You can play with the parameters for Emitter and copy a "config object" to your clipboard.
Later on, you can paste this config object code in ActionScript.
And all the parameters are set for you; isn't that simple?
ECOG surely provides an easier experience using Emitter.

So download ECOG now and have some Emitter fun!!

Saturday, August 16, 2008


View deviation

I just somehow felt like drawing the ubber-cute 7-Eleven mascor, Open chan!!
So here it is. Hope you like it.

Tuesday, August 12, 2008

CJFile - saving JPG, PNG, and TXT

Download API

CJFile is an Adobe AIR API that can easily save PNG, JPG, and TXT files with the help of the Adobe AS3 Core Library.
The picture above explains everything, I suppose.

Note that the file parameter is a flash.filesystem.File object.
And remember to import the idv.cjcat.filesystem.CJFile class.

Wednesday, August 6, 2008


Want to create effects involving changing numeric values according to mouse dragging?
Dragger is exactly the right API for such purpose.

Combined with Carousel, you can achieve something like this:

View online

Download source

Also, Dragger has an "angular mode".
You can use such functionality to create a spinner effect:

View online

Download source

Tuesday, August 5, 2008


View online

Download source

As it says in the example, this API does not change the frame rate of the Flash Player.
This means you can alter the frame rate of individual MovieClip.

Monday, August 4, 2008


View online

Download source

This is an extremely common effect.
And my recent job requires such effect,
so I decided to write an API for it.
This API is called Carousel, for it's the common name for this effect.

To use Carousel,
you have to first create a "base" Carousel object,
and then create one/some "rotating" Pony object/objects.
It's usage is pretty simple, taking a look in the souce code would help you get the idea.

Thursday, July 24, 2008

Emitter Project Home on Google Code

Go to the Emitter project home

Yep, I'm creating a project home for Emitter on Google Code.
You can find examples and source code there.

Wednesday, July 16, 2008

CJ's Workshop prototype

View prototype

Yep, it's a prototype of my personal website.
It's still a work in progress.
So far I've managed to finish the intro transition animation and three menu entry buttons.
There're gonna be five or six. I'm just showing them by simply placing them on the stage.
I'm planning to do some further refinement using Papervision3D to create a 3D menu.
So, the final outcome would be much fancier than this prototype.

I'll try to finish this if I have time.
Till then, I hope you're looking forward to the formal launch of the site as I am.

Saturday, July 12, 2008


View deviation

Ahh...it's been a long time since my last time using my dear Wacom Intuos 3 tablet.
So I must do some warm up before beginning mass CG production again.
This is Mr.Hollowpop. And down below is his first appearance.
Quite different, aren't they?

View deviation

Sunday, June 29, 2008

Another Deflector Example

View online

Download source

It's a combination of LineDeflector and CircleDeflector

Saturday, June 28, 2008

Emitter v1.0.7 - Deflectors

Ladies and gentlemen, may I introduce to you...the Deflectors!!
Yes, now Emitter supports basic deflector simulation.
Currently available deflectors are CircleDeflector and LineDeflector.
Check out the example source for details!!


View online

Download source


View online

Download source

Double LineDeflector

View online

Download source

Emitter v1.0.5 - Bubble Motion

View online

Download source

Voila!! It's bubble motion~
If you're familiar with 3DS Max...
yes, I was inspired by the bubble motion feature of its particle system.

Here's a list of related parameters for you to play with:
(you can toy with them in the example source file)

bubbleMotion: Boolean - whether to use bubble motion
bubbleAmplitude: Number - the amplitude of bubble motion
bubbleAmplitudeVar: Number - amplitude variation
bubbleFrequency: Number - the frequency of bubble motion
bubbleFrequencyVar: Number - frequency variation

Saturday, June 14, 2008


View online

Download source

Just playing around with LineEmitter and PointGravity.

Velocity Field Overriding

View online

Download source

Emitter v1.0.3 new functionality: Velocity Field Overriding (VFO)
You can now assign a vector field to be the velocity field of the emitter.
All particles' velocities will equal to the vectors corresponding to their coordinates.
Note that while velocityFieldOverride is set to true,
all gravity fields are inactive.

P.S. The velocity field used in the example is a new field class: MotorField.

Friday, June 13, 2008

FD code hint - Lazybone maker

Yep, the code hint in FlashDevelop is THAT HELPFUL.
You type down some characters in the proper order as they are in a variable/function name,
and as you can see, you get your code hint.

In the case shown in the picture above,
to obtain the code hint for finalScaleValue,
you don't have to type in manner such as f-i-n-a-l-s...
You can simply pick some characters and type them down.
In this case, I typed down the initials of each words in the variable name.

In fact, the characters required to trigger the correct code hint need not to be in the exact order.
You can just type down the characters in random order,
and FlashDevelop still gives the correct code hint.
But still, I prefer typing characters in the correct order, since it's friendly to my brain.

Nice job, FlashDevelop.
You've once more made me even lazier.

Wednesday, June 11, 2008


View online

Download source

This sure is a hell lot of missiles :)
There's that little delay between the first missile hitting the target and sparks shooting out.
The timing is perfect when viewed locally on your hard drive.
But when viewed online, it's due to the framerate limit by the browser.

Tuesday, June 10, 2008

Emitter 1.0.1 - UniBurst

Now a new functionality is added to Emitter: UniBurst.
It can spawn "ordered" particles instead of random ones.
Note that RectEmitter does not have this new functionality.
Only PointEmitter, LineEmitter, and CircleEmitter can use UniBurst.
They now have a method called uniBurst() available.

Now it's time for some example~

PointEmitter UniBurst

View online

Download source

LineEmitter UniBurst

View online

Download source

CircleEmitter UniBurst

View online

Download source

...and the last has got to be the best :)

Rainbow Ring!!

View online

Download source

Monday, June 9, 2008

Emitter 1.0.0 released

View online

Download source

Finally...the Emitter 1.0.0 API is done!!
And the source for this API is available now.

In addition to the existing LineGravity,
now a new type of gravity is available: PointGravity.
As it's name suggests,
PointGravity creates a point-like gravity source instead of a uniform one.

Don't forget to leave a thought after you've tried it :)
Any suggestions are welcome as well.

Particle Orientation - Wheel Saw

View online

Now it's possible for Emitter to make particles tangent to their velocity.
As you can see, the sparks are oriented to where they're shooting.

Sunday, June 8, 2008

RectEmitter & CircleEmitter

View online

View online

Great, now all four types of Emitter are finished~
These are RectEmitter and CircleEmitter.
Now it's time for further refinement of the Emitter API!

LineEmitter - Sprinkles & sparks

View online

Woohoo~LineEmitter is finished!
Now moving on to RerctEmitter and CircleEmitter!

And I made another demo for PointEmitter.

View online

Saturday, June 7, 2008

Emitter test

View online

Behold! It's the particle effect~
This is Emitter, the API for particle effects I'm currently working on.
It's still in early stage of development actually, but some basic functions are working already :)
In the example above, the Emitter is a PointEmitter.
I'll make other types of emitters, such as LineEmitter, CircleEmitter, RectEmitter...etc

BTW, you can choose your own asset to be used as particles,
which means using prerendered MovieClip animations are also an option.
This, I believe, can give a boost on CPU performance.

Friday, June 6, 2008

More Fader Demo - Circular Fading

View online

Download source

Finally, Fader is now complete.
When the FaderPointer's circular property is set to true.
As the FaderPointer's position increase, to a Fader, its position only goes around and around within a certain interval (Fader.endL, Fader.endR).
Thus, simply keep increasing a FaderPointer's position.
You can create a periodic effect like that of the demo above.

Thursday, June 5, 2008

Fader - crowd control with easing

View online

Download source

Fader is an API for numerical property crowd control.
What's more? It can apply Flash's built-in easing function, so as to create continuous transition effect of specific properties among objects.

Fader registers every object with a specific "position".
And its FaderPointer specifies the "center position" of transition.
Taking the poitners' positions and objects' positions into account, and easing functions as well, Fader modifies the crowd's properties at once, making a better world :)

Well, I'm not even sure if I conveyed Fader's mechanism clearly enough; just download the source and take a look at the .fla source file, you'll get the idea.

View online

Download source

Here's another test for Fader during its early development stage.
In this example I only had Fader take care of the objects' y property.

Sunday, June 1, 2008

RippleBlocks test

View online
Download source

Here's something I made with the aforementioned FlashDevelop-plus-FlexSDK-combo in my last entry.
Geeze, the compilation speed is just so amazingly fast compared to Flash IDE, which I'm pretty used to.

BTW, you'll need Flash Player 10 to watch it.

Super Flash Tool Combo!!

That's right, it's FlashDevelop plus Flex SDK!!
I found that it takes much less time to compile compared to Flash IDE, Flex Build, and even Flex SDK itself!!
And you've got all the juicy code hints from FlashDevelop; it's tasty, trust me.

Here are a few steps to help you setup your development environment:

  1. Download and install the latest FlashDevelop release.

  2. Download and unzip the latest Flex SDK nightly build.

  3. Download the Flash Player 10 beta standalone player.

  4. Run FlashDevelop, and select Tools > Settings.

  5. Select the AS3Context plugin entry on the left, then set the Flex SDK Location as the directory of your unzipped SDK.

  6. Select the FlashViewer plugin entry on the left, the set the External Player Location as your player director, and change External Player Location to External.

  7. Open a new file, select Syntax and change it to AS3.
    Save it as Test.as
    Now type in the code below:

    package {
    import flash.display.*;
    import flash.events.*;

    public class Test extends Sprite {

    public function Test() {


  8. Press ctrl + F8 to compile, and....Wow!! What have we got here?? A Flash application window pops up!!

Okay, now you've got the idea.
Hope you find this Flash tool combo useful :)

Monday, May 26, 2008

Output - console output panel simulation

View online

Download source

I modified Senocular's Output class to create this Output class.
I thought that if I could add an output panel in my game project, it would be more convenient for debugging.

As for the background with the smiling flower and bunny bee...I just felt that using backgrounds other than plain white would be more entertaining.