Tutorial:User-created Seekbar/MovieControls(AS1)

From Anipedia

Contents 1 User-created movie controls 2 Actionscript 3 Control Flow 4 on Event handlers 5 Functions(); 6 Downloads

[edit] User-created movie controls

With Actionscript, user-created elements like Seekbars can control the position of the "_currentframe" property within a scene. Created movie controls can override the regular playback of Flash movie timelines. Linear movies can benefit from having a seekbar if their movie is considered too long or users wish to rewatch certain parts. This tutorial features examples on how to create movie controls to alter the playback of movieclip timelines

---

Movie Controls

Movie controls can control the playback of movieclips within a Flash movie. 'FastForward' & 'Rewind' buttons can increase or decrease the speed of movie-seeking.

Seekbar

A Seekbar can control the movie with the position of the mouse; A Playhead (or scrubber) declares the position of our movie when the mouse is inactive. The total length of the movie is reached when the playhead "seeks" to the end of the seekbar.

The end of the seekbar should equal the total length of the movie timeline

The _currentframe of the movie, should match _totalframes at 100%

Example: Use the seekbar to control the movie clip. Move it to the end by dragging it to the right.

Press 'Stop' before using the 'FF' or 'REW' buttons, Try them again after pressing 'Play'.

[edit] Actionscript

Programming syntax can read formulas using the evaluate; action. The playhead formula can be declared as a statement below.

The seekbar should equal the current position of the movie timeline. It should also check conditions/loops for user interaction.

The playhead should check for two conditions when running:

1) When the playhead_button is ON

2) When the playhead_button is OFF

The "playhead_button" should tell our movie its position when it is ON...

...but the "movie" should tell our "button" its position, when it is OFF

[edit] Control Flow

Knowing the statements we want to perform, we can articulate the order in which they operate through the "if" and "else" conditions.

The if "action" will run statements after conditions have been met.

The else "action" will evaluate statements, if the first condition returns as 'false'.

The seekbar script should also check for

1) What to do when the button is on

2) What to do when it is off.

3) And make corrections to user interactions we don't want.

i.e.

---

[edit] on Event handlers

The Seekbar should also run within a movieclip handler. MovieClip handlers are input-oriented trigger events, while frame-based actions are frame oriented** . Our script would check our conditions faster, if they were performed within "every frame". The OnClipEvent() handler will do this under the (enterFrame) movieEvent.

• • This doesn't mean our script can't be tried as FrameBased, but most FB scripts rely on oversusing gotoAndPlay(); to check loops. Movieclip handlers are much faster.

Example

[edit] Functions();

The functions action will modulate your script around the "playhead" x "movie" arguments. Too many path names when naming conditions "i.e. if (_root.x.cow.chicken.duck == dog)" will slow your movie down considerably. Functions can declare these statements using relative arguments.

i.e.

           function seekbar (playhead, movieframe) {
}

Example

onClipEvent (load) {
    function playhead (x, y) {
        // scrubber
        if (x.m == 1) {
            if (_xmouse<0) {
                x._x = 0;
            } else {
                if (_xmouse>288.1) {
                    x._x = 288.1;
                } else {
                    x._x = _xmouse;
                    // scrubber
                }
            }
            y.gotoAndPlay(Math.ceil(x._x*y._totalframes/288));
            y.stop();
            p = 0;
        } else {
            if (!p == 1) {
                y.play();
                p = 1;
            }
            x._x = (y._currentframe*288/y._totalframes);
        }
    }
}
onClipEvent (enterFrame) {
    // "playhead("controls", "movie")
    playhead(_root.player.head, _root.movie);
}

In the example, the conditions for our "playhead()" function are listed under the "onClipEvent(load)" handler. The playhead( ) function is later called under an "onClipEvent(EnterFrame)" handler.

You can pass different expressions through defined functions when calling them

i.e.

e.g. function playhead (x, y)  (Load)

      playhead(moviecontrols.buttongraphic, Movie)" (enterFrame)

.

[edit] Downloads

Download the .fla to view the examples seen within this tutorial. These scripts can be implemented into movies by renaming the function call and instance names to different expressions.

[Window->ScenePanel->seekbar with buttons]

Replace  playhead(_root.player.head, _root.movie);
             with
              playhead(_root.player.head, _root);

Seekbar_MovieControls_.fla[1]

Seekbar_MovieControls_.swf[2]

Seekbar[s]_only.fla[s_only.fla]