Styling a Simple Flash Web Site with Stylesheet

Most websites today use stylesheet to manage the appearances (e.g. font size, font color, etc.). In this Flash ActionScript tutorial, we will also use stylesheet to manage the appearance of our simple Flash web site.

Flash ActionScript simple website tutorial example display here. Your flash player version is too old to see this flash example file!

Flash Tutorial Content:

In previous Flash ActionScript tutorial of making a basic web site, the text is a little boring. Actually the format of text content in the TextField can easily be controlled with a stylesheet. Let's see how to do it.

The completed Flash Movie of this tutorial is shown as above. You may play around to see how it works.

Flash ActionScript Codes:

////////////////////////////////////////
////////// Load the Stylesheet //////////
///////////////////////////////////////

// Create a new URLRequest object to load the stylesheet.css
var stylesheetURL:URLRequest = new URLRequest("stylesheet.css");

// Create a new URLLoader object
var stylesheetLoader:URLLoader = new URLLoader();

// Load the stylesheet.css
stylesheetLoader.load(stylesheetURL);

// Add Event Listener to the stylesheetLoader object
// Call function stylesheetLoadCompleted when loading is COMPLETED
stylesheetLoader.addEventListener(Event.COMPLETE, stylesheetLoadCompleted);

function stylesheetLoadCompleted(evt:Event):void {

var cssFile:StyleSheet = new StyleSheet();
cssFile.parseCSS(URLLoader(evt.target).data);
content_txt.styleSheet = cssFile;

}

///////////////////////////////////////
////////// Load the Text File //////////
//////////////////////////////////////

//Create a new loader to load the text file
var myURLLoader = new URLLoader();

//Specify the data format
myURLLoader.dataFormat = URLLoaderDataFormat.TEXT;

// Call function homePage when Flash Movie loads
homePage(null);

//Listen to when the loading COMPLETE
myURLLoader.addEventListener(Event.COMPLETE, loadTextFile);

function loadTextFile(evt:Event) {

//Already set in the Parameters window
//content_txt.wordWrap = true;

//Load the text file to TextArea
//replace double empty line with a single empty line
//tField.text = evt.target.data.replace(/\r/g,"");

content_txt.htmlText= evt.target.data;
content_txt.background = true;
content_txt.backgroundColor = 0xFFF9BF;

}

///////////////////////////////////////////
////////// Buttons and Functions //////////
//////////////////////////////////////////

//Add event listener to the Home button
home_btn.addEventListener(MouseEvent.CLICK, homePage);

//Add event listener to the About Us button
aboutUs_btn.addEventListener(MouseEvent.CLICK, aboutUs);

//Add event listener to the Contact Us button
contactUs_btn.addEventListener(MouseEvent.CLICK, contactUs);

function homePage(evt:MouseEvent):void {

//Load the text file (home-2.txt)
myURLLoader.load(new URLRequest("home.txt"));

}

function aboutUs(evt:MouseEvent):void {

//Load the text file (about-us-2.txt)
myURLLoader.load(new URLRequest("about-us-2.txt"));

}

function contactUs(evt:MouseEvent):void {

//Load the text file (contact-us-2.txt)
myURLLoader.load(new URLRequest("contact-us-2.txt"));

}

Download Flash Source File:

Simple-Website-2.fla

External Text Files (Webpages)

home-2.txt

about-us-2.txt

contact-us-2.txt

Remarks:

This Flash ActionScript tutorial show how to use a stylesheet to control the text format of Flash website.