First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: Tim Murray | Website: http://www.gmg.com.au

Dragger states

Our dragger will need to perform two tasks. When the visitor is not dragging the slider control, we need to move the dragger so that it matches where the sound playhead is. When the visitor is dragging the slider control, we will need to stop playing the sound and move the sound playhead to match the movement of the slider. Let's call the first task (also known as a "state" in geek-talk) "mediaPlaying" and the second task "moveMedia".

We have already done the first bit: our dragger is being moved around when the sound is playing or paused. When we do the second bit, we need to stop moving the dragger and let the visitor do the dragging. While the visitor is dragging the slider control around, we need to work out where the dragger is and move the sound playhead to the appropriate frame.

Currently, our mover movie clip on the movieMover layer has onClipEvent code that works well for our mediaPlaying state.

The easiest way to give our slider two states is to use two frames in the progress-bar movie clip: frame 1 for the mediaPlaying state and frame 2 for the moveMedia state. If we keyframe our movieMover layer on both frame 1 and frame 2, we can have different onClipEvent code for mediaPlaying and moveMedia.

Our mediaPlaying code stays the same (it moves the dragger to a position that is appropriate for where the sound playhead is). Our moveMedia code will be new (it will move the sound playhead to a frame that is appropriate for where the dragger is dragged to).

We will give frames 1 and 2 Frame Labels so that our gotoAndStop commands that we add soon will be easier to understand. Instead of gotoAndStop(1) we will be able to write gotoAndStop("mediaPlaying") if we use labels.

How do we do this? Add a "labels" layer to the top of the progress-bar timeline.

Select frame 2 for all of the layers and do an "Insert > Frame" command (F5).

Select frame 2 of the labels layer and "Insert > Keyframe" it.

Select frame 2 of the movieMover layer and "Insert > Keyframe" it as well.

Select frame 1 of the labels layer and in the Properties panel, enter "mediaPlaying" in the text box.

Select frame 2 of the labels layer and in the Properties panel, enter "moveMedia" in the text box.

Select frame 2 of the movieMover layer and click on the mover movie clip. In the Actions panel, you should see a copy of the onClipEvent code that we entered before (the code to move the dragger to a position that is appropriate for where the sound playhead is). Select all of the code in the Actions panel and delete it. We don't want this code trying to keep the dragger in one place while the visitor is trying to drag it!

Check that the code for frame 1 of the movieMover layer is still there. Select frame 1 of the movieMover layer and click on the mover movie clip. In the Actions panel, you should see a copy of the onClipEvent code that we entered before (the code calls setDraggerPosition).

To finish this off, we need to add an "actions" layer between labels and functions. Add a keyframe to frame 2. Put a stop() command on actions frame 1. Also put a stop() command on actions frame 2. This will make sure that whenever we change state, our progress bar movie won't repeatedly play through all of our states and cause hard-to-track-down bugs.

In this section, we have only prepared our slider for the playhead positioning code. We did this by making our controller movie (movieMover) execute different code in frame 1 and frame 2. This way the ActionScript we develop in the next two sections can be simpler.

» Level Advanced

Added: 2004-02-17
Rating: 8 Votes: 63
(10 being the highest)
» Author
Tim is a co-director of the Glasson Murray Group, providing quality graphic design, illustration, 3D visualisation, interactive environments, virtual reality, multimedia and website services.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.