Растровая заливка.

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

1. Импортируйте растровое изображение в свой фильм. Для этого, используя команду Главное меню/File/ Import, найдите нужный файл (y4/men.jpg).

1. Выполните команду Главное меню/Modify /Break Apart Нарисуйте овал.

2. Возьмите инструмент пипетка (14) и щелкните на изобра­жении мужчины.

3. Выберите инструмент заливки (13) и щелкните внутри овала.

4. Выберите инструмент стрелка (1), выделите и удалите границу, измените форму овала

5. Выделите исходную фотографию и удалите ее. Работу сохраните в файле Фото.

Градиент.

Ваш лепесток может быть закрашен не одним цветом, а разными цветами с переходом цветов. Для этого использует­ся заливка с градиентом (см. рис. 3).

рис. 3 рис. 4

Тогда лепесток может быть разукрашен так, как показано на рис.4.

Градиентом называется плавный переход из одного цвета в другой. Сложные градиенты могут содержать несколько та­ких переходов. Во Flash градиенты могут быть линейными и ра­диальными. В раскраске лепестков мы использовали радиаль­ный градиент.

Создание градиента.

1. Нарисуйте лепесток, затем выделите его.

2. Откройте панель Главное меню/Window/Design Panels/Color Mixer

рис. 5

3. Выберите линейный градиент (Linear) (см. рис. 5)

4. Чтобы изменить цвет в градиенте, щелкните на одном из бегунков ниже полосы градиента

5. Щелкните на образе цвета выше полосы градиента и вы­берите цвет

6. Переместите ползунки вдоль линии. Чем дальше находят­ся ползунки, тем плавней является градиент и наоборот.

7. Для получения сложного градиента добавьте в него цве­та. Для этого щелкните мышью над полосой градиента,появится еще один ползунок.

8. Выберите цвет для нового ползунка.

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

Простейшая анимация. Публикация фильма.

Анимация - процесс изменения размера, положения, цве­та или формы объекта во времени. Все фильмы состоят из ка­дров. Каждый кадр содержит одно статическое изображение. Иллюзия движения создается благодаря незначительным из­менениям в рисунках от одного кадра к другому. Различают статические повторяющиеся кадры и ключевые кадры, кото­рые используются когда необходимо сделать какие-либо из­менения в изображении. На рис. 1 представлен ключевой кадр (отмечен на временной шкале небольшим черным кружком).

рис. 1

Шкала кадров - поле, где можно добавить или удалить кадр. Если навестись мышью на шкалу кадров и щелкнуть пра­вой кнопкой мыши, то откроется контекстное меню, в кото­ром прописаны все операции, которые можно совершать с ка­драми.

Цвет кадра говорит о его типе:

• белый цвет кадра говорит о том, что в кадре ничего нет (пустой ключевой кадр)

• серый цвет содержат кадры, повторяющие ключевой кадр

• сиреневый или зеленый цвет говорит о том, что кадры сформированы программой Flash.

• темно-синий цвет говорит о том, что кадр выделен.

Для включения шкалы кадров (или временной шкалы) нуж­но поставить галку в Главное меню/Window/TimeLine. Различают два вида анимации во Flash:

1. Ручная анимация. Пользователь сам прорисовывает все изменения на рабочем поле от кадра к кадру.

2. Автоматическая анимация. Программа сама создает из­менения от кадра к кадру, а пользователь задает только начальное изображение и конечное

Займемся ручной анимацией. Итак, попробуем создать ани­мацию цветка на ветру. Предполо­жим, что от кадра к кадру у цветка будут немного изменяться лепест­ки. Для этого выполним:

1. Нарисуйте цветок (см. рис. 2)

Скопируйте цветок до 30 кадра. Для этого щелкните ле­вой кнопкой мыши в 30 кадре. Выполните команду Глав­ное меню/lnsert/Timeline/Frame (клавиша F5) При этом получим скопированное изображение цветка сразу в 30 кадрах, но пока все копии одинаковы. Уберите выделе­ние. Щелкните на любом кадре (3, 5, 7, 23) и убедитесь в этом. Теперь сделаем несколько ключевых кадров (5, 15, 20, 25, 30), где изображение цветка будет изменено. Для этого щелкните мышью на 5 кадре и выполните команду Главное меню/lnsert/Timeline/Keyframe (F6) (см. рис. 2).

4. Теперь, когда выделен 5 кадр, необходимо немного изменить цветок. Изменим его на такой, (см. рис. 3) Аналогичные действия выпол­ните для 15, 20, 25 и 30 кадров.

Для воспроизведения фильма нажмите клавишу Enter

3. Сделайте летающую бабочку (см. рис 6). Работу сохраните в файле Бабочка.

Публикация Flash - фильмов.

Созданный вами фильм можно сохранить в разных форма­тах, удобных для воспроизведения. В большинстве случаев ис­пользуется формат с расширением swf. Но можно опублико­вать фильм с расширением exe, html, gif и т. д. Для того, что­бы опубликовать фильм в нужном формате, выполните следу­ющие команды:

1. Сохраните файл с расширением fla.

2. Выполните команду Главное меню/File/Publish Settings.

3. На выпавшем меню (см. рис. 7) установите флажки на нужных типах файлов. На рис. 7 активны форматы с расширением html и swf. В результате в той же директории, где вы сохранили файл с расширением fla, появятся два новых файла.

4. Закройте программу Flash и запустите эти файлы из про­водника.

Копирование изображения. Сохранение изображения в виде символа.

Предположим, что в силу обстоятельств мы не можем на­рисовать картинку, которую хотелось бы использовать. Но мы можем наложить на картинку прозрачную бумагу и обвести контуры картинки. Такой же способ существует и в программе Flash. Рассмотрим способ копирования изображения во вто­рой кадр.В папке Рисунки1 , в файле Vini.jpg лежит изображение Вини-Пуха, Со­вы и Пятачка (см. рис 1). Вам необходимо скопировать это изо­бражение к себе в файл и представить эту картинку по-своему (см. рис. 2).

Выберите команду Главное меню/File/lmport, найдите файл Vini.jpg и загрузите его.

1. Выберите инструмент стрелка (1), поместите курсор на шкале времени на втором кадре. Выберите команду Главное меню/lnsert/Timeline/Blank Keyframe (вставьте пустой кадр).

2. Щелкните на пиктограмме Onion Skin на шкале времени для того, чтобы включить режим копирования (см. рис. 3). При этом появится серое изображение эскиза. Теперь его можно скопировать во второй кадр. Если требуется увидеть полученный рисунок без шаблона, достаточно щелкнуть еще раз на пиктограмме Onion Skin

Рис. 3

4. Теперь можно приступить к обводке. Выберите инстру­мент карандаш и обведите разные детали изображения. Вначале скопируйте Сову. Не закрашивайте ее. Сохрани­те ее в виде символа. Для этого выделите сову и выполни­те команду Главное меню/Modify /Timeline/Convert to symbol. Введите наименование "Sova" в поле Name окна Symbol Properties. Проследите, чтобы была активна об­ласть Graphic и щелкните на кнопке ОК (см. рис. 4).

рис.4.

3. Скопируйте также и Пятачка.

Обратите внимание, что созданные вами два новых графи­ческих символа появились в библиотеке вашего документа. Для этого выполните команду Главное меню/Window/ Library.

6. Теперь необходимо эти два символа перенести в новый документ. Для этого, не закрывая старого документа и его библиотеку, откройте новый документ и соберите на нем изображение Совы и Пятачка из библиотеки преды­дущего документа (пробуксировать мышью изображе­ние из окна библиотеки на рабочую область)

7. Для того чтобы разукрасить или внести изменения в сим­вол, необходимо символ перевести на полотно. Выдели­ те символ, выберите команду Главное меню/ Modify/ Break Apart, а затем снимите выделение и приступите к работе.

Изобразите бегущего страуса, изменив у него только по­ложение ног, в соответствии с рис.5. Исходное изображение страуса находится в файле y7/CTpayc.jpg. Работу сохраните в файле Страус.

Результат работы можно посмотреть в файле У7/Бегущий страус.fla

Работа со слоями. Копирование изобра­жения в другой слой.

(для работы используются файлы У8/Рок_концертЛа и

Vini.jpg)

При создании мультфильма разные объекты удобнее представлять на разных слоях. Изображение собирается как будто на прозрачных «стеклах». При этом на каждом «стекле» будет работать свой мультфильм независимо от других. При этом верхним «стеклышком» является самый верхний слой. Дополнительные слои включаются на временной шкале (см. рис. 1)

Рис.1.

На данном рисунке слой 1 и 10 являются невидимыми, слои 1, 4 и 6 закрыты для исправлений, а слой 5 является активным, т.е. все рисование происходит на 5 слое. Для того, чтобы сде­лать слой активным для рисования, нужно его выбрать, т. е. щёлкнуть левой кнопкой мыши на этом слое. Для того чтобы скрыть слой или запретить на нем рисовать, необходимо щелк-ну1ъ левой кнопкой мыши на точке, расположенной под "гла­зом" или под "замком", соответственно, на нужном слое.

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

На рис. 2 представлен рок концерт. При этом каждый му­зыкант анимирован на своем слое

Рис . 2

Мультфильм «Рок концерт» можно посмотреть в файле У8/Рок_концерт

Из файла Vini.jpg скопируйте изображение Вини-Пуха, Совы и Пятачка на 3 разных слоя. /

1. Откройте файл Vini.jpg. Перерисуйте на первый слой Со­ву.

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

3. В третий слой скопируйте Пятачка.

4. Сохраните каждую фигуру в виде символа для возможной дальнейшей обработки. Сохраните работу в файле Вини.

5. Откройте свой файл с летающей бабочкой из урока 6 и добавьте на второй слой фон в виде грибов. Пусть ба­бочка летает на природе (см. рис. 3). Работу сохраните в файле с именем Природа.

Работа с текстом.

(для работы используется файл У9/ФормулыЛа) Работа с текстом в этой программе осуществляется при выборе инструмента Текст (5). На панели Properties (свойства) можно выбрать размер букв, шрифт, цвет шрифта и расстоя­ние между буквами (см. рис. 1)

рис. 1

Свойства текста можно также устанавливать командой лавное меню/Text.

Создадим мультфильм, используя работу с текстом.

1. Выберите инструмент Текст, установите размер букв 30, цвет синий, стиль Bold, Italic и напишите фразу

Мне нравится работать во Flash

2. Скопируйте эту фразу в 50 кадров. Для этого установите курсор в 50 позицию на временной шкале и нажмите кла­вишу F6.

3. Установите ключевые кадры в 5, 10, 15, 20, 25, 30, 35, 40 позиции. В этих кадрах мы будем менять надпись.

4. Поставьте курсор в 5 позицию, выделите надпись и по­верните ее, используя команду Главное меню/Modify/Transform/Rotate and Skew.

5. Измените цвет и размер букв (см. рис 2).

6. Проделайте пункты 1-5 для всех ключевых кадров.

рис.2

Использование эффекта тени в надписях.

1. Для того, чтобы получился эффект тени, необходимо > сделать одну и ту же надпись на разных слоях и разного цвета.

2. Напишите розовым цветом фразу «С праздником!»

3. Выберите второй слой и скопируйте туда эту надпись.

4. Поменяйте цвет надписи на втором слое на серый.

5. Поменяйте слои местами, чтобы серая надпись была сни­зу.

6. Сдвиньте надписи так, как показано на рис. 3.

1. Сделайте бегущую строку.

2. Сделайте мультфильм на тему школы (см. рис. 4). При­ мер подобного фильма приведен в файле У9/Формулы.Ла

Рис 4

9.2. Автоматическая анимация. Преобразо­вание одного объекта в другой.

(для работы используются файлы УЮ/boyi.jpg, boy2.jpg, boy. fla)

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

Автоматическую анимацию различают двух видов: 1. Анимация с изменением характеристик или перемещения объекта. Такая анимация во Flash называется Motion Tweening. На временной шкале кадры с такой анимацией представлены в виде ключевых кадров в начале и в конце временной шкалы, между которыми расположена чер­ная стрелка, представляющая промежуточные кадры. Промежуточные кадры имеют светло-сиреневую окрас­ку (см. рис. 1).

рис. 1

2. Анимация с преобразованием одного объекта в другой (преобразование формы). Такая анимация во Flash назы­вается Shape Tweening. Эта анимация представлена в ви­де ключевых кадров в начале и в конце временной шкалы, между которыми расположена черная стрелка, пред­ставляющая промежуточные кадры. Промежуточные ка­дры имеют светло-зеленую окраску (см. рис. 2).

рис. 2

Если за ключевым кадром следует пунктирная линия, это означает, что анимация с построением промежуточных кадров является незавершенной или выполнена неверно (см. рис. 3)

рис. 3

Анимация с преобразованием формы дает возможное превратить один объект в другой с изменением цвета, разм ра и расположения объекта. Например, зеленый квадрат м< жет постепенно превратиться в красный круг (см. рис. 4)

Рис. 4

Выполним это преобразование

1. Откройте новый документ, встаньте в первый кадр на временной шкале (этот кадр должен быть ключевым) и нарисуйте в этом кадре большой зеленый квадрат.

2. Установите курсор мыши на 15 кадр временной шкалы и сделайте этот кадр ключевым (нажмите клавишу F6). Зе­леный квадрат на рабочем поле является выделенным. Удалите его и нарисуйте в 15 кадре красный круг. Установите курсор мыши в 1 кадр и сделайте анимацию формы. Для этого откройте панель свойств. Выполните ко­манду Главное меню/Window/Properties. На панели Properties в окне Tween установите анимацию Shape (рис. 5)

   

   
   

   

   
   

3. Откройте новый документ, встаньте в первый кадр на временной шкале (этот кадр должен быть ключевым) и нарисуйте в этом кадре большой зеленый квадрат.

4. Установите курсор мыши на 15 кадр временной шкалы и сделайте этот кадр ключевым (нажмите клавишу F6). Зе­леный квадрат на рабочем поле является выделенным. Удалите его и нарисуйте в 15 кадре красный круг.

5. Установите курсор мыши 1 кадр и сделайте анимацию формы. Для этого откройте панель свойств. Выполните ко­манду Главное меню/Window/Properties. На панели Properties в окне Tween установите анимацию Shape (рис. 5)

Анимация готова. Нажмите клавишу Enter для просмотра.

Анимацию преобразования можно выполнять только с не-сгруппированными объектами. Если требуется выполнить Shape анимацию с объектами, которые были ранее сгруппи­рованы или с текстом, то вначале эти объекты следует раз-группировать командой Главное меню/Modify/BreaR Apart:

Создадим анимацию, в которой слово АНИМАЦИЯ пре­вратится в FLASH.

1. Откройте новый документ, встаньте в первый кадр навременной шкале (этот кадр должен быть ключевым) и напишите слово АНИМАЦИЯ

2. Разгруппируйте надпись по буквам. Для этого выполните команду Главное меню/Modify/Break Apart (разделить отдельно)

3. Разгруппируйте буквы. Выполните команду Главное меню/Modify/Break Apart.

4. Установите курсор мыши на 15 кадр временной шкалы и сделайте этот кадр ключевым (нажмите клавишу F6). Удалите из этого кадра слово АНИМАЦИЯ и напишите в этом кадре слово FLASH.

1. Выполните команды из пункта 2,3 для слова FLASH Установите курсор мыши в 1 кадр и сделайте анимацию формы.

5. Проверьте свою анимацию. Работу сохраните в файле Слово.

Программа Flash дает инструмент, с помощью которого можно управлять процессом преобразования. На фигуре в первом кадре выбираются конкретные области. Эти области обозначаются точками. Дальше пользователь должен указать, в какое место на конечной фигуре эти области переходят, так­же проставив те же точки. На рис. 6 представлено преобразо­вание цифры 1 в цифру 2. При этом выделены три области, обозначенные цифрами 1,2,3. Они указывают, в какие места на цифре «2» должны уходить обозначенные области с цифры «1».

Для выполнения этой анимации выполните следующие ко­манды:

1. В первом ключевом кадре нарисуйте кистью цифру «1».

1. Вставьте ключевой кадр клавишей F6 в 15 кадр и нарисуй­те там цифру «2»

2. Выполните Shape анимацию.

2. Установите курсор в первый ключевой кадр и выполните команду Главное меню/Modify/Shape/Add Shape Hint.

3. Поставьте букву «а» в нужное место

4. Повторите пункт 4 для букв «Ь» и «с».

3. Установите курсор в 15 кадр и выполните пункт 4 для цифры «2»

Расташите буквы в нужном порядке

1. Создайте анимацию, преобразовав желтый кружок на слово «КРУГ». Сохраните работу в файле КруЗ.

2. В папке У10 лежат две фотографии: boy1 .jpg и boy2.jpg. Создайте анимацию превращения маленького мальчика в большого согласно рис.7. Сохраните работу в файле Мальчик.

рис. 7

Готовый фильм лежит в файле boy.fla.