ActionScript Notification Engine! Open-Sourced!

Last year, I posted about a side project that I was working on. Dubbed “Facebook Desktop“, it is essentially a notification engine that I built that would give you updates about your Facebook friends in real time! It became quite popular and I ended up building it out over the next year, pushing out 6 new releases in that time (0.80, 0.81, 0.82, 0.83, 0.84, and 0.85). Well, I’ve decided to contribute to the community and open-source the primary component in Facebook Desktop, the notification engine!

Project M6D Magnum Sidearm
That’s right, I codenamed my notification engine project “Project M6D Magnum Sidearm” (I have a weird naming convention for projects :p). Anyways, it is exactly how it sounds. It is a cross-platform, notification engine built on top of Adobe AIR. With a very simple interface, you can drop it into any AIR project and allow it to deliver messenger-style notifications to your users! Think Growl, but for all platforms :)

Mac:                                                                         Windows:

What can it do?
If you’re familiar with the Facebook Desktop project that this engine was built for, it supports all of the features that you see being used in that project, including…

  • Ability to display messenger-toast notifications as well as compact notifications.
  • Variable display length for notifications.
  • User-presence logic that detects when the user goes idle. If the user is away from the computer, notifications are held on-screen and queued for when the user returns.
  • Ability to replay the most five recent notifications.
  • Individual notification post settings, such as sticky, replayable, custom image, click URL, compact, etc.
  • Operating system detection to set logical default display locations for notifications for the various platforms (i.e. bottom-right on Windows, top-right on Mac).
  • Smart repositioning logic for extended length toasts.
  • Ability to see a summary notification when the user returns from idle after an extended period of time.
  • Support for changing notificaion images.
  • Custom styling which can be applied at run-time.
  • Optional notification sound.

These are just a few of the really cool features that we’ve built into this engine.
How can I use it?
Even though we’ve added a lot of powerful features to this library, using it is very easy! All you have to do is include the SWC (or source) into your project, and follow the patterns below…

// create engine with default settings
var notificationManager:NotificationManager =
	new NotificationManager("/assets/style/dark.swf",		   // default style
				"/assets/m6d-magnum-sidearm-50x50.png",	   // default notification image
				"/assets/m6d-magnum-sidearm-16x16.png",	   // default compact notification image
				"/assets/sounds/drop.mp3"		   // (optional) default notification sound
				NotificationConst.DISPLAY_LENGTH_DEFAULT,  // (optional) default display length
				NotificationConst.DISPLAY_LOCATION_AUTO);  // (optional) default display location
 
// now that we have an engine, let's create a notification and show it
var notification:Notification = new Notification();
notification.title = "Derek ► Jacobim";
notification.message = "What is this?  A center for ANTS?!";
notification.image = "/assets/images/profile/derek/avatar.png";
notification.link = "http://www.youtube.com/watch?v=_6GqqIvfSVQ";
notification.isCompact = false;
notification.isSticky = false;
notification.isReplayable = true;
notificationManager.showNotification(notification);
 
// we can also show notifications quickly using this API too
notificationManager.show("Derek Zoolander Foundation", "Now open!", "/assets/images/dzf-logo-50x50.png");

And that’s all it takes for you to add robust notifications to your application. You can even change many of the engines settings on the fly!

// let's change the default images, display length, and display location
notificationManager.defaultNotificationImage = "/assets/images/dzf-logo-50x50.png";
notificationManager.defaultCompactNotificationImage = "/assets/images/dzf-logo-16x16.png";
notificationManager.displayLength = NotificationConst.DISPLAY_LENGTH_SHORT;
notificationManager.displayLocation = NotificationConst.DISPLAY_LOCATION_TOP_RIGHT;
 
// we can even change the style and sound settings on the fly too!
notificationManager.loadStyle("/assets/style/light.swf");
notificationManager.loadSound("/assets/sounds/bing.mp3");

For those of you that want all the details, you can check out the ASDocs here.
Demo
I’ve also created a sample demo application that you can install and see the engine work in real time! It has an interface like this…

…where you can quickly test out all of the features of the engine! Take it for a spin and let me know what you think!

Download Notification Engine Test Console

Code, please!
I’ve released the code under the Apache License, Version 2.0 and made it all available on GitHub! Please, fork and extend!

ActionScript Notification Engine on GitHub

That’s it for now! Hopefully some of you will find this project useful. And as always, I love hearing from you so let me know what you think! Until next time, happy coding =)

Charles

15 Responses to ActionScript Notification Engine! Open-Sourced!

  1. Mark Fuqua says:

    Thanks for releasing this. I can think of tons of uses…plus it was just nice timing. We need good news in the Flex/Air arena and this helped fill the bill for me. I am still in a bit of a funk over the events of November 9, 2011….really wish Adobe had not thrown in the towel or at least had done it in a more thoughtful way. I understand it was about money, flash for mobile and Flex have been huge money losers for Adobe. But I digress…I meant to just say “Thanks for the encouragement”.

  2. James says:

    Launching too many notification message, it become an orphan or keep block my screen. How do I close it?

    • Charles Bihis says:

      The notifications close automatically after a set period of time, between 4 and 12 seconds, depending on how you configured your NotificationManager. Also, if you want to manually close them, there is a close button in the top-right corner of each notification. Hope that helps.

  3. xm says:

    Can this library be used for pure AS3 projects (not AIR)… Is it coded in a way to segment the UI from what dispatches them?

    Great lib thanks for sharing!

    • Charles Bihis says:

      No, unfortunately not. It uses the spark.components.Window class as the class for the notifications, which is only available in the AIR SDK. You can probably leverage some of the logic that I’ve used for displaying the notifications, though. But the notifications themselves are not in pure AS3.

  4. Very informative and I will try and see if it works.

  5. amber says:

    hi, i installed the facebook desktop app onto the school laptop but when i click into it the page is white how ca i get it to work and let me sign in

    • Charles Bihis says:

      Hi Amber. Is Facebook blocked at your school? Facebook Desktop uses the Facebook Platform to get your notifications, so if Facebook is blocked at your school, that would explain why it can’t connect there.

  6. Pingback: ActionScript Notification Engine! Open-Sourced!

  7. Joel T. says:

    Thank a lot!!!

  8. really very nice, but I can not run. : (

    …… natification\com\charlesbihis\engine\notification\NotificationManager.as, Line 537 1046: Type was not found or was not a compile-time constant: StyleEvent.

    Do you have a running ??

    Thanks.

    • Charles Bihis says:

      That is referring to mx.events.StyleEvent. That is a Flex event, so you need to build the project with Flex or at least include the Flex SDK in your build path.

  9. Mark Fuqua says:

    Would this work as part of a mobile project? We’re building a mobile version of a task management application and are wondering…can we pop a notification like on a pc? Probably not…how about access to the notification bar at top? Or maybe the notification screen?

    • Charles Bihis says:

      Unfortunately, no. This library was intended for desktop application use specifically. The notification logic can certainly be used for other applications, but as it is written now, it only supports pop-up notifications on desktop applications.