Using a graphic to scroll the timeline in AS3

Question

Hello.

I have a movieclip with the instance name 'core'. Core contains 500 frames, and from the root timeline I want to be able to click on a movieclip I have with the instance 'scroller' and have it scrub through the 500 frames, forwards or backwards within a confined area.

I have tried a few things like Timelinemax but am having troubles making it work. The timeline has been created manually (without Tweenmax or anything).

Any ideas? I can't find good examples anywhere.

Thanks

Answer 1

Hi,

made a simple example so you can catchup the logic. you can tuneup the scrollRange to the value you need.

import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.events.Event;

var scrollP:Point = new Point(scroller.x,scroller.y);
var scrollRange:int = 100;
var timelineTotalFrames:int = core.totalFrames;
var rect:Rectangle = new Rectangle(scrollP.x,scrollP.y,scrollRange,0);

core.stop();


function onDown(e:MouseEvent):void
{
scroller.startDrag(false, rect );
addEventListener(Event.ENTER_FRAME, onScroll);
}

function onUp(e:MouseEvent):void
{
scroller.stopDrag();
if (hasEventListener(Event.ENTER_FRAME))
removeEventListener(Event.ENTER_FRAME, onScroll);
}

function onScroll(e:Event):void
{
// (scroller.x - scrollP.x) fix if your scroll have a x different from 0
var calcFrame : int = ((scroller.x - scrollP.x) * timelineTotalFrames) / scrollRange;
core.gotoAndStop(calcFrame);
}

scroller.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
scroller.addEventListener(MouseEvent.MOUSE_UP, onUp);
// release mouse outside scroll
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);