Форум 2D Аниматор
Image


Вернуться   Форум 2D Аниматор > Adobe Animate (Flash) > Adobe Animate (Flash)

Важная информация

Adobe Animate (Flash) Обсуждаем программу Adobe Animate (в прошлом Macromedia Flash, Adobe Flash)

Ответ
 
Опции темы
Старый 19.02.2020, 19:43   #1
vladas1983
Новичок
 
Регистрация: 19.12.2019
Сообщений: 12
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
vladas1983 на пути к лучшему
По умолчанию В какой программе лучше делать хорошую анимацию, чтобы все быстро работало?

Здравствуйте!

Делаю анимацию на Animate CC в html5 и столкнулся с тем, что тем больше анимация, чем больше в ней картинок и эффектов ролик загружается долго и может притормаживать. Ранее работал на Flash - там все было прекрасно. Говорят, что технология html5 лучшая, но либо я что-то не так понимаю, либо, действительно с html все очень не просто. В Animate есть ограничения по использованию эффектов или они совсем не работают. В итоге, получается, что анимация на html не самая лучшая.

Я делаю открытки с использованием картинок, подготовленных в фотошопе или иллюстраторе. В основном все элементы используют появление в виде полной прозрачности в полную непрозрачность, чтобы было все плавно и красиво. Но я так пониманию, что на html5 в Animate не нарисовать красиво, плавно, не уменьшая качество ролика, чтобы все загружалось быстро и без торможений. И то идеальной скорости не получается достичь, если только полностью отказаться от этих эффектов, но, в этом случае, это уже будет не открытка.

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

Прихожу к выводу, что html5 предназначен, только для разработки не сложных анимацией с использованием минимального кол-ва картинок (только векторные объекты).

А для разработки открыток, где, возможно, есть какой-то футаж, падающий снег, туман, взрыв и т.д. лучше использовать After Effect, но, на выходе будет уже видео-формат. Или же Google Web Designer.

Но, может, я не прав и что-то не так делаю. Подскажите, в какой программе лучше делать более живые и анимированные открытки и чтобы все быстро загружалось, не тормозило и ролик был высокого качества?
vladas1983 вне форума   Ответить с цитированием
Старый 20.02.2020, 11:47   #2
Дилетант
Местный
 
Аватар для Дилетант
 
Регистрация: 24.03.2015
Адрес: Нефтегорск, Чернопесочный край
Сообщений: 1,680
Сказал(а) спасибо: 779
Поблагодарили 705 раз(а) в 420 сообщениях
Дилетант на пути к лучшему
По умолчанию

Послушайте,Влад. Я просто запутался в Вашем монологе и ничерта не понял. Какая разница в чём анимировать? Хотите в анимете, хотите в тунбуме или тэвэпэшке - в чём удобней достичь желаемой картинки, а потом конвертируйте в тот формат ,который нужен. В крайнем случае выводить в секвенцию и перекидывайте в прогу,которая её может собрать в необходимый формат.
__________________
babayatasovich@gmail.com
Дилетант вне форума   Ответить с цитированием
Старый 20.02.2020, 13:41   #3
vladas1983
Новичок
 
Регистрация: 19.12.2019
Сообщений: 12
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
vladas1983 на пути к лучшему
По умолчанию

QUOTE=Дилетант;99451]
Я попробовал заново нарисовать открытку в Animate canvas, но идеально не получается сделать так, чтобы на было задержки перед появлением ее в браузере. Мне пришлось сделать меньше картинок, сделать им менее качественными. Из-за меньшего кол-ва картинок эффекты появления нескольких из элементов стали не очень красивыми. Уменьшение размера файлов картинок и оптимальное уменьшение качества картинок в настройках анимации привело к общей потери качества анимации. Это позволило уменьшить задержку перед появлением анимации в браузере и убрать зависания при проигрывании анимации на более медленных компьютерах и ноутбуках с памятью 2Гб. Но, время задержки перед появлением открытки в браузере разное при проигрывании ее на компьютере с памятью 8Гб и на компьютере с памятью 2Гб. Плюс добавляется задержка от полсекунды до секунды, если выложить ее на сервер.

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

И это касается одного фиксированного размера открытки. Если нужно увеличить ее в размерах, то нужно, чтобы исходные картинки были большего размера, а в Animate уже через настройки уменьшить, если нужно. Но, размер файла большей картинки по объему больше и это тоже добавляет тяжести картинкам и соответственно задержку. Поэтому, и при увеличении размера есть риск увеличения задержки, и, возможно, зависаний при проигрывании. И если все-таки это нужно сделать, то, готовый формат будет на mp4.

Я поэтому и интересовался, насколько сейчас развит html-формат, чтобы можно было делать качественную и быструю анимацию? Насколько я знаю, в идеале Animate служит для работы с векторной графикой. Когда финальным файлом был swf, то в нем задержки в начале проигрывания никогда не было при любом объеме анимации. Бывало, что притормаживало во время анимации, например, когда одновременно в одно время идет прорисовка или появление нескольких слоев и плюс к ним может накладываться какая-то внутренняя анимация. html в этом плане более чувствительный к объемам анимации и эффектам.

Какие проекты по объему и эффектам можно делать в Animate canvas? Как я уже писал я встречал только простые баннеры в интернете без сложных эффектов и малой длительностью анимации. Открытка - это не баннер. В моих открытках скриптов практически нет, есть только библиотека подготовленных картинок и анимации. Вся анимация состоит, в основном, из анимации картинок. Векторных элементов там практически нет. К тому я сравнил. Сохранил элемент в формате Ai и он весил гораздо больше, чем если сохранить его в картинке. Конечно, я загрузил картинку в анимацию, хотя чуть ранее считал, что нужно в анимации использовать меньше картинок и больше вектора, но почему вектор весит больше картинки. Или, в данном случае, на размер файла смотреть не нужно?

Также в своих анимациях, как я говорил использую альфа-канал, но без них анимация - не анимация. Открытку такие ограничения делают простым баннером. Так, в итоге, можно ли делать качественную и без задержек и торможений открытку
на htm через Animate? У меня появилось ощущение, что html-формат для таких проектов не подходит.
vladas1983 вне форума   Ответить с цитированием
Старый 20.02.2020, 14:04   #4
Валера_кг
Местный
 
Аватар для Валера_кг
 
Регистрация: 21.01.2016
Адрес: Азия
Сообщений: 169
Сказал(а) спасибо: 39
Поблагодарили 50 раз(а) в 42 сообщениях
Валера_кг на пути к лучшему
По умолчанию

Блин, помог бы но слишком много букф, не охота читать.
Валера_кг вне форума   Ответить с цитированием
Старый 20.02.2020, 16:14   #5
vladas1983
Новичок
 
Регистрация: 19.12.2019
Сообщений: 12
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
vladas1983 на пути к лучшему
По умолчанию

В целом, для начала, я хотел бы понять можно ли сделать красивую открытку с качественными изображениями на Animate canvas, чтобы не было задержек перед появлением открытки в браузере и, возможного притормаживания на не очень сильных компьютерах? Открытка делается для клиентов, у которых могут быть разные компьютеры и хотелось бы, чтобы открытка у них быстро проигрывалась, не нужно было ждать пока она в браузере загрузится, была качественной и по сюжету и анимации красивая и насыщенная. Ранее я такие открытки делал также в программе Animate или Flash, но по технологии Flash(swf) и особых проблем не замечал. Или же технология html предназначена, в основном, для разработки несложных рекламных баннеров без особых эффектов?

---------- Добавлено в 16:14 ---------- Предыдущее сообщение было написано в 15:00 ----------

Цитата:
Сообщение от Валера_кг Посмотреть сообщение
Блин, помог бы но слишком много букф, не охота читать.
В целом, для начала, я хотел бы понять можно ли сделать красивую открытку с качественными изображениями на Animate canvas, чтобы не было задержек перед появлением открытки в браузере и, возможного притормаживания на не очень сильных компьютерах? Открытка делается для клиентов, у которых могут быть разные компьютеры и хотелось бы, чтобы открытка у них быстро проигрывалась, не нужно было ждать пока она в браузере загрузится, была качественной и по сюжету и анимации красивая и насыщенная. Ранее я такие открытки делал также в программе Animate или Flash, но по технологии Flash(swf) и особых проблем не замечал. Или же технология html предназначена, в основном, для разработки несложных рекламных баннеров без особых эффектов?
vladas1983 вне форума   Ответить с цитированием
Старый 21.02.2020, 11:45   #6
vladpers
Местный
 
Регистрация: 30.10.2014
Сообщений: 115
Сказал(а) спасибо: 34
Поблагодарили 31 раз(а) в 20 сообщениях
vladpers на пути к лучшему
По умолчанию

Краткость- сестра таланта. Научитесь сокращать кол-во слов и четко выражать свои мысли одним, двумя предложениями, и сами не заметите, как станете аниматором
vladpers вне форума   Ответить с цитированием
Старый 21.02.2020, 14:53   #7
lolkek
Местный
 
Аватар для lolkek
 
Регистрация: 23.10.2017
Сообщений: 517
Сказал(а) спасибо: 333
Поблагодарили 499 раз(а) в 186 сообщениях
lolkek на пути к лучшему
По умолчанию

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

а еще, ну так, идея для расширения бизнеса: освойте какой-нить Construct 3 и вы сможете сделать интерактивные открытки в виде игр на Html5. и сделать их там проще чем в Анимейт (в нем придется связаться с AS3 или Java вроде) именно интерактив, с анимацией там так себе - секвенции спрайтов. Потом заливаете куда-нибудь даже себе на сервер, а клиенту ссылку. Но не забывайте так же про оптимизацию! за пару дней с готовой графикой можно сделать такое, а потом накопятся шаблоны и останется только графику менять и продавать.

а еще, mp4 да это такое себе, но есть отличный формат webdm - не уверен что он работает во всех браузерах, но в Хроме точно, он дает отличное качество и оч маленький вес. Поинтересуйтесь им тоже
__________________
P.S. А может, это эффект Даннинга-Крюгера

Последний раз редактировалось lolkek; 21.02.2020 в 15:01.
lolkek вне форума   Ответить с цитированием
Эти 2 пользователя(ей) сказали cпасибо за это полезное сообщение:
andre_fox (24.02.2020), Дилетант (21.02.2020)
Старый 21.02.2020, 17:30   #8
Дилетант
Местный
 
Аватар для Дилетант
 
Регистрация: 24.03.2015
Адрес: Нефтегорск, Чернопесочный край
Сообщений: 1,680
Сказал(а) спасибо: 779
Поблагодарили 705 раз(а) в 420 сообщениях
Дилетант на пути к лучшему
По умолчанию

...и рыбку съесть! Так выпьем за кибернетика!)))
__________________
babayatasovich@gmail.com
Дилетант вне форума   Ответить с цитированием
Старый 25.02.2020, 12:02   #9
vladas1983
Новичок
 
Регистрация: 19.12.2019
Сообщений: 12
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
vladas1983 на пути к лучшему
По умолчанию

Это ссылка на ролик, который я доработал, но он все равно грузится в начале [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]. Исходный файл .fla весит около 5Мб, .html 4Кб, .js 260 Кб, папка с картинками и музыкой 3МБ, кол-во строк js-файла 5066, которые создаются автоматически. На моем новом 16Г-вом компьютере работает практически без задержки, но при тестировании на 2Г-вом задержка больше и заметнее и такие компьютеры могут быть у многих наших клиентов.

Недоработанный ролик грузится и на моем 16Г-вом компьютере долго [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]. html-файл с завернутым в нем js весит 315 Кб, а строк всего 4895. А папка с картинкой и музыкой весит 7Мб. Больше всего музыка весит 5 Мб. Но, сильно влияет даже не музыка, а то что в одном слое есть кадров 7, где наложен эффект свечения и причем без анимации, а в статике и когда я его убрал это сильно повлияло на уменьшение задержки. В этом ролике также елка появляется более красивее, т.к. используется несколько картинок с плавным переходом, сделанные в фотошопе. В доработанном я убрал все лишние картинки с елкой и оставил одну, ее появление я переделал и оно стало не очень красивым без промежуточных картинок с плавными переходом. Картинки сжимал в Интернет-сервисе и в самом ролике качество уменьшенное.

А почему с Flash все в порядке, почему ролики на ней не грузится долго в начале? Что это за технология?
vladas1983 вне форума   Ответить с цитированием
Старый 25.02.2020, 15:45   #10
vladas1983
Новичок
 
Регистрация: 19.12.2019
Сообщений: 12
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
vladas1983 на пути к лучшему
По умолчанию

Цитата:
Сообщение от lolkek Посмотреть сообщение
Возможно дело в оптимизации. Посмотрите не слишком ли большие картинки выходят из фотошопа (приходится их скейлить в Анимейт?) возможно их нужно пропустить через всякие алгоритмы сжатия png, общем мне кажется дело в оптимизации. И там где это возможно - используйте вектор.
Выглядит пока так, что открытки получаются очень тяжелые (долго грузятся перед появлением, компу приходится рендерит и модифицировать массу тяжелых изображений). Попробуйте погуглить про оптимизацию всех этих дел для Анимейт и веба.
может есть исходник в качестве примера посмотреть?

а еще, ну так, идея для расширения бизнеса: освойте какой-нить Construct 3 и вы сможете сделать интерактивные открытки в виде игр на Html5. и сделать их там проще чем в Анимейт (в нем придется связаться с AS3 или Java вроде) именно интерактив, с анимацией там так себе - секвенции спрайтов. Потом заливаете куда-нибудь даже себе на сервер, а клиенту ссылку. Но не забывайте так же про оптимизацию! за пару дней с готовой графикой можно сделать такое, а потом накопятся шаблоны и останется только графику менять и продавать.

а еще, mp4 да это такое себе, но есть отличный формат webdm - не уверен что он работает во всех браузерах, но в Хроме точно, он дает отличное качество и оч маленький вес. Поинтересуйтесь им тоже
В доработанной версии открытки я сживал картинки в интернет-сервисе. они реально уменьшились, но особого результата это не дало. В Animate я ничего не склеиваю. А что вы имеете ввиду под склеиванием? В Animatу нет таких возможностей. Это все делается в фотошопе, если нужно. В Animate можно, если только в одном слое несколько частей соединить. Обычно, это используется когда есть в слое есть вложенная анимация, где разбивается какой-то слой на части. Например, я текст сохранял в картинку, и в Animate во вложенной анимации разбивал его по строкам, чтобы анимировать каждую строку по отдельности. Или, например, для анимации падающих снежинок я делал слой в фотошопе под размер открытки, на котором есть точки снега. А в анимации снега есть вложенная анимация снега, где этот слой копируется 2 раза: один расположен в области открытки, один над ней, а другой под ней. В анимации все движется вниз, создается ощущение падающего снега, а в определенный момент во вложенной анимации все возвращается обратно и крутится до бесконечности, чтобы снег падал и падал. Плюс я добавляю анимацию других по текстуре снежинок и скорости падания, чтобы все в целом смотрелось более реалистично. Есть еще анимации мерцания звезд, бликов, свечения шаров на елке и все это сделано вручную без использования скриптов, поскольку я программист. Но, если убрать эти слои, то уменьшение будет, но не особо сильное. По сути, сама по себе анимация, какой-бы она не была, занимает место.

Новогодняя открытка недоработанная (грузится дольше) [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]

Новогодняя открытка доработанная и урезанная по красоте анимации и качеству открытки и картинок (грузится меньше, но грузится) [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]

Другая новогодняя открытка размером 1200х1200 пкс. недоработанная с уменьшенным в настройках программы до размера 600х600 пкс. (грузится не меньше 10 сек.) [Только зарегистрированные пользователи могут видеть ссылки. Нажмите Здесь для Регистрации]
vladas1983 вне форума   Ответить с цитированием
Ответ

Метки
canvas, flash, html5, анимация, технологии


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.



Текущее время: 05:06. Часовой пояс GMT +5.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.