- Component properties can be categorized into two groups: properties that are common to all component instances (to Macromedia-based components, at least), and properties that are unique to each type of component. - You may have installed some third-party components that don't abide by the following guidelines. - This discussion focuses on the use and capabilities of the components that come pre-installed with Flash.. - How? Well, as already mentioned, most component instances have a set of common properties. - Both of these object classes are automatically and invisibly added to your project whenever you add a component instance. - UIObject.bottom UIObject.left UIObject.right. - UIObject.scaleX UIObject.scaleY UIObject.top UIObject.visible UIObject.width UIObject.x UIObject.y. - Next, the UIComponent class is set up to extend (inherit) all the functionalities of the UIObject class. - This means that any properties of the UIObject class become available as properties of the UIComponent class. - But the UIComponent class doesn't just inherit all of the properties of the UIObject class. - UIComponent.enabled UIComponent.tabIndex. - This means that most component classes not only inherit the enabled and tabIndex properties of the UIComponent class, but also all of the properties of the UIObject class, because the UIComponent class extends the. - UIObject class. - In the end, this means that most component instances you place in your project have the properties x, y, visible, top, bottom, enabled, tabIndex, and so on. - Again, this entire inheritance process occurs invisibly whenever you place a component instance in a project.. - Because most component instances share these common properties, it's easy to affect any. - component instance using a common syntax, as the following example demonstrates:. - myButton_pb.enabled = false;. - myRadioButton_rb.enabled = false;. - myListBox_lb.enabled = false;. - No matter what kind of component instance you're scripting—Button, RadioButton, or some other component instance—the enabled property is used in the same way and affects the component instance in the same manner across the board.. - pertaining to a particular component instance. - For example, the following script assigns a value to myVariable based on the rightmost position of the component instance named myButton_pb:. - var myVariable:Number = myButton_pb.right;. - These properties have meaning only in the context of scripting NumericStepper instances. - For a complete listing of the properties of a component class, look up its entry in the ActionScript dictionary.. - Component-specific properties can also be found under each component listing in the Actions Toolbox section of the Actions panel.. - Using ActionScript in the following exercise, you'll set the initial property settings for most of the components in an application.. - Open Components1.fla in the Lesson10/Assets folder.. - The Background layer contains all the non-component content in the project. - This includes a static image of the URL manager's interface as well as two movie clip instances named currentWin_mc and newWin_mc. - The Components layer contains all the components used in the project. - A TextInput component named inputURL_ti accepts text input from the user. - a List component instance named listURL_lb displays a list of items. - three Button component instances named addURL_pb, deleteURL_pb, and openURL_pb work similarly to buttons. - and a couple of RadioButton component instances named currentWin_rb and. - newWin_rb work in the same manner as HTML radio buttons.. - Although certain component instance properties can be configured within the authoring environment by using either the Component Inspector or the Property Inspector, the component instances in this project have only been given instance names. - When the application is finished and played within a browser window, the user can enter a URL (www, ftp, or mailto) into the inputURL_ti component instance and then click the addURL_pb component instance, which displays the URL in the listURL_lb component instance. - All added URLs appear in the listURL_lb. - component instance. - When the user selects a URL from the listURL_lb component instance, he or she has two choices: clicking the openURL_pb component instance opens the URL in either the current browser window or a new one (depending on whether the currentWin_rb or newWin_rb radio button is selected). - clicking the deleteURL_pb component instance deletes the selected URL from the list. - As the user interacts with the application, these various component instances are enabled and disabled dynamically, depending on the task the user is trying to accomplish.. - To help you see how an unscripted version of the project looks and feels, let's do a quick test.. - Within the testing environment, notice that the application doesn't look any different now than it did in the authoring environment. - All the Button component instances display the word Button, and each of the RadioButton instances displays the words Radio Button. - If you try to interact with any of the elements, some of them glow green (dubbed haloGreen by the folks at Macromedia) when you move the pointer over the element or click it. - Close the test movie and return to the authoring environment. - With the Actions panel open, select Frame 1 of the Actions layer and add the following script:. - addURL_pb.label = "Add";. - addURL_pb.enabled = false;. - These two lines of script set the label and enabled properties of the addURL_pb Button component instance. - it appears dimmed, indicating to the user that the button is disabled, much like operating system interface elements appear in a disabled state.. - The reason we're disabling this button initially is because it has no use until the user types a URL into the inputURL_ti TextInput component instance. - Later, we'll add scripts that enable and disable this instance, depending on how the user interacts with the interface.. - Add the following script at the end of the current script:. - listURL_lb.enabled = false;. - deleteURL_pb.label = "Delete";. - deleteURL_pb.enabled = false;. - openURL_pb.label = "Open";. - openURL_pb.enabled = false;. - The first line disables the listURL_lb List component instance;. - newWin_rb.groupName = "windowOption";. - currentWin_rb.groupName = "windowOption";. - newWin_rb.label = "New Window";. - newWin_rb.data = "_blank";. - currentWin_rb.label = "Current Window";. - currentWin_rb.data = "_self";. - windowOption.enabled = false;. - These seven lines of script set the initial properties of the two radio buttons named newWin_rb and currentWin_rb.. - You may have noticed that the script in Step 5 sets the New Window button before setting the Current Window button, yet they appear in the opposite order in the application, with the Current Window button on top. - Clicking a particular radio button in the group. - automatically deselects the previously selected button in the group, thus allowing. - only a single radio button in the group to be selected at any time. - Both of our application's RadioButton component instances are assigned to the windowOption group. - As a result of associating the two RadioButton instances to the same group, only one can be selected at any time. - The purpose of these instances is to allow the user to choose whether to open a URL in the current browser window or open a new window. - This is important to remember as we discuss the remaining lines of the script.. - By default, all RadioButton instances added to a project belong to the same group (named radioGroup). - Therefore, the RadioButton component instances in our project initially had the single-selection functionality that we just discussed.. - The next four lines set the label and data properties for the newWin_rb and currentWin_rb instances. - Similar to the label property for Button component instances, the label property for RadioButton instances allows you to set the text that appears next to the instance. - The data property lets you assign a value to the instance. - This value is assigned to the group of which the instance is part. - Remember that both of the RadioButton component instances are assigned to the windowOption group. - Thus, the following script:. - The last line in the script disables both the radio button instances. - newWin_rb.enabled = false;. - currentWin_rb.enabled = false;. - but we can easily disable all instances belonging to our group with a single line of code because they're both part of the windowOption group.. - As a result of the code we've added so far, all the component instances within our project, except for inputURL_ti, will initially be disabled. - We want these movie clip instances to always appear in the same state (enabled or disabled) as our radio buttons. - Because they're movie clip instances and not. - Add the following function definition at the end of the current script:. - Add the following function call at the end of the current script:. - disabled, similar to the component instances we scripted in Steps 3–5.. - Most of the interface elements are disabled intitially, and the various component instances with label properties display the text labels we assigned to them.. - As you can see from this exercise, working with properties of component instances is simple and straightforward.. - We'll continue building on this file in the exercises that follow.
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt