速記!

加載外部的 Html & Css 在 Flex/Flash顯示出來,雖然直接的方法很少用到,但下面的內容畢竟也是一種方法呀!

Flash Player 10 支持的 HTML 元素和屬性

  • Anchor tag <a/>
  • Bold tag <b/>
  • Break tag <br/>
  • Font tag <font/>
  • Image tag <img/>
  • Italic tag <i/>
  • List item tag <li/>
  • Paragraph tag <p/>
  • Span tag <span/>
  • Text format tag <textformat/>
  • Underline tag <u/>

Flash Player 10 支持的CSS屬性

  • color
  • display
  • font-family
  • font-size
  • font-style
  • font-weight
  • kerning
  • leading
  • letter-spacing
  • margin-left
  • margin-right
  • text-align
  • text-decoration
  • text-indent

也就說,在外部 loading html & css 的時候,其中的代碼要符合 Flashplayer 10 的 support 列表才能正確得顯示出來。
直接看下面的代碼:
html.text:

<h1><a href="http://www.richmediaplus.com" target="_blank">Aedis.Ju's Blog</a></h1>
<p>Powerd By <img src="r.gif"><img/></p>
<br/>
<p>About the Adobe's RIA related solution and technology, 
like <b>Adobe Air</b>, <i>Adobe Flex</i>,
<u>You also can find the SEO for Flex, RIA, User Ex in this blog.<u/></p>

style.css:

p {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    color: #000000;
}
h1 {
    color: #00FFFFF;
    font-size: 24px;
    font-weight: bold;
}
a {
    color: #9FFF9F;
    text-decoration: none;
}
a:hover {
    color: #FF00FF;
    text-decoration: underline;
}

FlexHtmlCss.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="htmlcss()"
				viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			public function htmlcss():void
			{
				var htmlReq:URLRequest = new URLRequest("html.txt");
				var cssReq:URLRequest = new URLRequest("style.css");
				var loader:URLLoader = new URLLoader();
				var sheet:StyleSheet = new StyleSheet();
				var htmlData:String;
				function fileLoaded(event:Event):void
				{
					htmlData = loader.data;
					loader.removeEventListener(Event.COMPLETE, fileLoaded);
					loader.load(cssReq);
					loader.addEventListener(Event.COMPLETE, cssLoaded);
				}
				function cssLoaded(event:Event):void
				{
					sheet.parseCSS(loader.data);
					html_txt.styleSheet = sheet;
					html_txt.htmlText = htmlData;
				}
				loader.addEventListener(Event.COMPLETE, fileLoaded);
				loader.load(htmlReq);
			}
		]]>
	</mx:Script>
	<mx:TextArea id="html_txt" x="107" y="83"
				 width="507" height="314"/>
</mx:Application>

Flex 中很多關于文字顯示的 component 的控件中都含有 htmlText 和 styleSheet 的屬性。

按照 CSS 先讀取的原則,讀取符合 Flash Player 10 規范的 CSS ,通過 StyleSheet.parseCSS(CSSText:String):void 來分析 CSSText 中的 CSS 并用它加載樣式表,然后把符合 Flash Player 10 支持的 HTML 元素和屬性的 html 讀取進來,賦值在 htmlText 屬性中顯示出來。

Demo: HtmlCssFlex