Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-09-21
14
Medium Priority
?
240 Views
Last Modified: 2012-05-12
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
Comment
  • 8
  • 5
14 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 36577695
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
 
LVL 8

Expert Comment

by:Jen0910
ID: 36582656
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
 

Author Comment

by:Christine_Crawford1111
ID: 36583226
Thank you Jen and dgofman ;)

Jenn, do I add the code in the same .fla that I am loading?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Expert Comment

by:Jen0910
ID: 36583404
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
 

Author Comment

by:Christine_Crawford1111
ID: 36583428
got it!  Thank you, I'll try that :))
0
 

Author Comment

by:Christine_Crawford1111
ID: 36589333
Hi Jenn, I get the following error message when I test the movie:

1120: Access of undefined property loader_mc.
0
 

Author Comment

by:Christine_Crawford1111
ID: 36589334
ps.  I have CS3
0
 
LVL 8

Expert Comment

by:Jen0910
ID: 36589828
"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
 

Author Comment

by:Christine_Crawford1111
ID: 36590957
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
 

Author Comment

by:Christine_Crawford1111
ID: 36592532
Also the webpage that I have in the second frame blinks off and on.
0
 
LVL 8

Expert Comment

by:Jen0910
ID: 36599022
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
 

Author Comment

by:Christine_Crawford1111
ID: 36601299
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
 
LVL 8

Accepted Solution

by:
Jen0910 earned 2000 total points
ID: 36716776
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
 

Author Comment

by:Christine_Crawford1111
ID: 36899683
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, I'll explain how to setup a Plex Media Server (https://plex.tv/) on a Redhat (Centos) 7 based NAS with screenshots to help those looking for assistance.  What is Plex? If you aren't familiar with Plex, it’s a DLNA media serv…
It is a real story and is one of my scariest tech experiences. Most users think that IT experts like us know how to fix all computer problems. However, if there is a time constraint and you MUST not fail the task or you will lose your job, a simple …
Viewers will learn the basics of creating custom device Racks in Ableton Live. Place instrument(s) and effects onto a track, and select them all by holding the Shift key and clicking on the device title bars: Group them by typing Command-G (Ctrl-G…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question