Two Way Sliding Carousel

As an animation tool Flash makes linear animations really easy just using the timeline. But what if you want animation to run in both directions in response to user input?

There are of course many approaches that can be taken, but here follows the approach used in our online gallery.

The Approach

The main principle behind this interface is to reduce the burden of administration. We don't want to have to do masses of timeline editing just because some of the items in the carousel change.

The other principle is that while the animation can be linear, we can mimic, or fake a two way animation by spliting the animation in half, and using actionscript to jump around the timeline. Thus, the visual effect is uninterupted interactive animation for the user, though the reality is that we are jumping around the timeline.

The Logic

The logic that makes this possible comes from understanding that we can repeat the same piece of animation over and over, but change the item that is being animated using actionscript.

We do this by making a movieclip, that contains a movieclip of a carousel item sliding along. Then we use arrows to tell the movieclip to play (thus making the carousel item slide). At a certain point in the animation, when the item is off the screen we use actionscript to change the item, so that when the animation completes and the carousel item returns to the screen, a different item is displayed.

We do this by telling the movieclip to change the item at certain stages in the timeline using loadMovie.

The Code


var artifact = 0;
var maxartifact = 20;

_root.next_but.onRelease = function () {
if (artifact <= (maxartifact-1)) { artifact +=1; } else { artifact = 0; } artspot_str = "butset" + artifact + ".swf"; _root.aniartholder_mc.gotoAndPlay(11); } _root.prev_but.onRelease = function () { if (artifact >= 1) {
artifact -=1;
}
else {
artifact = maxartifact;
}
artspot_str = "butset" + artifact + ".swf";
_root.aniartholder_mc.gotoAndPlay(30);
}


This is the main engine to make the buttons trigger the animations, and to make the timeline update the carousel item.

Within the timeline, the code to make the carousel update is as follows:


//Increment
_root.aniartholder_mc.artholder_mc.loadMovie(_root.artspot_str,"GET");
gotoAndPlay(1);


And:


//Decrement
_root.aniartholder_mc.artholder_mc.loadMovie(_root.artspot_str,"GET");
gotoAndPlay("prev");


See you tutor for further instructions.