| In this exercise, you will create a button to cause the SWF file to return to the home frame of the Tech Bookstore. You will duplicate your invisible button that you created in Lesson 4 and place it over a large logo so that it works like a hot spot. You have to duplicate the invisible button because there is a big hole in it which you will patch with the Merge Drawing model. You don't want to change the original invisible button because it won't work correctly if you do, so that means you have to duplicate and edit the symbol to minimize the amount of work you have to do. 1. | Insert a new layer above the buttons layer and name it home button. Select the buttons layer and insert a new layer called home button above it. The reason that you need a separate layer for this new button is so you can lock and hide it while not hiding the other buttons on the buttons layer. It's really just for organizational purposes and has no other hidden reasoning behind it. | 2. | In the library, Right- or Control-click the btnInvisible button symbol and choose duplicate from the context menu. Name the new button btnHotspot. You'll remember from Lesson 4 that duplicating a symbol is a great way to speed up development. In this case, you have all the elements you need for an invisible button; you just need to get rid of the gap in it. When you duplicate the symbol and rename it, double-click it to enter symbol-editing mode. | 3. | In symbol-editing mode, draw a rectangle the same color as the current fill over the gap in the button. Make sure that you are in the Merge Drawing model. In symbol-editing mode, select the Hit frame of your button. Select the Rectangle tool and set the stroke color to No Color. Press the fill color control, and hover the eyedropper over the rectangle currently in the Hit frame. Click to set the color. Make sure that you are in the Merge Drawing model and draw a small rectangle big enough to patch the hole in the graphic. Because the fill colors match, merge drawing will turn the whole graphic into one big rectangle. Click Scene 1 to return to the main document Timeline. | 4. | Drag an instance of btnHotspot into the home button layer and assign it an instance name. Drag an instance of btnHotspot from the library and drop it over the top of mcLogo. Using the Free Transform tool, resize the button so that it just fits not only the logo in the upper-left corner but it also covers the "Tech Bookstore" text. With the Selection tool highlighted in the Tools panel, click the invisible button you just created and expand the Property inspector, in which you can enter an instance name into a text input field where it says <Instance Name>. Click your mouse in the <Instance Name> text field and type btnHome. Now you can use ActionScript to reference that particular instance of the button on the Stage and execute code used to manipulate the SWF file in a particular way when the button is clicked (also known as an event). In this case, when the button is clicked, you return to the Home page of the bookstore. | 5. | Use Script Assist to add the ActionScript that will return the playhead to the frame labeled home. In this circumstance, you will add ActionScript directly to the button object using Script Assist. Select btnHome, and open your Actions panel with F9 or Option+F9 (Mac). Switch to Script Assist mode by pressing the Script Assist button. In your Actions toolbox, select Global Functions > Timeline Control, and double-click goto. This will add a gotoAndPlay action to your button by default. Change the action by selecting the Go To And Stop radio button. Change the type to Frame Label, and in the frame drop-down list, select "home." Script Assist automatically "sees" all your frame labels, which makes it easier to set the action. When you are finished, your Actions panel should appear the same as the following figure.
Tip You will want to use frame labels instead of frame numbers whenever possible. When your FLA files get larger and more complicated, it is much harder to remember what content was on which frame number. Also, if you ever move content, you would have to change your ActionScript instead of just moving the frame label to a new location. Using frame labels allows you to simplify and give frames a logical name rather than just a number. | 6. | Lock and hide the home button layer and clean up the library. Lock and hide the home button layer by pressing the eye icon and lock icon beside the name of the layer in the Timeline, which prevents you from accidentally adding any instances or moving the invisible button. It also means that you can hide the teal blue appearance of the invisible button while you are working on the Tech Bookstore. It is a good practice to keep the library clean as you work. Drag the btnHotspot symbol in the library into the buttons folder, move the mcMMPressLogo symbol into the movie clips folder, and move the Loader component into the components folder. | 7. | Save the changes you made to the FLA file. As usual, save your changes using File > Save before moving on to the next exercise. |
|