Archive for source

How to use custom Shaders in Astro(Flash 10)

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)

<languageversion>
  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;
    }
  }

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.

var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE, urlLoaderComplete);
urlLoader.load(new URLRequest(“exposure.pbj”));

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

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

Once you have the shader instance, you can change the shader parameters by doing the following.

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

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

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.

Comments (3)

Flash Player 10 - Aka Astro

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

Comments

TextField Selection Color

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.

var textColor:uint = 0xff0000; // unselected text color
var selectionColor:uint = 0×00ff00; // selected background color
var selectedColor:uint = 0×0000ff; // 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;

Comments (1)

Multi Gradient

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.

Comments (3)

Grayscale Converter

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.

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);

Comments

Text Highlighter - the trick

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.

var color = 0xff0000;
var c = ColorUtils.getRGB(color);

highlightBmpData.fillRect(highlightBmpData.rect, 0×00000000);
highlightBmpData.draw(textField);
highlightBmpData.colorTransform(highlightBmpData.rect, new ColorTransform(1, 1, 1, 1, c.r, c.g, c.b, 0));

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.

Comments (5)

AS3 Regexp

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.

Comments (2)

Launching my public subversion

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…

Comments (5)