1. Adobe Flash Томилова Елена Анатольевна
Лекция 1. Векторная графика. Macromedia Flash MX Инструменты и
технологии рисования во Flash
План.
Векторная графика.................................................................................................................. ...........1
Характеристика векторной графики...................................................................... .....................1
Программы работающие с векторной графикой............................................................. ..........1
История Flash......................................................................................................................
................1
Стартовое окно................................................................................................................
...................3
Интерфейс Adobe Flash...................................................................................................................3 ...
Панель «Свойства».................................................................................................. ......................4
Панель инструментов FLASH MX........................................................................................... 5 ........
Геометрические фигуры..................................................................................... ..........................7
Практическое применение инструментов «Свободное преобразование», «Средство
массовой заливки» и «Преобразование градиентам».................................................... ...........8
Практическая работа №1................................................................................................................. ..9
Векторная графика
Векторная графика отличается от растровой тем, что в основе её лежит не пиксель, а
простая геометрическая фигура (Линия, отрезок, окружность, квадрат, треугольник....)
Векторная графика - это изображения, состоящие из простых объектов: прямых линий,
дуг, окружностей, эллипсов, прямоугольников.
Характеристика векторной графики
Достоинства векторной графики:
• Изображения занимают относительно небольшой размер
• Векторные изображения могут легко масштабированы без потери качества.
Недостатки векторной графики:
• Векторная графика не позволяет получать изображения фотографического качества
• Векторные изображения иногда не распечатываются или выглядят на бумаге по-
другому, чем на экране.
Программы работающие с векторной графикой
• Corel Draw
Специализированная программа для создания картин и анимации в формате *.cdr
• Macromedia Free Hand
Специализированная программа для создания векторных изображении в формате
*.h10
• Macromedia Flash
Программа предназначенная для создания анимации специально для Интернет.
Файлы в формате *.swf и *.fla
• Adobe Illustrator
Отличная программа для создания векторных изображений от фирмы Adobe.
Многие пользователи предпочли её к остальным программам, работающим с
векторной графикой
История Flash
Всё началось в далёком 1993 году, Джонатан Гай (Jonathan Gay) разработал
программное обеспечение, которое позволяло вводить информацию в компьютер,
используя электронное перо вместо клавиатуры (SmartSketch). Для тех лет это было
огромным достижением, однако программа не получила желаемой популярности и в связи
с этим в 1995 году SmartSketch был переделан в программу для анимации. В то время
рынок анимации был мизерным, анимационные ролики могли распространяться только на
1

2. Adobe Flash Томилова Елена Анатольевна
видеокассетах или компакт-дисках. В тоже время Джонатан заинтересовался интернетом и
веб-дизайном и сделал ставку на то, что в скором времени интернет станет популярным и
с его помощью люди начнут обмениваться анимацией и графикой.
И так новорождённую программу назвали «FutureSplash Animator» и попытались
продать её очень известной компании Adobe, но сделка так и не состоялась. К FutureSplash
был проявлен интерес только тогда, когда он был использован такими компаниями как
Microsoft и Disney Online. После чего в ноябре 1996 года команда Джонатана Гай`я
присоединилась к компании Macromedia, в результате чего FutureSplash получил новое
название «Macromedia Flash 1.0».
С выпуском 4 версии программы, во Flash появляется более-менее приемлемый
скриптовый язык (ActionScript) и начинают появлятся первые сайты сделанные целиком во
Flash. С появлением 5 и 6 версий ActionScript становится всё мощнее и именно в это время
начинается повсеместное применение flash в веб-дизайне. С появлением в свет 7 версии
Macromedia Flash, ActionScript переростает во вторую версию и теперь становится
Объектно-ориентированным. В 2005 году выходит долгожданная 8 версия Flash.
Появляются новые возможности, такие как: создание фильтров (подобных фильтрам
Photoshop), которые можно применять даже програмнно, что очень важно, появляются
новые возможности работы со шрифтами и многое другое.
Тогда же в 2005 компанию Macromedia покупает Adobe за 3.5 млрд. долларов и с
этого момента программа называется Adobe Flash. Вышел в свет Flash Professional 9
ActinScript 3.0 Preview и совсем скоро ожидается появление полнофункциональной версии
с принципиально новым AS 3.0.
Также можно почитать о истории происхождения Flash на сайте www.adobe.com
2

3. Adobe Flash Томилова Елена Анатольевна
Стартовое окно
После запуска программы на экране появляется стартовое меню.
 Открыть последний элемент (Open a Recent Item) — открыть один из последних
документов. Вариант Открыть… (Open...) позволяет выбрать файл на диске.
 Создать новый (Create New) — создать новый документ. Мы будем создавать
документы типа Flash File (ActionScript 2.0) — анимацию с поддержкой языка
программирования ActionScript 2.0.
 Создать по шаблону (Create from Template) — создать документ стандартного
типа из шаблона, например, рекламный баннер (Advertising).
Интерфейс Adobe Flash
Запустите программу Adobe Flash CS3. Затем установите стандартное
расположение инструментов, выбрав пункт меню Окно – Рабочее пространство – По
умолчанию (Window — Workspace — Default).
3

4. Заголовок окна Строка меню
Adobe Flash Томилова Елена Анатольевна
Цвет
Слои Шкала времени
Масштаб просмотра
Панель инструментов
Рабочая область
Библиотека
Свойства
Панель «Свойства»
Панель «Свойства» отображает свойства активного (т.е. того которого вы выделили)
объекта. По умолчанию она выглядит так
2 3 4
1
1 – настройки публикации
2 – размер сцены
3 – фон сцены
4 – скорость смены кадров
4

5. Adobe Flash Томилова Елена Анатольевна
Панель инструментов FLASH MX
Рассмотрим подробно панель инструментов. Расположена она по умолчанию слева,
на ней находятся основные инструменты для работы с графикой, при выборе одного из
них под панелью инструментов появляется панель дополнительных опций для каждого
инструмента.
1 – Средство Стрелка, Выделение (Selection) или (V) –
используется для выделения объектов в рабочей области. С
помощью этого инструмента можно одним щелчком
выделить объект, нарисовать область для выбора нескольких
1 объектов или дважды щелкнуть им, чтобы выделить области
2
заливки и штрихования объекта. Правда, после щелчка на
изображении, содержащем и штрихи, и заливку, будет
3 выделена только та область, на которой был произведен
4
щелчок.
5 2 – Спецвыделение (Subselection) (А) - производится
6 выделение отрезков прямых линий или контуров
7 изображения. Его также можно использовать для
отображения точек на линиях и контурах и последующего
8 перетаскивания этих точек с целью изменения изображения.
10 9
3 – Свободное преобразование (Q) - вращение, изменение
11 размеров или Инструмент преобразование градиента (F) -
позволяет управлять заливкой: направление, радиус
12
13 4 – Лассо (L) - выделяет области произвольной формы. Он
используется для quot;захватаquot; неудобных областей. Щелкните
14 на инструменте и нарисуйте область произвольной формы.
Инструмент будет quot;привязанquot; к указателю мыши до тех пор,
15 пока вы не отпустите кнопку, создавая тем самым конечную
16 точку.
17 5 – Перо (Р) - является наиболее мощным инструментом
рисования. С его помощью можно точно нарисовать
18 траекторию, состоящую из прямых и криволинейных
участков.
19 6 – Текст (Т) - для создания и редактирования текстов и
текстовых полей. После щелчка на инструменте Текст
20
создается место для начала ввода текста. Атрибуты текста
назначаются на панели инспектора свойств.
21 7 – Линия (N) - позволяет нарисовать прямую линию.
22 Удерживая нажатой клавишу <Shift>, с помощью данного
инструмента можно рисовать линии по горизонтали,
вертикали или по диагонали.
8 – Овал (О) – для рисования овалов и идеальных кругов. Чтобы нарисовать овал,
щелкните и перетащите инструмент; для создания круга при щелчке и перетаскивании
удерживайте нажатой клавишу <Shift>. Прямоугольник (R) – позволяет рисовать
прямоугольники и квадраты. Чтобы нарисовать прямоугольник, щелкните и перетащите
инструмент; для создания квадрата при щелчке и перетаскивании удерживайте нажатой
клавишу <Shift>.
5

6. Adobe Flash Томилова Елена Анатольевна
9 – Карандаш (Y) – для рисования прямых и кривых линий (рисование от руки,
карандашом).
10 – Кисть (B) – рисование кистью
11 – Чернильница (S) - создает и изменяет цвет, толщину и стиль линий контура фигуры
12 – Средство массовой заливки (К) - для заливки фигур, имеющих контур
13 – Пипетка (I) - копирует заливку или стиль линий объекта
14 – Ластик (Е) - для частичного или полного стирания линий, заливок и фигур
15 – Рука (Н) - для перемещения рабочей области
16 – Масштаб (M, Z) - приближает или удаляет рисунок
17 – Цвет обводки
18 – Цвет заливки
19 – Поменять цвета и удалить линию
20 – Привязать к объектам - при включенном Притягивании - объект при рисовании
притягивается к месту
20 – Размыть - сглаживает линии и простые кривые
21 – Резкость - спрямляет линии и простые кривые
6

7. Adobe Flash Томилова Елена Анатольевна
Геометрические фигуры
Чтобы нарисовать прямоугольник надо включить инструмент Прямоугольник
(Rectangle), щелкнув по кнопке на панели инструментов. Теперь можно рисовать так
же, как и в редакторе Paint — нажать левую кнопку в одном из углов прямоугольника,
растянуть и отпустить.
Если при растяжении удерживать клавишу Shift, получается квадрат.
При нажатии Alt прямоугольник рисуется не из угла, а из центра (точки
пересечения диагоналей).
Маленькая черная стрелка в правом нижнем углу говорит о том, что одна кнопка
позволяет включать несколько инструментов. Если немного задержать мышку на кнопке
при нажатой левой кнопке, мы увидим дополнительное меню, из которого сможем
выбрать нужный вариант:
 Прямоугольник
(Rectangle);
 Овал (Oval);
 Прямоугольник с
настройкой (Rectangle
Primitive);
 Овал с настройкой (Oval
Primitive);
 Многоугольник, звезда
(PolyStar).
Выберите на панели инструмент Круг и потащите указатель на рабочей области
вправо и одновременно вниз. У Вас получилось некое подобие круга, а чтобы получился
точно круг, то нужно плюс ко всему во время рисования зажать Shift. Вы наверно
заметили, что под панелью инструментов когда выбрали quot;кругquot; появились
дополнительные опции: они указывают цвет заливки и обводки. В результате рисования
должно получиться:
7

8. Adobe Flash Томилова Елена Анатольевна
2 3 4 5
1
1 – заливка
2 – цвет линий обводки
3 – толщина линий обводки
4 – вид линий обводки
5 – настройка линий обводки
Выделите объект инструментом выделение, то в панели quot;свойстваquot; появиться
следующее:
2 3
1 4
1 – высота объекта
2 – ширина объекта
3 – положение по оси Х
4 – положение по оси Y
Практическое применение инструментов «Свободное преобразование»,
«Средство массовой заливки» и «Преобразование градиентам»
1. Теперь вернёмся к нашему кругу и выделите
его с помощью инструмента «Свободное
преобразование»
4
Если перевести курсор в точку
3 1 – получаете возможность изменения размеров
8
2 1

9. Adobe Flash Томилова Елена Анатольевна
высоты
2 – изменение размеров ширины
3 – одновременно и ширина и высота
4 – вращение
2. Залейте круг градиентом, для этого выберите инструмент «Заливка». А затем в панели
«Свойства» или «Цвета» выберете цвет красный градиент
и щелкнете в центре вашего круга, получиться приблизительно
3. Подкорректируйте заливку, для этого выберете инструмент «Преобразование
градиентам» с снова щелкнете в центр круга, появиться круг отражающий состояние
заливки, им можно управлять (действие очень похоже на инструмент трансформация).
Поэкспериментируйте.
Практическая работа №1.
9

10. Adobe Flash Томилова Елена Анатольевна
Нарисовать колобка.
1. Создайте новый файл.
2. Установите следующие свойства документа 500*400
3. Нарисуйте окружность. Выделите ее с помощью инструмента «Стрелка».
4. Залейте фигуру желтым цветом.
5. Скопируйте полученную фигуру.
6. В окне quot;Свойствоquot; измените ширину и высоту второй фигуры в три раза меньше,
для этого уменьшите ширину и установите Связку - изменять автоматически
высоту.
10

11. Adobe Flash Томилова Елена Анатольевна
7. Залейте полученную фигуру черным цветом. Скопируйте его три раза (чтобы у Вас
было 4 фигуры, равных трети исходного).
8. Выделите две полученные фигуры, залейте их белым цветом и перетащите по
одному на место глаз.
11

12. Adobe Flash Томилова Елена Анатольевна
9. Один из чёрных овалов, не выделяя его, «схватите» инструментом «Выделение» за
верхнюю линию и дотяните до середины изменяемого овала. Получим рот.
Переместите фигуры на соответствующее место.
10. Выделите оставшуюся фигуру, измените ее ширину и высоту в 4 раза. Скопируйте
ее, чтобы получилось 3 фигуры.
11. Две полученные фигуры – зрачки, переместите на соответствующее место.
12. Нарисуйте нос. Оставшуюся окружность выделите, залейте красным цветом и
перенесите ее.
13. Сохраните файл под именем Фамилия_пр1.fla
14. Пришлите в архиве.
12