Перемещение видеоклипов по сцене в FrameEnter - PullRequest
Новая
       24

Перемещение видеоклипов по сцене в FrameEnter

1 голос
/ 16 ноября 2010

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

Я работаю с пользовательским классом для контейнера (Tiles) и пользовательским классом для миниатюр (ImageIcon).

У меня есть ComboBox, который позволяет пользователям выбирать галерею. Когда пользователь выбирает галерею, запускается следующий код, и миниатюры должны перезагрузиться. Проблема здесь в том, что значки появляются друг над другом, а не рядом, переключение категорий также должно удалять старую (см. Первую для цикла), но это не так. Кроме того, значки не анимируются должным образом. Код анимации также ниже. Прямо сейчас, только одна из иконок будет двигаться. Значки должны перемещаться по порядку из стороны в сторону, останавливаясь, когда последние несколько значков попадают на край экрана, чтобы они не «потерялись» где-то в стороне.

Код загрузчика галереи: 

public function loadCategory(xml:XML = null) {
    if (xml != null) {
        dp = new DataProvider(xml);
        for (var k:int = 0; k < this.numChildren; k++) {
            this.removeChild(this.getChildAt(k));
        }

        var black:DropShadowFilter = new DropShadowFilter(0, 45, 0x000000, 1, 3, 3, 1, 1);
        var white:DropShadowFilter = new DropShadowFilter(0, 45, 0xFFFFFF, 1, 2, 2, 1, 1);

        for (var i:int = 0; i < dp.length; i++) {
            var imgicon:ImageIcon = new ImageIcon();
            imgicon.addEventListener(MouseEvent.CLICK, showImage);
            imgicon.width = 100;
            imgicon.x = (i * (imgicon.width + 20));
            imgicon.path = dp.getItemAt(i).data;
            imgicon.loadIcon();
            imgicon.filters = [black, white];

            stage.addEventListener(Event.ENTER_FRAME, moveIcon);
            this.addChild(imgicon);
        }
    } else {
        //Failed to load XML
    }
}

Код анимации значка: 

public function moveIcon(e:Event){
    var speed = 0;
    speed = Math.floor(Math.abs(this.mouseX/20));

    var image = this.getChildAt(k);

    var imagebox = image.width + 20;

    var edge:Number = (800/2);

    if (this.mouseX > 0) {
        for (var k:int = 0; k < this.numChildren; k++) {
            if (image.x - (imagebox/2) + speed < -edge + (k * imagebox)) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x -= Math.floor(speed);
        }
    } else {
        for (var j = this.numChildren; j >= 0; j--) {
            if (image.x + speed > edge - ((imagebox * j) )) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x += Math.floor(speed);
        }
    }
}

1 Ответ

2 голосов
/ 16 ноября 2010

На мой взгляд, у вас есть три вопроса (вы должны были поставить их в конце своего вопроса вместо " Что не так с моим кодом? "). Один из основных принципов программирования - разбивать проблемы на более мелкие части.

  1. Как мне выстроить ImageIcon рядом друг с другом?
  2. Как убрать старую ImageIcon при переключении категорий?
  3. Как мне анимировать ВСЕ ImageIcon вместе, основываясь на положении мыши, с ограничениями по обе стороны?

Вопрос 1

Я не вижу ничего плохого, но просто проверьте, что при настройке imgicon.x, что imgicon.width действительно установлено.

Вопрос 2

Вместо того чтобы полагаться на numChildren и getChildAt(), я бы создал переменную-член массива currentIcons, а когда вы создаете новый ImageIcon, просто поместите его в массив. Затем, когда вы захотите удалить их, вы можете просто перебрать массив следующим образом: 

for each (var cIcon:ImageIcon in currentIcons) 
{
    cIcon.removeEventListener(MouseEvent.CLICK, showImage);
    removeChild(cIcon);
}
currentIcons = [];

Как видите, я также удаляю всех слушателей, которых добавил. Это лучшая практика. Затем очистите массив после удаления всех значков.

Вопрос 3

Я вижу некоторые вещи не так с вашим кодом. Во-первых, в строке, где установлено image, k еще не установлено!

Здесь вы также можете использовать массив currentIcons, но вы, вероятно, не можете использовать цикл for each in, потому что это дает вам элементы не в порядке. Просто нормальная for петля будет лучше.

Я не тестировал этот код для метода moveIcon, но идея должна работать. Возможно, вам придется настроить его, хотя: 

public function moveIcon(e:Event):void 
{
    var speed:Number = Math.floor(this.mouseX / 20); // Removed "abs".
    var imageBox:Number = currentIcons[0].width;
    var edge:Number = 800 / 2;

    for (var i:int = 0; i < currentIcons.length; i++) 
    {
        var image:ImageIcon = currentIcons[i] as ImageIcon;
        image.x += speed;
        image.rotationY = Math.floor(image.x / 20);

        var min:int = -edge + (i * imagebox);
        if (image.x < min) image.x = min;

        var max:int = edge - (imagebox * i);
        if (image.x > max) image.x = max;
    }
}

РЕДАКТИРОВАТЬ * Извините, оно должно было быть больше, чем в последнем операторе if, но у меня было меньше, чем случайно.

...