Adobe Flash Томилова Елена АнатольевнаЛекция 1. Векторная графика. Macromedia Flash MX Инструменты и технологии рисования во Flash

План.Векторная графика........................................................................................................................1

Характеристика векторной графики........................................................................................1Программы работающие с векторной графикой....................................................................1

История Flash.................................................................................................................................1Стартовое окно...............................................................................................................................3Интерфейс Adobe Flash.................................................................................................................3

Панель «Свойства»....................................................................................................................4Панель инструментов FLASH MX...............................................................................................5

Геометрические фигуры...........................................................................................................7Практическое применение инструментов «Свободное преобразование», «Средство массовой заливки» и «Преобразование градиентам»............................................................8

Практическая работа №1............................................................................................................10

Векторная графика

Векторная графика отличается от растровой тем, что в основе её лежит не пиксель, а простая геометрическая фигура (Линия, отрезок, окружность, квадрат, треугольник....)Векторная графика - это изображения, состоящие из простых объектов: прямых линий, дуг, окружностей, эллипсов, прямоугольников.

Характеристика векторной графики

Достоинства векторной графики:• Изображения занимают относительно небольшой размер• Векторные изображения могут легко масштабированы без потери качества.

Недостатки векторной графики:• Векторная графика не позволяет получать изображения фотографического качества• Векторные изображения иногда не распечатываются или выглядят на бумаге по-

другому, чем на экране.

Программы работающие с векторной графикой

• Corel DrawСпециализированная программа для создания картин и анимации в формате *.cdr

• Macromedia Free HandСпециализированная программа для создания векторных изображении в формате *.h10

• Macromedia FlashПрограмма предназначенная для создания анимации специально для Интернет. Файлы в формате *.swf и *.fla

• Adobe IllustratorОтличная программа для создания векторных изображений от фирмы Adobe. Многие пользователи предпочли её к остальным программам, работающим с векторной графикой

История Flash

Всё началось в далёком 1993 году, Джонатан Гай (Jonathan Gay) разработал программное обеспечение, которое позволяло вводить информацию в компьютер, используя электронное перо вместо клавиатуры (SmartSketch). Для тех лет это было огромным достижением, однако программа не получила желаемой популярности и в связи

1

Adobe Flash Томилова Елена Анатольевнас этим в 1995 году SmartSketch был переделан в программу для анимации. В то время рынок анимации был мизерным, анимационные ролики могли распространяться только на видеокассетах или компакт-дисках. В тоже время Джонатан заинтересовался интернетом и веб-дизайном и сделал ставку на то, что в скором времени интернет станет популярным и с его помощью люди начнут обмениваться анимацией и графикой.

И так новорождённую программу назвали «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

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

Adobe Flash Томилова Елена Анатольевна

Панель «Свойства»

Панель «Свойства» отображает свойства активного (т.е. того которого вы выделили) объекта. По умолчанию она выглядит так

1 – настройки публикации2 – размер сцены3 – фон сцены4 – скорость смены кадров

4

Библиотека

Рабочая область

Заголовок окна

Шкала времени

Масштаб просмотра

Панель инструментов

Слои

Строка меню

Свойства

Цвет

2 3 4

1

Adobe Flash Томилова Елена Анатольевна

Панель инструментов FLASH MX

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

1 – Средство Стрелка, Выделение (Selection) или (V) – используется для выделения объектов в рабочей области. С помощью этого инструмента можно одним щелчком выделить объект, нарисовать область для выбора нескольких объектов или дважды щелкнуть им, чтобы выделить области заливки и штрихования объекта. Правда, после щелчка на изображении, содержащем и штрихи, и заливку, будет выделена только та область, на которой был произведен щелчок.

2 – Спецвыделение (Subselection) (А) - производится выделение отрезков прямых линий или контуров изображения. Его также можно использовать для отображения точек на линиях и контурах и последующего перетаскивания этих точек с целью изменения изображения.

3 – Свободное преобразование (Q) - вращение, изменение размеров или Инструмент преобразование градиента (F) - позволяет управлять заливкой: направление, радиус

4 – Лассо (L) - выделяет области произвольной формы. Он используется для "захвата" неудобных областей. Щелкните на инструменте и нарисуйте область произвольной формы. Инструмент будет "привязан" к указателю мыши до тех пор, пока вы не отпустите кнопку, создавая тем самым конечную точку.

5 – Перо (Р) - является наиболее мощным инструментом рисования. С его помощью можно точно нарисовать траекторию, состоящую из прямых и криволинейных участков.

6 – Текст (Т) - для создания и редактирования текстов и текстовых полей. После щелчка на инструменте Текст создается место для начала ввода текста. Атрибуты текста назначаются на панели инспектора свойств.

7 – Линия (N) - позволяет нарисовать прямую линию. Удерживая нажатой клавишу <Shift>, с помощью данного инструмента можно рисовать линии по горизонтали,

вертикали или по диагонали.

8 – Овал (О) – для рисования овалов и идеальных кругов. Чтобы нарисовать овал, щелкните и перетащите инструмент; для создания круга при щелчке и перетаскивании удерживайте нажатой клавишу <Shift>. Прямоугольник (R) – позволяет рисовать прямоугольники и квадраты. Чтобы нарисовать прямоугольник, щелкните и перетащите

5

1

3

5

7

9

11

13

15

17

19

21

2

4

6

8

10

12

14

16

18

20

22

Adobe Flash Томилова Елена Анатольевнаинструмент; для создания квадрата при щелчке и перетаскивании удерживайте нажатой клавишу <Shift>.

9 – Карандаш (Y) – для рисования прямых и кривых линий (рисование от руки, карандашом).

10 – Кисть (B) – рисование кистью

11 – Чернильница (S) - создает и изменяет цвет, толщину и стиль линий контура фигуры

12 – Средство массовой заливки (К) - для заливки фигур, имеющих контур

13 – Пипетка (I) - копирует заливку или стиль линий объекта

14 – Ластик (Е) - для частичного или полного стирания линий, заливок и фигур

15 – Рука (Н) - для перемещения рабочей области

16 – Масштаб (M, Z) - приближает или удаляет рисунок

17 – Цвет обводки

18 – Цвет заливки

19 – Поменять цвета и удалить линию

20 – Привязать к объектам - при включенном Притягивании - объект при рисовании притягивается к месту

20 – Размыть - сглаживает линии и простые кривые

21 – Резкость - спрямляет линии и простые кривые

6

Adobe Flash Томилова Елена Анатольевна

Геометрические фигуры

Чтобы нарисовать прямоугольник надо включить инструмент Прямоугольник

(Rectangle), щелкнув по кнопке на панели инструментов. Теперь можно рисовать так же, как и в редакторе Paint — нажать левую кнопку в одном из углов прямоугольника, растянуть и отпустить.

Если при растяжении удерживать клавишу Shift, получается квадрат. При нажатии Alt прямоугольник рисуется не из угла, а из центра (точки

пересечения диагоналей). Маленькая черная стрелка в правом нижнем углу говорит о том, что одна кнопка

позволяет включать несколько инструментов. Если немного задержать мышку на кнопке

при нажатой левой кнопке, мы увидим дополнительное меню, из которого сможем выбрать нужный вариант:

Прямоугольник (Rectangle);

Овал (Oval); Прямоугольник с

настройкой (Rectangle Primitive);

Овал с настройкой (Oval Primitive);

Многоугольник, звезда (PolyStar).

Выберите на панели инструмент Круг и потащите указатель на рабочей области вправо и одновременно вниз. У Вас получилось некое подобие круга, а чтобы получился точно круг, то нужно плюс ко всему во время рисования зажать Shift. Вы наверно заметили, что под панелью инструментов когда выбрали "круг" появились дополнительные опции: они указывают цвет заливки и обводки. В результате рисования должно получиться:

7

Adobe Flash Томилова Елена Анатольевна

1 – заливка2 – цвет линий обводки3 – толщина линий обводки4 – вид линий обводки5 – настройка линий обводки

Выделите объект инструментом выделение, то в панели "свойства" появиться следующее:

1 – высота объекта2 – ширина объекта3 – положение по оси Х4 – положение по оси Y

Практическое применение инструментов «Свободное преобразование», «Средство массовой заливки» и «Преобразование градиентам»

1. Теперь вернёмся к нашему кругу и выделите его с помощью инструмента «Свободное преобразование»

8

1 4

2 3

4

2 1

3

1

2 3 4 5

Adobe Flash Томилова Елена АнатольевнаЕсли перевести курсор в точку1 – получаете возможность изменения размеров высоты2 – изменение размеров ширины3 – одновременно и ширина и высота4 – вращение

2. Залейте круг градиентом, для этого выберите инструмент «Заливка». А затем в панели «Свойства» или «Цвета» выберете цвет красный градиент

и щелкнете в центре вашего круга, получиться приблизительно

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

9

Adobe Flash Томилова Елена АнатольевнаПрактическая работа №1.

Нарисовать колобка.1. Создайте новый файл.2. Установите следующие свойства документа 500*400

3. Нарисуйте окружность. Выделите ее с помощью инструмента «Стрелка».4. Залейте фигуру желтым цветом.

5. Скопируйте полученную фигуру.6. В окне "Свойство" измените ширину и высоту второй фигуры в три раза меньше,

для этого уменьшите ширину и установите Связку - изменять автоматически высоту. 

10

Adobe Flash Томилова Елена Анатольевна

7. Залейте полученную фигуру черным цветом. Скопируйте его три раза (чтобы у Вас было 4 фигуры, равных трети исходного).

8. Выделите две полученные фигуры, залейте их белым цветом и перетащите по одному на место глаз.

11

Adobe Flash Томилова Елена Анатольевна

9. Один из чёрных овалов, не выделяя его, «схватите» инструментом «Выделение» за верхнюю линию и дотяните до середины изменяемого овала. Получим рот. Переместите фигуры на соответствующее место.

10. Выделите оставшуюся фигуру, измените ее ширину и высоту в 4 раза. Скопируйте ее, чтобы получилось 3 фигуры.

11. Две полученные фигуры – зрачки, переместите на соответствующее место. 12. Нарисуйте нос. Оставшуюся окружность выделите, залейте красным цветом и

перенесите ее.

13. Сохраните файл под именем Фамилия_пр1.fla14. Пришлите в архиве.

12