Навигация в стиле слайд-шоу.addChild & arrays

Question

Хотел получить здесь совет. Возникли проблемы с тем, что может показаться базовой навигационной системой для презентации iPad.

В этом примере в моей библиотеке 5 страниц, которые я добавил в массив. Эффект, к которому я стремлюсь, когда пользователь перемещается для перехода на следующую страницу, должен: - Добавить следующую страницу на сцену, используя addChild (вне поля зрения) - Поворот текущей страницы вне поля зрения, переход между следующей страницей в поле зрения. - Удалите старую страницу, используя removeChild.

Причина в том, что у меня будет большое количество страниц с тяжелой анимацией, и я стараюсь избегать их одновременного присутствия на сцене, чтобы предотвратить падение FPS.

Вот мой код. Я пробовал несколько вещей, таких как попытка переустановить currentPage с массивом, но мне не повезло. Уже несколько часов тяну меня за волосы!

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

Проблема РЕДАКТИРОВАНИЯ решена

Итак, с помощью aesphere и некоторых проб и ошибок, похоже, теперь это работает. Одной из основных проблем было отсутствие new и () вокруг массивов, например: new page1 (), new page2 (). и т.д.

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

Answer 1

Простая навигация между страницами должна просто использовать переменную для отслеживания того, какая страница является текущей. Вы описали, что хотите сделать, но с помощью своего кода вы сделали вещи немного более сложными, чем нужно.

Поскольку у вас есть переменная счетчика, которая отслеживает текущую страницу, вы должны просто использовать массив страниц, которые вам уже нужны, для добавления addChild и removeChild по мере необходимости, таким образом, у вас есть одна точка управления, где currentPage всегда ссылается на текущий мувиклип на этап внутри массива страниц.

Итак, из вашего кода:

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

Надеюсь, комментарии будут иметь смысл. Попробуйте попробовать.