Adobe Flash/Animate. Interactive foundation

Alejandra Jarabo

LOADING AN EXTERNAL MOVIE (swf or jpeg)

When you organize a "large" project for the web, containing bitmap-grahics (like Slide-shows), long mp3 sounds, or digital video files, it is very difficult to produce a single swf file that can stream from the server smoothly.

Since timeline needs to have all content of one frame before playing the next, having all content inside one project, with big demands of file-size on certain frames, could get the timeline stuck temporarily at problematic points.

Since the average bandwidth for a Broadband connection (DSL, Cable) makes our files become "slow travelers" though their pipes, We are looking for ways to ease out the process: sending "several briefcases instead of the one big suitcase" through the pipeline.

This is how the idea of Loading external swf files in a project comes to place:


You build the basic interface for your project, with the content that is going to be needed to "begin rolling the project", including the buttons that let you choose among the content (the section buttons) in a main fla file.

Then build the different groups of content that define those sections: slide-shows, big Movie-clip symbols, high-resolution bitmaps, long sound-files and movieclips, in independent fla files.
You export those external files to swf, making sure the file names are short and specific.
(Movies_adrinka_band.swf / Movies_adinkra_pattern.swf / Movies_patchwork.swf)

You will create a script in the main movie that will LOAD the external swf inside the main file and display its content.
We usually place that script in the keyframe where that section is labeled.That is, the place where the section-button indicates to go after its pressed.

Using this trick you will use smaller files that will get loaded, only if the user clicks on a certain button (demands a specific content) and you will create a smoother interactive experience.

 

 



   

IMPORTANT FACT:

The external swf (for example your slide-show) does not carry the background color when it gets called inside a Main movie.
If the content exceeds the Stage area ( a text moving across the Stage from side to side, an animation into the detail of a big image) you will see the elements outside the Stage area too.
This is confusing because swfs, when played by themselves, don't show anything placed outside the Stage area.
if you think about it, it is behaving like any other Movie-clip symbol inside the project: it has come back to be a child of the Main movie when loaded through the script.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



To see the complete project working,
with the main movie calling the external swf files on demand,
click here

 

The file Movies_adinkra_band.swf has a white background, the text and bubbles excede the size of the Stage but we only see the Stage area.

Reload the whole web page to see again the animation.

 The file Movies_adinkra_band.swf used here contained a mask the size of the Stage that masked every layer in the movie.
 
   
   

Positioning your external movie on the Stage of the Main one

There are 2 different ways of "placing" this external swf file in your Main Movie

1.You can place it directly on Stage: aligned to the point 0,0 of the mainfile (that is the upper left corner of the main Stage).

2. You can load the external movie INSIDE A local Movie-clip.

This gives you very good control for the positioning of the external movie on Stage because the local movieclip defines exactly where the external will be placed.

This is the local movieclip (place_mc) that gives the positioning to the external file.

This movie needs to be present on every frame containing the loading code. You can reposition it on each case.

Notice that ActionScripting takes the upperleft corner of the movie as reference for positioning.

When looking at the Stage, you will see a little cross contained in the mc: that is the reference point of the symbol. Do not confuse with the little white circle used for rotating and scaling. The cross is inside the symbol.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Those 2 methods have only a slight variation at the end of the code when you addChild (loader)

Next you see the code for loading an external swf inside a local movieclip that acts as a host:
     

The code to load an external file

 

The code in As3 to load an external file entails 4 parts:

 

 

In white I have added a metaphor, so you can visualize each step of the process.

 


1. Loader object

Calling an elevator
declare
variable		   name of your variable   semi
colon		   data type   equal   make a new
loader		  
var
myLoader
:
Loader
=   new Loader();  
 


2. URL Request object

Defining what you want to be brought to you (your lunch order?)

 
declare
variable		   name of your variable   semi
colon		   data type   equal   make a new
loader		     name or your swf in quotes  
var
myURL
:
URLRequest
=
new URLRequest
(
"external.swf"
)
 


3. LoadURL Request inside
the loader

Place your ready order in the elevator

 
variable for loader   dot   action of loading       variable for URL request      
myLoader
•
Load
(
myURL
)
 


4. Place the loaded movie
in your project

Your order is here, where does it go(on your desk?)

 
On Stage
  Place new external movie            
addChild
(
myLoader
)

 

Inside a movieclip host
  name of movieclip on Stage dot Place new external movie            
place_mc
•
addChild
(
myLoader
)

 
 




 

STEP 1.

ANIMATING
THE
INTERFACE

NATURAL
LOADER

This is the content of the Main movie. There are 4 buttons, each one inside it's own layer, and some design elements in the layer called "background".

Notice that each button appears on a consecutive frame. This is an example of a good structure that produces a "Natural loading" sequence.
Since Flash will not get to a new frame until All the elements on the previous frame have been loaded, we are making sure that by the time we hit frame number 4, containing the Stop() action, all the content required for the buttons will be loaded and ready to go.

This is specially important when the buttons contain bitmaps on any State, inside them.

 

 
 

STEP 2.

BUILDING
THE
MAIN
TIMELINE

The main Timeline is going to have 4 frame-labels, corresponding to the 4 Sections in this movie.
Each button will take the user to the right section.
There is a layer containing a little Movie-clip symbol called place_mc (Look at the Properties Panel below, the movie was selected when the snapshot was taken). There is a keyframe underneath each Frame-label.

This is the local Movie-clip that is going to act as the recipient of the external swfs.

 

STEP 3.

TIMELINE
NAVIGATION

We program the buttons so each of them takes the user to the right framelabel on the Timeline.

 

STEP 5.

THE LOCAL
MOVIECLIP
SYMBOL

 

place_mc

This is how the local Movie-clip symbol is constructed.

There is a layer containing a flat-color rectanglethat is 400 X 300 pixels. The layer has been set to be a Guide (it will be transparent outside).
This movie will be behaving as a recipient for the external movie (like a surrogate mother).
The main role of the movieclip symbol is to define its position on Stage and work as a registration point.
*The registration point is the Upper-left corner of the Movie, when the movie is seen on the Stage.

The colored rectangle inside should be the size of the external file. It should be placed to the right and down of the LITTLE CROSS that defines the center of the symbol.

You could place here a photograph or any other type of initial content in a normal layer to see something before the Loading happens.

 

STEP 6.

THE LOADING
SCRIPT

The button will be in charge of taking the play-head to the Frame-label. Once there the "host movieclip" (place_mc)will be available and we will call the external movie from an Action attached to the Frame that holds the Frame-label.

See explanation of code below.

 

  
STEP 8

Add the loading code to each one of the Labeled frames. Each keyframe should call the proper external movie inside our local Movie-clip.

 

     
 
In the next page you can see how to organize the independent content movies.