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 1
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Adobe Flash Томилова Елена АнатольевнаЛекция 1. Векторная графика. Macromedia Flash MX Инструменты и технологии рисования во Flash
Характеристика векторной графики........................................................................................1Программы работающие с векторной графикой....................................................................1
История Flash.................................................................................................................................1Стартовое окно...............................................................................................................................3Интерфейс Adobe Flash.................................................................................................................3
Геометрические фигуры...........................................................................................................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
После запуска программы на экране появляется стартовое меню.
Открыть последний элемент (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. Пришлите в архиве.