Slideshow style navigation. addChild & arrays

Question

Was hoping to get some advice here. Having trouble with what would seem to be a basic navigational system for an iPad presentation.

I have, for this example, 5 pages in my library which I've added into an array. The effect I'm aiming for, when the user swipes to go to the next page, it should: - Add the next page to stage using addChild (out of view) - Tween the current page out of view, tween the next page into view - Remove the old page using removeChild.

The reasoning for this is I will have a large amount of pages with heavy animation and I'm trying to avoid having them all present on stage at once to prevent a drop in FPS.

Here is my code so far. I've tried a few things such as trying to re-set currentPage with the array but have had no luck. Been pulling my hair out for a few hours now!

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

//touch device swiping
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeHandler_2);
function fl_SwipeHandler_2(event:TransformGestureEvent):void{
    switch(event.offsetX)
    {
        //swiped right, go back
        case 1:
        {
            prevPage();
            break;
        }
        //swiped left, go forward
        case -1:
        {
            nextPage();
            break;
        }
    }
}

//fill array with movieclip pages from library
var pageArray:Array = [page1, page2, page3, page4, page5];
var currentArray:Number = 0;

//add the first page in the array to the stage as 'currentPage'
var currentPage:MovieClip = new pageArray[currentArray];
addChild(currentPage);

function nextPage(event:TouchEvent):void{
    if (currentArray < pageArray.length - 1){

            //tween currentPage out to the left, when animation ends removeChild(currentPage);
            TweenMax.to(currentPage, 1, {x:-1024,onComplete:removeChild,onCompleteParams:[currentPage]});
            //move to the next item in the array
            currentArray++
            //add the next item in the array to the stage as 'newPage'
            var newPage:MovieClip = new pageArray[currentArray]
            addChild(newPage);
            newPage.x = 1024;
            //tween newPage into view
            TweenMax.to(newPage, 1, {x:0,onComplete:updatePage});

            /*
            PROBLEM STARTS HERE:
            - if nextPage is executed again, it will try to tween 'currentPage' which has been removed from the stage.
            - need to rename/change 'newPage' into 'currentPage' here but don't know how.
            */

    }
}

function prevClicked(event:MouseEvent):void{
    if (currentArray > 0){
        trace("same as nextPage in reverse");
    }
}

EDIT problem solved

So with the help of aesphere and some trial and error, it seems to be working now. One of the main problems was the lack of new and () around the arrays, eg: new page1(), new page2(). etc.

Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, fl_SwipeHandler_2);

function fl_SwipeHandler_2(event:TransformGestureEvent):void
{
    switch (event.offsetX)
    {
        case 1 :
            {
                prevPage();
                break;

            };
        case -1 :
            {
                nextPage();
                break;

        }
    }
};


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


var pageArray:Array = [new page1(), new page2(), new page3(), new page4(), new page5()];
var currentPage:Number = 0;

addChild(pageArray[currentPage]);

function nextPage():void
{
    if (currentPage < pageArray.length - 1)
    {
        TweenMax.to(pageArray[currentPage], 1, {x:-1024, onComplete:removeChild, onCompleteParams:[pageArray[currentPage]]});
        currentPage++;
        pageArray[currentPage].x = 1024;
        addChild(pageArray[currentPage]);
        TweenMax.to(pageArray[currentPage], 1, {x:0});
    }

}

function prevPage():void
{
    if (currentPage > 0)
    {
        TweenMax.to(pageArray[currentPage], 1, {x:1024, onComplete:removeChild, onCompleteParams:[pageArray[currentPage]]});
        currentPage--;
        pageArray[currentPage].x = -1024;
        addChild(pageArray[currentPage]);
        TweenMax.to(pageArray[currentPage], 1, {x:0});
    }
}

Aesphere Aesphere · Accepted Answer · 2012-01-31T04:50:10

A simple navigation between pages should really just use a variable for tracking which page is the current one. You've described what you want to do but you've sort of made things a little more complex than you needed to with your code.

Since you have a counter variable that tracks the current page, you should just use the array of pages you already have to addChild and removeChild as needed, that way you have one point of control where currentPage always refers to the current movieclip on stage within the pageArray.

So from your code:

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

//I like to setup the required assets and variables first, then put everything else below:
//fill array with movieclip pages from library
var pageArray:Array = [page1, page2, page3, page4, page5];
var currentPage:Number = 0;

//Next we add the first page to the stage
addChild(pageArray[currentPage]);

//Now we add the listeners for the functionality
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeHandler_2);
function fl_SwipeHandler_2(event:TransformGestureEvent):void{
    switch(event.offsetX)
    {
        //swiped right, go back
        case 1:
            prevPage();
            break;
        //swiped left, go forward
        case -1:
            nextPage();
            break;
    }
}

//The handlers for the swiping gestures for switch pages
function nextPage(event:TouchEvent):void
{
    //First check if we have a next page or not.
    if (currentPage < pageArray.length - 1){
        //So, we want to move to the next page, we first Tween the current page off to left

        TweenMax.to(pageArray[currentPage], 1, {x:-1024, onComplete:removeChild, onCompleteParams:[pageArray[currentPage]]});
        //Once the Tween starts,increment the page counter, set the starting xpos, addChild
        //and then tween that into place.
        currentPage++;
        pageArray[currentPage].x = 1024;
        addChild(pageArray[currentPage]);
        //Tweening into place then calls the updatePage when tween is complete.
        TweenMax.to(pageArray[currentPage], 1, {x:0, onComplete:updatePage});
    }

}

function prevPage(event:TouchEvent):void
{
    trace('pretty much nextPage but decrementing currentPage plus a check against 0');
}

Hopefully the comments will make sense. Try giving this a go.

Slideshow style navigation. addChild & arrays

EDIT problem solved

1 Answers