Make Text Fade in Flash Without Embedding Fonts

My team is working on a notification framework for AIR. It provides a cross platform API for managing notification windows, changing the dock or system tray icon, attaching menus to the dock or system tray icon, and bouncing the dock or flashing the task bar icon. It’s open source and free, and available now on Google Code if you’re interested in an early preview.

One of the challenges we ran into was getting the notification text to fade along with the notifications. My first reaction was that we were going to have to embed a font which is how I have gotten text to fade in Flex applications in the past. However, I didn’t want to have to include a font in an open source project for both technical and legal reasons. Fortunately, one of the engineers on the AIR team (Stan Switzer) pointed me to one of the first AIR applications ever written called ApolloClock in which he had partially transparent dynamic text.

It turns out the answer is to apply a filter to the text. Applying a filter to a TextField results in the runtime generating a bitmap out of the device font which means you can change its alpha, rotation, etc. This was a huge help, and resulted in a very cool and smooth fade effect. It also allows the notification library to remain very small since it’s written in 100% ActionScript (no Flex), and now does not contain an embedded font. (It might also be possible to use cacheAsBitmap to make this work, but I was happy enough with the filter approach that I didn’t investigate further.)

I’ll post more about the notification framework as we add features. I’ll also post more about the application we’re working on that we wrote the notification framework for. It, too, will be be free and open source, and will make Mac users who have to use Exchange calendaring very happy.

15 Responses to Make Text Fade in Flash Without Embedding Fonts

  1. Hey Christian, good meeting you at MAX.This is a nice lil’ trick. I could’ve used this a couple months ago. Have you tried rotating, etc the text? You know…other things that can’t be done with non-embedded fonts?Regarding the notifications, will these be included natively in the AIR sdk?Thanks.

  2. Oh, one more thing (hehe), I was looking at a friends Mac yesterday their email program icon (on the dock) had a number on it. Now, I don’t think they have 0 to 1000 icons (1 number on each) but I have no idea how they accomplish this but I am definitely interested in doing the same for an app I’m working on.Thoughts?

  3. Dude, I hate commenting one after another like this but I went to SVN Checkout and couldn’t.http://as3notificationlib.googlecode.com/svn/trunk/ as3notificationlibThat’s what the page says but it is: http://as3notificationlib.googlecode.com/svn/trunk.Thanks dude.

  4. John,I haven’t tried rotation, but I don’t see why it wouldn’t work.This code will not be included in the SDK, but it will stay up on Google Code for free, so it’s there for anyone who wants it.

  5. Regarding dynamic icons, I’ll make another post shortly explaining the best way to do it.

  6. Campbell says:

    Nice work guys. I was looking at making Growl for AIR, but was afraid I would have to ensure the main application had transparent chrome to get transparent chrome on the notification window. This is very cool (love the name purr too :), and I love the update to the AIR beta.The one thing I think the AIR framework is missing in multi monitor support, these notifications should be popping up on the main screen when app in minimal, and the same screen as the app when the app is on screen.Keep up the good work guys :)Campbell

  7. polyGeek says:

    And you can do masking with this technique as well. http://polygeek.com/253_adobeflash/actionscript_fading-and-masking-with-device-fontsI searched around and I think Scott Morgan was the first to publish this solution.http://blog.scottgmorgan.com/php/default.php?topicID=170&contentID=739&rowID=103

  8. Hank Williams says:

    Christian,I was not aware that Actionscript and/or AIR provided APIs which would allow one to do platform specific stuff like mucking with the system tray and providing notifications.Yes I know I am lazy and could just look at the code, but could you tell me what APIs you use to do that stuff?

  9. What would be the performance impact of doing a bitmap draw of an entire window before fading it out? We’ve found that with multiple layering of display objects we get non-uniform alpha fading across the view. Maybe a bitmap draw would be the best complete option.

  10. Campbell,AIR has great multi-monitor support. All Purr notifications show up on the main screen.I think I’ll actually make a post about that as well.Christian

  11. Williams,It’s really easiest just to browse the code. You can see it online here:http://as3notificationlib.googlecode.com/svn/trunk/src/The real meat of it is here:http://as3notificationlib.googlecode.com/svn/trunk/src/com/adobe/air/notification/Christian

  12. Daniel Cascais says:

    Christian,I took a shot at testing this, but I couldn’t get the text to display when the TextField is rotated. It just acts as if no filter would have been added to it (alpha works as you mention).Is anyone else getting this behavior?Note: I’m testing in Flex, not in AIR.

  13. totaldeluge says:

    Probably a good choice there on your font usage. I’m sure the legalities are quite complicated! I heard that it’s not so much the font that is copyrighted, as much as the way of getting the font that is copyrighted. Of course, if you have a specific font, and you try and copy it, you can only get it in specific ways. So, it’s more the method of making a font that is copyrighted over the actual design itself. That’s why you can probably get close to another font in design without getting in too much trouble! One of the reasons why it’s so complicated…

  14. Marcus says:

    Great post!!!!!!!!! Managed to mask a movie clip containing dynamic text! Wasted hours confusing over this! Thanks 🙂

  15. edison says:

    Apply blendMode as BlendMode.LAYER for text will solve this problem in flex.http://hydra1983.blog.163.com/blog/static/11175037200832810127762/edit/