Create a Sliding Content with Back and Forward Navigation

In 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.

View DemoDownload Source

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;
	}
}

17 thoughts on “Create a Sliding Content with Back and Forward Navigation

  1. flashnoob

    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

  2. perfect_bytes

    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

  3. admin Post author

    @ 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.

  4. MonsieurMonsieur

    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 !

  5. john

    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 !!

  6. Sigmund

    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

  7. Jenny

    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

  8. AB

    hello! thanks for the post.

    I have a question when i am trying to reference this .swf file within another file. The slideshow content does not seem to have boundaries when viewed in the ‘mother’ file. Is there a slight line of code i’m missing below? archone.swf is the sliding content file. does that make sense? (sorry i too am a newbie..)

    var ldr:Loader = new Loader();

    function onebtnclicked(e:MouseEvent) {
    ldr.unload();
    if (contains(ldr)) {
    removeChild(ldr);
    }
    ldr.load(new URLRequest(“archone.swf”));
    addChild(ldr);
    ldr.x = 450;
    ldr.y = 50;

    }
    one_btn.addEventListener(MouseEvent.CLICK, onebtnclicked);

  9. Vanderknot

    I cannot get this working, the swf is launched, the arrows are totally functional, but whe you press them yo get this in the output:

    Error: Cannot tween a null object.
    at com.greensock::TweenLite()
    at com.greensock::TweenLite$/to()
    at sliding_content_arrows_fla::MainTimeline/navigate()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1006: value no es una función.
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()
    TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo.
    at com.greensock::TweenLite/init()
    at com.greensock::TweenLite/renderTime()
    at com.greensock.core::SimpleTimeline/renderTime()
    at com.greensock::TweenLite$/updateAll()

    Can some one help me??? please

  10. Vanderknot

    sorry I’ve made a mistake that did’nt let me get it work…
    I’ve solved this making the array correctly…
    thanks anyway…

Leave a Reply

Your email address will not be published. Required fields are marked *