Главная   Разработки   Галерея   Портфолио   Обо мне    

  Методические разработки

Flash технологии (Macromedia Flash 8)
Основной курс по ИКТ
 

 

I МОДУЛЬ


II МОДУЛЬ

III МОДУЛЬ

 

 

 

  Красноярский край  
     
  Карта Красноярского края  
 
Flash-технологии - 1 модуль
I МОДУЛЬ II МОДУЛЬ III МОДУЛЬ

Главная
Интерфейс Flash
Панель инструментов Tools
Инструменты Tools
Публикация и экспорт
Основные панели
Градиентная техника
Особенности рисования
Имитация объёмных фигур
Фильтры
 

Особенности рисования

Растровая графика

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

Применение растровой графики позволяет добиться качественного изображения, фотографического качества. Но за все нужно, платить в данном случае - объемами файлов и трудоемкостью редактирования изображения, приходится каждую точку подправлять вручную. Даже если вы при редактировании используете инструменты типа линии или примитивов (овалов, квадратов), то результат представляет собой изменение затронутых данными инструментами пикселей. При изменении размеров, качество изображения ухудшается: при уменьшении - исчезают мелкие детали, а при увеличении картинка может превратиться в набор неряшливых квадратов (увеличенных пикселей). При печати растрового изображения или при просмотре его на средствах имеющих недостаточную разрешающую способность значительно ухудшает восприятие образа.

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

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

Подобные изображения обычно занимают, значительно меньший объем и более легки в редактировании. Любой элемент картинки может быть изменен отдельно от других. Изображение, безболезненно меняет свои размеры, не теряя при этом четкости и общего расположения элементов. Оно более пластично, что позволяет отображать его на устройствах с различной разрешающей способностью одинаково качественно.

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

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

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

Основы рисования часть-1

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

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

Используя данный прием можно составить сложные фигуры из готовых объектов. Почему же происходит склеивание фигур? Ответ прост. Все, что создано во Flash хранится в виде математических формул описывающих объект. Таким образом, налагая одну фигуру на другую с теми же характеристиками, в одном слое, мы производим сложение формул, в результате которого образуется новая формула, описывающая получившуюся фигуру.

Сегментирование - если на фигуру будет наложена другая фигура, но с отличными характеристиками, например другого цвета, то склеивания не произойдет. Принимая во внимание математическую основу векторной графики во Flash ясно, что происходит вычитание различных характеристик. При попытке выделить составленный таким образом объект, простым щелчком мыши, мы выделим только одну из его частей. Разделение произойдет и в том случае если мы, наложив фигуры с одинаковыми характеристиками, не снимая выделения, переместим наложенную фигуру в сторону от места наложения. В результате из фигуры оставшейся неподвижной, будет вырезан кусок области, которая совпадала с перемещенной фигурой.

Варианты использования разделения. Нарисуем любую замкнутую фигуру с однотонной заливкой. Теперь, пересечем ее карандашом или прямой линией. В результате, части заливки разделенные чертой, стали самостоятельными фигурами, с которыми можно работать отдельно. После изменения самостоятельных заливок, черту можно убрать и получить фигуру с новыми характеристиками закраски. Этот прием называется slicing (деление на части).

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

Любые элементы рабочего уровня легко превратить в объекты наложенного уровня, достаточно их сгруппировать - выделить элементы инструментом Стрелка (Arrow), и сгруппировать Modify / Group [Ctrl+G]. Сгруппированные элементы, можно располагать так же, как и объекты наложенного уровня над, или под другими объектами. Следует учесть, что для изменения группы можно использовать только инструмент Arrow с его модификаторами (поворот, изменение размера и перемещение), другие инструменты не оказывают на группу никакого влияния.

Группу можно разгруппировать Modify / Ungroup [Ctrl+G]. При этом все элементы группы становятся объектами рабочего уровня и доступными для изменения любыми инструментами.

Основы рисования часть-2

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

Но и это еще не все! А, что если в качестве заливки применить не цвет или градиент, а фотографию или рисунок? Нет ничего невозможного!

  • Достаточно импортировать изображение во Flash: File / Import [Ctrl+R],
  • Затем его разбить Modify / Break Apart [Ctrl+B].
  • Теперь "скопируем" изображение Пипеткой (Dropper), и оно станет текущей заливкой, которой можно закрасить необходимую нам фигуру, а текущим инструментом автоматически станет Paint Bucket.

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

Задание: Попробуйте добиться такого вот эффекта

Размытие

Вы конечно, обратили внимание на то, что любое изображение созданное во Flash выглядит очень четко (я не имею в виду крутость картинки :-) ). Как бы Вы не изменяли размеры и трансформацию, картинка будет нарисована строгими линиями. Но очень часто, при создании Web-дизайна необходимо добиться размытия контуров (надо же напустить тумана в глаза).

Размытие очень популярный в дизайне прием, дающий возможность придать большую глубину и позволяющий добиться профессионального вида Вашим работам. Данный эффект можно получить используя соответствующую градиентную заливку, но это не всегда возможно на практике, особенно есть фигура требующая "затуманивания" имеет сложные очертания. Гораздо эффективнее использовать встроенную команду размывки во Flash.

Выделим необходимую фигуру.

  • Откроем окно параметров размытия Modify (Изменить) - Shape (Форма) - Soften Fill Edge (Смягчить заполненные границы).
  • Указываем необходимые параметры: в поле Distance (расстояние) вводим расстояние размытия от границы фигуры, в поле Steps (шаги) мы задаем плавность размытия (не рекомендуется указывать число более 10), Direction (направление) выбираем одно из двух значений; Expand - наружу, Inset - внутрь.

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

Текст с границами, или очерчивание букв.

Интернет пожалуй, как ни одна другая среда, способствовал распространению графического дизайна среди людей не имеющих никакого отношения к живописи и тем более к самому дизайну. В ранних версиях HTML, одной из единственных возможностей, как-то украсить свою страничку, была работа с текстом. Да и сам HTML не что иное, как метаязык разметки текста. Однако это вовсе не означает, что текст сам по себе не может быть элементом дизайна. Как раз наоборот. Именно правильное использование всех возможностей текста создает неповторимый стиль профессионального сайта. Но об этом поговорим позже. Основное отличие Flash от остальных графических редакторов при работе с текстом, заключается в том, что есть два разных состояния текста. Текст сам по себе, т.е. просто текстовый блок, всегда доступный для редактирования, работы с языком сценариев (ActionScript) и имеющий ограниченные возможности для визуального оформления - изменение размера, цвета и наклона. И второе состояние текста, в котором по сути дела мы имеем отношение не с самим текстом, а с его графическим представлением - "разбитый текст".

Посмотрим, чем нас может порадовать Flash и как применить к тексту уже полученные знания.

Текст с границами, или очерчивание букв.

  • Напишите Ваше имя, используя размер кегля более 50-ти с включенным режимом Bold, черного цвета.
  • Разобьем текст Modify (Изменить) - Break Apart (сломать разделение) [Ctrl+B].
  • Выберем инструмент Чернильница.
  • Установим цвет, например красный и толщину линий 2.
  • Выделим текст, если он до сих пор не выделен и применим к нему чернильницу.

Текст приобрел границу. Удалив сами буквы, вы можете оставить только их очертание, полученное в результате использования Ink Bottle.

Интересный эффект получится, если разбить границу и применить Ink Bottle еще раз, но другого цвета. После разбивки границ Вы можете применить к ним градиентную заливку.

Очень популярен эффект "хромирования" текста.

  • После того как Вы написали текст и разбили его, возьмите карандаш (того же цвета) и нарисуйте волнистую линию вдоль текста.
  • Выделите верхнею часть текста (при удержании кнопки Shift, выделяйте последовательно буквы при нажатой левой клавиши мыши) и закрасьте ее градиентной заливкой, при необходимости измените направление градиента - на вертикальное.
  • Проделайте то самое с нижней частью текста.
  • Возьмите инструмент Arrow и двойным щелчком выделите нарисованную ранее линию.
  • Удалите ее.

Перед Вами хромированный текст, очерченный, очерченный с эффектом размытия, и текст полученный путем разбивания текста и эффекта сегментирования.

 
Назад Далее

 

 




   Главная   Разработки   Галерея   Портфолио   Обо мне    

Красноярский краевой Дворец пионеров и Школьников ©2005-2008