Video tutorial: Using the new states model in Flex 4
The states model has changed quite a bit in the Flex 4 framework but it’s a lot easier to use. In this video I show you just how easy it is to add different states and to add different behaviors and change properties based on the current state.
Also available on Adobe TV.
Using Growl in AIR applications with AIR 2 NativeProcess
The AIR2 release is just around the corner and one of my favorite new features is the ability to use native scripts. As I’ve already demonstrated earlier, this is extremely powerful and here’s another good example.
From the moment AIR was released, a lot of developers were asking for Growl support to add toast style notifications. Up until now, there hasn’t really been an easy and flexible solution so most developers opted to build their own notifications. I really like Growl and the fact that you as a user have total control over the look and feel. I use the Mono style created by Christopher Lobay. It’s probably the sexiest toast style notification I’ve ever used.
With AIR 2 you can now call Growl right from within your application. I actually call the Growlnotify command-line tool, which comes as an extra in the Growl download. Most people probably don’t install these extras but that’s no problem. I can bundle the command-line tool as part of my application and call it directly from my applicationDirectory.
So… How does this work? It’s actually extremely easy… The first thing you do is set up a new File object that points to the Growlnotify tool.
var file:File = File.applicationDirectory;
file = file.resolvePath("growlnotify");
As I am going to bundle growlnotify with my application it will just be installed as part of the app and thus resides in applicationDirectory.
The next thing I have to do is set up a NativeProcessStartupInfo object. That’s where I’ll store the basic information that is used to start our NativeProcess.
var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo(); var processArgs:Vector.<String> = new Vector.<String>(); processArgs[0] = "-n"; processArgs[1] = "My AIR application"; processArgs[2] = "-p"; processArgs[3] = "0"; processArgs[4] = "-t"; processArgs[5] = "Your Growl title"; processArgs[6] = "-m"; processArgs[7] = "Your Growl message"; processArgs[8] = "-a"; processArgs[9] = "Adobe AIR Application Installer"; nativeProcessStartupInfo.arguments = processArgs; nativeProcessStartupInfo.executable = file;
In this case, I’m also adding a bunch of arguments in my NativeProcessStartupInfo object. These arguments will be passed on to the growlnotify command-line tool. In this example, I’m setting up the name of my application, the notification priority, the title and message of my notification and I’m also telling it to use the icon associated with the Adobe AIR Application Installer. (Check out the Growlnotify docs for more info on these settings)
Next and last step is to actually call the native script.
process = new NativeProcess(); process.start(nativeProcessStartupInfo);
This code above will result in this Growl notification:
The only downside of using native scripts is that you’ll have to package your application specifically for the operating system you wrote your native script for. So in this case, I’d have to package it as a .DMG file since Growl only exists on OS X. That said, I really wouldn’t mind an OS X version of TweetDeck that allows me to use Growl instead of their custom notifications…
I really can’t wait to see what you guys are going to build with AIR 2! You can already start today! Check out Adobe Labs for more information!
Video tutorial: “Elf Yourself” yourself – Personalized video on the web
Note: Please update your After Effects CS4 installation to make sure you have the latest version available via the Adobe Updater. There is an issue with the preinstalled After Effects script that requires you to work with the latest point release (separate downloads available for Mac OS and Windows).
Ever wondered how you can create personalized video on the web? Want to create your own ElfYourself.com? This tutorial shows you how it’s done using After Effects CS4 and Flash Professional CS4. Ooh.. before I forget… One of my evangelist colleagues has a cameo appearance at the end of the tutorial ;-)
Reducing CPU usage in Adobe AIR
Jonnie Hallman from DestroyTwitter fame and recently employed by the Adobe XD team, wrote a great article about how he reduced CPU usage in his AIR application.
“AIR gets a bad rap for being a bloated runtime, using up a lot of precious memory and CPU. Although a lot of AIR applications seem to fall into this trap, it doesn’t have to be this way. There are a number of techniques you can use to develop a lightweight application that rivals native programs in terms of performance,” he says.
The article explains what framerate throttling is and how best to implement it in your application.
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.
Building CPU efficient Adobe AIR apps
One of the biggest complaints we hear a lot about AIR applications is that they use too much memory and/or too much CPU. Sure… Adobe needs to (and will) make investments in improving the performance of AIR and Flash Player but you as a developer can already make some improvements to your app as well. I know this has been discussed before but repetition never hurt anyone. ;-) If you’re having issues with the app that you are building, you should definitely check out Arno’s blog post about this very topic.
With just 4 simple tips, you can dramatically improve the memory/CPU usage footprint of your application.
- Use the lowest framerate possible
- Dynamically change the framerate to fit your application needs
- Only use Event.ENTER_FRAME handlers when necessary
- Have as few Event.ENTER_FRAME handlers and Timers as possible
Check out Arno’s blog for more info on how to implement these tips. The AIR team also has a blog post about this topic.
If you have any other tips that you are currently using, please feel free to leave a comment. Also, if you have any questions regarding this topic, please feel free to get in touch.
Feel free to follow me on: 
