PDA

Просмотр полной версии : Создание XML галереи с использованием TweenLite


ColdKeeper
19.02.2010, 00:48
Всем привет!
Подскажите пожалуйста, как мне сделать галерею, у которой картинки бы менялись друг за другом.
В прикреплённом архиве то, что у меня получилось, но работает она немного не так, как мне бы хотелось. Сейчас, нажимаю на кнопку следующей или предыдущей картинки, она быстро пропадает и тут же появляется следующая, а я хочу сделать так, чтобы при нажатии на кнопку например следующей картинки, эта картинка уезжала налево, а следом за ней появлялась ехала новая...
На сколько я понимаю, мне нужно использовать два мувика-контейнера, но чего то я не могу сообразить как их так сделать)
Подскажите кто-нибудь, пожалуйста?

Исходник (http://***********/16484813)

udaaff
19.02.2010, 01:17
а я хочу сделать так, чтобы при нажатии на кнопку например следующей картинки, эта картинка уезжала налево, а следом за ней появлялась ехала новая...
Ну вы начинайте... А мы подмогнем, если что. Исходник тут вряд ли кто-то возьмется за вас переделывать.

ColdKeeper
19.02.2010, 02:10
Да мне не надо его переделывать, я хочу понять как такие действия впринципе организованы... =) Подумал что может быть кто-нибудь хоть на словах приблизительно объяснит алгоритм действия. А исходник прикрепил, потому что мне кажется что так проще понять, что я имею введу=)

А дела у меня обстоят вот так:

XML и его парсинг постить сюда, я думаю не обязательно

У меня на сцене есть мувик-контейнер под названием picture расположенный в левом верхнем углу сцены.
В него загружается первая картинка вот таким кодом
function firstImage() {
TweenLite.to(picture, 1, {_x:0}); //анимирую движение слевой стороны на право до позиции _х = 0
picture._x = 750; //устанавливаю позицию мувика за сценой
picture.loadMovie(image[0], 1);
}

объявляю переменную, которая будет счётчиком
var p = 0;
Эта функцию выполняет у меня роль показа следующей картинки
// Показываем следующую картинку
function nextImage() {
if (p<(total-1)) {
p++;
picture._x = 750 // устанавливаем начальную позицию картинки
TweenLite.to(picture, 1, {_x:0}); // анимация картинки
picture.loadMovie(image[p], 1) //загружаем картинку
}
}
}

Функция отвечающая за показ предыдущего изображения
function prevImage() {
if (p>0) {
p--;
picture._x = -750;
TweenLite.to(picture, 1, {_x:0});
picture.loadMovie(image[p], 1); //загружаем картинку
}
}

Сейчас у меня выходит так, что первая картинка кладётся в мувик picture и выполняется анимация, после нажатия кнопки, в этот же мувик кладётся следующая картинка и опять проигрывается анимация.
Для получения того, что я хочу, мне, получается, нужно добавить второй мувик контейнер, в который бы загружалась сразу вторая картинка, затем, при нажатии на кнопку, проигрывались две анимации одновременно. Вот так я попытался сделать
function firstImage() {
TweenLite.to(picture, 1, {_alpha:100});
picture._alpha = 0;
picture2._x = 750;
picture.loadMovie(image[0], 1);
picture2.loadMovie(image[1], 1);
}
А в функцию появления следующей картинки, написал вот так:
function nextImage() {
TweenLite.to(picture, 1, {_x:-750}); // анимация картинки
if (p<(total-1)) {
p++;
picture2._x = 750
TweenLite.to(picture2, 1, {_x:0});
picture.loadMovie(image[p], 1) //загружаем картинку
picture2.loadMovie(image[p+1], 1) //загружаем картинку
}
}
И теперь у меня получается, что когда я нажимаю на кнопку, чтобы посмотреть следующую картинку, он сразу загружает мне уже 3ю

http://i072.***********/1002/17/954fb7c92f6d.jpg

А если ещё раз нажать, то выглядит вообще вот так

http://i072.***********/1002/8c/1c3e2f90853a.jpg

Где я ошибаюсь?Не пойму никак...

Tochilin
19.02.2010, 03:27
Уверены что TweenLite подключили?

тип того
import gs.TweenLite;
import gs.easing.*;

подозреваю что проблема именно в нем. попробуйте обычный Tween class. Он ничем не хуже.

ColdKeeper
19.02.2010, 11:26
То, что твинлайт подключил это точно, так как одна картинка ездиет)
А вот почему, при нажатии на кнопку показа следующей картинки, эта быстро пропадает, а следующая подъезжает, понять не могу... :(