Главнаястр.1<Гл.3. Web-графикач1ч2> 
Flash-клипы это графика, элементы навигации и анимация для web-сайтов. Flash-клипы компактны, состоят из векторной графики (могут содержать растровые рисунки и звуки), поэтому быстро загружаются и масштабируются под разрешение экрана монитора. Могут быть интерактивными, позволяя ввод данных от пользователей, и могут взаимодействовать с другими web-приложениями. Клипы воспроизводятся браузером, с помощью Flash-player'а или как отдельная программа.
Прямоугольная область на экране, на которой создается клип называется Сценой (The Stage).
Панель инструментов и дополнительные панели предназначены для работы с объектами и элементами клипа.
Монтажная линейка (The Timeline – временная диаграмма) – место, где создается анимация.
Для обзора структуры клипа предназначен Муви-эксплорер (The Movie Explorer).
Дополнительные панели вызываются из меню Window > Panels и помогают просматривать, располагать и изменять элементы в клипе. Большинство панелей имеет меню – треугольник в правом верхнем углу панели.
Панель инструментов содержит 4 секции:
1. Tools – инструменты рисования, закрашивания и выделения.
2. View – инструменты масштабирования и перемещения Сцены.
3. Colors – модификаторы для цветов штриховки и заливки.
4. Options – модификаторы выделенного инструмента, которые влияют на операции рисования и редактирования.
Чтобы показать (скрыть) панель инструментов выберите Window > Tools.
Начало работы
При каждом открытии Flash создает клип-файл с расширением FLA (внутренний формат Flash). Для создания нового клипа выберите File > New.
Чтобы настроить свойства клипа выберите в меню Modify > Movie и в окне диалога The Movie Properties:
1. Введите Frame Rate – количество fps (frames per second – кадров в секунду). Для web-анимации достаточно иметь 8 - 12 fps.
2. Установите Width – ширину и Height – высоту сцены в пикселях (кнопка Match Contents – установит размер под содержимое с минимальным отступом, а Match Printer – под размер максимально доступной области для печати).
3. Определите Background color – цвет заднего фона клипа. Для сохранения FLA-файла выберите File > Save.
С помощью меню File > Publish готовый и отлаженный FLA-клип «публикуют» в виде файлов gif, png, exe и др. форматов, а также в SWF формате, который используется для web-публикации и анимационных роликов. Полноценное обратное преобразование невозможно.
Flash предоставляет инструменты для рисования различных форм – произвольных или прямых линий, фигур и траекторий, а также их заливки. Формы, линии и другие элементы, располагаемые на Сцене, называют Объектами.
Произвольные линии рисуют инструментом Pencil (карандаш). Прямые или кривые линии рисуют инструментом Pen (перо). Инструменты линия (Line), овал (Oval) и прямоугольник (Rectangle) позволяют рисовать соответствующие геометрические примитивы. Инструмент кисть (Brush) оставляет мазки, как от работы кистью.
Многие инструменты рисования действуют аналогично инструментам FireWorks. Рассмотрим далее некоторые особенности применения инструментов во Flash.
Инструмент Карандаш (Pencil)
рисует линии и фигуры так же, как реальный карандаш. Выберите Pencil и укажите цвет, ширину и стиль линии в панели Window > Stroke.
В нижней части панели инструментов (в Options) выберите режим рисования инструмента Pencil:
Straighten (спрямление) – рисовать прямые линии, а если они будут похожи на простые квадраты, треугольники, овалы или круги, то они будут преобразованы в эти фигуры.
Smooth (сглаживание) – рисовать гладкие изогнутые линии.
Ink – рисовать без сглаживания и выпрямления.
Инструмент Кисть (Brash)
создает мазки, аналогичные мазкам настоящей кисти. Цвет кисти можно задать инструментом Fill Color. При выборе инструмента Brush в нижней части панели инструментов (Options) можно настроить размер, форму кисти и режим рисования:
Paint Normal – поверх линий и заливок;
Paint Behind – закрашивать незаполненные области, не затрагивая линии и ранее закрашенные области;
Paint Selection – закрашивать выделенный объект;
Paint Fills – заполнять пустые области, а линии не затрагивать;
Paint Inside – закрашивать область, в которой Вы начинаете закрашивать, не закрашивая линии.
Цвета линий и заливки форм
определяются параметрами инструментов Color на панели инструментов. Заливка и огибающий контур рассматриваются как отдельные объекты и могут быть выбраны по отдельности для изменения или перемещения.
Для изменения цвета линий у существующего объекта используется инструмент Бутылка Чернил (Ink Bottle), а для заливки – Ковш Краски (Paint Bucket). Цвет и другие свойства линий задаются, также, на панели Windows > Stroke, а заливки – на панели Windows > Fill (объект должен быть выбран). Можно использовать однотонную или градиентную заливку или заливку растровым рисунком (растровый рисунок должен быть импортирован в текущий файл).
Для корректировки градиента заливки выберите Ковш Краски и модификатор Transform Fill в Options. Стрелкой (Arrow) укажите область, заполненную градиентом (или растровым рисунком). Появится центральная точка и блок с маркерами редактирования. Изменить градиент или заливку можно, перетащив маркер центра или маркеры блока ограничений.
Инструмент Перо (Pen)
применяется для создания прямых или плавных линий. Цвет, ширина и стиль линии настраиваются, как и для карандаша, в панели Window > Stroke.
Чтобы нарисовать ломаную линию
выберите инструмент Pen и щелчком мыши установите первую узловую точку линии. Затем сделайте щелчок там, где вы хотите закончить первый сегмент прямой линии. Таким же образом создайте следующие сегменты. Чтобы закончить линию, не замыкая ее, выберите иной инструмент в панели инструментов. Чтобы замкнуть линию, наведите инструмент Pen на первую узловую точку и, когда рядом с указателем появится маленькая окружность, щелкните по точке.
Чтобы нарисовать кривую линию
выберите инструмент Pen и в том месте, где хотите начать рисовать линию, нажмите кнопку мыши (появится первая «узловая» точка). Не отпуская кнопку мыши протащите указатель в направлении, куда хотите направить кривую (появятся «ручки поворота»). Отпустите кнопку мыши и, поместив указатель там, где хотите завершить сегмент кривой, снова нажмите кнопку мыши и протащите указатель. Появится сегмент кривой. Таким же образом создайте следующие сегменты кривой.
Кривые и ломаные линии состоят из сегментов соединенных в узловых точках. Узловые точки, соединяющие прямые сегменты или прямые и криволинейные сегменты называют угловыми точки. Белой стрелкой (инструмент Subselection) можно смещать узловую точку, регулировать длину и угол прямых сегментов или наклон изогнутых сегментов, перемещая «ручки поворота». Узловые точки можно добавлять, щелкнув инструментом Pen на сегменте линии.
Для удаления узловой точки – выделите ее инструментом Subselection и нажмите клавишу Del. Удаление ненужных узловых точек кривой уменьшает размер файла. Таким же образом можно работать с узловыми точками на линиях, созданных Карандашом, Кистью, Линией, Овалом или Прямоугольником.
Выделение
Для изменения объекта, его необходимо сначала выделить одним из инструментов: Стрелка, Лассо или с помощью клавиатуры.
Flash подсвечивает объекты, которые были выделены. Линии подсвечиваются по длине, заливки по площади. У сгруппированных объектов выделяется ограничивающая их линия. Растровые рисунки и символы подсвечиваются точками (растром) из которых состоят.
Инструмент Лассо (Lasso) используется для выбора объектов, путем их ручной обводки прямоугольным или многоугольным контуром.
Инструмент Стрелка (Arrow) позволяет выделить объект (часть объекта или несколько объектов), указав на него или обведя . Для выделения нескольких объектов нужно щелкнуть по первому объекту и, удерживая клавишу Shift, выбрать дополнительные объекты. Для выделения всего содержимого сцены выберите Edit > Select All, для снятия выделения – Edit > Deselect All.
Стрелкой можно перемещать объекты или выделенные части объектов, перетаскивая их по сцене. Используя Буфер обмена можно копировать объекты (скопировать – Edit > Copy и вставить – Edit > Paste) в том числе и между Flash и другими приложениями.
Перекрытие форм и линий во Flash
При проведении линии поперек другой линии или заливки, их перекрывающиеся фрагменты разделяются в точках пересечения. С помощью инструмента Стрелка можно переместить или изменить каждый сегмент отдельно от других.
Когда Вы рисуете поверх линии или формы, часть объекта, которая была перекрыта, будет заменена на то, что находится сверху. Части закрашенные одним цветом сливаются. Части закрашенные различными цветами остаются разделенными.
Во избежание случайного изменения фигур и линий при наложении, можно их сгруппировать или использовать слои для их разделения.
Группировка
Группировка позволяет управлять группой элементов как одним объектом. Выделите объекты в сцене, которые хотите сгруппировать и выберите Modify > Group (для разгруппировки Modify > Ungroup). Можно редактировать объекты не разгруппируя их. Выбрав группу, выберите Edit > Edit Selected или дважды щелкните группу инструментом Стрелка. Все что не входит в группу изменит свою окраску на более бледную и станет недоступным для выбора. Редактируйте любой элемент в пределах группы. По окончании редактирования вернитесь в нормальный режим, дважды щелкнув по пустому месту в сцене инструментом Стрелка.
Расположение объектов по глубине
Flash располагает сгруппированные объекты (и символы) в том порядке, в котором они были созданы, помещая последний созданный объект вверху (в пределах слоя). Для изменения глубины расположения объектов используют команды: Modify > Arrange > Bring to Front (или Send to Back) для перемещения на самый верх (или самый низ); Modify > Arrange > Bring Forward (или Send Backward) для перемещения на одну позицию вверх (или вниз). Для изменения порядка слоев перетащите название слоя в Timeline в новую позицию.
Инструмент Резинка (Eraser)
удаляет контуры и закрашенные области. Можно настроить инструмент Eraser так, чтобы стирать только контуры или только заполненные области или только отдельную заполненную область. Двойное нажатие на Eraser стирает все находящиеся на Сцене элементы.
Для удаления части контура или закрашенной области выберите Eraser и модификатор Faucet (краник) и щелкните на необходимой части контура или заполненной области.
Изменение формы с помощью инструмента Стрелка (Arrow)
Чтобы изменить линию или контур фигуры, зацепите и потяните любую точку линии, используя инструмент Стрелка (Arrow). Вид указателя изменится, показывая, какое изменение допустимо для этой линии или заливки.
Flash настраивает кривизну сегмента линии соответственно новому положению перемещенной точки.
Если точка является конечной, то, зацепив и перемещая ее, можно удлинять или сокращать линию.
Если перемещенная точка – вершина угла, то сегменты линии, формирующие угол вытягиваются или сокращаются.
Когда рядом с указателем появляется угол, можно изменить вершину угла.
Когда рядом с указателем появляется кривая, можно изменять кривизну кривой.
Выпрямление, скругление, оптимизация линий
Можно изменять линии и контуры фигур, спрямляя или скругляя их. Для скругления и спрямления контура заполнения или кривой линии надо выбрать их инструментом Стрелка и щелкнуть в секции Options на соответствующем модификаторе.
Другой способ скруглять контуры и кривые линии состоит в том, чтобы оптимизировать их командой Modify > Optimize. При этом кривые линии и контуры областей заполнения очищаются за счет уменьшения количества криволинейных сегментов, описывающих эти элементы. Оптимизация кривых уменьшает размер файла.
Преобразование объектов
можно проводить с помощью меню Modify > Shape, преобразовывая линии в залитые области, расширяя форму или смягчая грани залитого объекта. Опция Lines to Fills позволяет преобразовывать линии в закрашенные области. Опции Expand Shape и Soften Edges позволяют расширять заполненные фигуры и смягчать грани форм.
Масштабирование, деформация и вращение объектов
Выберите объекты инструментом Стрелка и используйте один из следующих наборов инструментов: 1) модификаторы Масштаб (Scale) и Вращение (Rotate) в секции Опции на панели инструментов, 2) инструменты меню Modify > Transform > Scale, 3) панель Трансформации (включается из меню Window > Panels > Transform). Можно зеркально отражать объекты по их вертикальной или горизонтальной оси командами Modify > Transform > Flip Vertical или Flip Horizontal.
Выравнивание объектов
Панель Align (Window > Panels > Align) дает возможность:
Замечание
Все группы, символы, текстовые блоки и растровые рисунки имеют точку отсчета, которую Flash использует для позиционирования и преобразований. По умолчанию эта точка расположена в центре объекта. Перемещая точку отсчета объекта (через меню Modify > Transform > Edit Center), можно позиционировать и преобразовывать объект относительно, например, нижнего левого угла объекта. Линии и формы не имеют точек отсчета и позиционируются и преобразуются относительно их верхнего левого угла.
При использовании текста во Flash роликах, можно устанавливать его размер, вид шрифта, стиль, промежутки, цвет и выравнивание. Текст можно вращать, масштабировать, искривлять, отражать его, а так же редактировать символы. Ролики могут включать текстовые поля для ввода текста пользователем или для отображения текста, обновляемого динамически. Можно связывать блоки текста с URL. Можно преобразовать текст в его графическое представление и менять форму его букв.
Создание текста
Для помещения текстового блока на рабочее поле, используйте инструмент Text.
Для создания текстового блока подстраивающегося под текст (расширяется по мере того, как вы печатаете), щелкните там, где хотите поместить текст.
Для создания текстового блока с фиксированной длиной, щелкните курсором на начале текста и тащите для указания нужной длины.
Для изменения размеров текстового блока потяните за его угол.
Для переключения между расширяющимся и фиксированным текстовым блоком щелкните два раза на точке верхнем правом углу блока. Атрибуты текста устанавливаются с помощью панелей Window > Panels > Character и Window > Panels > Paragraph.
Чтобы создать гипертекстовую ссылку можно связать текстовый блок с URL, используя панель Window > Panels > Character.
Встраиваемые и device шрифты
Обычно Flash встраивает шрифт в SWF файл, поэтому этот штифт отображается правильно во Flash Player клиента. Не все шрифты могут быть экспортированы в ролик. Искажение текста по команде View > Antialias Text показывает, что Flash не определил очертание шрифта, и не будет экспортировать текст.
Можно использовать device шрифты, которые не экспортируются в SWF-файл. Flash Player использует на локальном компьютере тот шрифт, который наиболее близок к исходному device шрифту. Использование device шрифтов уменьшает размер Flash ролика. Device шрифты удобны при маленьком размере букв (менее 10 points). Если пользователь не имеет на компьютере шрифт похожий на device шрифт, текст может выглядеть некорректно.
Flash включает три device шрифта: _sans (подобные Helvetica or Arial), _serif (подобные Times Roman), and _typewriter (подобные Courier). Для использования шрифта как device шрифт, выберите один из этих шрифтов в панели Character или выберите Use Device Fonts в панели Window > Panels > Text Options > Static Text, а чтобы предоставить пользователю возможность выделения текста там же включите опцию Selectable.
Создание символов из шрифта
Чтобы использовать шрифт как элемент общей библиотеки, можно создать символ из шрифта (шрифт-символ) в окне Library. Это дает возможность связывать шрифт и использовать его во Flash роликах без встраивания шрифта в ролик. Для использования шрифт-символа в библиотеке, ему назначается строка идентификатор. Идентификатор может быть использован и для доступа к символу как к объекту в ActionScript.
Для создания шрифт-символа выберите New Font из меню Options в окне Library. В окне Font Symbol Properties, введите имя шрифт-символа и выберите шрифт. Для назначения шрифт-символу идентификатора в окне Library выберите шрифт-символ, и в окне Linkage из меню Options выберите Export This Symbol и введите строку идентификатор.
Редактируемые или динамически обновляемые текстовые поля
Редактируемые текстовые поля предоставляют пользователю возможность вводить текст в формы или опросы. Динамические текстовые поля отображают динамически обновляемый текст, например котировки акций. Тип текстовых полей задается на панели Window > Panels > Text Options..
Сохранение форматирования текста. Flash предоставляет возможность сохранять форматирование текста в редактируемых текстовых полях. Для выбранного текста нужно указать параметр html форматирование в панели Window > Panels > Text Options. При этом в текстовом поле сохранятся гиперссылки и базовое форматирование (включая имя шрифта, стиль, цвет и размер), определяемое записанными вами html тегами <a> <b> <font color> <font face> <font size> <i> <p> <u>. Можно также применять html теги в панели Actions, как часть значения переменной текстового поля.
Редактирование текста
При редактировании текста во Flash можно применять команды копирования, вырезания и вставки для перемещения текста. Текст можно преобразовывать (с некоторыми ограничениями) так же, как другие объекты – масштабировать, вращать, искажать и отражать текстовые блоки. Для изменения формы, стирания части символов и других манипуляций, текст конвертируется в графический объект. После конвертирования текста, редактировать его как текст уже невозможно. Можно конвертировать только текстовые блоки целиком, но не отдельные символы внутри блока. Для конвертирования выберите текстовый блок и Modify > Break Apart.
Flash поддерживает различные векторные (SWF, Adobe Illustrator и WMF) и растровые (GIF, JPG, TIF) форматы. Можно импортировать графику во Flash из файлов (File > Import) или вставлять ее через буфер обмена. Векторные изображения импортируются как группы в текущий слой. PNG файлы Fireworks могут быть импортированы в Flash как один растровый слой или как набор объектов (векторных и растровых), доступных для редактирования.
Преобразование растровых рисунков в векторную графику
Импортированные растровые рисунки можно конвертировать в векторные изображения. Для этого надо выбрать растровый рисунок и командой Modify > Trace Bitmap сконвертировать растровый рисунок в векторный. В окне диалога можно настроить режимы конвертации: Color Threshold – цветовой порог (от 1 до 500), Minimum Area – число окружающих пикселей, рассматриваемых при назначении цвета пикселю (от 1 до1000), Curve Fit – степень сглаженности. Чтобы создать векторное изображение, похожим на первоначальный растровый рисунок, введите значения: Color Threshold = 10, Minimum Area = 1 pixel, Curve Fit = PixelsCorner, Threshold = Many Corners. После конвертирования растрового рисунка, полученный векторный рисунок не будет больше связан с растровым символом в окне Библиотеки. Выполнение конвертации обычно уменьшает размер файла.
Разрыв (Breaking apart) групп и объектов
Чтобы разделить группы, текстовые блоки, символы и растровые рисунки на не сгруппированные доступные для редактирования элементы, используйте команду Modify > Break Apart. Разрыв уменьшает размер файла использующего импортированную графику. Разрыв не полностью обратим, и воздействует на объекты следующим образом:
Заливка растровым рисунком
Выберите «разорванный» растровый рисунок и щелкните по нему инструментом «Пипетка» (Eyedropper). Пипетка заполнится растровым рисунком и изменится на инструмент Ковш Краски (растровый рисунок станет цветом заливки). Окрасьте нужную область с помощью Кисти или Ковша Краски.
Редактирование «разорванного» растрового рисунка
Выберите инструмент Лассо и модификатором 
настройте – диапазон цветов (Threshold) и сглаживание (Smoothing).
Волшебной Палочкой 
выберите область растрового рисунка и инструмент для заполнения выбранных областей рисунка. Например, Ковшом Краски добавьте заливку.
Импортированные растровые рисунки можно редактировать во Flash другими приложениями. Для этого в окне Библиотеки Window > Library, щелкните правой кнопкой мыши на значке растрового рисунка. В появившемся контекстном меню выберите Edit With и желаемый графический редактор. После окончания редактирования для модификации рисунков на Сцене выберите Update из меню Library Options в окне Библиотеки.
Замечание. Команда Modify > Ungroup разделяет сгруппированные объекты на компоненты, не влияя на растровые рисунки, символы или текст.
Обновлено 20.05.2004