Styling Html TextField Bullet Points

If you ever needed to style the bullet points in a Html TextField in Flash you have noticed that this isn’t supported. It gets even worse if the bullet point in the font you’re using isn’t nice at all and you want to take another fonts bullet point.

But with a simple workaround you can change the font face, size and color of the bullet points:

And don’t forget to embed the bullet point, it’s character U+2022

Update 25.01.2010

Added an indent property to easily set the left margin of the list. For using other symbols than the bullet, you have to manipulate your font and embed the manipulated character.

Download Source



20 Responses (Add Your Comment)

  1. Yeah, comes to the rescue :)

  2. Cool, had many problems with bullets and TextField before. How would that work when the line is slightly longer? Would it indent the second (wrapped) line?

  3. yeah sure. I’m using normal lists for that

  4. hi everyone where do i get the fonts that are in the class so i can embed them?

    Thanks

    Daniel

  5. hey daniel, you don’t have to use DIN and Helvetica, you can use the font of your choice. In case you want to use DIN and Helvetica you’ll have to buy them (e.g. http://www.linotype.com)

  6. Hi everyone..

    The script works fine.. but does anyone know how to make a square instead of a bullet? and how to change the indentation of the list..

    I tried to put the unicode U+25A0 for the square but that didnt help..

    Hope someone can help me out here.. Thanks!

  7. Hey Hanna,

    Flash automatically takes the U+2022 Character in your font, you can’t change that. To get a square instead of a bullet you either look for a font that has a square at U+2022 or you edit the font file and put the square to U+2022.

    You can indent the list using stylesheets.
    I can send you an example later on … just drop me a line if you need one

  8. Hey Martin,

    Thanks a lot… An example with font and the stylesheet for the indentation would be great!

  9. ok stylesheets didn’t work with the hack, but I found another way … see the examples above

  10. Hey Martin, nice and very helpfull trick ;-)

    It seems only that when the list text goes to two lines the ‘non printing char’ leaves a space.

    http://www.nyls.nl/grabs/e565a24a8e2b59011e032c19541cc5d0.png

    You have had any problem with that ?

  11. the ‘non printing char’ shouldn’t leave a space at all! (that’s basically the reason for the name). You have to take a char in your font that doesn’t get printed and doesn’t leave any space … you could also specify a char of you font that isn’t embeded (e.g. you embed A-Z than you can use any other character)

  12. Hi Martin,

    what am I doing wrong if just a gray stage appears?
    I have created a blank FLA-File just with StyleBulletPoint as the document-class and saved it the same dir as the as-file.

    Cheers,
    DBird

  13. hey DBird, the example uses the embed metadata tag to embed the fonts and the Flash IDE compiler doesn’t support any metadata tags … so this won’t work. You’ll have to embed the fonts in the library …

  14. Hi Martin,

    the problem is, that I have to rename the font’s, because your modified fonts are all the arial. Why? To use them in the lib, I have to install them on my machine, and then windows says: Arial is already installed…
    So I have to use a font-editor to rename them… can you suggest a good one?

    Thank you very much!

    Cheers,
    DBird

  15. I just modified the bullet point of arial and didn’t rename the fonts. I can recommend Fontographer but it’s quite pricy … I guess there are also free ones out there

  16. Thanks for providing your idea. I’ve posted another solution on my block. It’s basically a parser for htmlText and it allows you to dynamically load images without the need to edit the font.

    I’d be glad if you’d visit me :)

    http://digitale-avantgarde.com/listenfelder-icons/

  17. hey chp, thanks for sharing this.

    What I didn’t like about a solution like that is that you don’t have just text anymore … so what’s happening if you have multiline list elements or if you scroll the text? Don’t take me wrong, I’m just curious how you solved those issues…

  18. Well, multiline is not a problem if you select the image of the icon properly (thus, that it will fit to the text size, you could at logic for this into the class), multiline is not a problem.

    Scrolling is a problem, that did not occur to till now.

    Now that you’ve mentioned it, I looked through my library and found this function, that cuts away overlapping stuff (by masking the sprite). I wrote it for another project, but you could adjust it to make a scrollable container (thus, placing the Listfield in the masked container but holding a reference to it, maybe the Listfield itself could be extened):

    /**
    * Cuts off (masks) the given image at the given proportions.
    *
    * Thus, the image is not scaled, overlapping stuff get’s cut away.
    *
    * @param the Display Object to cut
    * @param its width
    * @param its height
    * @param the image gets centered in the mask
    * @return Sprite container with the cutted disObj inside.
    */
    public static function cutOff(disObj:DisplayObject, cutWidth:Number, cutHeight:Number, center:Boolean=false):Sprite {
    var theMask:Sprite = new Sprite();
    theMask.graphics.beginFill(0xFFFFFF);
    theMask.graphics.drawRect(0, 0, cutWidth, cutHeight);

    var container:Sprite = new Sprite();

    container.addChild(theMask);
    container.addChild(disObj);

    if(center) {
    if(disObj.width > cutWidth) {
    disObj.x = ((disObj.width – cutWidth) / 2) * -1;
    }
    if(disObj.height > cutHeight) {
    disObj.y = ((disObj.height – cutHeight) / 2) * -1;
    }
    }

    disObj.mask = theMask;

    return container;
    }

    (Hope this is understandable in the comments).

  19. I don’t know why we have to use TextField at all!

    A useful news for all of us as Flash devs, Now that we are talking about TextField thought to let you know about a class that is so powerful and is extended from the Adobe TextField class itself.

    It’s named TextArea which allows you every possible tags even your own custom tag and has much more abilities too.

    Check out http://doitflash.com/ for more information.
    It not only allows you to load different SWF files by calling different tags in line of your text but also you have much more control over your Text blocks and its contents… such as calling your custom functions right from your text blocks and passing multiple and different arguments through them; loading talking avatars, video players, buttons, slideshows and more… by calling their own tags and having full interaction between all of the loaded SWF modules and your text block. Check out the site for more information, downloading the platform is also free of charge :)

Trackbacks:

Leave a Reply

Formatting: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Other Entries

About

Martin Rädlinger is an Interactive Developer & Designer. He specializes in interactive coding predominantly with ActionScript, but every new challenge is welcome. If you like his work feel free to get in touch with him. At the moment he's available for freelance work.

Contact

Martin Rädlinger
mail: mr [at] formatlos.de
web: www.formatlos.de
xing: Martin Rädlinger
linkedin: Martin Rädlinger
skype: martinraedlinger