How do you create these "loading, please wait" splash screens with a loading bar and percentage for your swf? Does as3 have some built-in methods or should it be designed from scratch?
I mean, how do you detect that your swf file is being loaded into client's browser?
Oh and I have all my content stored in one frame only. pure as3 code.
If all of your code is on the timeline, then the easiest way is to make a second swf that is only used for loading your main swf. If your main swf is called main.swf, the code in your loading swf would be something like this:
//make a loader
var loader:Loader = new Loader()
//listen for loading progress
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
//listen for when the load is finished
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
//load begins...
loader.load(new URLRequest("main.swf"));
function onProgress(event:ProgressEvent):void
{
//calculate how much has been loaded
var percentageLoader:Number = event.bytesLoaded / e.bytesTotal;
//use your percentage number here to drive a loader bar graphic
}
function onComplete(event:Event):void
{
//remove listeners now that loading is done
loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete);
//add loaded swf to the stage
addChild(loader.content);
}
As an aside, externalizing your assets opens up new preloading possibilities. Instead of having everything in your main swf, you can have your main swf load external assets, and preload those assets. Since your main swf would then be small, there would be no need to have a second swf just for loading your main swf.
There's a few different ways to do this.
Either you can have a two step process - create a swf file that simply loads in the main file, reporting progress (by listening to the progress-event on the loader) and then adding the loaded swf as a child.
Or, you can place all your content on frame 2, and stay on frame 1, checking the root.loaderInfo.bytesLoaded compared to root.loaderInfo.totalBytes values, reporting the percentage and then moving on to frame 2 when done.
Personally, I think method 1 is better, since you don't need to sully yourself with frames.
There is also a third way which uses some weird meta-data tags to simulate the second way, but without frames. It's a bit messy, but should be googleable.
Flash has its own component you can use to accomplish this:
http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa4.html
Or you can build your own progress bar from scratch:
http://www.zedia.net/2008/the-right-way-to-do-a-preloader-in-as3/
There are lots of resources on the web that allow you to customize the progress bar- browse around and find one that works for you and your coding style.
Related
I am trying to load multiple swf files. But the problem is that whenever I load them (back and forth; vice-versa), my file keeps on slowing down. I looked a solution from the internet, such as using "unload" and "removeChild" but I can't get a clear solution and I don't know where to put it. Any help is very much appreciated..Here's my code on how I load my swfs:
MainMenu.swf:
//***************CLICK GALLERY*********************//
Gallery_btn.addEventListener(MouseEvent.CLICK, Gallery);
function Gallery(event:MouseEvent):void{
var ldr1:Loader=new Loader();
ldr1.load(new URLRequest("Gallery.swf"));
addChild(ldr1);
}
Gallery.swf:
//***************CLICK QUIT******************//
Quit_btn.addEventListener(MouseEvent.CLICK, Quit);
function Quit(event:MouseEvent):void{
var ldr1:Loader=new Loader();
ldr1.load(new URLRequest("MainMenu.swf"));
addChild(ldr1);
}
You need to use removeChild and remove every listener. You can unload swf by calling unload on your loader or unloadAndStop.
You can read this article for more information.
UnloadAndStop from Adobe
Unload SWF
I made a Flash project in FlashDevelop to create an Ad.
The Preloader is setup by making use of the Additional Compiler argument:
-frame=NameOfLabel,NameOfMainClass
My main class is simply called "Main", at the top / default package level.
So frame #1, being the Preloader portion of the SWF, has:
Very few bitmaps, vector-graphics and text (to stay under 50kb);
A YouTube video player in the center (does not count in the filesize limit);
The frame #2 has everything else (the Main class basically embeds all it's dependencies). This includes:
Assets from precompiled SWF (Bitmaps, Symbols, Fonts, XML data);
All classes imported (this is recursive for every classes importing other classes);
Now my big problem is, my client requested the "replay" functionality long after I've completed 99.9% of the project.
I have the project more-or-less broken into different states (Intro, Ready, SlideMenu, etc.), but I'm not sure how I can easily reset the Flash movie back to the very beginning (where it was preloading and showing the YouTube video).
The easy solution would be to simply call an ExternalInterface JavaScript method that would refresh the Flash container, BUT I don't think I have control over what's going on the HTML / JavaScript side.
Is there an easy way to invoke a replay function from AS3?
Would not simply going back to frame 1 do the trick ?
The following seems to do the trick!
private function onReplayClick(e:MouseEvent):void {
var theStage:Stage = this.stage; //Temporarly store the stage.
//Kill any animations happening:
TweenMax.killAll(); //3rd party, may not be applicable for you :P
//Remove ALL containers / child DisplayObjects
SpriteUtils.recursiveRemove(theStage); //custom-made
// (this object is no longer attached to the stage at this point)
//Nullify any Singleton / Static variables:
Main.INST = null;
// Load the 'bytes' of the current SWF in a new Loader, then...
// add it to the stage
var swf:Loader = new Loader();
swf.loadBytes( theStage.loaderInfo.bytes );
theStage.addChild( swf );
}
By doing a deep recursive cleanup of the DisplayObjects, and any static variables (like Singleton instances), it leaves you with a blank stage.
After that, you can instantiate a new Loader that will load the SWF itself via the current LoaderInfo's bytes property.
Add the Loader to the Stage, and you're up and running again!
I am creating a series of mini games and animations and plan on bringing them all into one flash file. Each of the games need to disappear when the player has finished them. I don't know what to put into the section in the external swfs when the game is done. I currently just have a trace ("finished").
In my main swf you should click start and a game swf appears and when you are finished it, it should disappear.
I have looked up tutorials and they something about accessing variables in the external swfs but I got nowhere with them.
in place of trace("finished");, dispatch something like a complete event:
dispatchEvent(new Event(Event.COMPLETE));
Then listen for that event in the container swf and respond appropriately.
Here is an example for the host (parent) swf:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadDone, false,0,true);
loader.load(new URLRequest("temp2.swf"));
function loadDone(e:Event){
trace("CONTENT LOADED");
addChild(loader.content);
loader.content.addEventListener(Event.COMPLETE,go,false,0,true); //listen on the capture phase (third parameter true) if you're complete event is NOT on the main timeline of your child swf
}
function go(e:Event):void {
trace("Content is all done");
removeChild(loader.content);
loader.unloadAndStop(); //tries to free the app of all memory used by the loaded swf
loader = null;
}
Another way, is in place of trace("finished"), you could have the child swf remove itself (as per a comment on the question). I would consider this a less desirable solution (though more encapsulated) as it lessens re usability and will likely still leave the swf in memory:
stop();
if(this.parent){
this.parent.removeChild(this);
}
I'm new to AS3, and am trying to understand how externally loaded SWFs work in AS3. Since Flash 4/5, it was common to have one main SWF file in a Flash web project, and then load other SWF files into it, often for various "sections" of a website or web project. In the main file, we'd have masks animating the container movieclip(in which external sections/SWF files were loaded) and have animations and transitions play as the section finished loading and the loaded content was displayed.
In AS3, I've used the Loader class to load and display the external file, my main problem is in communicating with the loaded content, call it's functions, or call root functions from it.
In AS2, we could use someMovieClip.loadMovie("ExternalContent.swf") and the ExternalContent file would load inside someMovieClip. You could access functions on the "External.swf" main timeline using someMovieClip.function();. And inside the "ExternalContent.swf", we could use _root.function() to access functions in the main file ExternalContent was being loaded into. Doing this in AS3 seems bizarre and neurotic, and I feel like I'm missing something fairly basic here.
//Loading in ExternalContent.swf into the sprite
//ExternalContent has a movieclip called "boxes" on it's main timeline
//boxes has a boxesPrompt() function in it's timeline.
var sprite:Sprite = new Sprite();
addChild(sprite);
var loader:Loader = new Loader();
loader.load(new URLRequest("ExternalContent.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded);
function onLoaded(event:Event):void
{
sprite.addChild(event.target.content);
sprite.boxes.boxesPrompt();
//Flash gives the following compiler error at the above
//Scene 1, Layer 'Layer 1', Frame 1, Line 21 1119: Access of possibly undefined property boxes through a reference with static type flash.display:Sprite.
//But when I comment out sprite.boxes.boxesPrompt() and use this, it works:
event.target.content.boxes.boxesPrompt()
}
The boxesPrompt() function inside the "ExternalContent.swf" just traces it's parent, grand-parent, and great grand-parent - trace(this.parent.parent.parent);. And when I call that function inside the onLoaded event-handler using "event.target.content.boxes.boxesPrompt()", it shows that the Boxes object(which was on the main timeline of External.SWF), has a parent movieclip, a grand-parent sprite, and a great grand-parent object mainTimeline.
I thought re-parenting the loaded content into the sprite would allow me to access the loaded content as easily as loadMovie() used to be - accessing loaded content like it was present directly inside the clip it was loaded in. But that doesn't work at all.
So to rephrase, my question is:
How do I communicate from the main "loader" SWF file, with the content that's loaded in. I don't want to communicate using event.target.content.{etc} because then I'd only be able to address the loaded content inside the Loader's event.complete event handler.
How do I "re-parent" loaded content, so I can place it inside some movieclip/sprite on the main timeline of the loader file, rather than using some really long convoluted way.
How to communicate from inside the loaded content, to the main/loader file. Previously, we'd use _root.functionName() to do stuff like play some animation transitioning from the current externally loaded "section" to another section. How'd I go about doing that.
AS2 & AS3 is vastly different. But you will have to swallow the fact that AS3 has been developed as an improvement over AS2. So any transition you make, is also for the better.
For eg : The _root in AS2 allowed global objects & variables to accessed & changed anywhere, which is a bad practice & leads to non maintainable code in a project.
Having said that, let me address your questions:
If you are able to get access to the loaded content with
event.target.content... you should save it inside a,say class
variable & may access it later elsewhere in the class.
You must understand that you will be able to access the content only
after loading it, so have to wait for it to complete anyway &
event.complete handler is probably your best bet.
I doubt if you can pick random content from a loaded swf & re-parent it into the current swf.As explained you might not have a long convoluted way.
Accessing the parent could be done in many ways. You can use .parent or actually call a function from the parent swf passing its reference to the child.
var sprite;
addChild(sprite);
var loader:Loader = new Loader();
loader.load(new URLRequest("ExternalContent.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded);
function onLoaded(event:Event):void
{
sprite = event.target.content;
//This should work
sprite.boxes.boxesPrompt();
}
See this example for more info.
I have an FLA file with two frames. On the first frame I have nothing but a textfield and some code to do the preloading. After it is done preloading it does gotoAndStop(2)
On frame 1 I have:
stop();
stage.scaleMode = StageScaleMode.SHOW_ALL;
//Import the required assets
import flash.display.*;
//Stop the playhead while loading occurs
this.stop();
//Create a listener to call the loading function as the movie loads;
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, PL_LOADING);
this.loaderInfo.addEventListener(Event.COMPLETE, PL_FINISH);
function PL_LOADING(event:ProgressEvent):void
{
var pcent:Number = event.bytesLoaded / event.bytesTotal * 100;
//Display the % loaded in textfield
txt.text = int(pcent) + "%";
//If the movie is fully loaded, kick to the next frame on the main timeline
}
function PL_FINISH(event:Event):void
{
removeChild(txt);
gotoAndStop(2);
}
On frame 2 I have nothing except:
var game:Game = new Game();
addChild(game);
In my publisher settings I have export to frame 2.
My problem is that the preloader won't display until 100%. Does anyone know why?
P.S. For testing I put a large image file on the stage in frame 2 and the result is the same.
This normally happens if you haven't deselected "Export in frame 1" in each of the library symbols that you are exporting for ActionScript.
You'll need to make sure that you create reference to these objects (so that ActionScript can access them) by placing them onto the stage in frame 2 (out of sight).
What's happening is that all of the symbols are being loaded before the preloader itself has loaded.
If this isn't the issue, then please provide some code so I can better assess your issue.
Have you tried putting something static on frame one? Just because there is a preloader, that doesn't mean that your swf will be displaying at all...
I know that I had one swf once which simply took a minute to actually get the Flex preloader to even show up because of network latency. It could be that your swf isn't displaying until 90% of it has already loaded.
I´m dealing with similar problems, and there is something i found out: my antivirus contains a kind of "browser protection" feature, which sort of checks all files in advance before it allows the browser to actually display them. If this antivirus feature has not been installed on the system, the preloader works beautifully. I´ve checked some other web-sites with flash content, and they also behave "wrong" under these circumstances. Now, some people seem to have found a way to stop the antivirus from messing around, but i don´t know how they do it... not yet...