Create a Sliding Content with Back and Forward Navigation

November 1st, 2009 in Flash

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;
	}
}
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(11 Comments)

+ Add a Comment
  1. flashnoob
    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

  2. coder
    Nov 3rd, 2009

    yeah great but what about when the user has flash disabled ? no good :-(

  3. perfect_bytes
    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

  4. admin
    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.

  5. Curtis
    Nov 19th, 2009

    FYI, to Import the tween lib

    Line 1. import gs.*;

    should now be import com.greensock.*;

  6. MonsieurMonsieur
    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 !

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

  8. Sigmund
    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

  9. kedar
    Jan 9th, 2010

    Thanks for AS3 Tutorial
    Please provide tutorial of AS2

  10. Jenny
    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

  11. Projektowanie
    Feb 5th, 2010

    i cant get this workin… probably sth wrong in my code… sht

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website