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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если трясется Bitmap, то нужно pixelSnapping поставить PixelSnapping.NEVER, и scaleX = scaleY = 0.99. Если все еще продолжает, то выставить smoothing = true. Если не помогло, то не знаю ))

я бы
а) разбил фон на как можно большее число отдельных объектов
б) при сдвиге фона обходил бы все объекты циклом и те объекты, габаритный прямоугольник которых не пересекается с видимой частью stage - скрывал (visible = false)
в) каждому объекту прописал бы casheAsBitmap = true, чем ускорил вывод графики на экран

PS
Чтобы обойти все объекты внутри контейнера понадобится:
1) свойство numChildren
2) метод getChildAt(...)
3) цикл for

Ох, тут свет вчера отрубили! :(
iflamberg, та с выключенным! Вот с включенным, если Вы еще не потеряли интерес, посмотрите пожалуйста, есть ли это хорошо?:) И там по совету i.o. выставлен PixelSnapping.NEVER и smoothing = true
http://narod.ru/disk/20315459000/%D0...itmap.swf.html

N1KY, Вы задели за живое! Приятно, что кто-то оценил графику. За это прощаю фразу "а к тому же девушка" :)))
Я не могу отдать кому-нибудь кодировать, так как я у нас никого не знаю, кто бы разбирался в AS3, а во-вторых, проект некоммерческий (в смысле я его делаю забесплатно) А вообще, сколько может примерно стоить кодинг сайта?

gloomyBrain, гигантское спасибо за подробный ответ!))) Щас буду все пробовать...

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

Тему не читал, поэтому сейчас в чем дело сказать не могу, но просто не могу не восхитится фоном.) Очень красиво, вы талант.

Спасибо! (краснею и смущаюсь:))) Я знала, что единороги очень галантны)

mikhailk, замечательная идея с маской, ура, теперь я знаю как убрать корявые края и решить проблему с экраном!!! :)))

Благодарю весьма всех за советы, мне теперь нужно время, чтобы все это расковырять и испробовать!

Я сейчас делаю флэш-сайт - звездное небо, которое можно плавно двигать бесшовно в любую сторону. Размер картинки всей этой - 9000x9000px ))) И все отлично работает. Проц грузится на 50-55%. Суть в том, что небо это состоит из кусков 500x500px.

+Так что совет - разбивайте фон на фрагменты. Но и не стоит разбивать на слишком маленькие фрагменты - чем больше кусков, то это, я думаю, тоже не в лучшую сторону.

+ Если слишком много сложных векторных изображений - то тогда используйте растровую картинку. Или можно попробывать для каждого мувика применить casheAsBitmap, при условии что эти мувики статичны.

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

+ Еще рывки могут быть из-за низкого FPS в настройках - минимум выставлять нужно 24-30 кадра/сек.

Вот кстати ссылка на один из моих первых сайтов - http://djstitch.ru/. Тут тоже сдвигаются плавно обекты при навигации. Тоже была проблема с рывками которую пришлось решать. Фон - это заливка текстурой + слой со всякими наложеннми эффектами в виде полупрозрачных PNG