Multi-Column Layouts in Flash and Flex

I've been doing the same thing and found that the ease of html parsing depends on your source html. Over here i'm dealing with extremely simple html - one string encapsulated by <p> tag with <br /> for breaks and <h1> to indicate headers. I manually add a </p> at the end of every textfield column in multicolumnview.as and start with one as well.

field.htmlText = "<p>" + remainder + "</p>";
or something like that

Thats enough for simple styling, but to be honest, we're moving the project into flex cuz strictly as3 css styling doesn't seem to be robust enough.

btw, why no source?

No good reason for leaving out the source code so it's up now (see update above). And yeah, having HTML that is guaranteed to be limited in complexity would definitely help. Having several nested tags makes for more work but it doesn't mean it's impossible.

Your example works as I expected in restricting drag selection of text to a single TextField. Buzzword somehow allows users to drag select across multiple paragraphs, and even across intervening tables. As far as I can tell each table cell is formed from a separate TextField as text flow across multiple lines works fine within table cells. Any idea how they were able to do that?

One theory (as yet untested) is to set event handlers on each of the text fields and manage the selection from event handlers. A manager would then need to keep track of all fields that have been selected. A further theory is that the tables are implemented as img elements that reference a movie clip id, that contains the table. The table is itself composed from multiple text fields with the borders drawn separately.

I am also curious as to how buzzword allows users to change the bullet character without including the bullet character in the text buffer. The AS3 documentation doesn't give any indication of how to do that. Of course you could stick a bullet character in the text, and fiddle around with tab stops, indent and blockindent, but that would make the bullet selectable and in buzzword it isn't. I tried the obvious idea of setting the TextFormat bullet property to a character value, but the value doesn't have any effect other than it being zero (no bullet) or non-zero (default bullet).

and what about the flash.text.engine package introduced in astro? examining it loosely, one will have more and detailed control over typography on all aspects; i guess the new TextBlock class would satisfy us graphical coders.

I think multiple TextField selection is impossible by using build-in flash text capabilities.
I think Buzzword are doing custom selection, things like drawing selection box under dynamic TextFields and custom type cursor moving along the textfields.

I'm doing same proof-of-concept project now having so much quirks if anybody doing same thing i appreciate your talk

Yeah yakup, i saw their text engine demo, that seem pretty much promissing, a lot of more deeper control over text

thanks for this great example, that's exactly what i looked for because i can't wait until flash 10 is released :-)

Hi Iwan,

Yeah, what's taking them so long! (-;
I'm really looking forward to the new features, too.

Hi

This is great - thanks for providing it!
I am loading text dynamically into this, and trying to allow editors to force a column break by using an <hr /> tag in html.
But I'm struggling as for how to actually implement that in the code...
Any quick ideas?

Thanks

Tried to use an tag above but it disappeared.

Hey Robert,

Not sure whether Flash Player 10 supports that but if you're lucky you might not have to implement it yourself. Otherwise, the code will have to keep an eye out for the tag, and skip to the next text area when it sees the <hr />. Hope that helps.

hi, this script is exactly what i needed, but i have a question, i have 3 text fields, one i is a fixed height and the other 2 i have side-by-side and want them both to resize vertically to accommodate and evenly distribute an unknown amount of text. is this possible?

Hi Alyda,

This script would need to be modified but it'd definitely be possible to have two text fields automatically resize to fit the text. Good luck! (-:

This is awesome and it's so cool of you to provider the source. I am trying to get better at AS and people like you make that possible. thanks a lot!

Is there anyway to use basic HTML tags with this? And by simple I only mean bold, ital, etc. Any HTML tags in the copy are treated only as plain text and when attempt to make tfw.htmlText ="" I receive the following error: 1119: Access of possibly undefined property htmlText through a reference with static type net.dmclaren.text:MultiTextFieldWrapper.

Hi Andrew,
Using HTML with my code will take some serious coding to implement. You'd probably be better off using Adobe's Text Layout Framework. Be warned, though—this only works with Flash Player 10 and it's currently still in beta.

Hi Daniel!

Followed your indication about TextLayout Framework, but got no luck when I tried to pull html characters, and the main problem is that we got to follow the xml conventions of TLF, so, while having a structure different than that I found lots of troubles.

Can you help me on making your class html text reader??
I'm working on Flash and pulling data from an XML btw.

Thanks for any help you can spare on this, I'm loosing my mind around this problem.

Hi Pedro,

Implementing multi-column layouts in HTML would be a tough problem. Are you sure you can't modify your format to work with the TextLayout Framework because I think it would be much easier than trying to parse and display the HTML yourself.

Nice one Dude.