A Basic FlashPaper Loader Function

Rather than using the timeline, I’ll use ActionScript’s setInterval() function to keep looping as the document loads until MovieClip.getIFlashPaper() returns a valid value.

Here’s a basic function that imports an external FlashPaper SWF (path_s) and loads it into a movie clip (dest_mc). Once loaded, the function calls the FlashPaper API to determine the number of pages in the document (and, so we can make sure it’s working, prints the number to the Flash Output window).

function loadFlashPaper(path_s, dest_mc) {
  var intervalID = 0;
  // start function to be run until FlashPaper loaded 
 var loadFunc = function(){  
   // Hide holder clip until document has loaded
   dest_mc._visible = false; 
    var fp = dest_mc.getIFlashPaper(); 
  if (!fp) { 
    return;  
  } else { 
   clearInterval(intervalID); 
     var pages_i = fp.getNumberOfPages(); 
   trace("pages_i: " + pages_i);
     // Now show the document
      dest_mc._visible = true; 
    }
  }

  intervalID = setInterval(loadFunc, 100);
  dest_mc.loadMovie(path_s);
 } 

I can test this function by adding the following code:

// Create an empty clip to hold the document:
 var theDocMC_mc = this.createEmptyMovieClip("theDocMC",100); 
// Call our function to import the document:
 loadFlashPaper("WhartonCentury.swf", theDocMC_mc);
 

Save the FLA file in the same directory as the file WhartonCentury.swf. This now shows the document and prints the number of pages in the Flash Output window.

Figure 2. The Output window showing the number of pages in the FlashPaper document

Now that you can successfully call the FlashPaper 2 API, you can use any of the API functions.

For example, you can use setSize(w,h) to adjust the width and height of the FlashPaper document, and you can use showUIElement(toolname_s, boolean) to hide and show any of the standard FlashPaper user interface elements. And, of course, by changing the location of the movie clip that holds the imported document, you can change its position on the Stage.

Adding a Few More Features

In the steps below I’ll put all of this together in a somewhat more sophisticated version that shows what you can do.

1. If you haven’t already done so, download and unzip the sample files linked from the beginning of the article.
2. Create a new document in Flash and save it as MyFlashPaperDemo in the same directory as the unzipped sample files. It’s important that the new file is in the same directory as the WhartonCentury.swf file.

3. Change the Stage dimensions to better accommodate the portrait shape of the document. Click anywhere on the Stage and click the Size button in the Property inspector. In the Document Properties dialog box, set the Stage size to 572×650 pixels and change the Background color to a light gray (#999999). Click OK to dismiss the dialog box.

   

   Figure 3. The Document Properties dialog box

4. Place the following code on Frame 1 of the Timeline:

   // function: loadFlashPaper
    // ------------------------
    // Parameters:
    //   path_s: path of SWF to load
    //  dest_mc: Movie clip to hold the imported SWF
    //  width_i: New size of the dest movie clip
    // height_i: New size of the dest movie clip
    // loaded_o: (optional) Object to be notified that loading is complete 
   function loadFlashPaper(path_s, dest_mc, width_i, height_i, loaded_o) {
     var intervalID = 0;
     var loadFunc = function(){ 
       dest_mc._visible = false; 
       var fp = dest_mc.getIFlashPaper(); 
     if (!fp) { 
       return; 
      } else if (fp.setSize(width_i, height_i) == false) {  
      return; 
      } else {
       clearInterval(intervalID);  
       dest_mc._visible = true; // Now show the document
       loaded_o.onLoaded(fp); 
     }
     }
     intervalID = setInterval(loadFunc, 100);
     dest_mc.loadMovie(path_s);
    }   // Function called once the FlashPaper SWF is embedded:
     function onLoaded(fp) {
     // We can now call the FlashPaper API functions. 
    // Remove the standard user interface features:  
    fp.showUIElement("PrevNext", false);
     fp.showUIElement("Print", false);
     fp.showUIElement("Find", false);
     fp.showUIElement("Tool", false); 
    fp.showUIElement("Pop", false);
     fp.showUIElement("Zoom", false);
     fp.showUIElement("Page", false);
     fp.showUIElement("Overflow", false);
     fp.enableScrolling(false);
     // Some additional API features (here commented out): 
    // Go to page: 
    // fp.setCurrentPage(8);
     // Change the magnification to 50%:
     // fp.setCurrentZoom(50);
    } 
     // Now we're ready to start  
   // Create the destination movie clip to hold the SWF: 
   var theDocMC_mc = this.createEmptyMovieClip("theDocMC",100);
     // Position it on the stage:
    theDocMC_mc._x = 16;
    theDocMC_mc._y = 10;
    // Load the FlashPaper SWF into the clip, 
    //   size it, and trigger the onLoaded() function:
    loadFlashPaper("WhartonCentury.swf", theDocMC_mc, 462, 604, this);
     

5. Save the file and test the movie. The Flash file loads the WhartonCentury FlashPaper document and displays it.

In the code above, the loadFlashPaper() function includes additional parameters to modify the size of the document and adds an object to be notified when the loading is complete.

I’ve added a second function, onLoaded(), which is called once loading is complete, and I use onLoaded() to call the FlashPaper API functions. In this example, I’ve turned off all of the standard user interface features of FlashPaper. Also in this example, although currently commented out, are examples of other API calls to go to a specific page and to change the zoom level. Experiment with these and other API functions in your own code.