Приступаем к освоению новых возможностей. На левой панели выбираем инструмент «Text». Щелкнем мышкой в любом месте рабочего поля и напишем какой-нибудь текст, например, «FLASH ANIMATION».

{mosloadposition debug}

Введенный текст можно изменять. Почти как в стандартном текстовом редакторе. Выделим текстовый блок мышкой и обратим внимание на закладку «Properties» в нижней части окна. Попробуем изменить начертание и размер шрифта, цвет... Все основные параметры текста находятся здесь. Иногда требуется увеличить расстояние между буквами. Это несложно сделать. В поле «A\V» из выпадающего списка выбираем нужное значение либо вносим его вручную. Если мы хотим разместить текст (или любой другой объект) по центру рабочей области, то придется включить дополнительную панель выравнивания. Входим в меню «Window» и выбираем пункт «Align». Панель «Align» появилась в списке панелей справа. Щелкнув мышкой по заголовку, мы вызовем окно со всеми функциями. Пункт «To Stage» («К выделенному объекту») уже включен. Теперь осталось выровнять текст по центру. Для этого нажимаем на кнопки «Align horizontal center» и «Align vertical center». После внесения изменений можно закрыть панель. Давайте попробуем использовать эффект работы с прозрачностью. Объект (в данном случае текст) на заданном кадре будет становиться прозрачным до полного исчезновения, а затем снова появляться. Эта трансформация будет проходить на протяжении 20 кадров. Будем работать постепенно. Итак, на десятом кадре создадим ключевую метку. Для этого щелкаем правой кнопкой мышки на десятом кадре и выбираем пункт «Insert Keyframe». Теперь указываем, что на протяжении этого фильма будут происходить изменения (движение). Для этого отметим щелчком мыши слой с текстом. А затем нажимаем правой кнопкой мышки в любом месте выделенной области и в появившемся меню выбираем пункт «Create Motion Tween». Кстати, последовательность создания кадров может быть иной. Возможно, будет удобнее сначала создать движение («motion tween»), а потом вставлять ключевые кадры («keyframe»). Переходим на последний кадр и инструментом «Selection Tool» отмечаем текст. Попробуем сделать его невидимым. Для этого нам потребуется управлять настройками цвета по alfa-каналу. На панели дополнительных опций в нижней части окна программы из списка «Color» выбираем пункт «Alfa». Убедимся, что у нас отмечен последний кадр. Именно на нем изображение станет прозрачным (невидимым). В поле «Alfa Amount» устанавливаем значение эффекта в 0% (полная прозрачность). Надпись исчезла на рабочем поле. Посмотрим на результат наших действий. Для этого щелкнем мышкой по первому кадру и нажмем клавишу «Enter» на клавиатуре. Запустится проигрывание анимации. Сохраним исходный файл. Входим в меню «File» и выбираем пункт «Save As...». Откроется стандартное окно сохранения файла. Выбираем из списка нужный каталог (папку) и вносим название файла. После этого нажимаем кнопку «Сохранить». Если мы захотим изменить текст и его параметры (цвет, начертание и т.д.), то нам придется открыть раздел редактирования. Щелкаем правой кнопкой мышки по тексту и в появившемся меню выбираем пункт «Edit». Здесь мы можем внести любые изменения. Например, изменим цвет текста на синий. Для возврата в редактирование анимации нажимаем кнопку «Edit Scene» и из списка выбираем «Scene 1». Половина нашего фильма готова. Надпись плавно исчезает на последнем кадре. Давайте добавим последнюю часть фильма и заставим надпись появиться снова. Щелкаем правой кнопкой мышки по двадцатому кадру и в появившемся меню выбираем пункт «Insert Keyframe». Нам не потребуется указывать дополнительно, что у нас будут происходить изменения. Программа учитывает это автоматически. Теперь у нас обратная ситуация. Мы будем работать с альфа-каналом, но значение прозрачности изображения нужно установить 100%. В этом случае объект снова станет видимым. Переходим на последний кадр, выделяем текст и в поле «Alfa Amount» устанавливаем нужное значение. Анимация готова! Запустим проигрывание. Помните, как это делается? Устанавливаем указатель на первый кадр щелчком мыши и нажимаем клавишу «Enter». Исходный файл у нас есть, но будет неплохо сохранить и изменения. Входим в меню «File» и на этот раз выбираем пункт «Save». В этом случае файл анимации сохранится под уже имеющимся именем. Для того чтобы создать и просмотреть HTML-файл с уже включенной в него анимацией в формате «Flash», нажимаем клавишу «F12» на клавиатуре или входим в меню «File» и выбираем пункт «Publish Preview» – «Default».

В программе «Flash» мы освоили простые движения фигур. Смайлик двигался по прямой линии, заголовок с текстом стоял на одном месте. Теперь нам предстоит движение объектов по сложным траекториям. Например, попробуем сделать баннер с плавающим по волнам корабликом. Как и обычно, создаем новый чистый файл нажатием кнопки «Flash File (ActionScript 3.0)». В редакторе векторной графики, таком как CorelDRAW!, мы подготовили изображение простого парусника и сохранили его в формат WMF. Теперь его нужно импортировать в новый файл программы Flash. Входим в меню «File» – «Import» – «Import to Stage» и в открывшемся окне выбираем нужный каталог. Отмечаем файл щелчком мыши и нажимаем кнопку «Открыть». На рабочем поле программы появился симпатичный кораблик. Поскольку картинка создана в редакторе векторной графики, сейчас каждый ее элемент представляет собой отдельный объект. Объединим все элементы для более комфортной работы. Выделяем все части изображения, входим в меню «Modify» и выбираем пункт «Group». Теперь кораблик представляет один объект. Изображение немного крупновато, поэтому уменьшим размер кораблика. На левой панели выбираем инструмент «Free Transform Tool». Удерживая нажатой клавишу «Shift» на клавиатуре, захватываем мышкой любую из угловых меток и движением по диагонали уменьшаем размер картинки. Не забываем, что то же самое можно проделать, внеся значения в поля «W» (ширина) и «H» (высота) на панели «Properties» в нижней части окна. Затем поместим кораблик в левую часть рабочей области. Наша следующая задача – заставить кораблик двигаться по изогнутой линии. Для этого мы сначала должны ее нарисовать. Для обозначения траектории движения существуют специальные слои. Создадим такой слой из меню «Insert» – «Time Line» – «Motion Guide». На панели управления анимацией появился новый слой «Guide: Layer 1». Слова «Layer 1» в названии этого поля говорят о том, что мы будем создавать траекторию движения для объекта, находящегося на слое «Layer 1». Чтобы изображение кораблика нам не мешало рисовать линию, временно отключим его. Для этого щелкаем по точке, которая находится в строке слоя «Layer 1» под изображением глаза. Можно приступить к обозначению траектории движения. На левой панели выбираем инструмент «Pen Tool». Рисование изогнутых линий в программе Flash похоже на рисование линий Безье в программе CorelDRAW!. Щелкаем левой кнопкой мышки в том месте, где кораблик начнет свой путь. Отпускаем кнопку. Смещаемся немного в сторону и щелкаем еще раз. Теперь, не отпуская кнопку мышки, изгибаем линию до нужного результата. И отпускаем кнопку. Смещаемся еще немного вправо, ставим точку и изгибаем линию так, как нам нужно. Если раньше вам не доводилось рисовать таким способом, то потренируйтесь немного – и вы освоите эту несложную технику. Ее используют почти во всех редакторах векторной графики. Затем мы ставим еще несколько точек, изгибая линии, и выводим линию за пределы баннера. В этом случае наш кораблик исчезнет с картинки совсем в конце проигрывания анимации. Что делать, если линия получилась не совсем удачная? Выбираем на левой панели инструмент «Subselection Tool». А дальше исправляем дефекты. Захватываем мышкой точку изгиба линии и двигаем в нужном направлении. При необходимости можно сместить и всю траекторию. Просто захватываете ее курсором мышки вне точки изгиба и плавно двигаете. Траектория готова. Сделаем длительность нашего фильма примерно 30 кадров. Обозначим ключевую метку на слое «Guide: Layer 1». Щелкаем правой кнопкой мышки на тридцатом кадре и в появившемся меню выбираем пункт «Insert Keyframe». В отличие от предыдущих примеров здесь нам не потребуется отмечать движение кадров («Motion tween»). Все кадры слоя траектории будут статичными, ведь сам путь изменяться не будет. Теперь можно включить изображение кораблика. Захватываем его левой кнопкой мышки и подтаскиваем к началу пути. Вы почувствуете, что картинку «притягивает», как магнитом, к нарисованной траектории. Теперь обозначим конечную ключевую метку на слое «Layer 1». Переходим на 30-й кадр и щелкаем правой кнопкой мыши. В открывшемся меню выбираем пункт «Insert Keyframe». Захватываем кораблик и подтаскиваем его к последней точке траектории, пока он не «примагнитится» к линии. А вот теперь нам обязательно нужно указать, что кораблик будет двигаться вдоль всей траектории. Помните, как это делается? Отмечаем мышкой слой «Layer 1» и на выделенной черным цветом области щелкаем правой кнопкой мышки. Из списка выбираем пункт «Create Motion Tween». Что же у нас получилось в результате? Проиграем анимацию. Чтобы линия траектории не мешала восприятию, отключим ее изображение в строке слоя «Guide: Layer 1». Для этого необходимо щелкнуть по точке под изображением глаза. Линия исчезла. Переходим на первый кадр и нажимаем клавишу «Enter». Мы обнаружили маленький недочет. Кораблик в середине пути частично находится за пределами баннера. Это особенно заметно на 13-ом кадре. Подкорректируем траекторию движения. Выбираем инструмент «Subselection Tool». Не забываем отметить показ линии пути нашего кораблика. Захватываем мышкой нужную точку изгиба линии и приподнимаем ее чуть выше. Перейдем на первый кадр и запустим анимацию. Теперь все будет в порядке. Сохраним результат работы. Входим в меню «File» – «Save As...», в открывшемся окне выбираем каталог для сохранения, указываем название файла и нажимаем кнопку «Сохранить». Чтобы создать и просмотреть HTML-файл с анимацией, нажимаем на клавишу «F12» на клавиатуре. Или входим в меню «File» – «Publish Preview» – «Default».

В программе Flash мы освоили основные навыки работы с анимацией. Теперь перед нами будет стоять более конкретная задача. Представим, что нам нужно сделать баннер, рекламирующий сайт туристической фирмы. Конечно, в баннере должны быть картинки, текст и возможность перехода на сайт с дополнительной информацией. Для создания такого баннера мы будем использовать не только старые навыки, но и осваивать новые возможности. Итак, создаем новый файл щелчком мыши по пункту «Flash File (ActionScript 3.0)». У нас есть довольно симпатичный кораблик. Импортируем знакомое изображение в новый файл. Входим в меню «File» – «Import» – «Import to Stage», выбираем нужный каталог , отмечаем файл и нажимаем кнопку «Открыть». Кораблик разместился на рабочем поле программы. Нам необходимо объединить все элементы изображения. Выделяем всю картинку одновременным нажатием клавиш «Ctrl»+«A», а затем входим в меню «Modify» и выбираем пункт «Group». Кораблик слишком большой по размеру. Уменьшим его (инструмент «Free Transform Tool») и поставим в левый верхний угол. Как и в предыдущем примере, наша задача – создать кораблик, плывущий по волнам. Для этого указываем траекторию движения. Создаем отдельный слой для рисования линии. Наш путь лежит в меню «Insert» – «Time Line» – «Motion Guide». Нарисуем линию таким образом, чтобы последняя точка была расположена ближе к правому нижнему углу. Здесь кораблик будет останавливаться. На слое «Guide: Layer 1» щелкаем правой кнопкой мыши по тридцатому кадру и создаем ключевую метку – «Insert Keyframe». Дальше переходим на слой с изображением кораблика – «Layer 1». Захватываем кораблик и устанавливаем его в начальной точке линии. Устанавливаем ключевую метку на 30-м кадре слоя «Layer 1». Оставаясь на 30-м кадре, подтащим кораблик к концу линии. Указываем, что кораблик будет двигаться на протяжении всего фильма. Для этого отмечаем слой с корабликом, щелкаем по выделенной области и выбираем пункт «Create Motion Tween». Сохраним результаты нашего труда. Входим в меню «File» – «Save As...», выбираем каталог для сохранения и вносим название файла. Дальше нажимаем кнопку «Сохранить». Чтобы проверить работоспособность подготовленной анимации, входим в меню «Control» и выбираем пункт «Test Movie». Создадим такой эффект, как будто кораблик к нам приближается. Для этого размеры картинки должны плавно увеличиваться. То есть на первом кадре кораблик будет маленьким, а на последнем – уже большим. Щелчком мышки переходим на последний, 30-й, кадр, выбираем инструмент «Free Transform Tool» и, удерживая нажатой клавишу «SHIFT», доводим картинку до нужного размера. Выбираем инструмент «Selection Tool» на левой панели, переходим на слой «Guide: Layer 1» и приподнимаем последнюю точку. Наш кораблик «привязан» к этой точке, поэтому он сместится автоматически на нужное место. Так смотрится намного лучше. Теперь можно посмотреть, как работает анимация. Помните, как это делается? Из меню «Control» – «Test Movie». Запускается html-файл с анимацией. Но одного кораблика, плавающего по морским просторам, будет мало. Давайте нарисуем солнышко в левом верхнем углу баннера. Солнышко разместим на новом слое. В этом случае рисунок намного удобнее редактировать и проще с ним работать. Входим в меню «Insert» – «Timeline» – «Layer». Если мы начнем рисовать на первом кадре, то изображение закроет кораблик, так как он тоже пока «проплывает» по левой части баннера. Перейдем на 10-й кадр. Здесь кораблик уже достаточно сместился вправо, освободив левую часть для рисования. Создадим ключевую метку. На слое «Layer 3» щелкаем правой кнопкой мыши по 10-ому кадру и выбираем пункт «Insert Keyframe». Теперь попробуем нарисовать солнышко. Сначала выбираем инструмент «Oval Tool» из списка инструментов на левой панели. На панели «Properties» в нижней части окна откроем цветовую палитру в поле «Fill color» и выберем желтый цвет. Теперь щелкаем мышкой в нужном месте рабочей зоны и движением по диагонали создаем круг нужного размера. С помощью инструмента «Line Tool» нарисуем солнышку лучи. Сейчас нарисованное изображение представляет собой разрозненные элементы. Выберем на левой панели инструмент «Selection Tool», выделяем весь объект движением мыши по диагонали и группируем все части изображения. Не забываем время от времени сохранять проект. Сделаем это и сейчас, а затем проверим, как работает анимация, из меню «Control» – «Test Movie». Наша следующая задача – включить в баннер текст. Это будет небольшой рекламный блок, состоящий из двух словосочетаний. Для текста мы тоже создадим отдельный слой. Начальную ключевую метку поставим на 16-ом кадре. Используя инструмент «Text Tool», напечатаем текстовый блок. Если требуется, можно изменить параметры текста на панели «Properties» в нижней части окна. В данном случае мы расположим надпись «МОРСКИЕ КРУИЗЫ» по центру, действуя знакомым способом. На правой панели инструментов откроем панель выравнивания текста. Нажимаем на центральные кнопки линейки «Align». После внесения изменений «сворачиваем» панель. Для плавного появления текста в баннере воспользуемся специальным эффектом, встроенным в программу «Flash»,– «шторки». В таких случаях он незаменим. Входим в меню «Insert» – «Timeline Effects» – «Transform/Transition» – «Transition». Открывается окно настройки эффекта. «По умолчанию» текст будет появляться «входом» (в поле «Direction» переключатель «IN») сверху вниз в течение 30 кадров (в поле «Effect Duration» указано количество кадров). Сменим настройки продолжительности эффекта. В поле «Effect Duration» поставим значение 15 кадров. Изменим также и направление появления текста – слева направо. В поле «Direction» отметим соответствующую стрелку. Для предварительного просмотра нажимаем кнопку «Update Preview» в верхнем правом углу окна. Если результат нас устраивает, то нажимаем кнопку «ОК». На временной шкале на слое текста появляются кадры, отмеченные серым цветом. Это означает, что в этих кадрах находятся статичные объекты, с которыми ничего не происходит. Нам же необходимо, что текст появлялся. То есть должно происходить действие. А оно возможно только между двумя ключевыми кадрами. Первая метка – на 15-ом кадре – у нас есть. Устанавливаем ключевую метку на последнем, 30-ом, кадре. Щелкаем по нему правой кнопкой мыши и из списка выбираем пункт «Insert Keyframe». Надпись должна двигаться, поэтому не забываем указать это программе. Сохраняем проект («File» – «Save») и тестируем его («Control» – «Test Movie»). Обратите внимание, что надпись «Морские круизы» очень быстро исчезает. Необходимо ее немного задержать в конце. Мы не сможем продолжить слой с текстом «Transition 2», так как на нем установлен эффект шторки. Если мы попытаемся продолжить работу с этим слоем, то добьемся всего лишь повторения эффекта. Создадим новый слой и поставим тот же самый текст еще раз. Новый слой получит название «Layer 6». Первую ключевую метку создадим на 31-ом кадре, сразу после завершения работы эффекта. Напишем текст так же, как и на слое «текст», сохраняя параметры цвета, шрифта, начертания. После этого разместим его строго по центру, используя панель выравнивания «Align». Этот текст будет проигрываться на протяжении пяти кадров, поэтому сделаем 35-й кадр ключевым. Сохраняем проект и проверяем его работоспособность. Теперь у нас другой дефект. Надпись стоит чересчур одиноко. Имеет смысл продлить изображение с солнышком и корабликом на это время. Переходим на слой «Layer 3» с солнышком и устанавливаем ключевую метку на 35-ом кадре. Аналогично продляем время просмотра слоя с корабликом. Перейдем на слой «Layer 1» и сделаем 35-й кадр ключевым. Посмотрим, что у нас получилось, из меню «Control» – «Test Movie». Получается довольно симпатичный баннер. Дальше можно заставить исчезнуть надпись «Морские круизы» и вместо нее поставить второй рекламный слоган. Это все вы уже сможете сделать самостоятельно. Давайте посмотрим, что у нас должно получиться. Осталось самое главное. Что такое баннер? Это рекламный ролик, который показывается на страничке в Интернете. Щелчок мыши по этому ролику должен привести нас на сайт, который рекламирует баннер. Можно, конечно, сделать ссылку в HTML-странице. А можно указать переход непосредственно в баннере. В этом случае никто не сможет подменить ссылку на другой ресурс. Правда, для этого нам придется познакомиться с азами программирования. Создаем новый слой «Layer 11». Он должен быть выше всех остальных слоев. На нем мы сделаем невидимый прямоугольник, который будет служить кнопкой перехода. Выбираем инструмент «Rectangle Tool» и рисуем прямоугольник любого цвета так, чтобы он заходил за пределы баннера. Для того чтобы прямоугольник стал кнопкой, необходимо сконвертировать его в символ «Button» («Кнопка»). Для этого отмечаем прямоугольник и заходим в меню «Modify» – «Convert to Simbol». В появившемся окне вносим название кнопки (латинскими буквами) и ставим переключатель «Type» в положение «Button». После этого нажимаем кнопку «ОК». Кнопка обязательно должна быть прозрачной. Здесь нам придется вспомнить, как работать с альфа-каналом. Прямоугольник должен быть отмечен. На панели «Properties» в нижней части окна из списка «Color» выбираем «Alfa» и устанавливаем степень прозрачности цвета 0%.

Следующий этап – назначение ссылки. Это не так просто. Все дело в том, что программа Adobe Flash позволяет создавать не простую анимацию в виде последовательности картинок, а интерактивную. Другими словами, реагирующую на действия пользователя. Для этого используется специальный язык программирования – «Action Script». Мы не будем останавливаться подробно на его возможностях. Просто научимся создавать переход по ссылке. Щелкаем правой кнопкой мышки по прямоугольнику и в появившемся меню выбираем пункт «Actions». Открывается окно для написания программного кода. «Action Scripts» – язык объектно-ориентированного программирования. То есть работа идет с объектами. В нашем случае объект – это кнопка «BTN». В правой части окна пишем текст кода, как показано иллюстрации. Вставляем свой адрес сайта. В нашем случае сайт будет открываться в новом окне. Если вы хотите, чтобы страница открывалась в том же окне, то просто уберите строку '_blank'. На всякий случай проверяем правильность написания кода. Для этого нажимаем кнопку «Check Syntax». Если что-то будет неправильно, то выскочит окно, в котором будет указано, в какой строке содержится ошибка. У нас все в порядке, и поэтому смело нажимаем кнопку «ОК». После этого закрываем окно программного кода. Сохраняем проект и проверяем работу анимации.
Баннер полностью готов. Теперь можно сохранить его в виде SWF-файла, пригодного для просмотра в Интернете. Входим в меню «Export» – «Export Movie». В открывшемся окне находим каталог на жестком диске, указываем название файла и нажимаем кнопку «Сохранить». Открывается окно настроек. Раньше мы в нем меняли только версию flash-проигрывателя. Когда мы используем в проекте программный код, то необходимо еще обратить внимание на пункт «Local Playback Security». Обычно здесь выбран пункт «Access local files only». В этом случае скрипт работает только на сервере. Его работа на нашем (локальном) компьютере заблокирована. Для возможности работы программной части (в нашем случае перехода на другую страницу) локально, необходимо из списка выбрать пункт «Access network only». После внесения изменений нажимаем кнопку «ОК». На что еще нужно обратить внимание? В некоторых случаях мы не хотим, чтобы анимация проигрывалась «по кругу». То есть необходимо остановить ролик в конце. Как это сделать? Заходим в меню «File» – «Publish Settings...». В открывшемся окне переходим на закладку «HTML». Здесь в разделе «Playback» есть поле «Loop». Если отметка стоит, то ролик проигрывается без конца. Если отметку снять, то анимация остановится на последнем кадре. Протестируем работу баннера в HTML-странице. Входим в меню «Publish Preview» – «Default» либо нажимаем клавишу «F12» на клавиатуре. Открывается окно браузера с анимацией. Обязательно проверьте работу перехода по ссылке. 

{mosloadposition debug}