| You can use the Button component in Flash for anything you can image buttons to do, such as to submit form data when the button instance is clicked, among other things. Button component instances can be used to trigger events written with ActionScript just like button symbols, such as opening a new browser window and web page. So why use a Button component? Well, first of all, you don't have to build it...it's ready-made. Second of all, there are many properties of the Button component that you can control using ActionScript, when you've finally been converted to a script-nerd (evil laughter here), such as the label text or its rollover color. You cannot programmatically control these properties with button symbols. This exercise continues where you left off in the previous exercise. 1. | In bookstore12.fla, open mcFeedback in symbol-editing mode, and then select Frame 1 of the form layer.
You probably still have bookstore12.fla open in Flash. Find mcFeedback in the library, and double-click the movie clip to open in symbol-editing mode. Then select Frame 1 of the form layer inside the movie clip.
| 2. | Add a Button component to the Stage by dragging it from the Components panel and dropping it onto the Stage. Change the text label on the Button instance.
With the form layer still selected, drag an instance of the Button component from the Components panel on to the Stage. Select the instance you just added, maximize the Property inspector, and type bSend into the <Instance Name> field. Then select the Parameters tab.
Change the text on the button from the default Button to Send by typing in the new value of the label parameter. The Button instance's label (the text on the Button's face) changes after you change the value in this parameter and press Enter.
| 3. | Change the position of the Button instance on the Stage to the lower-right corner of the rectangle graphic.
Move the Button instance to an x and y coordinate of 207 and 280 pixels, respectively. Use the W and H text fields in the Property inspector to change the location of the instance. The position of the instance is moved to the lower-right corner of the rectangle graphic on the Stage. Leave the dimensions of the button at 100 pixels wide by 22 pixels high.
 | 4. | Import an icon graphic for the Button instance into a new graphic symbol.
You can customize the Button component by linking an icon to the instance. The icon will be displayed on the face of the Button instance, which allows you to add a nice personal touch to the form and make the form a bit more usable. The icon must be a graphic or movie clip symbol in the library, and it must have a linkage identifier, which you need to link to the Button component instance.
Tip Included on the CD-ROM in the finished bookstore12.fla file is an icon that you can use with the Send button. Alternatively, you could create your own custom graphic or movie clip in Flash that could be used instead. Open mail_icon.fla from the lesson08/start folder on the CD-ROM by selecting File > Import > Open External Library, and drag the send_gr graphic symbol from the external library into the bookstore12.fla library. The drawing that is made inside this graphic has its x coordinate and y coordinate set to 0 and 0, respectively.
| 5. | Rename the symbol to grSend to be consistent with your current naming convention, and add a Linkage Identifier to the grSend symbol in the library.
Many problems that people experience in Flash are due to two things: lack of planning and lack of consistency. In this circumstance, we are importing a graphic symbol created by a different designer who is using a naming convention other than what you are using. Changing the symbol's name in the document library ensures that your naming conventions are still consistent. Change the symbol's name by double-clicking the name send_gr in the library, and typing grSend in its place.
Second, before you can use the symbol as a Button icon, you have to assign it a name so Flash can link it to the Button component instance. By using the Linkage Properties dialog box, you can assign a Linkage Identifier to the symbol, which allows Flash to uniquely identify the symbol so you can use it in the SWF file.
In the document library for bookstore12.fla, locate the grSend symbol you just renamed. Right-click (or Control-click on OS X) the grSend symbol in the library and select Linkage from the contextual menu. The Linkage Properties dialog box opens.
In the Linkage Properties dialog box, select the Export for ActionScript check box in the Linkage section of the dialog box, which allows you to enter an identifier in the text fields at the top of the window. grSend should show in the Identifier field by default. If not, enter grSend into the Identifier field and leave the AS 2.0 Class field empty. Click the OK button to return to the Stage.
 | 6. | Add an icon to the Button component instance.
Select the Button component instance in the lower-right corner of the Stage and maximize the Property inspector. Enter the Linkage Identifier, grSend, into the icon parameter in the Parameters tab of the Property inspector. The Linkage Identifier is what ActionScript uses to find objects from the document library when the SWF file is running. It is case sensitive, so it's important to type the name into the icon parameter exactly the same way as it appears in the Linkage dialog box. When you finish, you will notice a grey box on the left side of the Send label of the Button instance.
 This is where the icon will be located when you publish the SWF file. The icon will not show up in the authoring environment. You need to test the SWF file to view the icon on the instance, but because you do not yet have an instance of this movie clip on the Stage, you will not see anything relating to the form if you test now.
| 7. | Modify the position of the icon on the Button instance.
If you want to change the location of the icon on the Button instance, you can modify the value for labelPlacement in the Property inspector. By default, the value for labelPlacement is set to right, which means that the label appears on the right side of the icon. If you set the labelPlacement parameter to top or bottom, you might need to resize the button's dimensions on the Stage in order to see both the icon and the label.
| 8. | Insert a new layer above the form layer and call it labels. Then insert a new layer above labels and rename it actions. Select Frame 20 and press F5 for all the layers so they extend to Frame 20. Then insert a keyframe on the actions and labels layer at Frame 10, and add frame labels at Frames 1 and 10.
Select the form layer and click the Insert Layer button in the Timeline to insert a new layer, and rename it labels. With the new labels layer still selected, click the Insert Layer button again, and rename the new layer actions. When you have the new layers created, press F5 on Frame 20 for all four layers. Then insert a new keyframe on Frame 10 on both the labels and actions layers. Press F6 to insert new keyframes.
 Select the keyframe on Frame 1 of the labels layer and type form into the <Frame Label> field in the Property inspector. Then select the keyframe on Frame 10 and type thankyou into the <Frame Label> field.
| 9. | Insert a blank keyframe at Frame 10 on the form layer. Add some text somewhere within the grBackground graphic that says "Thank you for your feedback" or similar. Drag a Button component and place it below the text.
Select Frame 10 and then choose Insert > Timeline > Blank Keyframe from the main menu. Select the Text tool, set the text to static and whatever font you choose, and enter a message saying that the feedback has been sent. When you're finished, open the Components panel and drag an instance of the Button component onto the Stage. Change the button's label to Back using the Property inspector, set the Instance name to bBack, and position the button at 207 x and 280 y, so that it matches the position of the Send button.
With the Button component instance still selected, expand the Actions panel and switch to Script Assist mode if you are not already in it. In the Actions toolbox, expand Global Functions, Timeline Control, and double-click the goto action. In the parameters, choose the Go to and Stop radio button. From the Type drop-down list, select Frame Label. In the Frame drop-down list, select form.
 You will not add the ActionScript for the instance bSend yet. You will add that ActionScript in the next lesson.
Note The triggering event in your Actions panel is on(click). Button components have different events that they can respond to, another thing that separates them from Button symbols. A Button symbol would have had a triggering event of on(release), which is the same thing as on(click). Both events mean that someone has clicked and let go of the mouse button. | 10. | Save the changes you made to the feedback form and return to the main Stage.
Save bookstore12.fla in the TechBookstore folder after you finish positioning elements on the Stage and you are pleased with the way the icon looks. You will continue working with this file in the next exercise that builds a second form using more components.
|
|
