Page 1 of 1

HTML in Flash + Loading external CSS stylesheets with ActionScript 3.0 Rate Topic: -----

#1 skater_00  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 256
  • Joined: 30-April 08

Post icon  Posted 01 February 2009 - 10:32 PM

* This is my first tutorial. *
* My apologies for spelling and grammar mistakes. *

Let's get started right away! =)

- Open Flash and create a new Flash File supporting ActionScript 3.0. I use Adobe Flash CS3 Professional.
- Rename the default layer "Layer 1" to "content". This layer will contain visual elements only. All code goes into a separate layer named "actions".
- Create a new layer and rename it to "actions". Lock this layer so you can't accidentally add any visual elements to this layer.
- Select the first frame of the layer "content" and add a TextField to the stage.
In the properties panel, set the properties as shown:

Posted Image

Dynamic Text and Input Text require font embedding. Click on the "Embed..." button and select the character sets to be embedded as shown:

Posted Image

Click OK and lock the layer "content".
Now you have a TextField filling the stage, and will contain rendered HTML code.

- Click on the first frame on the layer "actions" and open the Actions panel (F9).
- Write HTML code first, before adding CSS stylesheets. Create a function addHTML() with no return value -> void. Don't forget to call the function!

function addHTML():void
{
	
}

addHTML();     // Call the function addHTML()


Now it's time to add HTML. Most of you will know that you can add text to a TextField dynamically by changing the "text" property. For the purpose of this tutorial, you will need to use the "htmlText" property. First of all, add an empty String to the TextField to make sure the TextField is 100% empty.

htmlField.htmlText = "";     // Add empty string


This tutorial does not cover writing (x)HTML code. Keep adding HTML code to the TextField with the += operator as shown below. You can give your TextField a background color by first setting the "background" property of the TextField to true, and then setting the "backgroundColor" property of the TextField to any color of your choice e.g. 0xffa500 (== #ffa500).

function addHTML():void
{
	htmlField.htmlText = "";     // Add empty string
	
	htmlField.htmlText += "<p class='title'>dream.in.code</p>";
	htmlField.htmlText += "<p class='subtitle'><a href='http://www.dreamincode.net/'>www.dreamincode.net</a></p>";
	htmlField.htmlText += "<p class='tutorials'><br />- Programming Tutorials -</p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum48.htm'>C++</a></p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum51.htm'>Visual Basic</a></p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum50.htm'>Java</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum92.htm'>VB.NET</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum85.htm'>C#</a></p>";
	htmlField.htmlText += "<p class='snippets'><br />- Code Snippets -</p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=8'>ActionScript</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=5'>ASP</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=20'>Assembly</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=17'>C</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=19'>C#</a></p>";
	
	htmlField.background = true;
	htmlField.backgroundColor = 0xffa500;
}

addHTML();     // Call the function addHTML()


At this point, save your Flash File. Test your Flash Movie! You should now see your rendered HTML text.

- Is it possible to add CSS to this HTML text? Yes, it is! By parsing a CSS stylesheet dynamically with ActionScript. To do this, you need to create a CSS file. I use Adobe Dreamweaver CS3 to create my CSS stylesheets, but you can do them in any text editor of your choice. Save your CSS file as soon as you finish it, and make sure the file extension is ".css". Unfortunately, this tutorial does not cover writing CSS code either, so here's what my CSS file looks like:

/* CSS Document */

.title {
font-size: 72px;
text-decoration: underline;
}

.subtitle {
font-size: 36px;
}

.tutorials, .snippets {
font-size: 18px;
}

p {
color: #ffffff;
text-align: center;
}

a:link {
color: #5c606a;
}

a:hover {
color: #ffff00;
}


- It's time to load the CSS file with ActionScript. Create a variable "cssLoader" (datatype: URLLoader) and a variable "css" (datatype: StyleSheet).

var cssLoader:URLLoader;
var css:StyleSheet;


These variables are now uninitialized. To perform initializations, it's a habit of mine to use a function init() with no return value -> void. Here's what my init() function looks like:

function init():void
{
	cssLoader = new URLLoader();     // Create a new URLLoader object
	cssLoader.addEventListener(Event.COMPLETE, cssLoaderCompleteHandler);     // Add an event completion listener
	cssLoader.load(new URLRequest("default.css"));     // Load "default.css" with a new URLRequest object
}

init();     // Call the function init()


Don't forget to call the function init()! Replace "default.css" with your CSS file name. If your CSS file is not in the same folder as the Flash file, specify its directory too.

Next thing to do is writing the function cssLoaderCompleteHandler(). This function will be executed when the external CSS file was loaded successfully.

function cssLoaderCompleteHandler(event:Event):void
{
	css = new StyleSheet();     // Create a new StyleSheet object
	css.parseCSS(cssLoader.data);     // Parsing CSS
	htmlField.styleSheet = css;     // Linking CSS to TextField
	cssLoader.removeEventListener(Event.COMPLETE, cssLoaderCompleteHandler);     // Remove the event completion listener (optional)
}


The last thing you can do is moving the addHTML() function call into the cssLoaderCompleteHandler() function. Doing this will also show the HTML text, but only when the CSS file was loaded successfully.

FINAL CODE:

var cssLoader:URLLoader;
var css:StyleSheet;

function init():void
{
	cssLoader = new URLLoader();     // Create a new URLLoader object
	cssLoader.addEventListener(Event.COMPLETE, cssLoaderCompleteHandler);     // Add an event completion listener
	cssLoader.load(new URLRequest("default.css"));     // Load "default.css" with a new URLRequest object
}

function cssLoaderCompleteHandler(event:Event):void
{
	css = new StyleSheet();      // Create a new StyleSheet object
	css.parseCSS(cssLoader.data);     // Parsing CSS
	htmlField.styleSheet = css;     // Linking CSS to TextField
	addHTML();     // Call the function addHTML()
	cssLoader.removeEventListener(Event.COMPLETE, cssLoaderCompleteHandler);     // Remove the event completion listener (optional)
}

function addHTML():void
{
	htmlField.htmlText = "";     // Add empty string
	
	htmlField.htmlText += "<p class='title'>dream.in.code</p>";
	htmlField.htmlText += "<p class='subtitle'><a href='http://www.dreamincode.net/'>www.dreamincode.net</a></p>";
	htmlField.htmlText += "<p class='tutorials'><br />- Programming Tutorials -</p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum48.htm'>C++</a></p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum51.htm'>Visual Basic</a></p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum50.htm'>Java</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum92.htm'>VB.NET</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/forums/showforum85.htm'>C#</a></p>";
	htmlField.htmlText += "<p class='snippets'><br />- Code Snippets -</p>";
	htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=8'>ActionScript</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=5'>ASP</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=20'>Assembly</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=17'>C</a></p>";
     htmlField.htmlText += "<p><a href='http://www.dreamincode.net/code/browse.php?cid=19'>C#</a></p>";
	
	htmlField.background = true;
	htmlField.backgroundColor = 0xffa500;
}

init();     // Call the function init()


RESULT SCREENSHOT:

Posted Image

That's about it! I hope this tutorial was useful for some people.
By the way, don't be lazy by using copy-paste. Write the code yourself and try to understand what you're doing. Otherwise, you're only making it harder for yourself, not me. =)

This post has been edited by macosxnerd101: 22 July 2010 - 09:58 AM
Reason for edit:: Updated image links


Is This A Good Question/Topic? 0
  • +

Replies To: HTML in Flash + Loading external CSS stylesheets with ActionScript 3.0

#2 shougon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-June 09

Posted 07 June 2009 - 09:27 PM

i can't see images. please help me.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1