Introduction
If you want to create flash 5 movies that contain dynamic content (i.e. are different each time they are viewed) then there are two major approaches to take:
1. Use Macromedia generator extensions:
Generator extensions allow you to compile flash movies at download-time, making it possible to completely customize the content that is downloaded to a browser. For more information on generator check the Macromedia support site.
2. Dynamically load in symbols from external libraries during playback:
The idea is that you create a main flash movie that loads and plays other flash movies during playback. For various reasons you may wish to make several movie-clips available form within the library, then have the main movie choose which of these movie-clips to playback. Techniques for achieving this are described in this tutorial.
Steps
Before diving into a step-by-step example, let's explore what we're going to achieve:
- We'll create a SWF movie that contains three simple movies in its library. This file acts as a library containing the movies that we want to dynamically load.
- We'll create a main SWF file that will load in the external library and it's symbols, then display them on-stage.
Step 1 - Creating a library movie
Open a new flash project (any stage-size will do) and perform the following steps:
- Choose Insert> New Symbol. Give it the name "box" and type "movie clip".
- Draw a box (any size).
- Choose Insert> New Symbol. Give it the name "circle" and type "movie clip".
- Draw a circle (any size).
- Choose Insert> New Symbol. Give it the name "line" and type "movie clip".
- Draw a diagonal line (any size).
We now have three new library symbols - each are movie clips. In order for these movie clips to be loaded (or "attached") dynamically, we need to add linkage names to these symbols.
Note: Whilst all library symbols can be export and linked to, only Movie-Clips can be accessed by ActionScript to dynamically load symbols. For this reason, all dynamically loaded symbols must be Movie-Clips. If you want to put a graphic (JPG, etc.) in your library, then put the graphic into an empty movie-clip, and export the movie-clip.
To export your library's movie clips, open up the library panel (Window> Library) and:
- Select the box symbol in the library list, right click and choose Linkage.
Choose Export this symbol and type "box" into the Identifier field. - Select the circle symbol in the library list, right click and choose Linkage.
Choose Export this symbol and type "circle" into the Identifier field. - Select the line symbol in the library list, right click and choose Linkage.
Choose Export this symbol and type "line" into the Identifier field.
Lastly - save the movie as "library.fla" and then publish it to "library.swf". Pressing Shift+F12 is a good shortcut to publish your flash movie.
Step 2 - Create the main movie
First we'll create a place holder into which the library will be loaded.
- Open a new flash project.
- Choose Insert> New Symbol (or press F8). Name it "Empty" and click OK.
- Draw a box (or whatever you like - it really doesn't matter) so that you'll be able to see the movie clip.
- Go back to the main stage (click Scene 1 above the timeline).
- Open the library window (Window> Library) drag the "Empty" movie onto the stage.
- Open the "Instance" panel (Window> Panels> Instance) and give the instance the name "placeHolder". The name is case sensitive.
Add ActionScript to load the library.
- Create a new layer in the timeline and name it "Actions".
- Right click on the first frame of the "Actions" layer and from the menu choose Actions.
- In the actions panel, add the following code:
placeHolder.loadMovie("library.swf");
Add ActionScript to wait until the library has been loaded.
Since it takes time for library.swf to download, we need to loop through some frames until the library has completely loaded, since the symbols contained in the library will not be available until downloading is complete. While it would be nice to put a proper loader in here, for brevity we'll do the minimum and just make the play-head loop over frames 2 & 3 until the library is loaded.
Once the library has been loaded we'll use the attachMovie command to load the symbols onto the stage.
- Create a blank keyframe in frame 3 of the Actions layer. Clicking on frame 3 and pressing F6 should do the trick.
- Extend the last frame on Layer1 to frame 3. Clicking on Layer1's frame 3 and pressing F5 will achieve this.
- In the Actions panel (for frame 3 of the Actions layer) type:
if(placeHolder.getBytesLoaded() < placeHolder.getbytesTotal()) {
prevFrame();
play();
} else {
placeHolder.attachMovie("line","myLine",2);
placeHolder.attachMovie("circle","myCircle",3);
placeHolder.attachMovie("box","myBox",4);
placeHolder.myLine._x = -20;
placeHolder.myCircle._y = 20;
stop();
}Play the movie (CTRL + Enter). You should see the line, the box and the circle loaded on the stage.
How it works...
The library's symbols cannot be attached directly to the main movie's stage :- they can only be accessed from the library's main timeline. When we load the library movie into the placeHolder instance, we essentially enable ActionScript to access the exported symbols via the library.
Put another way, the main movie itself can never attach to external library symbols.
The main movie can, however, load another movie's main timeline as if it where a movie-clip instance.
We use this fact to fool ActionScript - we load the library into the place holder, then load the library's symbols onto the library's stage - with the library's stage itself being a movie clip on the main stage.
Tips, tricks and pitfalls...
You can use the above technique to load multiple libraries. My application for this was to load an XML file from an IIS server that instructed the main movie which libraries to load to display the correct icons for a user. The applications for this are endless.
When using this technique, be aware that the play-head of timeline on which the ActionScript resides must move in order for commands like loadMovie and attachMovie to work correctly. For example, if you call loadMovie, then loop (in a while(...) statement) until loaded and then call attachMovie all in the same frame, you often get unexpected results.
As with all flash authoring, ActionScript programming is time-based, not procedural. Always sculpt your script to work with the play-head - remember that the play-head controls the scripting, not vice-versa!
Enjoy!
| » Level Advanced |
Added: : 2001-10-29 Rating: 8.53 Votes: 102 Hits: 6174 |
| » Author |
| No details avialable. |
| » Download |
| Download the files used in this tutorial. |
| Download (4 kb) |
discuss this topic to forum
