Flash CS4 Professional in 24 Hours- P12

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

lượt xem

Flash CS4 Professional in 24 Hours- P12

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash CS4 Professional in 24 Hours- P12: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:

Nội dung Text: Flash CS4 Professional in 24 Hours- P12

  1. Using the RadioButton Component 321 Unlike the Button components you created in the previous task, each of your RadioButton component instances changes to reflect its current label. That is, you can see the labels Novice, Intermediate, and Expert without even testing the movie. This feature is called Live Preview, and it shows the benefit of populating a Component’s label property with the Parameters panel over populating it in the ActionScript code, as you did in the previ- ous task. Although your radio buttons are nice, they don’t really do anything. Follow TRY IT YOURSELF ▼ these steps to give the buttons some practical use: Apply the Radio 1. Using the movie from the preceding task, drag a Button component Buttons onto the Stage. Use the Component Inspector to set this button’s la- bel to Continue. Give the Button component the instance name continueButton. 2. Make sure the button is on the Stage in Frame 1 with the three in- stances of radio buttons. Go to Frame 2, and insert a blank keyframe by pressing F7. On the screen, you create the content for the Novice. Put some text onscreen that says ‘Welcome novice’. Insert a blank keyframe on Frame 3, and draw the content for the Intermediate user. Finally, on Frame 4, insert a blank keyframe, and draw some content for the Expert. Go back to Frame 1 to set up the code for the user to interact with these buttons. 3. Click Frame 1, and open the Actions panel. Type this code in it: stop() continueButton.enabled = false noviceButton.addEventListener(MouseEvent.CLICK, revealContinue ) intermediateButton.addEventListener(MouseEvent.CLICK, revealCon- tinue ) expertButton.addEventListener(MouseEvent.CLICK, revealContinue ) function revealContinue ( evt ) { continueButton.enabled = true } continueButton.addEventListener(MouseEvent.CLICK, clickContinue ) function clickContinue ( evt ){ var frameNumber = 1 + Number( noviceButton.group.selectedData ) gotoAndStop ( frameNumber ) }
  2. 322 HOUR 17: Introducing Components ▼ TRY IT YOURSELF There’s an interesting approach here. The first line stops the Timeline Apply the Radio from continuing past the buttons in Frame 1. The second line of code Buttons sets the enabled property on the continueButton instance to false so the user can’t click it yet. All three RadioButtons broadcast their CLICK to the homemade function revealContinue. That function does nothing except enable the continueButton instance. The continueButton broadcasts its CLICK event to the homemade func- tion clickContinue. It is inside that function that we first calculate the frame number by adding 1 to the selectedData property of the group to which the noviceButton is a part. It’s definitely weird that we’re using just the noviceButton instance, but notice we’re grabbing the selectedData (that’s the data parameter from whichever button in the group is currently selected). Because all the RadioButton in- stances are part of the same group, it doesn’t matter which button we use. 4. Test your movie. It would be nice if components required even less scripting than they do. Even this simple example took a bit of work. The previous tasks on the ComboBox, Button, and RadioButton gave you a solid foundation on the basics. Next hour, you get to create more complete examples and explore other components. Before then, in the rest of this hour, you learn ways to change the component’s appearance. Changing Component Appearances Components include code and graphics. However, you can change both the style of various elements, such as the font for the labels, as well as any of the graphics, called skins, contained in the component. For example, you could use italic text for the label on a button. Or modify the Button, so it is circular. In fact, you can change even more attributes, such as the way the ComboBox opens and closes, but this section concentrates only on control- ling how the components look. We cover two approaches here: First, you see how to manually edit a com- ponent’s skin. Second, you see how you can use ActionScript to change any style element in the component, including text layout and skins.
  3. Changing Component Appearances 323 Manually Editing Component Skins If you want to change the appearance of any component, simply double- click an instance onstage, and you are faced with all the editable elements. For example, Figure 17.6 shows the contents of a Button component. FIGURE 17.6 You can manually edit any or all of the Button component’s 10 states. It’s almost too easy. For example, if you want to change the Up state for the Button component, just double-click the rectangle to the left of the word Up, and you are taken inside the Button_upSkin symbol, where you can edit the graphics. To start, we recommend editing only the colors, such as the button’s fill. If you decide to edit the shape of a Component, you want to be sure each state is the same size so the outlines match. Otherwise, your users might ex- perience a blinking effect like a cat chasing its tail. They roll over the Up state; then, when faced with the Over state that’s not the same shape, the cursor might not be over the button, so it reverts to the Up state, and the blinking repeats. Components take advantage of a powerful feature called 9-slice scaling. The feature enables you to scale components to any shape without distorting the corners. In Figure 17.7, you can see the Button component scaled to var- ious shapes, along with a mocked-up version of how they’d look without the 9-slice feature.
  4. 324 HOUR 17: Introducing Components FIGURE 17.7 Without 9-slice scaling (shown on the right), the Button component would look inconsistent whenever you scaled it. With 9-slice scaling Without 9-slice scaling The reason we mentioned 9-slice scaling is because you see the nine slices when editing the skins, such as the Button_upSkin shown in Figure 17.8. Probably the best advice is don’t move those guides. Otherwise the graph- ics in the corners never stretch, the graphics in the center always stretch, and then the middle sides and middle tops stretch only when the compo- nent is scaled taller or wider, respectively. FIGURE 17.8 Never stretches Never stretches The 9-slice scaling guidelines are Stretches as component grows wider shown when the skins are being edited. Stretches as Stretches as component component grows taller grows taller Never stretches Never stretches Stretches as component Stretches anytime grows wider component scales Setting the Style of a Single Component Instance Although editing the visual elements inside a component is fairly intuitive, there are a couple of reasons why you might want to change its look with ActionScript. The big reason is you want to modify the text formatting, like for the label on a button. Other reasons are that you want to change a visual
  5. Changing Component Appearances 325 element in one instance of a component or in one class of component, like all the Button instances. The mechanism to change visual styles using Ac- tionScript is through the methods setStyle() and setComponentStyle(). The only catch is the way you do it is different when affecting one instance, one component class, or all components in your movie. We start with affect- ing just one instance. The form is myInstance.setStyle(‘theStyle’, value); You have to replace myInstance with the instance name of your compo- nent, replace theStyle with the supported style found in the Help files, and replace value with an actual value. It turns out the most common style you’ are changing is the textFormat. However, when you set the textFormat style, you must set it equal to a TextFormat object. That is, you first create a TextFormat instance, modify it (such as by setting the font and size), and then use it in place of the value when calling setStyle(). Here’s an exam- ple that changes the font used for a RadioButton instance named myRB: var myFormat = new TextFormat() myFormat.color = 0x00FF00 myFormat.size = 20 myRB.setStyle(‘textFormat’, myFormat) Notice the first three lines involve creating and customizing the myFormat variable, and then in the last line, the style is finally applied to the myRB instance. Setting the Style of One Component Type You can affect all instances of a particular component class by using this complex code: import fl.managers.StyleManager import fl.controls.Button var myFormat = new TextFormat() myFormat.color = 0x00FF00 myFormat.size = 20 StyleManager.setComponentStyle(Button, ‘textFormat’, myFormat) The first two lines are necessary to use the StyleManager and to reference the Button component class. The next three lines fashion the TextFormat in- stance (myFormat). Finally, the last line triggers the setComponentStyle() method, which is similar to setStyle(), but includes the component class you want to affect (in this case, Button).
  6. 326 HOUR 17: Introducing Components Setting the Style of All Components Finally, you can affect a style for all instances of all components with the following code: import fl.managers.StyleManager var myFormat = new TextFormat() myFormat.color = 0x00FF00 myFormat.size = 20 StyleManager.setStyle( ‘textFormat’, myFormat) This code is nearly identical to what you would use to set the style for a component class, except we’re using the StyleManager’s setStyle() method instead of setComponentStyle(). Summary Components have grown up since their ancestors first appeared in Flash 5 as Smart Clips. Components help bridge the separation between program- mer and nonprogrammer. This hour you have learned how to populate components manually by using the Component Inspector, as well as how to populate components by using ActionScript. In addition, you have learned how to use addEventListener to make components trigger your own cus- tom code. This hour you have seen details of the ComboBox, Button, and RadioButton components. You see many more components next hour. This hour you have also learned the basic scripts for changing the styles of components. Q&A Q. Is there a benefit to using components instead of doing everything from scratch? A. Definitely. The main benefit is components offer a quick way to build an application with ready-made and quite complex pieces that alleviate you from having to make a customized version each time. For example, we’ve probably built homemade scrollbars in more than 50 projects. Each time we had to do it from scratch. Although the components are customizable (both as far as the content they display and the visual skins), sometimes you do need to build things from scratch.
  7. Summary 327 Q. If components are supposed to make things so easy, why was there so much ActionScript this hour? A. You can populate many attributes of your components via the Parame- ters panel. However, you do need ActionScript to make the components do anything. Consider if you could do everything via the Parameters panel—that would mean a lot of clicking around. With a little bit of Ac- tionScript, you can make the components do some powerful stuff. The point is components are designed to require the absolute minimum code from you. Q. I’m beginning to like components, but I see there are more than just the ComboBox, Button, and RadioButton. How do I learn to use those? A. First, the basics covered this hour should give you enough to get you started with all the components. They’re very consistent. The idea with this hour is to concentrate on the consistencies, and then next hour, we explore applications that use additional components. Q. I liked how I was able to change the skin on the Button component, but I want to change the skin on just one instance. When I make a change, it affects all Button instances onstage. What if I want one button to be tinted red? Is that possible? A. There are actually a few ways to do that. First, see whether you can use the Tint option in the Properties panel’s Color drop-down if you’re chang- ing only the color. (Note you don’t see the effect until you test the movie.) That’s not quite the same as going into and editing the skin for the button. To create an alternative skin for one instance, find the Movie Clip symbol in the Library for that skin. For example, inside Component Assets is a folder called Button Skins; inside that is a symbol Button_upSkin. Right-click on that symbol, and duplicate it. Call it But- ton_upSkin_MINE, and before you click OK, use the advanced part of the Duplicate Symbol dialog (expand it if it’s not visible). Click the option Export for ActionScript. (It also checks the Export in the first frame you want selected.) Ensure the Class field reads Button_upSkin_ MINE. Click OK, and then edit the symbol’s contents. When you’re finished, you can replace the upSkin style for any Button instance by using this code: myInstance.setStyle(‘upSkin’, Button_upSkin_MINE)
  8. 328 HOUR 17: Introducing Components Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers. Quiz 1. The Button component is identical to the homemade Simple Buttons because they both only have states for Up, Over, Down, and Hit. A. True. B. False. Simple Buttons have several other states. C. False. The Button component has several other states. 2. What happens if you try to scale a component to make it wider? A. It works, but the text gets distorted. B. It works, but the shape might appear distorted. C. It works; thanks to the 9-slice scaling feature. 3. You should use radio buttons only when providing the user with a selec- tion of audio tracks. A. True. Why do you think they’re called radio buttons? B. False. Radio buttons can be used for any purpose you want. C. False. Radio buttons should be used only for mutually exclusive choices. Quiz Answers 1. C. The Button component has states for Up, Down, and Over—plus selected versions of those three, plus a disabled state, and two out- lines (one for when the button has focus and one for when you want to emphasize the button). Simple buttons have Up, Over, Down, and the Hit state discussed in Hour 16. 2. C. It’s sort of magic really. Note you can’t successfully rotate or skew a component. 3. C. Radio buttons should be used only for mutually exclusive choices, such as male and female. Check box-type buttons are for situations in which multiple selections are possible, such as when choosing pizza toppings like pepperoni, olives, and sausage.
  9. HOUR 18 Using Components Last hour you learned the basics of using components. Not only did you WHAT YOU’LL LEARN IN learn how to populate them with data, both manually and with Action- THIS HOUR: Script, but you also saw how to write ActionScript to respond to events . How to use data such as the user clicking a button. You learned how to change the compo- providers to populate nents’ visual appearance. In fact, you learned the core foundation of using list-based components components. In this hour, you go beyond that to learn how to use addi- (ComboBox, List, and tional components and, more importantly, how to integrate multiple com- DataGrid) ponents into practical uses. . How to use additional user interface compo- nents Using Data Providers . How to integrate multi- Because you’ve already seen how to populate components and set up event ple components into listeners to make components broadcast events to your code, there’s not practical applications that much more to learn. However, one concept worth learning in more depth is how the data that populates your component is structured. In the case of a Button, there’s not much more than the label property the user sees on the button. However, with list-based components, such as ComboBox, List, DataGrid, and TileList, each item in the list can store additional data. You might remember when you populated the ComboBox, there was a list of items, each of which had both a label and a piece of data. Users saw the list of all the labels by clicking the ComboBox, and when they selected one of the items, your code grabbed the data in that slot. This list of label/data pairs is called the component’s data provider. Three basic approaches to pop- ulating such components include manually entering the values via the Component Inspector panel, using the addItem() method to populate with ActionScript, or creating a data provider (a variable) that you associate with the component.
  10. 330 HOUR 18: Using Components Entering values manually through the Component Inspector panel is fairly intuitive. As you recall from last hour, you selected a ComboBox instance and clicked the dataProvider property in the Component Inspector panel to reveal the values dialog, where you could add as a many label or data pairs as you wanted, as shown in Figure 18.1. FIGURE 18.1 The Component Inspector panel en- ables you to enter labels and data values into the ComboBox compo- nent. The main disadvantage to populating components in this manual manner is it involves a lot of clicking around. For example, if you want to inspect the current values, you have to return to the Component Inspector panel. A more significant disadvantage is you can’t make changes to the ComboBox’s contents while the movie plays. Using ActionScript to populate a component improves on some of the is- sues with using the Component Inspector. For example, you can use addItem() to populate the component. Consider this code, which populates a ComboBox instance named myCombo: myCombo.addItem( { label: “Microsoft”, data: “http://www.microsoft.com” } ) myCombo.addItem( { label: “Adobe”, data: “http://www.adobe.com” } ) This code has exactly the same outcome as populating manually with the Component Inspector panel. As a reminder, you can ascertain the data value for the currently selected item with this expression: myCombo.selectedItem.data
  11. Using Data Providers 331 For example, last hour we used the following code to take the user to the URL stored as the Value property in the currently selected item: var myURL = new URLRequest( myCombo.selectedItem.data ); navigateToURL( myURL ); It’s important to understand the way the addItem() method works. You pass a single parameter in the form of an ActionScript object. Literal Action- Script objects look like this: {property: “value”, property2: “value2”} The property names are arbitrary, but they can’t start with a number or in- clude spaces, and they’re always shown without quotes. The values can be any data type. Here they’re shown as strings. As in the case of the Action- Script object used as the item for a ComboBox in the addItem() method, they traditionally include a label property and a data property. This matches the exact structure shown earlier in Figure 18.1. In this example, populating the ComboBox with the addItem()method has the advantage that you can see all the values without clicking the Compo- nent Inspector panel. However, another big advantage is that you’re not limited to storing only two bits of information in each item. So far, each item has only a label and a data property, but you could add as many ad- ditional properties as you’d like to suit the content. You always want the label property, but you can add additional pieces of data property. For ex- ample, say you’re listing a bunch of dogs and want to include their age and gender. Check out this variation: myCombo.addItem( { label: “Rover”, age: 2, gender: “m” } ) myCombo.addItem( { label: “Max”, age: 3, gender: “m” } ) myCombo.addItem( { label: “Puffy”, age: 1, gender: “f” } ) Because the label properties are expected by the component, you see the three dog names as expected. It gets cool when you need to grab a value from the ComboBox. Check out the following code that traces the name, age, and gen- der when the user changes the myCombo instance. You can try it yourself by cre- ating a ComboBox onstage with the instance name myCombo and the preceding three lines of code plus the following code in the Action panel for Frame 1: myCombo.addEventListener( Event.CHANGE , changeCombo) function changeCombo( evt ) { trace(“the name is “ + myCombo.selectedItem.label ) trace(“the age is “ + myCombo.selectedItem.age ) trace(“the gender is “ + myCombo.selectedItem.gender ) }
  12. 332 HOUR 18: Using Components CAUTION You build some more practical applications in the tasks that appear later 0-Based Indexing this hour. You can grab any item’s properties by name by referring to the in- The first item in any list is in the stance’s selectedItem property. In fact, you can grab any item by index 0 index. For example, myCombo. (that is, which row it’s in) by using getItemAt(). For example: getItem(0) returns the first trace(“the first dog’s age is “ + myCombo.getItemAt(0).age ) item in the myCombo instance. Remember it starts counting Now you’ve seen two ways to populate a component’s data provider: The with 0, not 1. Component Inspector panel and using the addItem() method. The advan- tages of addItem() are that you can see all the content in one place, and you can add additional arbitrary properties to fit your content. The last thing to see is how to create a separate data provider variable that holds all the con- tent and then associate that variable with your component instance. This enables you to maintain the data separate from any one component in- stance. If the data changes, the component updates. Plus, you can associate one data provider with multiple components. It’s a nice way to separate the data from a specific component instance. The code for populating a data provider is almost identical to that for pop- ulating a component’s items. That is, you use addItem(). However, you need to add an extra step at the beginning to create your data provider in- stance. (There’s no instance onstage like with components.) You also add one step at the end to associate the data provider with your component. Here’s an example: import fl.data.DataProvider; //create a data provider var myDataProvider:DataProvider = new DataProvider(); //populate it myDataProvider.addItem( { label: “Rover”, age: 2, gender: “m” } ) myDataProvider.addItem( { label: “Max”, age: 3, gender: “m” } ) myDataProvider.addItem( { label: “Puffy”, age: 1, gender: “f” } ) //associate the myDataProvider instance with the component on stage: myCombo.dataProvider = myDataProvider; You need the import statement first so Flash knows what DataProvider is. In the end, there’s no effective difference between this code and the previ- ous examples. The difference is you can associate myDataProvider with other components because it is a separate variable. In addition, if you mod- ify the myDataProvider instance (say, you update the age property in one of the items, or you completely remove an item), all the associated compo- nents update to reflect the new values. For example, you might have a fea- ture where you enable the user to add items to a list.
  13. Using Data Providers 333 Although the ComboBox is great when it’s needed, realize all the informa- tion in this section also applies to the other list-based components, as you explore in the following tasks. As a quick summary, list-based components enable you to store multiple items, although only the label properties are visible. By using addItem() on the component or its data provider, you can add additional arbitrary properties. Using the List Component After the preceding overview of data providers, it’s about time to build some applications with the components. We start with the List. The only difference with the List and the ComboBox is the List doesn’t expand and collapse. It’s appropriate for times when the user might need to quickly scan all or most of the items in a list. The ComboBox is appropriate when the user needs to access the items, but most of the time you want the list hidden and only the currently selected item visible. Plus, it’s possible to make multiple selections with the List component. We do a quick exercise with just the List component. The main work is in the functional design and the ActionScript. This task might look a little familiar, but it’s still useful. Follow these TRY IT YOURSELF ▼ steps: Use the List Compo- 1. Create a new Flash File (ActionScript 3.0). From the Components nent to Enable Users panel, drag a List component onto the Stage. Use the Parameters to Select Images panel to give it an instance name myList. 2. Use the Text tool, and click to create a block of text wide enough to serve as a photo caption. Use the Properties panel to set the text to Dynamic Text, and give it an instance name myText. 3. Use the Rectangle tool to draw a square to hold the photos, which, for now, are temporary graphics we draw. Select the drawn rectangle, and convert it to a Movie Clip symbol called Content (select Modify, Convert to Symbol, ensure the behavior is Movie Clip, and click OK). Use the Properties panel to give the instance of the Content symbol onstage the instance name myContent. 4. Double-click the myContent instance to edit its contents. Click Frame 5, and insert a frame by pressing F5. This layer is the background. In- sert a new layer by choosing Insert, Timeline, Layer, and make each frame a keyframe. Into each frame, either import a small photograph or quickly draw a temporary graphic, such as a rough 1, 2, 3, and so on.
  14. 334 HOUR 18: Using Components ▼ TRY IT YOURSELF 5. Return to the main Timeline. Your layout should look like Figure 18.2. Use the List Compo- nent to Enable Users to Select Images myList instance of myContent instance List component Content Movie Clip FIGURE 18.2 This layout has a List compo- nent, a clip full of photos, and a text field for the captions. myText instance of Dynamic Text 6. Click the first keyframe, and open the Actions panel. Type the follow- ing code: //make the data: import fl.data.DataProvider; var myData:DataProvider = new DataProvider(); myData.addItem( {label:”Sunset”, frame:1, caption:”This is a sun- set” } ) myData.addItem( {label:”Sunrise”, frame:2, caption:”This is a sun- rise” } ) myData.addItem( {label:”Beach”, frame:3, caption:”This is the beach” } ) //associate the data myList.dataProvider = myData; //set up the listener: myList.addEventListener( Event.CHANGE , changeList ) function changeList ( evt ){ //display the photo: myContent.gotoAndStop ( myList.selectedItem.frame ) //show the caption: myText.text = myList.selectedItem.caption } //initialize: myText.text = myData.getItemAt(0).caption myContent.gotoAndStop (myData.getItemAt(0).frame ) myList.selectedIndex = 0 Feel free to modify the three lines starting myData.addItem with content that matches your photos. Most of this code should look familiar. It’s a bit ugly at the very bottom under //initialize, where the content and list is made to appear as though the user already clicked the first item. Initially, the user sees everything configured as if they already selected the first item in the list. Notice in the second to the last line of code, we’re not jumping to Frame 1, but rather to the frame number matching the frame property of the item in the 0 index of the data. It’s arguable whether this additional
  15. Using Data Providers 335 complexity is worthwhile. A decent alternative would be to always place the photo for the first item in Frame 1, but this way you can change the structure if you want. Using the DataGrid Component The DataGrid component is like the List component, except instead of many rows of data, you can have multiple columns, too. One nice feature for users is they can sort the items in the DataGrid component by clicking the column headers. For example, with a list of sports team’s statistics, the user could sort by team name or score, as shown in Figure 18.3. FIGURE 18.3 Users can interact with the data by clicking a column to sort the list. Using the DataGrid in the most basic way, you make a DataProvider and as- sociate it with the DataGrid (or populate manually using addItem() on the DataGrid instance). A basic example is expanded in a minute. Place a Data- Grid instance onstage, and give it the instance name myDG. Put this code in the first keyframe: import fl.data.DataProvider; var myData:DataProvider = new DataProvider(); myData.addItem({team: “Dallas”, wins:67 , losses:15 , percent:0.817 } ) myData.addItem({team: “Phoenix”, wins:61 , losses:21 , percent:0.744 } ) myDG.dataProvider = myData; You can insert additional rows by using addItem(). You don’t need a label property. Also, whatever names you give the items’ properties appear as column headers. Even with just this code, the DataGrid component is use- ful. There are a few touchups that we’re going to show you because you’ll probably encounter them in your future work. It’s worth warning you, however, you can stop here and still use the DataGrid component quite ef- fectively. The ActionScript that appears in the rest of this section doesn’t
  16. 336 HOUR 18: Using Components come with full explanation. We include it here because these are common tasks you want to do with the DataGrid component. First, to change the order of the columns, you need to access the columns property of your DataGrid instance (myDG in the earlier example). For exam- ple, to place the team names first, you would add the following line of code: myDG.columns = [“team”, “wins”, “losses”, “percent”] You can do quite a lot more with columns, and there’s an entire class called DataGridColumn. This code works as is. Another thing you might want to do is show only a portion of the data. Re- member how the List component always hides the data values from the user? You might need something similar with a DataGrid. For example, maybe you want to store the URL for each team in the DataProvider, but not necessarily show the users those URLs right inside the DataGrid. To see this effect, you could use the following line of code to hide the percentages: myDG.columns = [ “team”, “wins”, “losses” ] Another thing you might want to do is to change the actual wording that appears in the column header. Property names in your items (such as team, wins, losses, percent) can’t include spaces. If you want the first column to appear as Team Name, you’d need to add this code: myDG.columns[0].headerText = “Team Name” Notice before where the entire columns property is being overwritten and set to an array of three or four names, here the headerText property is be- ing set for the column in the 0 index as columns[0] grabs the first column. This code is getting a bit tangled, and there’s no room to fully explain it. It’s a good initial step into some advanced and particularly useful maneuvers that you want to do with the DataGrid component. There’s one thing that’s especially difficult, but it does hint at some addi- tional powerful tricks you can try. Imagine you’d like the percentages to ap- pear in a more traditional manner—for example, as 80% instead of 0.80. Doing so is slightly complex, as you see. The key concept to understand is your raw data can be kept separate from the way it gets displayed. That is, the DataProvider can maintain the 0.80 number (in case you need to do some math with that number), but you can write code that reformats that number into something that’s more digestible for the user to see in the display (namely, 80%). That’s the concept behind a column’s labelFunction prop- erty as well as the even more advanced topic of cell renderers—which we
  17. Working with Other Components 337 only mention as a way to replace cells in your DataGrid with icons or other graphics. Here’s some code that reformats the percent column’s display: myDG.columns[3].labelFunction = formatPercent; function formatPercent ( item ) { return Math.round(item.percent*100)+”%” } This code works only if your fourth column still displays the percent property. Working with Other Components There’s not a whole lot more we can say about components. At this point, you should learn by using them, so that’s what you do for the rest of this hour. First, you use the ProgressBar component to build a loading bar that shows users how much of your movie has loaded. Second, you use the Slider component to enable users to set a value within a set range. Using the ProgressBar Component The ProgressBar component can be used in two general ways, as shown in Figure 18.4. Either it can fill up like a thermometer to give the user a visual clue how a process is progressing, or when the duration of a procedure can’t be figured out by your code, the ProgressBar can display a “barber pole” graphic. Your initial approach to using the ProgressBar might be more complex than it needs to be. For example, to set the mode to Manual, you could use FIGURE 18.4 this line: The ProgressBar can display how a myProgressBar.mode = “manual” process is progressing (top) or dis- play the barber pole animation (bot- tom) when the duration is Then periodically trigger the setProgress() method, like this: indeterminate. myProgressBar.setProgress ( 50, 100 ) This code would display a half-filled progress bar. However, this component is more sophisticated than that. With one line of code, you can make a ProgressBar display the percentage loaded in your movie or anything else you load into your movie such as audio or video. Here’s the code: myProgressBar.source = this.loaderInfo Let’s do a quick task, so you have something useful.
  18. 338 HOUR 18: Using Components ▼ TRY IT YOURSELF Although only one line of code makes the progress bar, a few more steps Use the ProgressBar gets everything working in a useful way. Component as a 1. Create a new Flash File (ActionScript 3.0). Drag a ProgressBar compo- Preloader nent onto the Stage. You can optionally resize or scale it to fit your needs. Use the Properties panel to give the ProgressBar instance the name myProgressBar. 2. To make your movie larger (that is, to make it load slow enough to need a progress bar), click Frame 2, and insert a blank keyframe by choosing Insert, Timeline, Blank Keyframe (or press F7). Import a large image, and place it onstage in Frame 2. Alternatively, you could import some music—make sure to make it start playing on Frame 2. 3. Go back to Frame 1, click the keyframe, open the Actions panel, and begin with these two lines of code: stop() myProgressBar.source = this.loaderInfo The stop() ensures you don’t go straight to Frame 2. (You want to show users the ProgressBar component first.) The second line sets the source property of the myProgressBar instance equal to the load- erInfo of the main Timeline. The loaderInfo property contains all the information the ProgressBar component needs to display the bar. 4. You’re not done yet, but go ahead and select Control, Test Movie. The progress bar should appear fully filled because the file downloads in- stantly when you’re running it on your hard drive. While you’re still testing the movie, select View, Simulate Download to see how it might appear after you post it on the Internet. Although the ProgressBar component fills up nicely, the next thing to add is some code to make it advance to Frame 2 after your file is fully loaded. 5. Return to your Flash file, and add the following code to the code you already have in Frame 1: this.loaderInfo.addEventListener( Event.COMPLETE, loadComplete ) function loadComplete( evt ){ gotoAndStop(2) } The first line uses addEventListener() to broadcast the COMPLETE event to the homemade function loadComplete(). From there, you simply advance to Frame 2. If your movie has an animation that starts on Frame 2, you can change gotoAndStop(2) to gotoAndPlay(2) in- stead.
  19. Working with Other Components 339 Using the Slider Component The Slider component is a handy way for users to visually set a value that stays within a range you establish. Perhaps you want to allow users to fill in a satisfaction survey that ranges from 10 for extremely satisfied to 0 for ex- tremely dissatisfied, as shown in Figure 18.5. Or, maybe you want to allow them to set the speed at which your slideshow advances. The fact the Slider component is visual makes it more appropriate for certain conditions. FIGURE 18.5 The slider component gives users a visual way to set values that stay within a range you establish. Using the Slider component is fairly easy. Usually all you need to do is set the minimum and maximum, and then set up a listener for when the Slider changes. Grab the slider’s current value and do what you want with it (save it in a survey, change the speed of your slideshow, and so on). Here’s a simple task that enables the user to jump to any frame in a Movie Clip. To keep things simple, you’ll create a Movie Clip with different content on TRY IT YOURSELF ▼ each frame, as we’ve done previously. Use the Slider to 1. Create a new Flash File (ActionScript 3.0). From the Components Access Frames panel, drag a Slider component onto the Stage. Use the Parameters in a Movie Clip panel to give it an instance name mySlider. You can resize or scale the slider if you’d like. 2. Use the Rectangle tool to draw a square to hold some content, which are temporary graphics you draw. Select the rectangle, and convert it to a Movie Clip symbol called Content (select Modify, Convert to Symbol, ensure the behavior is Movie Clip, and click OK). Use the Properties panel to give the instance of the Content symbol onstage the instance name myContent.
  20. 340 HOUR 18: Using Components ▼ TRY IT YOURSELF 3. Double-click the myContent instance to edit its contents. Click Frame Use the Slider to 5, and insert a frame by pressing F5. This layer is the background. In- Access Frames sert a new layer by choosing Insert, Timeline, Layer, and make each in a Movie Clip frame a keyframe. Into each frame, either import a small photograph, or quickly draw a temporary graphic, such as a rough 1, 2, 3, and so on. 4. Return to the main Timeline, select the first frame, and open the Actions panel. Then, type this code: import fl.events.SliderEvent myContent.stop(); mySlider.minimum = 1; mySlider.maximum = myContent.totalFrames; mySlider.addEventListener(SliderEvent.CHANGE, changeSlider); function changeSlider (evt){ myContent.gotoAndStop(mySlider.value); } The second line stops the myContent clip from playing initially. Next, you set the minimum and maximum properties of the mySlider in- stance. Notice instead of the maximum being set to a hardwired 5, it is set to match the totalFrames property of the myContent Movie Clip. This way, if you add frames to the Movie Clip, the code still works correctly. Finally, the addEventListener() is used to broadcast the CHANGE event to the homemade function changeSlider(). 5. Test the movie by selecting Control, Test Movie. The user experience is less than ideal because users have to let go of the slider to see the myContent clip update. Change the code where it says CHANGE to in- stead read THUMB_DRAG. Test the movie again, and the clip should up- date while you drag. If the user uses arrow keys to move the slider, a feature that’s supported, the content doesn’t update at all. To fix this, include two lines with addEventListener(). That is, replace the sin- gle line (line 5 in the code from step 4) with the following code: mySlider.addEventListener(SliderEvent.THUMB_DRAG, changeSlider); mySlider.addEventListener(SliderEvent.CHANGE, changeSlider); Although two different events trigger the same code, it should work better.
Đồng bộ tài khoản