Flash и анимация в Интернете

Небольшая программа для создания и оживления векторной графики со временем выросла во Flash — незаменимый инструмент для создания Web-анимации

История Flash: 6 лет развития

В 1995 году компания Future Animation разработала Future Splash Animator — небольшую изящную программу для создания и оживления векторной графики. Программа вряд ли развивалась бы в нынешнем направлении, но ее заметили специалисты из Macromedia и, предположив перспективность развития векторной графики в сети, выкупили программу, а заодно и компанию ее разработчиков. Расширив продукт рядом интересных и полезных функций, Macromedia дополнила им свой арсенал известных средств разработки уже под новым названием Flash (Вспышка).

Название, будучи простым сокращением от Future Splash, оказалось очень удачным с маркетинговой точки зрения, особенно если учесть, что восход этой программы стал настоящей «вспышкой» в мире Web-технологий.

Flash набрал популярность далеко не сразу. Потребовалось сменить две версии, отлаживая механизмы отображения информации, интерфейс и внутреннюю структуру файлов, и выпустить версию с номером 3, чтобы дизайнеры обратили на программу пристальное внимание.

Третья версия начала свое шествие по серьезным и не очень сайтам в виде различных элементов анимации, логотипов, заставок. Проблем с Flash-графикой возникало немного — дополнительный модуль для ее просмотра (Flash Player) быстро скачивался по сети. Чуть позже Netscape, а следом за ней и Microsoft встроили поддержку Flash в стандартные дистрибутивы своих браузеров Navigator и Explorer.

Разработчики из Macromedia не теряли времени даром и к 4-й версии улучшили во Flash достаточно приличный для графического редактора (хотя и слабоватый с точки зрения программирования) язык под названием ActionScript. Это был прорыв. Возможность описания поведения объектов дала стимул дизайнерам и аниматорам заниматься визуальным программированием, а программистам — создавать игры и небольшие программы. Сайты, сделанные целиком или частично во Flash, мультфильмы, клипы, игры с огромной скоростью наполняли Интернет. Количество компьютеров, на которых установлен Flash Player, неуклонно росло и к 2000 году достигло отметки 95% от всех пользователей сети. Сей год подготовил и еще одну мини-революцию.

В пятой версии ActionScript стал настолько основателен, что любительской эту программу называть было просто неприлично. Теперь уже и солидные разработчики обратили свои взоры на отличный инструмент визуализации технических данных, создания многопользовательских приложений и игр. Разработчики существенно расширили спектр задач, решаемых с помощью Flash, сочетая его c DHTML, JavaScript, CFML, не отделяя мультипликацию и дизайн от программирования.

Шесть лет развития пройдены не зря. Можно только догадываться, что нового принесет в Интернет шестая версия программы — разработчики Macromedia не любят разглашать свои секреты. Но скорее всего, мы опять будем приятно удивлены чем-то революционно новым.

В этой статье рассматривается одна из самых интересных и малоиспользуемых возможностей Flash — создание интернет-мультфильмов.

Анимация в Интернете

Применение Flash для создания анимированного содержания развивается чрезвычайно быстрыми темпами. И если несколько лет назад, зайдя на сайт shockwave.com, можно было увидеть флеш-мультфильм уровня «Shockwave Dilbert Show» (www.shockwave.com/bin/shockwave/ content/content.jsp?id=showher), достаточно примитивный с точки зрения анимации, то сейчас целый ряд студий производят высококачественные мультфильмы для Интернета, не уступающие по качеству среднему уровню классической анимации, а по таким возможностям, как интерактивность, участие зрителя в процессе, возможность добавлять игровые моменты, превосходящие все то, что делалось аниматорами до появления Flash и Интернета.

Краткий обзор сайтов

Одним из старейших сайтов, размещающих у себя мультфильмы, является shockwave.com — проект, организованный Macromedia, фирмой-производителем Flash. Портал предназначался для пропаганды технологий Flash и Shockwave и первоначально вышел под маркой shockRave.com, однако в дальнейшем дела пошли так хорошо, что было создано отдельное предприятие shockwave.com, которое отделилось от Macromedia и вышло на рынок как самостоятельный игрок. На это повлияло и недовольство рынка процессом монополизации, которому поддалась компания. Действительно, занимаясь выпуском программных продуктов, в которых напрямую рекламировался портал shockwave.com, Macromedia поступала не совсем честно по отношению к другим сайтам с развлекательной мультимедиа-продукцией.

Итак, сейчас независимое предприятие shockwave.com — это большой портал, который покупает или берет в аренду произведения лучших мастеров мультимедиа, как в области мультфильмов, так и в области разработки игр, интернет-клипов, анимированных открыток-поздравлений и просто интересных мультимедиа-проектов, типа музыкальных миксеров или программ для составления интерактивных фотоальбомов. В прошлом году, во времена расцвета интернет-экономики, shockwave.com удалось провести ряд анимационных проектов, самым интересным из которых был Stainboy Тима Бартона.

Тим Бартон — «взрослый» режиссер, в чьем портфолио такие фильмы, как «Бэтмен» и «Планета обезьян», был приглашен для осуществления проекта «Stainboy» — мультипликационного интернет-сериала с участием виртуального супергероя по имени Stainboy.

Проект создавался под руководством Бартона американской студией Flinch Studio (www.Flinch.com), занимающейся выпуском анимационной продукции и разработкой персонажей для интернета и телевидения. Работа продолжалась почти год, были применены очень интересные техники создания «акварельного» стиля во Flash. В результате получилось 6 эпизодов-похождений супергероя, которые можно посмотреть по адресу www.shockwave.com/minisites/stainboy/home.html

Другой интересный проект — Mondo MiniShows — продукция компании Mondomedia (www.mondomedia.com). Как следует из названия, MiniShows — это небольшие 2-3-минутные шоу различных направлений, большинство из которых построены по принципу ток-шоу, то есть ведущего, обсуждающего со своими гостями разные темы. Начав несколько лет назад с двух шоу: Like, News — интервью со знаменитостями (типа Саддам Хусейн, Борис Ельцин, Памела Андерсон) и Thugs On Film — обсуждения новых кинофильмов, сейчас компания производит около десятка шоу из областей спорта, культуры и т. д. Причем все делается в юмористически-пародийной манере, иногда с брутальностью, которая не прошла бы ни на одном телеканале. Выигрышная политика компании заключается в том, что она предоставляет эти шоу в аренду различным профильным интернет-сайтам, поэтому перечислить все адреса здесь невозможно. Просто зайдите на сайт www.mondomedia.com и посмотрите сами на эти высокопрофессиональные произведения современного шоу-бизнеса в Интернете.

Приведенные примеры дают представление о самых ярких (по мнению авторов) работах и проектах в области интернет-анимации. Кроме того, походите по разделу «shows» сайта www.shockwave.com, и вы найдете немало других произведений этого жанра, как качественных, так и не очень.

Что касается России, то действительно профессиональных, поставленных на производственную основу анимационных работ в Рунете нет. Авторам известен сайт www.multikov.net — каталог произведений российских аниматоров, однако это скорее любительский ресурс, содержащий работы энтузиастов.

Авторы статьи, представляющие компанию «Город-Интерактив», сами запускали некоммерческий проект «Существо со станции МИР» (http://sensation.weekend.ru), на котором и отрабатывались техники сопряжения классической анимационной школы и интернет-технологий. Именно о них и пойдет речь в следующей части.

Ресурсы по Flash-анимации

Практически, серьезных и профессиональных ресурсов, именно по Flash-анимации, в Интернете нет. Существуют страницы, посвященные обсуждению Flash в целом, на которых затрагивается тема анимации, и ресурсы для аниматоров, на которых иногда освещаются темы техники работы с Flash.

Два ключевых кадра созданы

Перечислим вкратце наиболее интересные и профессиональные сайты из обеих областей:

Между ними рисуется одна фаза

• FlashKit.com — большой мировой ресурс для «флешеров», включает в себя форумы, в том числе и по анимации, исходные материалы работ, новости мира «флешеров», ссылки на полезные ресурсы и книги, множество шрифтов, библиотек и прочих полезных материалов.
• Flasher.ru — российское сообщество флешеров. В принципе, по структуре похоже на flashkit.com, но с обязательным ингредиентом домашней кухни — разборками, перепалками и другими элементами, присущими родному Рунету.
• www.flashforward2001.com — сайт международного конкурса Flash-работ. Представлено много различных номинаций, а работы победителей несомненно заслуживают внимания.
• www.awn.com — Animation World Network — большой и, по-видимому, самый крупный ресурс профессиональных аниматоров. На этом сайте вы найдете практически любую информацию, касающуюся как производства анимации, так и новости о рынке анимации в целом.
• Cartoonnetwork.com — сайт одной из крупнейших компаний-производителей анимации. На сайте имеется раздел D.O.C. — Department of Cartoons, рассказывающий обо всех этапах производства классического мультфильма; приведены примеры работ над воплощением персонажей, прорисовки движений, создания сцен и фонов. Начинающему аниматору это будет очень полезно, так как наблюдение за процессом «оживления» героев просто завораживает.
• www.macromedia.com — естественно, нельзя не упомянуть сайт производителя, (mothership — «Родина-Мать», как его неофициально называют «флешеры» всего мира). На этом сайте вы не найдете ресурсов по анимации, однако заслуживают внимания разделы Site Of The Day и Showcase, в которых представлены лучшие (с точки зрения Macromedia) мультимедиа-работы в Интернете.

Возможности программы в области анимации

Надеемся, что, прочтя предыдущие разделы, вы получили общее представление о происходящем в области интернет-анимации, выполняемой с помощью программы Flash. Далее будут рассмотрены практические вопросы. Хотя главы немногословны, мы надеемся, что иллюстрации к описываемым техникам дадут понятие об основных принципах работы аниматора во Flash. Если у вас возникнут какие-то вопросы, авторы с удовольствием предоставят дополнительные разъяснения — пишите нам по адресу interactive@gorod.ru.

Покадровая анимация

Покадровая анимация — классическая анимация, суть которой в том, что рисуются сначала «компоновки» — ключевые движения персонажа, а потом движение фазуется, т. е. рисуются средние позиции между «компоновками». Таких фаз может быть сколь угодно много, в зависимости от характера движения (технически во Flash это делать очень удобно, т. к. есть возможность видеть несколько предыдущих и последующих картинок). Чем больше кадров между компоновками, тем плавнее и медленнее получается движение.

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

Основное отличие классической анимации в том, что персонаж в каждом кадре рисуется полностью, каждый кадр — это новая картинка. Соответственно кадров получается много, и «весит» такой фильм прилично, зато движение более естественное, живое. Такой и только такой техникой создаются самые лучшие произведения, но и трудоемкость этого процесса очень велика. Зачастую на создание минуты покадровой анимации уходит несколько месяцев. Зато, если приводить гастрономические аналогии, вы получаете отличное блюдо — ресторанного качества.

Персонаж создается из отдельных символов, нарисованных заранее и записанных в библиотеку.

Техника перекладки

Перекладка — также техника классической анимации, при которой анимационный персонаж расчленяется на части (крупные или мелкие — зависит от требования к движению и крупности планов) — ручки, ножки, хвостик. Если это нужно, даже пальчики или части лица, чтобы изобразить мимику и пр.

Части персонажа сохраняются в библиотеке Flash как символы (graphic или movie clips). Иногда нужно нарисовать несколько ракурсов одной и той же части тела — например лицо в анфас и профиль. Если, допустим, вам не нравится цвет или форма какой-то детали персонажа, ее нужно поправить только один раз в одном символе, поэтому работа с применением техники перекладки может существенно ускорить и «автоматизировать» процесс создания мультфильма.

Персонаж собирается в одном слое и двигает частями тела кадр за кадром. То есть для каждого последующего кадра анимации надо создать новый ключевой кадр (Insert KeyFrame) и мышкой составить из заготовленных частей персонажа его новое положение.

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

Естественно, за все надо платить: в данном случае это более условные, грубые движения персонажа и некоторая скованность в реализации замыслов — все-таки вы будете работать с «кирпичиками», как с конструктором.

Получается что-то типа блюда из бистро — приемлемое по качеству, быстро приготовимое, но не совсем уж Fast Food, о котором пойдет речь ниже.

Каждый новый кадр анимации составляется из тех же символов, что и предыдущий.

Анимация с помощью Motion Tween

Анимация с помощью motion tween основана на принципе классической анимации — компоновок и фазовки. С его помощью можно сделать любое количество фаз между ключевыми положениями. Это распространяется только на простые движения — сжатие, растяжение, движение по прямой, движение по траектории, поворот, увеличение. Если совместить некоторые из этих движений, можно добиться интересных эффектов, например изменения перспективы или ракурса. Минус в том, что такое движение, как походка человека, получается механическим.

Естественно, этот метод используется большинством начинающих аниматоров, т. к. прост и описан в справке к Flash. Но профессионализм проявляется не только в знании техники, но и в умелом и уместном ее применении, поэтому мы не отрицаем важность и полезность этой функции Flash.

Например, motion tween можно использовать для анимации кнопок или какой-нибудь механики, например стрелки часов, открывающихся дверей, движения неживых предметов (к примеру, полета камня).

Оптимизация технологического процесса (слои, клипы, библиотеки и их разумное использование)

Во Flash удобнее работать с перекладкой, дополняя ее фазовкой motion tween. Для этого нужно сохранить все детали анимационного ролика как символы. Допустим, если вам нужно, чтобы в кадре постоянно падал снег, то исходным символом будет одна снежинка, сохраненная как graphic (Символ 1). Эта снежинка падает через весь кадр — анимация с помощью motion tween будет более естественна, если снежинка станет падать не по прямой, а по волнистой траектории. Падение снежинки тоже сделаем символом (Символ 2 — movie clip). В Символ 3 (movie clip) поместим десяток падающих снежинок разного размера — Символов 2. Снег готов. Вложенность символов может быть бесконечной, главное — не запутаться в них.

Символ движется с помощью motion tween. Обратите внимание, что внутри символа находится еще один символ — машущая крыльями птица. Это — сочетание техник.

Разница между movie clip и graphic в том, что первый проигрывается полностью независимо от количества кадров в сцене и повторяется снова (снег идет беспрерывно). Символом graphic можно управлять внутри сцены — остановить его на нужном кадре или повторить столько раз, сколько необходимо.

Движение с помощью motion tween по направляющей

Озвучивание

Озвучивание — одна из самых сложных задач при создании мультфильма в программе Flash. Мало того, что создание действительно интересного звука — совершенно особая задача, требующая профессионального подхода (в нашей компании над этим трудится специалист-звукоинженер, композитор по образованию), постоянно возникают трудности технического характера — синхронизация, оптимальное сжатие сигнала и еще раз синхронизация.

Если нас совсем не интересует размер файла (например, Flash используется для мультфильма, который не будет воспроизводиться через Интернет), тогда самый правильный путь — создание отдельной звуковой дорожки и ее размещение в отдельном слое в том же файле, где находится графика, с режимом воспроизведения Stream. В этом режиме обеспечивается синхронизация с воспроизводимым звуком, причем, если процессор компьютера зрителя не успевает прорисовывать кадры с той скоростью, с которой идет звук, то они будут просто пропускаться. То есть существует гарантия, что вне зависимости от конфигурации компьютера пользователя звук будет до конца синхронизирован с изображением.

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

Существует еще один метод, при котором создаваемый саундтрек (только музыка без шумов и голосов, но большой длины) помещается в отдельный файл, и при начале проигрывания основного файла с графикой дается команда LoadMovie («звуковой файл.swf»), при котором происходит одновременное воспроизведение звука и его подкачка через Интернет. Такой метод позволяет написать достаточно объемное звуковое сопровождение, ведь при правильном сжатии звука (к примеру в формат MP3) происходит фактически потоковое воспроизведение. Однако возникают сложности с синхронизацией и опасность, что если у зрителя канал связи с Интернетом недостаточно быстрый для воспроизведения такого файла, то звук пропадет вообще.

Шумовые эффекты мы рекомендуем вставлять в ключевые кадры отдельного специального слоя. Если шумовые эффекты пересекаются, то вообще в несколько слоев. Синхронизация шумовых эффектов очень важна, поэтому размещение их в ключевых кадрах в нужном месте мультфильма — единственный способ добиться правильного результата.

Голоса героев мы также размещаем в ключевых кадрах, соответствующих времени начала их воспроизведения. Если фраза большая, например состоит из нескольких предложений, то следует разбить ее на небольшие кусочки и разместить каждый в нужном месте. При этом крайне важна интонация актера, который занимается озвучкой персонажа. В местах, где фраза будет разрезаться, надо добиться падения интонации голоса, так как разрыв звукового файла может оказаться заметен. Нам для хорошего результата приходится неоднократно переписывать звук. Что, собственно, происходит и при создании классического мультфильма — дубль, еще дубль.

После записи всех звуковых элементов, размещения их в фильме, предварительного сведения наступает последний этап — регулировка громкости. Встроенные средства Flash позволяют настраивать громкость музыкальной фразы в течение времени ее воспроизведения, необходимо лишь кропотливо и тщательно настраивать каждый звук, каждый голос, каждый шум.

Только после настройки звука мультфильм приобретет профессиональный вид.

Сверху вниз: символ «снежинка»; символ падающей снежинки; готовый снег, составленный из символов падающих снежинок с разной степенью увеличения.

Организация производства анимации (сценарий, звук, режиссура и т. п.)

Теперь перейдем к тому, с чего надо начинать — к грамотному и профессиональному отношению к творчеству. Правильно организованный процесс позволит, несмотря на кажущуюся сложность, в результате сделать мультфильм быстрее и качественнее. Итак…

Анимационный фильм — это история, придуманная и разыгранная режиссером для благодарных зрителей. Чтобы история была интересна и не вызывала у зрителя недоуменных вопросов (которые, скорее всего, он вам задать не сможет), режиссеру нужно хорошо подготовиться к рассказу.

Для начала пишется сценарий — основополагающий документ, в котором отражена вся суть создаваемого мультфильма. Сценарий надо продумать заранее, расписать все диалоги, представить себе все происходящее на экране. Отход от сценария на следующих стадиях чреват тяжелыми последствиями и увеличением времени (и стоимости) проекта.

Затем придумываются персонажи, их характеры и образы. На этом этапе выделяется главная тема всего рассказа. Далее режиссер создает раскадровку фильма — в ней представлена вся история картина за картиной, с разбивкой на эпизоды, сцены и планы. Придумываются способы, которыми будет воплощаться идея рассказа. Это часть работы, показывающая качество режиссерского замысла, можно сказать, высоту его полета. Даже при самых хороших художниках, но при отсутствии нормальной режиссуры, не удастся создать качественный мультфильм. Зато обратные примеры, когда глубина режиссуры вытягивала малобюджетные (или любительские) фильмы на топ-места в рейтингах, всем нам известны.

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

Затем делается собственно анимация (см. выше). После того как вся анимация готова, происходит окончательный монтаж и озвучивание — синхронные шумы (шаги, стуки, взрывы и пр.). Подкладывается фоновая музыка. Она может быть специально написана композитором под изображение, или изображение рисуется и монтируется под уже написанную музыку (видеоклип). Музыка дополняет изобразительный ряд.

Итак, фильм готов, история рассказана.

Процесс этот достаточно долгий и трудоемкий, но, в конце концов, никто не мешает вам не обращать внимания на все, что тут написано, и рисовать во Flash так, как вам взбредет в голову.

Удачи вам!!!

Об авторах: Ольга Кудрявцева (olga@gorod.ru) — художник-аниматор, «Город-Интерактив», профессия — режиссер анимационного фильма, ВГИК; Максим Манылов (mmo@gorod.ru ) — директор компании «Город-Интерактив», мультимедиа-подразделения компании «Город-Инфо»; Тимофей Непомнящий (timofey@gorod.ru) — технический директор компании «Город-Интерактив».