Работа в программе Флеш

Урок 1 Урок 1 Урок 2 Урок 2 Урок 3 Урок 3 Урок 4 Урок 4 Урок 5 Урок 5 Урок 6 Урок 6 Урок 7 Урок 7 Урок 8 Урок 8 Урок 9 Урок 9 Урок 10 Урок 10

Урок 1

Р ИСОВАНИЕ К ОНТУР, ОБВОДКА, ЗАЛИВКА Выберите инструмент редактирования Oval ( Овал ) на панели инструментов ( рис ) и нарисуйте овал. Фигура автоматически будет залита цветом. ( Если при рисовании овала удерживать клавишу Shift, то рисуемая фигура будет иметь форму окружности.) П ОМЕНЯЙТЕ ЦВЕТ ЗАЛИВКИ И КОНТУРА Цвет заливки Цвет контура

И НСТРУМЕНТ R ECTANGLE Инструмент Rectangle ( Прямоугольник ) расположен рядом с инструментом Oval ( рис.). Помимо традиционного прямоугольника можно рисовать прямоугольники со скругленными краями. Для того чтобы задать такой режим, выберите иконку, на которую на рис. указывает красная стрелка. В результате появится панель Rectangle Settings, где вы определяете радиус скругления, после чего при рисовании прямоугольника углы будут скругляться. Редактирование заливки и обводки контура прямоугольника производится так же, как и в случае с овалом.

И НСТРУМЕНТ L INE Инструмент Line ( Линия ) позволяет проводить прямые линии ( рис.). При удерживании клавиши Shift можно проводить вертикальные, горизонтальные линии или линии под углом 45°.

И НСТРУМЕНТ P ENCIL Инструмент Pencil ( Карандаш ) расположен под инструментом Oval. На рис. показан результат работы с карандашом при разных вариантах его настройки, которых всего предлагается три. При варианте настройки Straighten инструмент превращает дрожащие линии контура, проведенного от руки, в прямые, при варианте настройки Smooth сглаживает линии, а в режиме Ink практически не меняет исходный контур.

И НСТРУМЕНТЫ A RROW И L ASSO Для выделения объектов применяются инструменты Arrow и Lasso ( Лассо ). Нарисуйте эллипс и с помощью инструмента Arrow выделите его заливку одним щелчком мыши ( цвет выделенной заливки будет осветлен белыми точками ) и переместите ее как показано на рис. Если вы используете двойной щелчок, то будет выделяться также прилегающая к заливке линия обводки. Двойной щелчок позволяет также выделять пересекающиеся линии.

Задание С помощью инструментов рисования создать изображение :

Домашнее задание : С помощью инструментов рисования создать любое изображение ( разрешено сохранить на своем носителе программу Flash, с целью установить на своем ПК ), сохранить рисунок на носителе.

Урок 2

Повторение Взять инструмент Rectangle ( использовать параметр скругления Rectangle Settings), нарисовать объект, изменить заливку фона и контура. Выделить объект ( контур и заливку ) инструментом Arrow, скопируйте, вставьте, передвиньте объект. Поменяйте цвет. У вас должно получиться следующее изображение :

Повторение Нарисуйте овал инструментом Oval. Выделите заливку. Передвиньте заливку. У вас должно получиться : Получите оценку за самостоятельную работу. Получите оценку за самостоятельную работу.

Ход урока Ход урока : Рисунок состоит из контура, обводки контура и заливки ( рис 1). Для того чтобы выделить контур фигуры, щелкните мышью по кнопке, показанной на рис. красной стрелкой. В результате линия обводки и заливка пропадут, останется только контур ( рис. 2). Повторное нажатие кнопки, показанной на рис. 1, возвращает удаленные элементы. Цвет обводки контура и заливки легко поменять.

И НСТРУМЕНТ B RUSH На панели Options предусмотрены три варианта настройки инструмента Brush: режимы ( верхняя кнопка ), размеры кисти ( средняя кнопка ) и форма кисти ( нижняя кнопка ) ( рис.).

Режимы определяют характер взаимодействия проводимой линии с уже нарисованным объектом ( рис.). Как видно из рисунка при проведении однотипных горизонтальных линий в разных режимах, закрашивание происходит по - разному : Paint Normal закрашиваются пространство кадра линия обводки и заливка закрашиваемого объекта ; Paint Fills закрашивается пространство кадра и заливка закрашиваемого объекта. Линия обводки не закрашивается ; Paint Behind закрашивается только свободное пространство кадра ; Paint Selection закрашивается только выделенная область ; Paint Inside закрашивается только заливка, с которой было начато закрашивание.

Самостоятельно пробуем различный размер и тип кистей, изменяя цвет, Самостоятельно пробуем режим взаимодействия линии с уже существующим объектом ( нарисовать объект, изменить цвет линии, взять инструмент B RUSH, пробуем разные стили наложения линии на объект ).

Л АСТИК Ластик позволяет стирать линии и заливку и имеет ряд различных настроек. В панели Options можно настроить размер и форму ластика, а также выбрать режим стирания ( рис.): Erase Normal стирается линия обводки и заливка объекта ; Erase Fills стирается заливка объекта ( линия обводки не стирается ); Erase Lines стираются только линии ; Erase Selected Fills стирается только выделенная область. Erase Inside стирается только заливка, причем при проведении ластиком линии стирание производится только внутри контура, в котором была начата линия. Модификатор Faucet ( Кран ) позволяет удалять полностью заливку или линию. Пробуем самостоятельно все режимы стирания ( сначала нарисовать объект, затем взять ластик ).

И НСТРУМЕНТ P EN Инструмент Pen ( Перо ) позволяет непосредственно работать с контурами. С его помощью можно создавать прямые и изогнутые сегменты, регулировать длину прямых и наклон изогнутых сегментов.

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

Домашнее задание : Нарисуйте рисунок используя различные параметры и цвета инструмента B RUSH и инструмента ЛАСТИК. П РИМЕР :

Урок 3

Закрепление навыков рисования ( сам. работа ) Нарисовать изображение ( см. рисунок )

Выделить экран нарисованного ПК. Затем импортируйте растровое изображение, которым и будет заливаться экран. Можно импортировать растровое изображение, выполнив команду File - Import ( в правой колонке, в настройках инструмента заливка ) и выбрав необходимый файл. Далее перейдите в панель Fill ( Заливка ) и поменяйте способ заливки на растровый Bitmap ( рис.).

Т РАНСФОРМАЦИЯ ОБЪЕКТОВ Можно модифицировать отдельные элементы изображения. Для этого выделяем глаз с помощью инструмента Arrow и выполняем команду Modify > Transform> Free Transform

Если вам необходимо повернуть объект на определенный угол, можно воспользоваться командой Modify > Transform > Scale and Rotate Выделите обект Выполните команду Modify > Transform > Scale and Rotate

Г РУППИРОВКА ОБЪЕКТОВ Для того чтобы получить единый объект, составляющие его элементы ( контур, заливку ) необходимо сгруппировать. Выделите объекты, которые вы хотите группировать, и выполните команду Modify > Group.

Сгруппированный объект можно масштабировать и трансформировать, но если вы попробуете отредактировать линии объекта с помощью элементов Arrow или Subselect, то эти команды окажутся недоступными. Однако если выполнить команду Modify > Ungroup, то редактирование вновь станет доступным.

Домашнее задание : Нарисовать окно на улицу ( использовать в окне заливку растровой картинки ). Пример :

Урок 4

« Создание стилизованной буквы с помощью инструментов рисования и работы с опорными точками безье » ( проект ) 1. Нарисовать с помощью инструментов рисования заглавную букву. 2. Выделить нарисованную букву, с помощью инструмента Sabselectio Tool, изменить положение опорных точек, добиваясь законченной стилизации изображения. 3. Выделить окончательный вариант буквы, залить любым способом заливки, сгруппировать. 4. Получить оценку.

Пример :

Домашнее задание : Рисунок в программе на свободную тему.

Урок 5

Р АБОТА С ТЕКСТОМ Для создания текста выберите инструмент Text ( кнопка с буквой А она показана нажатой на рис.) и выполните команду Window - Properties. В результате появится одноименная панель.

Р АСШИРЯЕМЫЙ ГОРИЗОНТАЛЬНЫЙ ТЕКСТ Для создания расширяемого горизонтального текста выберите инструмент Т ext, щелкните на рабочем поле ( появится текстовый блок, в правом верхнем углу которого имеется круглый маркер ), по мере ввода текста блок расширяется ( рис.). Если вы хотите поменять ширину текстового блока, потяните за маркер перенос слов в тексте и высота текстового блока поменяются автоматически.

С ТАТИЧЕСКИЙ ВЕРТИКАЛЬНЫЙ ТЕКСТ Для того чтобы располагать текст вертикально, щелкните по иконке с буквами Abcd ( под рабочей областью ). В результате появится панель, где можно выбрать варианты Vertical, Left to Right ( при этом текст будет заполняться, как показано на рис.) либо Vertical, Right to left ( в этом случае текст будет заполняться вертикально справа налево ).

Ф ОРМАТИРОВАНИЕ ТЕКСТА При выборе шрифта из выпадающего меню ( рис.) в панели справа отображается его начертание. Рядом с панелью выбора шрифта располагаются кнопки, которые позволяют задать размер шрифта, сделать текст полужирным или курсивным и выбрать цвет заливки текста. Интерфейс данных кнопок реализован так же, как и в программе Word, и не требует пояснений.

Для того чтобы изменить межсимвольный интервал, щелкните по стрелке вниз рядом с полем Character Spacing ( рис.) и передвиньте движок или просто введите нужное значение в поле ввода.

С ВЯЗЫВАНИЕ ТЕКСТА С URL Связывание текста с URL возможно только для горизонтального текста. Напечатайте текст, например « связывание текста с URL», как на рис. Выделите напечатанный текст и в поле ссылки наберите URL- ссылку в нашем примере а затем выполните команду Control - Т est Scene и щелкните мышью по надписи загрузится соответствующая Web- страничка.

П РЕОБРАЗОВАНИЕ И РАЗБИЕНИЕ ТЕКСТА Текстовые блоки можно преобразовывать точно так же, как и другие объекты, масштабировать, поворачивать, искажать и зеркально отображать.

Урок 6

А НИМАЦИОННЫЕ ЭФФЕКТЫ Можно применять функцию анимационные эффекты (Timeline Е ffects) к следующим объектам : текст ; графические объекты, включая формы, сгруппированные объекты и графические символы ; растровые изображения ; кнопки. Когда добавляются анимационные эффекты к объекту, Flash автоматически создает соответствующий слой и все трансформации движения и формы, необходимые для данного эффекта, реализуются в этом слое. Новый слой автоматически получает то же имя, что и эффект.

Пример 1: В качестве примера создадим эффект « взрыв » применительно к тексту. Для этого напечатаем некоторую фразу или слово ( рис.), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode.

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

Пример 2: Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage ( рис.). Сгруппировать объект по команде Modify => Group. Применим эффект В lur по команде Insert => Timeline Effects => Effects => Blur. Нажимаем Ок.

Создаем анимацию : 1. Нарисовать лист. 2. Выделить его инструментом выделения. 3. Сгруппировать по команде Modify => Group. 4. Центр вытащить за пределы рисунка.

Покадровая анимация Рассмотрим простейший пример листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси. После того, как мы нарисовали лист соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр это кадр, в котором происходит помещение содержимого или его изменение.

Создаем дубль существующего ключевого кадра, правым кликом по соседнему кадру выбираем команду Insert – keyframe. На новом ключевом кадре изменяем положение листка ( сдвигаем в нижний правый угол ) и поворачиваем по команде Modify => Transform => Free Transform. Создаем еще 5-6 ключевых кадров, на которых меняем положение объекта, сдвигая и поворачивая его. Для просмотра результата выполняем команду Control => Test Movie. Сохранение File => Export => Export Movie.

Домашнее задание Создать покадровую анимацию любого объекта.

Урок 7

А ВТОМАТИЧЕСКАЯ АНИМАЦИЯ Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert => Timeline => Create Motion Tween, в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic ( рис.).

Это означает, что анимируемый объект автоматически преобразован в графический символ. Символы делятся на графические (graphic), символы - кнопки (button) и символы - мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа ( отражаются в библиотеке – в правой стороне ). Если выполнить команду Window => Library, то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1.

После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации ( пусть это будет 15- й кадр ) и вставим ключевой кадр ( по команде Insert Keyframe). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси ( по команде Modify Transform=>Free Transform), как в предыдущем примере.

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal ( предварительно нужно отменить все предыдущие действия по созданию анимации ).

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

Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties. Положительные значения параметра Ease приводят к замедлению движения, а отрицательные к ускорению. Выберем максимальное ускорение объекта.

Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями ( поворот, масштабирование и т. п.).

Урок 8

Д ВИЖЕНИЕ ПО ЗАДАННОЙ ТРАЕКТОРИИ 1. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide. 2. В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer Щелкнем мышью по слою траектории и с помощью инструмента « карандаш » нарисуем линию, вдоль которой планируется перемещение листка ( рис.).

4. Теперь перейдем в первый кадр ( щелкнем по нему мышью ) и в появившейся панели Properties установим флажок Snap ( задает режим привязки к траектории движения ) рис.

5. Центр листа совместится с траекторией движения на первом и последнем кадре.

6. Необходимо поставить флажок Orient to Path

Самостоятельная работа : Создать движение произвольного объекта по заданной траектории.

Домашнее задание : Создать автоматическую анимацию движения птицы ( самолета ) по траектории.

Урок 9

Самостоятельная работа Создать движение объекта ( смешенное ) по двум направлениям и по заданной траектории :

Урок 10

Самостоятельная работа Создать движение объекта по заданной траектории :