Styling Html TextField Bullet Points
June 18th, 2009 • ActionScript, Flash
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.
20 Responses (Add Your Comment)
-
-
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?
-
Daniel November 28, 2009at 1:03 pm
hi everyone where do i get the fonts that are in the class so i can embed them?
Thanks
Daniel
-
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!
-
Hey Martin,
Thanks a lot… An example with font and the stylesheet for the indentation would be great!
-
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 ?
-
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 -
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 -
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 :)
-
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).
-
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 :)
Yeah, comes to the rescue :)