- What are Components?
- OK, Which Components Do I Get with Flash MX 2004?
- Binding an Array to a Component in Flash MX 2004
- Controlling the Halo Theme for Flash MX 2004 Components
- Building an Application with Components
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building an Application with Components
Flash MX 2004 components can do more than single functions and look pretty on the page. You can create applications by combining them together.
The following exercise demonstrates how you can mix components to build a simple Menu Bar driven solution. To complete this exercise in its entirety, you need to be using Flash MX 2004 Professional.
The application you build is constructed completely with ActionScript; you don't add any content to the Stage. You see how this can give you unparalleled control over your components display.
Let's begin. Create a new movie in Flash MX 2004. Save the movie as myComponents.fla.
Before you begin creating your ActionScript code, you need to add some elements to the Library. The Library has a feature in it called Linkage that allows you to add a special name to a Library item. The Linkage name can then be called by ActionScript. All components have default Linkage names, which happen to be the names of the components. Drag onto the Stage the Alert, Button, DateChooser, Label, MenuBar, TextArea, and Window components. Adding a component to the Stage adds the component to your Library. You don't actually need the components on the Stage, so you can delete them immediately. If you open your Library, you see that all the components you dragged onto the Stage are still there.
Movie clips can also have Linkage names that can be called from your ActionScript. From the Library panel, select the New Symbol icon in the bottom-left corner. Select the movie clip behavior and name the clip sample. Select the Advanced button to expand the Symbol Properties window. Select the Export for ActionScript check box. Add the identifier name sample and click OK. This creates a new movie clip called Sample with a Linkage of sample. Flash MX 2004 is now in Edit mode for the sample movie clip. Select the Text tool and type Sample onscreen. Reposition the text to 10,10.
Move back to the main movie. You should still not have anything on the Stage. In the Timeline, you have a default layer called Layer 1. Select Frame 1 of this layer and open the Actions Panel. All the ActionScript is now added to this layer.
The first thing you need to do in ActionScript is import the class properties of each of the components you added to the Library. You have several types of components (controls, containers, and managers). You need to double-check with the Help files to make sure you are referencing the correct component type when you use additional components. You can import the components in the Library with the following ActionScript:
Now that the components are imported, you can begin to control them. Start by dynamically creating a MenuBar component:
Preview your movie and you see a menu. Now, you need to add some menu titles. The MenuBar is called myMenuBar. Using the MenuBar addMenu property, you can add additional menu title titles to myMenuBar with the following ActionScript:
A MenuBar is of no use if you can't add menu items to it. In the above ActionScript, you created a variable for each MenuBar title. By referencing the MenuBar title variables, you can create menu items:
At this point, you can preview your movie and select menu items. They don't do much at this point. To make your MenuBar interactive, you need to use the Listener object. A Listener works with a movie clip, such as component, to track certain types of events. There are two parts to a Listener. You need to define a Listener object and what it will do when the listener is triggered. Next, you need to associate the listener with a movie clip or component. The following ActionScript creates both the Listener object and then attaches it to the MenuBar.
There's a lot happening here, so I will break it down. To begin with, you need to create a new Listener object named fileListen. The change action is being associated with the listener, which lets you check when something changes. You then create a function that looks to find the name of the MenuBar item. When a name is identified, a series of actions can be associated.
The first two case values in the Switch statement print a response to the Output window using the Trace statement:
If you preview your movie, you see that these two statements print the item definition (you see that Flash uses XML statements to define the location of the MenuBar item).
Additional components can be opened and closed from the MenuBar. The following ActionScript calls the DateChooser component, gives it the name myCalendar, and places it into level 3 on the stage.
A component can also be closed through using the destroyObject property, which is done with the following ActionScript:
To make things more interesting (or more complex), you can have the MenuBar call additional components, populate the components with content, and have the new components close themselves. That can be seen with the following ActionScript that dynamically creates a TextArea component, populates the TextArea with a HTML-formatted text message, and adds a Button component. When the Button is selected, both the Button and TextArea are destroyed.
The Window component, which inherits the PopUp Manager component to the Library, can also be added to the ActionScript. Here, you see that you are adding the sample movie clip you created to populate the dynamic Window component:
Traditional ActionScript commands, such as getURL, can also be added to the MenuBar listener. The following statement is perfectly legal:
Finally, you can add Alert components with different styles and content:
The listeners at the end of your ActionScript track which menu item you select. This in turn triggers an event.
Preview your movie. You now have the foundation for a fully functional application.
import mx.controls.Alert; import mx.controls.Button; import mx.controls.MenuBar; import mx.containers.Window; import mx.managers.PopUpManager; import mx.controls.TextArea; import mx.controls.Label; import mx.controls.DateChooser;
createClassObject(MenuBar, "myMenuBar", 2); myMenuBar.move(0, 0); myMenuBar.setSize(550, 22);
createClassObject identifies which component you are using, the unique name you are giving the component, and the level on the Stage where the component will be positioned. After a name has been given to a component, you can reference the component with ActionScript as if it were a named movie clip. Here, you can see that the component is using the new move property that repositions an object along the X and Y axes. The setSize method resizes the MenuBar component.
var menuItemFile = myMenuBar.addMenu("File");
var menuItemEdit = myMenuBar.addMenu("Edit");
var menuItemSpecial = myMenuBar.addMenu("Welcome Message");
var menuItemWindow = myMenuBar.addMenu("Window");
var menuItemHelp = myMenuBar.addMenu("Help");
menuItemFile.addMenuItem({label:"Detection",
instanceName:"traceInstance"});
menuItemFile.addMenuItem({label:"Another Detection",
instanceName:"testInstance"});
menuItemEdit.addMenuItem({label:"Open A Calendar",
instanceName:"openCalInstance"});
menuItemEdit.addMenuItem({label:"Close A Calendar",
instanceName:"closeCalInstance"});
menuItemSpecial.addMenuItem({label:"Welcome",
instanceName:"welcomeInstance"});
menuItemWindow.addMenuItem({label:"What's New",
instanceName:"whatIsNewInstance"});
menuItemWindow.addMenuItem({label:"About Us",
instanceName:"aboutInstance"});
menuItemWindow.addMenuItem({label:"Got to the Web",
instanceName:"webInstance"});
menuItemHelp.addMenuItem({label:"Help", instanceName:"helpInstance"});
menuItemHelp.addMenuItem({label:"ActionsScript Help",
instanceName:"scriptInstance"});
var fileListen = new Object();
fileListen.change = function(evt) {
var menu = evt.menu;
var item = evt.menuItem;
switch (item) {
case menu.traceInstance :
trace(item);
trace("this tested true");
break;
case menu.testInstance :
trace(item);
trace("this also worked");
break;
case menu.openCalInstance :
createClassObject(DateChooser, "myCalendar", 3);
flightCalendar.move(50, 50);
break;
case menu.closeCalInstance :
destroyObject("myCalendar");
break;
case menu.welcomeInstance :
createClassObject(TextArea, "welcomeTextArea", 3);
welcomeTextArea.move(50, 50);
welcomeTextArea.setSize(340, 110);
welcomeTextArea.html = true;
welcomeTextArea.text = " <font face=\"Arial, Helvetica, sans-
serif\" color=\"#999999\">Welcome to the <b>Flash</b> MenuBar
Control.</font>";
createClassObject(Button, "myWelcomeButton", 4);
myWelcomeButton.label = "Close";
myWelcomeButton.move(170, 170);
myWelcomeListener = new Object();
myWelcomeListener.click = function() {
destroyObject("welcomeTextArea");
destroyObject("myWelcomeButton");
};
myWelcomeButton.addEventListener("click", myWelcomeListener);
break;
case menu.whatIsNewInstance :
myWindow = PopUpManager.createPopUp(_root, Window, true,
{title:"What's New", contentPath:"sample", closeButton:true});
myWindow.setSize(340, 110);
myWindow.move(50, 50);
myWindowListener = new Object();
myWindowListener.click = function() {
myWindow.deletePopUp();
};
myWindow.addEventListener("click", myWindowListener);
break;
case menu.aboutInstance :
aboutWindow = PopUpManager.createPopUp(_root, Window, true,
{title:"About Us", contentPath:"sample", closeButton:true});
aboutWindow.setSize(340, 110);
aboutWindow.move(50, 50);
aboutWindow.setStyle("borderStyle", "inset");
aboutWindow.setStyle("themeColor", "haloOrange");
aboutWindowListener = new Object();
aboutWindowListener.click = function() {
aboutWindow.deletePopUp();
};
aboutWindow.addEventListener("click", aboutWindowListener);
break;
case menu.webInstance :
getURL("http://www.news.com", "_new");
break;
case menu.helpInstance :
Alert.show("There is no help at the moment");
break;
case menu.scriptInstance :
var myAlert = Alert.show("There is no ActionScript Help", "Sorry,
no help", Alert.OK | Alert.CANCEL);
myAlert.setStyle("borderStyle", "inset");
myAlert.setStyle("themeColor", "haloOrange");
myAlert.setSize(340, 110);
break;
default :
trace("no case tested true");
}
};
//
// Attach listeners to menuBar buttons
//
menuItemFile.addEventListener("change", fileListen);
menuItemEdit.addEventListener("change", fileListen);
menuItemSpecial.addEventListener("change", fileListen);
menuItemWindow.addEventListener("change", fileListen);
menuItemHelp.addEventListener("change", fileListen);
case menu.traceInstance :
trace(item);
trace("this tested true");
break;
case menu.testInstance :
trace(item);
trace("this also worked");
break;
case menu.openCalInstance : createClassObject(DateChooser, "myCalendar", 3); flightCalendar.move(50, 50); break;
case menu.closeCalInstance :
destroyObject("myCalendar");
break;
case menu.welcomeInstance : createClassObject(TextArea, "welcomeTextArea", 3); welcomeTextArea.move(50, 50); welcomeTextArea.setSize(340, 110); welcomeTextArea.html = true; welcomeTextArea.text = " <font face=\"Arial, Helvetica,
case menu.whatIsNewInstance : myWindow = PopUpManager.createPopUp(_root, Window, true,{title:"About Us", contentPath:"sample", closeButton:true}); aboutWindow.setSize(340, 110); aboutWindow.move(50, 50); aboutWindow.setStyle("borderStyle", "inset"); aboutWindow.setStyle("themeColor", "haloOrange"); aboutWindowListener = new Object(); aboutWindowListener.click = function() { aboutWindow.deletePopUp(); }; aboutWindow.addEventListener("click", aboutWindowListener); break;
case menu.webInstance :
getURL("http://www.news.com", "_new");
break;
case menu.helpInstance :
Alert.show("There is no help at the moment");
break;
case menu.scriptInstance :
var myAlert = Alert.show("There is no ActionScript Help",
"Sorry, no help", Alert.OK | Alert.CANCEL);
myAlert.setStyle("borderStyle", "inset");
myAlert.setStyle("themeColor", "haloOrange");
myAlert.setSize(340, 110);
break;
As you can see from this article, components are extremely useful. The uses keep on increasing. Today, Flash MX 2004 Professional ships with 33 components. Here, you have created an application with only eight components. Your final file size only 77Kb. You can find a lot of additional information on components within the Help panel for Flash MX 2004. Now you can construct applications and bind them together with ActionScript.