Adobe Edge animation controlled by the scrollbar! its easy and fun.

How to make your animation controlled by the scrollbar in Adobe Edge Preview 3:

Adobe edge is a great HTML 5 editing tool, and with a few tweaks I think it will end up being the best html5/javascript/jquery tool on the market for professionals looking to create highly interactive non-flash interactive animations. I've been a flash programmer for 14 years now, and I actually enjoy working on the timeline so Adobe Edge is a lot more creatively satisfying than working with eclipse to make "interactive art", at least for me.

In this example I made an animation in Adobe Edge that the user "Scrubs through" with the scrollbar instead of it just playing automatically as is the default for Adobe Edge. I think its a good way to introduce the lay person to the concept of scrubbing a playhead through time, and would make a neat "popup book" for kids with a simple approach like this as it is a different use of a familiar UI element, the scrollbar. As a flash user, I've always hated scrollbars because I think information should be presented in one place using time/animation rather than making the user scroll through it, but I have built them from scratch in flash AS3 (see previous post) and this makes for an interesting continued experiment with the things.

Example (drag the scrollbar to advance the animation)
http://www.northeastmagic.com/adobeEdge/scrollbar_scrubber/test7.html

Allowing the user to scrub through your html5 animation created in Adobe Edge allows them to have a "popup book" feel of control over your work, making it interesting to play with. Scrolling is a familiar control interface but using it as a playhead scrubber opens up a new realm of possibility to the user unfamiliar with animation development. Note: the animation has to be wider than the users's viewport or this wont work - so you designers with huge monitors will have to shrink the window down a bit...

From an animator perspective, try to make your animation in segments that can be easily divided into the physical width of the artwork (or height if you are vertically scrolling). So for example a 4 second animation could be 2000px wide, and you basically do 1 scene inside 500px, bearing in mind that animation occurring in the left side will not be visible as the user scrolls through the piece. (Per second you allow 500px for that "second's" scene. Its a weird way to think about animation but hopefully thinking of it this way will help.

As of writing this article, Adobe Edge preview 3 is fairly buggy, for example trying to work with objects that go beyond the right side of the viewable area is problematic since the selection tools basically become unavailable when you scroll. My workaround for that was to do the animation in the viewable area first, then move the playback head to 0:00, then translate the x of the animated objects to the far right as far as I could without losing selection. Interestingly when you translate an object while the playhead is at 0, it affects all keyframes of the object, so this seemed to be a workaround for now. Hopefully adobe will address this, as well as adding the ability to set the width/height with percentages instead of px, and individually control the overflow handling of the vertical and horizontal scrollbars.

1. add a trigger to the beginning of the animaton this.stop();

2. add a "scroll" event to the stage top right. paste the following code in there

// insert code for scroll event here
var myCalc=this.element.scrollLeft/(this.element.scrollWidth-this.element.clientWidth);
this.stop(myCalc*this.getDuration());

3. make the animation etc. work at the full width. Make a note of the stage width you picked (2000px etc.) top left.

4. when finished save, leave edge and look in the files it created.

5. Open the one called "MYFILENAME_edge.js" in dreamweaver

6. do a find for "2000px" or whatever the width was that you picked. .... replace width value with "100%"

something like : id: "eid1", tween: [ "style", "${_stage}", "width", '100%',

is the important one. There should only be 1 _stage line. If there is more you've tweened the stage and you should remove them.

7. if you are scrolling horizontally you'll need to hide the vertical scroller like this:


one of the objects should have a stage object, add the overflow-x and overflow-y appropriately:

"${_stage}": [
["color", "background-color", 'rgba(12,12,13,1.00)'],
["style", "width", '500px'],
["style", "height", '400px'],
["style", "overflow-y", 'hidden'],
["style", "overflow-x", 'auto']
],

REALLY IMPORTANT, dont forget to make sure there are commas between each line and NOT one on the end of the last line

if you want to vertical scroll, use overflow-y auto and overflow-x hidden, and set the height to 100%. You can also set both height and width to 100% to push the scrollbar to the bottom of the frame.

I still think flash is far more advanced of a tool for animation and rich internet applications, but given the landscape of politics these days with iOS refusing to allow flash for their own inane reasons, we can learn to "build a ferrari with toothpicks" and use HTML 5 / javascript to appease the ignorant "flash haters" out there.

About the author:
Ryan Cameron is CTO of SweetRush inc., a SanFrancisco based e-learning and interactive technology development company. Ryan works virtually and lives in Nova Scotia, Canada.