[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

How can I put a loading bar in my flash file?

How can I put a loading bar in my flash file? There are a couple of seconds where there is just a blank white square where the flash file is before it "shows up".  I'd like to have a "loading" bar or circle to let the viewer know that it hasn't frozen and something is happening.

Can someone help me with this?  Thank you.  Christine
0
Christine_Crawford1111
Asked:
Christine_Crawford1111
  • 8
  • 5
1 Solution
 
dgofmanCommented:
You can use Adobe component "ProgressBar"

http://www.flepstudio.org/forum/tutorials/477-progressbar-component-flash-cs3.html

Or search on Google Flash Preloader (s)
0
 
Jen0910Commented:
You can find a ton of tutorials on the web that will show you exactly how to do what you are envisioning. Just a bar, a bar and percentage loaded,  do some tricks with images, etc. I also have codes i use for all 3 of those options. There is a trick with IE caching, however. Won't elaborate but it involves IE mis-reading the SWF after it's been loaded once already.

Are you using AS3.0? If so, feel free to try my basic progress loader (nothing fancy), on frame one of the project:

stop();

//ie cache bug fix
stage.addEventListener(Event.ENTER_FRAME, checkComplete);
function checkComplete(e:Event):void {
	if ( LoaderInfo(this.root.loaderInfo).bytesLoaded == LoaderInfo(this.root.loaderInfo).bytesTotal ) {
	stage.removeEventListener(Event.ENTER_FRAME, checkComplete);
	gotoAndStop(2);
}
}


//preloader
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void
{
	var loaded:Number = e.target.bytesLoaded;
	var total:Number = e.target.bytesTotal;
	var pct:Number = loaded/total;
	loader_mc.scaleX = pct; //must have mask on stage with instance name loader_mc
	loaded_txt.text = "loading..." + (Math.round(pct * 100)) + "%";//optional; displays percentage loaded in text
}

function onComplete(e:Event):void
{
	gotoAndStop(2);
}

Open in new window


The mask loader_mc will expand according to the bytes loaded and give the illusion of "growing" whatever is on the layer below. It can be a simple bar shape you draw as load bar, or an image you want to give the illusion of "filling" up. Can be something fun.

The text box loaded_txt is optional, but i included it so you have an example of how that could work. It needs to be a regular text box set to dynamic text, and make sure you embed the font for loaded_txt if it's anything other than a standard web font. You could use each together, or each separately.

Hopefully that's enough to help get you started!
0
 
Christine_Crawford1111Author Commented:
Thank you Jen and dgofman ;)

Jenn, do I add the code in the same .fla that I am loading?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Jen0910Commented:
Yep. You would put that directly on frame 1 of your main timeline. Make sure it's the only thing on frame one, also, so your project basically starts on frame 2.
0
 
Christine_Crawford1111Author Commented:
got it!  Thank you, I'll try that :))
0
 
Christine_Crawford1111Author Commented:
Hi Jenn, I get the following error message when I test the movie:

1120: Access of undefined property loader_mc.
0
 
Christine_Crawford1111Author Commented:
ps.  I have CS3
0
 
Jen0910Commented:
"1120: Access of undefined property loader_mc" means it cannot find a symbol on the stage with that instance name (loader_mc).

Reference line 22 in the code example above
loader_mc.scaleX = pct; //must have mask on stage with instance name loader_mc

Open in new window


You need to have a symbol on your stage with instance name loader_mc, set on a mask layer. The mask loader_mc will expand according to the bytes loaded and give the illusion of "growing" whatever is on the layer below, which is why we set it as a mask. You can draw a simple mask on the stage and right click on it, choose "convert to symbol". Make it either a movieclip or image, and name it "loader_mc".

Aslo, with this item since it's code-based it doesn't matter which version of adobe creative suite you have, matters which version of ActionScriting you are using. So, if that's the only error you have, you are working in 3.0 which is what we need :)
0
 
Christine_Crawford1111Author Commented:
I put the symbol with instance name loader_mc on a layer mask and i'm still getting the same error message.

I've attached a screenshot of my work area.  I don't know if that will help at all.  I named the symbol loader_mc as well but that wouldn't have a negative affect would it? loader screenshot
0
 
Christine_Crawford1111Author Commented:
Also the webpage that I have in the second frame blinks off and on.
0
 
Jen0910Commented:
It's very hard to diagnose without seeing code. I imagine you dont want to share code otherwise you would have uploaded? Nevertheless, I've attached an FLA with the preloader I know works (this is my template file that starts every project I do) so hopefully you can work off of this. You can either copy all of these frames into yours, or copy all of your frames into this one. Either way, you should be good to go.

As for the blinking, I'm imagining you are missing a stop on your 2nd frame.
preloader3.0.fla
0
 
Christine_Crawford1111Author Commented:
Jenn, do you I can't open the file you attached.  Where can I find the code on my file?  are you talking about the action script? I've pasted it below ;)

stop();

//ie cache bug fix
stage.addEventListener(Event.ENTER_FRAME, checkComplete);
function checkComplete(e:Event):void {
      if ( LoaderInfo(this.root.loaderInfo).bytesLoaded == LoaderInfo(this.root.loaderInfo).bytesTotal ) {
      stage.removeEventListener(Event.ENTER_FRAME, checkComplete);
      gotoAndStop(2);
}
}


//preloader
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void
{
      var loaded:Number = e.target.bytesLoaded;
      var total:Number = e.target.bytesTotal;
      var pct:Number = loaded/total;
      loader_mc.scaleX = pct; //must have mask on stage with instance name loader_mc
}

function onComplete(e:Event):void
{
      gotoAndStop(2);
}
0
 
Jen0910Commented:
I'm working in CS5, guess it doesn't save back far enough. Bummer. I tracked down a co-worker in CS4 and saved it down from there, so maybe this file will work for you. Just in case, I've also attached screen shots of how the file should be setup. it's hard to see what you've got going on from a screen shot since i can't see the code, but i ill use screen shots to break it down for you.

there are shots of each individual layer, as well as one for what it looks like with all layers so hopefully you can see what's going on. Total of 6 layers, one for actions (a), frame labels (L), one for the text(text, this is "loaded_txt"), one for the loader bar mask (preloader mask, this is "loader_mc"), one for the image be hind the mask which will get shown as the file loads, in this case just a solid bar (layer 43), and just an extra layer i have in there called "image bars" that has nothing to do with the code, just gives the viewer some spacial awareness to show the amount of time left and gives an idea of when the movie will be fully loaded.

a layer, frame one code:
stop();

//ie bug fix
stage.addEventListener(Event.ENTER_FRAME, checkComplete);
function checkComplete(e:Event):void {
	if ( LoaderInfo(this.root.loaderInfo).bytesLoaded == LoaderInfo(this.root.loaderInfo).bytesTotal ) {
	stage.removeEventListener(Event.ENTER_FRAME, checkComplete);
	gotoAndStop(2);
}
}


//preloader
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void
{
	var loaded:Number = e.target.bytesLoaded;
	var total:Number = e.target.bytesTotal;
	var pct:Number = loaded/total;
	loader_mc.scaleX = pct;
	loaded_txt.text = "loading..." + (Math.round(pct * 100)) + "%";//optional
}

function onComplete(e:Event):void
{
	gotoAndStop(2);
}

Open in new window


a layer frame 2 code (this is where you will start your project/animations):
stop();

Open in new window

preloader.zip
0
 
Christine_Crawford1111Author Commented:
Thank you Jenn, this is amazing.  Sorry I've been so busy I'm just seeing this now ;)

I will work on it later today!! Thank you sooooo much!!! You are extremely helpful!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now