Before we get into scripting our functions, there is one little piece of business I want to take care of, and that's some of the cosmetics of the message box itself. If you've looked at the components much at all, you realize that the "skins", the appearance, of the components can be changed.
When you click-drag a component onto your stage, MX installs all the pieces that make it up the component into your library already neatly organized into folders. This really makes it easy to find what you want to change, and keeps you from overwriting something that belongs to another object.
"Out of the box," all components are rendered in various shades of gray, which is mildly pleasing, and can be used "as is" in most any situation. However, I wanted a little color in the title bar of my message box, and wanted it to be a dark green to match up with the rest of the site design.
So I simply located the UI components folder in the library, worked my way down until I found the title area among the message box skins. I double-clicked it's icon to edit it, which brought it up on the stage. The title area is just a single rectangular shape, so using the fill tool, I selected my color and changed the fill color to green. All there is to it!
However, black type (the default color) is difficult to read on the dark green title bar. So I decided to change the title text to white. There are some parameters that can be varied on each individual instance of a component. However, the title box text, like the color, requires that you make a global change affecting all instances of the message box, and this is done with Action Script.
I only need to do this once, so I'm putting the code to make this change in the first keyframe of the "actions/vars" layer along with my other initialization code. At the same time, I'm going to reduce the size of the button-- 100 pixels wide is a bit too much for that little "OK" button, so I'm changing that to 50 pixels wide.
Lines 1-9 were entered previously, so we're going to skip a space, and go to Line 11. Here's the code to change the text color/style. Note that the color is given in hexidecimal numbers, and that you must invoke the applyChanges method once all your parameter changes have been listed. A run-down of these global parameters can be found in the help files under Window->Component Help- UI Set 2" in the drop-down menu.
Next we move on to scripting the functions.
|» Level Intermediate|
Rating: 9 Votes: 81
|Tom Watson is a Flash developer currently residing in Nashville, Tennessee. He's been an independant contractor in the computer business since 1989, working on web projects since the web was introduced to the Internet in 1994.|
|Download the files used in this tutorial.|
|Download (569 kb)|
|More help? Search our boards for quick answers!|