New tutorial on Flash QuickTime export

As promised, I just finished uploading a new tutorial that shows you how to export ActionScript-based animations from Flash as QuickTime video as well as how to composite them in After Effects. This work flow allows you to create some really cool motion graphics that would be extremely hard to do without using Flash. Below is the finished product from the tutorial. The music is by HECQ, who works a lot with the Ronin. Check out the tutorial at gotoAndLearn().

Lee

Flash Mathographics

While I was in Singapore I found a cool book that talks about various Math graphics theories called Mathographics. It also contains sample code written in BASIC. On the flight home I started translating some of these into AS3. The only bad part about the book is that the author leaves a lot of the work to you when it comes to trying to reproduce his graphics. Maybe I’m just spoiled by Flash books where you always have full source code available. Despite that I had a great time building some cool looking graphics, especially from the section regarding spirals.

The images above are just a sampling of the graphics I was able to create. You can download a ZIP file containing both the FLA and SWF files. By modifying the symbols used to draw the shapes you can create some really wild effects. The example below is one of my favorites and is an example of a daisy using Fermat’s spiral formula. Click on the image below to see an animated version.

This is definitely a nice book if you want to get more into generative math art. I’m surprised I haven’t seen more books like this.

Lee

My first Pixel Bender filter (SquarePattern)

Today I spent a few hours getting up to speed with Pixel Bender. It definitely has a steep learning curve but it is well worth the effort. Below you can check out my first creation called SquarePattern for lack of a better word. This filter essentially samples the current pixel as well as a different pixel and averages them out. Which pixel is dependent on the amount parameter. The result is a kind of crosshatch effect.

I was actually really excited earlier because I created a cool blur effect but I couldn’t export it to Flash because you can’t use for loops if the filter will be used in the player. Bummer! To do a blur, you essentially average a certain amount of pixels together. The number of pixels you average determines the strength of the blur. Oh well, I hope we add loops to Pixel Bender soon.

Click on the image below to see the filter in action. You must have Flash Player 10 RC installed to view it.

The Pixel Bender code is below. I will be doing a tutorial on this very soon so don’t worry if it looks scary.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<languageversion : 1.0;>

kernel QuadBlur
< namespace : "com.leebrimelow.filters";
    vendor : "Lee Brimelow";
    version : 1;
    description : "Creates a four-direction blur.";
>
{
    input image4 src;
    output pixel4 dst;
   
    parameter int amount
    < minValue:0;
        maxValue:100;
        defaultValue:0;
    >;

    void
    evaluatePixel()
    {
        pixel4 orig = sampleNearest(src, outCoord());
        float2 pos = outCoord();
        orig += sampleNearest(src, outCoord()-float2(cos(float(pos.x))*float(amount),0));
        orig += sampleNearest(src, outCoord()-float2(sin(float(pos.y))*float(amount),0));
        orig += sampleNearest(src, outCoord()-float2(0,cos(float(pos.x))*float(amount)));
        orig += sampleNearest(src, outCoord()-float2(0,sin(float(pos.y))*float(amount)));
       
        dst = orig/4.0;
    }
}</languageversion>

The ActionScript 3 code that I used to import the new shader is shown below. I left out the code for the throw slider as I’ve already shown that before.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var l:URLLoader = new URLLoader();
l.dataFormat = URLLoaderDataFormat.BINARY;
l.addEventListener(Event.COMPLETE, onComplete);
l.load(new URLRequest("squarepattern.pbj"));
   
var shader:Shader;
var filter:ShaderFilter
   
function onComplete(e:Event):void
{
    shader = new Shader(l.data);
    filter = new ShaderFilter(shader);
    image.filters = [filter];
    addEventListener(Event.ENTER_FRAME, loop);
}

function onChange(p:Number):void
{
    p *= 50;
    shader.data.amount.value = [p, p, p];
    image.filters = [filter];
}

You can download the PBJ file if you want this odd effect in your Flash movies.

Lee

ActionScript 3 Wedge Drawing Class

Here is another class that I wrote thanks to this old tutorial. This is similar to the Arc class except that it draws wedges instead. These are great for doing lightweight charting stuff. You can get the code at my Google Code repository. The example below rapidly animates new wedge shapes creating a cool effect. You can click on the image below to check it out.

Below is the source code for the above example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import com.leebrimelow.drawing.*;
import com.leebrimelow.utils.*;

var bmd:BitmapData = new BitmapData(600, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

function createArc():void
{
    var sp:MovieClip = new MovieClip();
    sp.radius = Math2.random(20, 400);
    sp.endAngle = Math2.random(130, 400);
    sp.color = Math.random() * 0xFFFFFF;
    sp.count = 0;
    sp.filters = [new DropShadowFilter(10, 45, 0x000000, 0.5)];
    sp.addEventListener(Event.ENTER_FRAME, loop);
    addChild(sp);
}

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
    var sp:MovieClip = e.target as MovieClip;
    sp.graphics.clear();
    sp.graphics.beginFill(sp.color);
    sp.graphics.lineStyle(5, 0x000000);
    Wedge.draw(sp, 300, 200, sp.radius, sp.count, 0);
    sp.count += 20;
    if(sp.count > sp.endAngle)
    {
        sp.removeEventListener(Event.ENTER_FRAME, loop);
        bmd.draw(sp);
        removeChild(sp);
            sp = null;
        createArc();
    }
}

createArc();

Lee