For learner and For those looking for code to work with:
Below is a flash preloader using a class. The preloader also has the functionality to expand according to window size (stage width). Use as you like.
Flash File: stageLoader
Contains the preloader as well as any movieclips that will scale according to stage width. (in this case mcHeaderBackground and mcStageBackground).
Actionscript in frame 1:
// Stage Setup
Stage.align = "TC";
Stage.scaleMode = "noScale";
// stageLoader
import stageLoader.as;
var LStage:stageLoader = new stageLoader("mainStage.swf");
//
stop ();
Flash File: mainMovie
Contains the movie to be loaded.
Actionscript in frame 1:
stop ();
stageLoader Class (file in the same directory as fla’s)
/***
stageLoader class
-> Sets the stage and loads the main content flash movie.
*/
// Built in Classes
import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.easing.*;
// Custom Classes
// Class Definition
class stageLoader {
// Variable Definitions
var mcStageBackground:MovieClip;
var mcHeaderBackground:MovieClip;
var mcStageContent:MovieClip;
var mcStagePreloader:MovieClip;
var file_to_load:String;
// Scope References
/****
Constructor Function
-> sets the initial positions of background elements and initializes stage width listener
*/
public function stageLoader(file_to_load) {
// Variable Definitions
var obSizeListener:Object;
var centered_x:Number = Stage.width/2;
var centered_width:Number = Stage.width*2;
// Initialize
mcHeaderBackground = new MovieClip();
mcStageBackground = new MovieClip();
// Attach Background Elements
mcHeaderBackground = _root.attachMovie("mcHeaderBackground", "mcHeaderBackground", _root.getNextHighestDepth(), {_x:centered_x, _y:0, _width:centered_width, _alpha:0});
mcStageBackground = _root.attachMovie("mcStageBackground", "mcStageBackground", _root.getNextHighestDepth(), {_x:centered_x, _y:140, _width:centered_width, _alpha:0});
// Attach Stage Size Listener
obSizeListener = new Object();
Stage.addListener(obSizeListener);
// Set onResize Function Delegation
obSizeListener.onResize = Delegate.create(this, onStageResize);
// Run Function to load main movie
loadContentMovie(file_to_load);
}
/***
on Stage Resize Function
-> resizes the background elements according the change in stage width
*/
private function onStageResize():Void {
// Variable Definitions
var centered_x:Number = Stage.width/2;
var centered_width:Number = Stage.width*2;
// Resize Background Elements
if (Stage.width < 800) {
mcHeaderBackground._x = 400;
mcHeaderBackground._width = 800;
mcStageBackground._x = 400;
mcStageBackground._width = 800;
} else {
mcHeaderBackground._x = centered_x;
mcHeaderBackground._width = centered_width;
mcStageBackground._x = centered_x;
mcStageBackground._width = centered_width;
}
}
/****
Load Main Movie
-> sets an empty clip for main content movie and loads appropriate movie
*/
private function loadContentMovie(file_to_load):Void {
// Variable Definitions
var obLoadListener:Object;
var mlMovieLoader:MovieClipLoader;
// Attach Loading Listener
mlMovieLoader = new MovieClipLoader;
obLoadListener = new Object();
mlMovieLoader.addListener(obLoadListener)
// Create Container
mcStageContent = _root.createEmptyMovieClip("mcStageContent", _root.getNextHighestDepth());
mcStageContent._x = 0;
mcStageContent._y = 0;
// Set onLoadStart, OnLoadProgress, onLoadInit Function Delegation
obLoadListener.onLoadStart = Delegate.create(this, onLoadStart);
obLoadListener.onLoadProgress = Delegate.create(this, onLoadProgress);
obLoadListener.onLoadInit = Delegate.create(this, onLoadInit);
// Load Content Movie
mlMovieLoader.loadClip(file_to_load, mcStageContent);
}
/****
onLoadStart
-> attach preloader to stage
*/
private function onLoadStart():Void {
// Variable Definitions
// Initialize
mcStagePreloader = new MovieClip();
// Attach Preloader
mcStagePreloader = _root.attachMovie("mcStagePreloader", "mcStagePreloader" , _root.getNextHighestDepth(), {_x:400, _y:250});
mcStagePreloader.mcLoadingProgressBar._width = 0;
mcStagePreloader.txt_PercentLoaded.text = "00";
// Hide Container
mcStageContent._visible = false;
}
/****
onLoadProgress
-> update preloader to match loading progress
*/
private function onLoadProgress(mc:MovieClip, l:Number, t:Number):Void {
// Variable Definitions
// Update Preloader
mcStagePreloader.mcLoadingProgressBar._width = (l / t) * (Stage.width * 1.2);
mcStagePreloader.txt_PercentLoaded.text = Math.round((l / t) * 100);
}
/****
onLoadInnit
-> removes preloader, fades in background elements, sets container to visible
*/
private function onLoadInit():Void {
// Variable Definitions
trace("finish");
// Remove Preloader
mcStagePreloader.removeMovieClip();
// Fade In Background Elements
var tweenHeaderFade:Tween = new Tween(mcHeaderBackground, "_alpha", Strong.easeOut, 0, 100, 3, true);
var tweenBackgroundFade:Tween = new Tween(mcStageBackground, "_alpha", Strong.easeOut, 0, 100, 3, true);
// Show Container
mcStageContent._visible = true;
}
}
Also take care to remember to publish the swf and the HTML of the flash file with the options for percent scaling. Example of the file embedding code:
<div class="flashWindow">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="stageLoader" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="stageLoader.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="scale" value="noscale" /><embed src="stageLoader.swf" quality="best" scale="noscale" wmode="transparent" bgcolor="#ffffff" width="100%" height="100%" name="stageLoader" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
Hope this was useful to someone. Comments appreciated.