A Coda/JQuery style Flash slider tutorial
Sunday, March 1st, 2009
A good sign to write a quick tutorial is when you couldn’t find anything in a couple of Google searches for the problem you where trying to solve.
For a recent design I have been working on (see below) I had to create a Coda/JQuery style sliding panel to display extended information on the homepage, the one caveat being it needed to be in Flash so I could animate the chatacters and the text on each slide. No problem I thought, that was pretty easy to in ActionScript 2, but I have been polishing up on my ActionScript3 at the moment whilst doing some flex work so what better time to write something from scratch.
You can download the full source code for this here.
We are going to nest 4 movie clips within a container movie clip, we then use this container to reference for the sliding action. So firstly create the four individual movie clips on Layer One and give each one an instance name (this is very important to reference in the actionscript). I have named them ‘movieClipOne’ etc all the way up to 4. Line these up side by side on the stage with the furthest left box sitting in the document window. Then create a move clip from all four and give this an instance name of ‘container’. Now you should have five movie clips in total in your library.
The next stage is to create a mask so we can only see one of the clips at a time, create a second layer, draw a square over the first movie clip that is the size of the document window, right click on this layer and choose mask. Now only one of the movie clips will be visible on the stage.
Next create a third layer, here we will create our buttons to tie the actionscript to. Create a next and previous button and add these to the stage as shown in the screenshot. Now we have the basis for the sliding action we can move on to add the actionscript.
We are going to add event listeners to our buttons that will execute a function to tell the ‘container’ to slide along the x axis the amount of the child movie clip. Event listeners (also called event handlers) are functions that Flash player will execute in response to specific events that we set. We will also use the Flash ‘tween’ class to slide the content rather than just jump.
Add another layer to your flash document, we will use this for the actionscript. To start with add two event listeners, as shown below, plus two empty functions. This will be an event of type MOUSE_EVENT, that on mouse click will then execute the function for the previous and next slide.
nextButton.addEventListener(MouseEvent.CLICK, rightSlideHandler);
prevButton.addEventListener(MouseEvent.CLICK, leftSlideHandler);
function rightSlideHandler(myEvent:MouseEvent):void {}
function leftSlideHandler(myEvent:MouseEvent):void {}
The next step is to create some variables to use within our functions, we need to calculate the width of the ‘container’ movie clip, then divide this by 4 to get the width of each movie clip, then set a variable of how much the slide should be, so…
var holder = container.width;
var movieClipWidth = (holder/4);
var movieClipMove = -1*boxPrev;
Now we can start to write our functions, the first thing we need to do here is import the flash tween classes to slide the movie clip, so add these at the top of your actions window…
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
Then in the functions we can now create the tweens, we have also created another variable for the ‘container’ movie clip current ‘x’ position, the we can use this in the tween to calculate the distance to move. Also as a future proof feature we create another function that disables the current button whilst the tween is running to stop people multiple clicking on the buttons.
function rightSlideHandler(myEvent:MouseEvent):void {
var movieClipCurrent = container.x;
var myTweenNext:Tween = new Tween(classroom_Holder,"x",Regular.easeInOut,container.x,movieClipCurrent + movieClipMove,1,true);
myTweenNext.addEventListener(TweenEvent.MOTION_FINISH, onComplete);
}
function leftSlideHandler(myEvent:MouseEvent):void{
var movieClipCurrent = classroom_Holder.x;
var myTweenPrev:Tween = new Tween(classroom_Holder,"x",Regular.easeInOut,container.x,movieClipCurrent + movieClipWidth,1,true);
myTweenPrev.addEventListener(TweenEvent.MOTION_FINISH, onComplete);
}
function onComplete(evt : TweenEvent):void {
nextButton.addEventListener(MouseEvent.CLICK, rightSlideHandler);
prevButton.addEventListener(MouseEvent.CLICK, leftSlideHandler);
}
This now gives us the basic functionality to slide our panels, so now if you test your flash movie you should be able to slide the ‘container’ movie clip back and forward the width of the child clips! Horray! But, there are still some small improvements we can make to improve the usability. We really don’t want to show the buttons when you hit the end of the movie, otherwise the user will think there is more content. So on initial load of the movie we hide the ‘Previous button’.
prevButton.visible = false;
This sits outside the main functions, but we also need to create ‘if’ statements within our right and left functions to remove the buttons once an event has occurred. Within the ‘nextButton’ function we would add…
prevButton.visible = true;
if (container.x < movieClipMove) {
nextButton.visible = false;
}
This tells the previous button to be visible as soon as the next button is clicked, and also to remove the next button from the stage if the containers x position is less than the value of the variable 'movieClipMove'. We then have to reverse this for the previous button function.
nextButton.visible = true;
if (container.x > movieClipMove) {
prevButton.visible = false;
}
So now your full actionscript code should be the following, and the sliding should work like a charm! Here is an example.
//Import the sliding classes
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
//Set up our initial variables
var holder = container.width;
var movieClipWidth = (holder/4);
var movieClipMove = -1*movieClipWidth;
//Hide the previous button on first load
prevButton.visible = false;
//Set up our functions
nextButton.addEventListener(MouseEvent.CLICK, rightSlideHandler);
prevButton.addEventListener(MouseEvent.CLICK, leftSlideHandler);
function rightSlideHandler(myEvent:MouseEvent):void {
var movieClipCurrent = container.x;
var myTweenNext:Tween = new Tween(container,"x",Regular.easeInOut,container.x,movieClipCurrent + movieClipMove,1,true);
myTweenNext.addEventListener(TweenEvent.MOTION_FINISH, onComplete);
prevButton.visible = true;
if (container.x < movieClipMove) {
nextButton.visible = false;
}
}
function leftSlideHandler(myEvent:MouseEvent):void{
var movieClipCurrent = container.x;
var myTweenPrev:Tween = new Tween(container,"x",Regular.easeInOut,container.x,movieClipCurrent + movieClipWidth,1,true);
myTweenPrev.addEventListener(TweenEvent.MOTION_FINISH, onComplete);
nextButton.visible = true;
if (container.x > movieClipMove) {
prevButton.visible = false;
}
}
function onComplete(evt : TweenEvent):void {
nextButton.addEventListener(MouseEvent.CLICK, rightSlideHandler);
prevButton.addEventListener(MouseEvent.CLICK, leftSlideHandler);
}
You can download the full source code for this here to make the above a bit more clear. Enjoy.
Download Vcard
March 4th, 2009 at 10:55 am
Total n00b question, but how do I customize this to work with a e.g. three movieClips?
[argh, used my email as name in the previous post - please moderate this post instead :S]
March 4th, 2009 at 11:35 am
Hi Tim,
This variable:
var movieClipWidth = (holder/4);
Says the child movie clip widths are the holder container divided by 4, so you can just change this to 3 and it will work.
Adding a trace(movieClipWidth); within one of the sliding functions should return you a width the size of your movie clips in the the console.
March 5th, 2009 at 9:12 am
Thanks for helping me out!
Had to use a fixed integer instead of movieClipMove to hide the buttons in the if-statement, to get it to work properly.
Absolutely beautiful site btw
March 5th, 2009 at 10:19 am
Thanks. Really enjoying the typography on your work, lovely site as well.
Yeah that makes sense actually. That was one bit I was having some trouble with initially.
March 23rd, 2009 at 7:28 pm
Hi!
Want to use the slider with more than 4 movieclips. I changed eg. the movieClipWidth to holder/8. Everything works fine until I get to my fourth movieclip. The next button suddenly vanishes. If I delete these line: if (container.x < movieClipMove) { nextButton.visible = false;} I get through to the 8th movieclip. The next button is obviously still there and when I click on it I get to a lot of white pages. Not what I want either.
How can I fix it that I get through to the last movieclip without having a next button on it?
Help would be appreciated!
March 23rd, 2009 at 8:37 pm
Hey, no worries. I figured it out myself. All I had to do is change movieClipMove to a negative integer.
Again, thanks for sharing your work with us!
March 23rd, 2009 at 9:07 pm
You beat me to the answer, I should have added how to expand this for multiple clips, but the answers are here now
Glad it helped.
April 15th, 2009 at 1:40 pm
No questions regarding your explanations. I suppose it will be clear even to beginners.
April 15th, 2009 at 7:02 pm
I am having 1 problem. After loading. And after the Next button is clicked once (MC2) is on stage. Then Previous button clicked (MC1) on stage.
The Prev button should not be visible, because there is not another MC in that direction. I used your code here on the site. I could not open the fla. Yet my container does not work as yours does. Any idea what I am doing wrong.
May 4th, 2009 at 4:07 pm
Nice tutorial…thanks a lot dude…
August 14th, 2009 at 12:00 am
Hey there olliekav,
I’m loving this tutorial. It looks really cleanly coded, and it looks like it’s gonna do exactly what I need… however, I actually have 15 movieclips to slide through, and I’m getting the disappearing ‘Next’ button after the 4th mc. (a la Jason’s comments above)
I read the other comments about doing 3 mc’s, and Jason’s 8 mc’s, and I’m not quite understanding the negative integer thing?
I’ve changed this:
var movieClipWidth = (holder/4);
to:
var movieClipWidth = (holder/15);
So it moves the container the proper distance, which is great, but there’s still the 4 mc ‘Next’ button issue.
I tried deleting the if statement, and that let me go through all 15, but like Jason said, you can blow right past into white space. So I put the if statement back in.
I tried changing this:
if (container.x < movieClipMove) {
to:
if (container.x < 11100) {
and it didn’t work. (my 15 mc’s are each 740 px wide… so, 15 x 740 = 11100)
I’m sorry if I’m being totally dense here, but any help you could provide would be very much appreciated.
August 14th, 2009 at 8:52 am
Rizz,
I will have a look at you question over the weekend and get back to you.
August 14th, 2009 at 8:29 pm
I got it. I added a trace within each ‘if’ statement that traced out the “container.x” value, which gave me the position of the 11100 pixel container movieclip.
This allowed me to then replace the movieClipMove variable in the if statements with the fixed integer that timkl was referencing above. (In my case it was -8880 for the Next button, and -1480 for the previous button.) And alakazam, it worked! Flawlessly!
I realize putting hard-coded values into a AS3 file goes against the whole philosophy… but I need this for a client deadline… and it works… so I’m gonna go with it.
Thanks so much for putting this great tutorial and source file out there.
Here is my final actionscript:
//Import the sliding classes
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
//Set up our initial variables
var holder = container.width;
var movieClipWidth = (holder/15);
var movieClipMove = -1*movieClipWidth;
//Hide the previous button on first load
prevButton.visible = false;
//Button click functions
nextButton.addEventListener(MouseEvent.CLICK, rightSlideHandler);
prevButton.addEventListener(MouseEvent.CLICK, leftSlideHandler);
//Right Slide
function rightSlideHandler(myEvent:MouseEvent):void {
var movieClipCurrent = container.x;
var myTweenNext:Tween = new Tween(container,”x”,Regular.easeInOut,container.x,movieClipCurrent+movieClipMove,1,true);
myTweenNext.addEventListener(TweenEvent.MOTION_FINISH, onComplete);
prevButton.visible = true;
if (container.x -1480) {
prevButton.visible = false;
}
trace(container.x);
}
//Complete function
function onComplete(evt : TweenEvent):void {
nextButton.addEventListener(MouseEvent.CLICK, rightSlideHandler);
prevButton.addEventListener(MouseEvent.CLICK, leftSlideHandler);
}
August 14th, 2009 at 10:27 pm
Needs must, agreed. Thanks for putting your solution up rizz. If I get a chance I will look at is this weekend.
August 14th, 2009 at 10:53 pm
Sure, no problem. Glad to help others.
Additional question… Just wondering if you have any thoughts on a way to make the buttons not-buttons during the slide animation? Because if they are clicked during the slide, they get out of alignment. (I was thinking of calling some sort of negative addEventListener in each SlideHandler functions? But haven’t got a clue what could be called?)
August 18th, 2009 at 4:48 pm
I got it figured out. All I had to do was add a “removeEventListener” inside the Slide Function. I’ve pasted the final Slide Functions below. Hope this helps anyone looking to use this great tutorial.
Thanks again olliekav,
Rizz
//Right Slide
function rightSlideHandler(myEvent:MouseEvent):void {
var movieClipCurrent = container.x;
var myTweenNext:Tween = new Tween(container,”x”,Regular.easeInOut,container.x,movieClipCurrent+movieClipMove,1,true);
nextButton.removeEventListener(MouseEvent.CLICK, rightSlideHandler);
myTweenNext.addEventListener(TweenEvent.MOTION_FINISH, onComplete);
prevButton.visible = true;
if (container.x -760) {
prevButton.visible = false;
}
}
August 18th, 2009 at 7:57 pm
Thanks for the best tutorial on the sliding transitions I could find. I ended up getting this to work for 6 slide transitions by changing the if (container.x < movieClipMove) { nextButton.visible = false;}
movieClipMove needs to be changed to – (5 times your movie clip width) in my case -2760.
I still feel like there’s a much easier way to do this though. Any other suggestions?
August 19th, 2009 at 3:22 pm
Thanks for all the comments and advice Rizz and Chris. I have been to busy currently to have a look again. I agree there will be an easier way for increasing the amount of clips easier. I will have a look soon I promise as it bugs me when something I wrote doesn’t scale easily
November 9th, 2009 at 11:11 pm
Is it possible to loop to the first slide at the end instead of the “next” button disappearing on the last slide (so there would be continuous sliding).
November 10th, 2009 at 1:19 am
I didn’t write it with that in mind. Just trying to rack my brain for an answer. Let me get back to you.
February 26th, 2010 at 3:27 pm
Help is to be appreciated
March 2nd, 2010 at 12:17 am
seems that the file is down, would love to see the file up again
March 2nd, 2010 at 8:58 am
Just re-uploaded this for any one after the source code.
March 9th, 2010 at 9:16 pm
what adjustment has to be made to remove 1 movie clip..so instead of 4 they’ll only be 3 slides?