February 9, 2009

Freebie: ActionScript 3 – Flash text using XML & CSS

Filed under: Flash, Freebies — Tags: , , , , , — admin @ 4:39 pm

Download Source

Ok, so I’m a little behind the curve in AS3 right now. But I’ve gotta get learning because I see a lot of AIR apps and other AS3 apps I need to build in the future. I’ve a had a little spare time today to follow Colin Moock’s Essential AS3 book. I’ve made it a goal to create a file that uses an ActionScript 3 class to load external text stored in an XML file that is styled with a CSS file.

myText.xml

<?xml version="1.0" encoding="utf-8"?>
<MYTEXT>
	<TEXT><![CDATA[<p><span class='bigText'>This is my title</span></p><br /><p><b>Bold</b>, <i>italics</i>, <u>underline</u>, normal</p><br /><p><a href='http://www.google.com/'>Web link</a></p><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis, metus ut commodo tempus, enim mi placerat justo, nec ornare sapien urna eu nisl. In hac habitasse platea dictumst. Integer suscipit, nisl id consectetur pharetra, velit quam accumsan diam, sit amet commodo nibh libero vitae neque. Donec neque dui, ultrices id, condimentum in, eleifend non, odio. Sed elit risus, hendrerit at, gravida quis, porttitor a, nisi. Pellentesque ullamcorper. Nulla facilisi. Maecenas sagittis. Phasellus nulla ipsum, varius non, bibendum vel, sollicitudin ac, nunc.</p><p>Integer id tortor sit amet odio fermentum dictum. Integer metus arcu, laoreet non, lobortis et, tincidunt sed, erat. Quisque porttitor nibh ac felis. Donec facilisis, purus sed eleifend dapibus, quam est ultrices turpis, vel dictum justo lectus ac ligula. Nullam diam tortor, suscipit sodales, porta at, vestibulum venenatis, ipsum. Nunc placerat, urna eu elementum dictum, odio metus lobortis justo, sit amet convallis lacus mauris sed sem.</p>]]></TEXT>
</MYTEXT>

styles.css

p {
	font-family: Arial;
	font-size: 12px;
	color: #006600;
}
.bigText {
	font-family: Arial;
	font-size: 24px;
	color: #0099FF;
	letter-spacing:-1px;
}
a {
	color:#FF0000;
	text-decoration:none;
}
a:hover {
	color:#0000FF;
	text-decoration:underline;
}

CSS_XML.as

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.net.*;
 
	public class CSS_XML extends Sprite {
 
		private var myText:XML;		
		private var urlLoaderXML:URLLoader;
		private var paragraph:String;
		private var CSSFile:String = "styles.css";
		private var XMLFile:String = "myText.xml";
 
		public function CSS_XML() {
			var urlRequest:URLRequest = new URLRequest(XMLFile);
			urlLoaderXML = new URLLoader();
			urlLoaderXML.addEventListener(Event.COMPLETE, completeListenerXML);
			urlLoaderXML.load(urlRequest);
		}	
 
		private function completeListenerXML(e:Event):void {
			myText = new XML(urlLoaderXML.data);
			paragraph = myText.TEXT.toString();
			loadCSS();
		}
 
		private function loadCSS() {
			var urlLoaderCSS:URLLoader = new URLLoader();
			urlLoaderCSS.addEventListener(Event.COMPLETE, completeListenerCSS);
			urlLoaderCSS.load(new URLRequest(CSSFile));
		}
 
		private function completeListenerCSS(e:Event):void {
			var styleSheet:StyleSheet = new StyleSheet();
			styleSheet.parseCSS(e.target.data);
			var t:TextField = new TextField();
			t.multiline = true
			t.autoSize = TextFieldAutoSize.LEFT;
			t.width = 550;
			t.wordWrap = true;
			t.styleSheet = styleSheet;
			t.htmlText = paragraph;
 
			addChild(t);
		}
	}
}

Now the end-result isn’t amazing-looking. It definitely needs a scrolling utility, but it’s a good start.

Enjoy!

1 Comment »

  1. really useful! thanks~

    Comment by cct — December 8, 2009 @ 8:33 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

© 2010 Aaron Benson. All rights reserved.

Powered by WordPress