Pixel Bender Explorer: Bending Ext AIR Apps
Pixel Bender is an exciting new technology by Adobe which brings video and image processing capabilities to the flash runtime. It allows you to create and apply filters to ‘bend’ pixels and create compelling animations which have never been possible in an HTML environment. Because Adobe AIR uses flash to load any HTML content, we can leverage these powerful filters on a standard Ext Application in the AIR environment. Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.
Pixel Bender Explorer
Download and install the Pixel Bender Explorer application. Apply different filters or effects by clicking on the Filter Grid. By selecting a filter on the left hand side and adjusting the sliders you can apply live effects to the current target video, browser or image. For some of the filters we have already built some animations such as bend/flatten, waveIn/waveOut, dissolve/combine and tileIn. You can test these animations by choosing the appropriate filter and clicking the animation button above the sliders. These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.
Here is an example of bending an Ext.air.NativeWindow:
var win = new Ext.air.NativeWindow({ file: '../html/browser.html', transparent: true, chrome: 'none', width: 640, height: 480 }); win.bend();
Construction of Pixel Bender Kernels
Constructing your own Pixel Bender Effects and Animations is a multi-step process. First, you need to construct a kernel or filter for Pixel Bender. These kernels describe how each pixel should change for a single frame based on a mathematical algorithm which you implement. Kernels are written in the Pixel Bender Kernel Language and compiled with the Pixel Bender Toolkit. The language is very similar to GLSL (OpenGL Shading Language). The benefits of writing effects in this language is that are generalized to all common video hardware platforms and can be used in other Adobe Applications such as After Effects and Photoshop. There is a great article, Pixel Bender basics for Flex and AIR, created by Charles Ward of Adobe that explains the Pixel Bender language in more detail.
Using Pixel Bender Kernels
After compiling the source code of a Pixel Bender Kernel the extension will change from .pbk (source form) to .pbj (binary/compiled form). The compiled version of the kernel is the only file that we need in order to use the new kernel. After compiling a new kernel, you can place the .pbj file in the kernels/ directory of your installed Pixel Bender Explorer application and you will be able to test it after restarting the application.
Pixel Bender Exchange
There is a lively community around the creation of Pixel Bender Kernels on the Pixel Bender Exchange, most of which are under an open source license. Download a few kernels and take them for a test run in the Pixel Bender Explorer. The Explorer provides you all of the tools necessary to create your own custom animations for a NativeWindow or VideoPanel. For example, if you wanted to use the smudge filter created by Frank Reitberger as an animation you would determine the paramName that you want to change and where it should start and end along with a few other configurations.
Using the same NativeWindow as shown in the example above:
win.animFn({ paramName: 'amount', reset: true, startValue: 5, endValue: 0, duration: 1, mode: 'easeOutStrong', url: 'app:/kernels/smudger.pbj' });
Code Explanation
This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second. This will have an effect which I would name smudgeIn because it starts smudged and will eventually look normal. We are using one of Robert Penner’s Easing equations easeOutStrong. Support has been added for 15 different easing modes, which explain how fast/slow we adjust the value over time. The filter also needs to be reset at the end of animation because there is no parameter which will not affect the image. (When we set amount to 0 it will still have a slight change on the target.) Anyone who is developing Pixel Bender Kernels, I encourage you to have a parameter which reflects the unapplied state vs the fully applied state. A good example of this are the Adobe filters which use the parameter of transition (0 does nothing, 1 is fully applied).
Wrapping up
Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe’s signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.
This is going to give Air a leg up on browsers when it comes to RIAs! Sweeeeeeeeeeet.
High marks for cool factor! Let’s get cracking on some ways to “exploit” the bender!
Definitely a very cool thing, but I’m afraid I’m going to be seeing this everywhere where it’s not needed.
Something like this, while a cool use of available technologies, I find very hard to have an actual good practical use.
Take heed of “wrapping up.” Don’t overdo it!
Looks interesting. The possibilities for filter use could be endless
Great post Aaron, and nice job on the Explorer program. To add to your closing statements: I absolutely agree on using these animations and effects wisely in a way not to surprise or confuse the user. They should not only “make sense” and impress the user, but they do well as visual indicators of, e.g., something’s changed, something’s happened, or something’s wrong.
Explorer and Ext.air integration will do a great job to rapidly test these effects.
I’m really amazed. But this application is a real CPU killer. When I was testing ıt never come down from 80%.
This is an awesome read! Perfect way to start my day. I am sure Ext.air applications would become more popular now :)
Try to imagine, what such technology can bring to the online gaming world.
It would be great to see the page effect linked with an Ext.Grid paging toolbar.
This is pretty slick stuff! Nice work. I threw together a short video demo of your application at http://tinyurl.com/AirExtJSPixelBender.
Nice, but too much expensive in terms of CPU processing…
very cool!
To anyone who’s complaining about CPU cycles;
Yes. Pixel bender is very CPU intensive. As all real-time effects. Being someone who’s worked with video and created custom video sequences from scratch (see intro: http://tdg-i.com/67/ext-js-screencast-007-create-delegate-and-scope) this is a given.
Deploying effects, be it JS based or flash based, will be CPU intensive.
Quite an impressive air script!
Just tried it out, as I’m planning on getting into PB as soon as I get some more time (geddit?!). Very nice guys.
Nice stuff guys… but I found HTML 5 more promising…. I recently attended a mozilla conference and Arun demonstrated what you can do with HTML 5 video tag and some CSS (yeah CSS)…. and it was bloody awesome
https://library.mozilla.org/index.php?title=Web_Graphics%2F%2FMultimedia_(2008)
But you will have to view it on FF 3.1 minefield as 3.0.6 does not support video tag
What is Bender Can any 1 Tell me?
Some people told me that the link I posted is not working. Actually the (2008) is also a part of the URL. Here is an escaped version of the URL
https://library.mozilla.org/index.php?title=Web_Graphics%2F%2FMultimedia_%282008%29
It seems useless for me… sorry, but cannot find either one thing that will make this usefull. Uhh…
Is somewhere source code available for this example?
@elffikk – If you download the .air file you can simply rename it to a .zip and then extract all of the source code and see how the project is setup!
@All Users – complaining of high CPU Usage; check your video card and see if it is a compatible nVidia or Radeon card. Pixel Bender is implemented to try to use the capabilities of your GPU first and then if it can’t use the GPU, it will use the CPU. As you probably know GPU’s are much better at calculations for graphics processing.
prety cool
This gives me so many ideas. Fantastic work guys. Ext is always one step ahead of the competition. Great work!
I AM A NEW LEANER OF EXT JS….IT SEEMS TO BE VERY VERY FANTASTIC!!!!!!!!
q wapoooooo
Every time i come here I am not dissapointed, nice post
One other thing to consider is the time that it takes to produce a simple demo of an application with transitions, audio, etc.
With this you wouldn’t have to setup all that just to transition through different aspects of your demo.
테스트
It works, nice, but really burns up the CPU
This is very new technology…
nice apps.. im gonna try it!
Great Apps! I will try it when i have the time!
Well,just tried it.The CPU heated up pretty quick.
С кем вы разговариваете, это всё боты?
Продолжение будет?
Были бы признательны :-)
Wow very nice appearances
Интересная идея, но надо бы подумать о рекламе на сайте. По-моему ее слишком много :) Хотя, конечно – это не мое дело :)
Согласен в принципе :) Для меня это точно очень актуально :)
thank you. very nice..
wow good work!
i like it!
nice work!
I am grateful to you for this great content.
nice staff!
These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.
just to remind the code.
var win = new Ext.air.NativeWindow({
file: ‘../html/browser.html’,
transparent: true,
chrome: ‘none’,
width: 640,
height: 480
});
win.bend();
how can I tried this and related software?
yes it works.
I did it.
This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second.
win.animFn({
paramName: ‘amount’,
reset: true,
startValue: 5,
endValue: 0,
duration: 1,
mode: ‘easeOutStrong’,
url: ‘app:/kernels/smudger.pbj’
});
Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application.
Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.
It would be great to see the page effect linked with an Ext.Grid paging toolbar.
JavaScript library for building rich
Thank you my dear brother
On this post
It’s a very useful and wonderful
Best wishes you success
Nice work, thanks!
Great Work, thank u
This is very new technology…
This is pretty slick stuff! Nice work. I threw together a short video demo of your application at http://gratuitjeux.net/jeux
thank you Conran very much for your article.
it’ really helpfull.
i’m waiting for your news
Very interesting technology
Thank’s you admins my name is Mike
While it is unfortunate the studios are so hooked on remakes, we’re bound to get some good ones in the plethora of crap.
They can argue all the wnt that what they are doing is done out of respect, but that only makes them liars.
No matter what they say, it can’t change a thing
This program will very usefull to webmasters.You can download Pixel Bender Explorer’s demo.I download it and it is really facinating
win.animFn({
paramName: ‘amount’,
reset: true,
startValue: 5,
endValue: 2,
duration: 1,
mode: ‘easeOutStrong’,
url: ‘app:/kernels/smudger.pbj’
});
You can download Pixel Bender Explorer’s
I am the first time on this site and am really enthusiastic about and so many good articles. I think it’s just very good.