Chapter 18: Writing ActionScript
Overview
This part of the book has provided an introduction to the ActionScript language and walked you through various examples. You learned ActionScript vocabulary and syntax and how to put it together in ways that allow you to "say" something to Flash. Some of the things you did were very simple; others explored more advanced topics. In this section, you will combine much of what you have learned to see how the elements of ActionScript can come together to create a complete system of interaction.
This lesson shows you how to create a website interface that uses pop-up windows. It would be accurate to say that the term "pop-up window" has developed a stigma in recent years . Many advertisers on the Internet use pop-up windows to bombard users with unsolicited offers and "special deals." Pop-ups are great for delivering digital junk mail.
In spite of this stigma, they also have good uses. Pop-ups, by nature, get our attention. When something springs onto the screen, it's hard for people to ignore it. It also sends a message: "Here's something new," or "We're moving on to something different." The pop-up clearly conveys a change of content to your audience, and provides a way of differentiating one section of a Flash movie or application from another.
Additionally, from a development point of view, pop-ups allow you to develop content modularly. Rather than make an audience wait to download the entirety of your Flash movie when all they need to see is one section, pop-ups allow you to separate your content into smaller pieces so your audience can load only the sections that interest them.
On the CD To complete this lesson, you will need a few files. Go to the Hands On 5 folder on this book's companion CD and copy the following files to your computer's hard disk: main.swf , main.fla , main_cd.fla , popUp.swf , popUp.fla , and popUp_cd.fla . To see what this lesson is all about, double-click main.swf to open it. Once the file is open , click the word history in the interface; a pop-up window will spring onto the screen (see Figure H5.1). Click the pop-up window's gray title bar ad drag it. You can move it across the bounds of the screen. Finally, click the Close button in the upper-right corner of the pop-up. The window disappears. This is what you are about to create.
Figure H5.1: The history button of the interface (top) opens a pop-up window (bottom) when you click it.
If you get lost or confused , you have a safety net of sorts. The files main.fla and popUp.fla are the finished files. They contain all the scripts you will write and all the art you will place. Use them whenever you want to peek under the hood of this movie. To start the lesson, you will use the files main_cd.fla and popUp_cd.fla . These documents contain all the symbols and graphics that are required. If you prefer to use your own artwork, you may.
To create an interface that triggers pop-up windows:
1. Open main_cd.fla and popUp_cd.fla . You will work on each movie, so it's helpful to have each file open. To switch from one document to another, use the Window menu and select the name of the file you want to edit.
2. Choose Window Library (F11) to open the Library for each movie. Keep the Libraries open throughout this lesson.
3. Choose Window Actions (F9) to open the Actions panel and Window Properties to open the Property Inspector (Cmd/Ctrl+F3). You will also want to have these available at all times. If your screen is looking a little cluttered, you can try docking or minimizing some of the panels. To learn more about these procedures and how to customize Flash's workspace, see Chapter 3.
Once the necessary files and panels are open, you can begin.
Phase 1: Designing the Main Interface
The first task is to get your main interface in shape to trigger the pop-up windows. Make main_cd.fla the active document. As the name suggests, this is the file that will serve as the core of your interface. To create the interface:
1. First and foremost, let's discuss what's already in this file and its reason for being there. The Stage size is 768 —432. This allows the interface to occupy the entire browser window when a browser has been maximized at a screen resolution of 800 —600. This is a good size to use if you are targeting a general web audience. If you aim for a more tech-savvy crowd , you could go up in size to accommodate a higher screen resolution.
The design of the interface is minimal. All that is required for the lesson is some text that serves to identify the different links. Feel free to expand the design to fit your particular needs and taste. Remember, this lesson is meant to demonstrate a process, not "The Only Way to Do Something."
2. To trigger the pop-ups, you need to have some buttons. This example is the perfect candidate to use invisible buttons, as discussed in Chapter 15. Click the buttons layer in the Timeline to select it. Then drag the button button from the Library to the Stage. Position it over the word history .
3. Use the Free Transform tool to resize the button so that it completely covers the word and give it the instance name history in the Property Inspector.
4. Repeat this process for the words landscape and information , resizing the buttons and assigning the instance names landscape and information , respectively. The invisible buttons will cover the text with a semi-transparent blue box. This is there to show you where the buttons are positioned, but it will not appear in your final movie.
5. Now let's assign some functions to the buttons. This will not be a final script, just something to test that everything is working properly. Click the empty keyframe of the code layer to select it and enter the following statements in the Actions panel:
6. history.onRelease=function(){
7. trace("clicked");
8. }
9. landscape.onRelease=function(){
10. trace("clicked");
11. }
12. information.onRelease=function(){
13. trace("clicked");
}
These statements allow you to check that the button is working by printing the word clicked to the Output panel. Save your movie, then choose Control Test Movie.
14. Click each chunk of text. For each click, you should see a message appear in the Output panel.
Eventually, these buttons will be used to trigger the pop-up window and load it into your Flash movie at level1 . However, before you can do that, you need to create the pop-up window file so that you have something to load. That's your next step.
Phase 2: Creating the Pop-Up Window and Scripting Its Behavior
Now that the main interface is in shape, you can move on to create the pop-up window movie. Make popUp_cd.fla the active document and you are ready to continue.
1. The first thing you will notice about this file is that it appears to be empty, and it is! Don't worry, filling it with content is our focus here. Go to the movie's Library and double-click the icon for the window Movie Clip. This opens the clip in Symbol Editing mode.
|
| Note | If you can't find the symbol in the Library, be sure you're looking in the right place. Remember, you have two Libraries open right now. The Library panel's title bar will let you know which is which. |
2. This is the clip you'll use for the pop-up window. The first order of business is to add a button that will allow you to drag the pop-up window. Click the empty keyframe in the bar button layer of the Movie Clip's Timeline. Drag the button button to the Stage and drop it near the upper-left corner of the gray box.
3. Use the Property Inspector to position it at X-Y coordinates (0, 0). Give it a width of 668 , a height of 30 , and assign the instance name bar_btn . When you're finished, the blue invisible button should cover the top "frame" of the pop-up window (see Figure H5.2).
Figure H5.2: The pop-up window has an invisible button that covers its top so that you can click and drag it across the screen.
4. Your audience needs to know that the pop-up window is draggable. To make this clear, you can put a "handle" graphic on the window's title bar. Click the empty keyframe in the bar graphics layer of the Movie Clip's Timeline. Drag the graphic symbol grab_handle to the Stage and drop it near the upper-left corner of the gray box.
5. Use the Property Inspector to position it at X-Y coordinates (6, 6).
6. Finally, you need to provide a way for your audience to close the pop-up window. With the bar graphics layer still selected, drag the button close to the Stage and drop it near the upper-right corner of the gray box.
7. Use the Property Inspector to position it at X-Y coordinates (643, 6) and give it the instance name close_btn .
This step completes the mechanics for the pop-window. As for content, we will leave that aspect of development in your able hands.
8. The pop-up window is complete within itself as a Movie Clip symbol; now you must bring it to the Stage so that it is part of the actual movie. Choose Edit Edit Document to return to the main Timeline.
9. Drag the window Movie Clip from the Library to the window layer of the Timeline. Position it at X-Y coordinates (50, 50) and assign the instance name window_mc . When this movie is loaded into level1 of the main movie, the clip will appear in this position. Because both movies have identical stage sizes, and loaded movies are always registered at the (0, 0) origin in the upper-left corner, the pop-up window will appear in the middle of the Stage.
10. Now it's time to add the ActionScript that will make your pop-up window draggable. Click to select the empty keyframe of the code layer and enter the following statements in the Actions panel:
11. window_mc.bar_btn.useHandCursor=false;
12. top=_x;
13. left=_y-window_mc._width+30;
14. right=Stage.width-30;
bottom=Stage.height-30;
The first line is optional. It prevents the hand cursor from appearing when the mouse moves over the bar_btn button instance. The remaining four lines are vital : They set the bounds in which someone can drag the pop-up window. If these were not included, it would be possible to drag the window off the screen and not be able to get it back.
§ top=_x; sets the top boundary to the top of the Stage.
§ left=_y-window_mc._width+30; sets the left boundary at the width of the pop-up window minus 30 pixels. This ensures that at least 30 pixels (the height of the title bar) will always be visible when the pop-up window is dragged off the left edge of the screen.
§ right=Stage.width-30; sets the right boundary similar to the left boundary. It prevents the left edge of the pop-up from going beyond the value that is 30 less than the edge of the Stage. Because the Stage is 768 pixels wide, the right boundary is 738.
§ bottom=Stage.height-30; sets the parameter so it's identical to the right boundary, except it sets the value based on height so that the clip can't be dragged below the bounds of the Stage.
15. Start a new line in the Actions panel and enter these additional statements:
16. window_mc.bar_btn.onPress=function(){
17. window_mc.startDrag(false,left,top,right,bottom);
18. window_mc.bar_btn.onMouseMove=function(){
19. window_mc._x=_xmouse;
20. window_mc._y=_ymouse;
21. updateAfterEvent();
22. }
}
If you worked with the examples in Chapter 20, this code should be familiar. It is essentially the same code that was used to create slider controllers. This function targets the bar_btn instance and makes window_mc a moveable Movie Clip. There is one subtle difference between this script and the examples presented earlier:
window_mc.bar_btn.onMouseMove=function(){
window_mc._x=_xmouse;
window_mc._y=_ymouse;
updateAfterEvent();
}
This function is embedded inside the main function. After the onPress event, while onMouseMove executes, this function makes the position of the Movie Clip ( window_mc ) lock to the position of the mouse. updateAfterEvent() enables these statements to execute independently of the movie's frame rate, and facilitates a smoother dragging motion.
23. The previous statements initiated dragging; now you must add something to stop it when the mouse is released. Add these additional statements to the Actions panel:
24. window_mc.bar_btn.onRelease=function(){
25. stopDrag();
26. }
27. window_mc.bar_btn.onReleaseOutside=function(){
28. stopDrag();
}
It helps to initiate a stopDrag() from both events because you never know if someone's mouse will be over the button or not when they stop dragging. Select Control Test Movie and try dragging the window around the screen.
This ActionScript can also be written as:
window_mc.bar_btn.onRelease=window_mc.bar_btn.on
ReleaseOutside=function(){
stopDrag();
}
This alternative syntax allows you to combine both handlers so they execute identical statements.
29. Your pop-up window is nearly complete. All you need now is a script that will close the window when you click the Close button. Enter this last set of statements in the Actions panel:
30. window_mc.close_btn.onRelease=function(){
31. level0.popUpClose();
}
This calls the function popUpclose() at the level0 ( _root level) when someone clicks close_btn . If this seems incorrect, then you've been paying attention so far! There is no such thing as popUpclose() . It's neither a built-in ActionScript function nor have we created it ”yet. We will create this and other functions when we go back to the main movie. It's best for the functions to reside there so that they are always available. However, we will eventually need to call the function from this movie, so it's OK to add a script now even though it won't work until later. See the finished script in Figure H5.3.
Figure H5.3: The finished script to make the pop-up window draggable should look like this. Comments have been added to help clarify the role of each set of statements.
32. The pop-up window is now complete! Save your work and choose Control Test Movie to temporarily publish your movie as an SWF file. You will need the SWF for the next set of steps.
Phase 3: Writing Functions to Make the Pop-Ups Pop
The majority of our work is done. The tasks that remain will allow the movie to manage the pop-up window and bring all the elements together. Make main_cd.fla the active document and you are ready to complete the lesson.
1. From here, everything that you do will be based in ActionScript. Click the code layer to select the script you already entered, open the Actions panel, and enter the following statements:
2. function popUpOpen(window){
3. loadMovieNum(window, 1);
}
This will be the function to open the pop-up window. You create the function so that it takes one parameter: the name of the SWF file you wish to use as the pop-up. That parameter is passed to ActionScript's built-in loadMovieNum() function, which loads the SWF at level1 .
4. Now you need to reverse the process and create a function that unloads the SWF to close the pop-up. Enter these additional statements:
5. function popUpClose(){
6. unloadMovieNum(1);
}
This will be the function that closes the pop-up window. Now when the pop-up's Close button gets clicked, it is able to call a valid function.
7. With functions in place, you can finally add the code to open the pop-up. Change the function for the history button to read like this:
8. history.onRelease = function() {
9. popUpOpen("popUp_cd.swf");
}
Now when history is clicked, rather than printing a message to the Output panel, it will open the pop-up window. Select Control Test Movie and try it out.
10. Once you're in Test Movie mode, click history to open the pop-up and click the Close button to make it go away. Great, it works! However, there is a slight bug. While the pop-up window is open, move your mouse over the area where the buttons are positioned in the main movie. You should see the cursor change to the hand pointer (see Figure H5.4). This situation will be confusing to your audience. They don't see anything that looks clickable yet they get a cursor that tells them they can click. This is because the buttons at level0 are still active. If you click, you will either reload the pop-up window or get a message in the Output panel. This situation has the distinct possibility to cause problems in the future, so it's best to make sure it never happens. You can do this by disabling the buttons when a pop-up window is loaded.
Figure H5.4: When the pop-up window is loaded, the buttons in the main movie are still active. This will be very confusing to your audience. The cursor says they can click, yet there is nothing that looks as if it should be clicked. Hmmm ?
11. To disable the buttons, start by putting them in an Array. This allows you to manage them as a set. Create the array with the following statement:
buttons=new Array("history","landscape","information");
Type this line of code at the top of the Actions panel script pane above the functions that you created in steps 1 “3. It creates an Array named buttons and assigns the three buttons in your movie to elements 0 through 2.
12. Now you will write a loop that puts the Array to good use. Update the popUpOpen() function as shown in the following statements:
13. function popUpOpen(window){
14. loadMovieNum(window, 1);
15. for (var item in buttons){
16. eval(buttons[item]).enabled=false;
17. }
}
The statements that you've added create a for in loop. This loop structure is used expressly to cycle through the properties of objects. In this case, you're looping through the contents of the Array buttons . For every item in buttons , you will perform a task. That task is to set the enabled property of each item to false . The enabled property determines if a button is functional ( true ) or not ( false ). By cycling through the array of buttons, this loop disables each one, rendering it inactive in your movie.
One last technical note: When you created buttons , each button was added to the array as a string. The eval() function is needed here to convert the name of the button from a string to an identifier. Buttons (and Movie Clips) must be targeted as identifiers if you want to control any of their properties. To learn more about eval() , see the ActionScript Reference on this book's companion CD.
18. You've probably guessed the last step: If you disable the buttons with one function, you have to re-enable them with another. This is exactly right, and you'll do it with the popUpclose() function. Change the function to read:
19. function popUpClose(){
20. unloadMovieNum(1);
21. for (var item in buttons){
22. eval(buttons[item]).enabled=true;
23. }
}
There should be no mystery here. This function uses the same looping syntax, only it does the reverse and enables all of the buttons in the array. Cool!
24. Select Control Test Movie. Click all the buttons. Then try to click them again when the pop-up window is open. You should find that the hand cursor is now absent in the presence of the pop-up window.
25. Close the pop-up window. The hand cursor should be back and the buttons should be active once again.
26. Your movies are finally finished. Congratulations! If you want to prepare these for delivery on the Web or CD-ROM, you should publish each file before delivery in its final medium. See Chapter 30 for details on publishing final SWF files.
Phase 4: Moving On ”Next Steps and Ideas for the Future
Most people in creative fields would probably agree that nothing is ever really finished. This lesson certainly subscribes to that school of thought. It's done but not finished; there's a lot that you could do to push this further. Here are a few suggestions:
§ Add more pop-up windows ”you have the functions to do it! Create additional SWF movies such as popUp.swf and use the popUpOpen() function to cue them from the other buttons. Each pop-up will be loaded into level1 .
§ Expand the flexibility of the function. Consider:
§ function popUpOpen(window,location){ § loadMovieNum(window, location);
§ for (var item in buttons){
§ eval(buttons[item]).enabled=false;
§ }
§ } Here the parameter location has been added. You could specify different values for this to load movies at level1 , level2 , and so on.
§ Rather than loading document levels, try creating the pop-ups by loading the SWF files into Movie Clip instances on the Stage. This will allow you to use the getDepth() and swapDepths() methods of the MovieClip object to change the stacking order (layering) of clips.
Whatever creative decisions you make, good luck and have fun working with this idea.
EAN: 2147483647
Pages: 54