Adobe Flash CS3 Tutorials - Configuring Components

The text listed below is an extract of the content from the closed captions which accompany this training video and thus are not grammatically correct when read out of context. For more information on this video, please follow the link above.

Closed captions in this movie read:

 

Next Tutorial Flash CS3 -Publishing Overview
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.