Создавать собственную анимацию во Flash может даже тот, кто абсолютно лишен способностей к рисованию (или способностей хоть отбавляй, а вот по пальчикам проехал бульдозер). Не стоит отчаиваться! Забинтуем многострадальные пальцы, пообещав себе в очередной раз не проверять, почему так хорошо работает мясорубка, и приступим к изучению основ будущего мастерства.
Давайте попробуем сделать простой баннер. Прежде всего необходимо четко представить себе, что мы хотим создать, то есть разработать сценарий. Чем лучше вы будете знать, что и как должно быть в вашем проекте - именно так называется работа во Flash-редакторе, - тем быстрее и проще будет осуществить задуманное. В нашем случае баннер будет очень простым: на фоне вращающегося квадрата выезжает надпись, которая затем растворяется.
Как известно, в кинематографе используется частота 24 кадра в секунду, но в мультипликации, особенно предназначенной для Интернета, вполне достаточно 12. Чем больше будет частота кадров, тем более плавными получатся движения, но при этом значительно сильнее загружается процессор, что становится существенно в сложных сценах. Именно от процессора зависит скорость воспроизведения Flash, и на разных компьютерах она может заметно различаться. Обычно это проявляется в торможении или прерывистом движении, особенно когда сложная анимация синхронизирована со звуком.
Определившись со сценарием, приступим к творчеству. Для начала решим, какого размера должен быть баннер. Пусть это будет общепринятый в баннерообменных сетях формат 468x60. Именно эти размеры необходимо указать в панели Movie Properties (параметры фильма) Modify Movie [Ctrl+M], в полях Width (ширина) и Height (высота). В этом же окне выберем цвет фона (Background Color) нашего баннера, а также в поле Frame Rate укажем значение fps - количество кадров в секунду.
После того как указаны все параметры фильма и нажата кнопка ОК, проверьте масштаб отображения сцены. При необходимости установите 100%.
Теперь создадим основу будущего баннера - движущуюся надпись:
Настало время вашей первой анимации. Успокойте дрожащие от волнения руки и продолжайте творить:
Поздравляю! Вы только что заставили текст двигаться. Убедиться в этом можно, перемещая указатель кадров, расположенный над линейкой Timeline, или включив режим предварительного просмотра: Control Test Movie [Ctrl+Enter].
Время, которое займет проигрывание фильма или клипа от начала воспроизведения, отображается в строке статистики Timeline. Реальная длительность отдельных эпизодов может незначительно отличаться от отображаемого значения, которое вычисляется на основе установленного fps. Оно зависит в основном от сложности расчетов, требующихся для построения изображения отдельного кадра, и быстродействия компьютера.
Использование слоев дает большие возможности при создании фильма. Кроме того, что объекты, помещенные на разные слои, можно накладывать или скрывать, создавая имитацию объема сцены, правильное применение слоев может заметно уменьшить размер готового файла. Любой объект, который предстоит анимировать, нужно помещать на собственный слой. Так вы значительно быстрее добьетесь нужных эффектов и сократите загрузку процессора.
Для каждого слоя старайтесь придумать подходящее название. Для изменения имени слоя щелкните дважды левой кнопкой мыши на названии слоя и введите новое.
Если предполагается, что на кнопках будут анимированные объекты, создайте заранее символы Movie clip, а затем просто разместите их в соответствующем кадре кнопки.
Согласно нашему сценарию, текст должен не только «выехать» на экран, но и, побыв некоторое время, исчезнуть. Следовательно, придется еще немного помучить символ с текстом, ведь мы анимируем именно символ, а не сам текст.
Этим мы указали редактору Flash, что последний кадр будет прозрачным, но не объяснили ему, что менять прозрачность следует постепенно. Как уже, наверное, понятно, необходимо анимировать отрезок между ключевыми кадрами, в нашем случае - между 60-м и 80-м.
Основа нашего баннера готова. Текст делает то, что мы от него хотели, убедитесь в этом, включив тестовый просмотр: Control Test Movie [Ctrl+Enter].
Теперь необходимо добавить последний элемент фильма - вращающийся квадрат:
Осталось совсем немного - разместить созданный Movie-клип на сцене, то есть на нашем баннере:
Просмотрите созданный фильм в тестовом режиме. Что не так? Правильно! Вращающийся квадрат закрывает собой надпись. Все верно, ведь мы его поместили на слой, расположенный выше слоя с текстом. Достаточно перетащить верхний слой вниз. Перемещать слои следует, нажав на название слоя и передвигая его вверх или вниз.
Конечно, можно было бы остановиться на том, что уже создано, но покой нам только снится! Не кажется ли вам, что вращающийся квадрат очень одинок и ему не помешала бы пара разноцветных приятелей? Для этого не придется создавать новые Movie-клипы, достаточно использовать уже имеющийся с небольшими изменениями для каждого экземпляра:
Раз уж речь зашла о баннерах, хочется упомянуть, что некоторые баннерообменные сети ограничиваются принятием Flash-роликов определенного размера, а некоторые требуют обязательного размещения кнопки, выполняющей роль фона (подложки) со специальным сценарием на ActionSript.
Баннер немыслим без возможности перехода на сайт при щелчке на нем мышью, в противном случае это уже не баннер, а обыкновенный Flash-ролик. За обработку нажатий во Flash отвечают символы-кнопки с присвоенными им фрагментами кода на ActionScript.
Создание кнопки мало отличается от создания Movie-клипа: InsertёNew Symbol [Ctrl+F8] (тип символа - Button). Основная особенность кнопки состоит в том, что ее Timeline используется нестандартно. Она содержит всего четыре кадра, никак не связанных с последовательностью анимации. В кадре Up представлено обычное состояние кнопки, в кадре Over - вид, когда над ней находится курсор мыши, Down - нажатая кнопка и Hit - область реагирования.
Теперь необходимо заставить кнопку открывать необходимый сайт. Для этого нам надо научиться присваивать объектам сценарий на ActionScript:
on (release) {
getURL ("http://www.flash.polarcom.ru", "_blank");
}
Вот мы и создали баннер, а точнее - Flash-ролик с элементами интерактивности. Пришла пора сохранить созданный проект. Сохранение ничем не отличается от аналогичного процесса в других программах. Созданный файл имеет расширение .fla, его нельзя использовать для размещения в Интернете, так как это формат редактора, да и объем этого файла может быть достаточно большим, в нашем случае около 20 Кбайт. Для размещения фильма на веб-странице необходимо сохранить его в подходящем формате. Как правило, создаются сразу два файла: HTML-страница и файл формата .swf - собственно сам фильм. Это вовсе не означает, что мы не можем использовать другие форматы! При желании можно опубликовать проект в таких распространенных графических форматах, как GIF, JPEG, PNG, доступен видеоформат MOV, а при желании Flash создаст для вас исполняемый файл в формате .exe, и ваш фильм можно будет показать даже на компьютерах, где не установлен Flash.
Все! Процесс создания баннера можно считать законченным. Теперь в папке, в которой вы сохранили Flash-проект, появятся еще два файла. После публикации размер готового файла .swf будет гораздо меньше исходного .fla (в нашем случае меньше 3 Кбайт).
Конечно, в небольшой статье невозможно описать все приемы работы во Flash. Но надеюсь, после этого небольшого примера, когда буквально за несколько минут был создан Flash-баннер, применена пара эффектов анимации и создана кнопка, реагирующая на прохождение над ней курсора мыши и открывающая сайт после нажатия, вы убедились, что работать с Flash действительно легко и интересно. Мы не успели коснуться таких приемов анимации, как трансформация, когда один объект превращается в другой, или движение по заданной траектории. Не познакомились с различными типами слоев, например маскирующим слоем, позволяющим достигать удивительно красивых эффектов. Не изучили возможности текстовых полей: динамических - изменяемых в ходе работы сценария ActionScript, полей для ввода - дающих возможность пользователю вводить необходимую информацию, которую затем можно передать для обработки серверу. Мы почти не говорили об ActionScript, языке, очень похожем по своей структуре на JavaScript, но предназначенном для работы с объектами анимации. Его применение позволяет создать фильм, полный движения, но состоящий из одного-двух кадров. Не коснулись мы и такого нововведения пятой версии Flash, как интеллектуальные Smart-клипы. Собственно, и приемы рисования во Flash мы не рассматривали. Но все это нетрудно изучить самостоятельно. Главное начать, а это, будем надеяться, вы сегодня смогли.