Don't like my preloader?

Copy and find and make your own damn preloader....

http://preloaderz.com/design/free-preloader-animations/

the intertubes is crawling with free samples. knock yourself out.

WARNING: make sure its AS3 though. don't be adding some old AS2 version on your file...

don't know what that warning means? You need to know... look it up.

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...

Making the Stop/Start Movie

1. Make a new .fla file. Called 'startstop.fla' (or whatever)

2. Convert your main simulation timeline animation into a MovieClip so that you can import it to your new file.

-- Follow These Steps Link Here --

3. Open your new .fla

4. Make 3 layers: 1. actions, 2. buttons, 3. animation

5. Make a play and a stop button symbol. Animate the OVER state.

6. Add your play and stop buttons to the stage on the buttons layer.

7. Select your buttons on the stage (one at a time). in PROPERTIES, name the Instance Name: stop_btn, or play_btn

8. Place your animation MovieClip onto the stage and into the animation layer. Select the MovieClip on the stage. Name the Instance Name in the PROPERTIES panel name_mc (or whatever)

9. In the actions layer add the following actionscript:

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

var movieclip:MovieClip;

function stopMovieClip(mc:MovieClip):void{
mc.stop();
for (var i:int = 0; i < mc.numChildren; i++)
var mcChild = mc.getChildAt(i);
if (mcChild is MovieClip) stopMovieClip(mcChild);

}

function playMovieClip(mcPlaying:MovieClip):void{
mcPlaying.play();
for (var j:int = 0; j < mcPlaying.numChildren; j++)
var mcPlay = mcPlaying.getChildAt(j);
if (mcPlay is MovieClip) playMovieClip(mcPlay);
}


stop_btn.addEventListener(MouseEvent.CLICK, stopAll);

function stopAll(event:MouseEvent):void
{
stopMovieClip(ball_mc);

}


play_btn.addEventListener(MouseEvent.CLICK, PlayMC);

function PlayMC(event:MouseEvent):void
{
playMovieClip(ball_mc);
}


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

10. In the actionscript change my code/movie names [ written above in bold] with your movie's PROPERTY Instance Names

11. take notes in class.

XML Tutorial

FLASH! FLAAAAASH!

Class Tutorial: Flash with AS3 for Class Oct. 26th

Nicer Tutorial but with OLD code: Flash and XML

Final Date for Project: Nov. 2nd.

Animations Due for the Simulation

In the C.Galler/Classes/MMP/Simulation Project/Hat_simulation/

See these .fla examples as references.

1. "Pre-Loader" (preloader_complete.fla)

2. "Title" (title.fla)

3. The "Simulation" (ani_all.fla) / movie clip: ani_all

4. The animation for the "over" state on the buttons

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

- You will also need a file for the Directions & Steps (with animations for the step buttons) (directions.fla)

- A Welcome Screen (welcome.fla)

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

How this will all come together: Movie

1. Pre-loader.fla opens


2. hat.fla opens


1. title.fla then


2. welcome.fla then


3. directions.fla THEN


4. ani_all on the mouseclick event

Pre-Loaders Video Example

Step-by-Step using in-class hat.fla example > Watch Here