3.5 Loading Text

In this exercise we will continue our approach to separate content from the main project. This time, we’ll look into loading external text files, by using the example of a “news” text file, containing a news header and a news main text.

1. First, some thoughts on loading text into Flash. Flash reads text from simple text files (“.txt”) which can be generated by most word processors, from the most complex to the most humble, such as TextEdit for Macintosh or NotePad for Windows. The conversion from the default format of these programs to “.txt” format is done through a specific “Make Plain Text” command or in the “save as” command of these applications.

The method we will use in Flash to deal with external text is to use the URLLoader class, a “loader/container” type of class similar to what we have seen for sound (the Sound class) and for graphical assets (the Loader class). URLLoader deals with variables using “URL encoded” (or percent encoding) formatting. External text will be defined as variables. Passing several variables in this fashion involves a structure of the type: “variable1=definition1&variable2=definition2”. You will be probably familiar with this type of structure when accessing some dynamic URL created through a database. It is important that there is no space before or after the “=” sign separating variable name and variable definition, and that there is no space between the “&” preceding the second or following variable names and the variable names themselves.

Simple HTML can be use to format your text. If you use it, the text should be displayed with the “htmlText” property, and not with the “text” property of the TextField class. A list of supported HTML tags (using the “a” tag for links can be particularly useful) can be found here: http://learnola.com/2008/12/03/actionscript-3-tutorial-using-html-and-css/

For displaying long text, TextField is not an ideal choice, as it lacks a scroll bar. The TextArea component would be a better choice. However, components are out of scope of these learning materials. In any case, you can learn more about TextArea, and other components, from here: http://mlab.taik.fi/mediacode/archives/tag/components

2. Moving on to the exercise, let’s create a text file in our word processor of choice. I am using TextEdit for Mac. Let’s create a “myTitle” and “myBody” variables. The second (and following if we had any) variables should be preceded by &, as we saw. I will use text copied from this entry in the Adobe Flash Platform blog: http://www.mikechambers.com/blog/2010/08/06/flash-arduino-tips-tricks-and-gotchas/.

The text would look like this:

myTitle=Flash / Arduino Tips, Tricks and Gotchas
&myBody=This is a ongoing post where I will post tips, tricks and gotchas that I learn while developing with Flash and the Arduino. I will update this from time to time with more information.

Make sure you are using the correct BAUD Rate

If your Flash / Arduino communication does not seem to be working, then make sure that you have set the BAUD rate to the same rate in both your Arduino code, and the configuration file for your Serial Proxy (such as TinkerProxy).

Slow down the BAUD Rate

If you are getting weird errors, or some messages between Flash and Arduino seem to get dropped, then try slowing down your BAUD rate to 9600 and see if that fixes the issue.

If it does, you can then try and debug and figure out if any particular thing in your code was causing the problem.

I will convert it to plane text by selecting “Make Plain Text” in the Format menu, and save it as “news.txt”.

3. Let’s now move to Flash. Let’s create a new Flash file, and save it in the same folder as our “news.txt” file.

4. Now let’s create two text fields, one for the title and one for the body text:

var newsTitle:TextField = new TextField();
stage.addChild(newsTitle);
newsTitle.x=50;
newsTitle.y=50;
newsTitle.width=450;
newsTitle.height=50;
newsTitle.border=true;

var newsBody:TextField = new TextField();
stage.addChild(newsBody);
newsBody.x=50;
newsBody.y=150;
newsBody.width=450;
newsBody.height=200;
newsBody.border=true;
newsBody.wordWrap= true;

Note that in the last line of the code to the second text field I set the property “wordWrap” to “true”, therefore forcing Flash to create line breaks.

5. Following the same logic we have seen in the Sound and Loader classes, we will create a URLRequest object to load the file (myURL), and container to receive it – in this case, a URLLoader object (newsLoader). Then we can load myURL into newsLoader:

var myURL:URLRequest=new URLRequest("news.txt");
var newsLoader:URLLoader = new URLLoader();
newsLoader.load(myURL);

6. Now we will create a listener for the loading process. It will be associated with newsLoader, and wait until the text file is loaded to execute our function (showNews). The appropriate event for this is Event.COMPLETE:

newsLoader.addEventListener(Event.COMPLETE, showNews);

7. We will now build our showNews function. First, we extract (or parse) all the variables from the text file, and put them in a special variables container belonging to the URLVariables class (let’s call it newsVariables). We can then acess our text file’s variables by name and put them in the corresponding text fields:

function showNews(e:Event):void {
var newsVariables:URLVariables=new URLVariables(newsLoader.data);
newsTitle.text=newsVariables.myTitle;
newsBody.text=newsVariables.myBody;
}

8. This would be the whole code:

var newsTitle:TextField = new TextField();
stage.addChild(newsTitle);
newsTitle.x=50;
newsTitle.y=50;
newsTitle.width=450;
newsTitle.height=50;
newsTitle.border=true;
var newsBody:TextField = new TextField();
stage.addChild(newsBody);
newsBody.x=50;
newsBody.y=150;
newsBody.width=450;
newsBody.height=200;
newsBody.border=true;
newsBody.wordWrap= true;

var myURL:URLRequest=new URLRequest("news.txt");
var newsLoader:URLLoader = new URLLoader();
newsLoader.load(myURL);
newsLoader.addEventListener(Event.COMPLETE, showNews);
function showNews(e:Event):void {
var newsVariables:URLVariables=new URLVariables(newsLoader.data);
newsTitle.text=newsVariables.myTitle;
newsBody.text=newsVariables.myBody;
}

And the end result would look like this:

Download files: ex19-load_text.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 3. Project Management and tagged . Bookmark the permalink.

One Response to 3.5 Loading Text

  1. Pingback: Flash and ActionScript | Software Studies for Media Designers

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s