Cannes Cyber Lion 2008 Gold
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)
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
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)
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;
}
}
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”));
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];
}
{
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
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
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 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…
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
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
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
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
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);
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);
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();
}