TRACKING PLAYBACK AND DOWNLOADING PROGRESSION


The number of frames in a movie and the file size of their contents determine a movie's overall length and size a fact made evident by looking at the main timeline, where these factors represent the length and size of the entire SWF. The total number of frames in a movie is a represented by the _totalframes property. Thus, if the main timeline has 400 frames that span several scenes, you could state that as follows:

 _root._totalframes = 400; 

You can use this property in your scripts to determine the overall length of your movie (based in frames).

NOTE

Because it is a read-only property, the value of _totalframes is automatically set by Flash (based on the number of frames on a timeline). Thus, not only does it not make sense to attempt to reset this value, it's not even possible!


If you know this value, you can use it in conjunction with other movie properties to make comparisons during downloading and playback. For example, by comparing the value of the _currentframe property with the value of the _totalframes property, you can determine how much longer the movie will play:

 framesLeft = _root._totalframes - _root._currentframe;  message.text = "There are " + framesLeft + " to go."; 

Since Flash is based on streaming technology, the process of downloading and viewing a SWF from a Web site actually occurs a frame at a time. Another property, _framesloaded , provides the total number of frames that have been downloaded. The value of this property can be compared to the _totalframes property to provide information about download's progress. In the following exercise, we'll demonstrate this by creating a progress bar (known as a preloader) that shows the percentage of frames that have been downloaded.

  1. Open preloader1.fla in the Lesson15/Assets folder.

    This project contains two scenes, Preloader and Content. The Content scene simply contains several layers of graphics and animation that will be used to demonstrate how the preloader works. All of our work in this exercise will take place in the Preloader scene, which contains three layers: Background, Preloader, and Actions. The Background layer contains a square with a radial gradient. The Actions layer contains a stop() action to prevent the timeline from moving forward until we instruct it to. The Preloader scene contains two elements, a text label containing the text "now loading…" and a movie clip instance named preloader, which includes the elements that will be used to show the downloading progress. Let's take a closer look at this instance.

  2. Double-click the preloader movie clip instance to edit it in place.

    This movie clip's timeline consists of four layers named according to their contents. The most important aspects of this timeline are the text field named info, which resides on the Text layer, and the tweened animation on the Amount layer. The text field will be used to dynamically display the percentage of frames that have downloaded. The tweened animation represents a 100-frame progress bar that begins at 0 percent and ends at 100 percent. Among other things, our script will move this movie's timeline to the appropriate frame number based on the percentage of frames that have been downloaded. This will result in the progress bar moving accordingly.

    graphics/15fig17.gif

  3. Return to the main timeline. With the Actions panel open, select the preloader movie clip instance and add this script:

     onClipEvent (enterFrame) {    framesLoaded = Math.ceil (( _parent._framesloaded /  _parent._totalframes)  * 100);    gotoAndStop (framesLoaded);    info.text = framesLoaded + "% completed";    if (framesLoaded >= 90) {      _root.gotoAndPlay (2);    }  } 

    This script is executed using an enterFrame event (24 times a second), which means it will instantly react to the current downloading conditions to display the most accurate representation of the process.

    The first thing this script does is determine a percentage value for the number of frames that have downloaded. It then rounds that number up and assigns that value to the framesLoaded variable. Using precedence, the expression employed to do this is evaluated in the following manner:

     _parent._framesloaded /_parent._totalframes 

    With this part of the expression, the number of frames on the main timeline that have loaded is divided by the total number of frames on the main timeline.

    NOTE

    Since this script is attached to the preloader movie clip instance and that instance resides on the main timeline, the use of _parent as the target path is a reference to the main timeline. This setup allows the preloader clip to be used (and function properly) in any project without modification.

    For demonstration purposes, let's assume that the movie has 735 frames, 259 of which have loaded. If that were the case, this part of the expression would look like the following:

     259 / 735 

    This would result in a value of .3523. The next part of the expression is used to multiply that result by 100:

     * 100 

    This would result in a value of 35.23. Lastly, using the Math.ceil() method, this value is rounded up to the next whole number, or 36 and thus framesLoaded is assigned a value of 36. Remember: Since this script is executed 24 times per second, this number increases as the movie is downloaded.

    graphics/15fig18.gif

    TIP

    The _framesloaded and _totalframes properties used in this script can be replaced with the getBytesLoaded() and getByteTotals() methods of the Movie Clip object if you want to make this preloader react to actual bytes loaded (rather than just frames). This is sometimes the preferred method of scripting a preloader because a frame is not considered loaded (thus the preloader will not advance) until all the data it contains is loaded. This may cause the preloader to appear stalled if the frames loaded contain numerous bytes of data. In contrast, looking at the bytes loaded will cause the preloader to move forward more smoothly, since changes in byte-data happens more frequently (as each byte of data is downloaded). See the bonus file on the CD that demonstrates this.

    The next action in the script is used to send the current movie to the appropriate frame, based on the value of framesLoaded . Because the current movie contains the tweened animation of the progress bar moving from the left to the right, this action controls the movement of that bar. As the value of framesLoaded increases, so does the appearance of progress on the progress bar.

    The next action is used to set what's displayed in the info text field. Here, the value of framesLoaded is concatenated with the string "% completed". If framesLoaded has a value of 36, this will read, "36% completed".

    The last part of the script contains a conditional statement used to determine when the preloader's work is complete. It says that once the value of framesLoaded is equal to or more than 90, the main timeline should be moved to Frame 2 (which is actually the Content scene) and play from there.

    TIP

    The value of 90 in this conditional statement could easily be changed to any value in order to specify when the preloader's work is finished and the movie can begin to play.

  4. Choose Control > Test Movie to view the project to this point. When the test movie appears, choose Debug >56K, then choose View > Show Streaming.

    This will provide a fairly accurate simulation of how the preloader will look and function when the movie is being downloaded over a 56K modem. As the movie loads, you'll see several points where the percentage of the movie downloaded changes. The progress bar reflects the ongoing status of the downloading process. As explained in the previous step, once 90 percent of the movie's frames have downloaded, the timeline moves to the Content scene and the movie plays from there.

  5. Close the test movie and save your project as preloader2.fla.

    This completes the exercise.



Macromedia Flash MX ActionScripting Advanced. Training from the Source
Macromedia Flash MX ActionScripting: Advanced Training from the Source
ISBN: 0201770229
EAN: 2147483647
Year: 2002
Pages: 161

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net