Tuesday, October 18, 2011

Recipe for a Pre-loader

For reference check "preloader_complete_carla" In the Classes folder

In the Library you will need to make or add:

- 1 Animated MovieClip Symbol.
(Some little animation relevant to your subject matter to entertain the viewer while the clip loads)

- 1 "bar". Draw a graphic bar. Make it pretty. Make it a MovieClip.


---------
With these items in the Library follow these steps to build your Preloader:

1. Make a new Symbol MovieClip: Click the New Symbol icon at the bottom of the Library panel

2. Bottom left of the box Click the Down Arrow next to the word "Advanced" to see the whole dialog box.

3. At the top of the box give your MovieClip the following name: Preloader_yourname
(use your name for yourname. my example is Preloader_carla)

4. In the box "Actionscript Linkage" check the box "Export for actionscript"
- under that Class should read "Preloader_name"
- and base class should read "flash.display.MovieClip"
you will need this so actionscript can identify your movieclips.

5. click "ok" and "ok" for the "warning"

6. Within your new Preloader_name MovieClip make 2 layers.
label them:
- animation
- bar/text

7. Add your animation movieclip to Preloader_name 'sMovieClip Stage on the animation layer

8. Add your bar movieclip to Preloader_name 's MovieClip Stage on the bar/text layer

9. In the Tool bar. Click the "T" text tool. Draw a Text Box onto the Stage on the bar/text layer

10. Select the Text box on the Stage. In the Properties panel name your Instance name of the text box 'loading_txt_yourname'

11. In the Properties panel under the Character dropdown click the button "Embed" to embed the text and prevent font errors. Click "OK"

12. Select the bar movieclip on the Stage. In the Properties panel name your Instance name of the bar movieclip 'barMC_yourname'

Your Preloader MovieClip is now together.

13. On the main timeline. In the actions layer first frame add the following code and change _carla to _yourname

-------------------------

var myRequest:URLRequest = new URLRequest("welcome.swf");
var myLoader:Loader = new Loader();

myLoader.load(myRequest);

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);

var myPreloader:Preloader_carla = new Preloader_carla();

function showPreloader(event:Event):void {
addChild(myPreloader);
myPreloader.x = stage.stageWidth/2;
myPreloader.y = stage.stageHeight/2;
}

function showProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
myPreloader.loading_txt_carla.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
myPreloader.barMC_carla.width = 198 * percentLoaded;
}

function showContent(event:Event):void {
removeChild(myPreloader);
addChild(myLoader);
}

---------------------

14. You know, btw, you should be "reading" this code. So that you have some clue as to what is going on here in ActionScript. Get into the habit of reading it over.

15. I mean really, read it.

16. When the file "welcome.swf" is in the same folder as "preloader.fla" the preloader will load the welcome.swf file.

17. Test preloader. After you test it, in the top menu select "View", Download Settings, 14.4,

Then "View", Simulate Download... wait for it... There it is!!!... no? Check the steps above...