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