Remus Stratulat - On the Stre@m

I have written before about Spaz - the Twitter client I use.

Because it is written in AIR and because is open source and AIR 1.5 just got out with new interesting features, I thought, why not “bend” a little Spaz, just for fun.

I say just for fun because it was not something done after a careful consideration of the usefulness of adding this effect in Spaz.

I have used as a starting point the BlaskBookSafe application described in my previous post. The changes made in Spaz were as follows:

1. I have updated spaz/assets/air/AIRAliases.js with the last one provided by Adobe AIR SDK 1.5
2. I have copied the bender folder from BlackBookSafe into spaz
3. I have copied BenderEffect.js and Tween.js from BBS to spaz/assets/lib folder
4. I have added some small pieces of code in spaz/index.html and spaz/assets/assets/spaz.prefs.js

The added code in index.html was of course importing those two scripts added in the lib folder. We need them in order to create the effect and also to “tween” it, to transform the bend into an animation.

The code from spaz.prefs.js is a little more complicated and it creates the bend effect and starts the tween:

   1:  'window-alpha': {

   2:      setUI: function(value) {

   3:          $('#window-alpha').val(parseInt(value));

   4:      },

   5:      onChange: function(value) {

   6:          //alert(percentage+"%");

   7:          percentage = parseInt(value);

   8:          if (isNaN(percentage)) {

   9:              percentage = 100;

  10:          }

  11:          if (percentage < 25) {

  12:              percentage = 25;

  13:          }

  14:          var val = parseInt(percentage) / 100;

  15:          if (isNaN(val)) {

  16:              val = 1;

  17:          } else if (val >= 1) {

  18:              val = 1;

  19:          } else if (val <= 0) {

  20:              val = 1;

  21:          }

  22:   

  23:          /*  the bending code */

  24:          BlenderEffect.get('app:/bender/page.pbj', function(shader){

  25:              var tween = BlenderEffect.createShaderTransition(window.htmlLoader, 

  26:                  shader , 1200, Tween.effects.elasticEase);

  27:              tween.hideOnFinish = false; 

  28:              tween.start(true);

  29:          });

  30:   

  31:          window.htmlLoader.alpha = val;

  32:      },

  33:      check: function() {

  34:  .....

  35:  }

The addition was inside the onChange method for the window-alpha setting.

The reason I choose this method was to have a visual indication for changing the alpha setting from preferences. With all this in place, when changing the alpha setting for Spaz a nice effect will warp a little bit the window. I will let you to discover this as an image will not do it.

In the mean time I will send an email to Funkatron, maybe they will be interested in incorporating this in a more useful way :).

The last version of Adobe AIR is 1.5 and brings a lot new features especially through integrating Flash Player 10 and updating the included WebKit. More about this can be read on Adobe AIR team blog.

What I want to talk about is a new sample made specially to show the new capabilities of this release, BlackBookSafe. It is an HTML/JavaScript application using jQuery framework and leveraging the encrypted local database, 3d transformations and Pixel Bender effects. Indeed, with the new AIR you can “bend pixels” :).

BlackBookSafe screen

BlackBookSafe bended screen

The effect was created using the Adobe Pixel Bender available in Flash Player. And yes, I said that BlackBookSafe was created using HTML and JavaScript. You want to find out how was it done? Mihai Corlan, an Adobe Platform Evangelist wrote an article detailing exactly how this application was created in BlackBookSafe: Anatomy of an AIR 1.5 application.