Градиент — это плавный переход цветов.. Для создания градиентов предназначен инструмент «Gradient» («Градиент»). Он находится в одной рядом с «Paint Backet» («Заливка»). Поэтому щелкните на инструменте «Paint Backet» («Заливка») и не отпускайте клавишу мыши в течение нескольких секунд. На экране вы увидите инструмент «Gradient» («Градиент») (рис. 1).

Рис. 1. Инструмент «Gradient» («Градиент») служит для создания различных градиентов

Прежде чем мы научимся создавать градиенты, рассмотрим настройки инструмента «Gradient» («Градиент») (рис. 2).

Рис. 2. Панель свойств инструмента «Gradient» («Градиент»)

На панели параметров инструмента можно выбрать цвета градиента, тип, задать значение прозрачности.

Из раскрывающегося списка первого поля на панели настроек можно выбрать цветовую схему градиента (рис. 3). Щелкнув на черном треугольнике в правом верхнем углу, вы можете выбрать дополнительные образцы градиента (рис.4).

Рис. 3. Панель выбора образцов градиента

Рис. 4. Выберите дополнительные градиентные схемы из списка

Далее следуют кнопки, с помощью которых можно определить тип градиента (рис. 5).

Рис. 5. Кнопки, с помощью которых определяется тип градиента

«Linear Gradient» («Линейный градиент»). Переход цветов осуществляется по прямой линии вдоль указанного направления . Выберите это тип градиента, щелкните левой кнопкой мыши в верхней точке вашего документа, не отпуская кнопку мыши проведите до нижней точки и отпустите кнопку мыши.

«Radial Gradient» («Радиальный градиент»). Цвета распределяются от центра во все стороны по окружности.

«Angle Gradient» («Угловой градиент»). Переход цветов осуществляется от центральной точки во все стороны по линии, описывающей периметр окружности.

«Reflected Gradient» («Отраженный градиент»). Цвета, как и в первом случае распределяются вдоль прямой, однако происходит зеркальное отражение градиента относительно начальной точки.

«Diamond Gradient» («Ромбовидный градиент»). Цвета распределяются от начальной точки во все стороны в виде ромба.

Кроме использования уже имеющихся в программе Photoshop вы можете создавать свои градиенты или редактировать созданные разработчиками. Для этого вам нужно открыть редактор градиентов. Щелкните левой кнопкой мыши на изображении градиента на панели параметров инструмента «Gradient» («Градиент»). На экране появится диалоговое окно «Gradient Editor» («Редактор градиента») (рис. 6).

Рис. 6. С помощью редактора вы можете создавать свои градиенты

Для начала нужно выбрать образец градиента в области «Presets» («Предустановки»). Затем, перемещая ползунки на цветовой полоске определите содержание каждого цвета в градиенте. Кроме того, вы можете добавлять в градиент новые цвета или изменять уже имеющиеся.

• Для изменения цвета щелкните два раза левой кнопкой мыши по ползунку. Перед вами появится диалоговое окно «Color Picker» («Выбор цвета»). Выберите любой цвет и нажмите кнопку «ОК». Ползунок изменит цвет на выбранный вами, а вместе с ним изменится и цветовая составляющая градиента.
• Для добавления цвета в градиент щелкните один раз левой кнопкой мыши рядом с любым ползунком. Под цветовой полосой появится еще один квадратик. Для того чтобы изменить добавленный цвет щелкните в окошке «Color» («Цвет») и в появившемся окне выберите необходимый цвет.

Вы можете определить прозрачность цветов вашего градиента. За прозрачность отвечают маркеры, которые расположены над цветовой полосой. Щелкните по любому из них и в поле «Opacity» («Непрозрачность») введите подходящее значение. Добавляются маркеры непрозрачности также как и цветовые. Чтобы удалить ненужный цветовой маркер или маркер прозрачности достаточно его выделить, щелкнув на нем левой кнопкой мыши, и нажать клавишу «Delete» на клавиатуре.

Чтобы залить выделенную область градиентом, щелкните мышью внутри выделенной области, и не отпуская кнопку мыши, протяните указатель, а затем отпустите.

Центр компьютерного образования FreeDom

Этот урок был написал для журнала “Мой нтернет”

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

Шаг №1. Придумайте идею баннера

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

Внимание.

Если Вы готовите графику в другой программе, не забудьте поместить объекты на прозрачный фон. Это легко сделать в программе Adobe Photoshop.

Итак, мы сделаем веселый баннер с надписью «Не молчи, как рыба! Общайся! iTUT». При этом сначала будет появляться огромный глаз рыбы, потом вся рыба, а затем надпись.

Шаг №2. Определяемся с размерами баннера.

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

Чтобы определить размер рабочего листа, обратитесь к панели параметров (в нижней части окна) и нажмите кнопку Size (Размер) (рис. 1). В появившемся окне установите значения ширины и высоты будущего баннера. Мы введем значение ширины 468 px, а высоты — 60 px. После нажатия кнопки «ОК» лист изменит размеры.

Рис. 1. Панель параметров рабочего листа

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

Сначала выберем подходящий цвет. Для этого нажмем кнопку Fill Color (Заливка) и на появившейся палитре выберем цвет. Затем на панели инструментов щелкнем на инструменте Rectangle (Прямоугольник) и нарисуем прямоугольник.

Внимание

Чтобы изменить цвет созданной фигуры, нужно выделить ее с помощью инструмента Selection (Выделение) и выбрать требуемый цвет, нажав кнопку Fill Color (Заливка).

Теперь изменим размеры созданного прямоугольника так, чтобы они в точности совпадали с размерами рабочего листа. Для этого выделим прямоугольник инструментом Selection (Выделение) и на панели свойств зададим нужные значения ширины и высоты. Чтобы точно наложить прямоугольник на рабочий лист, там же, на панели свойств, введем значение координат Х и У равными 0 (рис. 2).

Рис. 2. Задайте ширину и высоту прямоугольника, а также его положение на рабочем листе

Шаг №3. Импорт графических объектов

Фон готов, и теперь можно поместить на сцену графические объекты. Обратимся к шкале времени и в левой ее части создадим новый слой, на который поместим рыбу. Чтобы создать новый слой, нужно щелкнуть на кнопке Insert Layer (Вставить слой) (рис. 3). В данном случае рыба была нарисована в программе CorelDRAW. Чтобы импортировать объект, выполните команду File — Import — Import to Stage (Файл — Импорт — Импорт на сцену). После того как объект появится на сцене, разместим его в нужном месте. В данном случае нам нужно повернуть объект и сделать его такого размера, чтобы на рабочем листе был виден только глаз рыбы. Трансформация объекта производится с помощью инструмента Free Transform (Свободная трансформация) .

Рис. 3. Помещайте каждый элемент ролика на новый слой

Внимание

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

Рис. 4. Размещаем объекты в нужном месте

Шаг № 4. Создание анимации

Теперь анимируем нашу рыбу и сделаем так, чтобы она, разворачиваясь, перемещалась в левую часть баннера.

Активизируем слой с рыбой, щелкнув на нем на шкале времени. На 15 кадре (кадр может быть любым, в зависимости от того, с какой скоростью будет проигрываться анимация) щелкнем правой кнопкой мыши и выберем команду Insert Keyframe (Вставить ключевой кадр). На шкале времени появится черная точка — второй ключевой кадр. В созданном ключевом кадре перетянем рыбу в другое место, развернем ее и уменьшим так, чтобы она полностью помещалась на рабочем листе.

Теперь между двумя ключевыми кадрами можно создать анимацию. Для этого щелкнем на первом ключевом кадре правой кнопкой мыши и выберем пункт Create Motion Tween (Создать анимацию движения).

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

Чтобы исправить это, нужно поставить ключевой кадр слоя с фоном на длину всего флеш-ролика. Можно было бы сделать ключевым также 15 кадр, но нам еще нужно будет добавить надпись, поэтому продлим фон до 50 кадра. Активизируем слой с фоном, на 50 кадре щелкнем правой кнопкой мыши и выберем пункт Insert Keyframe (Вставить ключевой кадр). Перейдем на слой с рыбой и установим ключевой кадр на позиции 50, чтобы после 15 кадра рыба не пропадала (рис. 5).

Рис. 5. Так выглядит монтажная линейка на данном этапе

Шаг №5. Добавление надписи в баннер

Осталось добавить надпись, которая будет появляться после 15 кадра. Создадим еще один слой для надписи. На 15 кадре установим еще один ключевой кадр и добавим надпись. Для создания текста предназначен инструмент Text (текст) . Добавим надпись: «Не молчи, как рыба! Общайся! iTUT». Команды форматирования текста находятся в меню Text (Текст).

Вынесем эту надпись за пределы рабочей области вверх. Затем установим ключевой кадр на 25 кадре и перенесем надпись на рабочий лист. Щелкнем правой кнопкой мыши на 15 кадре и выберем пункт Create Motion Tween (Создать анимацию движения). Теперь при проигрывании ролика надпись будет появляться сверху (рис. 6).

Рис. 6. Так выглядит монтажная линейка, после добавления надписи в ролик

Шаг №6. Тестируем созданную анимацию

Чтобы просмотреть, что у нас получилось в итоге, нажмем сочетание клавиш Сtrl+Enter. Ролик запустится в новом окне.

Шаг №7. Добавляем музыкальное сопровождение

К баннерам нередко добавляют музыкальное сопровождение. Чтобы добавить мелодию, нужно выполнить команду File — Import — Import to Stage (Файл — Импорт — Импорт на сцену) и выбрать музыкальный файл на компьютере. После нажатия кнопки ОК музыкальный файл появится в библиотеке символов. Библиотеку символов можно запустить через меню Window (Окно).

Создадим в документе новый слой. Щелкнем на первом кадре и перетащим из библиотеки на сцену значок звукового символа. На монтажной линейке (шкале времени) появится звуковая дорожка.

Теперь настроим звучание мелодии. На панели параметров звука выберем из списка Sync (Синхронизация) пункт Stream (Поток). В этом случае звук прекратиться после того, как закончит проигрываться анимация, и повторится снова, когда начнет проигрываться первый кадр.

Если вы хотите, чтобы мелодия играла полностью, независимо от того, заканчивается проигрывание анимации или нет, выберите тип синхронизации Event (Событие).

Шаг №8. Сохранение и публикация

Перед тем как опубликовать баннер, т.е. сохранить его в формате .swf, сохраним исходный файл в формате .fla в нужное место, выполнив команду File – Save as (Файл — Сохранить как). После этого выполним команду File – Publish (Файл — Публикация). Ролик в формате .swf сохранится в ту же папку, где и хранится исходный flash-файл.

Вот готовый результат.

www.myfreedom.by/banner.swf

Центр компьютерного образования FreeДom