full size image] 9. Drag a TextArea component from the Components panel to the right of the grid on the Stage. Note The Library contains a single TextArea component and a single Component Assets folder, no matter how many components you drag to the Stage. You can create multiple instances from a single component. 10. Select the new instance of the TextArea component. In the Property inspector, set the text area's width to 290, height to 318, X value to 360 and Y value to 150. 11. Select Alpha from the Color menu, and select 0 for the percentage. A partially transparent box is included on the background image. An alpha value of 0% leaves the background of the text area completely transparent, so the original box shows through. [View full size image] 12. Name the instance mineral_ta to represent the mineral text area. Enhancing Components with ActionScript You've created the grid and the text display area. Now, you need to add the ActionScript to make this all work. An event listener will trigger a response when a thumbnail is clicked; the response is the display of the appropriate text. As you write the ActionScript, remember that you named the TileList instance thumbnails_tl and the TextArea instance mineral_ta. Also, note the path to the thumbnail images; they're in the Thumbnails folder. 1. Select frame 1 in the Actions layer. [View full size image] Note In ActionScript 3.0, actions can be applied only to frames, not movie clip symbols. Therefore, you must select a frame before applying actions. 2. Choose Window > Actions to open the Actions panel. If you are uncertain about the ActionScript spacing or punctuation, refer to the 08End.fla file you opened earlier. Select the first frame in the Actions layer to see the final ActionScript in the Actions panel. 3. Create the event listener for the tile list by typing thumbnails_tl.addEventListener(Event.CHANGE, thumbnailClicked); In this line, thumbnails_tl, the grid, is the event target; you're adding an event listener that is listening for a change event, which will trigger the event response called thumbnailClicked when a thumbnail image in the grid is clicked. Note Capitalization is very important in ActionScript. In the line above, make sure the instance name is lowercase and that other letters are capitalized exactly as they appear in the text. 4. Create the function, or event response, named thumbnailClicked by typing function thumbnailClicked(event:Event):void{ mineral_ta.text = event.target.selectedItem.data; } [View full size image] The function is named thumbnailClicked, and it's the event response that is called in the first line you typed. Its object is an event which has the data