Archive for December, 2008

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


This is not SPAM, VIAGRA.ca is live!

I have been working hard (that’s the last joke I make on this, I don’t event know if I am allowed) on this website for a long time, but it’s finally live!. Because of canadian regulation on advertising and pharmaceutical prescription drug, the process of making the canadian version of the VIAGRA website is unlike other; more steps are involved when you try to get content approved. So that’s why I have been working on this for a long time, but it’s finally out and I am really happy of the results.

What is funny when you work on a project for such a long time is the fact that you improve so much in the mean time, that you look back at your early code and you can’t believe you did that. During I was working on the VIAGRA website,  I switched animation package three time to end up with TweenLite, I started looking at SWFAddress now I kinda use it on every project, knew nothing about AS3 and so on. It was also the first project where I started using Object Oriented techniques to build it.

When I present a website I did, I like to list all the libraries I used, so here I go again. Well first it was all built in Actionscript 2.

Most of the 3D was done using 3D Studio Max exept for the button animations that where done using Maya.

Well that’s it, go and hang around the VIAGRA.ca clubhouse!

That conclude my week of posting everyday (well I didn’t post yesterday, but I posted twice today), see you in a month (just joking).

, , , , ,

2 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() + "&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


It’s A Wonderful Life

It is with great pleasure that I present you the Twist Image holiday card : It’s a wonderful life:  The shameless product placement cut. This year’s version of the card is a video where we incorporated elements of our clients. You get to watch the video and at the end you guess how many insertion we did.

Unlike last year I didn’t get to work on the Twist Image card, because I was working on something else (can’t wait to show that), but I can say that this year card is pretty good. A lot of work as been put on the audio, video and the Flash and it paid off in the end. My only contribution on this project was some troubleshooting to include the SWFAddress library.

So here you go again:

It’s a wonderful life:  The shameless product placement cut.

Well stay tuned because I have a whole lot of other posts coming (I have been doing some cool stuff lately, probably have enough content for a post a day this week!). I’m off to rent the second season of Dexter.

, , , , ,

No Comments


I just upgraded to WordPress 2.7

Well as you can see I upgraded to WordPress 2.7. I didn’t really have a reason to do so, but I did it anyway. My version dated a bit and from now on it’s going to be easier to update (WordPress and plugins) so it wasn’t so bad, but as you can see I have to redo the theme on this website. I had started to put a new design but kinda never finished so I guess that will leave me something to do during Christmas vacations. Also, something really nice from this version (well it might have a been a few versions before) is the fact that you can embed swf files without requiring any additional plugins. Also I think the syntax highlighter plugin (WP-syntax) is a bit better now. Enjoy this new version of the blog (soon to be redesigned, again).

,

3 Comments


Google Analytics For Flash; is it that usefull?

Not too long ago Google released Google Analytics for Flash. My first reaction was one of happiness; finally some attention would be put into Flash analytics. But after looking into it a bit more I found out that Google Analytics for Flash wasn’t such a big deal.

On Google Analytics side, nothing changed; no specific stats just for Flash,  just the good old interface we all know.  On the Flash side, nothing changed much there either; instead of doing this:

1
2
 
ExternalInterface.call("pageTracker._trackPageview('/somepage');");

You now do this:

1
2
tracker = new GATracker( this, "window.PageTracker", "Bridge", false );
tracker.trackPageview( "/somepage");

From the look of it, it’s actually more code than before.

The cool thing about GA for Flash is the ActionScript 3 mode. In that mode, you can call the tracker even if the JavaScript code wasn’t imported in the HTML page the Flash file is embedded. Now that is a possibility that we didn’t have before. So in a context where you do not have control over the HTML you flash will be embedded, this will enable you to do analytics just the same. I have also seen in the road map for the project that they want to implement it for Adobe AIR also; this will be very useful.

What will you be using Google Analytics for Flash for?

, ,

7 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


My second Rich Internet Application

A month ago (October 15th 2008) was the release of Flash player 10, but it was also the week that my second rich internet application was set (a)live. I wanted to make a post about it for a long time but I had a lot going on and only just now have things slowed down. So I present you Home Depot – redefining floors. I am really proud of it and I really put a lot of energy in it. It is the legitimate big brother of the previous RIA I made Home Depot – think in colour. I had known for a little while that I would be doing a follow up application to the paint picker and I had started planning and building the application in my head. When the development began, I knew a lot of things that I would not be doing again. Some of the pitfalls that I had faced doing the first application would not show up this time; I was ready and awaiting this new challenge with the motivation to do something better.

In the first one I had jumped head first into the code because I didn’t see any reason why I would use a framework, it was ok at first, but when the codebase became more imposing, dispatching event also became very tedious. So this time around, I used the framework PureMVC and I can say it helped a lot; it helped with the events and it also helped with shaping my ideas into classes.

An other thing I did differently was that I made sure that my ActionScript classes wouldn’t have displayed text in it. I live in Montreal and we speak mostly French here but the rest of Canada speaks English. So if I start putting copy in my code, I will need to have a codebase for French and a codebase for English. That is what I had done for the first application and every time a modification had to be done I had a whole lot of files to touch. So this time around most of the text was located in an xml file which was something better.

All in all, it was a very nice project that I liked to do a lot and seeing how its little brother got rewarded last Friday (Home Depot – think in colour won a Bronze CMA award  in the retailing category on November 28th 2008) I foresee a bright future for this one too.

Here is a couple more libraries I have been using for this project:

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

I have a couple of new ideas how to improve my workflow and tools for my next RIA; can’t wait to get my hands dirty!

, , , , , , , , , ,

7 Comments