How do I add a Simple Preloader Animation while a FLV file Buffers in Flash AS3

Posted on 2011-05-06
Last Modified: 2013-11-11
I have a 7 meg FLV file which streams very nicely using the FLVPLayback component in Flash CS3.  It does a very nice job of waiting for the FLV file to buffer before playing which allows for steady playback,  however, there is currently about 5 seconds of dead time while the FLV file buffers.  Sometimes longer when viewed over a wireless connection.  I would like to add just a simple Circle Youtube Style animation at the beginning of the file to allow the users to know that a file is loading. No progress bar required.    
Please help !
Question by:JohnTregaskiss
    LVL 17

    Expert Comment

    Use the VideoEvents like State changes to track when bufferring starts and ends (BUFFERING_STATE_ENTERED), based on that show/hide the bufferring animations.

    Warm Regards
    Deepanjan Das

    Author Comment


    My FLV file is called trailer.flv, instance name trailer
    I'm supposing i need to create a movie clip for the preloader. lets call it preloader
    Do I put the Preloader on Frame1, Trailer on Frame2, and then add actions to FRame 1 telling it to go to rame 2 once the buffer is complete.  If so, what would my AS look like?
    LVL 17

    Expert Comment

    You are right, need to create a preloader movieclip.
    Now place the FLVPlayback component on frame 1 layer 1. place the preloader on layer 2 above the component.
    Now add the buffering listener with the FLVPlayback component as shown in the link above.

    On buffering start set the preloader clip's visibility to true and to false when playing starts.

    Hope this helps :)

    Warm Regards
    Deepanjan Das
    LVL 1

    Accepted Solution

    OK, deepanjandas did a pretty good job of explaining it. I don;t know if that solved your problem. You asked for the code so I typed it up for you. See below

    Create a buffer Animation as a Movie-Clip-symbol in your library. In the example below I gave it the Class-Name: "YourMovieClipSymbolsName".

    With a left click on the symbol in the library you can pull up the properties window.
    Under Advanced checkmark "Export for Actionscript" & "Export in Frame 1"

    Via Code cretae an Instance of it in Frame 1 (if it says it does not know the class in frame 1, try it in Fame 2).IN the example I called this instance:"bufferAnimation".

    Attache Listeners as shown to your FLVPlayback Instance (You said it was called trailer) and use the Listeners to add and remove your instance of the buffer Animation to/from the Display list

    Carefull, if you did not add the instance of the FLVPlayback through Code in frame 1, the Flash might not see it in Frame 1. Hence you can only attach the listeners in Frame 2
    var bufferAnimation:YourMovieClipSymbolsName = new YourMovieClipSymbolsName();
     trailer.addEventListener(VideoEvent.BUFFERING_STATE_ENTERED, showBufferAnimation);
     trailer.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, removeBufferAnimation);
    function showBufferAnimation(e:VideoEvent){
    function showBufferAnimation(e:VideoEvent){

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Photoshop CC 2015

    Photoshop has become the standard in image manipulation among professional photographers and graphic designers. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Suggested Solutions

    This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
    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…
    In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
    The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

    758 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

    11 Experts available now in Live!

    Get 1:1 Help Now