Display HTML Tables in Flash AS2.0

We all know Flash has very limited support of HTML markup, right? I had a recent AS2.0 update project where the client gave me content that included some tables, so I went looking for a 3rd party component that might be able to do the trick.

And I found it. I bought TableMaker for $24.99 from FlashRelief.

My content looks like this:

<table width='530' embedfont='GothamMedium' cellpadding='2' border='1' bordercolor='#000000'><tr bgcolor='#CCCCCC'><td>Intensity</td><td>Time</td><td>RPE</td><td>Talk Test</td></tr><tr><td>Warm up</td><td>4 min.</td><td>4-5</td><td>You can speak in full sentences (slightly breathless)</td></tr><tr><td>Speed burst</td><td>1 min.</td><td>8-9</td><td>You can only say short words (very breathless)</td></tr><tr><td>Recover</td><td>2 min.</td><td>4-5</td><td>You can speak in full sentences (slightly breathless)</td></tr><tr><td colspan='4'>Repeat speed burst/recovery combo 7 more times for a total of 8 intervals (heart rateZone 4/2), going directly from final recovery into cooldown.</td></tr><tr><td>Cool down</td><td>2 min.</td><td>3</td><td>You can speak easily</td></tr></table

For my needs, this component works flawlessly. You can embed fonts, style the cells, span columns, etc. By default it’s setup to load from an external file with HTML, HEAD, and BODY tags.

To load up content from a string looks like this:

var table_str:String "<html><body><table width='530' embedfont='GothamMedium' cellpadding='2' border='1' bordercolor='#000000'><tr bgcolor='#CCCCCC'><td>Intensity</td><td>Time</td><td>RPE</td><td>Talk Test</td></tr><tr><td>Warm up</td><td>4 min.</td><td>4-5</td><td>You can speak in full sentences (slightly breathless)</td></tr><tr><td>Speed burst</td><td>1 min.</td><td>8-9</td><td>You can only say short words (very breathless)</td></tr><tr><td>Recover</td><td>2 min.</td><td>4-5</td><td>You can speak in full sentences (slightly breathless)</td></tr><tr><td colspan='4'>Repeat speed burst/recovery combo 7 more times for a total of 8 intervals (heart rate: Zone 4/2), going directly from final recovery into cooldown.</td></tr><tr><td>Cool down</td><td>2 min.</td><td>3</td><td>You can speak easily</td></tr></table></body></html>";

_page _root.createEmptyMovieClip("_page"_root.getNextHighestDepth());
_page.attachMovie("TableMaker""_table"_page.getNextHighestDepth()); // TableMaker is the linkage name of this component in the Library
_page._table.onTableRendered = function() {
("page rendered");

Notice I’m also using an embedded font in the library named “GothamMedium”. The component also works behind masks and inside of ScrollPanes.

This is actually the first adventure back to AS2 I’ve done in over a year of all AS3 projects. I’m glad I found this component, because it saved me a lot of time AND impressed the client who wasn’t expecting to see a table in Flash.

Categories: FlashControls and ComponentsPermalink