Beginning ActionScript 2.0 2006

Chapter 11

Figure 11-8

1.Open the completed tryItOut_scriptingComponents.fla file from the previous Try It Out exercise, or open tryItOut_scriptingComponents.fla from the book’s source files at <source file directory>/Chapter 11/tryItOut_scriptingComponents_v5/.

2.Open the Library panel, and from the menu on the top right, select New Font.

3.In the New Font panel, enter the name alternateFont and from the drop-down list, select a font that you would like to apply to the interface. Click OK.

4.Click the new font in the library to select it. From the menu at the top right of the panel, select Linkage, and in the dialog box that opens, check the Export for ActionScript checkbox. Click the OK button.

5.Open the completed tryItOut_scriptingComponents.as file from the first Try It Out exercise, or open tryItOut_scriptingComponents.as from the book’s source files at <source file directory>/Chapter 11/tryItOut_scriptingComponents_v5/.

6.Update the init() function in the ActionScript file so that it looks like this:

function init() : Void

{

// Send data to the image list and movie list components mediaListXMLConnector.direction = “receive”; mediaListXMLConnector.URL = “mediaList.xml”; mediaListXMLConnector.trigger();

imageList.addEventListener(“change”, mediaListListener); imageList.addEventListener(“change”, mediaViewerListener);

movieList.addEventListener(“change”, mediaListListener);

288

Controlling Components

movieList.addEventListener(“change”, mediaViewerListener);

//Setup for the zoom stepper component zoomStepper.maximum = 400; zoomStepper.minimum = 25; zoomStepper.stepSize = 25; zoomStepper.value = 100;

zoomStepper.addEventListener(“change”, mediaViewerListener);

//Setup for the progress bar component mediaViewerProgress.mode = “manual”; mediaViewerProgress._visible = false;

//Setup for the scrollable media viewer component mediaViewerPane.scrollDrag = true; mediaViewerPane.addEventListener(“progress”, mediaViewerListener); mediaViewerPane.addEventListener(“complete”, mediaViewerListener);

//Set styles for application

//Set global styles

_global.style.setStyle(“borderStyle”, “solid”); _global.style.setStyle(“fontFamily”, “alternateFont”); _global.style.setStyle(“fontSize”, 12); _global.style.setStyle(“embedFonts”, true); _global.style.setStyle(“color”, 0x666666); _global.style.setStyle(“themeColor”, 0xDDDDFF); _global.style.setStyle(“textSelectedColor”, 0x000000);

//Set styles for all Label components if (_global.styles.Label == undefined)

{

_global.styles.Label = new mx.styles.CSSStyleDeclaration();

}

_global.styles.Label.setStyle(“color”, 0x003399); _global.styles.Label.setStyle(“fontWeight”, “bold”);

//Set title style

var appTitleStyle:Object = new mx.styles.CSSStyleDeclaration(); _global.styles.appTitle = appTitleStyle; appTitleStyle.setStyle(“fontSize”, 20); appTitleStyle.setStyle(“fontWeight”, “bold”); appTitleStyle.setStyle(“color”, 0x000000); appTitleLabel.setStyle(“styleName”, “appTitle”);

// Set component instance styes zoomStepper.setStyle(“textAlign”, “left”);

}

7.Save the file, return to the Macromedia Flash project file, and select Control Test Movie.

How It Works

The first chunk of code within the init() function is the same as the previous exercise’s, so start by looking at the code that actually applies the styles.

289

Chapter 11

First, the global styles are applied:

_global.style.setStyle(“borderStyle”, “solid”); _global.style.setStyle(“fontFamily”, “alternateFont”); _global.style.setStyle(“fontSize”, 12); _global.style.setStyle(“embedFonts”, true); _global.style.setStyle(“color”, 0x666666); _global.style.setStyle(“themeColor”, 0xDDDDFF); _global.style.setStyle(“textSelectedColor”, 0x000000);

All components will override their default styles with these, unless category, class, or individual styles override the global ones.

Next, styles are applied to the category of Label components:

if (_global.styles.Label == undefined)

{

_global.styles.Label = new mx.styles.CSSStyleDeclaration();

}

_global.styles.Label.setStyle(“color”, 0x003399); _global.styles.Label.setStyle(“fontWeight”, “bold”);

It isn’t actually necessary to apply the if statement here because you know that no code has already created a CSSStyleDeclaration for this style category. You could have just done the following:

_global.styles.Label = new mx.styles.CSSStyleDeclaration(); _global.styles.Label.setStyle(“color”, 0x003399); _global.styles.Label.setStyle(“fontWeight”, “bold”);

Next, a custom style class is created and is assigned to the appTitleLabel component:

var appTitleStyle:Object = new mx.styles.CSSStyleDeclaration(); _global.styles.appTitle = appTitleStyle; appTitleStyle.setStyle(“fontSize”, 20); appTitleStyle.setStyle(“fontWeight”, “bold”); appTitleStyle.setStyle(“color”, 0x000000); appTitleLabel.setStyle(“styleName”, “appTitle”);

Finally, a style is applied directly to the zoomStepper component:

zoomStepper.setStyle(“textAlign”, “left”);

Skinning Components

The component styles that you set with setStyle() give you one method of changing component appearance. For the most part, setStyle() is used to manipulate the overall color scheme and the font styles. What setStyle() does not give you is the capability to affect the whole component look and

290

Controlling Components

feel. For instance, you might want to change the shape of the scroll buttons or remove the gradients used within the scroll thumb. These kinds of style elements are individually called skin properties, the collection of skin properties for all components is referred to as a skin, and the process of changing the component skin properties is called skinning. In addition to using styles to change the appearance of components, Macromedia Flash also provides the capability to re-skin them, where you can completely change the appearance of each component’s visual features. Skinning is not hard to learn, but is a bit tricky to master.

Flash comes with two skins, called themes. A theme is a file containing a set of pre-skinned library symbols that can be dropped into the library for any .fla file. Halo is the default theme that all components automatically start with. Generally, you won’t use the Halo theme as a starting point for your skinning efforts because of the more complicated nature of the skin. The Sample theme is considerably simpler to work with, and should be the basis for any skins that you may want to create.

The process of skinning does not actually involve scripting, but it’s a process that Flash coders and designers often ask how to do, so it’s included here.

Here’s how to switch to a new theme:

1.Open the .fla file to which you want to apply the theme.

2.Open the Flash file SampleTheme.fla at <application root>/Configuration/ComponentFLA/. The application root is generally at /Applications/Macromedia Flash 8 for Mac OS or /Program Files/Macromedia/Flash 8 for Windows.

3.Open the Library panel (Window Library) and select the movie clip SampleTheme from the Flash UI Components 2 folder. From the menu at the top right of the Library panel, select Copy.

4.Switch to the Flash file that you opened in step 1. From the menu at the top right of the Library panel for that Flash file, select Paste.

5.Test the project (Controls Test Movie).

When you copy this movie clip over, it automatically brings with it all of the additional movie clips needed to set the appearance of all the components. Double-click the SampleTheme movie clip and you see groupings of all the component skins on the state. Open the Themes folder that has been added to the Library to see groupings of theme elements. This folder does not actually list each component. Some, like the List component, are actually a collection of other components. Although not all components show up in the list, they are all represented. Changing the ScrollBar component, for instance, affects the scroll bar in the List component.

The next exercise gives you an opportunity to work with skin elements.

This exercise demonstrates how to add the sample skin to the image viewer project, and how to edit individual skin elements. Figure 11-9 shows the end result. You won’t actually redraw individual component elements, but you will see how a skin is broken up so that you can try it for yourself.

291

Chapter 11

Figure 11-9

1.Open the completed tryItOut_scriptingComponents.fla file from the previous Try It Out exercise, or open tryItOut_scriptingComponents.fla from the book’s source files at <source file directory>/Chapter 11/tryItOut_scriptingComponents_v6/.

2.Open SampleTheme.fla in <application root>/Configuration/ComponentFLA/. (The application root is generally at /Applications/Macromedia Flash 8 for Mac OS or /Program Files/ Macromedia/Flash 8 for Windows.)

3.Open the library and select the movie clip SampleTheme from the Flash UI Components 2 folder. From the menu at the top right of the Library panel, select Copy.

4.Switch to tryItOut_scriptingComponents.fla. From the menu at the top right of the Library panel for that project, select Paste.

5.Close SampleTheme.fla. You no longer need it for this exercise.

6.Open the Library folder at Themes MMDefault ScrollBar Assets. Double-click the HScroll BarAssets movie clip.

7.Double-click the arrow icon on the top left to edit the scroll up arrow skin element. You should see the name of the symbol, ScrollUpArrowUp, in the timeline bar at the top of the Flash document.

Figure 11-10 shows the six regions for which you’ll be setting the indicated colors.

292

8.Select View Magnification 800% and scroll the stage region to center the button in the window.

9.Double-click region 1, the top-left portion of the button. Click in the middle of the square to select the shape. Open the Properties panel (Window Properties). Click the shape fill swatch in the Properties panel, type #94ADDE in the color picker text field, and press Enter.

10.Click the ScrollUpArrowUp button above the timeline to return to the main arrow symbol. Double-click region 2, the top-left button highlight. Click in the middle of the square to select the shape. Click the shape fill swatch in the Properties panel, type #C6D2EB in the color picker text field, and press Enter.

If you are having problems selecting individual parts of the button, make sure that any previous selection has been deselected by clicking anywhere outside the button. Also, try further enlarging the view by selecting View Zoom In.

11.Click the ScrollUpArrowUp button above the timeline to return to the main arrow symbol. Click once on region 3, the background color of the button. Click the shape fill swatch next to the Color drop-down in the Properties panel, type #94ADDE in the color picker text field, and press Enter.

Important: This step changes the color effect applied to the movie clip instead of the color of the shape inside the movie clip. Changing the color of the shape affects the outside border color because they are linked.

12.Double-click region 4, the button arrow icon. Click in the middle of the square to select the shape. Click the shape fill swatch in the Properties panel, type #003399 in the color picker text field, and press Enter.

13.Click the ScrollUpArrowUp button above the timeline to return to the main arrow symbol. Double-click region 5, the bottom-right button shadow. Click in the middle of the square to select the shape. Click the shape fill swatch in the Properties panel, type #6C90D6 in the color picker text field, and press Enter.

293

Chapter 11

14.Click the ScrollUpArrowUp button above the timeline to return to the main arrow symbol. Double-click region 6, the bottom-right button border. Click in the middle of the square to select the shape. Click the shape fill swatch in the Properties panel, type #FFFFFF in the color picker text field, and press Enter.

15.Click the HScrollBarAssets button above the timeline to return to the scroll bar assets clip. Double-click the scroll down arrow button at the bottom left of the clip.

The following steps apply to the scroll down arrow button, ScrollDownArrowUp.

16.Click once on region 3, the background color of the scroll down button. Click the shape fill swatch next to the Color drop-down in the Properties panel, type #94ADDE in the color picker text field, and press Enter.

17.Double-click region 4, the button arrow icon. Click in the middle of the square to select the shape. Click the shape fill swatch in the Properties panel, type #003399 in the color picker text field, and press Enter.

18.Click the HScrollBarAssets button above the timeline to return to the scroll bar assets clip. Double-click the scroll track clip at the top right of the movie clip. Double-click the symbol again. Click once on the gray shape to select it. Click the shape fill swatch in the Properties panel, type #C6D2EB in the color picker text field, and press Enter.

19.Click the HScrollBarAssets button above the timeline to return to the scroll bar assets clip. Double-click the disabled scroll track clip at the bottom right of the movie clip. Click the gray shape to select it. Click the shape fill swatch in the Properties panel to open the color picker, type #C6D2EB in the color picker text field, and press Enter.

20.Open the mediaList.xml file in the same folder as the Flash project file in your favorite text editor. Duplicate a few of the <image> entries so that there are at least 8 <image> tags to ensure that the scroll bar will appear in the top list view.

21.Test the project (Controls Test Movie).

How It Works

Each skin symbol is divided up into multiple symbols that can be independently edited. You will notice that by changing the symbol colors in one place, it takes effect in other places. This has a benefit and a drawback. The benefit is that the sharing of movie clips keeps you from having to make changes to every component clip to change an effect throughout. For instance, notice that the zoom stepper component instance has adopted the new skin style without your needing to change the stepper itself. The disadvantage is that if you want to change the shape of the component feature completely, the different clips can make it difficult to figure out how your changes are going to take effect elsewhere. In that case, you may want to just delete the contents of the symbol that you want to change and redraw each one by hand.

Summar y

This chapter explored many different aspects of components. Some points to remember include the following:

294

Controlling Components

Component bindings provide a semi-automated way of passing data between components.

Bindings are fine for simple interfaces, however as the interface gets more complex, more work has to be done to manage and work around the bindings’ implementation.

Component appearance can be customized through the use of styles and skins.

A theme is a file containing skinned library elements that you can copy to any Flash project file to change the appearance of components within that file.

The setStyle() method is the mechanism for changing style attributes.

Exercises

1.Take the results of what you created for Chapter 10 exercise 1 and update the application styles so that all text fields use an embedded font of your choice. Change the font size and color to values of your liking. Set the DataGrid component instance to remove any vertical lines, and change the color of the header bar. Change the label color of the Delete button to red.

2.Create a skin of your liking for the application.

295