Solved

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

Posted on 2011-09-21
14
227 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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you Jen and dgofman ;)

Jenn, do I add the code in the same .fla that I am loading?
0
 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
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
Comment Utility
got it!  Thank you, I'll try that :))
0
 

Author Comment

by:Christine_Crawford1111
Comment Utility
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
Comment Utility
ps.  I have CS3
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
"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
Comment Utility
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
Comment Utility
Also the webpage that I have in the second frame blinks off and on.
0
 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now