ЭЛЕКТРОННАЯ ШКОЛА MACROMEDIA FLASH MX
III курс: Основы программирования в Macromedia Flash MX
Модуль VI: Подчиняемся курсору мыши пользователя, Игра «Весёлая кухня»
Язык ActionScript

В этой лекции речь пойдёт о создании небольшой flash-игрушки — «Весёлая кухня», которая позволяет сконструировать из овощей и фруктов виртуального поварёнка.

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

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

Импортируйте графику (фрагмент поварёнка) во Flash и преобразуйте растровую графику в векторную графику, используя команду Modify > Trace Bitmap. Обратите внимание на качество получаемых фрагментов, и не забудьте, что чем выше будет качество, тем больше будет размер файла! В этом примере я явно «согрешила» — отдала предпочтение качеству:

       Color Threshold — 10
       Minimum Area — 8
       Curve Fit — Normal
       Corner Threshold — Normal

После выполнения преобразования вы должны всё скрупулезно обработать — удалить белый фон, может быть, вычистить что-то ластиком, а затем, используя инструмент стрелка и команду Insert > Convert to Symbol превратить изображение в символ типа Graphic, дайте символу имя, например, g1. После выполнения этой операции вы можете удалить символ со сцены (он уже никуда от вас ни денется — он будет хранится в библиотеке вашего ролика!). Кстати библиотеку ролика следует содержать в идеальном порядке, поэтому не забудьте удалить из неё растровые изображения фрагментов, которые вы уже преобразовали в векторную графику. На размере swf-файла «беспорядок» в вашей библиотеке никак не отразится, а вот fla-файл будет «толстеть» на глазах.

Эту операцию следует осуществить для каждого фрагмента. В итоге на вашей сцене — пусто! А в библиотеке ролика идеальный порядок — в ней представлены все необходимые для нас графические символы — фрагменты, из которых мы будем собирать нашего очаровательного поварёнка.

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

Для этого создадим новый символ Insert > New Symbol типа Button с именем b1 и в первый кадр кнопки вставим из библиотеки какой-нибудь графический символ, например, дыню — g1. Сделайте все остальные кадры кнопки ключевыми.

Вернитесь на сцену и создайте ещё один новый символ Insert > New Symbol типа Movie Clip, с именем c1, в него поместите кнопку b1 и пропишите этой кнопке скрипт:

on (press) {
    startDrag("");
}
on (release) {
    stopDrag();
}

Этот несложный код означает для нас с вами следующее: когда пользователь нажимает на левую кнопку мыши, графический символ g1, спрятанный в кнопке b1, которая в свою очередь спрятана в клипе c1, прилипает к курсору и начинает двигаться вместе с ним, когда же пользователь отпускает кнопку, графический символ остаётся в конечной точке.

Теперь вытащите на сцену из библиотеки ролика клип c1 и протестируйте ролик — убедитесь в том, что вы можете управлять этим объектом, легко перетаскивать его по сцене.

Если хорошо уяснить для себя процесс создания вложенных друг в друга объектов, то никаких трудностей в работе у вас не возникнет. Тем более не такой уж и сложный этот процесс, помните русскую сказку о Кощее Бессмертном? На самом деле Кощей был смертным, и смерть его была заключена в игле, игла в яйце, яйцо в утке, утка в зайце, заяц в ларце, ларец в цепях на дубе… Вот тут можно запутаться… У нас с вами всё гораздо проще!

Итак, графический символ в кнопке, кнопка в клипе, кнопке прописан скрипт, на сцену вынесли клип!

В нашем случае для каждого фрагмента поварёнка был создан символ типа Movie Clip, эти клипы были вынесены на сцену ролика. Всё, поварёнок готов! Теперь нам осталось только привольно разместить составные части на сцене, может быть соорудить на этой сцене какие-то декорации, протестировать ролик и предложить собрать поварёнка пользователю.

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

Декорации

Создайте на сцене дополнительный слой — decor и разместите на нём текст (Static text) и анимированную кнопку с образцом («портрет» поварёнка).

Анимированная кнопка

При создании кнопки используется очень простой эффект: в нетронутом состоянии фотография сливается с фоном, затем при наведении на её область курсора мыши она начинает проявляться. Что-то подобное мы с вами уже пробовали сделать в V модуле II курса.

Создайте новый символ Insert > New Symbol типа Button. В первый кадр кнопки импортируйте «фотографию поварёнка» File > Import… Центрируйте фотографию относительно сцены, используя палитру Align. Сделайте все остальные кадры кнопки ключевыми. Затем в кадры Up и Over разместите Movie Clip №1 и Movie Clip №2 соответственно. При наведении курсора мыши на фотографию будет проигрываться Movie Clip №1, при отведении — Movie Clip №2.

Movie Clip №1. В клипе размещается прямоугольник, размеры которого соответствуют размерам фотографии (следите за палитрой Info). Цвет прямоугольника соответствует цвету фона. Прямоугольник должен менять свою прозрачность от 3% до 100%. Для этого создают анимацию Tweening Shape (между ключевыми фреймами 1 и 15). 15 фрейму пропишите скрипт:

stop ();

Movie Clip №2. Этот клип является перевёртышем для Movie Clip №1. Прямоугольник, размещаемый в нём должен менять свою прозрачность от 100% до 3%.

В ролике, представленном в этой лекции фрагменты можно поворачивать!

Загрузить игру «Весёлая кухня» в новом окне

Домашнее задание: Основы программирования в Macromedia Flash MX

В науке нет широкой столбовой дороги, и только тот может достигнуть её сияющих вершин, кто, не страшась усталости, карабкается по её каменистым тропам.
Карл Маркс

Продублируйте ролик, представленные в этой лекции.

В архиве вы найдёте всё необходимое для работы: овощи и фрукты для виртуального поварёнка (файлы в формате jpg).

Впрочем, если у вас возникла своя оригинальная идея, я буду только рада. Может быть, вам захочется вылепить виртуального снеговика, собрать по частям велосипед или робота, быть может вас вдохновит конструктор «Lego»…

Выполненное задание представьте в виде файла в формате fla (если размер файла превысит 150 Кб, пожалуйста, упакуйте файл в архив) и вышлите учителю.

Загрузить архив (97 Kб)

Предыдущий модуль:
Модуль V: Организация циклов, Решение математических задач
Следующий модуль:
Модуль VII: Создание собственного курсора мыши, Игра «Старая лампа»

_statistics

---