Member Avatar for samarudge

Hi,
I have created a Flash MP3 player with a timeline, at the moment you have to click on the place in the timeline to move to but I would like people to be able to click and drag the time slider.
The code I have for setting the position in the time slider is

function setNewProgress(e:MouseEvent):void {
	var p:int = sndObject.length * e.currentTarget.mouseX / 166;
	chaObject.stop();
	chaObject = sndObject.play(p);
	this.btnPlay.visible = false;
	this.btnPause.visible = true;
}

which is called by

this.progressbar.addEventListener(MouseEvent.CLICK, setNewProgress);

How do I make it click and drag
Thanx,
Sam Rudge

  • 2 Contributors
  • 1 Reply
  • 293 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

A short expert note on making the timeline draggable (builds on the existing posts by and ).

A robust pattern is to track the scrub handle manually on stage MOUSE_MOVE rather than relying only on CLICK or startDrag. While startDrag is fine, manual tracking avoids registration-point/bounds surprises and makes it easy to: clamp the handle to the bar, update the progress fill every frame, and control when the audio is actually re-seeked (live vs. final seek on mouse-up).

Suggested flow (high level):

  • On handle MOUSE_DOWN: set a dragging flag and add stage listeners for MOUSE_MOVE and MOUSE_UP.
  • On MOUSE_MOVE: convert stage coordinates to the bar's local coordinates (use globalToLocal), clamp to [0,width], move the handle and update the fill, call e.updateAfterEvent() for smoother visuals. If doing live seeks, throttle them (e.g., 150–200 ms).
  • On MOUSE_UP: remove listeners, clear dragging flag and perform the final seek (stop current channel and call play(startMs)).

Example (ActionScript 3 — different variable names than earlier posts):

import flash.geom.Point;
import flash.utils.getTimer;

var dragging:Boolean = false;
var lastSeek:int = 0;
var liveSeek:Boolean = false; // set true to seek while dragging
var seekThrottle:int = 150;   // ms

scrubHandle.addEventListener(MouseEvent.MOUSE_DOWN, onScrubStart);

function onScrubStart(e:MouseEvent):void {
  dragging = true;
  stage.addEventListener(MouseEvent.MOUSE_MOVE, onScrubMove);
  stage.addEventListener(MouseEvent.MOUSE_UP, onScrubEnd);
}

function onScrubMove(e:MouseEvent):void {
  var p:Point = progressBar.globalToLocal(new Point(stage.mouseX, stage.mouseY));
  var px:Number = Math.max(0, Math.min(progressBar.width, p.x));
  scrubHandle.x = px;
  progressFill.scaleX = px / progressBar.width;
  e.updateAfterEvent();

  if (liveSeek) {
    var now:int = getTimer();
    if (now - lastSeek > seekThrottle) {
      seekTo(Math.round(soundSource.length * (px / progressBar.width)));
      lastSeek = now;
    }
  }
}

function onScrubEnd(e:MouseEvent):void {
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, onScrubMove);
  stage.removeEventListener(MouseEvent.MOUSE_UP, onScrubEnd);
  dragging = false;
  seekTo(Math.round(soundSource.length * (scrubHandle.x / progressBar.width)));
}

function seekTo(ms:int):void {
  if (currentChannel) currentChannel.stop();
  currentChannel = soundSource.play(ms);
}

Notes and cautions: calling stop/play very frequently can cause audible artifacts or CPU overhead, and Sound.length may be unreliable until the MP3 is fully loaded — for long or progressively-loaded files prefer final seek on MOUSE_UP or reduce liveSeek frequency. While playing normally, use an ENTER_FRAME listener to update the scrubber, but suspend that while dragging so the UI doesn't fight the user.

Member Avatar for Member #334542 
btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

function progressScrubberClicked(e:MouseEvent):void 
{
	bolProgressScrub = true;

	mcProgressScrubber.startDrag(false, new Rectangle(0, 2, 432, 0));
}

function mouseReleased(e:MouseEvent):void 
{
bolProgressScrub = false;
	mcProgressScrubber.stopDrag();
}

Hope this helps! Add the functionality as per your design

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.