14. Scroll Pane Component
The Scroll Pane component allows you to display a movie clip, form or
external SWF in a rectangular masked area with vertical and horizontal
scrollbars for navigation. It is useful, for example, when you want to
display a large picture or SWF document and have limited screen real-estate
to do so. In the following example, you will learn how to load in an external
SWF and display it within a Scroll Pane.
- Start a new FLA. Using the Document Properties panel (Ctrl-J), set
the dimensions of the FLA to 300px by 300px. Save the file in your working
directory, in to which you should have copied the sample files you had
downloaded earlier.
- Drag an instance of the ScrollPane component on Stage.
- Using the Property Inspector (PI), resize the component to 250px
by 250px and place it at x = 25, y = 25. The file you're going to load
into it has already been prepared for you: It's called scrollpane_content.swf.
Enter that name for the contentPath parameter in the PI.
- Test the movie. Scroll down and to the right until you are at the
end of the picture. Notice that the bottom of the word "Meow"
is cut off. This is a bug with the component when loading in external
content.
- Take a look at the FLA for the content file you tried to load in,
it's called scrollpane_content.fla. Open it up in Flash and notice how
the right-hand-side of it was also getting cut off when displayed in
the Scroll Pane. This is because the component calculates the width
of the SWF without taking into consideration the empty areas on the
four sides of the cats but when displaying the SWF, starts doing so
at the origin point (0,0) of the SWF. Read on for a workaround...
- Open up scrollpane_content2.fla in Flash. Notice how there are black
lines along all four edges of the stage. This is one way of fooling
the component to use the whole width and height of the loaded content.
- Return to your first movie and use the PI to change the name of the
external SWF in the contentPath parameter of your ScrollPane component
to scrollpane_content2.swf.
- Test the movie and scroll all the way to the right and all the way
down. Notice how the component now shows the full width and height of
the content SWF. It's hardly a workaround if you see the black lines,
though. Luckily the fix for this is very easy. Simply make the lines
into movie clips and set their alphas to 0% (invisible.)
- Use the PI to change the name of the external SWF in the contentPath
parameter of your ScrollPane component to scrollpane_content3.swf.
- Test the movie and scroll all the way to the right and all the way
down. Notice how the component now shows the full width and height of
the content SWF (and without any ugly black lines.) Remember this workaround
the next time you want to load in an external SWF and display it using
a ScrollPane component.
Although I won't cover it here, you can use a Progress Bar component
along with a ScrollPane component in a similar manner to the Loader component.
Also, you can display both forms and regular movie clips in the ScrollPane.
For the former, substitute the form name in the contentPath parameter
and for the latter, the Linkage ID of the movie clip.
|
Download Source Files (5MB!) 
go to previous page