Posts Tagged ActionScript 3

How to connect to Google Analytics Data API in AIR

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.

, , , , , , , ,

14 Comments


as3Crypto and php, what a fun ride!

Actually not so fun, but I did manage (I should say we because I wasn’t alone in this). Cryptography is not my thing, eh, not everything can be your thing so I accept it. There is just too much to learn: hash functions, public keys, symmetric ciphers, etc. Want we wanted to do was to encrypt data on the As3 side and decrypt it on the php side. I was aware that there was some cryptographic algorythms in the as3corelib, but none of them (MD5, SHA-1) fitted our needs. There is another great cryptography library out there and it is as3Crypto; the problem is that it is a bit hard to get around, there is a lot to choose from. We settled on AES (Advanced Encryption Standard). After 2 hours of trying to get it to work, we found this great post on Google groups (about middle of the page). I am copying the content here to make it easier for people to find. I have to give all the credit for this post to Jason Foglia who posted his code.

Here is the As3 Class:

 
package
{
        import flash.display.Sprite;
        import flash.utils.ByteArray;
 
        import com.hurlant.crypto.symmetric.ICipher;
        import com.hurlant.crypto.symmetric.IVMode;
        import com.hurlant.crypto.symmetric.IMode;
        import com.hurlant.crypto.symmetric.NullPad;
        import com.hurlant.crypto.symmetric.PKCS5;
        import com.hurlant.crypto.symmetric.IPad;
        import com.hurlant.util.Base64;
        import com.hurlant.util.Hex;
        import com.hurlant.crypto.Crypto;
 
        public class CryptoCode extends Sprite
        {
                private var type:String='simple-des-ecb';
                private var key:ByteArray;
 
                public function CryptoCode()
                {
                        init();
                }
 
                private function init():void
                {
                        key = Hex.toArray(Hex.fromString('TESTTEST'));// can only be 8 characters long
 
                        trace(encrypt('TEST TEST'));
                        trace(decrypt(encrypt('TEST TEST'));
                }
 
                private function encrypt(txt:String = ''):String
                {
                        var data:ByteArray = Hex.toArray(Hex.fromString(txt));
 
                        var pad:IPad = new PKCS5;
                        var mode:ICipher = Crypto.getCipher(type, key, pad);
                        pad.setBlockSize(mode.getBlockSize());
                        mode.encrypt(data);
                        return Base64.encodeByteArray(data);
                }
                private function decrypt(txt:String = ''):String
                {
                        var data:ByteArray = Base64.decodeToByteArray(txt);
                        var pad:IPad = new PKCS5;
                        var mode:ICipher = Crypto.getCipher(type, key, pad);
                        pad.setBlockSize(mode.getBlockSize());
                        mode.decrypt(data);
                        return Hex.toString(Hex.fromArray(data));
                }
        }
 
}

Here is the php class:

 
<?
class Crypt
{
        var $key = NULL;
        var $iv = NULL;
        var $iv_size = NULL;
 
        function Crypt()
        {
                $this->init();
        }
 
        function init($key = "")
        {
                $this->key = ($key != "") ? $key : "";
 
                $this->algorithm = MCRYPT_DES;
                $this->mode = MCRYPT_MODE_ECB;
 
                $this->iv_size = mcrypt_get_iv_size($this->algorithm, $this->mode);
                $this->iv = mcrypt_create_iv($this->iv_size, MCRYPT_RAND);
        }
 
        function encrypt($data)
        {
                $size = mcrypt_get_block_size($this->algorithm, $this->mode);
                $data = $this->pkcs5_pad($data, $size);
                return base64_encode(mcrypt_encrypt($this->algorithm, $this->key, $data, $this->mode, $this->iv));
        }
 
        function decrypt($data)
        {
                return $this->pkcs5_unpad(rtrim(mcrypt_decrypt($this->algorithm, $this->key, base64_decode($data), $this->mode, $this->iv)));
        }
 
        function pkcs5_pad($text, $blocksize)
        {
                $pad = $blocksize - (strlen($text) % $blocksize);
                return $text . str_repeat(chr($pad), $pad);
        }
 
        function pkcs5_unpad($text)
        {
                $pad = ord($text{strlen($text)-1});
                if ($pad > strlen($text)) return false;
                if (strspn($text, chr($pad), strlen($text) - $pad) != $pad) return false;
                return substr($text, 0, -1 * $pad);
        }
}
 
?>

Now if you use the encrypt method of one you can send the data to the other one and decrypt it in the other language if you use the same key. Works like a charm. There is a mention that the key can only be 8 characters long but I haven’t tested it out.

, , , , , , , , ,

24 Comments


Date range query using SQLite and AIR

I decided I would investigate more on Dates and SQLite. As you know I had some trouble when trying to extract a date range from my SQLite database because Flash and SQLite don’t save dates in the same format.  Flash saves it in UTC format and SQLite as a Julian day.

Looking around a bit I found on the php website some information about how to do the conversion from Julian day to UTC.  All I had to do was to turn the formula around. But that didn’t work because the Date in Flash is also offested to account for the timezone of where the computer is. Once that was solved, everything worked fine. Here is a function that will do the conversion:

function UTCToJulianDay(newDate:Date):Number{
  return ( newDate.time - (newDate.getTimezoneOffset()*60000))  / 86400000) + 2440587.5)
}

The time method of Date object return milliseconds so we have to change everything in milliseconds. The getTimezoneOffset  method returns minutes so by multiplying by 60000 you get its millisecond equivalent. 86400000 is the number of milliseconds in a day and 2440587.5 is the julian day at 1/1/1970 0:00 UTC.

So using this function will enable you to use the greater than, lesser than and BETWEEN operator in SQLite when you want to search for date ranges. Here are some example of SQL query you might do:

sqlStmt.text = "SELECT * FROM main.Entry WHERE dateF >; " + UTCToJulianDay(new Date());
//this will return all entries where dateF is bigger than now
 
var date1:Date = new Date(2009, 2, 3) ; //March 3rd 2009
var date2:Date = new Date(2009, 3, 3); //April 3rd 2009
 
sqlStmt.text = "SELECT * FROM main.Entry WHERE dateF BETWEEN " + UTCToJulianDay(date1) + " AND " + UTCToJulianDay(date2) ;
//this will return all entries  Between March 3rd and April 3rd

It is that easy to do date range comparison; you just have to know how.

, , , , , ,

8 Comments


My journey into AIR

The last two weeks I got to play around with AIR for the first time. I was fun, but it was also a bumpy ride. Bumpy for the fact that I had a deadline and because it seems that every step of the way there was something that wasn’t what I expected (which I guess is normal when learning something new). What I want to gather here is some quick facts and links about what you should know to get started with AIR.

First things first, you have to be able to compile a swf using AIR APIs. I think this is fairly easy to do with Flex Builder, but I didn’t want to use it. I didn’t want to use Flash either because I forsee in the future that multiple persons could work on the project at the same time and FLAs are not that teamwork friendly. My final choice was tu do an Actionscript project using FlashDevelop. What got me confused, at first, was the fact that when you want to create such a project in FlashDevelop; it is called an AIR AS3 Projector. Well once you are past that, the rest is done for you: the folder structure and the bat files to package your application. Now you can get started.

Since it was my first AIR project, there was one thing that I really wanted to do right: the Update functionality. Since an AIR application has the ability to update itself, if you do that part right, you can make mistakes on the rest since you’ll be able to send updates later. I encourage you to read this article from Adobe Development Center on Using the Adobe Air Update Framework.  You will also need the applicationupdater.swc library that is inlcuded in the Adobe AIR SDK to use the update framework. Another quick thing about the update process is that will updating AIR will erase everything in the folder your application was installed to, so if you want to save stuff from previous version, you will have to move them first.

Because of the previous fact, you may want to know if it is the first time ever that the user open your application. Detecting that is easy once you think about it, but is not obvious when you come from a web background. What you do is check if a certain file (from your application) has  been created on the user’s computer. If it is created that means the user has started the application at least once before. If not, it means this is the first time so you go ahead and create that file and do everything you need for the first run. I have been very vague about the file, but my guess is that every application will need to move at least a config file from the installation folder, so you use that config file to do the check. More information in the help for Adobe.

The rest of what you might want to do should go smoothly: creating  a chromeless application, implementing the grag, minimize, maximise and close function is all a breeze when you consult the help files. Well I said the rest but there is still something that is not so obvious; working whit SQLite.

I am used to working whit database, before doing full time flash I also did some PHP/MySQL, but AIR/SQLite is a different beast. It is mostly details but when you add them up, it makes a pretty big bump (to refer to my previous bumpy ride). You can work synchronously or asynchronously, SQLite DATE primitive is a bit weird and you can parametrize SQLStatements. I will write another post about SQLLite optimization later.

Well that is it for now, that should help people used to AS3 find their way quickly while doing AIR development.

, , , ,

1 Comment


Tracing or tracking a uint as a Hex String in AS3

I feel guilty that I haven’t written in a two weeks but I have been working on a longer article and it seems that I am limited on the number of words I can write in a week. Anyway I wanted to make a small post about this topic because I had a bit of trouble to find how to do it. When you work with colours, the common way to write a colour is to write it a has hex string to a uint; example: 0xff0000. When you trace that uint what you will get is the base 10 equivalent which is not really readable and gives no hint about what colour it is. So to solve this problem here is a quick way to convert a uint into a Hexadecimal String for tracing or tracking purpose:

 
var myUint:uint = 0xff000; // this is the colour red
 
trace (myUint.toString(16)); //will trace ff0000;

My guess is that it will trace the number using 16 as a base.

Well that’s it for now might have more on AIR later on.

, , , , ,

10 Comments


Using Google Analytics for Flash in conjunction with PureMVC

I have been playing lately with Google Analytics for Flash and since my previous attention span (I noticed than I tend to write a lot on a topic until I find something else that interest me a lot, now is Google Analytics’ turn)  was spent on PureMVC, I thought it would be good too write a post about using the two of them together.

It is actually very easy to integrate them. All you have to do is dedicate a Proxy to Google Analytics. First go download Google Analytics for Flash (I’ll write a post later on how to import it because I found several ways). From there just create a Proxy for it like this:

package com.zedia.model{
  import flash.display.DisplayObject;
  import org.puremvc.as3.interfaces.IProxy;
  import org.puremvc.as3.patterns.proxy.Proxy;
 
  import com.google.analytics.AnalyticsTracker;
  import com.google.analytics.GATracker;
 
  public class GoogleAnalyticsProxy extends Proxy implements IProxy{
    public static const NAME:String = "GoogleAnalyticsProxy";
 
    private var _tracker:AnalyticsTracker;
 
    public function GoogleAnalyticsProxy(main:DisplayObject){
      super(NAME);
 
      _tracker = new GATracker( main, "UA-639032-8", "AS3", false );
      _tracker.trackPageview();
    }
 
    public function trackAction(action:String):void {
      _tracker.trackEvent( "my category", action);
    }
 
    public function trackLabel(action:String, label:String):void {
      _tracker.trackEvent( "my category", action, label);
    }
  }
}

What is cool with this Proxy is that it is tied with nothing, you can just go and use it in any project and all you have to do is change the package name. Also notice that for the category argument of the trackAction and trackLabel method I used the “my category” String. I live in Montreal in Canada and we have here two official languages: French and English. I have found that putting the language as a category was a good habit, but I think it is not the case for every one, so I left it as a generic String in this example.

The next thing you have to do is to register this Proxy. The best place to do so is in the Startup Command. You do so this way:

facade.registerProxy(new GoogleAnalyticsProxy(Object(note.getBody()).main as Main));

Google Analytics for Flash require a DisplayObject as his first parameter and the Startup command usually needs a reference to the Stage to pass to the ApplicationMediator. In this case the main in the notification will serve me both as a link to the Stage and as a DisplayObject.

Now we are all set, we can call upon this Proxy from anywhere in our PureMVC application. I would suggest making a Command for just that. Here is the code you would put in your Command:

//retireve the Proxy
var googleTracker:GoogleAnalyticsProxy = facade.retrieveProxy (GoogleAnalyticsProxy.NAME) as GoogleAnalyticsProxy;
 
//Use tracking with just an Action
googleTracker.trackAction("Send to Friend");
 
//Use tracking with Action and Label
googleTracker.trackLabel("Error", "Send to Friend - Incomplete form");

Well it is that easy to integrate Google Analytics for Flash with PureMVC.

, ,

5 Comments


How to reuse event functions

This is just a quick tip I picked up while working with a teamate.

I often came across the case that I would have to make a function exactly the same as the function that was called from an event listener because the function called from the listener would have an event as argument but the same function that I wanted to call but not from an event didn’t.

I had found multiple ways around that problem; I would make another function that both previous function would call or I would create only the listener function and when I wanted to call it from elswhere I would pass it an empty event that I would create just for it. Both these solution appeared unelegant to me.

That’s when I saw this in my teamate code:

// let say your listener is this
myButton.addEventListener(Event.COMPLETE, _activateElement, false, 0, true);
 
//your function looks like this
private function _activateElement(event:Event = null):void{
  //do something that doesn't require the event
}
 
//so from anywhere you can just call the same function like this
_activateElement();

By simply giving a default value of null to the argument, you can now reuse this function both in the context of an event listener and anywhere else.

, ,

7 Comments


Sending byteArray and variables to server-side script at the same time

While using the URLLoader classyou can send two types of data to the server. You can either send variables through the URLVariables or by giving a ByteArray to the data property of the URLRequest class. Here is how you would send variables:

package {
  import flash.display.Sprite;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import flash.net.URLVariables;
 
  public class URLVariablesExample extends Sprite {
    public function URLVariablesExample() {
      var url:String = "http://www.[yourDomain].com/receiveFile.php";
      var request:URLRequest = new URLRequest(url);
      var variables:URLVariables = new URLVariables();
 
      variables.exampleSessionId = new Date().getTime();
      variables.exampleUserLabel = "guest";
 
      request.data = variables;
 
      var loader:URLLoader = new URLLoader();
      loader.load(request)
    }
  }
}

If you wanted to send a ByteArray, let say to save an image made in your flash on the server, here is how you would pass the data (I’m using the coreLib to convert bitmapData to JPG format which will return a ByteArray) :

package {
  import flash.display.Sprite;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import flash.net.URLRequestMethod;
  import flash.display.BitmapData;
  import flash.utils.ByteArray;
  import com.adobe.images.JPGEncoder;
 
  public class ByteArraySendExample extends Sprite {
    public function  ByteArraySendExample() {
      var url:String = "http://www.[yourDomain].com/receiveFile.php";
      var someBitmapData:BitmapData = new BitmapData();//let say we have some bitmapdata
 
      //using the jpeg encoder from the core library
      var jpgEncoder:JPGEncoder = new JPGEncoder(80);
      var myByteArray:ByteArray = jpgEncoder.encode(someBitmapData);
 
      var request:URLRequest = new URLRequest(url);
      request.method = URLRequestMethod.POST;
 
      request.data = myByteArray;
      var loader:URLLoader = new URLLoader();
 
      loader.load(request)
   }
  }
}

The thing is, there is no actual documentation when you want to send both a byteArray and variables. As you can see in the examples, when you send variables, you set the data property of the URLRequest equal the your URLVariables, but when you send a byteArray you also set the data property equal to your byteArray. So you cannot send both type of data at the same time this way. The way I found is actually pretty simple and I don’t why others have not blogged about this (trust me I have looked for this). What you do is you set the data of the URLRequest equal to the byteArray, but you put your variables in the url String of the URLRequest. Here is some code showing it:

package {
  import flash.display.Sprite;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import flash.net.URLRequestMethod;
  import flash.display.BitmapData;
  import flash.utils.ByteArray;
  import com.adobe.images.JPGEncoder;
 
  public class   ByteArrayAndVariableSendExample extends Sprite {
    public function  ByteArrayAndVariableSendExample() {
      var url:String = "http://www.[yourDomain].com/receiveFile.php?exampleSessionId="new Date().getTime() + "&amp;exampleUserLabel=guest" ;
 
      var someBitmapData:BitmapData = new BitmapData();//let say we have some bitmapdata
 
      //using the jpeg encoder from the core library
      var jpgEncoder:JPGEncoder = new JPGEncoder(80);
      var myByteArray:ByteArray = jpgEncoder.encode(someBitmapData);
 
      var request:URLRequest = new URLRequest(url);
      request.method = URLRequestMethod.POST;
 
      request.data = myByteArray;
      var loader:URLLoader = new URLLoader();
 
      loader.load(request)
    }
  }
}

Then in your server-side script you recover the variables in the query string and the byteArray in the post part. It’s that simple.

, , , , , , ,

34 Comments


More about Google Analytics for Flash

I know I have been bad mouthing (see comments) a bit on Google Analytics for Flash, but it is mostly because I expect great things from that library and I have been wanting it for a long time. Last week I have been playing around with the API and there is a couple of findings I wanted to share with you.

First off, the library only works for Actionscript 3, which is not a big concern to me because I hope I will only be doing Actionscript 3 projects from now on. Also, when you include the library (at least in AS3 mode, haven’t tested in bridge mode) it will add about 40k to your file size. This is not so bad, but not so good at the same time. Making this smaller could make it accessible for a broader range of projects. Also I tried to import both the SWC you find on the download from Google code, but none of them would work; Flash would complain about not being able to import them. I finally circumvented that problem by checking out the source code using SVN.

Once you’re set up, one off the coolest things you can do is set the tracker to debug mode; it gives you some insights about what is going on under the hood. But for those of you who don’t want to go through all that trouble I just posted it down here:

Here is the Actionscript 3 code I used to make my test:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
 
var tracker:AnalyticsTracker;
 
tracker = new GATracker( this, "UA-639032-8", "AS3", true );
 
button1.buttonMode = true;
button2.buttonMode = true;
 
button1.addEventListener(MouseEvent.MOUSE_DOWN, _onBut1Down, false, 0, true);
button2.addEventListener(MouseEvent.MOUSE_DOWN, _onBut2Down, false, 0, true);
 
function _onBut1Down(event:MouseEvent):void{
	tracker.trackPageview("/test1");
}
 
function _onBut2Down(event:MouseEvent):void{
	tracker.trackEvent( "say", "hello world", "test", 123 );
}

In this code, the fourth parameter in the constructor of the GATracker object is the debug parameters, setting it to true will enable this view.

My main goal for making this was because I had read that in AS3 mode you could track events yet (check in the comments). So I created a new profile in my GA account for testing purpose and set all this up, but the major problem was that not all profile get event tracking activated.  Actually, I have written a post about event tracking being out, but my guess is that Google is extending the beta (Google sure does love betas) to more accounts and that mine was one of them. But even if your account has been activated for event tracking, newly created profiles won’t be activated.

So I had some test running but no way to check the results. That was true until I found this hidden gem (I am probably shooting myself in the foot right now and should keep this a secret but hey!) in the midst of the Google code website for Google Analytics for Flash : A request form to activate event tracking on certain profile of a Google Analytics account. I did so, and three days later I could see the results of my tests. Event tracking was working just fine in AS3 mode. The form says that they will accept 500 requests so you better get profiles activated if you plan on using it. But even if your account is not activated Google will still record the events; it’s just that you won’t be able to see the results until it is activated. We have some projects that fall in that category; mostly the Twist Image Holiday card : It’s a wonderful life (shameless plug). We hope event tracking gets out of beta really soon!

Well that’s about it, see you tomorrow as I try to complete this week of post every day.

, , , , ,

2 Comments


A bug nearly got me today

I spent most of today fighting this incredible bug and it nearly got me. At some point I even admitted defeat, which I never usually do. But while trying to circumvent the said bug, I found its Achilles’ heel and nailed it. It tried to bring me with it to the other side by grabbing my sanity, but I stood strong and in the end I thrived.

Seriously I was stuck all day on this problem that I couldn’t solve and it was a pretty one. I searched the web to find answers but sometimes your problem is so tricky that you don’t know how to describe it. Well describing it is already a good step into solving a problem, because you know what the problem is. Mine was that, I was handing over some SWF files to some third party and the file on their part wasn’t behaving the same way than on our side.

At first, I was thinking the problem came from their side as it was working properly on ours but I was wrong. After I thought it was a question of cache; browser and server, but that wasn’t right too. No it was way trickier than this.

I had 2 SWF files one loading the other. What I didn’t know was that they both compiled some ActionScript classes even if one of them definitely didn’t need them ( I didn’t created that thing). So in the application their was a duplication definition for those classes and the Flash player was just using one of the definition, the loader one not the loaded. The modification I needed to do was only on the loaded and I didn’t need to compile the loader so once the loaded file was inside the loader I couldn’t see the changes that was done in the duplicated classes. I really was pulling my hairs and all I needed to do was to compile the loader file.

I think that’s where experience kicks in; I sure will know when some changes don’t appear in a loaded file to look for duplicate definition of classes. Oh well I came out stronger. I don’t know if this post will help anyone but it sure got today’s frustration out of my chest.

,

4 Comments