The TextArea Component comes standard with Flash MX 2004. While there are dozens of variables you can set for the component, this tutorial will focus on loading an external text file into a TextArea and formatting it using a CSS.
1) Start up a new Flash file in Flash MX 2004 and drag-n-drop the TextArea Component onto your stage. Specify the size of the component and give it an instance name of "mytextbox" through the Properties Panel.
2) Add a new row to your timeline and drag-n-drop a button component onto your stage. Give it an instance name of "mybutton" through the Properties Panel. For this tutorial I labeled the button "Load Text".
3) Add another row to your timeline and name it "Actions". This is the frame you'll be putting all of your Actionscript code.
Name the other rows accordingly.
4) Open a text editor and cut-n-paste the following text into it. Save the file as textarea_style.css.
<span class="content">This book was a gift from my grandfather almost six years ago. He's a got room in his house in North Texas full of old, dusty books. Somehow, he found out how big of a Patton fan I am and General Patton's Principles made it into my hands.</span><br /><br />
<span class="content">This book has stayed by my side since.</span><br /><br />
<span class="content">I've got a shelf full of Patton books. Some good, some bad, and plenty that are almost exact copies of each other. The thing that sets this book apart from the rest is its author. Porter B. Williamson served under Patton for several years leading up to the United States entering WWII.</span><br /><br />
<span class="content"><a href="https://scottmanning.com/archives/000663.php">Read the full review</a></span>
The preceding text already has styles and HTML code in it.
6) Go back to Flash. On the first frame of the "Actions" row in the Timeline, add the following code:
// Load the CSS file and attach it to my mytextbox
mytextboxstyle = new TextField.StyleSheet();
mytextboxstyle.load("textarea_style.css");
mytextbox.styleSheet = mytextboxstyle;
The preceding starts a new StyleSheet Class, loads the CSS file, and applies it to the TextArea.
7) On the same frame, add the following code:
// Specify mytextbox to read text as HTML
mytextbox.html = true;
// Specify mytextbox to wrap text
mytextbox.wordWrap = true;
// Specify mytextbox to have a scrollbar
mytextbox.multiline = true;
This will have the TextArea format any HTML code that is in it, wrap the text, and add a scrollbar.
8) Following that code, cut-n-paste the following:
mybutton.onRelease = function() {
loadtextContent = new LoadVars();
// Load the text file into my movie
loadtextContent.load("textarea_content.txt");
// Start a new function to load the text file
loadtextContent.onLoad = function(success) {
if (success) {
// loads the file into mytextbox
mytextbox.text = this.mytext;
}
};
};
This is the final piece to our file. This code adds a function to our button so when it is clicked, the text file is loaded and placed in the TextArea component.
