SWiSHmax Tutorial :: Load External SWF/JPG

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.