Практические уроки Macromedia Flash MX

Урок 7 - Ваш первый Flash-баннер

http://flashwm.nm.ru Давайте попробуем сделать простой баннер. Прежде всего необходимо четко представить себе, что мы хотим создать, то есть разработать сценарий. Чем лучше вы будете знать, что и как должно быть в вашем проекте – именно так называется работа во Flash-редакторе, – тем быстрее и проще будет осуществить задуманное. В нашем случае баннер будет очень простым: на фоне вращающегося квадрата выезжает надпись, которая затем растворяется. Создавать собственную анимацию во Flash может даже тот, кто абсолютно лишен способностей к рисованию (или способностей хоть отбавляй, а вот по пальчикам проехал бульдозер). Не стоит отчаиваться! Забинтуем многострадальные пальцы, пообещав себе в очередной раз не проверять, почему так хорошо работает мясорубка, и приступим к изучению основ будущего мастерства. Давайте попробуем сделать простой баннер. Прежде всего необходимо четко представить себе, что мы хотим создать, то есть разработать сценарий. Чем лучше вы будете знать, что и как должно быть в вашем проекте – именно так называется работа во Flash-редакторе, – тем быстрее и проще будет осуществить задуманное. В нашем случае баннер будет очень простым: на фоне вращающегося квадрата выезжает надпись, которая затем растворяется. Как известно, в кинематографе используется частота 24 кадра в секунду, но в мультипликации, особенно предназначенной для Интернета, вполне достаточно 12. Чем больше будет частота кадров, тем более плавными получатся движения, но при этом значительно сильнее загружается процессор, что становится существенно в сложных сценах. Именно от процессора зависит скорость воспроизведения Flash, и на разных компьютерах она может заметно различаться. Обычно это проявляется в торможении или прерывистом движении, особенно когда сложная анимация синхронизирована со звуком. Определившись со сценарием, приступим к творчеству. Для начала решим, какого размера должен быть баннер. Пусть это будет общепринятый в баннерообменных сетях формат 468x60. Именно эти размеры необходимо указать в панели Movie properties (параметры фильма) Modify Movie [Ctrl+M], в полях Width (ширина) и Height (высота). В этом же окне выберем цвет фона (background Color) нашего баннера, а также в поле Frame Rate укажем значение fps – количество кадров в секунду. После того как указаны все параметры фильма и нажата кнопка ОК, проверьте масштаб отображения сцены. При необходимости установите 100%. Теперь создадим основу будущего баннера – движущуюся надпись: Выберите инструмент Text [T]. Откройте панель настройки данного инструмента: Window panels Characters [Ctrl+T] или нажмите в правом нижнем углу окна кнопку с изображением буквы «А». В выпадающем меню Font открытой панели Characters выберите кириллический шрифт, например arial Cyr. Установите необходимый размер, например 35, и цвет. Щелкните на месте начала надписи (в нашем случае — в начале баннера) и введите текст. Если вдруг выяснилось, что выбранный размер или цвет не подходят, переключитесь на инструмент arrow [M] (черная стрелка на панели инструментов) и выделите текст, щелкнув по нему. Вокруг текста появится рамка, теперь на панели Characters можно изменить его параметры: размер, цвет шрифта и т. п. Настало время вашей первой анимации. Успокойте дрожащие от волнения руки и продолжайте творить: Преобразуйте текст в символ: Insert Convert to Symbol [F8]. Не забудьте дать ему соответствующее имя и указать тип Graphic. При этом созданный символ будет помещен в библиотеку текущего проекта. Выделите 20-й кадр на линейке Timeline и вставьте ключевой кадр Insert Keyframe [F6]. Слева от нового кадра появится серая полоска, идущая от первого ключевого кадра. Вернитесь в первый кадр и переместите надпись на баннере за егограницу, например, за правый край. Не снимая выделения с первого кадра, откройте панель параметров кадра Window panels Frame [Ctrl+F] (можно также нажать кнопку Show Instance в правом нижнем углу экрана), затем переключитесь на вкладку Frame. В выпадающем меню Tweening (построение промежуточных кадров) выберите тип анимации – Motion, то есть анимацию движения. При этом серая полоска между ключевыми кадрами станет голубой со стрелкой вправо. Поздравляю! Вы только что заставили текст двигаться. Убедиться в этом можно, перемещая указатель кадров, расположенный над линейкой Timeline, или включив режим предварительного просмотра: Control Test Movie [Ctrl+Enter]. Время, которое займет проигрывание фильма или клипа от начала воспроизведения, отображается в строке статистики Timeline. Реальная длительность отдельных эпизодов может незначительно отличаться от отображаемого значения, которое вычисляется на основе установленного fps. Оно зависит в основном от сложности расчетов, требующихся для построения изображения отдельного кадра, и быстродействия компьютера. Использование слоев дает большие возможности при создании фильма. Кроме того, что объекты, помещенные на разные слои, можно накладывать или скрывать, создавая имитацию объема сцены, правильное применение слоев может заметно уменьшить размер готового файла. Любой объект, который предстоит анимировать, нужно помещать на собственный слой. Так вы значительно быстрее добьетесь нужных эффектов и сократите загрузку процессора. Для каждого слоя старайтесь придумать подходящее название. Для изменения имени слоя щелкните дважды левой кнопкой мыши на названии слоя и введите новое. Если предполагается, что на кнопках будут анимированные объекты, создайте заранее символы Movie clip, а затем просто разместите их в соответствующем кадре кнопки. Согласно нашему сценарию, текст должен не только «выехать» на экран, но и, побыв некоторое время, исчезнуть. Следовательно, придется еще немного помучить символ с текстом, ведь мы анимируем именно символ, а не сам текст. Вставьте новый ключевой кадр, на этот раз 60-й. Надеюсь, вы уже привыкли к тому, что для этого надо выделить соответствующий кадр и нажать F6? Тем самым мы установили время статического отображения текста после его остановки – примерно на три с половиной секунды. Вставьте последний ключевой кадр, например 80-й. Из выпадающего списка выберите эффект alpha и, передвигая ползунок, установите нулевую прозрачность. Этим мы указали редактору Flash, что последний кадр будет прозрачным, но не объяснили ему, что менять прозрачность следует постепенно. Как уже, наверное, понятно, необходимо анимировать отрезок между ключевыми кадрами, в нашем случае — между 60-м и 80-м. Перейдите на предыдущий ключевой кадр (60-й) и установите для него тип анимации Motion так же, как мы делали это с первым ключевым кадром. Основа нашего баннера готова. Текст делает то, что мы от него хотели, убедитесь в этом, включив тестовый просмотр: Control Test Movie [Ctrl+Enter]. Теперь необходимо добавить последний элемент фильма – вращающийся квадрат: Создайте новый символ: Insert New Symbol [Ctrl+F8], присвоив ему необходимое имя и установив тип Movie Clip. Выберите инструмент Rectangle [R] и установите нужный цвет заливки и тип границ. Цвет можно выбрать на палитре (панель Mixer), вызываемой через меню (Window panels Mixer), или соответствующей кнопкой в правом нижнем углу программы. Нарисуйте квадрат, постаравшись сделать так, чтобы метка центра объекта действительно приходилась на центр квадрата, или переместите уже нарисованный квадрат. Преобразуйте квадрат в графический символ, как вы ранее это сделали с текстом. Вставьте ключевой кадр, например, на 30-м фрейме. Выделите первый кадр, откройте панель Frame для данного кадра и укажите уже знакомый тип анимации Motion. В выпадающем меню Rotation выберите вращение по часовой стрелке – CW, а в поле Times укажите, сколько оборотов должен сделать объект (например, один). Осталось совсем немного — разместить созданный Movie-клип на сцене, то есть на нашем баннере: Перейдите в режим сцены, щелкнув на вкладке Scene1 над списком слоев. Добавьте новый слой. Для этого необходимо нажать на изображение бумажки с загнутым уголком и плюсиком под списком слоев. Перейдите в первый кадр созданного слоя, выделив его мышкой. Откройте библиотеку проекта: Window Library [Ctrl+L] или щелкнув на книжке в правом нижнем углу экрана. Найдите в библиотеке Movie-клип вращающегося квадрата и перенесите его на сцену, расположив на нужном месте баннера. Если, создавая квадрат, вы ошиблись с размерами, – ничего страшного, воспользуйтесь модификатором Scale, изменив размеры квадрата до необходимых. Убедитесь, что Flash создал на панели Timeline неанимированную линейку для данного слоя, равную по продолжительности предыдущему. Если этого не произошло, щелкните на последнем кадре слоя и вставьте пустой кадр: Insert/Flame [F5]. Просмотрите созданный фильм в тестовом режиме. Что не так? Правильно! Вращающийся квадрат закрывает собой надпись. Все верно, ведь мы его поместили на слой, расположенный выше слоя с текстом. Достаточно перетащить верхний слой вниз. Перемещать слои следует, нажав на название слоя и передвигая его вверх или вниз. Конечно, можно было бы остановиться на том, что уже создано, но покой нам только снится! Не кажется ли вам, что вращающийся квадрат очень одинок и ему не помешала бы пара разноцветных приятелей? Для этого не придется создавать новые Movie-клипы, достаточно использовать уже имеющийся с небольшими изменениями для каждого экземпляра: Разместите на баннере еще пару квадратов, перетащив соответствующий Movie-клип из библиотеки проекта на сцену, можно на уже имеющийся слой с первым квадратом. После того как квадраты заняли свое место и подогнаны по размерам, выделите один из них, щелкнув по нему мышью. Откройте панель эффектов экземпляра Effects и в выпадающем меню выберите эффект Tint (оттенок). Установите необходимый цвет для каждого из экземпляров квадратов. Раз уж речь зашла о баннерах, хочется упомянуть, что некоторые баннерообменные сети ограничиваются принятием Flash-роликов определенного размера, а некоторые требуют обязательного размещения кнопки, выполняющей роль фона (подложки) со специальным сценарием на actionSript. Баннер немыслим без возможности перехода на сайт при щелчке на нем мышью, в противном случае это уже не баннер, а обыкновенный Flash-ролик. За обработку нажатий во Flash отвечают символы-кнопки с присвоенными им фрагментами кода на actionScript. Создание кнопки мало отличается от создания Movie-клипа: Insert New Symbol [Ctrl+F8] (тип символа – button). Основная особенность кнопки состоит в том, что ее Timeline используется нестандартно. Она содержит всего четыре кадра, никак не связанных с последовательностью анимации. В кадре Up представлено обычное состояние кнопки, в кадре Over – вид, когда над ней находится курсор мыши, Down – нажатая кнопка и Hit – область реагирования. Нарисуйте прямоугольник в первом кадре кнопки, равный по размерам всему баннеру и имеющий цвет фона. Размеры можно проконтролировать на панели Info, вызываемой кнопкой в правом нижнем углу окна с изображением квадрата и координатных стрелок, или через меню: Window panels Info [Ctrl+alt+I]. Перейдите на второй фрейм – Over, вставьте ключевой кадр [F6]. Измените цвет прямоугольника, выделив его и выбрав цвет заливкиFill. Установите область реагирования кнопки во фрейме – Hit, просто вставив еще один кадр [F5] для данного фрейма. Вернитесь на основную сцену, создайте новый слой и разместите в нем кнопку, совместив ее с границами баннера. Теперь необходимо заставить кнопку открывать необходимый сайт. Для этого нам надо научиться присваивать объектам сценарий на actionScript: Выделите кнопку и откройте панель Object action, нажав в нижнем правом углу кнопку с изображением голубой стрелки или выбрав в меню Window actions [Ctrl+alt+a]. В правом окне открывшейся панели найдите группу basic actions и дважды щелкните на команде Get URL или просто перетащите ее в правое окно. Выделите вторую строку. Заполните поля в нижней части окна. В поле URL введите имя своего любимого сайта (например, http://www.mgraphics.ru), а в поле Window выберите значение «_blank» – открывать в новом окне (если вы создавали свои веб-проекты, это значение должно быть вам хорошо знакомо). Поле Variable используется при необходимости передавать данные серверному CGI-скрипту с использованием методов GET и pOST; в нашем случае оставьте значение «Don't sent». В результате в правой части окна у нас получится следующий сценарий: on (release) { getURL ("http://www.mgraphics.ru", "_blank"); } Вот мы и создали баннер, а точнее — Flash-ролик с элементами интерактивности. Пришла пора сохранить созданный проект. Сохранение ничем не отличается от аналогичного процесса в других программах. Созданный файл имеет расширение .fla, его нельзя использовать для размещения в Интернете, так как это формат редактора, да и объем этого файла может быть достаточно большим, в нашем случае около 20 Кбайт. Для размещения фильма на веб-странице необходимо сохранить его в подходящем формате. Как правило, создаются сразу два файла: HTML-страница и файл формата .swf – собственно сам фильм. Это вовсе не означает, что мы не можем использовать другие форматы! При желании можно опубликовать проект в таких распространенных графических форматах, как GIF, JpEG, pNG, доступен видеоформат MOV, а при желании Flash создаст для вас исполняемый файл в формате .exe, и ваш фильм можно будет показать даже на компьютерах, где не установлен Flash. Откройте панель настройки публикации: File publish Settings. Выберите нужные форматы, в нашем случае — HTML и Flash. Нажмите кнопку publish. Все! Процесс создания баннера можно считать законченным. Теперь в папке, в которой вы сохранили Flash-проект, появятся еще два файла. После публикации размер готового файла .swf будет гораздо меньше исходного .fla (в нашем случае меньше 3 Кбайт). Конечно, в небольшой статье невозможно описать все приемы работы во Flash. Но надеюсь, после этого небольшого примера, когда буквально за несколько минут был создан Flash-баннер, применена пара эффектов анимации и создана кнопка, реагирующая на прохождение над ней курсора мыши и открывающая сайт после нажатия, вы убедились, что работать с Flash действительно легко и интересно. Мы не успели коснуться таких приемов анимации, как трансформация, когда один объект превращается в другой, или движение по заданной траектории. Не познакомились с различными типами слоев, например маскирующим слоем, позволяющим достигать удивительно красивых эффектов. Не изучили возможности текстовых полей: динамических – изменяемых в ходе работы сценария actionScript, полей для ввода – дающих возможность пользователю вводить необходимую информацию, которую затем можно передать для обработки серверу. Мы почти не говорили об actionScript, языке, очень похожем по своей структуре на JavaScript, но предназначенном для работы с объектами анимации. Его применение позволяет создать фильм, полный движения, но состоящий из одного-двух кадров. Не коснулись мы и такого нововведения пятой версии Flash, как интеллектуальные Smart-клипы. Собственно, и приемы рисования во Flash мы не рассматривали. Но все это нетрудно изучить самостоятельно. Главное начать, а это, будем надеяться, вы сегодня смогли.