Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll take a look each using components to build a simple form. If you're following along, I'm working in 02_Component_Form.fla in the Chapter 07 folder in the Exercise Files folder. This file has two layers: actions and form elements. Let's select the form elements layer and choose Window, Components to open the Components panel. In the Components Panel drag a button component on the stage from the User Interface section. Also drag a label component on the stage.
We'll also need a text area component and a text input component. Close the Components panel. Now we'll start aranging the components on the stage. Place the label component on the left side of the stage, and in the Parameters tab, change the Text value from Label to Name:, with a colon. Next set the autoSize value to right, to make the text field aline to the right. And that's good for our label. Move the text input component to the right of the label component and this will accept the user's name. You can resize a component just like you can resize a movie clip. Select the component.
Select the Free Transform, I pressed Q on my keyboard to select the Free Transform tool, and then scale the component. And you can hold Alt on the PC, Option on the Mac, to tell Flash whether to scale from the middle or scale from an edge. So we have a Name field. Now let's select both the Name label and the text input component. With both of them selected, I'm going to hold Option on the Mac or Alt on the PC, and click and drag those components down to create copies of the components.
I'm going change the Name label in the Parameters tab at the bottom of the screen to display e-mail. And this text input field will accept the user's e-mail address. I'm going to move the button component out of the way and I'm going make a copy of the e-mail label component, by selecting it and holding Option on my keyboard on the Mac, or Alt on the PC and dragging the component down and I'll change the component label in the Property inspector, instead of the e-mail to read Comments.
That's the text parameter in the bottom of the screen. Now I'll move the text area component to be aligned with the other components on the stage. And I'm going to resize it using the Free Transform tool holding Option on my keyboard on the Mac, or Alt on the PC to resize the text area. Now that I've sized that component, I'm going to put the button component below all the other text fields, and I'm going to select the button and change the label parameter at the bottom of the screen in the Parameters tab to display Submit.
Now if we want to be able to communicate with these text fields and buttons using ActionScript then we need to give these objects Instance Names. So I'm going to select the top text field and in the Property inspector, I'm going to give this text field an Instance Name of a name_txt. I'm going select the e-mail text field, and I'm going to give that an Instance Name of email_txt. I'm going select the comment's field and give that an Instance Name of comments_txt. And I'm going select the Submit button and give that component and Instance Name of submit_btn.
Once our components are named, we're ready to start adding ActionScript, to make this simple form send an e-mail.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.