labs.hellokeita.com

What is Bezier?
Simply explaining for dummy AS programmers, is what graphics.curveTo method does.
If you want to learn more, here is the Wikipedia article.

Basically, the curveTo method uses a quadratic bézier, so you need a control point and a anchor point.
But it’s difficult to find the precise control point for a curve you want, because the control point is not inside the curve.
Also, you just can create a curve with just one control point, or if you want to use many curveTo methods in sequence, sometimes the curve doesn’t became as straight as you want.

So, I created a class that calculates the control points with multiple values bézier.
You can also get the position in this curve.

Here goes the examples. (you can click and drag the points)

This is an example using 7 positions, the start and the end anchors and 5 control points.
In the class, there’s a method that returns me an array with the approximated quadratic bézier values, so I’m using this values to draw the green line.
You see that it still hard to draw a path that you want.

This is the same example, but now the positions are inset in the curve.
Now, it became easier to create a curve line.

And here, a animation over the curve.

Sorry for lack of explanation, actually I’m in vacation now, but I wanted to post this class.
Later I’ll try to post more examples and uses.

I will try to update my svn with these classes, commented, after I came back from vacation.
So, for now, here is the source code.

Vote

Here is a simple example using the sample exposure shader that comes with the Adobe’s PixelBender tutorial.

(Moving the mouse from horizontally will change the exposure value)

Firstly, you need the PixelBenderToolkit(http://labs.adobe.com/wiki/index.php/Pixel_Bender_Toolkit).

I used the Exposure sample code from Adobe’s Pixel Bender tutorial (http://labs.adobe.com/wiki/index.php/Pixel_Bender_Toolkit:Tutorial)

[code lang="cpp"]

kernel NewFilter
< namespace : "your namespace";
vendor : "your vendor";
version : 1;
description : "your description";
>
{
input image4 src;
output pixel4 dst;
parameter float exposure
<
minValue:float(-0.5);
maxValue:float(0.5);
defaultValue:float(0.0);
>;
void
evaluatePixel()
{
float4 inputColor = sampleNearest(src, outCoord());
dst.rgb = pow(inputColor.rgb, float3(1.0 - exposure));
dst.a = inputColor.a;
}
}
[/code]

On PixelBender Toolkit, you can export it as Byte Code Filter for Flash from the File menu.

Exporting it, you will have a .pbj file to be loaded as ByteArray from Flash just like this.

[code lang="actionscript"]
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE, urlLoaderComplete);
urlLoader.load(new URLRequest("exposure.pbj"));
[/code]

And after that, creating a Shader instance, and also the ShaderFilter to be applied on a DisplayObject.

[code lang="actionscript"]
private function urlLoaderComplete(ev:Event):void
{
shader = new Shader(ev.currentTarget.data as ByteArray);
shaderFilter = new ShaderFilter(shader);
filters = [shaderFilter];
}
[/code]

Once you have the shader instance, you can change the shader parameters by doing the following.
[code lang="actionscript"]

shader.data.exposure.value = [0.5];

filters = [shaderFilter]; //re-applying the filter

[/code]

Easy huh?

Here is all the source from this little tutorial.

Enjoy.

(update. Just because Zeh said to)

One more example using the TwirlFilter created by Elba Sobrino.
Works the same way, move the mouse along the image.

Vote

Adobe launched a Flash Player 10 beta, aka Astro.

I’m just posting some links about Astro and Flash CS4 that I found. I anybody wants more info about it, just google it.

Astro release notes: http://labs.adobe.com/technologies/flashplayer10/releasenotes.html

Astro demos and videos: http://labs.adobe.com/technologies/flashplayer10/demos/index.html
Native3D sample code: http://download.macromedia.com/pub/labs/flashplayer10/sampleSource/Native3D_Sample.zip

An example using InverseKinematics (Flash CS4 new feature): http://theflashblog.com/?cat=34

Dynamic sound generation in Flash CS4: http://www.kaourantin.net/2008/05/adobe-is-making-some-noise-part-1.html
http://www.kaourantin.net/2008/05/adobe-is-making-some-noise-part-2.html
http://www.kaourantin.net/2008/05/adobe-is-making-some-noise-part-3.html

(update) And, if you want to build a Flash 10 content, you need the last nightly build Flex 3:
http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10+Beta+with+Flex+SDK+3.0.x

Vote

Well, I just made a class to change the textField selection color.
It manipulates the ColorMatrixFilter to change the colors of the unselected text, selection background and selected text.

The source is in my SVN, http://code.hellokeita.in/public/trunk/as3/br/hellokeita/utils/TextFieldColor.as

And the usage is really simple too.

[code lang="actionscript"]

var textColor:uint = 0xff0000; // unselected text color
var selectionColor:uint = 0x00ff00; // selected background color
var selectedColor:uint = 0x0000ff; // selected text color

var tf:TextField = new TextField();

addChild(tf);

var tfc:TextFieldColor = new TextFieldColor(tf, textColor, selectionColor, selectedColor);

//...
// Or Also
//...

tfc.textColor = textColor;
tfc.selectionColor = selectionColor;
tfc.selectedColor = selectedColor;

[/code]

Vote

It’s a gradient created from the corners of the square.
I was googling and I found the Diamond-Square on Wikipedia.

The idea is quite simple.
First you get the top left and bottom left corner colors of the square. Than, you get the half height of the edge and also the average color of those colors.
You repeat that until you have all pixels of the edge.

Note: The average color is not (color2 – color1) * .5.
It’s (color2.r – color1.r) * .5 << 16 + (color2.g - color1.g) * .5 << 8 + (color2.b - color1.b) * .5.

After that, you make the same with the right edge.

Than, you do it for each edge from the top to bottom.

If you work around more, you can create gradient spots from any pixel you wish easily.

Vote

Answering to CK

1.
ck said,

January 14, 2008 @ 8:07 pm · Edit

… you mentioned to use BitmapData.paletteMap() to generate a grayscale image. Until now I didn’t get this working. How did you do that?

You can convert a BitmapData to Grayscale easily without using my ColorUtils class.
[code lang="actionscript"]

import br.hellokeita.utils.ColorUtils;

...

var bmpData:BitmapData = new BitmapData(w, h);

...

var grayscaleArray:Array = new Array();
var c:Number;
for(var i = 0; i < 0xff; i++){

c = i * .3 + i * .59 + i * .11;
grayscaleArray[i] = (c<<16) + (c<<8) + c;

}

bmpData.paletteMap(bmpData, bmpData.rect, new Point(0,0), grayscaleArray, grayscaleArray, grayscaleArray);
[/code]

Vote

Actually, I didn’t show the source because I wanted to know how many people was reading it, and was interested about it… so let me reveal the little trick.

First, I create a TextField, selectable(obviously) and set the alpha to zero.
Than, create a BitmapData with the TextField size, and, just draw the TextField on BitmapData each time the selection changes.
When you draw the BitmapData, there is to ways to change the selection color, using the ColorTransform or PalleteMap methods.
After that, you just place the Bitmap behind the textField.

[code lang="actionscript"]
var color = 0xff0000;
var c = ColorUtils.getRGB(color);

highlightBmpData.fillRect(highlightBmpData.rect, 0x00000000);
highlightBmpData.draw(textField);
highlightBmpData.colorTransform(highlightBmpData.rect, new ColorTransform(1, 1, 1, 1, c.r, c.g, c.b, 0));
[/code]

One thing is that, using Color transform, you can change easily the smoothed fonts, and with PalleteMap is harder.
Just remember that the selection color is always black, so you need to change the black part of the BitmapData to any color you want.

Easy huh?

PS: weird thing is that some people couldn’t see the effect on Mac with Firefox… I didn’t try it yet, but I’ll try to find a way to make it work.

Vote

One think that I am really thankful is the addition of Regular Expression in AS3.
That’s really helping me around.

Here’s some cheatsheets that I always check:
http://krijnhoetmer.nl/stuff/regex/cheat-sheet/
http://regexlib.com/CheatSheet.aspx
http://www.ilovejackdaniels.com/cheat-sheets/regular-expressions-cheat-sheet/

Also, I uploaded my svn my StringUtils class
http://code.hellokeita.in/public/trunk/as3/br/hellokeita/utils/StringUtils.as

Actually, there’s just the trim method, but you see that’s it’s really easier than AS2.
\s|\n|\r|\t|\v <- I put all those characters to make sure every initial end final whitespace are trimmed.

Also, I uploaded my ColorUtils.as too.
You see that it's really easy to manage ARGB colors with it.
Also, there's a RGB -> Grayscale color converter.

Oh, don’t try converting a bitmapData pixel by pixel to generate a Grayscale image.
There’s an easier way to make it with the BitmapData.paletteMap() method.
but… I’ll keep it to the next post …. if anyone shows any interest.

Vote

http://code.hellokeita.in/public/

People, I’m launching my codes on public subversion repository.
It’s almost nothing there… but, how people claimed for the source (here), there is it.

Hope you enjoy it…

PS: If there’s any bug or anything I forgot, apologize me… I still don’t get much time to review my codes…

Vote