Tech

Guides

Business Applications ▪ Database Management ▪ Disaster Recovery ▪ Enterprise Servers & Storage ▪ IT Security ▪ Java ▪ Microsoft Office Suite ▪ Network Admin ▪ Open Source ▪ SMB ▪ SOA ▪ Tech Management ▪ Software/Web Development ▪ Windows Server ▪ Wireless Tech

Software/Web Development TechGuides

XML drives this dynamic Flash MX application download

By Mike Britton, Builder.com
Tuesday, May 20, 2003 12:01 PM

With the introduction of XML in Flash MX, developers can create more efficient, dynamic applications. To see these features in action, download the source code for this sample app.

The ability to parse XML and rely on XML-driven data in MX opens up Flash’s development potential. With this functionality, you can modify menu items by changing an XML file instead of rehashing your ActionScript.

In this article, we’re going to construct an interface that uses Flash’s animation power to display dynamic content. When we’re finished, we’ll have a small piece that could be used as a product display. You can download the source code for this application here.

What you’ll need

Flash MX
The source files for this project
Intermediate experience in XML and Flash ActionScript

Although it’s a good idea to separate your ActionScript into includes (#include yourFile.as) when it becomes too complex, we won’t be doing that here. Our application is simple enough for us to do most of our coding in the Flash MX environment. When we’re finished, you may decide to extend what we’ve built in various ways. If so, you'll want to keep an eye on your code and split it into external ActionScript files as soon as you feel it’s necessary.

The .fla file
Start by opening Flash MX and loading xml_interface.fla. Your screen should look like Figure A.

Figure A

Your project inside Flash MX

The elements of this small yet potent Flash interface have been placed on the screen and given instance names menu and pages. Let’s work through a description of each to gain more knowledge of the elements that make up our interface.

Navigation
Since our interface is small, we’ll want to conserve screen space to focus the user’s attention on the content. Our interface will contain code for a menu that hides itself after a given period of time elapses. Figure B shows the application window with the menu hidden.

Figure B

Content
The movie clip pages represents the content, as shown in Figure C.

Figure C

The movie clip pages will be duplicated vertically as many times as there are nodes with the name page in the XML file, as shown in Listing A. Inside pages, each individual page clip contains two text fields, one to display the page title and another (with a scroll bar component) to display the page’s text content.

The XML file in Listing A represents a two-level-deep site structure. Our ActionScript will load this file and build itself based on the node values and attributes expressed in content.xml.

Code on the menu
Generally speaking, it’s not good practice to locate your ActionScript code directly on movie clips. It makes it more difficult to keep track of what’s going on, and it makes returning to the project about as pleasant as a second-degree burn. For our purposes, it’s practical to include code on movie clip menu, as you’ll see when you click on it (it’s on the main stage) and view its code, shown in Listing B.

The event handlers in Listing B control the movement of instance menu. You can view them in Flash by clicking on the menu clip on the main stage.

So how does menu know what to do and when to do it? On the main timeline is a function that looks for certain conditions and reports them to the showMenu() and hideMenu() functions that are embedded on menu, as shown in Table A.
Table A

19	this.menuMove = function(x)
20	var mousePos = x;
21	if (mousePos<=20) {
22	// Tell menu to show itself
23	_root.menu.showMenu();
24	} else if (mousePos>=190) {
25	// Tell menu to hide itself
26	_root.menu.hideMenu();
	}
	}