开发者

What's an easy way to add a loading bar to a fla?

开发者 https://www.devze.com 2023-04-04 16:53 出处:网络
I have a .swf that I\'m using on my website but it takes a few seconds to load. Its kind of an eye sore while its loading so I want to add a loading bar. I was wondering what the easiest way to do thi

I have a .swf that I'm using on my website but it takes a few seconds to load. Its kind of an eye sore while its loading so I want to add a loading bar. I was wondering what the easiest way to do this in the .fla fil开发者_开发问答e is.


1) Make three layers on your Main Timeline.

2) On Layer 1 (top), make two blank keyframes on Frame 1 and 2 and 3.

3) On Layer 1, Frame 1, enter this code:

    bytes_loaded = Math.round(this.getBytesLoaded());
    bytes_total = Math.round(this.getBytesTotal());
    //
    this.loadBar._width = getPercent*200;
    if (bytes_loaded == bytes_total) {
        this.gotoAndPlay(3);
    }
    ;

4) On Layer 1, Frame 2, enter this code:

    this.gotoAndPlay(1);

5) On Layer 2 (Middle), make a blank keyframe on Frame 1 and Frame 3.

6) Draw a rectangle (let's say 100x10) with no border on Layer 2, Frame 1. For now, make it red.

7) Convert that shape to a Movie Clip and name the instance "loadBar".

8) On Layer 3 (Bottom), make a blank keyframe on Frame 1 and Frame 3.

9) Draw a rectangle (let's say 100x10) with no border on Layer 3, Frame 1. For now, make it black. This will be the background of your loading bar. Align it directly behind Layer 2's rectangle movie clip.

10) Double-click Layer 2 Frame 1's movie clip called "loadBar".

11) Make 2 layers.

12) On Layer 1 (Top) draw a rectangle (let's say 100x10) with no border. Make it any color you want.

13) On Layer 2 (Bottom) draw a rectangle (let's say 100x10) with no border. Make it Gray. This will be the color of the bar as it fills up. Align it directly behind Layer 1's rectangle shape.

14) Now, right-click on Layer 1 in the Timeline area and select "Mask."

15) Now, you're all set! Once the file has loaded it will jump to Frame 3 and start playing! Change the colors and sizes and positions of the loading bar graphics as needed!


this.stop();
this.loaderInfo.addEventListener(Event.COMPLETE, action);
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressAction);
function onProgressAction (e:ProgressEvent):void
{
    var total:Number = e.bytesTotal;
    var loaded:Number = e.bytesLoaded;
    if(total == loaded) {
        gotoAndStop(2);
    }   
}
function action (e:Event):void 
{
    this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgressAction);
}
0

精彩评论

暂无评论...
验证码 换一张
取 消