Я немного, может, напутал с термином. Имел ввиду не галку «Scale content», которая пропорционально позволяет растягивать весь баннер в исходнике. А так почему мешает? Речь как раз не про горизонтальные баннеры. Например, фулскрин, который имеет фиксированный размер 800x600 будет масштабироваться выдавая четкую картинку на больших экранах только если будет стоять галка «make responsive» в настройках.
А в Animate CC по сравнению с Flash CC добавились приятные функции:
1. Скейлинг 2. Изображения по целым координатам 3. Масштабирование баннера 4. Шрифты внедряются как векторные символы (а ля как во Flash, только весят больше). 5. HTML-шаблоны 6. Функция эскпорта JS в HTML 7. Нормальные кнопки для сохранения ресурсов в корень
Может не все вспомнил.
Как вариант. Хотя мои фулскрины, не нагроможденные анимацией не тормозили на весь экран, но я согласен, что подложенное изображение будет меньше кушать ресурсов. Возьму себе на заметку.
1) Понятно. Ну, я разделяю вашу точку зрения по поводу того, что единым кодом было бы здорово опцию эскпорта иметь (чтобы изображения тоже). Уж точно лищней не была. Видимо вам чаще приходится собирать в единый HTML-файл баннеры, чем мне.
2) Мало ли )
3) Так эти команды и пишутся на панели Actions в Animate CC. На мой взгляд, лучше написать JavaSctipt код в исходнике для позиционирования объектов, чем в HTML-ке с CSS, например, если делается горизонтальный растяг.
Да, вы правы. Открыл старый баннер Swiffy и убедился в этом. С точки зрения публикации это было здорово, но опять же, последующая подготовка по ТТ площадкам требовала доработок, иногда незначительных, а иногда более долгих.
Растяги, кстати, пишутся хорошо на JavaScipt прямо в исходнике. Да, канвасу ошибочно задавать размер 100%, так как это работало только c flash и Swiffy, а канвас попросту не понимает, что мы от него этим хотим. Горизонтальный баннер делается с максимальным размером. Его размер ограничивает размер окна браузера или iframe на площадке. Для позиционирования элементов рекомендую писать код внутри баннера посдерством JavaScipt, где размер окна мы запрашиваем значением innerwidth, а позиционирование элементов пишем по-старинке, как на AS.
В это случае есть преимущество перед CSS: все позиционирование у нас происходит в исходнике и мы можем спокойно использовать шаблоны HTML для площадок.
А новые функции скейлинга Animate дают нам растягивание баннера, как с flash или Swiffy. Например, если мы сделаем Fullscreen с включенной этой функцией наш баннер при масштабировании будет именно масштабировать веторные элементы и изображения под нужный экран.
А по поводу перехода на Animate — проще жить как раз стало! Один раз заморочился с шаблоном для площадки — и больше не паришься над подготовкой кода по ТТ. Больше нет мутных изображений и текста (она из главных проблем Swiffy). Кроме того, твины в Swiffy жрали вес несщадно, оптимизация изображений глючила. Может и добавились некоторые вещи, которые теперь приходится делать, но геморроя теперь намного меньше.
Полностью согласен! TinyPNG спасает. Недавно такой алгоритм сжатия PNG добавили в Photoshop CC (ставится галка в новом эскпорте). Кроме того новый алгоритм сжатия JPEG тоже дает хорошие результаты при меньшей потери качества. Хотя, конечно, перетащить изображения в TInyPNG и получить сразу архив картинок — быстрее. Спрайтшиты дают дикие лаги, когда баннер сложный + не позволяют оптимизировать каждый элемент как захочется.
1) По-прежнему не понимаю почему вы так сильно хотите иметь изображения внутри HTML. Очень мало площадок требуют это делать. Для единичных случаев можно делать это ручками. А если у вас это часто встречается, то искать сторонний способ (слышал, вроде в SublimeText можно макрос сделать, который будет автоматом заменять изображения в коде).
2) Для других баннерных платформ можно наделать шаблоны как раз по той самой инструкции, что скинул shvagir. Действительно при каждом эскпорте у нас будет выходить уже готовый по ТТ HTML.
3) Речь идет о базовых JavaScript командах, которые очень схожи с ActionScipt и они же приведены в справке Adobe.
По факту, большинство площадок поддерживает как раз архивы. В единичных случаях можно и ручками поправить. Swiffy конвертировал не в base64, а в собственный код. Да, было бы, конечно, неплохо, если б Animate умел засовывать изображения в HTML или JavaScript + умел оптимизировать изображения как это делает Photoshop CC с хорошими алгоритмами сжатия JPEG и PNG. Кроме того, упаковка готового баннера в ZIP, хоть не особо сокращала бы время, но была бы приятна :)
Пока мало знаком с Edge Animate, но интересно будет разобраться получше. Спасибо за информацию. А так, по факту, мне по работе во основном приходится работать с исходниками Animate. По-сути, если исходный баннер создаешь сам, то уже в голове знаешь его структуру и создавать ресайзы проще, тем более, если специально делаешь анимацию и элементы для удобного ресайзинга. С чужим же исходником сложнее, особенно когда он сделан на скорую руку.
Swiffy был невероятно крутым конвертером. Действительно, он умел сохранять как эффекты, сглаживание шрифтов, так и несложный код ActionScript (оставался рабочим интерактив, адаптивные баннеры и прочее). Однако, это привело к тому, что большинство наконвертированных баннеров, встречавшихся в интернете имели большой вес, тормозили и часто были с мутным текстом (который становился не мутным, если соблюдались целые координаты и 100% масштаб текстового блока или мувиклипа, в котором находится текст). Интересно, что кривые, твины и некоторые другие ресурсы в результате конвертирования давали очень много веса. Когда требовалось уложиться в вес, я даже анимацию переписывал на ActionScript и конвертировал в растр некоторые сложные мелкие вектора. Не все разработчики подготавливали перед конвертированием баннеры так, чтобы результат получался легким, как по весу, так и по нагрузке на процессор. Пытаясь уложиться в срочный дедлайн или просто от лени, многие баннермейкеры просто забивали на качество шрифтов и оптимизацию, что сказывалось на результате. В итоге, заходя на какой-нибудь сайт, вроде РБК нас часто встречал широкий растяг 970x250 пикселей, который тормозил даже на средних, а то и мощных компьютерах. Сложные баннеры со Swiffy-кодом почти всегда ужасно тормозили на мобильных устройствах. Не тормозили только те, где скудная анимация и мало содержимово.
Поэтому, я только рад, что Swiffy отключили и не оставили, даже, оффлайн версию. Он только приводил к тому, что в интернете наплодили ужасно тормозящих роликов.
Выход Animate CC упростил работу довольно сильно. Я считаю его идеальным редактором для создания баннеров. Работать в Google Web Designer и Edge Animate сложнее, если вы всю жизнь изучали Flash. Adobe оставило привычный интерфейс но добавило полезные фишки для эспорта в HTML, в том числе и профили и шаблоны (божественное обновление), которые позволили без сторонних программ и скриптов экспортировать баннеры уже сразу подготовленные под технические требования интернет-площадок. Жаль только в списке выбора профиля сами профили не сохраняются и в самом профиле не сохраняется прикрепленный HTML-шаблон, но это в любом случае два клика мыши, в сравненнии с тем сколько операций приходилось выполнять с HTML-кой Swiffy-баннера.
Странная претензия про фильтры. Тут же надо понимать, что технологии разные и поэтому и эффектов оставили только два. Кстати, остался даже один из режимов наложения слоев (смешивание), который в некоторых случаях полезен. То что в редакторе отображаемый эффект выглядит иначе, чем в браузере – действительно так. Тут уже методом проб делаем нужный нам эффект (меняя при этом прозрачность цвета). Или рисуем эффект заранее в Photoshop. Действительно, было бы здорово, если бы разработчики переделали эту панель, чтобы для SWF и HTML она настраивалась по-разному и эффекты в самом редакторе выглядили приближенно к тому, как они будут выглядеть в браузере.
Про то что Animate не сохраняет единый файл… Это разве критично? Или осталась привычка получать на выходе единый файл? Я пока знаю только две из сотни мне известных рекламных площадок, которые требуют единый HTML-файл, где, даже изображения вшиты в формате base64. У многих площадок до сих пор плавающие технические требования или тупо скопированы с другого сайта (а на деле оказывается совсем другие). Зачастую специалисты, принимающие баннеры на размещение, попросту сами не понимают техническую сторону.
Единственное, что пока не нравится в Animate, это отображение шрифтов в Canvas. Мелкие шрифты выглядят мутновато, однако, я опять же понимаю, что это из-за технологии, так как шрифты встраиваются как векторные фигуры. Если придумают способ сглаживать шрифты на выходе – было бы здорово, так как web-шрифты подцепишь далеко не в каждый баннер (из-за разных ограничений, как со стороны клиента, так и со стороны площадок).
Что касается Edge Animate и Google Web Designer – программы сильно не изучал, но работать в редких случаях приходилось. Даже, обнаружил в них приятные функции, которых не хватает в Animate. Но ввиду остального, что есть в Animate и привычный интерфейс анимации + профили не дают мне другого выбора как за ним. Кроме того, годами наработанная скорость позволяет мне делать десятки ресайзов и баннеров в день, сразу подготовленные под площадки. Если у вас получается очень быстро делать ресайзы в Edge Animate – снимаю шляпу ) В Animate немного тоже упростили процесс ресайзинга, а именно, введя функцию трасформации всего документа. Теперь, допустим, чтобы сделать из формата 300x250 формат 336x280 достаточно в Properties поставить галку «Scale content» и ввести новый размер. Баннер просто увеличиться пропорционально. Раньше бы пришлось запихивать весь баннер в мувиклип со всеми вытекающими.
А в Animate CC по сравнению с Flash CC добавились приятные функции:
1. Скейлинг 2. Изображения по целым координатам 3. Масштабирование баннера 4. Шрифты внедряются как векторные символы (а ля как во Flash, только весят больше). 5. HTML-шаблоны 6. Функция эскпорта JS в HTML 7. Нормальные кнопки для сохранения ресурсов в корень
Может не все вспомнил.
2) Мало ли )
3) Так эти команды и пишутся на панели Actions в Animate CC. На мой взгляд, лучше написать JavaSctipt код в исходнике для позиционирования объектов, чем в HTML-ке с CSS, например, если делается горизонтальный растяг.
В это случае есть преимущество перед CSS: все позиционирование у нас происходит в исходнике и мы можем спокойно использовать шаблоны HTML для площадок.
А новые функции скейлинга Animate дают нам растягивание баннера, как с flash или Swiffy. Например, если мы сделаем Fullscreen с включенной этой функцией наш баннер при масштабировании будет именно масштабировать веторные элементы и изображения под нужный экран.
2) Для других баннерных платформ можно наделать шаблоны как раз по той самой инструкции, что скинул shvagir. Действительно при каждом эскпорте у нас будет выходить уже готовый по ТТ HTML.
3) Речь идет о базовых JavaScript командах, которые очень схожи с ActionScipt и они же приведены в справке Adobe.
Поэтому, я только рад, что Swiffy отключили и не оставили, даже, оффлайн версию. Он только приводил к тому, что в интернете наплодили ужасно тормозящих роликов.
Выход Animate CC упростил работу довольно сильно. Я считаю его идеальным редактором для создания баннеров. Работать в Google Web Designer и Edge Animate сложнее, если вы всю жизнь изучали Flash. Adobe оставило привычный интерфейс но добавило полезные фишки для эспорта в HTML, в том числе и профили и шаблоны (божественное обновление), которые позволили без сторонних программ и скриптов экспортировать баннеры уже сразу подготовленные под технические требования интернет-площадок. Жаль только в списке выбора профиля сами профили не сохраняются и в самом профиле не сохраняется прикрепленный HTML-шаблон, но это в любом случае два клика мыши, в сравненнии с тем сколько операций приходилось выполнять с HTML-кой Swiffy-баннера.
Странная претензия про фильтры. Тут же надо понимать, что технологии разные и поэтому и эффектов оставили только два. Кстати, остался даже один из режимов наложения слоев (смешивание), который в некоторых случаях полезен. То что в редакторе отображаемый эффект выглядит иначе, чем в браузере – действительно так. Тут уже методом проб делаем нужный нам эффект (меняя при этом прозрачность цвета). Или рисуем эффект заранее в Photoshop. Действительно, было бы здорово, если бы разработчики переделали эту панель, чтобы для SWF и HTML она настраивалась по-разному и эффекты в самом редакторе выглядили приближенно к тому, как они будут выглядеть в браузере.
Про то что Animate не сохраняет единый файл… Это разве критично? Или осталась привычка получать на выходе единый файл? Я пока знаю только две из сотни мне известных рекламных площадок, которые требуют единый HTML-файл, где, даже изображения вшиты в формате base64. У многих площадок до сих пор плавающие технические требования или тупо скопированы с другого сайта (а на деле оказывается совсем другие). Зачастую специалисты, принимающие баннеры на размещение, попросту сами не понимают техническую сторону.
Единственное, что пока не нравится в Animate, это отображение шрифтов в Canvas. Мелкие шрифты выглядят мутновато, однако, я опять же понимаю, что это из-за технологии, так как шрифты встраиваются как векторные фигуры. Если придумают способ сглаживать шрифты на выходе – было бы здорово, так как web-шрифты подцепишь далеко не в каждый баннер (из-за разных ограничений, как со стороны клиента, так и со стороны площадок).
Что касается Edge Animate и Google Web Designer – программы сильно не изучал, но работать в редких случаях приходилось. Даже, обнаружил в них приятные функции, которых не хватает в Animate. Но ввиду остального, что есть в Animate и привычный интерфейс анимации + профили не дают мне другого выбора как за ним. Кроме того, годами наработанная скорость позволяет мне делать десятки ресайзов и баннеров в день, сразу подготовленные под площадки. Если у вас получается очень быстро делать ресайзы в Edge Animate – снимаю шляпу ) В Animate немного тоже упростили процесс ресайзинга, а именно, введя функцию трасформации всего документа. Теперь, допустим, чтобы сделать из формата 300x250 формат 336x280 достаточно в Properties поставить галку «Scale content» и ввести новый размер. Баннер просто увеличиться пропорционально. Раньше бы пришлось запихивать весь баннер в мувиклип со всеми вытекающими.