Эффект свечения adobe animate
Сегодня мы расскажем, как в Playrix создаются анимации в Animate (Flash). Статья посвящена несложным трюкам, которые можно использовать как базу для эффектов посложнее. Для профессионалов она, возможно, и не будет откровением, но начинающие флешеры (или анимейтеры, если хотите) наверняка найдут для себя что-нибудь интересное. Эти приемы точно сэкономят вам уйму времени в сложных задачах.
Несколько слов о флеше и других программах. Вопросы, наверняка, возникнут, ведь Flash «хоронят» уже который год, а он до сих пор никуда не исчез.
1. Почему мы работаем в Animate, а не в Spine?
- Технология уже годами обкатана, изучена и прочно вписалась в рабочий процесс. Как программа для игровой 2D-анимации флеш жив и действительно хороших альтернатив пока нет.
- Для Spine нужен дополнительный этап работы – риг. Это неоправданно для объектов или персонажей, у которых одна-две анимации (например, декорации Fishdom или персонажи в диалогах Township).
- Производительность. Spine тут проигрывает даже с хорошим ригом, в котором нет ничего лишнего, минимум костей и простые меши.
- Нельзя что-нибудь дорисовать на ходу. Во флеше мы это делаем регулярно и такой подход отчасти напоминает классическую рисованную анимацию – можно «прорисовать» практически любую позу или нужный эффект тщательнее, ригом мы не ограничены.
- Spine ситуативен. Отлично подходит для персонажной анимации «2D строго вид сбоку» и всевозможных «оживших портретов» – которые и анимацией-то можно назвать с натяжкой. Кроме того, если нужно повернуть сложный объект больше, чем на 20-30 градусов, колдовать в Spine нужно еще сильнее, чем во флеше.
Как видите, Spine точно не «убийца флеша», но в ряде случаев мы все-таки используем и его.
- И вновь дело в производительности, по этому критерию флеш выигрывает. 3D используется ситуативно, где без него никак не обойтись – рыбки в Fishdom, главные персонажи в Homescapes и Gardenscapes, например.
- Лишние этапы работы – нужно создать модель, текстуры, риг.
3. Как флеш-анимации попадают в игру, что поддерживается, а что нет?
- Используем свою программу-растеризатор, которая превращает swf в два файла: текстурный атлас и swl, в котором записаны все смещения объектов. Это аналог GAF.
- Поддерживается: иерархия вложенностей, инстанс-неймы.
- Не поддерживаются: маски, фильтры, tint/brightness и режимы наложения.
На первый взгляд может показаться, что во флеше невозможно сделать что-то действительно интересное. Но это не так! Сейчас объясним.
Начнем с самого простого: поворот кубика в изометрии. Очевидное наблюдение: каждая сторона куба – это квадрат. Если представить, что мы смотрим на куб сверху, то кроме верхней квадратной стороны мы ничего не увидим. Поворачивать его в таком ракурсе довольно просто. Но если куб нарисован по-другому, ситуация усложняется: стороны выглядят как ромбы и трансформировать их для создания иллюзии вращения куба – довольно сложная задача.
Однако используя вложенную анимацию во флеше мы можем работать с недеформированными сторонами во вложенности. А впоследствии трансформировать клип со вложенной анимацией до нужного вида. Конечно, тут необходима графика сторон куба во фронтальном виде или предварительно растянутые до близкого к квадратному состоянию стороны.
Итак, возьмем клип с квадратной стороной куба и поместим его во вложенность (назовем его «основной клип»). Преобразовать основной клип в изометрический тайл можно, если повернуть его на 45 градусов. Затем нужно сжать в два раза по вертикали то, что получилось (после поворота – сгруппировать, уменьшить по высоте на 50%, разгруппировать). Теперь у нас есть верхняя грань куба (рис.1).
Повернем его содержимое. Внутри у него всё еще квадрат и поворачиваться он будет как квадрат, ведь все искажения внешние.
Нижняя грань повторяет движение верхней. Создайте ее копию.
Полдела сделано, вращаются верхняя и нижняя грани. Движение их углов полностью определяет положение боковых граней. Предстоит немного механической работы, чтобы аккуратно подогнать боковые стороны (рис.2). Удобнее будет использовать режим graphic для верхних граней, чтобы их поворот отображался на основном таймлайне.
Затем можно сделать коробку деревянной и добавить «освещение»: полупрозрачные затемняющие клипы для боковых граней и посветлее – для верхней (рис.3). Теперь у есть готовый ящик:
Таким нехитрым способом можно сделать вращение и для других правильных многогранников – октаэдров, додекаэдров и т.д. С неправильными работать сложнее, но тоже возможно.
А сейчас мы откроем наш изометрический куб. На глаз открывать «крышку» долго и можно легко ошибиться – тогда движение может получиться дерганным.
Посмотрим на коробку сбоку – открытие створок предельно простое. Повернем их во вложенности (рис.1). Створки – это желтые отрезки. Рекомендуем для них использовать круг как подложку. Так удобнее и нагляднее будет трансформировать основной клип. Без круга, только с отрезками можно запутаться.
Затем расположим в изометрии клипы, которые содержат поворот створок во вложении, и поставим им режим graphic. Поворот желтых отрезков будем использовать как ориентир.
Пять минут механической работы, чтобы вместо палочек были настоящие створки – и готово (рис.2.2). Для второй пары створок можно использовать отзеркаленную копию первой.
Где это можно применять помимо очевидного открытия разных створок и ворот? Там, где нужно отследить перемещение объекта по круговым траекториям, особенно в сложных ракурсах.
В этом примере мы покажем, как подходы, описанные в предыдущих пунктах, можно применять для более сложных объектов. Анимировать будем маленькую машинку, которая ездит между дорожных конусов.
Очевидно, первое, что нужно сделать – представить сложный объект как набор простых, игнорируя вторичные элементы на этом этапе. (рис.1)
Подробно расписывать этапы работы над поворотом мы не будем, принцип тот же, что и в первых двух примерах – поворот неискаженного элемента машины во вложенности и последующая внешняя трансформация клипа (либо создание вспомогательных клипов, по которым проще отслеживать трансформацию сегментов машины). Во вспомогательных клипах можно сделать различные пометки, которые помогут отследить положение второстепенных элементов (Рис.2).
Поворот – одна из составляющих более сложного движения. Изначальная задумка – машина объезжает препятствия на дороге, двигаясь «змейкой». Можно попытаться двигать её по guide-кривой, но в этом случае сложно подобрать ease для твина (либо движение по кривой будет линейным, если анимировать без ease вообще).
Можно пойти другим путем и разложить сложное движение на составляющие (рис.3, слева направо с самого нижнего уровня вложенности):
- Поворот машины на месте
- Цикл движения из стороны в сторону
- Движение машины по прямой
При одновременном воспроизведении это создаст эффект «змейки». Разделение подобных движений на составляющие позволяет вносить правки на любом уровне, а также подбирать наиболее подходящую рассинхронизацию одного движения относительно другого.
Прежде чем что-то делать, поищите способ, который позволит как можно быстрее набросать «картину» в целом – и обязательно им воспользуйтесь. От наброска гораздо проще двигаться дальше. Для флага мы выбрали такой вариант:
- Анимируем вспомогательный символ (зацикленное движение вверх-вниз и в стороны) (Рис.1)
- Создаем несколько его копий и устанавливаем равномерную рассинхронизацию. Несколько клипов слева стоит сжать по горизонтали, чтобы уменьшить амплитуду колебаний. Можно поэкспериментировать с движением сегментов на каждом из уровней вложенности. Логика движения сохранится, но смотреться будет по-разному.
- Когда «набросок» выглядит хорошо, можно продолжить работу. Используем положение вспомогательных символов как место стыка прямоугольных сегментов флага (Рис.2).
Где можно применять такой подход? В зацикленных плавных эффектах – огне, волнах и т.д. Структура везде будет разная, сохранится только общий принцип рассинхронизации клипов.
По сюжету краб выбегает из-за шара, затем останавливается перед ним и стучит клешней. Затем снова убегает за шар – таким образом совершив полный оборот. Анимация непростая, «запчастей» у краба несколько десятков, поэтому для такой задачи просто необходима хорошая организация структуры.
На основном таймлайне всего несколько символов (рис.1). Во вложенность помещены все действия краба помимо перемещения. Он поворачивается, удивляется, стучит по стеклу и т.д. – все это стоя на месте (рис.2). Туловище краба также содержит поворот во вложенности, это удобно.
Запутаться при таком количестве лапок проще простого, поэтому мы использовали вспомогательные клипы. На них циклично меняется состояние для каждой из «ног»: находится на поверхности (большой кружок) или поднята вверх (маленький). Вся эта структура затем поворачивается вместе с крабом (Рис.3).
У этого крабика множество разных анимаций, структура вложенности у них отличается. Но логика в целом одна и та же – комплексные движения распределены по уровням вложенности, на основном таймлайне происходят главные движение символов головы и клешней. А все моргания и улыбки, изгибы и движения клешней сделаны вложенными анимациями.
Тот же подход мы используем при создании анимаций персонажей Gardenscapes и Homescapes. Все элементы туловища и головы находятся во вложенности, на основном таймлайне анимируется только основной клип целиком. Во вложенности удобнее делать эмоции и повороты, без перемещения множества сегментов на основном таймлайне.
Напоследок небольшой бонус. Еще парочка маленьких хитростей и скрипты:
Сбивается точка трансформации клипа и в результате анимация дергается. Как это починить:
а) Двойной клик на белый кружок вернет его в точку регистрации.
б) Можно выставить нужное положение точки трансформации, затем пройтись по всем ключевым кадрам с этим клипом, нажимая Ctrl+Y (это не только однократный Redo, но и повтор последнего действия).
Клип неудобно трансформировать при его текущей рамке трансформации. Особенно если он уже очень сильно деформирован
Клип можно сгруппировать (Ctrl+G). Группа даст новую рамку трансформации. После этого от группы нужно избавиться с помощью Break apart (Ctrl+B).
Работа с растровыми изображениями
Если вы работаете с множеством сегментов, бывает сложно выделить какой-нибудь клип на нижних слоях. Флеш реагирует на клик по прозрачной области растровой картинки – и выделяется не то, что нужно. Можно превратить растр в растровую заливку с помощью Break apart и стереть прозрачные участки, но это долго. У нас есть несколько скриптов для избавления от прозрачных областей – вы можете найти их по ссылке.
Sorcery_MaskBitmap.jsfl – создает векторную маску по форме картинки
Sorcery_CutBitmap.jsfl – обрезает прозрачную область
Sorcery_CutBitmapPrecise.jsfl – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.
Сжатие/растяжение таймлайна.
Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.
Filters (graphic effects) let you add enriching visual effects to text, buttons, and movie clips. A feature unique to Animate is that you can animate the filters you apply using motion tweens.
Animate blend modes let you create composite images. Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. Blending modes also add a dimension of control to the opacity of objects and images. You can use Animate blending modes to create highlights or shadows that let details from an underlying image show through, or to colorize a desaturated image.
About animated filters
You can animate filters in the Timeline. Objects on separate keyframes joined by a tween have the parameters for corresponding filters tweened on intermediate frames. If a filter does not have a matching filter (a filter of the same type) at the opposite end of the tween, a matching filter is added automatically to ensure that the effect occurs at the end of the animation sequence.
To prevent motion tweens from functioning incorrectly if a filter is missing at one end of the tween, or if filters are applied in a different order at each end, Animate does the following:
If you apply a motion tween to a movie clip with filters applied to it, when you insert a keyframe at the opposite end of the tween, the movie clip automatically has the same filters, with the same stacking order, on the last frame of the tween as it did at the beginning of the tween.
If you place movie clips on two different frames with different filters applied to each, and you apply a motion tween between the frames, Animate first processes the movie clip with the most filters. Animate then compares the filters applied to the first movie clip against the filters that the second movie clip uses. If no matching filters are found in the second movie clip, Animate generates a dummy filter with no parameters and the color of the existing filters.
If a motion tween exists between two keyframes and you add a filter to the object in one keyframe, Animate automatically adds a dummy filter to the movie clip when it reaches the keyframe at the other end of the tween.
If a motion tween exists between two keyframes and you remove a filter from an object in one keyframe, Animate automatically removes the matching filter from the movie clip when it reaches the keyframe at the other end of the tween.
If you set filter parameters inconsistently between the beginning and end of a motion tween, Animate applies the filter settings of the starting frame to the interpolated frames. Inconsistent settings occur when the following parameters are set differently between the beginning and end of the tween: knockout, inner shadow, inner glow, and type of gradient glow and gradient bevel.
For example, if you create a motion tween using the drop shadow filter, and apply a drop shadow with a knockout on the first frame of the tween, and an inner shadow on the last frame of the tween, Animate corrects the inconsistent use of the filter in the motion tween. In this case, Animate applies the filter settings used on the first frame of the tween—a drop shadow with a knockout.
About filters and Flash Player performance
The type, number, and quality of the filters you apply to objects can affect the performance of SWF files as you play them. The more filters you apply to an object, the greater the number of calculations Adobe® Flash® Player must process to correctly display the visual effects you’ve created. Adobe® recommends that you apply a limited number of filters to a given object.
Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings improves performance on slower computers. If you are creating content for playback on a wide range of computers, or are unsure of the computing power available to your audience, set the quality level to Low to maximize playback performance.
About Pixel Bender filters
Adobe Pixel Bender™ is a programming language developed by Adobe that allows users to create custom filters, effects, and blend modes for use in Animate and After Effects. Pixel Bender is hardware independent and designed to run efficiently on a variety of GPU and CPU architectures automatically.
Pixel Bender developers create filters by writing Pixel Bender code and saving the code in a text file with the file extension pbj. Once written, a Pixel Bender filter can be used by any Animate document. Use ActionScript® 3.0 to load the filter and use its controls.
For more information about working with Pixel Bender in ActionScript, see ActionScript 3.0 Developer's Guide.
The following video tutorials demonstrate the use of Pixel Bender filters in Animate:
Enhanced in Animate
Each time you add a new filter to an object, it is added to the list of applied filters for that object in the Property inspector. You can apply multiple filters to an object, as well as remove filters that were previously applied. You can apply filters only to text, button, movie clip, components, and compiled clips objects.
You can create a filter settings library that lets you easily apply the same filter or sets of filters to an object. Animate stores the filter presets you create in the Filters section of the Property inspector in the Filters > Presets menu.
With Flash Professional CS6 and earlier versions, applying filters was restricted to movie clip and button symbols only. With Animate, you can now additionally apply Filters to Compiled Clips and Movie Clip components. This allows you to add various effects to components directly, at the click of a button (or two), making your applications look that much better. With Flash CS6, to add filters or other effects to components, one had to “wrap” it inside a movie clip symbol. That is:
- Create or add a component on stage.
- Right click on the component, and select Convert to Symbol.
- Create or add a Button on stage from the Components Panel, and select the Button subsequently.
- On the Properties Panel, click the button drop-down list in the Filters section and select Bevel filter. Properties and Values for the Bevel filter are displayed.
- Modify or set appropriate values for any desired Property. For example, Blur X, Blur Y, Strength, Shadow, etc. You will notice the effects reflecting on the selected button simultaneously.
Фильтры (графические эффекты) позволяют добавлять визуальные эффекты к тексту, кнопкам и роликам. Уникальность Animate состоит в том, что применяемые фильтры можно анимировать с помощью анимации движения.
Режимы наложения Animate позволяют создавать совмещенные изображения. Совмещение — это процесс изменения прозрачности или взаимодействия цветов двух или более перекрывающихся объектов. Режимы наложения дают также дополнительный контроль над непрозрачностью цвета объектов и изображений. Режимы наложения Animate можно использовать для создания подсветки или теней, которые позволяют показать детали нижнего изображения или добавить цвет в ненасыщенное изображение.
Об анимированных фильтрах
Фильтры анимируются на временной шкале. Объекты в отдельных ключевых кадрах, соединенных анимацией движения, имеют параметры для соответствующих фильтров, соединенных анимацией движения в промежуточных кадрах. Если фильтру не соответствует фильтр того же типа на противоположном конце анимации движения, второй фильтр добавляется автоматически, чтобы эффект обязательно появлялся в конце последовательности анимации.
Во избежание неправильной анимации движения в случае, если фильтр на одном из концов анимации отсутствует или фильтры на концах применяются в разном порядке, Animate делает следующее.
Если применить анимацию движения к фрагменту ролика с фильтрами и вставить ключевой кадр на противоположном конце анимации движения, то в конечном кадре анимации движения фрагмента ролика автоматически появятся те же фильтры и в том же порядке, что и в первом кадре анимации движения.
Если поместить фрагменты ролика на два кадра с разными фильтрами, а потом применить анимацию движения между кадрами, Animate сначала обрабатывает фрагмент ролика с наибольшим количеством фильтров. Затем Animate сравнивает фильтры первого фрагмента ролика с фильтрами, используемыми вторым фрагментом ролика. Если соответствующие фильтры во втором фрагменте ролика не найдены, Animate создает пустой фильтр без параметров и с цветами существующих фильтров.
Если между двумя ключевыми кадрами существует анимация движения и к объекту в одном из ключевых кадров добавляется фильтр, то Animate автоматически добавляет фиктивный фильтр к фрагменту ролика, когда достигает ключевого кадра на другом конце анимации движения.
Если между двумя ключевыми кадрами существует анимация движения и из объекта в одном из ключевых кадров удаляется фильтр, Animate автоматически удаляет соответствующий второй фильтр из фрагмента ролика, когда достигает ключевого кадра на другом конце анимации движения.
Если заданные параметры фильтров между началом и концом анимации движения не согласуются, Animate применяет к интерполированным кадрам параметры фильтров начального кадра. Несогласованность параметров возникает в случае, если следующие параметры установлены по-разному в начале и в конце анимации движения: маскирование, внутренняя тень слоя и внутреннее свечение слоя, а также тип градиентного свечения и градиентная фаска.
Например, если создать анимацию движения с помощью фильтра «Тень» и применить в первом кадре анимации движения тень с маскированием, а в последнем — внутреннюю тень слоя, Animate устранит несогласованность фильтров в анимации движения. В этом случае Animate применяет параметры фильтров, используемые в первом кадре анимации движения: отбрасываемая тень с маскированием исходного объекта.
О фильтрах и производительности Flash Player
Тип, количество и качество фильтров, применяемых к объектам, может влиять на быстроту воспроизведения SWF-файлов. Чем больше фильтров применяется к объекту, тем больше вычислений необходимо выполнить Adobe® Flash® Player, чтобы корректно отобразить созданные визуальные эффекты. Adobe® рекомендует ограничить количество фильтров, применяемых к объекту.
Каждый фильтр содержит элементы управления, которые позволяют настроить интенсивность и качество применяемого фильтра. Использование более низких значений параметров улучшает производительность на менее мощных компьютерах. Если вы создаете контент для воспроизведения на широком спектре компьютеров или не знаете, насколько мощные компьютеры доступны вашей аудитории, задайте уровень качества «Низкое», чтобы максимально увеличить быстроту воспроизведения.
О фильтрах Pixel Bender
Adobe Pixel Bender™ — это язык программирования, разработанный компанией Adobe. Он позволяет создавать пользовательские фильтры, эффекты и режимы наложения для использования в ПО Animate и After Effects. Pixel Bender работает независимо от аппаратных средств и автоматически обеспечивает эффективную работу в разных конфигурациях графического и центрального процессоров.
Для создания фильтра разработчики Pixel Bender пишут код Pixel Bender и сохраняют его в текстовом файле с расширением pbj. Созданный таким образом фильтр Pixel Bender можно использовать в документе Animate. Используйте ActionScript® 3.0 для загрузки фильтра и применения его элементов управления.
Дополнительная информация о работе с Pixel Bender через ActionScript приведена в Руководстве разработчика ActionScript 3.0.
В следующих видеоруководствах показано использование фильтров Pixel Bender в среде Animate:
Новые возможности в Animate
Каждый раз, когда к объекту добавляется новый фильтр, этот фильтр добавляется в список фильтров, применяемых к объекту, в инспекторе свойств. Можно применить к объекту несколько фильтров или удалить прежние фильтры. Фильтры можно применить только к тексту, кнопке, ролику, его компонентам и скомпилированным роликам.
Можно создать библиотеку параметров фильтров, которая позволит легко применять к объекту тот же самый фильтр или наборы фильтров. Animate сохраняет наборы настроек фильтров, созданные в разделе «Фильтры» инспектора свойств, в меню «Фильтры» > «Наборы настроек».
В программе Flash Professional CS6 и более ранних ее версиях применение фильтров ограничивается только роликами и символами кнопок. Animate теперь позволяет вам также применять фильтры к скомпилированным фрагментам и к фрагментам роликов. Это позволяет добавлять к компонентам различные эффекты напрямую, одним нажатием кнопки (или двумя), существенно улучшая внешний вид ваших приложений. Во Flash CS6 для добавления фильтров или других эффектов к компоненту необходимо «заключить» его внутри символа ролика. Инструкция:
- Создание или добавление компонента в рабочей области.
- Щелкните по компоненту правой кнопкой мыши и выберите «Преобразовать в символ».
- Создайте или добавьте в рабочей области кнопку с помощью панели «Компоненты», а затем выберите кнопку.
- В инспекторе свойств нажмите раскрывающийся список в разделе «Фильтры»·и выберите «Фильтр фаски». Будут отображены свойства и значения для фильтра фаски.
- Измените или задайте подходящие значения для необходимых свойств. Например «Размытие X», «Размытие Y», «Интенсивность», «Тень» и т. д. Можно сразу же просмотреть применение этих эффектов к выбранной кнопке.
Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом
Немного исторического экскурса и терминов
Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».
Примерно столько же лет я верстаю сайты, в том числе на «современном» языке HTML5, который, как говорят, умеет всё. Нет, реально, иногда упоротые дизайнеры присылали такие интерфейсы, которых в природе не существовало, их нужно было выдумать, прикрываясь фразой «на HTML5 же можно написать всё!».
Я не претендую на особую художественную ценность моих творений, но количество нарисованных мной баннеров давно перевалило за тысячу, и я продолжаю их рисовать почти каждый день.
За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.
Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.
Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.
Интерфейс
Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.
* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.
Движок отрисовки
Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением
ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.
Приятно, что хоть предупредили. Видимо, это нереальная задача — отнимать по единичке от того кадра, на который нужно перейти.
Таймлайн и рабочая область
Т.к. интерфейс не претерпел никаких изменений для меня все здесь абсолютно стандартно. Разницы нет. Так как система настроена на русский язык, скачалась русская версия пакета. Меня это не особо беспокоит, потому что я пользуюсь хоткеями, хотя, иногда зависаю на том, что нужно выбрать в меню.
Теперь перейдем к тому, чем я постоянно пользуюсь:
Стандартные фильтры во Flash
Фильтры — одна из весьма частых составляющих любых баннеров, они позволяют очень быстро добиться нужного результата. Я рассмотрю 3 фильтра, которыми я раньше пользовался крайне часто. Во флеше фильтры — часть стандарта, и на моих работах они не оказывали какого-либо влияния на производительность, да и не могли в-принципе. Здесь и далее я буду использовать экспорт в GIF для понимания разницы
Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:
Flash | CreateJS |
Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.
Редактор | Результат |
При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…
Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется
Свечение
Один из самых простых способов выделить текст на пестром фоне — добавить ему обводку, это просто делается с помощью свечения с большим процентом интенсивности.
Flash | CreateJS |
В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:
Есть один возможный вариант решения данной проблемы, если нужно — я им поделюсь, подложки под буквы используются крайне часто и без них просто не жить.
Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет
Flash | CreateJS | В редакторе |
Размытие
Без комментариев. Размытие доступно только для статичных объектов, так что использовать этот фильтр для появления текстов невозможно
Flash | CreateJS |
Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.
Проблемы экспорта и упаковки
Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.
Резиновые баннеры
По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона
Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.
Итого
Жить можно, пользоваться можно, тормоза терпеть — нельзя. Для моего основного клиента по субподряду было введено ограничение — не больше 5 сцен на один баннер, иначе все начинает дико тормозить на большом новостном сайте с кучей баннерных мест. Flash очень давно и крайне быстро отрисовывается видеокартой любого пошиба, а Священный Грааль в виде магических аббревиатур HTML5 и CSS3 пока что сделан из папье-маше в плане анимации и интерактивных элементов. В том числе, на мобильных девайсах, ради которых Flash якобы и хоронят, производительность подобного рода роликов вызывает серьезные сомнения. Еще ни один стандарт порвут, пока flash окончательно похоронят.
Решил сделать страничку с красивой анимацией, и под руку попалась Edge Animate. Поискав на хабре какие-нибудь статьи по ней, понял что особо никто не писал гайдов, поэтому решил изучать самостоятельно.
В итоге 30 минут знакомства с программой, и на удивление красивый результат.
Adobe Edge Animate распространяется бесплатно, все что нужно это зарегистрировать учетную запись Adobe ID, и установить сам Edge.
Те кто работали с Adobe After Effects, поймут интерфейс достаточно быстро, а так же приятным удивлением будет все те же работающие хоткеи.
Задача : создать анимацию кнопки, которая при нажатии менялась бы из выключенной во включенную, а так же раздвигались дверцы в котором был бы основной контент сайта.
Задача понятна, поехали.
При открытии Edge у нас уже создан элемент Stage, который выставлен на TimeLine(Снизу), в раздел Elements(Справа) и его настройки показаны слева.
Stage это главный див, в котором и будем работать, поэтому меняем его разрешение на нашу рабочую область 1100x600. Рядом с разрешением есть 2 квадратика: Первый это заливка цветом, второй заливка градиентом. К слову, очень удобно реализовано изменение цвета, а так же есть возможность сохранить цвет в палитру.
В настройках Stage убираем галочку с пункта Autoplay, чтобы анимация не запускалась без клика и ставим заливку цвета серым цветом.
Создаем главный див для кнопки, для этого выбираем в верхней панели инструментов овал, и зажимая шифт растягиваем его на 150px.
После того как создали круг, перемещаем его по центру дива(при пересечении главных осей, появляются фиолетовые линии, перетаскиваем круг на их пересечении)
Теперь у нас появился новый див под название Ellipse, который добавился в область тайм лайна, и в раздел Elemets (в этом разделе, как вы поняли из названия, находятся все элементы проекта, здесь можно сразу добавить эвенты к ним, по нажатию на фигурные скобки, а так же управлять вложенностью дивов, путем перетаскивания, что несомненно удобно!)
Сразу меняем название элипса на Button для удобства, это можно сделать по двойному клику на название в области таймлайна, в окошке элементы, а так же в окошке настроек сверху (Несомненно удобно).
Настройки элипса более расширенные по сравнению со Stage.
Большинство функций являются изменением свойств css, можно увидит что изменяет каждая функция если навести на ее значок.
Перед описанием функций, хотел бы рассказать как происходит анимация, и их управление. Она здесь сделана с помощью кейфреймов (ромбиков), рядом с каждой функцией они присутствует. Если мы нажмем на ромб, у нас добавится этот самый кейфрейм на таймлайн, и ему присваивается значение функции которое сейчас выставлено, отодвинув ползунок времени, мы можем создать еще один кейфрейм с другим значением функции, и при воспроизведении анимации, значение функции будем меняться от первого значения кейфрейма до втрого значения. Подробнее я покажу на примере.
Пробежимся быстро по функциям.
В самом верху мы видим название дива, кнопка c — дает возможность прописать класс для него, а двойные скобки прописать эвент.
Ниже раздел отображения элемента.
Глаза, 2 кубика и шкала прозрачности отвечают за css свойства: Display, Overflow, Opactiy.
Position and Size — за расположение и размер дива
Color — за заливку цветом, градиентом, а так же добавление бордера.
Transform — изменение дива относительно точки origin (что бывает очень удобно если див нужно уменьшить относительно центра).
Следующая пачка настроек
Cursor — курсор при наведении
Corners — сглаживание углов (очень удобно, есть возможность сгладить все углы одинаково, либо каждые 4 или 8 сторон по разному, если бы можно было сохранять их как цвет в палитре было бы супер)
Shadow — настройки тени
Filters — разные дополнительные фильтры такие как blur, invert, contrast (но они поддерживаются пока не во всех браузерах)
Clip — маска дива(но только по 4 сторонам)
Accessibiity — добавление атрибутов title и tab index.
Каждую функцию можно анимировать, поэтому все зависит только от вашей фантазии.
Ну а теперь начнем создавать нашу задумку.
Выставляем цветом button темно серый, и применяем функцию shadow чтобы имитировать ее объем
После этого добавляем еще один круг, для внутренней части кнопки с цветом активности.
Тут нам на помощь приходят хоткеи из After Effects, выбираем button и нажимаем Ctrl+D. Переименовываем его в btn_inner, и перетаскиваем его в окне элементы внутрь Button
Теперь мы вложили btn_inner в див Button, и если мы начнем анимировать Button, то btn_inner так же начнет изменяться. Все просто и удобно!
Выключаем Shadow, добавляем в Color цвет бордеру(3й квадратик слева) на красный, и задаем размер 6px. Центрируем наш див, и меняем размер в Transform на 76%. Изменяем цвет на прозрачный, и добавляем Radial градиент
В итоге получаем
Добавляем текст «OFF», ArialBlack 33px, цвет черный, и Shadow красный. Переименовываем в btn_text_off, и засовываем в Button в элементах.
Теперь начнем анимировать. Первым делом добавим к Button эвент(двойные скобочки), справа в элементах. Выбираем click, и нажимаем справа play, теперь по нажатию на див button, у нас будет проигрываться анимация, все просто и элементарно.
Нам нужно изменить shadow у button из dropShadow на InsetShadow, к сожалению добавить несколько shadow в Edge нельзя, поэтому будем хитрить.
Нажимаем на P и у нас в окне таймлайна выбирается элемент pin, он позволяет не создавать самостоятельно каждый кейфрейм, а делать это автоматически. перемещаем ползунок на отметку 0.250 и именяем значение shadow-blur 0. Тем самым у вас получается такая анимация.
Нажимаем еще раз P чтобы выключить pin, перемещаем ползунок на значение 0,5 и в настройки градиента button, и меняем значение как показано на картинке
Добавляем градиент в палитру, и закрываем окошко. Теперь нажимаем опять P, и перемещаемся на отметку 0,250, открываем окно градиента, выбираем градиент из палитры, и меняем из значения на прозрачный не меняя положение точек.
У вас должна получится анимация изменение тени кнопки, проверить можно с помощью клавиш ctrl+enter (и снова привет AE)
Отлично тень меняется, теперь нужно анимировать размер кнопки, т.к. она отдаляется от нас.
Перемещаем ползунок на начало, нажимаем p, выбираем Button, перемещаем на отметку 0.425 и меняем значение transform на 95%.
Так же при создании анимации, можно выбрать как анимация будет происходить, либо линейно, либо по разным шаблонам. Для выбора их, нужно выделить анимацию, и рядом со значком pin нажать на иконку графика. Здесь вы можете поиграться со значениями и выбрать самое подходящее для вас.
Теперь анимируем красный бордер, от 0,250 до 0,500 изменяем значение бордера с красного на голубой.
И получаем примерно так
Содержание текста нельзя анимировать, поэтому сделаем копию текста, и анимируем его прозрачность.
Ctrl+d на тексте, переименовываем в btn_text_on, изменяем цвет на синий, и тень на темно синюю.
С помощью нашего любимого пина, анимируем прозрачность(сверху под глазом), у btn_text_off с 0,115 до 0,305; значения с 1 до 0. У btn_text_on
с 0,250 до 0,425; значения с 0 до 1, чтобы одно на другое немножко заезжало
Проверяем ctrl+enter, все супер.
Осталось сделать двери. Создаем 2 квадрата размером с половину ширины, один ставим слева, другой справа. Соответственно Left_door, Right_door. Цвет для заливки берем из бэкграунда, благо есть палитра которой можно воспользоваться, а сам бэкграунд делаем темнее.
А теперь вкладываем button в left_door, т.к. кнопка будет уезжать вместе с дверью влево. Перемещение в 1 клик, плевое дело, все как нужно.
С помощью пина анимируем левую и правую. Анимируем 0,600 до 3,0 на -480px для левой и для для правой двери 1030px. Выбираем обе анимации и выбираем Easing EasyInOut — Quart.
Чтобы сделать паз для кнопки в правой двери воспользуемся маской, и обрежим круг на половину. Для этого ctrl+d на button, удаляем все вложенные дивы в него, а так же все кейфреймы, и переименовываем в door_right_btn, вкладываем его в Right_door и перемещаем ползунок времени вперед.
Теперь, убираем тень, и заливаем более темным цветом. Переходим в раздел clip, и ставим значение 75 слева. Для эффектности добавляем inset Shadow 7px полупрозрачным черным. А так же анимируем DropShadow у Left_door и Right_door.
И вот наш результат
По окончанию работы под превью окном справа появляется желтый треугольник, там нас предупреждают какие функции в каких браузерах не работают, что несомненно так же удобно.
Чтобы прописать css стили из edge, нужно зайти в event Stage, выбрать compositionReady и прописать
Итого на все про все 30 минут
Все что получилось уже можно редактировать в блокноте, и накручивать что угодно. А на деле мы имеем удобный и быстрый инструмент для создания красивой кросбраузерной анимации.
Написав этот топик, я не претендую на самый простой или самый быстрый способ создания подобной анимации, я просто рассказал что Adobe Edge Animate очень удобная и быстро осваиваемая программа, в которой может разобраться любой человек без опыта работы с JS.
То что получилось можно посмотреть здесь
Пишите вопросы, постараюсь на все ответить, если тема интересная, в ближайшем будущем могу сделать еще пару уроков по Adobe Edge
Читайте также: