Bullet Class

A little while ago, I was working a little project that had several lists of bullets. I couldn’t find any suitable solutions that gave the designer what he craved; a list of bullets with well-wrapped text.

Sample xml;

<SAMPLE_TEXT>• Bullet item one.
• Bullet item two. Long enough to wrap because I’ve typed a little bit too much and it definitely is too long to fit in one line.
• Bullet item three. There’s nothing like seeing text wrapping to make you realize that bullets are the bane of your existence. Nothing, I say.
• Bullet item four.</SAMPLE_TEXT>

Here’s what you get when you just set up a normal textfield and do what you normally do.

var tf:TextField = new TextField;
tf.width = 300;
tf.multiline = true;
tf.wordWrap = true;
tf.text = SAMPLE_TEXT;
addChild(tf);

As you can see, the text wraps under the bullet because flash only sees it as a block of text.

I realized that the best solution, for me anyway, was to separate the bullet and the line, make two textfields and line them up. This way the copy aligns as it should and doesn’t wrap under the bullet. So I set up a little class to take care of it for me.

The XML had to change to accomodate TextFormatter, but only a little;

<SAMPLE_TEXT bulletString=“•” ffont=“Arial” fsize=“18” fcolor=“0x000000”>• Bullet item one.
• Bullet item two. Long enough to wrap because I’ve typed a little bit too much and it definitely is too long to fit in one line.
• Bullet item three. There’s nothing like seeing text wrapping to make you realize that bullets are the bane of your existence. Nothing, I say.
• Bullet item four.</SAMPLE_TEXT>

package com.display
{
import flash.display.Sprite;
import com.utils.TextFormatter;
import flash.text.TextField;
public class BulletBuilder extends Sprite
{
private var content:Sprite;
private var bulletCharacter:String;
private var bulletArr:Array;
private var contentArray:Array;
private var bullet:TextField;
private var copy:TextField;
private var bulletHeight:Number = 0;
private var fieldWidth:Number;
/*====================
provide the constructor with;
the xml node
what character to look for
the width of the end field
sample;
var bulletBuilder:BulletBuilder = new BulletBuilder(sampleNode,”•”,415);
addChild(bulletBuilder);
=====================*/
public function BulletBuilder(_copy:XML,_bulletCharacter:String,_fieldWidth:Number)
{
content = new Sprite;
bulletCharacter = _bulletCharacter;
fieldWidth = _fieldWidth;
bulletArr = _copy.toString().split(bulletCharacter+” “);
setBulletFields(_copy);
}
/*=====================
setBulletFields separates the copy
into an array based on the provided bullet character.
it then uses two textfields; one for the bullet character, one for the copy.
places the copy at the same y position as the bullet
and moving it to the right of the bullet
it then adds the two fields to the sprite and updates the y position for the next bullet
finally, the function adds the content sprite
========================*/
private function setBulletFields(_copy:XML):void{
contentArray = []
for(var i:int = 1;i<bulletArr.length;i++){
contentArray[i] = new Sprite;
bullet = new TextField;
copy = new TextField;
copy.width = fieldWidth;
copy.multiline = true;
copy.wordWrap = true;
new TextFormatter(bullet,_copy.@fcolor,_copy.@fsize,bulletCharacter,_copy.@ffont);
new TextFormatter(copy,_copy.@fcolor,_copy.@fsize,bulletArr[i],_copy.@ffont);
copy.x = bullet.width;
contentArray[i].addChild(bullet);
contentArray[i].addChild(copy);
contentArray[i].y = bulletHeight;
bulletHeight +=contentArray[i].height;
content.addChild(contentArray[i]);
}
addChild(content);
}
}
}

Here’s sample with the package(s)

2 thoughts on “Bullet Class”

  1. I would really aptaceirpe some help!I’m trying to use the TextArea component with a slider and a numeric stepper to display some text. I thought perhaps allowing the text to be enlarged would be useful for those with bad eyes, but I don’t know how to format the text (paragraphs, bold headings, regular body text etc.)Initially when the TextArea comes up, it does not have the font or size that it is supposed to. The values for the slider and stepper are the same as what is in the code.This is the code I’m using:import fl.events.*;ta.text = “WORK EXPERIENCE XMEDIA: Graphic Multimedia Designer (full time) July 2005 to present. Creative direction and lay-out of various types of print and online advertisements. Online advertising and promotions designed mostly in Flash accompanied with a static gif or designed only as a static gif or jpg. Print design has included retail, automotive, real estate, promotional and spec advertisements as well as special sections, internal and external posters, internal and external corporate documents, logo design, leave behinds, wrapping paper and client presentations and liaison. SAATCHI SAATCHI CANADA: Junior Art Director Internship (full time) July 2002 to present. Creative direction and lay-out of various types of print and online advertisements. Online advertising and promotions designed mostly in Flash accompanied with a static gif or designed only as a static gif or jpg. Print design has included retail, automotive, real estate, promotional and spec advertisements as well as special sections, internal and external posters, internal and external corporate documents, logo design, leave behinds, wrapping paper and client presentations and liaison.”;var tf:TextFormat = new TextFormat(“Verdana”, 20);slyda.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);function slydaChange(e:SliderEvent):void{tf.size = slyda.value;ta.setStyle(“textFormat”, tf);ns.value = e.value;}ns.addEventListener(Event.CHANGE, nsChange);function nsChange(e:Event):void{tf.size = ns.value;ta.setStyle(“textFormat”, tf);slyda.value = ns.value;}I hope you can help me out! Thank you!!!

Leave a Reply

Your email address will not be published. Required fields are marked *