Papervision Wish List


I’ve been using Papervision 2.0 for several months now, and while I’ve been able to get it to do most of what I want it to, it has been a tedious journey. If I were to do this project over again, I’m not sure I would choose Papervision, unless they make some improvements.

I’ve put together a short wish list of things I’d like to see done to Papervision:

Building a Better TileList: A Custom Scrollable TileList using Flex


I use a TileList component quite often when building Flex applications. Recently, I was asked to create a nice, smooth, horizontal scrolling effect for a TileList containing a 3×3 page grid of 40 or so images. After many unsuccessful attempts to cajole the TileList into the proper behavior, I decided to roll my own.

It seems the fundamental problem with the TileList, which extends from the ListBase class, is its management of item renderers. It gets confused when attempting an animation to change the horizontal scroll position using an AnimateProperty effect. It seems that item renderers get confused when moving items into view using an effect.

Wrangling Flex Labels: Auto-sizing Text


I am currently working on a project where we have a
fixed-width dialog box, and need to fit the title text in a label. The problem
is, the text is too long. What to do? Well, the basic Flex Label provides you a
couple of options: show an ellipsis (…) at the end of the label or cut the text
off. Neither of these solutions was viable.

This is a common problem that occurs in UI development:
fitting text in a limited space. My solution to this was to create a LabelUtil
class that automatically adjusts the font size of the text to fit the width of
the label.

Going with the Flow: Tips and Tricks for Using the Adobe Flex TextFlow Component


We’ve been busily developing using Flex 4 (aka “Gumbo”) here at the Grio offices and are impressed with many of its new features. One of the more interesting but difficult to decipher features is the TextFlow component.

The TextFlow component is used to layout text in a highly controlled way. It uses an XML-based markup language, Text Layout Format (TLF), to define the content of the TextFlow. TLF uses some similar tags to HTML (<div>, <p>, <span>), but it is definitely not HTML.  This may trip you up a bit as you learn TLF; I recommend reading the Adobe Labs info before diving too deep into development (

Keeping it Clean: Creating a Profanity Filter with Flex


I was recently tasked with writing a profanity filter for the chat module of an AIR application. I did some research and alas, there were no Flex examples to be found. I thought I’d share my implementation with you.

The filter needed to replace naughty words with asterisks: so profanities such as ‘f— you’ would appear as ‘**** you’. The filter also required the ability to use localized word ‘blacklists’.

Adding Sound Effects to Your Flex/AIR Application


It’s easy to add sounds to a Flex/Air application. Here we’ll see how to add whirrs, chirps, and bloops to your application’s button clicks and mouseovers. We’ll also see how to use Air’s EncryptedLocalStore to add mute and volume controls.

The first step is to create a sound manager for playing the sounds. The sound manager will make it possible to centrally apply user preferences like volume to all application sounds.

Intercepting Hyperlinks in HTML Component of Adobe AIR


AIR’s HTML control provides an easy way to render complex html content. It also gives user flexibility in manipulating events and data it contains. For instance, one can easily react to a hyperlink click in an html document.
Consider the following html snippet:


var str:String = ‘Go to <a href=”” id=”linkGoogle”>google</a>’; = str; // html is of type HTML…

When a user clicks on “google” link, by default, the HTML control will navigate away from the current page and go to Let’s assume that we’d like to do something different. Let’s say we want to display a native AIR dialog box (called GoogleDialog) that has a text field to accept keywords to search, Search button and Cancel button.