Лабы по Флеш
.pdf
5.Чтобы вернуться к редактированию основного фильма, щелкните мышкой по названию сцены «Scene 1».
В основном фильме надо удалить кадры, которые вошли в клип. В данном случае удобнее всего удалить весь слой, предварительно создав новый пустой слой, так как единственный слой в анимации удалить невозможно.
6.В основной фильм необходимо вставить обращение к клипу. Например, так:
• создать специальный слой для клипа;
• открыть окно библиотеки;
• перетащить клип из библиотеки в кадр (рис. 15.9).
Рис. 15.9. Вставка клипа в фильм
7.Проверить анимацию, использующую клип, можно только по команде Control/Test Movie (Управление/Проверить ролик Ctrl+Enter).
Обратите внимание, что объект начинает свое движение из той точки кадра, куда вы перетащили клип.
8.На один слой основного фильма можно поместить несколько экземпляров клипа. Все прямоугольники будут перемещаться одновременно. Если вы хотите, чтобы объекты начинали движение не одновременно, а с некоторым интервалом, их надо разместить на разных слоях и передвинуть точку начала анимации в нужный кадр на шкале времени.
9.Как и в случае с графическим символом, клип можно редактировать.
Измените направление перемещения объекта, вернитесь к основному фильму и посмотрите, что у вас получилось.
Пример с бабочкой
Запустите файл «noлe.swf». На лугу летают бабочки. Во время полета они машут крылышками.
Рассмотрим все этапы подготовки фильма про бабочек.
1-й этап. Бабочка машет крылышками.
Изображение бабочки нужно разбить на три части. Непосредственно в анимации заняты крылья (изменяют свой размер), а тело составляет неподвижный фон.
Заготовки изображения бабочки уже существуют и находятся в файлах «тело.gif», «лев_крыло.gif», «прав_крыло.gif».
1.Создайте новый файл и в нем - три слоя. На каждом слое по команде File/Import (импортировать) разместите изображение одной части тела бабочки.
2.Рассмотрим, как заставить бабочку взмахнуть крылом. С точки зрения плоской анимации взмах крылом - это изменение его ширины. Сначала крыло уменьшает свою ширину, затем увеличивает, причем делается это очень быстро.
Так как при взмахе крылом неподвижной остается та его часть, которая крепится к телу бабочки, необходимо заранее сместить центр вращения крыла. Выделите левое крыло и превратите его в символ по команде Modify/Convert to Symbol (преобразовать в символ). В окне команды поставьте пометку у переключателя Graphic (графический), а в схеме Type (точка регистрации) отметьте точку на правой границе объекта.
Теперь приступим к созданию анимации движения, состоящей из двух шагов: уменьшения ширины крыла, а затем увеличения ширины до прежних размеров. Для точного соблюдения размеров воспользуйтесь направляющими линиями. Не забудьте сместить центр к правой границе крыла!
Совершенно аналогично заставьте взмахнуть бабочку правым крылом. На рис. 15.10 представлена шкала времени анимации взмаха крыла, а
под ней - состояния объекта в ключевых кадрах.
3.Настало время превратить взмахи крыльями в клип.
•Выделите анимацию, расположенную на трех слоях. Анимация на нескольких слоях выделяется при нажатой клавише <Shift>.
•Выполните команду Edit/Timeline/Copy Frames (копировать кадры).
•Проверьте, что ни один объект в кадре не выделен, и создайте клип
по команде Insert/New Symbol (вставить новый символ), назвав его
«крылья».
Рис. 15.10. Шкала времени анимации взмахов крыла
•В режиме редактирования клипа выполните команду
Edit/Timeline/Paste Frames (вставить кадры).
•В основном фильме удалите слои с изображением частей тела бабочки и на отдельный слой «бабочка1» перетащите из библиотеки клип
«крылья» (рис. 15.11).
Рис. 15.11. Превращение анимации взмахов крыла в клип
2-й этап. Поле, покрытое цветами.
Все цветы на поле одинаковые. Каждый цветок - это графический символ. Поэтому достаточно один раз нарисовать цветок, превратить его в символ и «разбросать» этот символ-цветок по площади кадра на отдельном самом нижнем слое «цветы». Для разнообразия можно изменить размер отдельных экземпляров символа или развернуть цветок на некоторый угол. Не забудьте создать цветной фон для поля (рис. 15.12).
Рис. 15.12. Фон фильма, созданный с помощью символа «цветок»
3-й этап. На поле летают бабочки.
На слое, куда вы поместили клип «крылья», создайте анимацию движения командами:
•Create Motion Tween в первом кадре;
•Insert Keyframe - в последнем;
•в конечном ключевом кадре переместите бабочку на новое место.
На рис. 15.13 представлена временная шкала простейшего перемещения бабочки с одного цветка на другой.
Рис. 15.13. Шкала времени перемещения бабочки с цветка на цветок
Если на один слой поместить одновременно несколько экземпляров символа «крылья», все бабочки полетят одновременно.
Использование символов из других фильмов
Запустите файл «миграция.swf». На фоне карты Северной Америки многочисленная группа бабочек совершает перелет, возвращаясь после долгой дороги в родные места.
1.Создайте новый файл и задайте размер кадра 400x460 пикселов.
2.Фон фильма составляет изображение карты, которое уже подготовлено и хранится в файле «карта.gif». Так что вам остается только импортировать это изображение на отдельный слой.
3.В данной задаче главное действующее лицо - та же самая бабочка с машущими крыльями. Чтобы не создавать заново аналогичную анимацию, можно использовать клип, созданный в другом файле. Для этого выполните команду File/Open as Library (Файл/Импорт/Открыть внешнюю библиотеку Ctrl+Shift+O) и в открывшемся стандартном окне выберите файл с требуемым клипом. На экране появится не сам файл с анимацией, а
окно с его библиотекой. Перетащите клип «крылья» на отдельный слой. Как только вы это сделаете, этот клип появится и в собственной библиотеке текущего файла.
4. Бабочка должна лететь по определенному маршруту. Это обычная анимация движения с несколькими ключевыми кадрами - контрольными точками посещения бабочкой определенных мест. Маршрут путешествия выберите сами, но важно, чтобы бабочка вернулась в ту же точку, из которой начала свой путь.
Рис. 15.14. Шкала времени миграции бабочки с указанием схемы перемещения
Вставка клипа в клип
Пока наша «стая» состоит только из одной бабочки, а их число может доходить до десятков и тысяч. Не создавая для каждого экземпляра отдельный слой, достаточно оформить анимацию перемещения одной бабочки, находящуюся на слое «путь» как клип. Новый клип назовем «полет». Учитывая, что сама бабочка тоже является клипом, получается, что один клип мы вставляем внутрь другого клипа.
1. Слой с летящей бабочкой в основном фильме надо удалить, а на его
месте вставить новый слой «путь стаи» и перетащить на него из библиотеки несколько клипов «полет» (рис. 15.15).
Рис. 15.15. Временная ось миграции стаи бабочек
Образец того, что должно получиться, можно посмотреть в файле
«стая.swf».
Если у вас вдруг изменилась задача (бабочки изменили маршрут миграции), отредактировать фильм очень просто. Достаточно перейти в режим редактирования клипа «полет» и изменить траекторию перемещения одной (!) бабочки. Попробуйте...
Одна бабочка изменила маршрут...
Предположим, что одна бабочка из всей стаи решила лететь по другому маршруту.
1.Откройте окно библиотеки фильма.
2.Щелкните правой кнопкой мыши по имени клипа «полет» и в контекстном меню выберите команду Duplicate (дублировать).
3.В открывшемся стандартном окне введите имя нового клипа-дубля, например, «полет1».
4.Дважды щелкнув по имени нового клипа, перейдите в режим его редактирования. Измените траекторию перемещения бабочки, например, в какой-то момент направьте ее в сторону, противоположную направлению перемещения всей группы.
5.Перейдите к основному фильму и щелчком выделите одну из бабочек. Пока что она «живет» по законам клипа «полет». В панели Properties (свойства) щелкните по кнопке Swap (замена символа) и в открывшемся окне (рис. 15.16) выберите имя нового клипа.
Рис. 15.16. Замена клипа, приписанного объекту
Примерный образец того, что должно получиться, можно посмотреть в файле «отклонение.swf».
ИТОГ
Все символы хранятся в библиотеке фильма. Часть символов попадает в библиотеку автоматически (объекты, участвующие в анимации), другие - в результате исполнения специальных команд (Modify/Convert to Symbol, Insert/New Symbol).
Преобразование объекта в графический символ обоснованно в тех ситуациях, когда этот объект используется неоднократно. В случае необходимости редактирования объекта будет достаточно внести изменения только в символ, хранящийся в библиотеке. Все остальные вхождения данного символа в фильм изменятся автоматически.
Без использования клипа невозможно создать сколько-нибудь сложную анимацию, особенно с повторяющейся последовательностью действий, либо размножить объекты с одинаковым поведением. Без символов и клипов невозможно создать мультфильм, сюжетную игру, эффектные заставки.
Задачи для самостоятельного решения
1. Оформление для следующей задачи придумайте сами. Вот сюжет: вы находитесь в комнате и смотрите в окно. За окном зима (осень), падает снег (идет дождь, падают листья).
ЛАБОРАТОРНАЯ РАБОТА № 16. СОЗДАНИЕ СОБСТВЕННЫХ КНОПОК
ПРОСТЕЙШИЕ КНОПКИ
Создадим самую простую кнопку в виде закрашенного квадрата.
1.Выполните команду Insert/New Symbol (вставить новый символ).
Воткрывшемся окне в поле Name (имя) введите имя, которое хотите присвоить кнопке, и отметьте переключатель Button (кнопка).
На экране открылось окно создания кнопки. Его шкала времени состоит из четырех поименованных кадров. 1-й кадр называется Up. Изображение кнопки в этом кадре соответствует тому, как она выглядит в свободном состоянии, когда ее не касается указатель мыши.
Нарисуйте закрашенный квадрат (рис. 16.1).
Рис. 16.1. Окно создания кнопки
2-й кадр - Over, предназначен для хранения изображения кнопки при наведенном указателе мыши. Щелкнув правой кнопкой мыши по 2-му кадру, выполните команду Insert Keyframe. Изображение, созданное в 1-м кадре, скопировалось во второй. Измените цвет квадрата.
3-й кадр - Down хранит изображение кнопки в момент щелчка или удерживания кнопки мыши в нажатом состоянии. Выполните команду Insert Keyframe в 3-м кадре и опять перекрасьте квадрат. В этот же кадр поверх квадрата можно ввести текст. Например, «ОПАСНО!». Текст может располагаться в этом же слое, а так же занимать отдельный слой.
4-й кадр - Hit создайте без изменений, скопировав в него изображение из 3-го кадра.
Перейдите в режим редактирования сцены и перетащите из окна библиотеки фильма только что созданную кнопку. По команде Control/Test Movie проверьте, как ваша кнопка реагирует на перемещение мыши.
Как и любой другой символ, символ кнопки можно отредактировать, дважды щелкнув по его имени в окне библиотеки.
КНОПКИ РАЗНОЙ ФОРМЫ И РАЗМЕРА
При создании кнопки в кадрах Up, Over и Down совсем не обязательно рисовать одно и то же изображение. Создадим более экзотическую кнопку:
1-й кадр - квадрат; 2-й кадр - большой круг, диаметр которого превосходит ширину
квадрата; 3-й кадр - совсем маленький круг в центре большого.
4-й кадр предназначен для того, чтобы ограничить область нажатия кнопки. В этом кадре надо нарисовать фигуру, щелчок внутри которой система будет рассматривать как щелчок по кнопке.
В предыдущем примере 4-й кадр Hit содержал точно такой же квадрат, что и в любом другом кадре (граница области нажатия кнопки совпадает с ее изображением). Очень привлекательна ситуация, когда изображение в 4-м кадре располагается в стороне от изображений кнопки в остальных кадрах. Нарисуем, например, в 4-м кадре прямоугольник, вытянутый по вертикали и расположенный справа от всех остальных изображений кнопки. Пример такой кнопки можно посмотреть в файле «секрет.swf». Если подводить курсор к кнопке слева, снизу или сверху, не будет никакой реакции. При приближении курсора к кнопке справа в какой-то момент вид кнопки изменяется. На рис. 16.2 вы видите схематичное изображение всех состояний кнопки данного примера.
Нестандартное использование 4-го кадра может стать неожиданным элементом в игре.
Использование в кнопках изображений
Запустите файл «футбол.swf». При наведении курсора на изображение футболиста рядом с ним появляется противник, в момент щелчка на экране высвечивается вратарь, поймавший мяч.
Анимация данного примера заключается в использовании в разных кадрах кнопки разных изображений. Вставка каждого изображения в кадр производится стандартным образом по команде File/Import (импортировать). Картинки для реализации примера находятся в файлах
«мяч_1.gif», «мяч_2.gif», «мяч_3.gif».