HTML5 animation - one step closer

Remus Stratulat - Wednesday, June 29, 2011
And is from Adobe. Yes, there is a new product just around the corner called Adobe Edge. Quoting from Adobe Labs:
an upcoming tool for creating smooth motion and transitions for screens of all sizes, utilizing the latest web standards like HTML/HTML5, JavaScript and CSS. Highlights include:
  • Visually create motion content in an easy to use, timeline-based interface
  • Create new compositions from scratch, import and energize web graphics, or add motion to existing CSS-based HTML layouts.
  • Trust that your content works reliably on desktops as well as devices.
There is also a video preview of the tool on the preview page and is does look impressive.

Van Halen and media targeting.

Remus Stratulat - Monday, May 23, 2011
First I will start by saying that Van Halen has nothing to do with media targeting. However this idea come to me while listening one of their songs. The story begins with me having a small problem with my American Express card so I called their customer service to fix it. I have talked for a couple of minutes with some very nice guy there trying to help me and he needed to put me on hold to find out something from one of their department. And then it happened. The "elevator music", the dreadful "on hold - wait for us" music was actually a very nice surprise for me - Van Halen. I was literally blown away. This was the best experience ever I've had staying on hold on a phone. And then I thought, I am a rock fan and that music was a perfect match for me. I could have stayed without problem half an hour at the phone listening to rock. What if everybody that is placed on hold on the phone could benefit from the same experience? What if the customer service from each company could benefit from having my profile and target me with a better selection of music? I know that what happened to me was just pure luck (on my side) but it definitely created a positive impression on my side for the American Express company. Translate this to the thousands customer that call them each day and that can be quite beneficial for their business IF they could target even 50% of the calls and provide the right music.  

Adobe SiteCatalyst extension is back and is.. simple.

Remus Stratulat - Friday, December 17, 2010
The latest version (1.2) of Adobe SiteCatalyst extension for Flash Pro was just released. The first major change that can be seen form the beginning is a new screen just after the login. [caption id="attachment_308" align="alignnone" width="261" caption="Simple Tracking"]Simple Tracking[/caption] This first screen will present two options: Simple Tracking and Custom Tracking. The Custom Tracking is the previously available way to track Flash applications. This version of the extension, adds a new simpler way for those that just want to track something fast and do not need customization. This Simple Tracking will allow for three simple tagging workflows. 1. Tagging the widget [caption id="attachment_309" align="alignnone" width="261" caption="Track widget view"]Track widget view[/caption] Just after logging in and selecting Simple Tracking from the previous screen all that needs to be done to track every displaying of a SWF is to select the report suite you need your data to be sent and check the "Track widget views" checkbox. If you enable debugging (conveniently placed on the left bottom side of the panel) you can see the following call being made by the SWF just at the beginning.
AppMeasurement Debug:
t=17/11/2010 11:36:55 5 -120
pageName=Simple application
So, this was very easy. I have now a way to be notified each time somebody views my application. And of course not only this. SiteCatalyst infers a lot of other useful information out of this request. As it can be seen, the pageName parameter is automatically filled with the widget name. 2. Tagging a frame [caption id="attachment_314" align="alignnone" width="261" caption="Tagging a frame"]Tagging a frame[/caption] Two steps are required to tag a frame view: select the frame from the timeline and click the "Add tracking" button. To have more relevant information in the SiteCatalyst reports, you can specify a label for that tag and you will know how many users reached that frame. The generated call looks like this:
AppMeasurement Debug: ndh=1 t=17/11/2010 11:48:32 5 -120 ce=ASCII ns=a......m cdp=2 pageName=Simple application::show model g=file:///C|/demo/Simple%20application.swf cc=USD s=1680x1050 AQE=1
You may notice that the pageName parameter now contains both the widget name and the frame name. 3. Tagging and object [caption id="attachment_316" align="alignnone" width="261" caption="Tagging an object"]Tagging an object[/caption] Tagging an object is as simple as tagging a frame. There are however two differences. For an object, it's instance name (in this case Cancel) will be used to identify the tag. Also for objects, a trigger event can be selected. By default the click event is selected. Running the application and pressing the Cancel button that becomes visible on frame 31 will generate the following call to SiteCatalyst.
AppMeasurement Debug: ndh=1 t=17/11/2010 11:56:21 5 -120 ce=ASCII ns=a......m cdp=2 pageName=Simple application::Cancel cc=USD pe=lnk_o pev1=Simple application::Cancel pev2=Simple application::Cancel s=1680x1050 AQE=1
The pageName parameter now contains a combination of the widget name and the button name. Also two other parameters are sent now: pev1 and pev2. This are the URL and the URL Name that are sent because this object related calls are sent as Custom Links. This simple way of tagging a SWF will be most of the time sufficient. If this is not the case, you can always go to the Custom Tracking to benefit from the full power of SiteCatalyst customizations.

Getting started with the Adobe SiteCatalyst extension for Flash Professional CS5

Remus Stratulat - Thursday, November 11, 2010
And the last piece of the puzzle:
In this tutorial, you'll learn how to add SiteCatalyst tracking to a SWF file using the features provided by the Adobe SiteCatalyst extension for Adobe Flash Professional CS5. SiteCatalyst is one of the most powerful web analytics tools on the market. It offers the ability to track visitor behavior and gather various data in meaningful reports, organized in report suites. Among these reports, statistics such as client conversion funnels, user activity, and product sales are broken down by events, such as shopping cart additions or checkouts, movie viewing statistics, and many more....
Read the full article on Flash Developer Center.

Getting started with the Adobe Test&Target Extension for Flash Professional CS5

Remus Stratulat - Tuesday, October 05, 2010
A colleague of mine has written the second article about the extensions we are creating. This one is about how a Flash developer can instrument an asset with Adobe Test&Target. You can read the article here:

Getting started with the Adobe Test&Target Extension for Dreamweaver CS5

Remus Stratulat - Monday, September 13, 2010
My article with the same title has become public on the Adobe Developer Connection site. So if you are interested in how to enable A/B testing for your site using Adobe Test&Target you can find all the details in that article. You can read the article here:

Latest Internet trends at your disposal

Remus Stratulat - Wednesday, August 11, 2010
I have written lately only about SiteCatalyst and Test&Target, specifically about the extensions created to help a Flash Pro user to easily instrument a Flash project. There is another project that is kind of related to these ones, but is all about data: Adobe SiteCatalyst NetAverages. [caption id="attachment_290" align="alignnone" width="300" caption="SiteCatalyst NetAverages"]SiteCatalyst NetAverages[/caption] So, what is this good for? First of all, in my opinion, you can use it to optimize your web site or web application to have a best look on the most popular browsers or platforms. It's a 20-80 kind of thing. Use 20% of your energy to support 80% of your market. And what better way to know what are your 80's? NetAverages offers a wide range of properties you can drill down into, like: JavaScript version, screen resolution, operating system or flash player version. It has properties for both the desktop world and mobile. However, by far the coolest feature for me is the ability to set up alerts. Do you what to know when Google Chrome reaches 10% of the market? It's just one click away: [caption id="attachment_291" align="alignnone" width="300" caption="Setting up an alert in NetAverages"]Setting up an alert in NetAverages[/caption]

Using external images with Adobe Test&Target for Flash Professional CS5

Remus Stratulat - Wednesday, August 04, 2010
Let's start this small tutorial from an empty file and three experiences created in the panel. For how to create these experiences please read the previous article: Omniture Test&Target for Flash Professional CS5 – how-to in images. [caption id="attachment_280" align="alignnone" width="300" caption="Campaign with three experiences."]Campaign with three experiences.[/caption] Having this place to start from, what it remains is to add an external image to the flash and to create variations for this image. To add an external image to your file just go in the Components panel and drag a UILoader to the stage. [caption id="attachment_281" align="alignnone" width="300" caption="Add an UILoader to the stage."]Add an UILoader to the stage.[/caption] To actually add the external image to the stage, just go into the Properties panel and change the source property to point to an image. I have used as source an image from my previous article. [caption id="attachment_282" align="alignnone" width="300" caption="Add a source for UILoader."]Add a source for UILoader.[/caption] The next thing to do is to add the UILoader to the campaign an create variations for this image. For that, just select the component on the stage and press the Include button. You can see now in the panel the image being part of all experiences. [caption id="attachment_283" align="alignnone" width="300" caption="Include the UILoader to flashbox."]Include the UILoader to flashbox.[/caption] Previewing the experiences will render the same external image for all of them. You will need to create now the variations for each of the experiences. The process simple. Open the symbol created for the UILoader when it was included into the flashbox (double click on it) and change the source property for each of the experiences. When previewing each experience you should be able to see each different image. [caption id="attachment_284" align="alignnone" width="300" caption="All three experiences have different images. "]All three experiences have different images. [/caption] The UILoader is not restricted however just to images, you can also load other SWFs.

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

Remus Stratulat - Friday, June 04, 2010
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. [caption id="attachment_261" align="alignnone" width="300" caption="Create campaign and flashbox"]Create campaign and flashbox[/caption] 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. [caption id="attachment_262" align="alignnone" width="300" caption="Create campaign and flashbox"]Create campaign and flashbox[/caption] After creating the campaign I will create two experiences that will hold the two variations I want for this ad. [caption id="attachment_263" align="alignnone" width="300" caption="Create experiences"]Create experiences[/caption] 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. [caption id="attachment_259" align="alignnone" width="300" caption="Add text to experiences"]Add text to experiences[/caption] 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" [caption id="attachment_264" align="alignnone" width="300" caption="Change the text"]Change the text[/caption] I will do the same thing with the buttons's label and with the image. [caption id="attachment_260" align="alignnone" width="300" caption="Add image to experience"]Add image to experience[/caption] 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. [caption id="attachment_266" align="alignnone" width="300" caption="Swap the image"]Swap the image[/caption] [caption id="attachment_265" align="alignnone" width="300" caption="Swap the image"]Swap the image[/caption] 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. [caption id="attachment_267" align="alignnone" width="300" caption="My campaign and flashbox on the Test&Target server."]My campaign and flashbox on the Test&Target server.[/caption] 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. [caption id="attachment_268" align="alignnone" width="300" caption="Add targeting rules"]Add targeting rules[/caption] All I need to do now is approve the campaign and I'm set.
Belorussian provided by PC

Omniture SiteCatalyst and Test&Target extensions

Remus Stratulat - Friday, April 30, 2010
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: [caption id="attachment_253" align="alignnone" width="300" caption="login "]login [/caption] [caption id="attachment_254" align="alignnone" width="300" caption="call to action"]call to action[/caption] [caption id="attachment_255" align="alignnone" width="300" caption="working environment"]working environment[/caption] Soon I will start to create some small demos to showcase how to work with this extensions on a real working scenario. Stay tuned..