PureMVC Skeleton for ActionScript projects

Posted by zedia.net in PureMVC on June 19th, 2009

I had previously done a PureMVC skeleton for Flash websites and applications, meaning that you would use the Flash IDE compiler to compile your project. Lately I have been doing more and more ActionScript projects (compiled using the Flex compiler but not using the Flex framework) because it permits the separation of big FLAs into smaller ones thus facilitating working in team. But I had no template/skeleton to start with until now.

So here it is:

PureMVC ActionScript Project Skeleton

It still uses an external preloader and I added a local Boolean so that the application knows your are testing locally and not on the sever (useful when making server call). One of the major change is the inclusion of the SharedAssetLibrary. Basically this emulate having one FLA with all graphics and MovieClip, but you actually can have multiple FLAs. When you want to add something to the SharedAssetLibrary you first add it to a FLA, set it to Export for ActionScript and then compile it to the swf folder. Then you can add it in the SharedAssetLibrary using the embed statment:

//BackgroundAsset being the name you gave it in the library
 
[Embed(source="../../../swf/Background.swf", symbol="BackgroundAssets")]
public var BackgroundAssets:Class;

Now if you want to use this in any of your views, first import SharedAssetLibrary and than you can use it like this:

var BackgroundAssets:Class = SharedAssetsLibrary.getInstance().getAsset("BackgroundAssets");
var assets:* = new BackgroundAssets();
addChild(Sprite(assets));

I included a FlashDevelop project file in there, but you can just delete it if you use Flash Builder.

Using a skeleton greatly reduce the setup time of a project, so I hope this will help you. I want to look into doing a skeleton for Flex Application, because I don’t like the skeleton that is available on the PureMVC website.

, , , ,

1 Comment


Why I have been talking so much about Google Analytics lately

Posted by zedia.net in Google Analytics on June 18th, 2009

If you take a look at my 4-5 last post you’ll notice that they are all about Google Analytics, be it Google Analytics for Flash or Google Analytics Data API. There are a couple of good reasons for that.

A new presentation

First, I’m really proud (and scared) to say that I am going to give a presentation at the InsideRIA conference in August in San Jose. The topic will be Google Analytics For Flash so I’m mostly going to reuse my presentation I did for the Montreal Flash User Group but I will adapt it for RIAs and I will add a big part on how to retrieve the data you send to Google back in your RIA using Google Analytics Data API. So I need to shape up on those topics and learn every thing there is to learn so that I can give a presentation with great content.

A new application

Secondly, I have this great idea. I wasn’t going to blog about it at first until it was done but my motivation kinda withered so I hope that by exposing it here and getting feedback I will start working on it again. What I want to do is build a rich internet application that displays Google Analytics Data in a way that makes more sense for Flash website. Flash website differs from HTML website in a lot of ways but web analytics don’t display their data while taking these differences into consideration. If we only take preloading and videos, we could have insightful data visualization that would show how many people saw which section of your video (that could be a heat map representing the timeline of the video) or how many people started the preloading process but didn’t end it. Another area that I would like to tackle is to set a standard on how to use events.

Right now there is no clear guideline on how to use events. It’s really free for all and no one is doing the same thing, so when you go in someone else reports it takes a while to understand what is going on. So I would basically be creating a set of guidelines for Events and then my application would be interpreting them differently than Google Analytics. While I’m there I could also associate events with pageviews. What is disturbing right now is that with events you can know how many people clicked on your button but it is pretty hard to see how many people actually saw the button so it’s hard to tell if your interface is performing well.

Well that my plan, the first step was to be able to connect to Google Analytics Data API using Flash on a webserver which I found out how. Now what I have left to do is create the guidelines for events and the interpret the data from Google Analytics. If you got any feedback on my idea please put it in the comments; it would really motivate me to start working on it.

, , , ,

1 Comment


How to connect to Google Analytics Data API in Flash

Posted by zedia.net in ActionScript 3 on June 5th, 2009

In one of my previous post, I explained how to connect to Google Analytics Data API in AIR. The problem with that way of connecting was that it only worked in AIR. In Flash it works locally, but as soon as you put in on your web server it stops working. Not it is cool to build an AIR (desktop) application that pulls data from Google Analytics, but it would also be cool to build a web application that does the same thing. Well I found out how to do just that. It is a bit more complicated because it involves a bit of server side coding, in this case PHP.

How the process works is that first you login to Google Analytics, Google will then send you a token that you must use when asking for data. So we will have two simple PHP files; one to login in and one to ask for data.

The first one looks like this:

<?php
//this file is called get_token.php
$user = $_REQUEST[user];
$pass = $_REQUEST[pass]
 
require_once 'curl.php';
$curl = new Curl;
$response = $curl-&gt;post('https://www.google.com/accounts/ClientLogin', array(accountType => "GOOGLE",  Email =>$user, Passwd => $pass, service => "analytics", source => "zedia-GAStats-0" ));
$tempArray = explode("Auth=", $response);
?>
<root>
	<token><?php echo ($tempArray[1] ); ?></token>
</root>

The second one looks like this:

<?php
//this file is called call_ga.php
require_once 'curl.php';
$url = $_REQUEST["url"];
$token = $_REQUEST["token"];
 
$curl2 = curl_init();
curl_setopt($curl2, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl2, CURLOPT_HEADER, "0");
curl_setopt($curl2, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($curl2, CURLOPT_URL, $url);
 
curl_setopt($curl2, CURLOPT_HTTPHEADER, array('Authorization: GoogleLogin auth=' . $token));
$response2 = curl_exec($curl2);
echo ($response2);
?>

As you can see to make my calls to Google I am using the cURL library that is usually already installed on your server if you have PHP. Also for the get_token.php I am also using the Curl class, made by Sean Huber, that just makes it easier to work with cURL.  Upload these files to your server. Now that we have the server side figured out, we can move on to the Flash part;  here it is:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.text.TextField;
 
public class Main extends Sprite
{
  private var loader:URLLoader;
  private var _loader2:URLLoader;
  private var _textField:TextField;
  private var _token:String;
  private var _buffer:String = "";
  public function Main():void
  {
    loader = new URLLoader();
    loader.addEventListener(Event.COMPLETE, _onTokenLoaded, false, 0, true);
   //this call will load the token
 
    loader.load(new URLRequest("http://www.YOUR_URL_WHERE_THE_PHP_RESIDE.net/get_token.php?user=YOUR_USERNAME&pass=YOUR_PASSWORD"));
 
    _textField = new TextField();
    _textField.height = 300;
    _textField.width = 300;
    _textField.multiline = true;
    _textField.wordWrap = true;
 
    addChild(_textField);
  }
 
  private function _onTokenLoaded(event:Event):void {
    var tempString:String = String(loader.data);
    tempString = tempString.substring(1, tempString.length);
    var tempXML:XML = XML(tempString);
    _token = tempXML.token;
 
    _textField.text = _token;
 
    _loader2 = new URLLoader();
    _loader2.addEventListener(Event.COMPLETE, _onFeedLoaded, false, 0, true);
 
    var request:URLRequest = new URLRequest("http://www.YOUR_URL_WHERE_THE_PHP_RESIDE.net/call_ga.php");
    var urlVar:URLVariables = new URLVariables();
    urlVar.token = _token;
    urlVar.url = "https://www.google.com/analytics/feeds/accounts/default";
    request.data = urlVar;
 
    _loader2.load(request);
  }
 
  private function _onFeedLoaded(event:Event):void {
    _textField.text = String (_loader2.data);
  }
 }
}

What you basically do is that you use your server to do all the communication between the Flash and Google. Everytime you will want a different feed to get different data you will call the call_ga.php file. It is that simple. If you have any question on this feel free to ask them in the comments.

, , , , , ,

3 Comments


My Google Analytics For Flash presentation slides

Posted by zedia.net in Google Analytics on June 2nd, 2009

Last Thursday I did my presentation on Google Analytics for Flash for SWFMontreal and it went really well. I learned 2 things while doing it. First that I should practice presenting out loud before doing my real presentation because it just better than practicing in my head. Secondly that a bomb threat in the Montreal metro can really decimate the audience. As a matter of fact, since there was the previously mentioned threat, the attendance to the user group was greatly reduced (15 people instead of 50). That was sad, but there was nothing I could do. I still wanted to post my slides so here they are.

Google Analytics For Flash

On the same note, I received my copy of the Flash & Flex developer’s magazine where my article on Google Analytics For Flash was published and it feels very nice to see my own work in paper. They forgot to put my bio where I mention this blog, but I think they will fix this on my next article on TubeLoc. Can’t wait to see it.

Here is the verbatim from my slides

Google Analytics For Flash – Presentation Transcript

1. Google Analytics for Flash
2. Dominic Gélineau Flash developer Analytics, Animation, SEO dgelineau@gmail.com Blog: www.zedia.net Twitter: http://www.twitter.com/zedia WE ARE HIRING aubrey@twistimage.com
3. Why care about analytics? Because it’s cool To provide data to your clients on the impact of what you are doing To give you feedback on the effectivness of your work
4. Why Google Analytics? It’s free It’s widely used It has a concept called event It now has a library just for Flash
5. Basic concepts about web analytics PageViews Events
6. PageViews The PageViews model is based on the HTML version of a web page The real idea behind a pageView is NAVIGATION In HTML this is sent automaticaly every time the user changes or refresh the pageIn Flash we have to do this manually We should try and keep the same syntax as HTML for consistency
7. Events The real idea behind events is INTERACTION Whenever you want to track something that is not related to navigation you should use an event. In Google Analytics Events are not enabled for all profiles http://code.google.com/p/gaforflash/wiki/EventTrackingRequ est
8. Google Analytics for Flash Library http://code.google.com/p/gaforflash/ Just search Google for «Google Analytics for Flash»
9. How to install it Flex and Flash CS4 can import SWC Flash CS3 can’t Download the library from SVN Put the SWC file in this folder: C:\\Program Files\\Adobe\\Adobe Flash CS3\\language\\Configuration\\Components Macintosh HD:Applications:Adobe Flash CS3:Configuration:Components
10. Sample Code import com.google.analytics.AnalyticsTracker; import com.google.analytics.GATracker; var _tracker:AnalyticsTracker = new GATracker ( main, “UA-7777777-7”, “AS3”); _tracker.trackPageview(yourSectionName + “/”);
11. More on Events _tracker.trackEvent(“English”, “Client Quiz”, “Question 3”, value); Category, Action, Label, valueOnly the two first are mandatory Value is an integer No standards, no real guidelines
12. 2 Modes: AS3 vs Bridge The library can work in two modes, AS3 or Bridge. Each of them has there advantages.
13. AS3 Mode Stand Alone mode Doesn’t require javascript Usefull for full Flash website Usefull when you don’t control the HTML that wraps the swf like for widgets or games
14. Bridge Mode var _tracker:AnalyticsTracker = new GATracker (main, “window.PageTracker”, “Bridge”); Integrates better when the Flash part of a website is minor Enables more of the Google Analytics API like E-commerce allowScriptAccess = always
15. Visual Debug var _tracker:AnalyticsTracker = new GATracker (main, “UA-7777777-7”, “AS3”, true);   One of the coolest features of GA for Flash Permits you to see in real time what is being sent to Google Clear advantage over the old way, which was to wait 3 hours and check to see if everything worked
16. Visual Debug Screenshot
17. What should you track Too much is like not enough Tracking errors is really helpful
18. One draw back The library will add 40k to your project Might not be the best thing for all project Like banners
19. Links  Google Code – http://code.google.com/p/gaforflash/  Developer group – http://groups.google.com/group/ga-for- flash?pli= 1  Adobe Max presentation on GA for Flash – http://tv.adobe.com/#vi+f15385v1040
20. Questions?
21. Thank you Dominic Gélineau dgelineau@gmail.com www.zedia.net http://www.twitter.com/zedia

, , ,

1 Comment


How to connect to Google Analytics Data API in AIR

Posted by zedia.net in AIR on May 21st, 2009

I had a bit of trouble doing just this a while ago, ended up trying many different ways and finally a reader of this blog, Nakamachi, gave me the solution. Because I think many of you are trying to connect to Google Analytics Data API ( or any Google APIs for that matters) I will give you here my solution. My solution only works in AIR; I don’t know why, but as soon as I put it on the web, it stops working. I have found a solution for that problem too but I will keep it for another post.
Here is how you can connect to GData:

import org.httpclient.HttpClient;
import com.adobe.net.URI;
import org.httpclient.events.HttpResponseEvent;
import org.httpclient.events.HttpRequestEvent;
import org.httpclient.HttpRequest;
import org.httpclient.http.Get;
import org.httpclient.events.HttpDataEvent;
 
var _firstBuffer:String = "";
var _secondBuffer:String = "";
 
//this first connection will get the authorization token by sending the user name and password for Google Analytics
function submitForm(email:String, password:String):void {
  var client:HttpClient = new HttpClient();
  var uri:URI = new URI("https://www.google.com/accounts/ClientLogin");
  var variables:Array = [{name:"accountType", value:"GOOGLE"}, {name:"Email", value: email}, {name:"Passwd", value: password}, {name:"service", value: "analytics"}, {name:"source", value: "your-application-identifier"}];
  client.listener.onData = _onFirstData;
  client.listener.onComplete = _onLoaderComplete;
  client.postFormData(uri, variables);
}
 
function _onFirstData(event:HttpDataEvent):void {
  _firstBuffer += event.readUTFBytes();
}
 
//this second connection will request information to GData
//in this case account info for Google Analytics by
//putting the auth token in the header of the request
function _onLoaderComplete(event:HttpResponseEvent):void {
  var tempArray:Array = _firstBuffer.split("Auth=");
 var  _authToken:String = String(tempArray[1]);
 
  var client:HttpClient = new HttpClient();
  var uri:URI = new URI("https://www.google.com/analytics/feeds/accounts/default");
  var request:HttpRequest = new Get();
  request.addHeader("Authorization", "GoogleLogin auth=" + _authToken);
 
  client.listener.onData = function(event:HttpDataEvent):void {
    _secondBuffer += event.readUTFBytes();
  }
  client.listener.onComplete = _onSecondLoaderComplete;
  client.request(uri, request);
}
 
function _onSecondLoaderComplete(event:HttpResponseEvent):void {
  trace (_secondBuffer);
}

As you can see in order to circumvent the Authorization header restriction I am using the as3httpclientlib library which requires the as3corelib and as3crypto libraries to compile. Using the same principle you should be able to connect to Google APIs from your AIR application.

, , , , , , , ,

4 Comments


My take on decompiling SWF

Posted by zedia.net in Personal on May 12th, 2009

I didn’t read (or listen, I don’t remember if it was a video) Lee Brimelow article on decompilation but I know he his not against it. In the same way, I also believe decompiling other’s work is a positive thing. I remember doing my first webpage (html) and to add cool stuff to it (nice javascript and strange html tags) all you had to do was to right click, choose view source and apply it in your context. Back then you were on your own, but what you would learn there you wouldn’t forget because you worked to extract the knowledge from the cryptic code. What you learned was then added to your toolbox; you could build better webpages. The entire internet grew from the view source feature.

I believe it should be the same with Flash. Every day you can see an awesome piece of creativity if you go to theFWA.com; sometimes you know how it is done, sometimes you don’t. This is the time where you should reverse engineer the work. Learn how they did it, how they solved certain problems. You should do so, not to replicate the piece, but to make it your own. Mix it with what you already know or give it a new twist; do something even better. That is how you should pay back.

The community, platform (Flash) would grow from this. People would start decompiling your work and even better pieces would be created. In the end, we would all win from this. Better creations means more confidence in the platform, more money invested into it (Adobe, web agencies) and more jobs.

If you think individually, you’ll only see the bad sides of decompiling, but if you open your mind and have a broader view, you’ll understand the benefits.

, , , ,

6 Comments


Connecting to Google Analytics Data Api using AS3; my failures

Posted by zedia.net in AIR on May 4th, 2009

EDIT:
Finally I turned my failures into success you can read it here:
How to connect to Google Analytics Data API in AIR
How to connect to Google Analytics Data API in Flash

These past three days I have spent my time trying to connect from an AIR application to Google Analytics Data Api and I have failed. Sometimes you just admit to yourself thatwhat you want to do is just impossible. The problem is that I know it is feasible, Desktop Reporting is doing it with their AIR application called Polaris. Now all I think about is how I can solve this problem. In this post I’m going to show what I tried in order to accomplish this so that it might help others or that others can help me.

The big obstacle at the root of my problem is the fact that you can’t set the Authorization header in ActionScript which is required to make request to the Google server to get data. Here is how I found out about this:

var request:URLRequest = new URLRequest("https://www.google.com/analytics/feeds/accounts/default");
 
request.method = URLRequestMethod.GET;
var tempHeader:URLRequestHeader = new URLRequestHeader("Authorization", "GoogleLogin auth=" + _authToken);
request.requestHeaders = [tempHeader];
var  _secondLoader:URLLoader = new URLLoader();
_secondLoader.addEventListener(Event.COMPLETE, _onSecondLoaderComplete, false, 0, true);
_secondLoader.dataFormat = URLLoaderDataFormat.TEXT;
_secondLoader.load(request);

This resulted in the following runtime error:

ArgumentError: Error #2096: The HTTP request header GoogleLogin auth=DQA … -lQ
cannot be set via ActionScript

From that point on I was aware that you couldn’t set the Authorization request header even thought you see misleading information around the web that doesn’t help. My next try was using HTTPService from the Flex library here is what I tried:

gService.url = "https://www.google.com/analytics/feeds/accounts/default";
 
gService.headers["Authorization"] = "GoogleLogin auth=" + _authToken;
var token:AsyncToken = gService.send();
token.addResponder(new Responder(onResponse, onFault));

This ended up with the same result (obviously).

My next try was using the as3httpclient library which I did in this way:

var client:HttpClient = new HttpClient();
var uri:URI = new URI("https://www.google.com/analytics/feeds/accounts/default");
var request:HttpRequest = new Get();
request.addHeader("Authorization", "GoogleLogin auth=" + _authToken);
 
client.listener.onData = function(event:HttpDataEvent):void {
trace (event.readUTFBytes)
};
client.request(uri, request);

This seemed to work a bit better but it always traced “200″ and not the xml feed it was supposed to return.

So I am at this point very frustrated because I am not able to do something I know is feasible. I have other step I can take in my project and I have some not very optimal way of getting the data, but I have a very bitter taste left in my mouth.  If anyone can help me with this, it would be really appreciated.

, , , , , , , , ,

8 Comments


My review of FITC Toronto 2009

Posted by zedia.net in Personal on April 30th, 2009

Well I’m on the train (not anymore) and I have 5 hours to kill so I thought I might use this time to write my recap of FITC Toronto 2009. In a general way, I liked this iteration of the festival more than last year. I think that my choice of presentations had a lot to do with it. Looking back, there are sessions I would have changed in my schedule but since they were filming most of the presentations I can just go and watch those that I heard good feedback from. The downside of this year was that I was alone so I kinda not fulfill the Connect part of the festival mission (Inspire, Educate, Challenge, Connect) but I will work on that next year.

What I learned

Here is interesting stuff I wanted to share:

  • I really liked the presentation from PowerFlasher (makers of the FDT tool to write ActionScript). It gave insights on their creative process and how they deal with in-house projects. They said they would put the presentation on youtube so I will point it out when it is there.
  • GAIA Framework: I wasn’t convinced before the presentation. Now I would like to try it out on certain type of project. What convinced me: the fact the it handles SWFAddress for you. I like SWFAddress a lot, but sometimes I would like it to be a physical object so that I could throw it out the window.
  • Joshua Davis is an awesome presenter. If you get the chance to see him talk, seize it.
  • I chose a couple of business presentations and they were probably not the best choices to make but I still got a couple of usefull links out of them:
    • IconBuffet : Nice for Icons but also nice to know that they are made by Firewheel Design and given freely; nice way to get known.
    • CoComment : Nice way to track your conversations, will definitely try it out.
    • 37 signals : Heard so much about them that I should probably at least follow their blog
    • BaseCamp : An online application to manage projects, made by 37 signals
    • HARO : Help a reporter out : a nice way to get your name out there by helping a reporter and getting quoted
  • VizualPV3D : Layout tool for Papervision3D that looks great. Can’t believe it was done by only one dude: Gary Stasiuk.
  • Finally Colin Moock’s presentation held a couple of gems. First he his starting a company called User1 that will offer and develop the union platform which will facilitate the production of multiuser applications be it on the web or the desktop. Also he teamed up with MegaPhone, a company that provides  a framework to manipulate any screen using any phone. I foresee lots of new marketing opportunities.

On a personal note

I own a HP mini 1000, one of those new netbooks. It’s a pretty nice netbook: it has a 10 inch screen, but I believe I need more than that. 10 inch is good for writting and browsingthe web, but not that good for coding. I really hope that they will develop folding LCD soon so that the laptop can stay small but the screen can get bigger.

Lastly, being in Toronto made me realize how much I like Montreal. More trees, smaller streets, no tramway; it’s just warmer. The only other city that compares (and that I have been to) is Amsterdam. I think Montreal deserves its own Flash conference.

, , , , , , , ,

4 Comments


An update on Flash SEO

Posted by zedia.net in SEO on April 27th, 2009

I was just in Jim Corbett Flash Player Internal v2 presentation at FITC and I learned a couple new facts about SEO that I wanted to share.

First, it now seems that Google will be indexing loaded files; that was intented for a while and I will still have to make some experiments to see if it really works but Adobe says it works. Well it doesn’t really work like they would want it to work: when Google sees that the SWF is loading a file, it doesn’t load it in the currently playing Flash file but it makes a note of it and will load and reference that content later. The text in there will still be associated with the previous url, but it won’t play in the right context. That last caveat doesn’t bother me much; my biggest concern was that all the work I do is preloaded by an external preloader, so none of my content was Flash SEO friendly. Now it will get indexed.

Another interesting fact that was kinda hinted in the presentation was that the SEO Flash player is not suppose to index text when it is out of bound of the stage; when the user doesn’t see it. But, if you put a button outside of the viewable area and that button will bring the SWF in a state where text is displaying on the stage(viewable), that text will be indexed. The problem is that the headless player doesn’t check if the button is viewable or not. This is not confirmed and I will also have to make tests on this.

Well I have to get back in there now.

,

No Comments


Transition to tile: third RIA for Home Depot

Posted by zedia.net in Twist Image, Uncategorized on April 22nd, 2009

Yes this is the third installment of tools we did for the Home Depot and I can say that working on this one was just simple and easy, mostly because we used PureMVC on the previous one. As you can see, Transition to tile reuse a lot of components from Redefining floors, but the middle part is really different. Making the changes and adjusting what was already there really was a breeze and that is were you see the advantages of using a framework. The technologies we used were mostly the same as the one before but I am going to list them here again:

  1. TweenLite
  2. PureMVC
  3. SWFAddress
  4. SWFObject
  5. Alcon (for tracing SWFAddress stuff)
  6. Google Analytics for Flash

I hope you like the tools we are building for Home Depot because there is more in the pipeline.

, , , , , ,

No Comments