Version:
SWiSHmax
Build Date: 2004.08.12
Introduction
Instead of
creating one large file containing all the information you intend to put
in it, you can split your movie into several smaller pieces. This helps
cut down the initial load time required for the main site. It is also
a perfect way to load and position movies that are already separate from
the main site, such as streaming video files.
Step
1 - Determine how the external file will be loaded
There are
several different methods in which the external file can be loaded into
a Sprite. The most typical methods are either through user interaction
such as a button being pressed, or on a specific frame through an onFrame
event. We'll use button interaction for this example.
1.
Download and unzip the files for this attachment. There is a SWF file
named "external_movie.swf" that we will use as our
external file (this is a streaming video file).
Note:
It is very helpful to know the dimensions of the external file before
deciding where to put it. For this tutorial, we'll use the "external_movie.swf"
file which has a width of 160 and a height of 120.
2.
Create a new movie with a width of 300 and a height of 200 (your own project
can have any settings you want as long as the base movie is large enough
to also contain the external SWF when it is loaded).
Note:
When working with streaming audio or video files, it also helps to know
the framerate of the external movie. For best results, make sure that
your main movie uses the same framerate as the external file; otherwise,
the streaming file will change the framerate of the base movie so that
they match (if the difference in framerates is substantial it can cause
your main movie to noticeably speed up or slow down). The "external_movie.swf"
file has a framerate of 20, so for this example simply set the Framerate
of the main movie to 20 on the Movie Panel.
3.
Create a new Static text object inside the main movie. Set the text to
"Load Movie". Position the text object somewhere in the top-left
corner.
Step
2 - Creating the container sprite
In this step,
the goal is to create a container sprite that will hold the external movie.
4.
Draw a rectangle somewhere on the stage. Open the Transform Panel and
make sure that the Resize Mode is selected.
De-select the "X=Y" option for vertical
and horizontal scale, and set the width to 160 and the height to 120.
Also, be sure to set the Anchor Point to "Top-Left".
5.
Open the Shape Panel, and give the rectangle the name "placeHolder".
Set the Fill to 'none' and give it a solid line width of '0' (use a contrasting
color from that of the main movie - creating a border only). Now re-position
this "placeHolder" object on the Stage where you intend the
external file to be displayed.
6.
This step isn't necessary, but it will create a visible border for the
loaded movie. Right-Click on the "placeHolder" object in the
Outline Panel. From the menu, select "Copy Object". Next, Right-Click
on 'Scene_1' in the Outline Panel and select "Paste in Place".
This creates a duplicate of the "placeHolder" object positioned
in the same location as the original. Select the second "placeHolder"
object (at the top of the Outline Panel), then open the Shape Panel and
name it "externalBorder" (simply to identify it more easily).
Again, this step is not necessary, but I'll explain why we did it in just
a minute or two!
7.
Right-Click on the "placeHolder" object in the Outline Panel
and select Grouping | Group as Sprite. On the
Sprite Panel, name this sprite "container".
Step
3 - Setting the Load Movie Preferences
Before we
go any further, let's take a minute to make sure we are loading from the
correct location. Any time you access something on your web server (or
on your home computer), the location of the HTML file is known as the
base URL - if you are viewing an SWF file by itself in a standalone player,
then the location of that SWF is the base URL. The reason you need to
know what the base URL is, is so that you can use the correct 'relative'
URLs for actions such as loadMovie and getURL.
For this tutorial, we will assume that the "external_movie.swf"
is going to be in the same folder as your HTML or standalone SWF.
8.
In SWiSHmax, open the Tools menu and select Preferences.
Next, click on the Player tab in the Preferences window.
At the top, you will see "Test/Load Movie Folder*".
Select the option Specify Folder and click on the browse
("...") button to the right of the text field. In order for
this tutorial to function, find the folder on your computer that you unzipped
the "external_movie.swf" file to.
Note:
Setting the Test/Load Movie Folder preference is ONLY for testing
locally. It has no effect on how your movie will perform on the internet
(or on someone else's computer). It will also have no effect on how your
movie performs after it has been exported. Setting this option is solely
for testing directly from within SWiSHmax. When you set this option, you
are essentially telling SWiSHmax where the base URL is going to be on
your local machine.
Step
4 - Loading the External Movie into the Container
Now we need
to script the button so that it will load the external file when we want
it to.
9.
Select the "Load Movie" text object and open the Script Panel.
We will use Guided Mode for this tutorial, so if you
see "Expert" at the top of the Script Panel click on it and
select "Guided" instead.
10.
Press the "Add Script" button and select Events
| Button | on(release).
11.
Press the "Add Script" button again and select Movie
Control | load/unload(Sprite) | loadMovie(). In the URL
field at the bottom, type (without quotes) "external_movie.swf".
Use the drop-down menu to the right of the "Sprite" field and
select the target sprite "container" (or type the name of the
Sprite in manually if you prefer).
Now, let
me explain why we created the "externalBorder" object. It might
seem a bit redundant to have two identical objects in the same location,
but it really isn't! First, the "placeHolder" object inside
the "container" Sprite is used to give us a visual reference
as to what physical space will be occupied by the external file (that
is why it helps to know those dimensions ahead of time). When an external
file is loaded into a Sprite, the external file will replace ALL objects
inside the sprite as well as ANY scripts attached to the Sprite itself.
That is why we created the "externalBorder" object and left
it outside of the Sprite, because the "placeHolder" sprite will
disappear as soon as the external movie is loaded. So, if you ever want
any kind of border around your external file - you either need to do it
the way we have above, or create the border inside of the external file
itself (which isn't always possible).
It is also
very important to remember the point about ANY scripts attached to the
Sprite being removed when an external file is loaded into it. For example,
you could put an onFrame event inside the Sprite that loads the external
file, but it will only work once. After the external file is loaded, that
onFrame event will disappear just like any object inside the Sprite. Essentially,
the root timeline of the external file replaces the Sprite's timeline
(this is helpful when scripting commands that need to be passed between
the external file and the main movie, but that's a whole separate tutorial!).
At this point,
we should be ready to test this and make sure it works. Keep in mind that
if you are loading a streaming video file (such as the one used in this
tutorial), you will need to either test it in the browser or in the standalone
player. It will NOT work if you try to play it within SWiSHmax (by pressing
the Play button on the Control Toolbar).
So, open
the File Menu and select Test | In Player
(or In Browser if you prefer). Then, click on
the "Load Movie" button to load the external file. Voila! You
have successfully loaded an external file!
Troubleshooting
These are
the most typical problems I could think of, but if you have other problems
it would help to ask questions in our User Support Forums.
Q.
The external file does not load at all, why?
A. If you
have used Test in Player or Browser, make sure that you followed Step
3 and set the correct Test/Load Movie Folder location. Again, this needs
to be the same folder that the external file is located in.
Q.
I have set the Test/Load Movie Folder option, but the external file does
not load when I play it on my website, why?
A. When testing
on your website or on someone else's computer, you need to make sure that
your external file is located in the same folder that your HTML or standalone
SWF file is in.
Q.
The external file loads but it does not show up in the location I wanted
it to, why?
A. Make sure
that you follow #4 in Step 2 above. You also need to know that the Top-Left
corner of the external file will be positioned at the Anchor Point set
for the "container" sprite. If that Anchor Point is set to Top-Left,
then you can easily position the sprite so that the external file is loaded
into the correct position. If, for example, the Anchor Point is set at
"Center", then the Top-Left corner of the external file will
be located in the center of the Sprite.
Q.
I'm loading a streaming video file and it works when I test it, but it
does not work when someone else tests it, why ?
A. Streaming
video is native to SWF6 format (FlashMX Video). This format is only supported
by version 6 or higher of the Flash plugin. You need to inform viewers
that they need to have the correct version in order to view the streaming
video. |
