Flash CS4 Professional in 24 Hours- P12 pdf

ptg 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. Apply the Radio Buttons TRY IT YOURSELF ▼ Although your radio buttons are nice, they don’t really do anything. Follow these steps to give the buttons some practical use: 1. Using the movie from the preceding task, drag a Button component 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 ) } From the Library of Lee Bogdanoff ptg 322 HOUR 17: Introducing Components 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. TRY IT YOURSELF ▼ Apply the Radio Buttons There’s an interesting approach here. The first line stops the Timeline from continuing past the buttons in Frame 1. The second line of code 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. From the Library of Lee Bogdanoff ptg 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. 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. FIGURE 17.6 You can manually edit any or all of the Button component’s 10 states. From the Library of Lee Bogdanoff ptg 324 HOUR 17: Introducing Components 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. 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 With 9-slice scaling Without 9-slice scaling FIGURE 17.7 Without 9-slice scaling (shown on the right), the Button component would look inconsistent whenever you scaled it. Stretches as component grows taller Never stretches Never stretches Never stretches Never stretches Stretches as component grows wider Stretches anytime component scales Stretches as component grows wider Stretches as component grows taller FIGURE 17.8 The 9-slice scaling guidelines are shown when the skins are being edited. From the Library of Lee Bogdanoff ptg 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). From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg 327 Summary 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) From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . How to use data providers to populate list-based components (ComboBox, List, and DataGrid) . How to use additional user interface compo- nents . How to integrate multi- ple components into practical applications Last hour you learned the basics of using components. Not only did you learn how to populate them with data, both manually and with Action- Script, but you also saw how to write ActionScript to respond to events such as the user clicking a button. You learned how to change the compo- nents’ visual appearance. In fact, you learned the core foundation of using components. In this hour, you go beyond that to learn how to use addi- tional components and, more importantly, how to integrate multiple com- ponents into practical uses. Using Data Providers Because you’ve already seen how to populate components and set up event listeners to make components broadcast events to your code, there’s not 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. HOUR 18 Using Components From the Library of Lee Bogdanoff ptg 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. 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 FIGURE 18.1 The Component Inspector panel en- ables you to enter labels and data values into the ComboBox compo- nent. From the Library of Lee Bogdanoff [...]... Bogdanoff 332 HOUR 18: Using Components CAUTION You build some more practical applications in the tasks that appear later this hour You can grab any item’s properties by name by referring to the instance’s selectedItem property In fact, you can grab any item by index (that is, which row it’s in) by using getItemAt() For example: 0-Based Indexing The first item in any list is in the 0 index For example, myCombo... 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 associate it with the DataGrid (or populate manually using addItem() on the DataGrid instance) A basic example is expanded in a minute Place a DataGrid instance onstage, and give it the instance name myDG Put this code in the... decompress The codec you must use if delivering to Flash Player 7 is called Spark (from Sorenson), whereas Flash Professional 10 also includes VP6 (from On2) and H.264 WHAT YOU’LL LEARN IN THIS HOUR: How to import and use video in movies How to include advanced features using the FLVPlayback component How to use cue points to synchronize a video to the graphics in your Flash movie How to optimize for high... Video 347 shake, and lighting, all affect the final outcome There’s not enough room in this book to teach you everything about video making, but we give you a solid introduction When you’re selecting or creating videos, there are a few considerations specific to video on the computer The entire viewing experience is much different on a computer than in your living room The following tips come down to the... version of QuickTime, which you can find at www.quicktime com Or, you can use any footage you can find You are using the separate Adobe Media Encoder CS4 program to convert a mov file to a Flash friendly flv file The Adobe Media Encoder CS4 program should have been installed with your Flash program Locate it in your Start menu (Windows) or in your Applications folder (Macintosh „) and start it 2 Click the... begin converting your mov to an flv file, as shown in Figure 19.2 This step might take some time while the encoding occurs FIGURE 19.2 The Adobe Media Encoder CS4 program converts your mov file to an fla file NOTE Use On2 Instead of Spark We recommend avoiding Sorenson Spark (whether you select it in the Video tab or select a Flash Player 7 preset in the Encoding Profiles tab) unless you’re delivering... to give the instance of the Content symbol onstage the instance name myContent From the Library of Lee Bogdanoff 340 ▼ TRY IT YOURSELF Use the Slider to Access Frames in a Movie Clip HOUR 18: Using Components 3 Double-click the myContent instance to edit its contents Click Frame 5, and insert a frame by pressing F5 This layer is the background Insert a new layer by choosing Insert, Timeline, Layer,... delivering to Flash 7 or Flash 6 3 Open your Flash program, and choose File, Import, Import Video Click on the Browse button, and choose the flv file you just created Choose the option Embed FLV in SWF and Play in Timeline Press Continue 4 The next step, Embedding, enables you to select various details about how the video appears in your file, as shown in Figure 19.3 Most of these settings are purely... 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 Insert a new layer by choosing Insert, Timeline, Layer, and make each frame a keyframe Into each frame, either import a small photograph or quickly... seek ahead in the clip However, streaming requires a streaming server (Flash Media Server or Red5) or a service provider who hosts your videos on their streaming server Without any additional software, Flash can play videos only progressively, meaning they download from start to end Pro- From the Library of Lee Bogdanoff 346 HOUR 19: Using Video gressive download enables viewers to begin viewing the video . component, including text layout and skins. TRY IT YOURSELF ▼ Apply the Radio Buttons There’s an interesting approach here. The first line stops the Timeline from continuing past the buttons in Frame. Bogdanoff ptg 324 HOUR 17: Introducing Components 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. 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