Subtitles of the Movie

In the previous movie, I established that there are four general phases or steps when you work with Flash components. The first step is to add the components to your project file. I devoted most of the previous movie to doing that to create a form. So I can demonstrate some of the nuances of working and modifying with components, Flash components. So what I did is I added my components onto the stage here by opening up the components panel and dragging and dropping them onto my pre-assembled labels here. I did a little bit of formatting of my form components using the align panel. You can also use the free transform tool which I've selected here to change the dimensions and shapes of your components. Remember the components are simply movie clips, so you can use a variety of the tools over here in the tools panel to work with them. Primarily however you're going to be using either the properties inspector or even more likely the component inspector to modify the way these component elements will behave and interact with the user. In this case I want my users to fill out their name and phone number here, so I'm going to need to go over to the component inspector and lets click on this text input component first. And I can set the number of characters maximum for that text area, probably not a good idea for my name since there are some names that are longer than others, so I want to leave that blank, but I want to drag this out so there's plenty of room for the user to see their name. However for the phone number I want to restrict the number of characters that they can enter in that text input box. Notice that they editable parameter is set to true, password is set to false which is probably appropriate for both of those. However most phone numbers have an area code, US phone numbers have an area code of three numbers, a space, three more numbers, a dash and then four more numbers. So probably we want to restrict the number of characters here so that they get an idea of what we're looking for. So let's put eleven characters as maximum for my phone text input. Leave everything standard there or default, and let's go ahead and test the movie so I can demonstrate how this works. So let's say that their area code is 345 and then hit a space and then their phone number is 344-8900. You'll notice that I can't add anymore numbers, so at least for US visitors here to my website they'll get an idea that I'm looking for an area code and then a general number, no extension. Now my US, Outside US values here, you can't see that very well but they have a label there and you'll notice that the label says radio button. I have a better label that's in yellow, contrasts better with the dark blue background. So let's just go ahead and remove that radio label button. Notice that my group name is called radio group, and that's going to allow us to have these two radio buttons work in concert, since their group name is the same. Let's also remove the label for this one, and let's demonstrate the change by testing the movie. Now you'll notice that the labels are gone, also that if I click on one radio button the other radio button is disabled. You'll also notice that the default was to have no selection on either radio button, and so that's what this selected false means, I can change that to true. Notice also if I change the name of the group, call this radio group one, these two radio buttons will no longer act in tandem. And yes I want that to be selected so when I test this, the first radio button should be selected. And notice that now when I click on the second radio button it does not disable the first one because they no longer have the same group name. So let's go back and change that to radio group one. So as long as you only have one set of radio buttons leaving this component inspector to the default, they will work because Flash will give them the same name, but if you add more radio groups to your page here or to your stage, you will need to go in and change the group name so that they will work in tandem with each other, those that are in the same group. Let's now proceed to me checkboxes, and each of these have a label that I want to remove since I already have a much better label in the yellow. So let's remove these three. Now these don't have group names because they do not work as a group. If I test my movie you'll see that unlike my radio buttons I can select these independently of the others. By the way notice my radio buttons are working again since I changed them to the same name. Now the biggest component here in terms of modifying is my combo box right here, your system. In fact I need to basically configure the whole thing. And I'll do that here in the component inspector. Notice that I can change my editable parameter from false to true. You probably don't want to do that, you don't want your users to change that. Where I'll change the labels is right here, I double click on that labels field and now I get another input for a dialog box here where I can add my value. So let's go ahead and let's say that I have a system here, and this is the MX04 system, and now let me add the MX05 system. And continuing I can, notice, add as many values as I want MX07. I can change the order of these and so on. I can even delete them if I'm unhappy with one. MX07S and so on. click OK, and now let's go ahead and notice that there's the MX05, the first one is showing but if I test my movie you can see how the dropdown menu will work there. Now I haven't setup this component to actually do anything, I'm just modifying the appearance. You'll also want to drag and drop a button component and add that to your stage, and then re-label it submit so you can write some ActionScript to process the various form data that will be generated here. And one last thing be sure to open up the properties inspector and give each of these form instances names. So that will conclude this section of the tutorial on using Flash components. This demonstration of creating a simple form using several user interface components has provided me the opportunity to show you the basics of working with Flash components. There's a lot more to learn about them, including the last two phases; modifying the component themes to change their appearances, and then writing the ActionScript to gather and submit the data for the form. But this should get you off to a good start. To learn more about using these components go to the Flash help area and checkout the section on using ActionScript 3.0 components.