Building the Front End of a Content Management System for Flash

The first thing we need to do is decide where we would like to place our dynamic text, or the part of our Flash movie that we can update or change from an external source. I want to note here that you can do this with a brand new Flash website and start from scratch, or you can do this with an existing website. I'll start with a new Flash document to demonstrate dynamic text and the rest of the tutorial, but it will work just as easily with a site one has already designed.

Let's open Flash, start a new document, and call it flash_cms.fla; you should have your basic tools available, as well as your Properties Inspector handy. Make the stage any size and color you'd like. For this tutorial, I've colored the stage a happy blue color and made it 500x300 pixels. 

Let's say you've decided where to place your dynamic text; we need to designate an area on the stage so that Flash knows it is dynamic text. Choose your Text Tool, and click on the stage where you've chosen to put your dynamic text. You can make your text area any size you like, but in an existing Flash movie or website, your text area size will probably depend on where you've already placed your other symbols. For the purpose of this demonstration, I have left the "Show border around text" option clicked, which is the small button to the left of the "Var:" input box, as shown in the first screen shot.

Normally I would leave this option disabled, because I want the text areas to blend smoothly into the other elements of the Flash movie or website. But for development and illustration purposes, it really comes in handy to show borders around your text, especially if you have other formatting in place with other graphic symbols or movie clips. 

Referring to the second screenshot, the blank white box centered on the stage is our dynamic text area with borders. We have "Multiline" selected as well, which will auto-wrap our text. This is good for content that has several lines.  There is also a Single-line option which is great for titles or headings; single-lines do not wrap. Okay, on to the good stuff!

The Dynamic Variables

We must somehow give Flash a way of being able to identify our dynamic text areas so that it can put our text in the right place. So, just like the use of instance names for symbols in Flash, we use them as well for our variables. 

Now, let's open the Properties Inspector. Choose "dynamic text" from the drop-down box, and then give it an instance name. Let's call this text area content1_txt. In the second screen shot above, I put a blue outline around the area where we tell Flash that this text area is dynamic text instead of static (at the lower left), and it is here that we place our variable's instance name.

Variables can be any name you wish to give them, but if you have many of these areas, you will obviously want to name them something that makes sense, such as mainContent_txt, or newsHeading_txt. Notice that I add a suffix to the variable; this is so that both I and Flash know that this is text, and not a button or a movie clip. It makes it much easier later when I'm looking at my ActionScript to see exactly which area I'm talking about; it is also the proper way to label instances in Flash.