Introduction

We are going to look at creating an interactive element that allows the user to determine if they want to stream or buffer the movie they are about to watch and then use this to set the variables in the preloader.

To see a working example try my site.

Buffer - Adding the Progress Bar

Draw the empty buffer bar symbol and another symbol which is the size of one of the segments on the buffer bar.

In the first layer put the empty buffer bar, then add 4 empty frames to the layer. In the second layer add 5 keyframes and create the 5 stages of the buffer bar, i.e. put the segments in so it contains 0-4 segments in frames 1-5.

Note: You can change the sequence of the layers by dragging them up and down. The front most layer is the top layer and vicer versa.

We are now going to add our frame actions so create a new layer with 5 key frames in. Double click frame 1 to modify its properties and choose the actions tab. Choose stop from the drop down menu and then choose set variable from the drop down menu with buffer_length as the variable and 0 as the value. This is so that when we carry on to the preloader we know what choice we have made. Repeat this for the other keyframes but change the buffer_length variable by +25 for each frame, this is indicitive of the percentage.

Buffer - Adding the More and Less Buttons

First we have to create the "more" and "less" button symbols.

Create a new layer and in frame 1, the keyframe, put both the more and less buttons. To make the buttons work we need to add actions to each instance of the buttons. So in frame 1 of the button layer double click the more button to modify the instance properties. In the actions tab choose on MouseEvent from the drop down menu and check the Release box and the choose Go To from the drop down menu and check the Next Frame from the Frame option and ok. Do the same for the less button but instead of choosing Next Frame choose Previous Frame. Now add a keyframe to frame 5. Highlight frame 5 and then highlight the more button and delete it. Add a keyframe to frame 2 and then do the same in frame 1 for the less button.

To check the movie go to the Control menu and test movie. You should now be able to press the more and less buttons and see your bar buffer fill and empty with your segments.

Buffer - Adding the Continue Button

Now create a new button symbol which we will allow the user to progress once they have made up their mind. Make a new layer and put your new button on it. Add empty frames through to frame 5. Double click on the button to edit its properties and in the actions tab choose On MouseEvent and check the Release box. Then choose Go To from the drop down menu and enter number 6 in the Frame option, and then check the Go To and Play box.

Your Bar Buffer is now complete.

Preloader

Now to add a preloader that works with the choice that the user makes on the bar buffer.

For the preloader the only symbols you need to draw are the needle, the exterior of the dial and the face. Add a new layer, add a keyframe at frame 6. With this highlighted put your face dial and needle in place, with the needle pointing at empty. Now add 17 empty frames. With with the keyframe at frame 6 highlighted place your needle on the dial, with it highlighted, choose modify->transform->edit centre and move the centre cross to the centre of the dial face, now when you rotate the needle it will rotate about the centre point. Now make everyother frame a keyframe, each of these is for the different positions of the needle on the dial. So on each of the key frames rotate the needle to point at the appropriate point on the dial. This doesn't need to be exact as it is on only to give users a rough idea of how much is left to load.

Preloader - Variables

Now add a layer which will contain some variables. Double click the first keyframe and choose Set Variable from the drop down menu. For the variable put end_frame, and for the value enter an expression that returns the last frame of the movie GetProperty ( "",_totalframes) (You can always enter these manually as numbers).

Repeat but put the variable as start_frame and its value as the starting frame of the movie, if the movie is a different scene the starting frame should be 0 but if, like me, you put the preloader before the movie it will be something else, in this example it would be 23.

Repeat again but with needle_points as the variable and 8 as the value as we are going to have 8 different needle poisitions on the dial (excluding empty). Again set a variable position with a value of 0. Now add another layer for the frame actions for the preloader. Add a keyframe at 6 and 7. Double click frame 6 and choose the actions tab. Choose If Frame Is Loaded from the drop down menu.

Preloader - Loading

Now we need to work out which frame we need to check is loaded using the needle position, start and end point of the movie and the amount the user wants to buffer. Easy! :-)

In the expression box put Int(start_frame+((buffer_length/100)*((end_frame-start_frame) / needle_points)*position)) The position is the needle position on the dial and will range from 0-8.

Then choose Set Variable from the menu and position as the variable and position+1 as the value, make sure that it is an expression not a String literal. Then choose Go To from the drop down menu and choose expression and enter GetProperty ( "", _currentframe )+2 and check the Go To and Play box.

Now you could have entered numbers instead of using these variables but what if you want to add a couple of frames somewhere in the preloader for some reason you would have to alter all these values, so using these variables is more dynamic. Also some people put the preloader in a different scene whereas I just plonk it before the rest of the movie so the start point of my movie can change as well. These can become even more dynamic when you write one frame action which can then recalled by other frames. This saves on your writing actions again and again and keeps file sizes down.

Anyway back to it. In the next keyframe Make a frame action of Go To and Play(GetProperty ("",_currentframe)-1). Now highlight these two keyframes and copy frames from the edit menu. Then Paste Frames for the next 16 frames so that they co-incide with the needle pointer positions. The first frame action checks if the relevant frame is loaded if it is it increments the position variable and the movie progresses two frames to the next If Frame is Loaded. If it is not then it progresses to the next frame which then returns to the previous frame. This is just a little loop that continues until the required frame is loaded, it needs to loop so that the load status is constantly checked.

The Result

You are now the proud owner of a buffer bar and preloader. If you want to alter the buffer bar maybe use a editable text field, or to be really clever use a draggable movie clip and make a slider. To test your preloader place a long sound clip, say 500 frames long, and then use control -> test movie then alter the bitrate to something low from the control menu and ten choose control -> show streaming.

To see a working example try my site

 

» Level Intermediate

Added: : 2000-10-04 Rating: 5.78 Votes: 180 Hits: 9090

» Author

No information about the author has been provided

» Download

Download the files used in this tutorial.

Download (98 kb)

discuss this topic to forum