Sandy's Forum > DistortImage@ www.zerofractal.com

Full Version: DistortImage@ www.zerofractal.com

Alejandro Gonzalez

Jun 28 2007, 10:36 PM

Hello, I just wanted to say thank you! we successfully implemented the DistortImage Class on our website's portfolio areas.

the url is http://www.zerofractal.com

We wanted to show the content as projected on a screen or on a notebook rendering. This was easily done with Sandy's class. We even added the possibility to animate a maximize which tweens the distorted image to a font view.

We had to do some tweaks to achieve image smoothing and distorion to transparent movieclips. This of course resulted in 100% CPU usage, but was easily solved not making the 3d distortion on every frame of the movie but rather on demand each time something actually changed and needed to be rendered.

Any crits and comments on our new site are welcome.

Thanks again,

Alejandro.

kiroukou

Jun 29 2007, 08:26 AM

Really clean and cool website.
Few parts are a bit heavy, but it is ok for me.

The use of the DistortImage class is nice. I see that you handle nicely smoothing especially for text input! Good work!

I'm sure that a lot of people would love to see your modifications. I didn't do that myself because I thought that anyone can adapt the idea to fits his needs after that.
And text distortion is a common problem for users here

Otherwise, I do like your website. Video is nicely integrated, no bugs here on my mac and opera with latest beta flash player

Good work !
Thomas

Alejandro Gonzalez

Jul 1 2007, 02:28 AM

QUOTE(kiroukou @ Jun 29 2007, 03:26 AM)

Otherwise, I do like your website. Video is nicely integrated, no bugs here on my mac and opera with latest beta flash player

Good work !
Thomas

Basically added smoothing (__render):
Original -> c.beginBitmapFill( texture, sM, false, false );
Modified -> c.beginBitmapFill(texture, sM, false, true);

Added Transparency:
var b:BitmapData = new BitmapData(wid, hei, true,0x000000);
var d:DistortImage = new DistortImage (Interface3D, b, 6, 6);

This had to be moved to the render frame to clear the bitmap or else the frames would add onto the previous frame giving a funky effect.

This resulted on a huge CPU usage. To avoid rendering all of the frames, i did a function which evaluates a flag on the on enter frame only rendering on demand. Also, because AS2 does not let the user change the FPS on runtime as does AS3, I made a counter that would let me render only every nth frame depending on the performance chosen by the user. It looks something like this:

CODE

//3D Rendering-------------------------------
//Tesselation
var bitRes:Number = 6;

//Activate 3D rendeing indefinitely
var render = false;

//Activate 3D rendering once next frame
var renderNextFrame = true;

//Countdown to render only nthFrame (when active)
var renderNthFrame = 0;

//State Flags
var maximizing = false;
var maximized= false;
var paging=false;

this.onEnterFrame = function ()
{
    /*
        Optimizes medium and low performance:

        FPS
        ===
        Fast      full fps
        Medium   fps/2
        Slow      fps/3

        3D Rendeing
        ===========
        Fast:     7 tesselations (original)
        Medium:     6 tesselations (okish)
        Slow:     5 tesselations (jerky images)

    */
    switch(_level0.perf){
        case 0:
            bitRes=6;
            renderNthFrame++;
            if (renderNthFrame >= 2) renderNthFrame=0;
            break;
        case 1:
            renderNthFrame++;
            if (renderNthFrame >= 1) renderNthFrame=0;
            bitRes=6;
            break;
        case 2:
            bitRes=7;
            break;
    }

    if ((renderNthFrame == 0) && (Interface3D._visible) && ((maximizing) || (paging) || (renderNextFrame))) {
        renderNextFrame = false;
        var b:BitmapData = new BitmapData(uiWidth, uiHeight, true,0x000000);
        var d:DistortImage = new DistortImage (Interface3D, b, bitRes, bitRes);
        d.texture.draw(Interface2D);
        d.setTransform(marker1._x, marker1._y, marker2._x, marker2._y, marker3._x, marker3._y, marker4._x, marker4._y);
    }
}

Once again, thanks for such a handy class.

Alejandro.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.