Distribute, promote, track and monetize apps like the MAX widget
If you’ve installed the MAX widget you may have noticed that I used the Gigya service to enable this feature. We actually teamed up with Gigya and are now launching the Distribution service.
This new service enables users to instantly add your application to their own page or account on more than 70 social networks and services including MySpace, Facebook and iGoogle. It’s incredibly easy to use as a developer. You just install an extension for Flash CS4 Professional or Flash Builder. By installing that extension, you actually get an easy to use configuration panel that allows you to set all the necessary parameters for your application. This literally takes just a few minutes and you can add this functionality to basically any type of application, from games to news widgets to promotional widgets. The service also allows you to monetize your application and track just about everything a user does with the app.
To get you up and running with this new service in no time, check out the tutorials on Adobe Devnet.
Behind the scenes of the MAX widget – ColdFusion, FMS and Flex
While I was taking some time off, I thought it would be a good idea to give you a peak at what’s running behind the scenes of the MAX widget and why I chose ColdFusion and Flex to build it.
Why ColdFusion?
There are a number of reasons why I chose ColdFusion but the main reason is that I wanted to create something fast and not worry too much about possible config issues when connecting to my Flex front-end. I wanted a solution that I could just quickly install on a new server and be ready to go without the need to add new extensions or plugins. ColdFusion is perfect for that. With one simple install, you have everything ready to go. From Flash Remoting to image manipulation libraries.
The other big reason is also very simple. I think eating our own dogfood is a big part of our job. I’m fairly new to ColdFusion. I actually first touched CF about a year ago on the On AIR Train Tour through Europe. That was the first time I played around with CF after oh… some 10 years of working with PHP. I looked at CF a few years ago and never really took another serious look at it. I’m sure there are many of you out there in the same situation and I would like to invite you to take another look at ColdFusion. CF has changed and matured a lot since the early days and is just a breeze to work with. With a minimum amount of code, I was able to rapidly code my database calls for the widget. Another cool thing about ColdFusion is that once you write your database code, you can use it in a number of different ways. You can directly call the methods using Flash Remoting in your Flex application, call it as a webservice from a mobile Flash application and/or call it from an HTML page without changing anything in the original code. I surely was pretty impressed when I saw that the first time. If you’re a long time PHP user and want to know more about ColdFusion, I’d like to invite you to my session at MAX. I’m going to talk about the difference and similarities between PHP and CF and also talk about what CF can do right out of the box.
Why Flex?
I thought long and hard about this one. Using the Flex framework does add a bit of overhead (about 200k) to my application but the return is well worth it. I also wanted to prove that you can easily do these types of applications using Flex. Even though it’s built with standard Flex components, it looks nothing like a standard Flex application. What’s even more important is that all the transitions and styles you see in the widget are available today. No Flash Catalyst or Flex 4 styling was used in this application. Another reason why I chose Flex for this is the fact that your application becomes so much more organized using the Flex framework. I know there are other frameworks out there that provide similar functionality for pure ActionScript 3 projects but over the last couple of years, I’ve really become accustomed to using the Flex framework and since time was limited I went with what I know best.
Why Flash Media Server?
Well… That’s obviously an easy question to answer. Yes, there are third party solutions and even services that would offer more or less the same functionality but I do work for Adobe and so I also chose our own dogfood for this task. It also just works. You download the installer package, install the server, run it and you’re ready to go.
How long did it take to build this?
Obviously the team size is very important in any project. So let’s talk about that first… Oh wait… It was just me ;-) From concept phase to development took just about 3 weeks. That also includes setting up the ColdFusion server and Flash Media Server from scratch, writing the back end and creating a little content management system (pictured here on the left) to easily add facts, administer user videos and check the Twitter stats. I also created a static image version using nothing more than some standard ColdFusion features and reusing the database calls that I already created for the Flash based widget.
Building this widget has been great fun and it was great to also be able to build a real application again. Now don’t get me wrong. Building demos is also a lot of fun but knowing that millions of people are going to see and use this application is a good feeling. Well… Maybe not millions but you have to set the bar high enough, no? ;-)
Anyway… I hope you enjoyed playing around with the widget as much as I enjoyed building it. Hope to see you at MAX in Los Angeles… Oh wow… Is that really just 3 weeks away? I better get back to preparing my demos then ;-)
Tutorial: Sexy transitions with Flex 3 (as used in the MAX widget)
When I showed the first versions of the MAX widget to a few colleagues, most were very surprised to hear that this was all built with the Flex 3 framework and that no Flash Catalyst or Flash CS4 was involved in this.
“Including the animations?“, was a question I got a lot. And yes… Even the animations are “programmed” using the Flex framework. And you know what… It’s really not as hard as it sounds. The Flex framework actually has a bunch of effects built in and they are really easy to use.
In this case, I used 2 move effects and specified a “Back.easeOut” easingFunction. This easing function creates that bouncing effect that you see in the widget.
<mx:Move id="moveIn" yFrom="400" duration="350" easingFunction="Back.easeOut"/> <mx:Move id="moveOut" yTo="400" duration="250" easingFunction="Back.easeIn"/>
You can use these types of effects in a number of different ways but the easiest way (I think) is to specify the showEffect and hideEffect on a component.
<mx:Canvas id="page1_back" showEffect="moveIn" hideEffect="moveOut" width="400" height="400"/>
When you set the visible property to false, the hideEffect will trigger and the showEffect gets triggered when you set the visible property to true. I’m sure you can already see how I built this ;-)
In the widget, you see 6 different pieces of graphics slide in to place over time. To do that, I created a timer that triggers my setup function over time.
var setupTimer:Timer = new Timer(150, 3);
setupTimer.addEventListener("timer", doSetupPage1);
setupTimer.start();
This timer will trigger the doSetupPage1 function 3 times with 150 milliseconds in between each call. All my doSetupPage1 function does, is set the visible property to true on the different pieces of graphics I want to show.
private function doSetupPage1(event:TimerEvent):void
{
switch (event.target.currentCount)
{
case 1:
page1_back.visible = true;
break;
case 2:
page1_middle.visible = true;
break
case 3:
page1_front.visible = true;
break;
}
}
To hide them, I’m actually doing exactly the same thing. Instead of setting the visible property to true, I set it to false and when all pieces of artwork are hidden, I trigger the function that reveals the next page.
[flash medium=5 w=400 h=400 mode=1]
To get you started, I created this little Flex project that demonstrates this approach. Now I’m not saying that this is best practice or not but I think it’s just an easy way to create sexy transitions with Flex 3.
Project Quindici = MAXwidget
If you’re following me on Twitter, you may have seen me Tweet about Project Quindici. Quindici is Italian for 15. Project Quindici is actually a widget that (among other things) allows you to record your own testimonial and thus claim your 15 minutes of fame.
I’m happy to announce that the project is now live. The widget is built with Flex Builder 3 and the Flex 3 framework, ColdFusion, Flash Media Server and Photoshop. I’ll do a follow up blog post about how it was built next week. I hope you like it.
Feel free to follow me on: 
