bannerScrub

Create Click and Touch Draggable Scrubbers with Edge Animate CC

Ever want to control your timeline animations in Animate with a scrubber? Here’s the sample to do so! Download the below files to learn how to create draggable scrubbers (both horizontal and vertical) so you can drag to control the timeline of symbols in Edge Animate CC. Use this technique to create scrubbable timelines, infographics, guide your audience through a story or anything else you can think of. These samples work for both touch and mouse events so they’re mobile and desktop friendly.

To get started, download the sample files. The code is well commented and broken down to explain how everything works.

View a super simple demo

…and I’ve made two “pretty” sample files which you can view here;

View the Sample File (horizontal scrubber)

View the Sample File (vertical scrubber)

Download All Sample Files

How it Works

(Disclaimer: It’s alllllll code from here)

When you download the sample files, you’ll notice three elements on the stage;

  • scrubber – this is the grabbable element used to drag the timeline
  • bar – this is the region used to constrain the scrub region of the scrubber
  • timelinePlay – this is the symbol timeline which will be controlled by the scrubber

All the code is contained inside the compositionReady event. Let’s break it down.

Several variables are set up which will be used as reference later in the code. Let’s start from the top:

var symDur = sym.getSymbol(“timelinePlay”).getDuration();

Using the Animate getDuration api, we’re able to grab the length of the timeline of the symbol “timelinePlay”. This is used to set the scrubber to control the entire duration of timelinePlay, regardless of the length of the scrubber region itself.

var mySymbol = sym.getSymbol(“timelinePlay”);

This variable is used to reference the symbol “timelinePlay” throughout the code. The following two lines for “scrubber” and “bar” are set to reference those elements.

sym.$(“mobileHit”).hide();

The scrubber was proving to be a little too tiny to consistently grab on mobile, so I created an invisible div (“mobileHit”) to increase the hit region. Sometimes the best solutions are the simplest.

Now for the Fun Stuff

I’ve set several bindings to initiate events for mousedown, mouseup and mousemove. One thing that may stand out is mousedown is bound to the scrubber, while mouseup and mousemove are bound to the document. This is because when bound to the scrubber I was getting undesirable jittery results; binding to the document after initiating the mouseodown event for the scrubber seemed to clear that right up. (*shrug* I don’t get to make the rules).

Let’s Make Some Scrubbing Magic

$(document).mousemove(function (e) { // Make the magic happen on mousemove
if (dragme) {
var possibleX = e.pageX;
var leftX = bar.offset().left;
var rightX = (leftX + bar.width()) – scrubber.width();
var scrubWidth = rightX – leftX;

Translation: When the mouse moves across the x axis of the page, use jQuery .offset to get the position of the bar element. Calculate the width of the bar to define the width of the scrubbable area.


// Confine the scrubber to the width of the bar
if (possibleX < leftX) {
possibleX = leftX;
}

if (possibleX > rightX) {
possibleX = rightX;
}

scrubber.offset({
left: possibleX
});

Translation: Calculate the scrubbable width defined by the bar and confine the scrubber to the width of the bar.

var relativeX = possibleX – leftX;
var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur);
mySymbol.stop(stopTimeline);

Translation: Grab the scrubbable region we just defined and do some math to stop the timeline of “timelinePlay” when the scrubber is released.

Make it Work on Mobile

All the code proceeding the above chunk is essentially duplicated, but to use touch events instead of mouse events. This function is wrapped in the following code:


if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {

Translation: If this is a mobile device, run the code to work for touch events.

In all fairness sniffing out the user agent isn’t always the optimal way to detect mobile vs. desktop, but it’s the method I’ve chosen to use here. If you have another method of preference hack it in!

All the code hereafter is moreorless a duplicate of the above methods but with touch events swapped for mouse.

The best way to learn is by getting your hands dirty, so go ahead and download the sample files and play around for yourself.

Special thanks to Darrell Heath and Jack Pitsker from the Animate community forums for putting together a fair chunk of the code used in these files!


151,756 total views, 1 views today

Posted on November 8, 2013 by Sarah