Also available on Adobe TV.
Video tutorial: Using the new states model in Flex 4
by Serge Jespers on 22. Apr, 2010 in Flex, How-to, Video
Using Growl in AIR applications with AIR 2 NativeProcess
by Serge Jespers on 15. Mar, 2010 in AIR, How-to, code
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
by Serge Jespers on 13. Nov, 2009 in How-to, Video Tutorial
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
by Serge Jespers on 20. Oct, 2009 in AIR, How-to
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)
by Serge Jespers on 28. Aug, 2009 in Flex, How-to
“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
by Serge Jespers on 04. Jun, 2009 in AIR, Best practices, How-to
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.
Need help switching to AS3.0? Check out the Migration Cookbook
by Serge Jespers on 28. Apr, 2009 in ActionScript, How-to
Today, we launched a new ActionScript technology center on the Devnet site with links to a variety of resources and tutorials. The Migration Cookbook is a good place to start. There’s also a downloadable PDF version that will get you up to speed with ActionScript 3.0 in no time.
Flash on!
Video tutorial: Use Flex for your ActionScript coding for Flash CS4
by Serge Jespers on 09. Mar, 2009 in Flash, Flex, How-to, Video, Video Tutorial
Video tutorial: Use the Flex webservice component in Flash CS4 projects
by Serge Jespers on 02. Mar, 2009 in Flash, Flex, How-to, Video, Video Tutorial
UPDATE: My sincere apologies. There is an error in my code which I did not explain in the video.
Line 10 should not read myWebService.load but myWebService.loadWSDL.
I do remember we recorded this one twice and I fear that that’s where the mixup happened. Please download the working FLA below.
Download the FLA file.
Video tutorial: Introduction to Adobe’s mobile platform
by Serge Jespers on 18. Feb, 2009 in How-to, Popular, Video, Video Tutorial, mobile
I’ve recorded a little video that walks you through the process and will be doing more videos on how to build mobile applications soon.
- Give yourself a MAX Unaward 02. Sep, 2010
- Hot job in Silicon Valley: Flash developer 26. Aug, 2010
- Auto update API for AIR Native Installer Apps 25. Aug, 2010
- Tablet mania: Samsung Galaxy Tab 24. Aug, 2010
- New on Labs: Adobe AIR Launchpad 24. Aug, 2010
Latest Tweets
Recommended Reading
- Hands-on Video With The Samsung Galaxy Tab (Spoiler: Wow)
- Toshiba announces Folio 100 tablet -- 10.1 inches of Android 2.2
- Vodafone to carry the Samsung Galaxy Tab in October
- Sony Takes Out Their Google-Powered Internet TV For a Spin [Googletv]
- The Tweeting Wifi Body Scale Scores 3 Million Euros
- [ More ]
Flash Platform blogs
- Adam Lehman
- AIR team blog
- Andrew Shorten
- Ben Forta
- Christian Cantrell
- Christophe Coenraets
- Duane Nickull
- Enrique Duvos
- Ethan Malasky
- Flash Platform blog
- Greg Wilson
- James Ward
- Kevin Hoyt
- Lee Brimelow
- Mark Doherty
- Matt Chotin
- Mihai Corlan
- Mike Chambers
- Piotr Walczyszyn
- Renaun Erickson
- Ryan Stewart
- Ted Patrick
- Terry Ryan
- Tom Krcha










