Работа в программе Флеш. Урок 1 Урок 1 Урок 2 Урок 2 Урок 3 Урок 3 Урок 4 Урок 4 Урок 5 Урок 5 Урок 6 Урок 6 Урок 7 Урок 7 Урок 8 Урок 8 Урок 9 Урок 9. - презентация

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

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

3 Урок 1

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

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

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

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

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

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

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

11 Урок 2

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

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

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

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

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

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

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

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

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

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

22 Урок 3

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

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

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

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

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

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

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

30 Урок 4

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

32 Пример :

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

34 Урок 5

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

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

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

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

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

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

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

42 Урок 6

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

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

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

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

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

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

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

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

51 Урок 7

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

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

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

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

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

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

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

59 Урок 8

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

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

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

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

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

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

66 Урок 9

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

68 Урок 10

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