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.

Recently, to support the testing effort for the Adobe InContext Editing, I have changed all my site to benefit from this new service from Adobe. I was pretty bored with the old design so my site has a new look also.

My site on ICE

Adobe InContext Editing is an online service, available at no charge during the free preview period. It is a RIA application combining both Flex and JavaScript to create a very useful and simple tool to be used by both content contributors and web designers.

Basically what you do is create an HTML page and add some ICE editable regions from Dreamweaver CS4. Then you go in your browser at the same page and hit Ctrl+E and voila.. you can edit that page (in the image above is my Java page after I have done just that). If you need a similar page (let’s say Ajax in my case) you just hit the “duplicate page” button and that is all (aside from additional editing of that page).