Set the appearance of the Macromedia Flash component [from MM official]

Document directory

• Understand component styles
• Component Basics
• Initial style modification: setStyleProperty
• Use global style: globalStyleFormat
• FStyleFormat
• Summary: Techniques for combining application custom component styles
• Modify the style of all components

The official page of MM is too difficult to open.

Set the appearance of the Macromedia Flash component

The article is as follows:

Since Macromedia Flash MX introduced components, it has become very easy to add complex functional modules to a video. Unlike the previous effort to create custom buttons, scroll bars, and list boxes, we now can quickly add them to our own applications with just one click.

But the problem also arises. Even if the components have a clear look and feel, their default design style may not match the theme style of your application. It is often critical to maintain style consistency in the interface design of the application, because it can help the end user to smoothly interact with the application. To solve this problem, you can modify the component appearance style.

The following describes the component appearance and style definition. The so-called component appearance definition refers to modifying the component's appearance by modifying the component's Interface source image. The style definition is to change the display result of the component through the API attributes and methods of the component. This article will focus on how to use styles to change the appearance and feeling of Macromedia Flash MX components.

Understand component styles

The three techniques discussed in this article can affect the style attributes of the Macromedia Flash MX component. The most basic form of a style is the color attribute of a small block shape, and a component is composed of these small pieces. By changing the color of each small block, we can change the appearance and feeling of the entire component, which is actually changing the style of the component.

There are two ways to modify the component appearance that are not discussed in this article. One is to directly replace and modify the initial source image of the component on the stage. This method is a little more complicated than changing the component style. I will explain it in another article. However, if you are very interested in this, please refer to the Flash "help" menu> "use Flash"> "use components"> "Custom component appearance ".

Another way to modify the component appearance is to add a new appearance element. In this method, you need to create a graphical element and register the element to the component. This technique is very important when creating custom components, but it also requires you to have a good understanding of the component structure.

Component Basics

Before discussing how to change the component appearance, let me introduce some background knowledge to see how the component looks. Before we begin to study component APIs, it is very important to understand this, which will help us understand what we are about to do.

A component consists of multiple components. It is a collection of scripts and graphics that are linked to each other in a specific way. From now on, we will focus on video clips that make up the appearance of components.

When we drag a component to the stage, the Flash UI Components folder will be created in the "library" Panel of Flash. This folder contains some folders, one of which is Component Skins. This folder contains all the component appearance video clips, as shown in 1.

Figure 1The Component Skins folder in the Macromedia Flash "library" Panel

Modifying the video clips in these folders affects the appearance of the component.

If we use the component API, this API will call a method to modify the color objects of these video clips. In this way, you do not have to modify each video clip every time you need to change the component's appearance. It should be said that this method is easier.

Note: after using the component API to customize the component, we can also easily restore the default appearance of the component. After directly modifying the video clip in the Flash library, if you need to restore the default appearance of the component due to incorrect modification, you can only use the default component in the Flash UI Components window to replace the modified component. Therefore, if this happens, we can only say: Be careful when directly modifying components.

Next, we will discuss how to use setStyleProperty to modify the component's appearance.

Initial style modification: setStyleProperty

The first way to modify a style is to modify the individual style attributes of a component. The component appearance is divided into several simple elements. For example, the button component has six basic appearance elements that can be modified. They are: text, face, shadow, darkshadow, highlight, and highlight3D. To modify the Front color of a button, use the following code:

ComponentName.setStyleProperty("face", 0x006699);

Where,ComponentNameIs the Instance name of the component. You can tell the "face" parametersetStyleProperty()The element attribute to be modified. 0x006699 is the hexadecimal color value on the front of the button to be modified. The color is the dark blue used by the Macromedia logo. If you need to modify the color of the button text or highlight the color, you can use the following similar statement:

ComponentName.setStyleProperty("textColor", 0xD0D0D0);
ComponentName.setStyleProperty("highlight", 0x0099BB);

You may say that this method is great for modifying several attributes of one or two components. However, if you want to modify all the attributes of multiple components, this method will immediately become cumbersome and boring. In this way, you need to add 5 ~ 15 lines of code. If you need to modify the color of the text in the future, you need to modify the code of each component. To help solve this problem, we can use global styles.

Use global style: globalStyleFormat

globalStyleFormatAttribute is a global object. The style defined by it will be applied to all components in the Flash application. UseglobalStyleFormatIs an ideal method.

UseglobalStyleFormatThe first step is to define style elements for the application. This operation andsetStylePropertySame, but this call is the component method, modifiedglobalStyleFormat.

For example, you can create exterior effects for the arrows, scroll slots, shadows, and highlight of all components. 2:

Figure 2Custom Components

You can use the following action script to define the appearance element:

globalStyleFormat.textColor = 0xD0D0D0;
globalStyleFormat.arrow = 0xD0D0D0;
globalStyleFormat.face = 0x006699;
globalStyleFormat.shadow = 0x003366;
globalStyleFormat.darkshadow = 0x000033;
globalStyleFormat.highlight = 0x0099BB;
globalStyleFormat.highlight3D = 0x00BBEE;
globalStyleFormat.scrollTrack = 0x003366;
globalStyleFormat.background = 0x006699;

After defining the appearance element, we also need to apply the new style to all components. The syntax is as follows:

globalStyleFormat.applyChanges();

This method updates all current components immediately. If a new component appears in the current application, the component is automatically applied.globalStyleFormat. In most cases,globalStyleFormatAll are defined in the first frame of the application. Even in this case, you still need to useapplyChanges()Method Application.

In some projects, you may need to make each component have a different style. In this case, using a global style is not desirable because it applies to all components. And usesetStylePropertyThe method requires too many cumbersome scripts. Fortunately, the Macromedia Flash MX development engineers have created a dedicatedFStyleFormatTo solve this problem.

FStyleFormat

FStyleFormatThe object is generated in Macromedia Flash MX. This new object type allows users to define a style and then apply it to the components they need. This object andglobalStyleFormatThe global style is automatically applied to each component in the application.FStyleFormatYou can decide which component to apply the style.

FStyleFormatHassetStylePropertyThe flexibility of the method is similarglobalStyleFormatIt is easy to use.FStyleFormatThis allows us to create a style for each component type and provide end users with multiple styles for their selection. UseFStyleFormatYou can also highlight a specific component and change its style as needed.

UseFStyleFormatThe first step is to create a new object. The syntax is the same as that for creating other new objects:

myStyle = new FStyleFormat();

After creating a style object, you can set attributes for the style object:

myStyle.arrow = 0xD0D0D0;
myStyle.shadow = 0x000033;
myStyle.highlight = 0x0099BB;
myStyle.scrollTrack = 0x003366;

Now we have a style that contains attributes. Next we need to decide which component to apply the style. To achieve this goal, we can use the addListener () method. Method. This method canFStyleFormatObjects are applied to components. To useaddListener()The instance name of the component must be provided as a parameter.

For example, if there are three components on the stage, the instance names aremyListBox,myComboBoxAndmyButton, You can use the following statement to register themFStyleFormatStyle:

myStyle.addListener(myListBox, myComboBox, myButton);

These components are registeredFStyleFormatThe style attribute is applied. You can useremoveListener()Method. Usage andaddListener()The method is the same:

myStyle.removeListener(myListBox);

UseremoveListener()Note that only one component can be used at a time. For exampleFStyleFormatTo delete four registration components from an object, you must useremoveListener()Method 4 times.

Note: add registered components, delete registered components, or changeFStyleFormatAll attributes of an object must beapplyChanges()Method validation so that the component can reflect these changes:

myStyle.applyChanges();

Next, we will use the methods described above to create custom styles.

Summary: Techniques for combining application custom component styles

Now we have basically understood three methods for setting component styles. What will happen if we mix them together? In principle, we recommend that you use only one of the methods in the application. However, if you do not really use multiple methods to set styles, you still need to understand the possible results in Macromedia Flash.

Let's start fromsetStyleProperties()Method. If you already have a global style or FStyle object, it can overwrite the style definitions when the method is applied. However, if the global style or FStyle object is re-applied, they will overwritesetStyleProperty()The value of the method.

Next we will talk about global styles. If the FStyle style andsetStyleProperty()Apply the settings after the global style is created. They overwrite the global attributes. If the global style is applied again in the program, it can overwritesetStyleProperty()But cannot overwrite the FStyle object. If you want to apply the global style to a component with the FStyle object already set, you must first useremoveListener()Method to delete this component from the FStyle object registration list.

The last thing to talk about is the FStyle object. When a FStyle object is applied to a component, it can overwrite any other style. The global style cannot overwrite the FStyle object,setStyleProperty()Method can overwrite a single element of the FStyle object.

Modify the style of all components

If you want to know which style elements of a component can be accessed, you can view the Flash UI Components> Component Skins folder in the "library" Panel and the Global Skins and "F + Component name" (for example, FScrollBar) Skins folder in the Asset folder.

Figure 3Component Skins Assets folder in Macromedia Flash MX "library" Panel

On the "library" panel, you will find video clips that make up each part of the appearance element. If you double-click a video clip, you can view the Action Script in its 1st frames. These scripts help us understand how each element is named and registered. The name in the quotation marks tells us how to access each style element.

Figure 4Action Script code found in the video clip that constitutes the component

Note: do not modify the code unless you want to change the function or appearance of the component!

Now that you have mastered the basic knowledge about component style settings, it is very easy to change the component appearance. All the user interface components of Macromedia Flash MX have style APIs, so you can easily modify them using the techniques mentioned in this tutorial.

James Polanco has been working in Macromedia for more than three and a half years. He is currently the technical support team owner and a member of the Expert Service Team. James is good at and responsible for technical support for Macromedia Flash, Macromedia Breeze, ctor, Flash Remoting, ColdFusion, Dreamweaver, Macromedia Flash Communication Server and Authorware. Before playing for Macromedia, James has been developing on a computer training and education website for more than three years and won the award.