labs.hellokeita.com

Adobe Flash Player 10 Beta 2 Released

keita — Thu, 03 Jul 2008 19:54:51 +0000

http://weblogs.macromedia.com/labs/archives/2008/07/flash_player_10.html

http://labs.adobe.com/technologies/flashplayer10/releasenotes.html

Cannes Cyber Lion 2008 Gold

keita — Thu, 19 Jun 2008 16:11:10 +0000

My first Cannes, and also gold!

All the following awards are from Rec You.

Cannes
Cyber Gold - Interactive Campaigns

One Show
Silver - Integrated Branding Campaign / Interactive and Non-Interactive (pdf)

Clio Awards
Silver - Interactive / Innovative Use Of Technology
Shortlist – Interactive / Fresh Approach
Shortlist – Content & Contact / Personal Items

D&AD
Nomination - Online Advertising/Digital Advertising Campaign

Asia Pacific Advertising Festival
Best – Campaign for Integrated Cyber Campaign

87th The Art Directors Club
Merit – Advertising Interactive/New Media Innovation and Development

Tokyo Interactive Ad Awards
Gold – Website / Campaign website
Gold – Integrated campaign
Silver – Advertising / Banner
Nomination – Advertising / Other Interactive Ads

Congratulations for all the people involved, and also to Uniqlock for getting almost all the Grand Prix of the world.

How to use custom Shaders in Astro(Flash 10)

keita — Mon, 19 May 2008 17:04:54 +0000

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)

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.

Flash Player 10 - Aka Astro

keita — Thu, 15 May 2008 11:45:07 +0000

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

TextField Selection Color

keita — Thu, 13 Mar 2008 12:35:00 +0000

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;

My own 3d engine…

keita — Tue, 12 Feb 2008 20:13:38 +0000

Uff… long time I don’t write here…

So… what I have been doing?
Actually… nothing interesting…
Then, couple days ago I started developing my own 3d engine.
I won’t make it public because it will take all my free time that I actually don’t have…

I didn’t run any benchmarks, I think it’s more heavy processing than Papervision3d.

anyway… here is it…

Multi Gradient

keita — Wed, 23 Jan 2008 17:52:39 +0000

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.

Grayscale Converter

keita — Fri, 18 Jan 2008 18:00:33 +0000

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

BitmapData.lock benchmark

keita — Tue, 04 Dec 2007 10:22:34 +0000

Well, I don’t know if anybody read the Thomas Pfeiffer aka Kiroukou (the Sandy3D creator and project leader) commented on my previous post.
Here’s what he said.

Indeed Sandy does a clone of the original texture, for few reasons:
- avoid an unfortunate dispose call.
- allowing to have a setTransparency method to dynamically change the transparency without changing the original bitmapdata of the user.

Concerning the lock() and unclock() are you sure it has a performance impact?
as far I know, this can’t provide any performance boost since the bitmapdata isn’t attached to the flash display list. When the object is out of stage, there’s no advantage to lock it.
But I’d be interessted to have your feedback about that, and your performance test.

About the BitmapData.clone(), he got his point.
It just don’t work for me because I’m using too many 3d Objects with different BitmapMaterial for each, so, the system memory gets too high.
But, about the setTransparency method, he is right.

About the lock and unlock methods, I runned a little benchmark test, because I got curious too how much performance boost you can get.
Here’s the two test I made. (Clicking on the flash area it will re-run the benchmark test)

Using the lock and unlock methods.

Not using the lock and unlock methods.

It’s a really simple test, just to make a benchmark test.
Actually, it’s not a situation that uses any 3d framework.

Creating a BitmapData.
Creating 1000 Bitmaps.
Applying 1000 times a BlurFilter over the BitmapData.

On my PC I get about 150ms faster with locking the BitmapData.

keita

BitmapMaterial tips

keita — Wed, 28 Nov 2007 08:05:46 +0000

I was making some experiments with Sandy3d and Papervision3d and I realized some tips to increase the performance.

Firstly, with Sandy3d 3.0, when you create a BitmapMaterial, the BitmapData that you used to create the Material, is cloned to create the BitmapMaterial.texture.
So, one think you can do is dispose the BitmapData that you used to create the Material after instantiating it and also, if you want to update your BitmapData use the BitmapMaterial.texture directly.

Something like this:

var bmpData:BitmapData = new BitmapData(100, 100, true, 0×00000000);
var bmpMaterial:BitmapMaterial = new BitmapMaterial(bmpData);

bmpData.dispose();

bmpMaterial.texture.fillRect(new Rectangle(10,10,30,30), 0xffff0000);

This will not work with Papervision3d because it uses the same BitmapData instance (in my opinion, smarter).

Now for both, Sandy3d and Papervision3d.
As you make changes on your BitmapData, it’s updated on every poligon.
So, use the BitmapData.lock() and BitmapData.unlock() when you are redrawing your BitmapData texture.

var bmpData:BitmapData = new BitmapData(100, 100, false, 0×00000000);
var bmpMaterial:BitmapMaterial = new BitmapMaterial(bmpData);

redrawBitmap();

…

function redrawBitmap(){

bmpData.lock();

bmpData.fillRect(bmpData.rect, 0×00000000);
bmpData.fillRect(new Rectangle(10,10,30,30), 0xffff0000);

var blurFilter:BlurFilter = new BlurFilter(16, 16, 3);

bmpData.applyFilter(bmpData, bmpData.rect, new Point(0,0), blurFilter);

bmpData.unlock();

}