How to Display HTML in Flash AS3
MARK STANSBERRY
TECH
Adobe Flash Professional can handle HTML-formatted text and images within a Flash TextField, TextArea component, scrollbar component or scrollPane component. Aside from text and images, you can also use the Flash ActionScript 3, or AS3, programming language to display ISO-standard XML symbols, such as math symbols, in your Flash animation. The AS3 HTML text property combined with the Flash's ability to interpret and display subject specific XML symbols gives you the ability to create well-formatted Flash applications that use math symbols, foreign alphabets and ancient alphabets.
1 Start the Flash program
Start the Flash program. Click "Flash File(ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation project.
2 Select Actions
Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor.
Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button, and type in the code below to create and place a TextField on the flash stage that has a width of 1,000 pixels and a height of 1,000 pixels:
var displayText:TextField = new TextField(); displayText.width = 1000 displayText.height = 1000 displayText.multiline = true; var tf:TextFormat = new TextFormat(); tf.size = 20; tf.font = "Times New Roman"
The TextField will also support text on multiple lines and display the text with a 20 point Times Roman font.
Type the following code into the ActionScript 3 editor starting on the next line:
displayText.htmlText = "<html><body><p>Formatted in Plain Text</p><p><B>Formatted in Bold Text</B></p><p><i>Formatted in Italic Text</i></p></body></html><P>the equation\n\nV= 1_PI_1²</P><P><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Cycnus_Picart-detail.jpg/120px-Cycnus_Picart-detail.jpg'></P>"
This code stores the HTML formatted text on the right-hand side of the equals sign in the displayText TextField variable.
Type the following code in the next line of the ActionScript 3 editor:
displayText.setTextFormat(tf); addChild(displayText);
This applies the text formatting to the displayText TextField, and places the displayText TextField on the Flash stage.
Copy and paste the following code, if you did not type in the preceding code already, or replace the code you already typed, to ensure that there are no syntax errors and the AS3 HTML rendering program runs correctly.
var displayText:TextField = new TextField(); displayText.width = 1000 displayText.height = 1000 displayText.multiline = true; var tf:TextFormat = new TextFormat(); tf.size = 20; tf.font = "Times New Roman"
displayText.htmlText = "<html><body><p>Formatted in Plain Text</p><p><B>Formatted in Bold Text</B></p><p><i>Formatted in Italic Text</i></p></body></html><P>the equation\n\nV= 1_PI_1²</P><P><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Cycnus_Picart-detail.jpg/120px-Cycnus_Picart-detail.jpg'></P>"
displayText.setTextFormat(tf); addChild(displayText);
Click "TestMovie" option within the "Control" menu to play the Flash AS3 HTML rendering program. Observe that the text is displayed and formatted in plain, bold and italic text, that the XML character is rendered as the superscript 2, the text is in 20 point Times Roman format and that the picture at the WikeMedia Common's URL is rendered.
- The "displayText.setTextFormat(tf)" code must be placed after the "displayText.htmlText = " line of code in order for the text formatting specified to be applied to the HTML rendered text. Not all XML entities and not all HTML tags can be rendered with the TextField's htmltext property.
- Try different XML character entities listed in the Web page at "w3schools; HTML ISO-8859-1 Reference" to see how Flash's htmlText property renders them.
Related Articles
