Flex HSlider dragging using slider track

Question

I am a Flex/Flash newbie and am trying to create a simple Music player has play/pause button and an HSlider that shows the position of the song as it is playing using a custom SliderThumbClass. I would like allow the user to drag/drop the sliderthumb or click on the sliderbar to change the position of the song currently playing.

With the code I have below, if I use the sliderThumb to change the position of the currently playing song, it works great. But I if I click directly on the slidertrack to jump ahead/back, the current position doesn’t move and there is some flashing of the current position, but it jumps back to where it was and continues playing the song. This does work if I am in the paused state.

As expected, thumbDrag/Press/Release events are not triggered when the user clicks on the sliderTrack - What events should I be subscribing for to handle this case?

Thanks

<mx:Canvas>

<mx:Script>
<![CDATA[
...
...

private function onMusicPlay():void 
{
   ... 
   this.addEventListener(Event.ENTER_FRAME,onEnterFrame);
   ...
}

private function onMusicPause():void 
{
   ... 
   this.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
   ...
}
//Invoked when the user changes the position of the slider using the thumb. It
// calculates the new position where the song should start playing.
private function onThumbDrag(event:Event):void
{
    // if a song is loaded and we have the handles to it's sound and channel
    // objects, allow the scrubber to drag and update state
    if((_currentSong != null) && (_currentChannel != null))
    {
        _isDragging = true;
        _currentSongLength = _currentSong.length;
        _currentChannel.stop();
        var playhead:Number = scrubSlider.value *.01;
        _currentChannel = this.createChannel(_currentSong, (playhead * _currentSongLength));

    }
}

    //Calculates the time remaining on the current song
private function onEnterFrame(event:Event):void
{
    // only calculate intervals if the user isn't dragging
    // the length scrubber of the song, and if the song is playing
    if(!_isDragging && !_isPaused)
    {
        scrubSlider.getThumbAt(0).x = ((_currentChannel.position / _currentSong.length) * scrubSlider.width);
        var dtPosition : Date = new Date( _currentSong.length - _currentChannel.position);
        _nSongPosition.text = _timeFormatter.format( dtPosition );      
    }

]]>
</mx:Script>

    <mx:Image id="_pauseIcon" x="0" y="0" visible="true" click="pause()" source="@Embed('../icons/pause.png')"/>
    <mx:Image id="_playIcon" x="0" y="0" visible="false" click="play(false)" source="@Embed('../icons/play.png')"/>

    <mx:HSlider x="75" y="10" width="527" id="scrubSlider"
        sliderThumbClass="components.LargeSliderThumb"
        minimum="0" maximum="100" 
        liveDragging="true"
        showDataTip="false"
        thumbDrag="onThumbDrag(event)"            
        thumbPress="{_isDragging=true}" 
        thumbRelease="{_isDragging=false}"
        thumbDownSkin="@Embed('../icons/sliderThumbIcon.png')"
        thumbOverSkin="@Embed('../icons/sliderThumbIcon.png')" 
        thumbUpSkin="@Embed('../icons/sliderThumbIcon.png')" 
        trackSkin="@Embed('../icons/sliderTrack.png')" />
    <mx:Text id="_nSongPosition" x="610" y="10" width="69" height="29" text="" color="#000000" fontWeight="bold" fontSize="18"/>

</mx:Canvas>

Answer 1

Your problem is you probably have an event listener that is updating the position in the song on your drag events but you are not applying the same logic to the click event. (can't tell for sure w/o more code)..... but this would cause you thumb to jump because it was click...then it would jump back because its updating as the song plays