{"id":9,"date":"2003-07-21T13:32:45","date_gmt":"2003-07-21T20:32:45","guid":{"rendered":"http:\/\/newsfeed.fatorcaos.com.br\/wp\/?p=9"},"modified":"2006-09-13T12:38:30","modified_gmt":"2006-09-13T19:38:30","slug":"flash-ansi-viewer-and-reflections-on-flash-speed","status":"publish","type":"post","link":"https:\/\/labs.zeh.com.br\/blog\/?p=9","title":{"rendered":"Flash ANSi viewer and reflections on Flash speed"},"content":{"rendered":"<p>Old technology never die, it only gets emulated.<\/p>\n<p>Anyone remember the ANSi format? The ANSi (with a lowercase &#8220;i&#8221; &#8211; ain&#8217;t it 1337?) format was used on Bulletin Board Systems (BBS for short) years ago. If BBSs were the world wide web of the 90s, ANSi screens would be the HTML of the 90s. To make a long story short, ANSi screens were a visual format which allowed the user to see a low-resolution graphic in text mode, using a 80 lines\/25 column screen and 16 unevenly distributed colors. ANSi screens were the digital graffiti of the past, with its very own culture and community (the &#8220;scene&#8221;). In a time where internet was still a thing very few people had access to, the ANSi scene was global. Well, before I get too nostalgic and start crying low-res tears, you can find more information on the ANSi format and the underground art scene <a href=\"http:\/\/www.acheron.org\/articles\/index.cfm?fuseaction=dsp_article&#038;article=20000519180111H\">in this article<\/a>.<\/p>\n<p>Back to my point: sometime I ago I saw <a href=\"http:\/\/www.setpixel.com\/content\/?ID=29\">this ANSi viewer<\/a> by <strong>SetPixel<\/strong> built using Shockwave [Director] technology. At the time I wondered if it was possible to build something similar in Flash, and reached the conclusion that before that was even possible, a special font &#8211; emulating the DOS characters and corresponding code page &#8211; had to be built.<br \/>\n<!--more--><br \/>\nThe reason is simple. Setpixel&#8217;s solution <strong>probably<\/strong> used a graphic character to create the final picture; something I could not accomplish in Flash (with movieclips) because having tons of movieclip instances on the screen (2000 for a small screen) would make it insanely slow. My only choice was using a real textfield and working from that, setting colors and backgrounds.<\/p>\n<p>I couldn&#8217;t use a windows font; most of them just barely support some of the classic text mode characters, and when they do, they do it with no regard to the original format of the font. I mean, they don&#8217;t have a pixel-by-pixel fidelity. Call me a text mode fidelity maniac. I had to create a DOS emulating font.<\/p>\n<p>So I fired up QuickBasic (!), created a quick program to display all 255 characters directly on screen, and captured the screen using <strong>Screen Thief<\/strong>, a classic DOS image grabbing software that has accompanied me for ages (it was mainly created to capture game screens on DOS, but it did capture text screens on graphic format). Zooming on the grabbed image and working on the font software, the <a href=\"http:\/\/www.fatorcaos.com.br?l=trabalho\/fontes\/perfectdosvga437px\">Perfect DOS VGA 437<\/a> font was born (isn&#8217;t that just a bizarre name?). It perfectly emulates the 80\/25 text screen used on VGA monitors, encoded using code page 437, for DOS compatibility. It&#8217;s a &#8220;bitmap&#8221; font for Flash (should be used at size 8 for no anti-alias, etc) created to be used on the ANSi viewer.<\/p>\n<p>From that on, building the viewer itself was quite simple. It just reads an .ANS file directly from its location (it&#8217;s a viewer, not a converter) as it was a XML file, parses its ANSI control codes (color, position changing) and outputs HTML code. To achieve the desired result &#8211; having colored font <strong>and<\/strong> backgrounds &#8211; two textfields were used: one with the foreground character and color, and one on the background, with a block character using the background color.<\/p>\n<p>The result is a faithful recreation of the way ANSi screens were seen on DOS. Faithful to the fact that gradient characters doesn&#8217;t really match when they&#8217;re next to each other and the palette colors are uneven. Nice. See <a href=\"http:\/\/www.fatorcaos.com.br\/imagedisplay.php?i=data\/ansiview_1.swf&#038;pw=750&#038;ph=400&#038;bg=000000&#038;f=s&#038;p=src=data\/rs-mdn42.ans\">this example<\/a> (small screen), <a href=\"http:\/\/www.fatorcaos.com.br\/imagedisplay.php?i=data\/ansiview_1.swf&#038;pw=750&#038;ph=500&#038;bg=000000&#038;f=s&#038;p=src=data\/rs-date2.ans\">this example<\/a> (medium screen) or <a href=\"http:\/\/www.fatorcaos.com.br?l=flash\/testes\/ansiview\">a bit more information<\/a>.<\/p>\n<p>That brings me to the second point of my post&#8230; Flash speed. Yeah.<\/p>\n<p>Some two years ago, I was working on a sound editing (online) application in Flash. It would allow the user to edit several music tracks, turning instruments on or off, and playing them in sequence. It would also allow the user to save the music (send the music via e-mail).<\/p>\n<p>When sending via e-mail, the program would generate a long string containing data for which sound channel: which instruments were on or off, in which position, at which volume and pan settings, and so on. Since the music data wasn&#8217;t saved to a server database, <strong>all<\/strong> music data was to be transmitted via the URL query strings.<\/p>\n<p>As predicted, the generated string was pretty long, and had to be compressed. Based on the patterns of the generated string, I was able to create a compression scheme that would take standard music sizes (something like 800 characters) and transform that in 100 bytes, using only alphanumeric characters, URL-friendly.<\/p>\n<p>What was funny about this whole process was Flash&#8217;s performance. Flash Player version 5 &#8211; then standard &#8211; would take some 45 seconds to compress a 800-character long string. This in a single loop (through all the string) full of charAt()s and indexOf()s.<\/p>\n<p>Later, the &#8220;save\/send via e-mail&#8221; process was dropped from the application, mainly because the company didn&#8217;t want to allocate people to create the sendmail script (!). I didn&#8217;t have much time to mess with the data compression algorithm either so I forgot that for a while.<\/p>\n<p>When the Flash player 6 came out I decided to test my compression scheme again. I ran the same test &#8211; which took 45 seconds on my test machine &#8211; on the new player. The result was something like 1 or 2 seconds. Insanely fast, at least in comparison.<\/p>\n<p>Then it brings me back to my ANSi viewer. While the parsing time is okey for this examples I provide above, it&#8217;s important to notice they&#8217;re small, ~20 lines examples. Many ANSi screens would take up to 100 or 200 lines on BBS intros, or up to 1000 if you were on crack and feeling like drawing. With a standard 80-line, 35000-byte ANSi screen, render times for this movie increase considerably. The reason is, Flash can&#8217;t deal very well with long strings, and this ANSi render process uses very long strings.<\/p>\n<p>As such, even though that&#8217;s what I wanted to do, I can&#8217;t create a more robust ANSi viewer in Flash, that allows big screens to be scrolled and so on &#8212; because it takes forever to render them. I&#8217;ve tweaked the rendering process as much as possible (or I like to believe so) and even though I&#8217;m happy with the final results, it just displays that Flash is, for now, a toy in which things are nice and easy but not really fast. Not even medium speed.<\/p>\n<p>It&#8217;s only natural, then, that I get a bit happy after seeing the few last posts on several Flash-related blogs and news sites: many of them pointed to <a href=\"http:\/\/forums.ultrashock.com\/ff.htm?http:\/\/forums.ultrashock.com\/forums\/showthread.php?threadid=30278\">this post at UltraShock<\/a> with information gathered from the FlashForward panels regarding the next Flash player speed. Basically, the next player &#8211; dubbed <strong>Flash X<\/strong> &#8211; will perform some 500% faster on a PC, and a bit more on a MAC. They&#8217;re mainly array and component measurements, but I guess that&#8217;ll also reflect on string management and overall display speed.<\/p>\n<p>Good news. I hope they release that player soon &#8211; as rumors go, it&#8217;ll be released before Flash MX 2 or Flash 7 or whatever. Hopefully I&#8217;ll be able to turn this ANSi viewer into a worthy .ANS displaying solution and even make <a href=\"http:\/\/newsfeed.fatorcaos.com.br\/000013.html\">my pathfinding prototype<\/a> faster in the process. I&#8217;m really curious to see how these two will perform in the new player with no code changes on the scripts themselves.<\/p>\n<p>Oh, and of course: the header on this site is an ANSi logo itself, as is the header on the comments popup.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Old technology never die, it only gets emulated. Anyone remember the ANSi format? The ANSi (with a lowercase &#8220;i&#8221; &#8211; ain&#8217;t it 1337?) format was used on Bulletin Board Systems (BBS for short) years ago. If BBSs were the world wide web of the 90s, ANSi screens would be the HTML of the 90s. To [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,2,12,4],"tags":[],"_links":{"self":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/9"}],"collection":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":0,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}