Jan 3

Still delving into metaballs. I implemented the suggestions in this page for optimizing, and the results are good. I could even animate it - just barely though, at ~15 FPS on my browser. :)  Again, most of this is just copy & paste from the source provided in the tutorial.

Metaballs - move your mouse around.  Click to change the target ball.

Still looking for a more elegant solution for Flash. This is done on a very small stage size, with only 4 balls. I want to do a full screen version, with at least 10 balls moving around. :P


Jan 2

I stumbled upon Metaballs yesterday, and decided it would be cool to try it out. I’ve seen some very nice examples done in Flash, but no luck finding their sources.

After Googling around, I found this tutorial on Metaballs and computer graphics.

I ported the code into AS3, but the result is not very impressive. It is very slow and processor heavy. If you click on the stage, the last Metaball added will be moved, and as you can see, it takes a bit of time to redraw them. I’m not even thinking about animating this. :P

Metaballs

I’m still looking for a more elegant solution for Flash, hopefully one that uses the Vector-based drawing API of Flash, and not BitmapData.

UPDATE: I have an updated version here. Also, I linked the image above to the updated one. For comparison, the old one is here.


Dec 27

After seeing a cool demo from the ClockMaker blog, I was inspired to try and recreate the effect. My attempt is not very impressive, but I did manage to figure out how he did it. Although much of this is from his sourcecode, I just thought I’d post a simplified version and put little comments and stuff.

And oh, Merry Christmas to all! :D

Click the image to see the movie.

Source.


Aug 19

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. :x Any help would be very much appreciated.


Jun 3

I’ve been working on my site for a few weeks now, and I have developed a class that will handle how I display assets on my site.

Basically, it “throws” in items into the stage, and you could shuffle them around or you could stack them up. I’ve made it very easy to use, and it’s still under development, but I think it’s ready to be used by others. This is my first class I’ve ever shared, and though it’s not much, I hope someone likes it or maybe even use it. ;-)

You can use any DisplayObject as the ‘items’ of the Shuffler.
There are explanations in the code, but here are some important points

  • shuffle() - shuffles the items
  • stack() - stacks the items
  • setFocusOn(item:DisplayObject) - sets the item param as the focused item
  • addItem(item:DisplayObject) - adds item param to the shuffler
  • deleteItem(index:int) - deletes the item at index
  • has max property for maximum number of boxes allowed. 0 for infinite.

    Here is an example:

    Sample usage in code:
    [sourcecode language='js']
    package{
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.*;
    import flash.text.TextField;
    import com.mindfock.ui.Shuffler;

    public class TestShuffler extends Sprite{
    private var boxes:Array;
    private var shuffler:Shuffler;
    private var stacker:TextField;
    private var shuffle:TextField;
    private var adder:TextField;

    public function TestShuffler(){
    init();
    }
    public function init():void{
    shuffler = new Shuffler(400, 300, 6);
    createBoxes(6);
    createButtons();
    addChild(shuffler);
    }
    private function createBoxes(num:int):void{
    boxes = new Array();
    for (var i:int = 0; i < num; i++)
    {
    trace("created");
    var box:Sprite = drawBox(50, 50) as Sprite;

    boxes.push(box);

    shuffler.addItem(box);
    }
    }
    private function drawBox(w:Number, h:Number):DisplayObject{
    var box:Sprite = new Sprite();
    box.graphics.lineStyle(2, 0x000000);
    box.graphics.beginFill(Math.random() * 16000000);
    box.graphics.drawRect(0, 0, 100, 100);
    box.graphics.endFill();

    return box;
    }
    private function createButtons():void
    {
    // I've left out the drawing of the buttons
    square.addEventListener(MouseEvent.CLICK, shuffleHandler);
    square2.addEventListener(MouseEvent.CLICK, stackHandler);
    square3.addEventListener(MouseEvent.CLICK, addHandler);
    }
    private function shuffleHandler(event:MouseEvent):void{
    shuffler.shuffle();
    }
    private function stackHandler(event:MouseEvent):void{
    shuffler.stack();
    }
    private function addHandler(event:MouseEvent):void{
    var newBox:Sprite = drawBox(50, 50) as Sprite;
    shuffler.addItem(newBox);
    }
    }
    }
    [/sourcecode]

    Download source

    Just save it in your classpath, under com/mindfock/ui

    You need TweenLite for the tweening animations… If you don’t know what it is, you should look into tweening engines. They will save you a lot of hard work.

    Now that I’ve got the main bulk of my site done, I hope I can finish it before classes start. :D