Friday 17 January 2014

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.

No comments:

Post a Comment