Setting a Component Style

I l @ ve RuBoard

You can use ActionScript to apply styles to your Flash UI components , in order to customize their appearance to suit the look and feel of your movie. The FStyleFormat object lets you apply a style to specific component instances, while the globalStyleFormat object lets you apply a style to all components in your movie. These objects will not necessarily work for components other than the UI components included with Flash.

In the next exercise you will create a global style that will apply to all of the Flash UI components in your movie. You will then create another component style, using the FStyleFormat object, which you will apply to specific component instances. Start with guestbook6.fla open from the last exercise.

1. Open the Actions panel. Select frame 1 of the Actions layer, and add the following ActionScript:

     // arrow color   globalStyleFormat.arrow = 0xFFFFFF;  

   

   This ActionScript sets the arrow property of the globalStyleFormat object to 0xFFFFFF (white). The arrow appears in the button on the right side of the combo box. The globalStyleFormat object is accessible when you add a single instance of any Flash UI component to the movie, so you don't have to create a new object. A complete list of properties for the globalStyleFormat object can be found in the ActionScript Dictionary.

   NOTE

   The first line of code is a comment, so it's optional. It's a good idea to add comments to help you remember what each part of code does.

2. Now add this ActionScript:

     // text styles   globalStyleFormat.textColor = 0xCC0000;   globalStyleFormat.textFont = "Verdana"  ;  globalStyleFormat.textSize = 10;   globalStyleFormat.textSelected = 0xFFFFFF;  

   

   You should add this code to frame 1, following the code already there.

   This ActionScript modifies the text properties of all the components in the movie. The textColor property sets the text color to red, the textFont property sets the font in each component instance to Verdana, and the textSize property sets the font size to 10 points. The textSelected property sets the color of selected text, which is text highlighted in the combo box, to white.

3. Add the following code:

     // component colors   globalStyleFormat.face = 0xFF6600;   globalStyleFormat.darkshadow = 0x000000;   globalStyleFormat.highlight = 0xCC0000;   globalStyleFormat.highlight3D = 0xFFC055;   globalStyleFormat.shadow = 0xCC0000;   globalStyleFormat.selection = 0xFF9933;  

   

   This ActionScript, which should be added to frame 1 following the code already there, modifies the colors for the buttons and outlines of each component. The face property modifies the main color of the componentfor the PushButton component that's the main button color, and for the ComboBox component it's the color of the button on the right side of the combo box. In this case, the face will be orange. The darkShadow property, which is the color of the inner border or shadow of a component, is black. The highlight property sets the color of the inner border or darker shadow of a component to red when it is selected. The highlight3D property sets the color of the outer border or light shadow of a component to light orange when it is selected. The shadow , which is set to the same color as the highlight , sets the color of the outer border or light shadow of a component. Finally, the selection property sets the color of the selection bar that highlights an item in a list (such as the combo box) to orange.

4. Add the following code to frame 1 :

     globalStyleFormat.applyChanges();  

   

   The applyChanges method of the globalStyleFormat object updates all properties in that object. If you didn't change a property, it will keep its default value. When you apply the changes, the components will appear with the new styles.

5. Choose Control > Test Movie

   

   When you test the movie, the new property values you applied to the globalStyleFormat object should change the look of the components. They should now fit with the color scheme for the Web site.

   You might notice one problem with the updated stylethe text color in the buttons doesn't work well with the face color you applied. Close the Test Movie window so you can add an ActionScript to fix it.

6. Add the following ActionScript:

     // modify push button style   pbStyle = new FStyleFormat();   pbStyle.textColor = 0xFFFFFF;   pbStyle.addListener(submit, clear);  

   

   Add this code to frame 1, following the ActionScript already in that frame.

   This simple bit of code uses the FStyleFormat object to apply a new text color to the submit and clear instances of the PushButton component. The first line is a comment, reminding you that this code is for the push buttons. The second line creates a new object, called pbStyle , based on the FStyleFormat object. The textColor property of the new pbStyle object is set to white. Finally, the last line uses the addListener method of the pbStyle object to apply the new style only to the submit and clear instances .

7. Choose Control > Test Movie.

   

   When you test the movie, the text in the push buttons should be white. The text in the other components should remain black.

8. Save the movie as guestbook7.fla.

   Your form is almost done. All you have left to do is add some ActionScript to send the data from the form to the server. You'll do that in Lesson 9.

I l @ ve RuBoard