Adobe Flash CS3 Tutorials - Creating a Form Using UI 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 -Configuring Components
Let me now demonstrate in the next few movies how to work with and modify Flash
components by using several of the user interface components that I introduced
In the previous movie, to create a basic form. There are four general phases or
steps that you'll go through when working with components. First step is to add
the components to your project file, then you'll configure your components using
either the properties inspector or the component inspector. The third step is to
modify the component themes, these are the visual themes to change their
appearance. Remember that components are simply movie clips and you can double
click on them and often go in and change their appearance. The fourth step is to
write ActionScript to gather and submit your data. In this case it will be data
for the form that we're creating. Now my treatment here will concentrate on just
the first three phases because phase four involves more complicated
ActionScripting and custom server configurations, both subjects which fall
outside the scope of this course. So let me go ahead and start with phase one. I
have a Flash file here that's all ready, all the labels are ready for me to drag
and drop the various user interface components from the components panel. So
I'll use this file to build my form. Let's start with a text input component for
the name and drag that on there, and also for the phone number. And I don't want
to actually modify this, so let's undo that skew there, I have the free
transform tool selected. In the next movie I'll go ahead and demonstrate how to
modify both the appearance and the functionality of these form components. Now
next I have US, outside US, in other words they can only choose one or the other
so this is a perfect application of a radio button. So let's go to my radio
button component and drag two of these onto the stage like so. Let's go ahead
and just place these in the right location. And the reason I'm using a radio
button is that they can only be in one or the other, either in the US or outside
of the US. Operating system they have three choices, Mac, PC or Unix. This is
probably a better application for checkboxes. In other words they could have
multiple systems and be experiencing problems with all of them. And you'll
notice that I have a label that's already on there that I can either delete it
or I can use it as part of the label over here, I can erase my text labels. There are some radio buttons. One thing I am going to do here is I am going to
highlight each of these radio buttons, and I accidentally selected the
background, so let's go over here to the timeline, and let's anchor the timeline
up here at the top of the interface like so. And let's lock that background
layer so I don't have anymore problems accidentally selecting it. And now I'm
going to highlight each of these checkboxes and go to my alignment or align
panel here and distribute these so that they line up on the left and that they
are also equally spaced. Now the next one here, your system, is probably good
for some kind of dropdown menu, so let's close my align panel and bring out my
components panel again, let's bring it over here to the left. You can see that
I'm reviewing some of the concepts that I've covered in much earlier movies in
this tutorial, and that is how to work with these various panels. Notice that
I'm anchoring them or keeping them as free floating. Now I don't have much space
here in my interface, but I need to have some kind of choice where they can
choose which actual system they are using here, so this was a good application
of the combo box right here below the checkbox. Let's drag and drop one of those.. ...onto my interface and line that up like so. And then again in the next movie
I'll go in and show you how to modify the behaviors of the formatting. Now the
next one, describing the problem is probably going to require a little bit more
than just a text input field, so let's add a text area component like so. And
what I'll do in the next movie then is show you how to modify these components. For example this text area obviously needs to be bigger if they're going to have
room to describe their problem. So I'll be showing you a variety of techniques
for then preparing these component elements so they work the way you intend here
in your form, and that will be the topic of the next movie.