Loading FlashPaper 2 Documents into Your Own Flash Movies

By: Robert Reinhardt

In this tutorial, you'll learn how to build Flash movies that can load external FlashPaper 2 SWF files.
This technique enables you to control the context of your FlashPaper viewing environment without using
traditional layout tags in an HTML page. If you're building a Flash application, a Flash-based CD-ROM,
or a Flash-based web site, contextualizing the experience of viewing printed documentation within your
own user interface reduces the dependency of launching a new browser window to view another
document type, such as HTML or PDF. Recently, I used FlashPaper 2 documents as a replacement for
PDF previews within a Flash-based CD-ROM project for a university medical department. Previously,
the department had used a "text-only" version of linked PDF documents within the Flash CD-ROM as a
preview; now, they're able to distribute exact reproductions of the documents as FlashPaper directly
within the CD-ROM interface.

If you haven't used FlashPaper and want to know more about the benefits of using FlashPaper for document
distribution on the web, read the FlashPaper articles by CMX partner, Kim Cavanaugh. Specifically, you may want to
read the article titled "What's New in FlashPaper 2" (http://www.communitymx.com/content/article.cfm?page=3&cid=D6366)
.

Loading and Positioning a FlashPaper 2 Document

In this section, you'll learn how to load a FlashPaper 2 SWF file into another Flash movie. This basic
procedure enables you to use the default view size, 550x400, of a FlashPaper 2 document within another
movie.

When you load a FlashPaper 2 document into another Flash movie, the default size of that loaded doc is 550x400.
However, if you run FlashPaper 2 documents directly in the standalone (SA) Flash Player, the default document view
snaps to the size of the first page of the document.

Before you proceed with the following steps, download the support files for this tutorial and extract the
Distributing_Classes_in_SWC_Files.swf file. This Flash movie is a FlashPaper 2 document, created
from a previous article (http://www.communitymx.com/abstract.cfm?cid=DC2C0) I wrote for Community MX.

! "
# $ %
& '
% loa dMovie () %
( $ ) $ *

1 of 7
 & % ' + , $
, +

// cr eat e a Mo vie Cli p t o h old th e F las hPa per doc

va r m cDo c:M ovi eCl ip = c rea teE mpt yMo vie Cli p("mcDoc", 1 );
mc Doc .lo adM ovi e(" Dis tri but ing _Cl ass es_ in_ SWC_Files.sw f") ;

// cr eat e a te mpo rar y r efe ren ce fra me to see

// th e s ize of th e F las hPa per do c
va r m cFr ame :Mo vie Cli p = cr eat eEm pty Mov ieC lip("mcFrame ", 2);
wi th( mcF ram e){
lin eSt yle (2, 0x FF0 000 , 1 00) ;
mov eTo (0, 0);
lineTo (55 0, 0);
lin eTo(55 0, 400 );
lin eTo (0, 40 0);
lineTo (0, 0) ;
}

Listing 1 - Creating the mcDoc and mcFrame instances.

5 " -. -. /
0
$ 1
+ $ 223
433 $

Figure 1 The default size of a FlashPaper document view

WARNING: If you use a Mask layer on a clip that contains a loaded FlashPaper document, the textfields of the
FlashPaper controls will not display because they use device fonts. If you need to mask a clip containing a loaded
FlashPaper document, make sure you create a dynamic mask in ActionScript, and mask the parent clip of the
FlashPaper document with the Mov ieClip .setMa sk() method.

2 of 7
 Setting the Size of the FlashPaper View

In order to control the viewing area of a FlashPaper document, you need to invoke the s et S iz e ()
method of the loaded FlashPaper document. The viewing area is defined as that taken up by the control
bar at the top of the FlashPaper document and the scrollpane below the bar containing the actual
document view. In this section, you'll learn how to use the MovieClipLoader class along with the
M ov i eC l ip . on E nt e rF r am e () handler to invoke the s et S iz e () method of the FlashPaper document.

! "
$ (
6 & $
/ $ onL oadIni t() %
onE nterFr ame() set Size()
/ set Size() +
$ $ 233 533
% onE nterFr ame() ' $

NOTE: Unfortunately, the set Size() method of the FlashPaper document is not yet declared when the
onL oadIni t() method of the MovieClipLoader listener is fired. We have to use an onE nterFr ame() or equivalent
operation to keep checking the loaded FlashPaper doc, as mcDoc, until the set Size() method is initialized.

// cr eat e a Mo vie Cli p t o h old th e F las hPa per doc

va r m cDo c:M ovi eCl ip = c rea teE mpt yMo vie Cli p("mcDoc", 1 );

// se tup th e c all bac k f or a M ovi eCl ipL oad er instance

va r o nLo adI nit :Fu nct ion = fun cti on( ):V oid {
onE nte rFr ame = fun cti on( ):V oid {
i f(m cDo c.s etS ize != un def ined){
mc Doc .se tSi ze( 500 , 300);
on Ent erF ram e = nu ll;
}
};
};

// cr eat e t he Mov ieC lip Loa der in sta nce an d add the
// cu rre nt tim eli ne as a l ist ene r
va r m cl: Mov ieClip Loa der = new Mo vie Cli pLo ader();
mc l.a ddL ist ene r(t his );

// lo ad the Fl ash Pap er doc in to the mc Doc instance

mc l.l oad Cli p(" Dis tri but ing _Cl ass es_ in_ SWC _Files.swf", mc Doc );

// cr eat e a te mpo rar y r efe ren ce fra me to see

// th e s ize of th e F las hPa per do c
va r m cFr ame :Mo vie Cli p = cr eat eEm pty Mov ieC lip("mcFrame ", 2);
wi th( mcF ram e){
lin eSt yle (2, 0x FF0 000 , 1 00) ;
mov eTo (0, 0);
lineTo (55 0, 0);
lin eTo(55 0, 400 );
lin eTo (0, 40 0);
lineTo (0, 0) ;
}

Listing 2 Using MovieClipLoader and onEnterFrame to detect the initialization of setSize()

3 of 7
 5 " / +
set Size() $

Figure 2 The default size of a FlashPaper document view

You may notice the FlashPaper logo flash just before the document viewer is resized. You can set the _vi sible
property of the mcDoc to false at the start of the movie, and then set it back to true after the set Size() method is
invoked.

Displaying a FlashPaper 2 Document in a Window component

In this last section, you'll learn how to display a FlashPaper 2 document in an instance of the Window
component. The Window component will act as a draggable document viewer within your Flash movie.
Before you build the Flash document, let's review the procedure that you'll employ to create the
document viewer:

% ( 0 % ' (
onD ocClic k /

% ) ' $
'
5 / ) +
onW indowL oad onE nterFr ame() set Size()
+ / set Size() +
+ /
)
4 / ( ' $ /
onW indowC lick() ( % del etePop Up()
/ $

Now that you have an idea of the procedure, you're ready to start building the Flash document.

4 of 7
 "

! ) $ 0
$ *
$ '
5 ) $ / $
) $ 1 /
' , ' ' "
4 "
$5 % 0 /
$ ' $ $

The code in this listing uses the Delegate class included with the 7.2 updater for Flash MX 2004. For more information
on using the Delegate class, read Joey Lott's article, "Dealing with Scope - Using Delegate."
(http://www.communitymx.com/abstract.cfm?cid=B36DF)

5 of 7
 im por t m x.u til s.D ele gat e;

// se tup a string to st ore th e d ocu men t p ath

va r s FPD oc: Str ing = "Di str ibu tin g_C las ses _in_SWC_File s.s wf" ;

// se tup a cal lba ck for th e B utt on ins tan ce's click e ven t
va r o nDo cCl ick :Fu nct ion = fun cti on( oEv ent :Object):Voi d {
var oW ind owI nit :Ob jec t = {
t itl e: "Do cum ent Vi ewe r",
c ont ent Pat h: sFP Doc ,
c los eBu tto n: tru e
};
cwi Doc = mx. man age rs. Pop UpM ana ger .createPopUp
(t his , m x.c ont ainers .Wi ndo w, tru e, oWindowIn it) ;
cwiDoc .ad dEv ent Lis ten er( "co mpl ete ", Delegate. cre ate
(t his , t his .on Window Loa d)) ;
cwiDoc .ad dEv ent Lis ten er( "cl ick ", Delegate.cre ate
(t his , t his .on Window Cli ck) );
cwiDoc .se tSi ze( 500 , 3 50) ;
};

// se tup a fun cti on tha t i s i nvo ked wh en the Window

// in sta nce ha s f ini she d c rea tin g i tse lf
va r o nWi ndowLo ad: Fun cti on = f unc tio n(o Eve nt:Object):V oid {
onEnte rFr ame = fun cti on( ):V oid {
v ar mcD oc: Mov ieC lip = cwi Doc.content;
i f(m cDo c.s etS ize != un def ined){
mc Doc .se tSi ze( cwi Doc.width - 5, cwi Doc.height - 34 );
on Ent erF ram e = nu ll;
}
};
};

// se tup th e c all bac k f or the Wi ndo w i nst ance's close bu tto n

va r o nWi ndowCl ick :Fu nct ion = fun cti on( oEv ent:Object): Voi d {
cwiDoc .de let ePo pUp ();
};

// cr eat e a te mpo rar y r efe ren ce fra me to see

// th e s ize of th e F las hPa per do c
va r m cFr ame:Mo vie Cli p = cr eat eEm pty Mov ieC lip("mcFrame ", 2);
wi th( mcF rame){
lineSt yle (2, 0x FF0 000 , 1 00) ;
moveTo (0, 0);
lineTo (55 0, 0);
lineTo (55 0, 400 );
lin eTo (0, 40 0);
lin eTo (0, 0) ;
}

// In vok e the onD ocC lic k() fu nct ion wh en the View Doc bu tto n is clicked
cb t.a ddE ventLi ste ner ("c lic k", De leg ate .cr eate(this, t his .on DocClick));

Listing 3 Adding a Window component as a document viewer for FlashPaper

2 " / ( 7 ) ' /
) )
/ $ 4 / (
' $

6 of 7
 Figure 3 The Window-enabled FlashPaper document viewer

If you'd like to take this example further, try adding a List or ComboBox component which controls the document URL
used by the Window component. You could create a virtual library of all your FlashPaper documents, browsing them
within your own Flash interface. In a future CommunityMX article, I'll show you how to create a ColdFusion
component that retrieves a list of FlashPaper document URLs and displays them in a List component for browsing.

Conclusion

You now know how to utilize FlashPaper documents within your own Flash movies. Using the
techniques outlined in this tutorial, you can effectively add document viewing capabilities to your Flash
presentations and applications.

Approximate download size: 555k

Keywords
FlashPaper, loadMovie, MovieClipLoader, Window component

8 &9 33 : 334 $

7 of 7