Что лучше использовать для анимации фона сайта

Kasja Lisenova · 01.05.2010, 20:20

Здравствуйте, уважаемые!

Я дезигнер. Изучаю флеш совсем недавно. Знакомые попросили сделать сайт-презентацию. Сайт представляет из себя панораму, которая двигается при кликаньи по кнопкам. Панорама-фон - это большой мувиклип, размером 3000 x 1500 px, в нем множество векторных объектов. Вес swf-ки 219 кб. Используется CS4.
Я делаю самое простое, что знаю: создаю листнеры для кнопок, клик вызывает функцию, которая запускает tween. Проблема в том, что фон двигается рывками. Разные fps ничего не дают(не знаю, fps влияет ли вообще на твин-анимацию?

у меня нет) Попытка cache as bitmap делает анимацию трясущейся. Координаты стоят целые.

Извините, я знаю, что тема рывков тут поднималась неоднократно, но в существующих темах такие описания, что я не врубаюсь. Из того, что мною тут прочитано, делаю выводы: 1. Есть всякие движки TweenLite, TweenMax и т.д. 2. Можно сделать анимацию с помощью события ENTER_FRAME или таймера. 3. Еще можно как-то использовать setInterval.

Пожалуйста, подскажите чайнику, что из этого может помочь сделать анимацию плавной в моем случае, что лучше использовать? Может, лучше не отображать сразу все объекты одним клипом, а по мере необходимости? Необходимо ли использовать классы для такого сайта? 219 кб - это не слишком много для сайта? Плиз, помогите! Моя благодарность будет безграничной!!

Psycho Tiger · 01.05.2010, 21:21

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

Код AS3:

x=Math.round(x);

Да, отображать лучше по отдельности, нежели цельным клипом.

219 кб для сайта... Как вам сказать. Сайт в 3000 кб считается достаточно "лёгким" для флеш-сайта.

iflamberg · 01.05.2010, 21:31

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

Kasja Lisenova · 01.05.2010, 22:03

Спасибо большое за дружелюбные ответы!

Вот ссылка на свф:http://narod.ru/disk/20307379000/%D0...D0%B0.swf.html
Это просто макет, и там работают только кнопки "влево" и "вправо", как видите, анимация рвется. Теперь эта проблема не отпускает меня. Там движутся два мувика, pered_mc и zad_mc. Они не анимированны(в смысле внутри нет анимации)

Psycho Tiger,спасибо! Покопаю в сторону TweenLite. Вы меня успокоили насчет размера!) Координаты пока вручную округлены

Не судите строго за ламерство! Код у меня пока прям во фла файле написан, вот такой:

Код AS3:

levo_btn.addEventListener(MouseEvent.CLICK, moveLeft);
function moveLeft(e:MouseEvent):void {
	var levo1Tween:Tween=new Tween(pered_mc,"x",Regular.easeIn,pered_mc.x,1580,8,true);
	var levo2Tween:Tween=new Tween(zad_mc,"x",Regular.easeIn,zad_mc.x,1240,8,true);
}
 
pravo_btn.addEventListener(MouseEvent.CLICK, moveRight);
function moveRight(e:MouseEvent):void {
	var pravo1Tween:Tween=new Tween(pered_mc,"x",Regular.easeIn,pered_mc.x,-320,8,true);
	var pravo2Tween:Tween=new Tween(zad_mc,"x",Regular.easeIn,zad_mc.x,90,8,true);
}

Наверно, для кода лучше создать as файл? Я очень чайнег!

mikhailk · 01.05.2010, 22:11

Мое наблюдение за флешплеерами показывает, что чем меньше они думают, тем лучше для всех. Попробуйте оставить только фон и не грузить анимированные объекты и добиться плавного перемещения фона. 3000х1500 - это очень большой размер. Могу сказать, что круговая панорама 2х1700х500 двигается плавно даже при нескольких анимированных объектах, но увеличение их количества сказывается на плавности движения.

Если фон сам по себе не будет двигаться плавно - облегчайте фон.

Написал до того, как посмотрел флэшку.
Боюсь, просто замена Tween на TweenLite не поможет.

ЗЫ. Сделал макетик на Вашем коде (единственно, поставил None.easeNone). 2500х1500. При банальном изображении (накидал разноцветных прямоугольников), проблем с плавностью нет. Так что дело в изображении.

iflamberg · 01.05.2010, 22:27

вроде анимации в фонах у вас и нет. cacheAsBitmap должен помогать. Размер конечно, большой очень. И вектор достаточно детализированный. Возможно, если не упращать сцену, нужно будет вектор отрисовывать в битмап, резать этот битмап на небольшие кусочки, чтобы отображать на сцене только нужные.

mikhailk · 01.05.2010, 22:41

Вот макетик на коде автора:

http://mikhailk.ru/testing/panorama.html
2500х1500 очень простое изображение, но уже, очевидно, на пределе.

Я бы пересмотрел техзадание в сторону упрощения.
И по-любому надо работать над изображением.

Kasja Lisenova · 01.05.2010, 23:19

Спасибо вам всем огромное!

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

iflamberg, кэширование в битмап действительно делает более плавным, только очень трясущимся! Может, у меня завышенные требования к флешу...) Попробую сделать растр

mikhailk, спасибо что уделили мне свое время! Действительно огромный размер. Я попробую укоротить его, выкину какие-нибудь деревья)

Вы меня очень воодушевили!

iflamberg · 01.05.2010, 23:47

та флешка, что вы выложили она с включенным cacheAsBitmap? Если нет, то выложите куда-нить со включенным, потому что от фразы "делает более плавным, только очень трясущимся" кипит мозг =)

N1KY · 02.05.2010, 00:07

фон красивый!

) Конечно лучше всего не векторами это все отображать а растром (ну т.е. обычными *.jpg картинками к примеру). Главное разбить на куски и не держать весь этот фон полностью в памяти. Это все в принципе простенько, но ... вы должны хоть как-то разбираться в программировании

) Сам я в принципе тоже дезигнер, но в универе на технич. специальности учился и с программированием знаком хорошо, но даже когда начал изучать AS3, в начале совсем ничего не понимал.. Чтобы более менее разбираться в простых вещах ушло пол года на "врубание"

) Честно, мой вам совет, если вы дизайнер, а к тому же девушка, отдайте "кодерскую" часть кому-нибудь кто в этом разбирается лучше чем вы