HO-12: Using Components in Flash Objectives To learn about using Flash s inbuilt components and explore how these can be used to increased user interactivity. To extend your understanding of programming in ActionScript 3.0. Flash Components Flash CS Professional comes with a number of pre-built components that fall into two main categories: (i) User Interface (UI) and (ii) Video components. You can access these by selecting Window/Components on the main menu (or Ctrl+F7). This reveals the components panel. The focus of this ho-exercise will be on the use of UI Components, such as buttons, checkboxes, radio buttons and combo boxes. These generally allow you to provide the user with options to select from. A component is a actually a movie clip with parameters that allow you to modify their appearance and behaviour, either at the authoring stage or at run time using ActionScript methods, properties and events. Components allow you to quickly build Flash applications which display consistent behaviour and appearance. They are designed to be reused, which means rather than creating new buttons, combo boxes and lists, etc you can use Flash components that implement these controls. To do this all you have to do is drag them from the Components panel into your Flash document. You can then customize the look and feel of the components to suit your application. You can read more about Components on the Adobe website: Flash CS4: http://help.adobe.com/en_us/actionscript/3.0_usingcomponentsas3/ Flash CS5: http://help.adobe.com/en_us/as3/components/index.html Buttons The first thing you are going to do is create a button using the button movie clip in Flash s Component Library. 1. Open Flash and create a new document called mpho12a.fla. 2. Modify the document so that it is 300 x 200 pixels in dimension and chose a suitable background colour. 3. Create two layers, one called Actions and the other Content. 4. Select frame 1 of the Content layer and use the Text Tool (on the Tools panel) to drag out a text field on the stage. In the Properties Panel choose Static Text from the pull down menu and enter a heading for this exercise, e.g. 'HO12A: A Flash Button from the Component Library. 5. With frame 1 of the Content layer still selected, drag a copy of the button from the Components panel onto the stage. HO-12: Using Components in Flash Page 1 of 7
6. Once the component is on stage its properties can be adjusted by using either: (i) the Properties and Parameters panel (select Window/Properties/Parameters to reveal the Property Inspector with the Parameters tab selected) or (ii) the Component Inspector panel (select Window/Component Inspector): 7. Use these to change the label text to: Continue and give the button an instance name: continue_mc. 8. Next draw out a Dynamic text box beneath the button, set the Properties to Single Line and give it an instance name: buttonclick_txt. 9. Save your movie and test it. What do you observe? At this stage not much as you now need to add the ActionScript code that will make something actually happen. 10. You should remember how to do this from the earlier handson exercises? If not it involves adding an event listener that responds to a mouse event (ie. The button being clicked), for example: continue_mc.addeventlistener(mouseevent.click, buttonclick); function buttonclick(event:mouseevent):void { buttonclick_txt.text = "Button Clicked" } 11. Add this ActionScript code to Frame 1 of the Actions layer and retest your movie. The dynamic text box should be populated when you click on your button. Radio Buttons This exercise uses a series of radio buttons to create a simple multiple choice type question (in this case 'What is the pass mark for an ITApps FMA?'). The user then has to select the radio button that they think corresponds to the correct answer: 1. Open Flash and create a new document called mpho12b.fla. 2. Modify the document so that it is 400 x 300 pixels in dimension and chose a suitable background colour. 3. Create two layers, one called Actions and the other Content. 4. Select frame 1 of the Content layer and use the Text Tool (on the Tools panel) to drag out a text field on the stage. In the Properties Panel choose Static Text from the pull down menu and enter a heading for this exercise, e.g. 'ITApps Assessment Quiz. Adjust the text properties, size, colour, etc as appropriate. 5. Create two more Static Text boxes with text, Question 1: What is the Pass Mark for an ITApps FMA? and Answer, positioned as shown below. 6. Next create a Dynamic Text box, with an instance name: answer_txt, set the properties so that a border will be shown around the text. HO-12: Using Components in Flash Page 2 of 7
7. Position the Dynamic Text box beside the Static Text box labelled: Answer (Note: you may need to re-position the Dynamic Text box when you come to test your movie to ensure the text in the two boxes is correctly aligned): 8. Finally select Window/Components on the main menu to reveal the Components library and drag four instances of the Radio Button from the Component Library onto the stage. 9. Position these Radio Buttons below the Question 1 text block (see figure below). 10. Select Window/Parameters to set the parameters of each of the radio buttons in turn, setting: groupname = q1group; label = 30%, 35%, 40%, 45%; instance name = rbutton1, rbutton2, etc; and value = 1, 2, 3 and 4, respectively. Finally set the selected value = true for rbutton1, but leave it false for the other 3 radio buttons: 11. Note: (a) You must assign all four buttons to the same groupname (q1group) to make them behave as a single unit. (b) The label field contains the text that will appear next to the radio button. (c) The labelplacement field controls the relative positioning of the label's text (in this example the text is right aligned. (d) The selected field indicates whether that radio button is selected (in this example this field is to false for all the radio buttons, so none are initially selected). HO-12: Using Components in Flash Page 3 of 7
(e) The value field contains the value that will be returned when that button is selected. Usually this is set to return simple numerical values, e.g. 1, 2, 3, 4 etc but it can be set to return a text string. 12. You now need to add a button that the user clicks to check whether they have got the correct answer. Rather than create a button from scratch simply drag a copy of the Button from the Component Library. 13. Position the button in between the Radio Buttons and the Answer text block (note you may need to reposition the latter to create enough space for the new button) and set the label to: Check Answer and instance name to: chkans: 14. Note: by double clicking on the button you reveal the different states of the button. You can then double click on the relevant state of the button to adjust its properties. 15. Save your work and test your movie. You should find: (i) that your Radio Buttons function correctly, i.e. only one can be selected at any one time!? And (ii) the button state changes when you roll over or click on the button (depending on how you adjusted the properties of the button). Other than that nothing else happens. 16. Your final task is to add ActionScript code (similar to that shown below) so that the quiz compares the users selection against the correct answer and returns a message depending on whether the user is correct or not: HO-12: Using Components in Flash Page 4 of 7
17. Once you have entered the code test you movie to see whether it functions correctly? If it does it should look similar to that show below: 18. Once all is working OK, resave your file. 19. Note: At present the answer that is returned in the dynamic text box is the same for each wrong answer. 20. Save a copy of your file as mpho12c.fla and think about how the ActionScript code can be modified to generate a different response based on which radio button is selected? For example, if: rbutton1 is selected; response = 'Incorrect, 30% is much too low. rbutton2 is selected; response = 'Incorrect, 35% was the old pass mark.' rbutton4 is selected; response = 'Incorrect, 45% is much too high.' 21. Essentially you need to modify the if statement in your function: HO-12: Using Components in Flash Page 5 of 7
CheckBoxes This exercise uses a checkbox to perform one of two actions depending on whether the checkbox is selected or not. 1. Open Flash and create a new document called mpho12d.fla. 2. Modify the document so that it is 400 x 200 pixels in dimension and chose a suitable background colour. 3. Create two layers, one called Actions and the other Content. 4. Select frame 1 of the content layer and drag a copy of the CheckBox out of the Component library onto the stage. 5. Select Window/Properties/Parameters to adjust its properties, setting instance name = protectch, and the Label = Click if Loan Protection is Required: 6. With frame 1 of the Content layer still selected use the Text Tool to drag out two Dynamic Text boxes on the stage: Position one of the Dynamic Text box immediately below the checkbox and set its properties to, instance name: protect, Font: Arial, 10pt, Red. Position the other Dynamic Text box toward the bottom right of the stage and set its properties to, instance name: protectpay, Font: Arial, 14pt, Black. 7. Finally insert a Static Text beside the 2 nd Dynamic text box and enter the following text label: Payment Protection: 8. Resave your work and test your movie. Again very little will happen because you still have to add the ActionScript code. 9. Thinking about what you have done earlier in this exercise, try and write code that will return the following text: (I) 'Payment Protection is Required' in the top Dynamic Text, and (ii) the amount of the payment protection (= 5000 x 0.03) in the bottom Dynamic Text Box, when the user clicks on the CheckBox. HO-12: Using Components in Flash Page 6 of 7
10. Your ActionScript code should look similar to that shown below: 11. The final movie should look similar to that shown below: 12. Click here to download all the completed Flash files from the exercise. Additional Reading and Resources: Getting Started with Flash Interface Components: http://www.adobe.com/devnet/flash/quickstart/getting_started_ui_components.html Components Learning Guide for Flash: http://www.adobe.com/devnet/flash/learning_guide/components.html Flash Components: http://www.adobe.com/devnet/flash/components.html Flash Components: http://oreilly.com/flash/excerpts/flash-learning-cs4/components.html Learn How-to Create Flash Components using AS3, XML and Flickr API: http://www.thetechlabs.com/tech-tutorials/xml/learn-how-to-create-flash-componentsusing-actionscript-30-xml-and-flickr-api/ An XML-based Radio Button Quiz in Flash CS3: http://www.flashandmath.com/intermediate/radiobuttonquiz/index.html Creating e-learning content: http://livedocs.adobe.com/flash/9.0/usingflash/ HO-12: Using Components in Flash Page 7 of 7