【问题标题】:Flex HSlider dragging using slider trackFlex HSlider 使用滑块轨道拖动
【发布时间】:2011-01-05 08:53:59
【问题描述】:

我是一个 Flex/Flash 新手,我正在尝试创建一个简单的音乐播放器,它有播放/暂停按钮和一个 HSlider,它使用自定义 SliderThumbClass 显示歌曲播放时的位置。我希望允许用户拖放滑块拇指或单击滑块以更改当前播放歌曲的位置。

使用下面的代码,如果我使用 sliderThumb 更改当前播放歌曲的位置,效果很好。但是如果我直接单击滑块轨道向前/向后跳跃,当前位置不会移动,并且当前位置有一些闪烁,但它会跳回到原来的位置并继续播放歌曲。如果我处于暂停状态,这确实有效。

正如预期的那样,当用户单击 sliderTrack 时不会触发 thumbDrag/Press/Release 事件 - 我应该订阅哪些事件来处理这种情况?

谢谢

<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>

【问题讨论】:

  • 由于我没有得到满意的答案,我通过设置属性 liveDragging="false" 来禁用实时拖动(在这种情况下是可以接受的)

标签: apache-flex


【解决方案1】:

您的问题是您可能有一个事件侦听器正在更新拖动事件中歌曲中的位置,但您没有将相同的逻辑应用于单击事件。 (不能确定没有更多代码).....但这会导致您的拇指跳跃,因为它是点击...然后它会跳回来,因为它会随着歌曲播放而更新

【讨论】:

  • 是的 - 更新拇指位置/歌曲时间的事件侦听器在上面代码的 OnEnterFrame(..) 中定义。问题是,如果我订阅滑块上的“点击”事件,它不会将slider.value 更新到新位置,因此我无法正确计算 EnterFrame() 上的歌曲时间/滑块拇指位置。
  • 这并没有回答关于订阅哪个事件的问题......“点击”事件是否是正确的订阅事件?不是“改变”事件?
  • sorry physcodick ..但是当更改事件被调度后直接点击“轨迹栏”时,点击事件也被调度......不管这是什么问题......问题与其他事件调度和搞乱当前位置的更新......
猜你喜欢
  • 1970-01-01
  • 2014-01-10
  • 2012-07-26
  • 2012-01-22
  • 1970-01-01
  • 1970-01-01
  • 2016-08-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多