Your site might contain important information your visitors would like to print. They can use the Print command in their browsers, but that command often isn't adequate for printing Flash content. You can use ActionScript's printing capabilities to exercise greater control over the look of the printed content.
-
Select the Locations layer in map6.fla. Make sure this layer is unlocked, and add an instance of the PushButton component.
You are going to use this instance of the PushButton component to print a map.
-
Select the instance of the PushButton component you just added, and set its instance name to pMap , the Label to Print Map , and the Click Handler to printContent . Set the X to 345 and Y to 290 .
You should be a pro at adding instances of the PushButton component by now! This instance of the component is a little different from the other instances in the map movie, as it has a different Click Handler. Be sure to set the Click Handler for this new instance to printContent , and not getList .
You should also be sure to set the instance name of this new PushButton instance to pMap. The instance name of this button will be very important when you add the printContent function.
Since this is another instance of the PushButton component, you should change the ActionScript that modifies the style for the PushButton components . The following line should be near the end of the ActionScript in frame 1 of the Actions layer:
pbStyle.addListener(americas, africa, asia, europe, all);
Modify the line so it looks like this:
pbStyle.addListener(americas, africa, asia, europe, all, pMap);
-
Add a new layer to the movie, and name it Printable Content. Open assets.fla from the Lesson10/Assets folder as a library, select the Printable Content layer, and drag a copy of the Printable Map symbol from the assets.fla library onto the stage.
It doesn't matter where in the layer stacking order the Printable Content layer goes, as long as it's above the Guides layer folder. In the files on the CD-ROM, the Printable Content layer is just under the Actions layer.
To open a file as a library, choose File > Open as Library, locate the file, and click Open. Make sure you have the Printable Content layer selected, and drag the Printable Map symbol from the assets.fla library onto the stage. If the Resolve Library Conflict dialog box opens, choose the Replace Existing Items option and click OK. This dialog box will probably appear, because the Printable Map symbol contains instances of the Logo and Panda symbols, which are already in the current movie's library.
The Printable Map symbol is a nicely formatted map, suitable for printing on a color printer. The map is easy for a visitor to read, and lists the zoo's hours. You will add some ActionScript to the movie that will allow the map to be printed.
Close the assets.fla library when you're finished adding the Printable Map symbol to map6.fla.
TIP
You may find it easier to hide all of the layers except the Print Content layer as you continue with this lesson.
Take a moment to open the Printable Map symbol in symbol-editing mode. Unlock the Map layer; select the text that displays the hours, and look at the Property inspector. You should notice that the Use Device Fonts option is selected. This means that for this symbol, Flash will not embed the font specified in the Property inspector but instead will use the font from the user 's system. It also means that the font will not be anti-aliased, or slightly blurred to make the edges look smooth. This is actually very important for printing. You don't want fuzzy text in the printed content. If you use the device fonts, the text will come out better when you print it.
NOTE
If you select Use Device Fonts, and the user doesn't have the font you specify in the Property inspector on his or her computer, the default font will be used. For a font such as Verdana, the system's default sans-serif font, which may be Arial or something similar, will be used and may affect the appearance of the printed content.
When you're done looking at the Printable Map symbol, lock the Map layer and return to the main timeline by choosing Edit > Edit Document.
-
Select the instance of the Printable Map layer you just added to the movie, and set its X and Y to 0 and 0. Set its instance name to cMap .
In order to make a movie clip printable, it must be on the stage, and it must have an instance name. Don't worry that the movie clip covers all the other content in your movieyou'll take care of that in the next step.
Notice that the instance name you set for this instance of the Printable Map symbol is very similar to the instance name you gave the PushButton that will call the printContent function. You'll take advantage of that when you add the printContent function later in this exercise.
NOTE
Before a movie clip or level can be printed, it must be fully loaded. You will learn how to make a preloader, to ensure that your movies and movie clips are fully loaded, in Lesson 12.
-
With the instance of the Printable Map movie clip on the stage selected, add the following ActionScript to the Actions panel:
onClipEvent(load) { this._visible = false; } 
When you select an instance of a movie clip, any ActionScript you add to the Actions panel is applied directly to that instance of the movie clip. In order to apply ActionScript directly to an instance of a movie clip, you must use the onClipEvent event handler. This is similar to using the on event handler on an instance of a button, as you did in Lesson 5. The onClipEvent event handler has the following syntax:
onClipEvent(movieEvent) { statement(s); } The movieEvent parameter, which specifies the event that triggers the statement(s) inside the curly braces, can be load , unload , enterFrame , mouseMove , mouseDown , mouseUp , keyDown , keyUp , or data . When load is specified, the statement(s) inside the curly braces of the event handler are initiated as soon as the movie clip appears in the timeline. The unload event initiates the statement(s) in the first frame after the movie clip is removed from the timeline. Specifying enterFrame triggers the statement(s) continually at the movie's frame rate. The mouseMove , mouseDown , and mouseUp events trigger the statement(s) every time the mouse is moved, pressed, or released. The keyDown and keyUp events initiate the statement(s) when a key is pressed or released. Finally, you can specify data to trigger the statement(s) when data is received by the movie clip via loadVariables or loadMovie .
The ActionScript you added to the instance of the Printable Map symbol occurs on the load event. So the statement inside the onClipEvent event handler's curly braces will run when the instance of the movie clip appears on the timeline. The statement that is run is this._visible = false; , which simply sets this instance of the movie clip to be invisible.
-
Select frame 1 of the Actions layer, and add the following ActionScript:
function printContent(btn) { var pc = "c" + btn._name.slice(1, btn._name.length); print(pc, "bmax"); } 
Add this code before any other ActionScript in the Actions panel. This is the printContent function called by the pMap instance of the PushButton component.
In the first line of the printContent function you're creating a new local variable, named pc , which has a value of "c" + btn._name.slice(1, btn._name.length); . This line of code sets the value to the string "c" plus the value of btn._name.slice(1, btn._name.length); , which is the instance name of the PushButton that calls the function, minus the first letter of that instance name. So when you call the printContent function with the pMap button, the pc variable has a value of cMap .
The first line of code of the printContent function uses the slice method, which belongs to the built-in String object. Any string, such as an instance name, is a copy of the String object. The slice method simply takes the string (in this case pMap ) and extracts a slice from it. It has the following syntax:
String.slice(start, end);
The start parameter specifies the starting index of the extracted slice, and the end parameter specifies the ending index for the extracted slice. For the code you just added, the start parameter is 1 . The index of a string starts at 0, so setting start to 1 tells the slice method to start extracting the slice at the second character in the string, which happens to be M for btn._name when the printContent function is called by the pMap instance of the PushButton component. The end parameter for the code you added is btn._name.length . This returns the length of the string, which for btn._name is 4 when the printContent function is called by the pMap instance of the PushButton component. So the slice method will stop extracting the slice at the fourth character index, which happens to be the end of the string. The slice method extracts the string Map when it's done.
The next part of the function triggers the print action. The print action has the following syntax:
print(target, boundingBox);
The target parameter can be a movie clip or level. You'll learn about levels in Lesson 11for now you'll just print movie clips. For the printContent function, the target you will print is the movie clip that has an instance name equal to the value of the local pc variable. The boundingBox parameter designates the boundaries of the printable area. Both of these parameters are required for the print action to work. You'll learn more about setting the printable area later in this lessonfor now just set this parameter to "bmax" .
The print action prints the targeted movie clip as vectors. When you print as vectors, Flash prints the content at the high quality. However, printing as vectors does not preserve color effects, such as transparency. You have to print the content as a bitmap in order to preserve those settings. You will learn how to print as a bitmap later in this exercise.
NOTE
In order to take advantage of ActionScript's print capabilities, users must have the Flash Player 4.0.20 (Macintosh) or 4.0.25 (Windows) or later installed. You can set up a detection scheme to determine which version of the Flash Player a user is running.
-
Choose Control > Test Movie.
When you test the movie, the Printable Map symbol should not be visible, but that doesn't mean it can't be printed! Click the Print Map button; your system's Print dialog box should open. Use the default settings to print a copy of the map. If at all possible, print the map in colorit should look something like the figure on the next page.
When you target a movie clip or level for printing, all of the frames in that timeline are printed by default. The Printable Map movie clip has only a single frame. Try adding two frames to every layer in the Printable Map movie clip, and test the movie again to see what happens. You'll find that a page will print for every frame in the movie clip, and you will end up with three pages, as illustrated by the figure below. Each page will have the same content, unless you modify the content of the frames you added.
You can specify frames for printing by giving them a special label. Just select the frame you want to designate as printable, be sure it has a keyframe, and label that frame #p in the Property inspector. Then when you print the timeline, only the frames that have the #p label will be printed. Try itadd a keyframe to frame 2 of the Map layer in the Printable Map movie clip, set its label to #p, and test the movie again. When you print the map this time, only a single page should print, even though there are three frames in the movie clip.
When you've finished testing the features of the print action, you can still get your original Printable Map movie clip back. Open assets.fla in the Lesson 10/Assets folder as a library, and drag the Printable Map movie clip from that library into the current movie's library (the map6.fla library). The Resolve Library Conflict dialog box will open. Select the "Replace existing items" option and click OK. The original Printable Map movie clip will now appear in the map6.fla library, replacing the one you added frames to. Be sure to return to the main timeline when you're done (Edit > Edit Document).
-
Change the printContent function so the movie clip is printed as a bitmap instead of vectors.
This is easier than it may sound. The print action prints content as vectors. You only need to change this action to one that prints as a bitmap. That action is printAsBitmap . Yes, it really is that simple!
When you make the change, the code should look like this:
function printContent(btn) { var pc = "c" + btn._name.slice(1, btn._name.length); printAsBitmap(pc, "bmax"); } 
When you print Flash content as a bitmap, any color effects you might have applied to the printed content are preserved. However, the quality is usually lower than when the same content is printed as vectors.
-
Choose Control > Test Movie. Save the movie as map7.fla.
When you test the movie, click the Print Map button again. Use the default settings in your system's Print dialog box to print the movie, and take a look at the result. Does it look better or worse ? It should look something like the figure below.
The resulting printout is probably lower in quality than the one you printed as vectors. If that's the case, and since there aren't any color effects in the Printable Map movie clip to worry about, close the Test Movie window and locate the printContent function in frame 1 of the Actions layer. Change the function so that it will print content as vectors:
function printContent(btn) { var pc = "c" + btn._name.slice(1, btn._name.length); print(pc, "bmax"); } When you're done, save the movie as map7.fla in the FlashTFS folder on your hard drive. Now that you know a little bit about printing, let's take a look at some of the other options available to you.
