Для дизайнеров огромная часть привлекательности Flash заключается в том, что он позволяет пользователям добавлять движения и интерактивность практически ко всему. Для большинства новых пользователей настоящий Wow! фактор приходит, когда они впервые выясняют, как воплотить вещи в жизнь, используя временную шкалу Flash и ActionScript.
Сегодня мы рассмотрим, как мы можем максимально использовать инструменты, которые Flash использует для нас для добавления анимации к нашим символам. Это может быть довольно плотная тема, чтобы охватить, учитывая, насколько приложение выросло в качестве мультимедийной электростанции с первых дней, но я постараюсь сделать вещи краткими и доступными. Для получения более подробной информации см. Другие учебники по Activetuts +, и я уверен, что вы найдете то, что ищете.
Хотя этот пост был написан для Flash Professional CS5, большинство советов должно работать в старых версиях. Я постараюсь подчеркнуть, где что-то очень специфичное для последней версии Flash.
Жаргон Разорение …
Прежде чем мы перейдем к деталям, давайте потратим несколько минут, чтобы разобраться с жаргоном, на который мы здесь ссылаемся Поскольку большинство новичков во Flash не знакомы с концепцией движущихся изображений или вообще не знакомы с ней, некоторые из этих концепций могут оказаться немного сложными. Лучше, чтобы мы рассмотрели их заранее, прежде чем углубляться в практические аспекты анимации и интерактивности во Flash.
WTH это FPS?
FPS (или частота кадров), очень просто, относится к числу кадров, отображаемых каждую секунду. Любое движущееся изображение — анимация или видео — представляет собой серию неподвижных изображений, проецируемых одно за другим с очень высокой скоростью, вызывающих иллюзию движения. Если вы видели киноленту того времени, когда они фактически использовали фильм для съемки видео, вы увидите, что это просто полоса с множеством неподвижных изображений. Скорость прохождения через них кинопроектора — это то, что называется FPS.
FPS по умолчанию в более ранних версиях Flash был 12, который был увеличен до 24 за последние пару версий. Это может быть связано с тем, что Flash превратился из чисто векторного инструмента анимации в предпочтительный режим воспроизведения видео в Интернете. Поскольку для плавной работы видео необходимо воспроизводить со скоростью не менее 24 кадров в секунду, контейнер Flash также должен воспроизводиться наверстываемым. Кроме того, проигрыватель Flash значительно улучшился и теперь может воспроизводить намного большие объемы данных, необходимых для воспроизведения на более высоких fps, без снижения производительности.
Shape vs Motion tween
Взятый непосредственно из книг анимации cel, анимация (сокращение между) — это метод, используемый для создания промежуточных кадров между двумя ключевыми кадрами. Например, если бы я должен был анимировать руку персонажа, переходящую из обычной позиции в указатель на что-то, я бы нарисовал первую и последнюю позиции, а затем нарисовал промежуточные рамки для имитации движения. Сколько кадров проходит между двумя ключевыми кадрами, определяется частотой кадров анимации и временем, за которое вам нужно выполнить движение. Более медленные движения означают больше кадров анимации, и наоборот.
Flash облегчает нам рисование рамок анимации, в отличие от того, что вы делаете в традиционной рисованной анимации. Начиная с CS4, существует три совершенно разных способа анимации движения — форма, классика и анимация движения. Давайте немного разберемся с каждым:
Форма анимации движения : самый простой тип анимации движения, хотя вы, вероятно, не будете использовать это слишком часто. Вы начинаете с формы и трансформируете ее с течением времени. Если обе формы не являются сложными и очень похожи друг на друга, вам, вероятно, потребуется много практики, чтобы заставить это работать. Вы можете добавить подсказки формы, чтобы заставить определенные точки на фигуре вести себя во время преобразования.
Классическая анимация: вплоть до версии CS3, это был основной метод анимации во Flash, который любил всех, как ненавидел. В основном вы берете символ и изменяете его свойства между ключевыми кадрами — например, размер, положение, цветовой эффект и т. Д. Поскольку метод зависит от двух различных состояний — по одному на каждом ключевом кадре — редактирование анимированного символа может быть довольно утомительной задачей. Что-то такое простое, как перемещение символа вокруг, требует от вас выбора символа на каждом ключевом кадре и перемещения его на ту же величину.
Анимация движения: безусловно, самое большое обновление анимационных возможностей Flash, анимация движения предоставляет любимый редактор движков After Effects для Flash. Самое большое изменение между старым и новым методом заключается в том, что анимация движения теперь основана на объектах, а не на временной шкале, как в старом методе. Вы применяете анимацию к символам, с точным контролем практически любого физического аспекта объекта через панель редактора движений. Конечно, вы все еще применяете движение на временной шкале, но теперь можно выбрать символ, переместить его и перенести его анимацию.
смягчение
Мы знаем, что когда мяч падает в реальном мире, его скорость не всегда одинакова. Он набирает скорость по мере приближения к земле, затем подпрыгивает примерно с той же скоростью и замедляется по мере достижения вершины, где он возвращается к земле. Когда вы анимируете объекты во Flash, они по умолчанию преобразуются с равномерной скоростью. Если вам интересно, почему ваш анимированный текст, входящий и выходящий из сцены, кажется плоским, это причина. С помощью замедления вы можете в основном сказать Flash, чтобы движение ускорялось или замедлялось без необходимости настраивать положение вручную в каждом кадре.
Новое Движение Tween Goodness
Одна из самых больших проблем со старой анимацией движения во Flash — то, чего я не осознавал до тех пор, пока не увидел новую — заключалась в том, что анимация была основана преимущественно на временной шкале. Вы создали ключевой кадр на слое, поместили на него символ, добавили еще один ключевой кадр в нескольких кадрах и изменили символ. По сути, вы имели дело с двумя отдельными экземплярами символа. Перемещение одного не сильно отличалось от экземпляра в следующем ключевом кадре. Конечно, мы все прошли через ад, пытаясь переместить элементы после их анимации, но именно так Flash разыграл свои карты.
Затем с CS4 появился редактор движений, и все изменилось навсегда. К сожалению, редактор движений не совсем понятная часть Flash, даже после полутора версий. Позвольте мне затем уделить несколько минут и обсудить некоторые интересные моменты о том, как эта штука работает и как вы можете заставить ее работать на вас.
Два способа оживить
Теперь вы можете редактировать свои символы двумя различными способами, чтобы запустить анимацию — из редактора движений или прямо на сцене, как в старые времена. Каждый физический параметр выбранного символа — например, координаты x & y, масштаб, цветовые эффекты, фильтры и т. Д. — теперь отображается в виде строки в редакторе движений. Просто перейдите к точке на временной шкале и измените параметр, и для этого параметра будет сгенерирован ключевой кадр. Если вам нравится традиционный визуальный способ анимации, просто перейдите к рамке и отредактируйте символ на сцене.
Важно понимать, что ключевые кадры теперь добавляются для каждого параметра, поэтому, если вы переместили только экземпляр на сцене, ключевой кадр будет только для координат X и / или Y в редакторе движения. Это обеспечивает чрезвычайно широкий диапазон управления анимацией, чего было невозможно достичь в более старых версиях Flash.
Примечание. Вам больше не нужно явно создавать ключевой кадр. Просто перейдите к кадру, измените что-то в экземпляре, и ключевой кадр автоматически будет создан только для этого параметра. Для многих людей это немного культурные изменения; что-то, к чему они очень трудно привыкнуть. Хотя вы все еще можете вручную создать ключевой кадр, я обнаружил, что в большинстве случаев это не нужно.
Более тонкий контроль над ослаблением
Вместо одного поля ввода и кнопки «Редактировать» теперь вы получаете целую строку, предназначенную для ослабления, в новом редакторе движений. Пунктирная линия, охватывающая все кадры анимации, позволяет очень легко увидеть, как работает ослабление. Включенные пресеты — хороший способ начать. Изогнутая линия означает, что скорость анимации постепенно увеличивается или уменьшается. Прямая линия означает последовательный, равномерный темп. Вы можете создать столько облегчений, сколько хотите, и назначить разные параметры каждому параметру. Помните, что ослабление должно быть явно назначено каждому набору параметров. Если вы этого не сделаете, ваша анимация будет оставаться таким же плоским движением.
Как только вы ознакомитесь с тем, как работает ослабление с предустановками, настало время предпринять приключения и попробовать опцию «Custom». Здесь вы видите красную сплошную линию вместо пунктирной, что указывает на то, что вы можете ее редактировать. Перейдите к кадру и создайте ключевой кадр в строке «Custom», чтобы добавить узел Безье на временной шкале. Затем вы можете использовать дескрипторы узла для редактирования курсора по своему усмотрению.
Совет: если вы не слишком уверены в том, как работает замедление, но хотели бы мгновенно поднять анимацию на несколько ступеней, используйте это правило, которое я обычно придерживаюсь сам — внешние элементы (все, что входит в кадр или на сцену) лучше всего работают с положительное «простое (среднее)» ослабление на «50», тогда как исчезающие элементы работают лучше всего с тем же ослаблением на «-50». Это делает общую анимацию более плавной и последовательной. Как правило, я использую замедление практически для всего, что движется в моей анимации.
Редактирование траектории движения
Когда вы перемещаете объект с течением времени, используя анимацию движения, от точки регистрации символа появляется линия, показывающая начальную и конечную точку движения, а также каждый из кадров. Кажущейся скрытой особенностью здесь является тот факт, что этот путь похож на любую другую строку во Flash. Вы можете использовать инструменты выделения и пера, чтобы изменить его так же, как любой другой путь. Нажмите и перетащите в любое место, кроме концов пути (пока он не выбран), чтобы преобразовать его в кривую. Затем вы можете использовать инструмент подвыбора для редактирования маркеров Безье на узлах для более точного управления. Каждый раз, когда вы добавляете ключевой кадр в траекторию движения, к траектории добавляется новая кривая Безье, которую вы затем можете редактировать по мере необходимости.
Быстрая и простая псевдо-3D анимация
Если 3D во Flash — это то, к чему вы всегда стремились, но у вас не хватило ума поиграть с такими 3D-фреймворками, как papervision, вот быстрый и грязный способ имитировать 3D-движения во Flash. Вы можете использовать новый инструмент 3D Rotation вместе с редактором движения, чтобы заставить объекты вращаться в 3 измерениях для этого добавленного джаза.
3D-вращение не отображается в редакторе движений, если вы не используете его на объекте. Для этого выберите 3D Rotation Tool, выберите ваш объект и нажмите и перетащите одну из трех появившихся цветных линий. Каждая из трех линий представляет ось — зеленый цвет — это Y, красный — это X, а синий — это Z. Обычно X & Y заставляют ваш объект выглядеть так, как будто он вращается в трехмерном пространстве. Переместите его в нужное положение, перейдите к концу анимации движения и снова поверните его. Добавьте легкость «отказов» для дополнительной специи.
Переверните анимацию для более предсказуемых результатов
Мой типичный рабочий процесс анимации состоит в создании комбинации ключевых кадров в анимации, а затем при необходимости добавляет движение к каждому объекту. Для всего, что должно скользить снаружи от сцены слева, это означает, что мне нужно переместить объект в первом кадре, уменьшить альфа, перейти к последнему кадру, переместить его туда, где я хотел, и увеличить альфа до 100%. Так было всегда, поэтому я никогда не беспокоился об этом до одного прекрасного утра, когда обнаружил «обратные ключевые кадры». Идея на самом деле глупа и проста, но стоит бесчисленных часов, если каждый день анимировать вещи на сцене и за ее пределами.
Вот как это работает. Как только у вас будет свой композит, просто оживите эффект, который вам нужен. Начните с конечного положения объекта и оживите его, выходя влево. Включите все, что вам нужно, чтобы сделать анимацию идеальной — альфа, размытие и др. Затем просто щелкните правой кнопкой мыши анимацию движения и выберите «перевернуть ключевые кадры», и вуаля! У вас есть слайд из левой анимации так, как вам нужно.
Скопируйте и вставьте в движении
Пожалуй, самая большая экономия времени для меня с тех пор, как я начал использовать редактор движений во Flash, — это возможность применять движение к объекту, копировать его и вставлять для всех других подобных объектов. Это наиболее целесообразно, когда у вас есть несколько объектов, движущихся внутрь или наружу одинаковым образом — например, список маркеров. После того, как вы применили анимацию движения к одному из элементов списка (конечно, при условии, что каждый из них представляет собой отдельный фрагмент ролика на своем собственном слое), щелкните правой кнопкой мыши анимацию движения и выберите «Копировать движение». Затем просто выберите первые ключевые кадры всех других элементов списка, щелкните правой кнопкой мыши и выберите «Вставить движение». Затем вы можете изменить каждый в отдельности, если это необходимо.
Разные советы по анимации
Вот несколько простых советов, чтобы сэкономить время, энергию и несколько кадров при работе с анимацией во Flash:
- Если у вас есть группа видеоклипов на слое, которые вы хотели бы анимировать индивидуально, первое, что нужно сделать, это разместить их на отдельных слоях. В следующий раз, когда вам нужно будет сделать это, выделите их все и нажмите Shift + Ctrl + D. Flash выполнит грязную работу по размещению их всех на отдельных слоях и даже назовет слои, соответствующие каждому мувиклипу.
- Когда объекты появляются на экране, установите значение альфа-канала первого кадра на 5% вместо 0. Таким образом, вы можете увидеть слабую версию объекта, чтобы иметь возможность выбирать и манипулировать ею. Так как в любом случае он в любом случае увеличится с 5% до 100%, эффект от конечной анимации будет едва заметен.
- Если у вас есть элементы, появляющиеся на экране, которые остаются на некоторое время, а затем исчезают, анимируйте внешний вид с помощью анимации движения, затем добавьте статический ключевой кадр в следующий кадр на время, которое будет оставаться на экране. Скопируйте движение появления, вставьте его в конец и переверните кадры, чтобы элемент исчез так же, как он появился.
Вывод
Это подводит нас к концу другой главы, посвященной Flash-советам и рекомендациям для дизайнеров. Если вы использовали Flash несколько лет назад и недавно вернулись к нему, вы, несомненно, оцените огромный скачок, который он совершил за эти годы в качестве инструмента анимации профессионального уровня. Я надеюсь, что эти советы помогут вам разобраться с некоторыми новыми, удивительно редко документированными инструментами и функциями. Есть еще советы и хитрости, чтобы поделиться? Давайте послушаем о них в комментариях.