Jump to content


AS3 Tweenlite Image/Movieclip scroller

Recommended Posts

Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip.

I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code:

import flash.display.MovieClip;
import flash.events.MouseEvent;
import com.greensock.*;
import com.greensock.easing.*;

function init():void {
	TweenLite.to(products_mc, 1, {x:696, alpha:1});


function productsLeft(events:MouseEvent):void {
	TweenLite.to(products_mc, .75, {x:"-255"});

function productsRight(events:MouseEvent):void {
	TweenLite.to(products_mc, .75, {x:"255"});

arrowL_btn.buttonMode = true;
arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft);

arrowR_btn.buttonMode = true;
arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight);

if (products_mc.x == 696) {
	arrowR_btn.visible = false;
	arrowR_btn.buttonMode = false;

if (products_mc.x == -1086) {
	arrowL_btn.visible = false;
	arrowL_btn.buttonMode = false;

/* buttons */

arrowL_btn.doubleClickEnabled = true;
arrowR_btn.doubleClickEnabled = true; 

arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); 
arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); 

function doubleClickHandler(evt:MouseEvent):void {
Link to comment
Share on other sites

Try using indexes for your MovieClips instead of just relying on relative positions (which would break if you clicked the button again before the tween finished anyway).

var currentMC = 0;
var maxMC = 10; // count of MovieClips -1

function productsLeft(events:MouseEvent):void {
	if (currentMC < 0) currentMC = maxMC;
	TweenLite.to(products_mc, .75, {x:currentMC * 255});

function productsRight(events:MouseEvent):void {
	if (currentMC > maxMC) currentMC = 0;
	TweenLite.to(products_mc, .75, {x:currentMC * 255});
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.