Part IV: Adding Basic Interactivity
Overview
This Hands On tutorial will help you cap off Part IV of this book and put some of your new Flash skills to work. Here we will combine the techniques covered in this part: using behaviors to add navigation and incorporating components for additional interactive functionality.
The first thing you should understand about this favorites application is that it is just that: an application. It is a "unit" of computer software that performs certain tasks . In this case, the application allows you to organize favorite photos and websites and share them with people who visit your website.
This application is not an entire website. Though Flash is perfectly capable of creating complete websites, that's not what this application is meant to do. It is a small element that can be added to your website. The application could appear alongside text and graphics, embedded in HTML, or it could exist on its own as one of your links. However you plan to incorporate it, we hope this application will be useful to both you and your audience.
On the CD If you like, you can see the finished files before you start creating the application on your own. They might be helpful because they will allow you to see the finished product (see Figure H4.1) and get an idea of what it looks like and how it will work. The finished files are named favorites_app.fla and favorites_app.swf . You can find them in the Hands On 4 folder on this book's accompanying CD-ROM. Realize that this lesson presents one way that you can design your application. If you would like to change the layout, use different graphics, and so on, feel free to do so. The value of this lesson is based more on the process that is presented than on exactly duplicating each step. If you are ready to begin, keep reading, good luck, and have fun!
Figure H4.1: The finished favorites application will look something like this. If necessary, you can use the file favorites_app.fla as a guide.
Phase 1: Setting the Stage
We can begin by creating a new, empty Flash document and filling it with the assets the application requires.
To start building the favorites application:
1. Launch Flash MX 2004 or MX Professional 2004.
2. Choose File New and select Flash Document from the New Document dialog box. Click OK. Then choose File Save As, give your document a name, and click OK to save it to your computer's hard disk.
3. The first order of business is to set the size of the Stage. Choose Modify Document to display the Document Properties dialog box. Set Width to 470 and Height to 234; then click OK.
4. Your application needs to have five layers in the main Timeline. Click the Insert Layer button 
four times to insert four new layers. From top to bottom, name the layers as follows : code , titles , buttons , components , and photos . Now, with layers in place, you can populate them with various elements of your application.
5. Click the photos layer to select it. Choose Window Development Panels Components to open the Components panel. Drag a Loader component from the UI category of the Components panel to the Stage.
6. Use the Property Inspector (Window Properties or Cmd/Ctrl+F3) to make the dimensions of the component 240 (width) by 180 (height), and position it so that its upper-left corner is at X-Y coordinates (10, 24).
7. Click the components layer to select it. Drag a List component from the UI category of the Components panel to the Stage.
8. Using the Property Inspector, set the List component's dimensions to 200 —180. Position it at (260, 24) and give it the instance name webList .
9. Click the buttons layer to select it. Drag a Button component (also in the UI category) to the Stage.
10. Once again, use the Property Inspector to set the Button component's dimensions to 20 —20. Position it at (205, 209) and give it the instance name back .
11. Repeat steps 9 and 10. Place a second Button component at (230, 209) and give it the instance name forward .
12. To see what your application should look like at this point, see Figure H4.2.
Figure H4.2: After laying out all the elements of your application, it will look like this. The Loader component is visible only when it's selected.
Phase 2: Building the Application
With layers for the various elements of your application and most of these elements in place, you are ready to begin the real work of putting this thing together.
To build your favorites application:
1. It will help your audience if the various parts of your application are labeled. Click to select the titles layer of the main Timeline and select the Text tool from the Tools panel.
2. Click the upper-left corner of the Stage to create a new text box and type my favorite photos . Check the Property Inspector to be sure that the text is Static Text, and choose a font, size, and color that you think works well for your application. Position the text at X-Y coordinates (10, 5).
3. Repeat steps 1 and 2. The new text should read my favorite websites . Place this line of text at (260, 5).
4. Press Cmd/Ctrl+ S to save your application.
5. This next series of steps is a bit more complex than what you have done in this lesson so far. You'll turn the Loader component into a Movie Clip so that you can control it with behaviors. Click to select the Loader component on the Stage. Choose Modify Convert To Symbol or press F8. The Convert To Symbol dialog box opens.
6. In the Convert To Symbol dialog box, enter photos in the Name field and select Movie Clip for its behavior. Check the Registration box so that the registration point is set at the upper-left corner of the new symbol. Click OK.
7. The newly converted Movie Clip should be displayed in your movie's Library. Choose Window Library to open the Library and see the clip.
8. In the Library, double-click the photos Movie Clip icon to open it in Symbol Editing mode.
9. Now you're going to add some features to this clip so that it will work as a kind of "frame" that holds and loads JPEGs into your application. Start by renaming layer 1 of the Movie Clip loaders . Click the Add Layer button in the Timeline to create a new layer and name it code .
10. Click the first keyframe of the loaders layer to highlight the Loader component, then click the component itself to select it.
11. Open the Property Inspector; it should display parameters for the Loader. Give it the instance name frame1 and enter parameters for the Loader as follows:
§ Set autoLoad to true.
§ Set scaleContent to false.
12. For the contentPath parameter, enter the name of a JPEG image that you want to show in your favorites application. Be sure that this image is saved in the same folder as the file for your application, and check to see that it is not a progressive JPEG. Flash can't handle this kind of JPEG file.
|
| Note | This lesson assumes that the JPEGs you use are 240x180 pixels. Be sure to resize your images before using them in this application or to set the scaleContent parameter to true so that your images are resized by the Loader. |
13. On the CD If you don't have any JPEG files available, feel free to use the files we've provided on this book's accompanying CD and copy them to the location where you've saved your favorites application. Look for lil_dog.jpg and hanalei.jpg in the Hands On 4 folder.
14. Click frame 2 of the loaders layer in the Timeline. Press F6 to insert a new keyframe. When you do this, Flash duplicates the contents of the previous keyframe in the new keyframe.
15. Click to select the Loader component in the second keyframe. Go to the Property Inspector.
16. Give the component the instance name frame2 and set the contentPath parameter to the name of another JPEG image you want to show in your application.
17. Because the photos Movie Clip now has two frames, you need to add a bit of ActionScript to prevent it from cycling through these frames continuously. Click the empty keyframe of the code layer. Choose Window Development Panels Actions and type the following statement in the Actions panel:
stop();
The stop() function will prevent the Movie Clip Timeline from playing until you tell it to do so.
18. Choose Edit Edit Document to return to the main Timeline.
19. Click to select the instance of the photos Movie Clip on the main Timeline. Go to the Property Inspector and enter photos_mc as its instance name. This will enable you to control the Movie Clip from the buttons with behaviors.
20. Click the back instance of the Button component on the main Timeline. Go to the Property Inspector and enter < “ (Shift+ , then a hyphen) for the label parameter.
21. Repeat the previous step for the forward instance, but this time enter “> (a hyphen, then Shift+ . ) for the label parameter. These labels identify your buttons as forward and back buttons for the photo section of your application.
22. Now that your buttons look as if they should do something, you can make them do something by attaching behaviors. Click the forward instance to select it. Choose Window Development Panels Behaviors to open the Behaviors panel (see Figure H4.3).
Figure H4.3: The Behaviors panel allows you to attach behaviors to the Button component and navigate through the photos Movie Clip.
23. If the Current Selection area of the Behaviors panel reads "unsupported selection," click the Behaviors panel menu in the upper-right corner and choose Reload to refresh the panel.
24. Click the Add Behavior button ( + ) and choose Movie Clip Go To And Stop At Frame Or Label. The Go To And Stop At Frame Or Label dialog box opens.
25. Click the Absolute radio button in the dialog box and select photos_mc from the Target MC field.
26. Enter the number 2 in the Frame (Label) field and click OK. This behavior will send the photos_mc clip instance to frame 2 of its timeline, and reveal the image that is loaded into the Loader component at the second frame.
27. Repeat steps 24 and 25 for the back instance; only this time, set the photos_mc clip instance to stop at frame 1 of its timeline.
28. Save your work. Then select Control Test Movie and click the forward and back buttons to navigate through the images.
29. Now it's time to move on to the List component. You will use it to display a list of your favorite websites. Click the List component to select it and look at the Property Inspector.
30. Enter parameters for the List component as follows:
§ Labels: Enter the names of your favorite sites. These are the names that will appear in the application.
§ Data: Enter the full URL for each site, for example, http://www.vonflashenstein.com .
Be sure that the order of labels and data parameters is consistent. Otherwise, clicking a label will take your users to a different site than reflected by the label. If you are unsure how to enter these parameters into the Property Inspector, read more about the List component in Chapter 16.
31. The List component by itself is useful only for holding information. To make it work, you need to add some ActionScript that extends its functionality. Click to select the empty keyframe of the code layer of the main Timeline. Open the Actions panel (F9) and enter the following statements:
32. url=new Object();
33. url.change = function(evt){
34. var link = evt.target.selectedItem.data;
35. getURL(link,"_blank");
36. }
webList.addEventListener("change",url);
These statements use an Event Listener function to open the website that is selected in the List component. When the change event occurs (which happens whenever a user clicks an item in the List), the data value of that item is stored in the variable link . The variable is then plugged into the getURL() function, which opens the value of link in a new browser window.
37. Save your work; the application is now complete!
Phase 3: Testing the Application
An important part of application development is testing. You want to be sure that the application you've created will behave in the ways you and your users expect.
To test your favorites application:
1. Choose Control Test Movie from the main menu bar. Flash switches to Test Movie mode and your application is presented in a new window.
2. Click the forward and back buttons. Each should show a different image in your photo gallery.
3. Click each name in the List component and wait for the URL to load. Be sure that each item links to the correct website.
If any aspect of your application behaves incorrectly, go back in the lesson and check that you followed each step carefully . Possible causes for error could be
§ Missing instance names for the photos Movie Clip or any of the components
§ Incorrect parameters assigned to one or more components
§ Wrong parameters assigned for the behaviors attached to buttons
§ JPEG images need to be saved in the same location as the file for your application. If you need to keep them in a separate location, be sure to specify the correct path so the Loader component can locate the images.
Phase 4: Steps for the Future
Your favorites application is finished for now. If you are interested in expanding the application or working it into your website, here are a few suggestions.
Add more photos to the gallery. As it stands now, the application has only two photos. You would probably like to expand upon this. Unfortunately, the standard behaviors that ship with Flash MX 2004 and MX Pro 2004 have limitations that make this somewhat awkward . Your best bet is to write the ActionScript yourself. Attach the following ActionScript statements to the forward button instance:
on(click){ root.photos_mc.nextFrame(); }
Attach similar ActionScript statements to the back button instance:
on(click){ root.photos_mc.prevFrame(); }
|
| Note | Notice that the handler uses the click event to trigger these scripts. This is an event that is unique to the Button component; it has no effect when used with Button symbols in Flash. |
These scripts use the nextFrame() and prevFrame() functions to advance the timeline of the photos_mc clip instance one frame at a time. You can fill the photos timeline with as many Loader components as you like and the buttons will allow your audience to browse through them all.
Use Dreamweaver to embed this application in the HTML of your website. Dreamweaver is a great tool for web development. It allows you to take a hands-off approach when doing HTML markup and makes it very easy to incorporate Flash movies into a web page. To learn more about integrating Dreamweaver and Flash, see Chapter 27.
If you do plan to put your application on the Web, be sure to upload the HTML, the SWF file of the application, and the JPEG images you display in your photo gallery.
EAN: 2147483647
Pages: 54