Библиотека Интернет Индустрии I2R.ru

Как уже не раз говорилось, Flash — это программа, предназначенная для создания изображений малого объема. А где еще как не в Интернете, где нужно передать максимум информации, используя минимум средств, существует большая необходимость в таких файлах?

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

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

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

Обратимся немного к истории анимации и видео, которая уходит корнями еще за братьев Люмьер с их знаменитым "Поездом". Всем известно, что если нарисовать какой-либо видоизменяющийся объект на уголках страниц блокнота, а затем очень быстро его пролистать, то создается впечатление постепенно изменяющейся картинки. Подобный эффект был назван анимацией.
Если обратить свой взор к телевидению, то там действует тот же принцип, только переворачиваются не страницы, а перемещаются кадры, которых в одну секунду проходит 24 штуки. Если рассматривать компьютерную анимацию, то в принципе она работает так же, однако существуют различные способы ее создания и реализации. Сегодня мы рассмотрим самый простой, но от этого ничуть не менее популярный, способ создания анимации, который можно назвать пошаговым. Такое имя ему дано не случайно, а потому, что при такой работе создаются отдельные кадры изображения, которые потом и сменяют друг друга.
Как давно известно, чтобы что-нибудь усвоить, необходимо воспользоваться изученным материалом на практике. Мы пойдем еще более простым путем, а именно будем рассматривать теорию с точки зрения практики.

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

Итак. В качестве примера предлагаем создать самую элементарную анимацию: появляющийся постепенно приветственный текст "Hallo" с изменяющимся цветом букв.

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

Напишите любой текст, который вы собираетесь анимировать. Не следует делать его слишком длинным, так как придется много работать, что в принципе не вредно, но достаточно бесполезно. Вполне хватит количества букв, содержащихся в слове "Hallo", например.

Написанный сейчас текст ляжет в основу будущей анимации, поэтому подберите необходимые параметры, для чего обратите внимание на такие палитры, как Character, Paragraph и Text Options.

Для того чтобы активизировать данный инструмент, можно воспользоваться клавиатурой, нажав клавишу "Т". Текст во Flash имеет отличия от прочих объектов, так как он выступает в виде графической накладки, то есть не влияет на нижерасположенные фигуры, не разрезает их. Несомненным удобством является то, что буквы, написанные с помощью данного инструмента, можно редактировать после как обычный текст (если он, конечно, не переведен в формат объектов), а именно: можно удалять отдельные фрагменты, заменять их, выбирать другой шрифт и размер, а также производить ряд других манипуляций. Основными палитрами при работе с данным инструментом являются уже вышеупомянутые Character, Paragraph и Text Options.

• Font (Шрифт). Выделите любой фрагмент текста и выберите шрифт из раскрывающегося списка. Это приведет к замене шрифта на всех выделенных буквах.
• Font Size (Размер букв). Данная опция позволяет редактировать размер выделенных букв.
• Bold (Полужирный) и Italic (Курсив). Действие этих функций аналогично тому, которое можно встретить в любом графическом или текстовом редакторе, а именно с их помощью буквы делаются толще или становятся наклонными соответственно.
• Color (Цвет). Здесь можно изменить цвет букв, выбрав его из дополнительной палитры. Обратите внимание на то, что в выбранный оттенок окрасятся все выделенные буквы.
• Tracking (Межбуквенное расстояние). Данный параметр используется тогда, когда необходимо увеличить или уменьшить расстояние между буквами в тексте.
• Character Position (Месторасположение символа). Опция, используемая при многоуровневом вводе текста, например, при проставлении индексов.
• Kern (Кернинг). Применяется для изменения расстояния между буквами, чем достигается лучшая читаемость.
• URL (Унифицированный указатель ресурсов). Применяется при создании работ для всемирной паутины и для преобразования обычного текста в ссылку.
• Палитра Paragraph применяется для изменения месторасположения текста на изображении.
• Align (Выравнивание). Параметр, предназначенный для выравнивания текста. Действует аналогично тому же Word-параметру, поэтому заострять внимание не будем.

• Text Type (Типы текста).
• Static Text — обычный статичный текст.
• Dynamic Text — используется для динамического, то есть постоянно изменяющегося текста.
• Input Text — для создания обычного текстового пространства.

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

Теперь приступим к непосредственному созданию анимации, для чего нам понадобится обратиться к верхней части рабочего пространства.

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

На данном этапе необходимо посчитать количество кадров, которое будет в вашей анимации. Их должно быть на 1 больше, чем количество букв в слове, используемом в качестве основы.

Щелкните левой клавишею мыши по 2 кадру и, не отпуская ее, протяните до последнего необходимого кадра (если вы работаете с предложенным ранее словом, то выделять необходимо область до 6 кадра включительно).

Щелкните по выделенным кадрам правой клавишею мыши, что вызовет появление дополнительного раскрывающегося меню, в котором необходимо выбрать пункт Insert Frame. Теперь вы можете передвигаться с помощью мыши по всем созданным кадрам. На данный момент они все выглядят одинаково, то есть везде присутствует одна и та же надпись.

Далее необходимо сделать каждый кадр ключевым, для чего достаточно их выделить, вызвать упомянутое ранее дополнительное меню и выбрать там команду Insert Keyframe. На временной линейке выполненное действие отобразится в виде черных жирных точек, расположенных внизу каждого кадра и говорящих о том, что кадры, помеченные таким образом, являются ключевыми.

Для того чтобы создать иллюзию изменения картинки, необходимо, чтобы каждый последующий кадр отличался от предыдущего.

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

• В пятом удалите одну последнюю букву в слове.
• В четвертом уже должно не доставать двух букв и так далее.
• Первый кадр должен остаться чистым, то есть без всяких надписей.
• Чтобы просмотреть предварительный результат работы, достаточно нажать клавишу Enter. Если возникает желание замкнуть кадры, то есть чтобы они просматривались по порядку, а затем с последнего переходили на первый и так все повторялось по кругу, то необходимо проделать следующее: Control->Loop Playback.
• По сути, анимация уже создана, только состоит она пока только из появляющихся букв. Для того чтобы создать эффект игры цвета, необходимо несколько преобразовать каждый кадр.
• Обратите внимание на цвет, которым написан текст, допустим, он был черным. Для редактирования создаваемого эффекта активизируйте на временной линейке третий кадр и измените цвет первой буквы, скажем, на темно-зеленый (вторая буква остается черной).
• Переключитесь на следующий кадр и сместите все цвета слева направо. Теперь они должны располагаться следующим образом: последняя из видимых букв — черная, предпоследняя (та, которая на прошлом кадре была окрашена в черный) теперь должна стать темно-зеленой, а первая, например, салатовой.
• Активизируйте следующий кадр и повторите перестановку цветов, так продолжайте то того момента, пока не появится вся надпись. Больше никаких преобразований на данном этапе проводить не станем, а просмотрим получившийся результат, для чего достаточно нажать клавишу Enter.
• На этом создание пошаговой анимации можно считать завершенным.

Обратите внимание на то, что если вы хотите добавить еще какие-нибудь изменения, то достаточно обратиться к временной линейке и изменить один из ключевых кадров.

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

После этого перед вами появится диалоговое окно, где необходимо изменить всего один параметр — Frame Rate, который по умолчанию равен 12 кадрам в секунду, что в 2 раза меньше, чем при просмотре телевизора.