Posts Tagged as3corelib

Sending byteArray (image) and variables to server-side script as POST data in AS3

A couple things here, I first talked about how to send an image and variables to the server (at the same time) on this post, but it felt a bit weird, the file had no name to retrieve it and the variables were sent as GET. Now while working a with a new colleague, he showed me this code that for him was nothing but for me was amazing. It is a little library called UploadPostHelper made by Jonathan Marston back in 2007 (2007! why didn’t someone talk to me about this library before!!!).

Anyway here is a little code snippet showing how to use it:

var jpegEncoder:JPGEncoder = new JPGEncoder(85); //using the JPGEncoder from as3corelib
var jpegBytes:ByteArray = jpegEncoder.encode(myPicture.bitmapData); //encoding a Bitmap into a ByteArray
 
var urlRequest : URLRequest = new URLRequest();
urlRequest.url = "THE URL OF YOUR SERVER SIDE SCRIPT";
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
 
//now create an object with the variables you want to send as POST
var postVariables:Object{variable1Name:variable1Data, variable21Name:variable2Data, variable3Name:variable3Data}
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', jpegBytes,"filedata", postVariables); //here is where the magic happens, filedata will be the name to retrieve the file
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
 
//from here it is just a normal URLLoader
_pictureUploader = new URLLoader();
_pictureUploader.dataFormat = URLLoaderDataFormat.BINARY;
_pictureUploader.addEventListener( Event.COMPLETE, _onUploadComplete, false, 0, true );
_pictureUploader.load( urlRequest );

How easy and beautiful is that?

So can get the code for the UploadPostHelper at the bottom of this post or I have made a zip file with the .as file here.

Dude, 2007!

, , , , , , , ,

10 Comments


Prepare to Roar

If you have been wondering why I haven’t been writting a lot this summer, well it’s been mostly because of this project. I learned a great deal on Papervision3D, using the webcam, on playing with bitmaps and on Facebook connect (even if I wasn’t the one doing that part) while building this project. So here you go, create some roars:

http://www.roar4milk.ca

The goal of the campaign was to get teens involved with milk and to build on some ad spots that performed very well on MTV. So what you are doing with this application is recreating the ads but adding yourself at the end instead of the cow. Now I knowthat the site is a bit (to say the least) CPU intensive (3D tends to do this), but believe me it was worse than this before and I wish I would have had a bit more time to perfect this site.

The technical cool part is that you can use your picture, be it by uploading it or using your webcam, and using the derivate bitmap I will composite it with the cow skin and apply that to the loaded Collada model. That was kind of the premise of this site and we built around it with a vintage design. I hope you like it.

Here is a short list of librairies we used: as3corelib, TweenLite, Alcon, facebook api, google analytics for flash and Papervision3D.

Another cool feature is that you can embed your roar on your blog like this:

, , , , , , ,

No Comments


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


Gingerbread house builder – TELUS holiday 2008 card

Just a quick post, while it is still the time, to bring you to the Gingerbread house builder we did for TELUS. I think it is a pretty little piece of flash that is fun and will make you smile. As it is the costum with holiday cards, the deadline was really tight but I think we managed well. This small rich internet application is packed with features that if you don’t stop to look, you won’t notice.

First the send to friend option actually sends a picture of the gingerbread house you built which was very nice to program. I had to take a screenshot(bitmapData.draw) of the House MovieClip encode it in JPEG (using as3corelib) and send it to the server. Next nifty detail is the print version of the recipe which also includes a picture of your creation. It wasn’t something really complicated to do considering I mostly used the send to friend code and put it in a PrintJob. Lastly, to save the recipe to PDF, instead of simply doing a navigateToURL to the PDF location, which would have opened a new tab in the browser with the PDF in it, I used FileReference.download to pop the download window so that the file is directly downloaded.

Independently these attentions might not seem like much, but if you put it all together the user won’t notice it but he will still feel this is a better application, without knowing why. Don’t get me wrong, I’m am not saying that the TELUS holiday card is the best application out there; I am saying that paying attention to details is what makes the difference between a nice application and a great one.

In that sense, I think there are stuff we could have done better. Mostly sound wise, to emphasize the meerkat (that is the name of the current TELUS critter) sneaking to take a bite on your gingerbread house. I’m not good at all in audio and when it comes to it I need help, and sound is somewhat not needed to make a website / application functionnal and beautiful, so it is often forgotten. But I will make sure in following projects to give it the proper time.

As I always do here is a list of the libraries I used to build it:

Well that’s it, enjoy your holidays, I surely will!

, , , , , ,

2 Comments