Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

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.

Please update flash player to view this Flash ActionScript tutorial!

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:

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.