Embedding Flash Progress Animations

Adobe Flash files can present interactive media content to website visitors. If you have a Flash file you want to load additional content into, you can let your users know how the loading process is progressing using a progress animation. For example, you may load images, media items or another Flash movie into your file. Including a progress animation in Flash requires a small amount of ActionScript code in conjunction with Flash symbols and layer masking. Including a progress animation makes users more likely to remain on your Flash Web page.

1.
Create or open a Flash file in Adobe Flash Professional. Add a new layer to your file and enter a filled rectangle shape on it. Make the shape 100 pixels wide. Select the shape and make it a symbol by choosing "Modify" then "Convert to Symbol" or pressing F8. Choose Movie Clip as the symbol type. In the main timeline of your file, make sure the new symbol is selected on the stage and give it a name by entering "progress_mc" in the Instance Name text-field of the Properties panel.

2.
Double-click your new Movie Clip to edit it. Select the shape and copy it using "Edit," "Copy." Enter a new layer above the existing layer and paste the copied shape onto it by choosing "Edit" then "Paste in Place." Convert the new, top layer to a Mask by right-clicking it and choosing "Mask." Lock the masked layer, which should be the bottom layer, and unlock the mask layer, which should be on top. Select the shape on the mask layer and convert it to a Movie Clip symbol. Give the new Movie Clip "mask_mc" as its instance name and place it at an X position of -100. Lock the mask layer and unlock the masked layer. Select the shape on the masked layer and move it to an X position of zero. Make sure both shapes are at the same Y position.

3.
Back in your main timeline, create a new layer for code. Select the new layer and open the Actions panel. The code you enter will depend on what you are loading into the file and where you plan on loading it. To load a second Flash file, start by entering the following code:

var movieRequest:URLRequest = new URLRequest("filename.swf");
var movieLoader:Loader = new Loader();
movieLoader.load(movieRequest);

Alter the file-name to reflect the name and location of the file you want to load.

4.
Update the file by displaying loading progress. The existing ActionScript code loads the specified file, but you need additional methods to check loading progress. After the loading ActionScript code, use the following function:

Loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgressing);
//progress function
loadProgressing (e:ProgressEvent):void{
var percentLoaded:Number = e.target.bytesLoaded / e.target.bytesTotal * 100;
progress_mc.mask_mc._x = percentLoaded-100;
}

This instructs the movie to place the mask shape on the X axis according to the percentage loaded, so that the shape under it will be revealed gradually as loading occurs.

5.
Check for completion of loading. If you also want to detect when the file has completely loaded, you can do so with an additional function. Add it after your progress function:

Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingComplete);
loadingComplete (e:Event):void{
//respond to completion of loading
}

At this point you can implement whatever you want to happen when loading is complete, including hiding the loader animation.

Notes

• Your loading process will be clearer if you include a textual indicator of load progress in conjunction with your animation. You can do this by including a text-field in your file and updating it as part of the progress function.
• If your Flash files contain large resources that take a long time to load there is a danger that your users will browse away from the page.

Playing an SWF On Click

When you include an SWF file within a Web page, in most cases it will automatically play when the Flash movie loads. You can prevent embedded SWF files from loading using HTML and JavaScript code in the Web page, but this is not always reliable. If you need an SWF movie not to play straight away but to play when the user clicks it, the most reliable method is to implement this using the ActionScript code within the Flash file itself.

1.
Open the source FLA file for your SWF in Adobe Flash Professional. If the file already has a layer for ActionScript code, select it and open the Actions panel. If it doesn't have an code layer, add a new layer, select it and open the Actions panel. To stop your home timeline from playing when the Flash movie is loaded, add a stop function:

stop();

If you have code on different keyframes in the home timeline, add the stop function on the first frame. If your SWF includes Movie Clips which play in the first frame of the home timeline, you will need to add a stop function to them as well. You can stop Movie Clips using their instance names as follows:

myClip_mc.stop();

Alternatively you can add the stop function to the first frame inside a Movie Clip.

2.
Detect clicks on the SWF. After stopping the movie from playing automatically, you need to prepare your Flash file to detect clicks, so that you can start playback when such clicks occur. Add the following ActionScript code:

stage.addEventListener(MouseEvent.CLICK, startPlayback);

This code instructs the SWF to detect mouse clicks on the stage area, which is the area of the file users can see. When a click on the stage occurs, the function listed as second parameter to the "addEventListener" function, "startPlayback" in this case, will execute.

3.
Play the movie when clicks occur. After adding the mouse event listener to the SWF stage, add the specified function to execute when the user clicks the movie:

function startPlayback(event:MouseEvent):void {
play();
}

This will cause the SWF's main timeline to begin playback. You can remove the mouse event listener inside this function if you do not want to continue detecting clicks after playback begins:

event.currentTarget.removeEventListener(MouseEvent.CLICK, startPlayback);

If your SWF file has Movie Clips you want to start playing when user clicks occur, list them inside the function and call the play method on them:

myClip_mc.play();

Notes

• You can detect other various user events on the stage, including moving the mouse over and off it.
• If you have interactive elements within your Flash file, adding a click mouse event listener to the entire stage may interfere with them, especially if you are using other click listeners.