Building the Front End of a Content Management System for Flash - The ActionScript
(Page 4 of 4 )
Now it's time for some ActionScript. First, we should create an "actions" layer in our time line. This allows us to keep our actions all in one place, which will be important for later development. Now, open your Actions Panel, which is usually at the bottom of your screen. If you have moved it or closed the panel entirely it may not be visible to you; to open it, go to Window > Development Panels > Actions, or just press F9 on your keyboard.
Here is the ActionScript code that we will be using, which I will explain further:
//load the dynamic text variables from an external text file
myData = new LoadVars();
myData.onLoad = function(){
content1_txt.text = this.content1_txt;
};
myData.load("data.txt"); stop(); |
The very first line is a comment. The first actual line of code reads:
The code begins with the "new" keyword, which is standard syntax for creating a new instance of an Object and assigning that new instance to a variable name. This statement creates a new instance of the built-in LoadVars Object, and assigns it to the myData variable, which we could have named anything we liked.
The LoadVars class allows Flash to communicate and exchange information from an external source, like a server or a database. (The new LoadVars class can be located in Flash MX 2004 in your Actions frame under Built-In Classes > Core > Client/Server > LoadVars > new LoadVars.)
The LoadVars class is an alternative to the loadVariables class in Flash MX, which gives more flexibility in how variables can be written or displayed. Both LoadVars and loadVariables allow Flash to communicate with an external data source, but LoadVars offers methods, being a class, which loadVariables doesn't support, as it is a global function.
Let's look at the next part:
myData.onLoad = function(){
content1_txt.text = this.content1_txt;
}; |
The next part of the script is telling Flash to that once the Flash movie loads, if successful, it should also load the external data into the variable content1_txt, which is indicated as text by the .text suffix. Here, we are defining the event handler for the onLoad event. When the loader receives data from the server, the event handler will be called.
Once all the data is loaded, all the variables will be stored into the LoadVars instance which makes the call. Upon the call, it returns a Boolean value into the onLoad handler, which then indicates whether the load operation ended in success (true) or failure (false).
When all the variables have been loaded and parsed by the LoadVars object, the onLoad method is executed, utilizing the custom function we defined. We have a text area on the stage whose instance name is content1_txt. The part of the script before the equals sign identifies that text field as our target. The single equals sign is the assignment operator. Let's look at the part after the equals sign. The word "this" refers to the LoadVars Object we just created: "myData." The myData Object now has a property, namely our variable, or instance, name.
(Note: As to the usage of "this" inside the myData onLoad method, we are referring to the myData Object itself, not the Flash timeline.)
myData.load("data.txt"); stop (); |
This line is simply pointing Flash to the external file from which to extract the data in order to place it into your dynamic text area, now that it knows what to do with it. Remember, Flash waits until the variables are loaded and executes the onLoad handler, which we have instructed to carry out our function. We place the onLoad event handler before the method (load), because we should tell the script what to do with the data before we actually have it.
Now we add our time line control stop (); command, which tells the Flash movie to stop playing at this point until we are ready to do something else. Now, let's test our movie by typing directly into our text file named "data.txt," which will need to be saved in the same folder on our hard drive as our Flash movie. We'll need to make sure our variable "content1_txt=" prefixes our text. In this case, I've typed "This is the text I want to display." It should read exactly as in the screen shot below, with no spaces between your variable name, the equals sign (=), or your text:
To test our movie, simply go to Control > Test Movie, and you should see something similar to the screenshot below. If so, congratulations! Your dynamic text is working correctly; if not, you've done something wrong. Usually a typo will result in a problem, or a space between your equals sign (=) and your text or variable name.
In wrapping up the Flash part of our simple content management system, we know what we want our Flash CMS to do, and where to load its variables from. So why even go further? We definitely could stop here and just let you edit the text files without ever having to mess with HTML forms or PHP, but remember, our goal in these tutorials is not to demonstrate dynamic text in Flash alone, but to provide a simple management system for a client we don't want sneaking around in our database text files to begin with. So stay tuned for the back end in the next article!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 12 
