Course Vector

Notes: HTMLText

This is the first of hopefully a series of posts of useful things I want accessible on my blog. Mostly for my own benefit but anyone else is free to use this as an easy reference for AS3.

Flash Player supports the following HTML tags:

Anchor tag

The <a> tag creates a hypertext link and supports the following attributes:

• target: Specifies the name of the target window where you load the page. Options include _self, _blank, _parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window.
• href: Specifies a URL or an ActionScript link event.The URL can be either absolute or relative to the location of the SWF file that is loading the page. An example of an absolute reference to a URL is http://www.adobe.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, Flash treats them as relative URLs.

  You can use the link event to cause the link to execute an ActionScript function in a SWF file instead of opening a URL. To specify a link event, use the event scheme instead of the http scheme in your href attribute. An example is href="event:myText" instead of href="http://myURL"; when the user clicks a hypertext link that contains the event scheme, the text field dispatches a link TextEvent with its text property set to “myText“. You can then create an ActionScript function that executes whenever the link TextEvent is dispatched. You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets.

	var style:StyleSheet = new StyleSheet();

	var link:Object = new Object();
	link.fontWeight = "bold";
	link.color = "#FF0000";

	var hover:Object = new Object();
	hover.fontStyle = "italic";

	var active:Object = new Object();
	active.fontStyle = "italic";
	active.color = "#FFFF00";

	style.setStyle("a:link", link);
	style.setStyle("a:hover", hover);
	style.setStyle("a:active", active);

	var txt:TextField = new TextField();
	txt.width = 400;
	txt.styleSheet = style;
	txt.htmlText = "Visit: <a href='www.google.com' target='_blank'>Google.com</a> or call a <a href='event:link1'>function</a>";
	txt.addEventListener(TextEvent.LINK, linkHandler);
	addChild(txt);

	function linkHandler(event:TextEvent):void {
		if(event.text == "link1") {
			trace("hello!");
		}
	}
	

Bold tag

The <b> tag renders text as bold. A bold typeface must be available for the font used.

	var txt:TextField = new TextField();
	txt.htmlText = "<b>Hello World</b>";
	addChild(txt);
	

Break tag

The <br> tag creates a line break in the text field. You must set the text field to be a multiline text field to use this tag.

	var txt:TextField = new TextField();
	txt.multiline = true;
	txt.htmlText = "Hello<br/>World";
	addChild(txt);
	

Font tag

The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:

• color: Only hexadecimal color (#FFFFFF) values are supported.
• face: Specifies the name of the font to use. As shown in the following example, you can specify a list of comma-delimited font names, in which case Flash Player selects the first available font. If the specified font is not installed on the user’s computer system or isn’t embedded in the SWF file, Flash Player selects a substitute font.
• size: Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4.

	var txt:TextField = new TextField();
	txt.htmlText = "<font color='#FF0000' face='Times New Roman, Times, _sans' size='+5'>Hello World</font>";
	addChild(txt);
	

Image tag

The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.

Note: (April 2, 2009) To get the height of a textfield that has images loaded in correctly, you must specify the height and width of the image inside the <img> tag. Otherwise you won’t have access to the sizes til after the images have loaded. [Ref]

Note: (April 2, 2009) You cannot nest an <img> tag within an <a> tag. [Ref]

Note: (April 2, 2009) When you use an <img> tag in a text field to load an external file (as opposed to using a Bitmap class embedded within your SWF), a Loader object is automatically created as a child of the TextField object, and the external file is loaded into that Loader just as if you had used a Loader object in ActionScript to load the file. In this case, the getImageReference() method returns the Loader that was automatically created. No security check is needed to access this Loader object because it is in the same security sandbox as the calling code.

However, when you refer to the content property of the Loader object to access the loaded media, security rules apply. If the content is an image, you need to implement a cross-domain policy file, and if the content is a SWF file, you need to have the code in the SWF file call the allowDomain() method. [Ref]

Note: (April 2, 2009) To use bitmap smoothing on a loaded image you must add a listener for the image. Once loaded, apply the smoothing. [Ref]

	var loader:Loader = textfield.getImageReference("image");
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onHtmlImageLoaded);

	private function onHtmlImageLoaded(event:Event):void {
		event.target.removeEventListener(Event.COMPLETE, onHtmlImageLoaded);
		Bitmap(event.target.content).smoothing = true;
	}
	

The tag supports the following attributes:

• src: Specifies the URL to an image or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG, GIF, PNG, and SWF files) do not show until they are downloaded completely.
• width: The width of the image, SWF file, or movie clip being inserted, in pixels.
• height: The height of the image, SWF file, or movie clip being inserted, in pixels.
• align: Specifies the horizontal alignment of the embedded image within the text field. Valid values are left and right. The default value is left.
• hspace: Specifies the amount of horizontal space that surrounds the image where no text appears. The default value is 8.
• vspace: Specifies the amount of vertical space that surrounds the image where no text appears. The default value is 8.
• id: Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded image file, SWF file, or movie clip. This is useful if you want to control the embedded content with ActionScript.
• checkPolicyFile: Specifies that Flash Player will check for a cross-domain policy file on the server associated with the image’s domain. If a cross-domain policy file exists, SWF files in the domains listed in the file can access the data of the loaded image, for instance by calling the BitmapData.draw() method with this image as the source parameter. For more information, see the “Flash Player Security” chapter in Programming ActionScript 3.0.

Flash displays media embedded in a text field at full size. To specify the dimensions of the media you are embedding, use the tag’s height and width attributes.

In general, an image embedded in a text field appears on the line following the tag. However, when the tag is the first character in the text field, the image appears on the first line of the text field.

	var txt:TextField = new TextField();
	txt.autoSize = "left";
	txt.htmlText = "Here is a sample of embedded swf <img src='http://blog.coursevector.com/tempo_files/Wimpy Button Demo.swf' width='20' height='20' align='right' hspace='4' vspace='4' id='tempolite' checkPolicyFile='true' /> and here is a sample of an embedded image <img src='http://www.google.com/intl/en_ALL/images/logo.gif' />";
	addChild(txt);
	

Italic tag

The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.

	var txt:TextField = new TextField();
	txt.htmlText = "<i>Hello World</i>";
	addChild(txt);
	

List item tag

The <li> tag places a bullet in front of the text that it encloses.

Note: Because Flash Player does not recognize ordered and unordered list tags (<ol> and <ul>, they do not modify how your list is rendered. All lists are unordered and all list items use bullets.

	var txt:TextField = new TextField();
	txt.multiline = true;
	txt.htmlText = "Here is a list of items:<br/><li>Item 1</li><li>Item 2</li><li>Item 3</li>";
	addChild(txt);
	

Paragraph tag

The <p> tag creates a new paragraph. You must set the text field to be a multiline text field to use this tag.

The <p> tag supports the following attributes:

• align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
• class: Specifies a CSS style class defined by a flash.text.StyleSheet object.

	var style:StyleSheet = new StyleSheet();

	var heading:Object = new Object();
	heading.fontWeight = "bold";
	heading.color = "#FF0000";

	var p:Object = new Object();
	p.fontStyle = "italic";

	style.setStyle(".heading", heading);
	style.setStyle("p", p);

	var txt:TextField = new TextField();
	txt.styleSheet = style;
	txt.width = 400;
	txt.htmlText = "<p align='center' class='heading'>Hello World</p>";
	addChild(txt);
	

Span tag

The <span> tag is available only for use with CSS text styles. It supports the following attribute:

• class: Specifies a CSS style class defined by a flash.text.StyleSheet object.

	var style:StyleSheet = new StyleSheet();

	var heading:Object = new Object();
	heading.fontWeight = "bold";
	heading.color = "#FF0000";

	var body:Object = new Object();
	body.fontStyle = "italic";

	style.setStyle(".heading", heading);
	style.setStyle("body", body);

	var txt:TextField = new TextField();
	txt.styleSheet = style;
	txt.htmlText = "<body><span class='heading'>Hello </span>World</body>";
	addChild(txt);
	

Text format tag

The <textformat> tag lets you use a subset of paragraph formatting
properties of the TextFormat class within text fields, including line leading, indentation,
margins, and tab stops. You can combine <textformat> tags with the
built-in HTML tags.

The <textformat> tag has the following attributes:

• blockindent: Specifies the block indentation in points; corresponds to TextFormat.blockIndent.
• indent: Specifies the indentation from the left margin to the first character in the paragraph; corresponds to TextFormat.indent. Both positive and negative numbers are acceptable.
• leading: Specifies the amount of leading (vertical space) between lines; corresponds to TextFormat.leading. Both positive and negative numbers are acceptable.
• leftmargin: Specifies the left margin of the paragraph, in points; corresponds to TextFormat.leftMargin.
• rightmargin: Specifies the right margin of the paragraph, in points; corresponds to TextFormat.rightMargin.
• tabstops: Specifies custom tab stops as an array of non-negative integers; corresponds to TextFormat.tabStops.

	var txt:TextField = new TextField();
	txt.htmlText = "<textformat blockindent='10' indent='5' leading='3' leftmargin='4' rightmargin='2' tabstops='6' >Hello World</textformat>";
	addChild(txt);
	

Underline tag

The <u> tag underlines the tagged text.

	var txt:TextField = new TextField();
	txt.width = 400;
	txt.htmlText = "Visit: <a href='www.google.com' target='_blank'><u>Google.com</u></a>";
	addChild(txt);
	

HTML entities

• < (less than)
• > (greater than)
• & (ampersand)
• ” (double quotes)
• ‘ (apostrophe, single quote)

See Flash HTMLEntities Suck for ways to handle more entities.

Flash also supports explicit character codes, such as & (ASCII ampersand) and € (Unicode € symbol).

Tags: html

4 Comments to Notes: HTMLText

Leave a comment