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.

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!

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 ;-)

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.

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.

Download the source.