Omniture Test&Target for Flash Professional CS5 – how-to in images

Returning to my previous post, I have promised to continue talking about these extensions. The first one is Omniture Test&Target for Flash Professional CS5. As a picture is a thousand words, this article is a very long one .

For this demo I will use a simple add that shows an image, some text and a button to click on. My goal is to have two variations for this add, both in the same SWF and the targeting for this ad to be done using Test&Target.

Create campaign and flashbox

As you can see in the image, I am already logged in and I can choose to work on an existing campaign or to create a new one. I will create a new one.

Create campaign and flashbox

After creating the campaign I will create two experiences that will hold the two variations I want for this ad.

Create experiences

So, one variation is exactly what the ad is showing right now and I’ve called it “Local Picks”. The other variation called “Subscription” will use the same ad as a template (design and animation) but will have a different image, text and button label. The first thing I will change is the text. The text is a symbol in this case so I will go inside the symbol and using the Include button I will include the text into the Test&Target workflow, making it part of both experiences.

Add text to experiences

To have variations between the two experiences I will select the Subscription experience from the Test&Target panel, go inside the text symbol and change the text to “Subscribe to our magazine”

Change the text

I will do the same thing with the buttons’s label and with the image.

Add image to experience

When adding an image to the Test&Target workflow, the image is transformed into a symbol and a labeled keyframe is created on that symbol timeline for each experience present into the panel. To change the image for the Subscription experience I will go inside the symbol and for the second keyframe I will swap the image with a different one from the Library panel.

Swap the image

Swap the image

After this, I sync my work with the Test&Target server. By doing so, all the information necessary to present the two variations for this ad are saved on the Test&Target server.

My campaign and flashbox on the Test&Target server.

On the server, I can still edit the text present in the ad WITHOUT the need to recompile the SWF. I can create new experiences if I want to test different tag lines also WITHOUT recompiling the SWF. The only limitation is that I can not select for these experiences images that are not already embedded in the SWF, at least not in the way I have created this demo. This is possible if a Loader object is used and the experiences will hold the URL to a remote image.

I will create some very simple targeting rules for my ad: I want my site to show the Local Picks experience for all the new users arriving on it and to show the Subscription experience for all the returning ones.

Add targeting rules

All I need to do now is approve the campaign and I’m set.

Belorussian provided by PC

Omniture SiteCatalyst and Test&Target extensions

We’ve been working hard for the last couple of months, after the Omniture was acquired by Adobe, to create an integration between Omniture products and Adobe products. The result was the Omniture SiteCatalyst and Test&Target extensions.

First, a short description taken from the release notes:

• Omniture SiteCatalyst extension for Adobe Flash Professional CS5 – Visually add tracking to Flash content, directly from the creative workflow, without manually tagging each piece of content. This will dramatically shorten analytics implementation times, allowing you to focus on the impact of your creative work.
• Omniture Test&Target extension for Adobe Flash Professional CS5 – Easily create and manage Flash content variations for online marketing campaigns directly from your creative workflow, without duplicating effort or writing ActionScript code.
• Omniture Test&Target extension for Adobe Dreamweaver CS5 - Visually create and manage HTML content for online marketing campaigns, without having to write HTML code.

And now, lets present the Flash Pro extensions using some images:

login

call to action

working environment

Soon I will start to create some small demos to showcase how to work with this extensions on a real working scenario. Stay tuned..

Cookbooks @ Adobe

Adobe has rolled out the next generation of it’s development recipes portal: Adobe Cookbooks

There are two major stories delivered with this new version:

1. Contributing has become a lot easier.
2. The prominence and recognition for community members who actively participate in Cookbooks was increased.

In detail, there is a set of new features that are making the experience more enjoyable and productive.

• Support for “topics” and “tags”.
• 17 technologies & products, including non-Adobe ones: AIR, Flash Professional, ColdFusion, LiveCycle, Dreamweaver, Flash Catalyst, ActionScript, Mobile and Devices, Video, PHP  and more.
• Improved content discoverability:
  • Search engine optimization
  • Ability to drill-down by tag, or do a full-text search
  • “data visualizer” – the Flash widget you see on the homepage, which is a fun way to explore the content and the community behind it.
  • Related articles recommended for each recipe.
  • Leader board featuring the most active and the most recent contributors, including integration with Community Help profiles.
  • A new way to pull in new recipes, called “recipe requests”: users can ask for a help on a task or topic, and receive solutions from the other members of the community.
  • Slicker design, improved performance, etc.

Adobe Developer Day in Romania

Adobe Romania is organizing a developer day in Bucharest on 19th May. More information can be found on Adobe Romania site. It is about Flex, Flash, AIR, web technologies, RIA, ColdFusion and a lot more.

You will have the chance to meet with Ben Forta – Senior Evangelist, Digby Horner – SVP Emerging Markets and lots of Adobe Romania people.

replace vs. split and join performance in ActionScript 3

In the previous article inside the source code for the regular expression tester you can find the following line:

var htmlString:String = string.split("\n").join("<br />");

I have found this in an ActionScript 3 example at one time and I remembered this as it is a nice construct. However there is another, more common way to write this:

var htmlString:String = string.replace(/\n/g, "<br />");

So I start questioning myself, which one is faster?

After running some tests the results are: split and join ~ 1100ms, replace ~ 800ms. The test was run on a generated string of 16 mil. characters. So, unless you are planning to do this operation on a large data set the difference is not that big and it does not matter which one you will use. For 100k characters both score around 15ms.

Flex Regular Expression Tester – source code

There are a lot of improvements that can be made to this piece of code and when I will get some time I will move forward with the changes. Until then I will post here the source code as it is still small and developers new to the world of regular expressions may learn something from it.

BTW, I have used Flex 4

(updated on 04.15.2009)

   1:  <?xml version="1.0" encoding="utf-8"?>

   2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

   3:      xmlns:s="library://ns.adobe.com/flex/spark" pageTitle="Flex Regular Expressions" 

   4:      xmlns:mx="library://ns.adobe.com/flex/halo" height="400" 

   5:      viewSourceURL="srcview/index.html" creationComplete="init()">

   6:      

   7:      <s:layout>

   8:          <s:BasicLayout/>

   9:      </s:layout>

  10:      

  11:      <fx:Script>

  12:          <![CDATA[

  13:          import mx.skins.spark.ButtonSkin;

  14:          private var error:String;

  15:      

  16:          protected function test_btn_clickHandler(event:MouseEvent):void

  17:          {

  18:              var restr:String = regexpInput.text;

  19:              var input:String = textInput.text;

  20:              var igstr:String = modifInput.text;

  21:              

  22:              this.error = null;

  23:              

  24:              if(restr != null && restr != '' && input != null && input != '') {

  25:                  var myPattern:RegExp = new RegExp(restr, igstr);

  26:   

  27:                  var result:Object = myPattern.exec(input);

  28:                  

  29:                  var a:String = '';

  30:                  var b:String = '<br />';

  31:                  var index:int = 0;

  32:   

  33:                  while (result != null) {

  34:                      // copy string from last match

  35:                      a += '<span>' + encode(input.substring(index, result.index)) + '</span>';

  36:                      index = result.index;

  37:                      

  38:                      // copy the matching parts

  39:                      a += '<span color="#339933">' + encode(result[0]) + '</span>'

  40:                      index += result[0].length;                

  41:   

  42:                      // create the trace string

  43:                      b += '<br /> ' + result.index + '\t'; 

  44:                      for(var i:int = 0; i<result.length; i++) {

  45:                          b += result[i] + ',';

  46:                      }

  47:                      

  48:                      if(igstr.indexOf('g') == -1) {

  49:                          a+= input.substr(index);

  50:                          break;

  51:                      }

  52:                      result = myPattern.exec(input);

  53:                  }

  54:                              

  55:                  a += '';

  56:                  resultText.content = a + b;

  57:              }

  58:          }

  59:                      

  60:          protected function encode(string:String):String {

  61:              var htmlString:String = string.replace(/\n/g, "<br />");

  62:   

  63:              return htmlString;

  64:          }

  65:          ]]>

  66:      </fx:Script>

  67:   

  68:      <s:Panel id="contentPane" width="100%" height="100%" left="0" 

  69:          title="Flex Regular Expressions" >

  70:          

  71:          <s:TextArea left="10" right="10" height="150" top="10" 

  72:              text="She sells seashells by the seashore" id="textInput" />

  73:          <s:TextInput text="(\w*)sh(\w*)" id="regexpInput" left="10" top="168" right="175"/>

  74:          <s:TextInput id="modifInput" text="ig" right="85" top="168" width="78"/>

  75:          <s:Button label="test" id="test_btn" right="10" top="168" 

  76:              click="test_btn_clickHandler(event)"/>

  77:          <s:TextArea id="resultText" left="10" right="10" top="198" bottom="10"/>

  78:      </s:Panel>

  79:      

  80:  </s:Application>

Flex Regular Expressions Tester – a new version

Some time ago I have created a Flex regular expressions tester. When I have moved my site to ICE I have decided to improve a little bit this tester and right now there is a new small Flex application that can be used to play around with some neat symbols

http://www.stratulat.com/Regular_Expressions_Flex.html

"Bended" Spaz – a practical application for Pixel Bender

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 .

Adobe AIR 1.5 is out, now we can bend some pixels.

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.

Twitter client in AIR

I am not a big user of Twitter, however I wanted to have a Twitter client installed on my laptop, just in case. And, of course , I searched for an AIR one. What I found was Spaz, a Twitter client written in JavaScript as an AIR application.

Spaz is a Twitter client for users who value free, open-source software, attractive design, and customizability.