This is the source code of correctHtmlImageTextFlowTest.mxml.
This file is part of the blog post "Images in flash as3 htmlText, part 2; how to display them correctly"
The code is colored using the Coldfusion code coloring component by Paul Klinkenberg.
<?xml version="1.0" encoding="utf-8"?> <!-- /* * Code author: Paul Klinkenberg * http://www.coldfusiondeveloper.nl/ * * Project: Images in flash as3 htmlText, part 2; how to display them correctly * Blog post: http://www.coldfusiondeveloper.nl/post.cfm/flash-as3-images-in-htmltext-how-to * * Date: 2010-01-15 19:10:00 +0100 * Revision: 1.1 * * Copyright (c) 2010 Paul Klinkenberg, Ongevraagd Advies (www.ongevraagdadvies.nl) * Licensed under the GPL license. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * * ALWAYS LEAVE THIS COPYRIGHT NOTICE IN PLACE! */ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="doIt()"> <mx:Script> <![CDATA[ public function doIt():void { var imgHtml:String = '<img height="xXx" width="150" src="http://is.gd/l6QM"><br>' + 'This should be on a new line<br>'; var test_txt1:String = '<b>Just a title</b><br>'; for (var i:uint=10; i<60; i+=16) { test_txt1 += imgHtml.replace(/xXx/, i); } var test_txt2:String = test_txt1.replace(/width="150"/g, 'width="180"'); var test_txt3:String = test_txt1.replace(/width="150"/g, 'width="200"'); txt1.text = test_txt1.replace(/<br>/gi, "<br>\n"); htmltxt1.htmlText = test_txt1; txt2.text = test_txt2.replace(/<br>/gi, "<br>\n"); htmltxt2.htmlText = test_txt2; txt3.text = test_txt3.replace(/<br>/gi, "<br>\n"); htmltxt3.htmlText = test_txt3; nospacehtmltxt1.htmlText = test_txt1.replace(/<img/g, "<img vspace='0' hspace='0'"); nospacehtmltxt2.htmlText = test_txt2.replace(/<img/g, "<img vspace='0' hspace='0'"); nospacehtmltxt3.htmlText = test_txt3.replace(/<img/g, "<img vspace='0' hspace='0'"); hackusedhtmltxt1.htmlText = correctHtmlImageTextFlow(test_txt1); hackusedhtmltxt2.htmlText = correctHtmlImageTextFlow(test_txt2); hackusedhtmltxt3.htmlText = correctHtmlImageTextFlow(test_txt3); hackusedtxt1.text = correctHtmlImageTextFlow(test_txt1); hackusedtxt2.text = correctHtmlImageTextFlow(test_txt2); hackusedtxt3.text = correctHtmlImageTextFlow(test_txt3); } /** put every <img> tag inside a <textformat> tag with the same leading height as the image has a height, * so text won't flow around it. * Also, since flash always displays images on a new line, add a line break <br> tag before * and after the image. * Yes, I know it IS possible to have text appear after the image on the same line, * but that has much complications: if you then have more then one image, they will often not be correctly * set in the text's order: 'text1 <img1> text2 <img2>' will become 'text1 text2 <img1> <img2>'. */ public function correctHtmlImageTextFlow(htmlTxt:String, fontSize:uint = 10):String { // remove optional break before and after the image tag (since we will add it anyway) htmlTxt = htmlTxt.replace(/<br>[\t ]*((<\/[^>]*>)*<img)/gsi, '$1'); htmlTxt = htmlTxt.replace(/(<img[^>]+>(<\/[^>]*>)*)[\t ]*<br>/gsi, '$1'); var currImgHeight:Number; while (htmlTxt.match(/<img[^>]*height=.[0-9]+.[^>]*>/si)) { // get the height from the current image currImgHeight = parseInt(htmlTxt.replace(/^.*?<img[^>]*height=.([0-9]+).[^>]*>.*$/si, "$1")); /** Now, the magic: * - temporarily rename <img tags to <xXxXimg tags, so we won't match the tag again * - wrap the img tag inside textformat tags * - give the textformat tag a 'leading' attribute width a value of: image height - fontSize * - add a break before and after the img tag, to be sure it displays correctly on a line of it's own. */ htmlTxt = htmlTxt.replace(/<(img[^>]*height=.[0-9]+.[^>]*>)/si, '<br><textformat leading="'+Math.ceil(currImgHeight-fontSize)+'"><xXxX$1<br></textformat>'); } // now un-rename the <xXxXimg tags htmlTxt = htmlTxt.replace(/<xXxXimg/gi, "<img"); /** now check: if the image is the last visible thing in the html, then append a space to the html. * Otherwise, the image's height won't be taken into account for the html's totalHeight, which * causes part of the image to disappear below the end of the htmlText text box. */ if (htmlTxt.match(/<br><\/textformat>(<[^>]+>)*$/)) { htmlTxt += ' '; } // remove optionally existing vspace and hspace from img tags (who uses this anyway??) htmlTxt = htmlTxt.replace(new RegExp("(<img[^>]*)hspace=.[0-9]+.", "gsi"), '$1'); htmlTxt = htmlTxt.replace(new RegExp("(<img[^>]*)vspace=.[0-9]+.", "gsi"), '$1'); // now set vspace=0 and hspace=0 in the img tags htmlTxt = htmlTxt.replace(new RegExp("<img", "gi"), '<img vspace="0" hspace="0"'); // done! return htmlTxt; } ]]> </mx:Script> <mx:VBox> <mx:Label fontSize="14" text="Original html text" width="700" textAlign="center" fontWeight="bold"/> <mx:HBox> <mx:Box width="224" height="204" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="txt1"/> </mx:Box> <mx:Box width="224" height="204" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="txt2"/> </mx:Box> <mx:Box width="224" height="204" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="txt3"/> </mx:Box> </mx:HBox> <mx:Label fontSize="14" text="Shown as html (look at disappeared text!)" width="700" textAlign="center" fontWeight="bold"/> <mx:HBox> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="htmltxt1"/> </mx:Box> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="htmltxt2"/> </mx:Box> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="htmltxt3"/> </mx:Box> </mx:HBox> <mx:Label fontSize="14" text="vspace=0 and hspace=0 in all img tags" width="700" textAlign="center" fontWeight="bold"/> <mx:HBox> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="nospacehtmltxt1"/> </mx:Box> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="nospacehtmltxt2"/> </mx:Box> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="nospacehtmltxt3"/> </mx:Box> </mx:HBox> <mx:Label fontSize="14" text="image text flow hack is used" width="700" textAlign="center" fontWeight="bold"/> <mx:HBox> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="hackusedhtmltxt1"/> </mx:Box> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="hackusedhtmltxt2"/> </mx:Box> <mx:Box width="224" height="254" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="hackusedhtmltxt3"/> </mx:Box> </mx:HBox> <mx:Label fontSize="14" text="html created by the image text flow hack" width="700" textAlign="center" fontWeight="bold"/> <mx:HBox> <mx:Box width="224" height="204" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="hackusedtxt1"/> </mx:Box> <mx:Box width="224" height="204" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="hackusedtxt2"/> </mx:Box> <mx:Box width="224" height="204" borderStyle="inset" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:Text text="Text" width="200" height="100%" id="hackusedtxt3"/> </mx:Box> </mx:HBox> </mx:VBox> </mx:Application>