ExtJS, Adobe AIR and PixelBender technology - beautiful, you can’t say anything!

Something new about ExtJS has not appeared for a long time, apparently everyone is preparing for the announced conference ( I already wrote about it ), and those that remain in cozy home armchairs will be announced by ExtJS 3.0. But today, looking at the official blog of the company, I found an interesting article . As already known, in recent versions of ExtJS they began to actively introduce support for the Adobe AIR platform, which is good news, because it is precisely the symbiosis of these two amazing tools that can give, in capable hands, of course, simply excellent results.

In Flash 10, and therefore in Adobe AIR 1.5, an interesting technology was introduced into its flash part, in fact, full control of everything that is displayed on the screen - PixelBender . Using a special programming language GLSL (OpenGL Shading Language), the developer can describe operations on pixels, while the program can be applied not only to the picture, but to any flash object, including the whole window or web page. By the way, yes, you heard right, we are talking about OpenGL, and this brings us closer to the possibility of creating serious graphical applications using only tools common for web development. If someone understands 3D, this technology is very close to pixel shaders, which are also programmed in their own languages.

And how, sorry, is it related to ExtJS? Yes, very simple! If you create a description of your own PixelBender function with the help of special tools , then you can very easily apply it to objects created in ExtJS (Ext.air. * Package). To demonstrate the collaboration of both technologies, Pixel Bender Explorer has been released , demonstrating a series of effects that apply to a video, graphic, or window created by ExtJS. You can flexibly change effect parameters and view their result in real time.
')
The effects can be completely different, in the proposed demo package there are several dozen of them, both from the production of Adobe itself and the work of other developers. It is interesting to take exactly the third of the proposed options - Demo with Browser, then a new window will be created (note, using ExtJS), in which the main page of Google will be opened. And then - next are simple, choose any effect in the list and see what happens with the window, while note that the whole window is transformed completely, and not just its contents! But even having distorted beyond recognition, the page still works, you can enter text in the window, click on the buttons and even work. This means that the operation is visual and occurs after the complete formation of the page, leaving all the functionality in place.



And an example of the implementation of this is very simple (for those familiar with Ext):

var win = new Ext.air.NativeWindow({
file: '../html/browser.html',
transparent: true,
chrome: 'none',
width: 640,
height: 480
});
win.animFn({
paramName: 'amount',
reset: true,
startValue: 5,
endValue: 0,
duration: 1,
mode: 'easeOutStrong',
url: 'app:/kernels/smudger.pbj'
});
win.bend();



What is the use of such a toolkit? Well, the simplest example is a beautiful splash-screen when starting your AIR application, although this is too superficial. The ability to flexibly manage each pixel can be used to develop various graphical applications, entertainment (albums with transitions, etc.), and what prospects are opening up in game projects just takes your breath away. So the guys from ExtJS are great, they are trying to maximize the reveal and utilize the power of the Adobe AIR platform!

By the way, there is a wonderful resource for developers, Pixel Bender Exchange, where you can download or buy the necessary filters, because this technology started its work much earlier than AIR, having been tested in such professional multimedia processing packages like After Effects and Photoshop. By the way, I really, really want to answer yes to the question - can it be done in such a way on-line Photoshop? ..