Colored <LI> Bullets in Flash

This blog entry will be from the geekery. If you are not interested in a problem explanation from the "realm of Geek-dom" then you might want to skip this one. Here goes!

As per my job, I spend a good chunk of time writing object oriented code in Flash for the purpose of creating eLearning. I work for a group called NXLevel Solutions (NXLevel Solutions)and most recently I have come across what appears to be a bug in Flash. Here is an explanation of the problem:

The problem (exactly):

• When flash encounters any color treatment to text inside an <li> it applies the first occurrence of that color treatment to the bullet. The only case where this does not happen is when the first color treatment is the color #000000 (AKA "Black.")


• So, when confronted with a stylized element with color treatment, Flash applies any color treatment other than black (#000000) to the bullet (i.e. a hyperlink color or a font tag applying some color.)
  

The issue here is that while you might want to highlight some text inside a Flash bullet using color, or possibly hyperlink to something and highlight the hyperlink (again, using color) you aren't likely to desire to have that one bullet (of a possible list of bullets) be in a different color. This is really irritating.

What is worse is that there isn't any good information on this topic out there on the web. Everyone on the web wants to know how to change the bullet color, usually to match the general text color, but there is nearly no blogging on the topic of stopping the bullet color from changing when the above condition is true. I eventually found one forum/blog on the topic:

http://geekglue.blogspot.com/2007/02/hacking-htmltext-in-flex-2.html

Search for Bullet, and the first occurrence on the page describes the problem in the flash player. Search again and the next occurrence explains a “hack!” that doesn’t work. Maybe this worked for someone in some situation (notice that this is really a Flex commentary)but it did not work for me. A variation of it did actually work, but this is completely a "hack" and not acceptable if you are working with dynamic content that contains bullets. Here is the "hack":

We have to trick Flash by applying a color treatment very (very) close to black, first, before anything else, on one or more characters, after the start of the "LI" tag . Examine the following:



When the above text is loaded into the htmlText property of a TextField in Flash, the second item would have an orange bullet. Now examine the following:



By applying the variant of Black (#010000) we get the bullet back, and the two black shades are virtually identical. This is a complete hack and for it to work, each and every HTML "LI" tag element would have to be examined and the first character of each "LI" would require replacement using this technique.

Two items of note before moving forward: This is not a problem if you compile your FLA into a SWF targeting Flash Player 7. Any target of Flash Player 8 or higher results in this problem and as far as I know, this is the only solution. here is an example of what the output specifically looks like once rendered:

Here we can see that while it solves the bullet color issue in Flash (in the second block of bullets) there are a number of other issues that then happen. For example, you have to implement the following content rules or you create more problems:

1. No bulleted lists can start with a color treated element, like colorized text or colorized hyperlinks.
2. All bulleted lists need to primarily contain black text (we cannot have the content of the bulleted list be “Blue” or anything other than black because the color of the text won't match the bullet or the first character of the Bullet text.)
3. Someone would need to examine the copy for "LI" tags and search and replace each first character in each "LI" with the “hack” text, so flash can present it clearly.

This is horrible, but as of this moment, the only way I could figure it out. At the time I am writing this, the problem persists in the Flash 9 player (while the following downloadable example it written using Flash Pro 8) i can tell you that rendering the SWF in Flash CS3 targeting for any Flash Player other than version 7 still remains problematic!)

Here is the downloadable example:

http://enginpost.com/pics/blog/flashbullets/bulletTest.fla

Adobe (if you are listening)... is there a better solution to this? If not, could we get a priority patch to players 8 and 9 (and 10?), and get an update to the Flash Pro 8/CS3/(CS4?) authoring environment? While I am certain you could fix this for FP 10, please, remember that many of us still HAVE TO TARGET older players, because our client networks are not implementing the latest flash player versions.

Thanks and if anyone has a solution, feel free to comment.

UPDATE:

If you are also having problems with nested bullets and thought they were not possible in flash, read this blogpost to solve your HTML nested bullets in Flash issue.