Create a Sliding Content with Back and Forward Navigation
November 1st, 2009 in Flash | 13 CommentsIn this tutorial, learn how to create a sliding content that the user can navigate through using back and forward navigation arrows.
This tutorial will use actionsript 3 as usual and the Tweenlite engine.
1. Create a new flash file (Actionscript 3.0) and save it as sliding_content_arrows.fla.
2. Rename “layer 1″ to “content”. On this layer create the content that you will slide. In our case we align 4 images.
Convert the content to “content_mc” with registration point at the top left.
3. We have to determine the different values that the x property of content_mc can take so that the we can slide to each image.
In our case, as the stage and the images are all 400 pixels large, content_mc’s x property will take the values 0, -400, -800, -1200.
4. Create a new “arrows” layer. On this layer, create a right and a left arrow and convert them to movie clip.
Give them instance name of “left_mc” and “right_mc”.
5. We’ll use the Tweenlite engine so first if you don’t already have it go to http://blog.greensock.com/tweenliteas3/ to download it.
Extract the zip file and get the gs directory. Place this directory at the same level of your flash file.
6. Create a new “actions” layer and open the actions panel.
In order to use the TweenLite engine write the following statement:
import gs.*;
7. Next declare an arrays that contains the different values that the content_mc’s x property will take.
Declare a currentIndex variable and set its value to 0.
Add click event listeners to the arrows and set their button mode to true.
var arrayX :Array = [0,-400,-800,-1200]; var currentIndex : Number = 0; left_mc.addEventListener(MouseEvent.CLICK,navigate); right_mc.addEventListener(MouseEvent.CLICK,navigate); left_mc.buttonMode = true; right_mc.buttonMode = true;
8. Before writing the navigate function, create a checkArrows function that determines whether the right and the left arrow should be visible according to the value of currentIndex.
function checkArrows():void{
if(currentIndex == 0) left_mc.visible = false;
else if (currentIndex == arrayX.length - 1) right_mc.visible = false;
else{
left_mc.visible = true;
right_mc.visible= true;
}
}
9. In the navigate function, first we check which arrow is clicked and accordingly change the currentIndex value.
Next we call the checkArrows function and finally we use Tweenlite to set the x property of “content_mc” to its new value.
function navigate(e:MouseEvent):void{
if(e.currentTarget == left_mc) currentIndex --;
else currentIndex ++;
checkArrows();
TweenLite.to(content_mc,.5 ,{x:arrayX[currentIndex]});
}
10. Finally we also call the checkArrows function at the beginning so that the left arrow isn’t visible.
Here’s the final code, test your movie to see it in action.
import gs.*;
var arrayX :Array = [0,-400,-800,-1200];
var currentIndex : Number = 0;
left_mc.addEventListener(MouseEvent.CLICK,navigate);
right_mc.addEventListener(MouseEvent.CLICK,navigate);
left_mc.buttonMode = true;
right_mc.buttonMode = true;
checkArrows();
function navigate(e:MouseEvent):void{
if(e.currentTarget == left_mc) currentIndex --;
else currentIndex ++;
checkArrows();
TweenLite.to(content_mc,.5 ,{x:arrayX[currentIndex]});
}
function checkArrows():void{
if(currentIndex == 0) left_mc.visible = false;
else if (currentIndex == arrayX.length - 1) right_mc.visible = false;
else{
left_mc.visible = true;
right_mc.visible= true;
}
}
Nov 3rd, 2009
Thanks for the tutorial. I am new to flash and AS3, and this tutorial really good. Easy to understand even for beginner like. Really appreciate your efforts in writing this awesome tutorials, demo and download the source files to study.
May I know, can we use your codes? I mean, private and commercial use?
Again, I look forward to your next tutorials. Hope it does not have me wait too long, jk =)
Best,
Flash Noobie
Nov 3rd, 2009
yeah great but what about when the user has flash disabled ? no good
Nov 10th, 2009
thanks for tutorial….as im newbie……pakage i think had been renamed to ‘greensock’, typing ‘import greensock .*; was successful….but compiler showed 4 errors:
tweenlite.as line 157
1017: The definition of base class TweenCore was not found.
public class TweenLite extends TweenCore {
tweenlite.as line 396
1020: Method marked override must override another method.
override public function renderTime(time:Number, suppressEvents:Boolean=false, force:Boolean=false):void {
tweenlite.as line 509
1020: Method marked override must override another method.
override public function invalidate():void {
tweenlite.as line 520
1020: Method marked override must override another method.
override public function setEnabled(enabled:Boolean, ignoreTimeline:Boolean=false):Boolean {
nb: im using fl cs3.
thanks
Nov 11th, 2009
@ FLASHNOOB:
You can use our code for your personnal and commercial projects but you can’t resale them or redistribute them (see our terms of use at the footer)
@ PERFECT_BYTES :
yes we didn’t use the updated version. However this is exaclty the same code you just need to
import the new package: import com.greensock.*;
As for your errors it seems that you have removed the core files.
Nov 19th, 2009
FYI, to Import the tween lib
Line 1. import gs.*;
should now be import com.greensock.*;
Dec 2nd, 2009
Hi,
Thanks for this great post.
I’d like to know if there’s a way to make an automatic slideshow with this one, leaving the arrows out and playing the pictures with a timer ?
thanks !
Dec 15th, 2009
Great Job !
But I’ve got 2 errors …
1120: Access propriety not define TweenLite.
TweenLite.to(content_mc,.5 ,{x:arrayX[currentIndex]});
1120: Access propriety not define content_mc.
TweenLite.to(content_mc,.5 ,{x:arrayX[currentIndex]});
Can you help me ?
Thanks !!
Dec 17th, 2009
Cool that you publish and share, but it is a very “cheap” way to get the desired result
very clutsy.
Do you know how to have a folder with alot of pictures (that are going to slide) but without going into flash update the slideshow?
If you do please contact me
kamuell@gmail.com
Jan 9th, 2010
Thanks for AS3 Tutorial
Please provide tutorial of AS2
Jan 11th, 2010
Hi!
I desperately need this to work for a project, but when I download the fla-file, and test the movie, the arrows doesn’t work. I’ve tried exchanging the “Line 1. import gs.*;
should now be import com.greensock.*;” but without results. Strange cause I tried downloaded the tutorial “Create a sliding content in flash” and tested the movie the same way and it worked perfectly.
What is wrong?
Jenny
Feb 5th, 2010
i cant get this workin… probably sth wrong in my code… sht
Feb 16th, 2010
Same problem as John had
1120: Access of undefined property TweenLite.
Someone plt help!!!
Feb 17th, 2010
thanks for this post