Создание Flash игр -практические уроки

Чему научит вас эта книга

Чему научит вас эта книга.

Теперь, когда мы определили, что вы относитесь к одной из вышеперечисленных групп специалистов, возникает вопрос: чему вас может научить эта книга?

Что вы должны знать

Что вы должны знать.

Что вы должны знать Данная книга представляет собой не учебник по Flash, а практическое руководство по изучению Flash MX ActionScript. Подразумевается, что вы уже немного знакомы с рабочей средой Flash и имеете какой-то опыт работы с программой.
При этом вы, также как и я, не обязаны быть профессиональным художником-графиком. У многих людей Flash ассоциируется только со способностями к рисованию. Это действительно было необходимо в более ранних версиях Flash, в которых графика была единственным инструментом, однако теперь Flash является еще и средой программирования. Таким образом, данная книга будет одинаково интересна и профессиональным иллюстраторам, и программистам.

Но для начала вам необходимо: • знать основы Flash и уметь их использовать;
• быть знакомым с содержанием обучающих программ Flash MX;
• уметь работать с главной временной шкалой, добавлять кадры и маркировать их;
• уметь создавать клипы, кнопки и графические изображения.
Они не должны быть первоклассными, вам просто нужно знать процедуру их создания во Flash. С другой стороны, некоторые смогут использовать эту книгу, даже если они никогда прежде не работали во Flash. Если вы - способный и усидчивый ученик, готовый с головой уйти в новый предмет до его полного изучения, данная книга позволит вам, быстро освоив основные приемы Flash, перейти к профессиональному программированию в ActionScript.

Для кого предназначена эта книга

Для кого предназначена эта книга.

Это практическое руководство по изучению ActionScript, а не книга для тупиц или идиотов. Следовательно, я не веду читателя за руку по всем этапам проекта, описываемого в главе. Если какой-то прием объяснялся ранее, я не буду повторяться. Вместо этого я расскажу о более сложных вещах и других приемах, таким образом, вы всегда будете изучать что-нибудь новое. Книга требует обдуманного изучения. Если вы не поняли что-то с первого раза, попробуйте перечитать объяснения еше раз, посмотрите пример на Web-сайте и поэкспериментируйте с данным приемом в Flash, прежде чем двигаться дальше. Это поможет вам более глубоко понять принципы функционирования ActionScript и его применения в других проектах. Данная книга предназначена для различных специалистов, Если на ней остановился ваш взгляд в традиционном книжном или Internet-магазине или вы взяли ее у друга, тогда, возможно, вы принадлежите к одной из следующих групп.
Аниматоры
Будучи аниматором, вы уже используете Fash для создания линейной анимации. Вероятно, вы также знаете, как создать пару-другую кнопок. Эта книга перенесет вас в чудесный мир программирования на ActionScript. Вы научитесь помешать созданных вами анимированных героев и окружающую их обстановку в игрушки и игры. Иллюстраторы
Если вы художник-оформитель, не исключено, что вы работали во Flash или в другой векторной графической программе. Вы можете научиться рисовать во Flash MX, используя обучающие программы, предлагаемые самим редактором, а затем при помощи этой книги сделать так, чтобы ваши рисунки взаимодействовали с пользователем в игрушках и играх. Программисты
Возможно, вы программист, имеющий опыт работы с другими языками: Java, C++ или Lingo. Книга научит вас применять эти знания во Flash. Достаточно полный обзор основ ActionScript вы найдете в главах 1-3; если же вас интересуют исходные программы, переходите сразу к главе 5. Программисты, работающие во Flash 3 и Flash 4
Эта книга также подойдет программистам, работающим во Flash 3 и Flash 4 и желающим приобрести руководство, которое поможет им овладеть Flash MX. Между Flash MX или Flash 5 и более ранними версиями программы существует довольно много различий, что особенно заметно в командах и устройстве рабочего пространства. Для того чтобы действительно научиться работать во Flash MX, придется забыть многие приемы, используемые в предыдущих версиях, и начать учиться с нуля. Владельцы домашних Web-страниц
Может быть, вы и не специалист в области компьютерных знаний, но у вас есть своя домашняя страница и немного свободного времени для пополнения багажа ваших знаний. Flash MX может служить относительно недорогим инструментом для улучшения вашего сайта. Возьмите любую понравившуюся вам игру из книги, немного измените графику и напишите свою собственную игру. Не ожидайте чудес, не уделив достаточно времени изучению основ Hash и материала глав с 1 по 4. Тем не менее способный ученик добьется успеха довольно быстро. Профессиональные разработчики Web-сайтов
Как профессиональный разработчик Web-сайтов вы, без сомнения, обладаете соответствующими практическими навыками и должны иметь не только общее представление о HTML, таблицах стилей, JavaScript, Perl, программах Photoshop, Fireworks, Dreamwaver и т.п. Пакет Flash довольно быстро приобретает статус программы, которую должен знать любой разработчик Web-сайтов. Однако одного знания основ не достаточно. В конечном итоге с их помощью вам придется что-то создавать. Другие книги учат основам и затем предоставляют читателю возможность доходить своим умом до того, как складывать полученные элементы вместе для создания полноценных программ, а эта книга показывает ему, как составлять такие программы. Данная книга научит вас разрабатывать свои собственные программы с нуля или быстро создавать свою версию уже имеющейся игры. Студенты
В настоящее время Flash преподается во многих колледжах и университетах. С увеличением интереса к Flash эта тенденция будет постоянно усиливаться. Книга может использоваться студентами в качестве практического пособия по изучению ActionScript. Если на занятиях вас обучают только основам Flash, используйте эту книгу, чтобы быть впереди всех. Но если вы уже проходите довольно сложные веши, книга будет хорошим практическим пособием.

Использование готовых игр

Использование готовых игр

Конечно, вы можете купить эту книгу, взять из нее исходные программы и создавать свои собственные игры. Вы можете, не меняя программы, опубликовать игры на вашем Web-сайте, однако вы наверняка захотите вначале придать им ваш собственный графический стиль.
Имейте в виду, однако, что книга и содержащиеся в ней исходные программы предназначены для тех, кто заинтересован в изучении ActionScript. Не думайте, что вы сможете сразу же перейти к главе 16 и начать составлять программы. Возможно, у некоторых это и получится, однако большинство столкнется с трудностями, не изучив информацию глав 1-15.
Глава 4 научит вас некоторым тонкостям переделывания уже готовых игр в ваши собственные. В каждой главе также содержатся предложения о том, что можно изменить в играх, чтобы они стали вашими собственными.

Изучение ActionScript

Изучение ActionScript

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

Об этой книге

Об этой книге.

Хотя программа Flash в качестве среды программирования только-только «достигла совершеннолетия», она уже давно известна как отличное средство для создания развлечений. Flash используется для самых разных целей, начиная с разработки дизайна Web-сайта и заканчивая созданием больших анимаций. ActionScript - это еше один аспект Flash, также связанный с развлечениями. Основная задача данной книги - обучить созданию игр при помощи Flash.
В главе 1 "Инструменты Flash, используемые для создания игр" мы еше раз рассмотрим основы Flash, обращая особое внимание на то, как различные инструменты этой программы используются для создания интерактивных приложений. Глава 2 "Введение в ActionScript" пригодится имеющим большой опыт работы с Flash, но мало занимающимся программированием. Она также будет интересна тем, кто знает другие языки программирования, однако никогда не имел дела с ActionScript.
Глава 3 "Элементы ActionScript для создания игр" рассматривает различные элементы и приемы ActionScript и демонстрирует, как с их помощью создавать игры и анимации. Данная глава содержит основные сведения, необходимые для дальнейшей работы с книгой. Из главы 4 "Процесс создания игры" вы узнаете о планировании и программировании игр.
Оставшаяся часть книги, кроме последней главы, содержит примеры программ, в том числе их исходные тексты. Глава 5 "Создание визуальных эффектов", глава 6 "Игрушки и безделушки", глава 7 "Игрушки-конструкторы" описывают игрушки, которые предназначены для развлечения, но не обязательно являются игрой как таковой. В главах 8 "Игры типа «Найди и нажми»", 9 "Игры типа «Поймай или пропусти»", 10 "Игры типа «Прицелься и выстрели»", 11 "Игры с мячом и битой", 12 "Викторины и загадки со словами", 13 "Мозаика", 14 "Головоломки", 15 "Казино и карточные игры" и 16 "Аркады" описываются собственно игры.
Каждый раздел глав 5-16 начинается с описания того, как была создана данная игра. Затем вы знакомитесь с моим подходом к ее построению. Далее дается обзор элементов, составляющих игру. В конце приводится текст программы игры с подробным разбором каждой ее части. Каждая глава заканчивается советами по усовершенствованию игры.
В последней, 17-й, главе "Сложные приемы" вы изучите некоторые специальные приемы, такие как создание списка игроков, набравших наибольшее количество очков, и окна предварительной загрузки. И наконец, не пропустите содержательный список Web-ресурсов в главе "Ресурсы Internet для пользователей Flash".
Хотелось бы обратить ваше внимание на' то, что в книге содержится множество программ на ActionScript! В ней их больше, чем в любой другой книге, посвященной Flash. Здесь около 37 игр с исходными кодами.

Создание игр во Flash

Создание игр во Flash

Каждая программа, содержащаяся в данной книге, может считаться одной из разновидностей игр или частью игры. Даже если вы уже знакомы с ActionScript, книга научит использовать ваши знания для создания игр. В главе 4 я подробно расскажу о том, как создаются игры. Оставшаяся часть книги заполнена примерами.

Условные обозначения

Условные обозначения


Для лучшего понимания материала в книге принято несколько условных обозначений. Любое слово, выделенное маленьким курсивом, является командой, функцией или другим элементом синтаксиса ActionScript. Все эти элементы можно найти в документации по Flash.
Примерами являются:
gotoAndPlay (), stop(), _х.

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

Webсайт

Web-сайт

Подобная книга не принесла бы много пользы, если бы вам пришлось набирать листинг каждой исходной программы вручную. Структура роликов Flash, множество различных элементов которых - клипы, кнопки и графические образы - необходимо поместить в строго определенное место, еше более усложняет задачу.
Чтобы лучше разобраться в программах, изучая очередной проект, не забудьте открыть пример ролика и посмотреть программу в действии. Вы можете использовать исходный файл для внесения изменений или тестирования новой программы.
Возможно, набор вручную исходных программ и попытка воспроизведения примеров и является хорошей практикой, однако даже самому аккуратному разработчику будет непросто полностью воссоздать сложные программы со страниц данной книги.

Создание Flash игр -практические уроки

Библиотека

Библиотека

Организация библиотеки осушесгаляется посредством создания каталогов внутри палитры Library. Каталоги выполняют такие же функции, как и каталоги (директории) вашей операционной системы. Вы можете создавать каталоги и хранить в них различные элементы библиотеки. Например, если у вас есть 52 графических изображения для представления колоды из 52 карт, вы можете поместить их в папку под названием "cards" ("карты"). Это значит, что все 52 карты будут отображаться как один элемент библиотеки (если содержащая их папка закрыта). Развернув данный элемент, вы получите доступ к имеющимся в нем графическим изображениям.
Для того чтобы создать каталог, откройте палитру Library и из всплывающего меню в правом верхнем углу выберите команду New Folder (Новая папка). Доступ к содержимому папки осуществляется очень просто (нажатием на ее изображение мышью). При этом вам не придется ссылаться на имя каталога ни при помощи инструментов анимации, ни в программе ActionScript.
Палитра Library включает еще несколько инструментов для организации библиотеки. Например, вы можете упорядочить ее содержимое по любому параметру, указанному в заголовках столбцов.

Данное устройство временной шкалы

Рисунок 1.19 Данное устройство временной шкалы включает один слой только для меток, еще один для ActionScript и остальные для графических объектов



Двойным щелчком мыши по небольшой пиктограмме слева от каждого слоя можно вызвать диалоговое окно Layer Properties (Свойства слоя) - см. Рисунок 1.20. Слою можно задать, например, свойство Outline (Контур), тогда все изображения данного слоя будут отображаться в виде контуров. Данный режим действует только в процессе работы в среде Flash; при просмотре swf-файла изображение примет обычный вид.

Диалоговое окно Bitmap Properties

Рисунок 1.14 Диалоговое окно Bitmap Properties позволяет задавать степень сжатия растра, включить и отменить сглаживание и повторить импорт при помоши кнопки Update (Обновить)



Для того чтобы преобразовать растровое изображение в векторное, выделите его на рабочем поле и выберите команду Modify -> Trace Bitmap (Изменить -> Трассировать растр}. При этом на экране появится диалоговое окно, показанное на Рисунок 1.15.

Диалоговое окно Publish Settings

Рисунок 1.22 Диалоговое окно Publish Settings дает возможность экспортировать ролик Flash в одном из нескольких форматов



Вкладка Flash позволяет задать несколько настроек конечного swf-файла (Рисунок 1.23). При выборе опции Generate Size Report (Создать отчет о размере) программа создает краткое описание содержимого swf-файла и помешает его в окно Flash Output (Window => Output). Также создается отдельный файл отчета FileName Report.txt (где FiteName - имя вашего, fla-файла), который помешается в ту же директорию, что и fla-файл. Это поможет вам найти и сократить элементы, занимающие много места.

Диалоговое окно Sound Properties

Рисунок 1.16 Диалоговое окно Sound Properties позволяет задавать степень сжатия звукового файла при включении его в конечный Flash-ролик


Обычно звуковые элементы перетаскивают на временную шкалу и помешают в ключевой кадр. Когда начинает воспроизводиться ключевой кадр, запускается воспроизведение соответствующего звукового файла. Параметры звукового файла, прикрепленного к кадру, можно настроить, вызвав соответствующую ему панель Sound (Звук). Настройка степени сжатия звукового файла в диалоговом окне Sound Properties необходима в случае, если для вас важно качество звука в конечном ролике. Например, использование компрессии МРЗ со скоростью воспроизведения 16 Кб/с даст звук среднего качества, подходящий для специальных эффектов и т. п. Однако, если вы используете качественную музыку, вам понадобится скорость 32 Кб/с или даже 64 Кб/с. Советуем поэкспериментировать с различными настройками и подобрать их таким образом, чтобы получить звук хорошего качества и одновременно занимающий как можно меньше места. При сохранении ролика вы можете также установить настройки по умолчанию, которые будут применяться для всех звуков ролика.
Показанная на Рисунок 1.17 панель Properties позволяет установить способ запуска звукового файла, его повторение и даже применить эффект его постепенного исчезновения. Так как в нашу задачу не входит использование этих свойств звука, не будем рассказывать о них подробно.

Диалоговое окно Symbol Properties

Рисунок 1.9 Диалоговое окно Symbol Properties появляется на экране при выборе команды Insert -> Convert to Symbol. Это же окно появится, если вы захотите изменить свойства уже существующего символа.

Команда Convert to Symbol позволяет создавать графические объекты, клипы и кнопки непосредственно на рабочем поле и затем добавлять их в библиотеку. Вы также можете использовать эту команду для создания символов внутри символов. Например, вы можете создать объект, похожий на кнопку, при помощи команды Convert to Symbol превратить его в кнопку, а затем, повторно используя данную команду, поместить кнопку в клип. Второй важной функцией меню Insert является набор команд, позволяющих добавлять кадры в главную временную шкалу. Чтобы добавить новый кадр, используйте команду Insert -> Frame (Вставить -> Кадр). Для добавления нового ключевого кадра во временную шкалу предназначены команды Insert -> Keyframe (Вставить -> Ключевой кадр) и Insert -> Blank Keyframe (Вставить -> Пустой ключевой кадр). В первом случае будет создана копия текущего ключевого кадра, во втором - новый ключевой кадр, не содержащий никаких объектов на рабочем поле. При помощи команды Insert -> Remove Frames (Вставить -> Удалить кадры) можно удалить выбранные в слое кадры, а используя Insert -> Clear Keyframe (Вставить -> Очистить ключевой кадр), удалить ключевой кадр, не удаляя простых кадров слоя. Команды для работы с кадрами могут немного сбить с толку тех, кто никогда до этого не создавал анимации во Flash. Лучший способ научиться работать с этими командами - попробовать их применить. Создайте ролик и потренируйтесь добавлять и удалять кадры и ключевые кадры. Тогда вы начнете понимать, как работают эти команды.
Разница между кадром и ключевым кадром состоит в следующем: ключевой кадр - это точка временной шкалы, определяющая точное положение всех объектов на рабочем поле данного слоя. Они не будут менять своего положения до следующего ключевого кадра. Однако аниматоры могут выбрать, например, анимацию движения между ключевыми кадрами, при этом объекты рабочего поля будут постепенно передвигаться из позиции, определяемой первым ключевым кадром, к позиции, определяемой следующим ключевым кадром. Более подробно о ключевых кадрах вы узнаете из урока анимаиии, поставляемого с программой Flash MX.

Дла доступа В Windows Properties

Дла доступа... В Windows
Properties Panel
Info Panel
Library
Reference Panel
Actions Panel Ctrl+F3
Ctrl+I
Ctrl+L
Shift+F1
F9

Окно справки

В окне Reference (Справка) содержится словарь ActionScript программы Flash. Даже самый опытный программист ActionScript не будет знать всех свойств, применений и отличительных особенностей синтаксической структуры Flash. Это меню позволит вам быстро получить необходимую информацию об определенной команде или функции.

Для того чтобы вызвать диалоговое

Рисунок 1.7 Для того чтобы вызвать диалоговое окно Preferences, используйте основное меню, но его расположение зависит от вашей операционной системы

Главное окно Flash

Главное окно Flash

Основой интерфейса Flash является главное окно и его важнейший элемент- рабочее поле. На рис 1.1 показано рабочее поле, которое содержит изображение большого дерева и лисы, держащей корзину.

Главное окно основной элемент интерфейса Flash

Рисунок 1.1 Главное окно - основной элемент интерфейса Flash.

Для программиста на ActionScript одни элементы главного окна более важны, чем другие. В верхней части расположена временная шкала, в которой некоторые кадры помечены номерами 1, 5, 10 и 15. Сбоку временной шкалы находится панель управления слоями. В данном примере показаны два слоя: «Background» (Фон) и «Fox» (Лиса). Вы наверняка заметили, что кадры на временной шкале намного шире, чем обычно. Это связано с тем, что поле представления кадров было расширено при помощи кнопки Frame view (Отображение кадра), показанной на Рисунок 1.1. Существует еше несколько опций по управлению представлением кадров, например можно регулировать высоту каждого слоя (находится в свойствах слоя). Поэкспериментируйте с ними самостоятельно. Область рабочего поля главного окна может содержать любой элемент вашего ролика: графический образ, кнопку или клип. Изображение, показанное на рабочем поле главного окна, можно увеличить или сжать. Для этих целей предназначено всплывающее меню Scale (Масштаб), расположенное в левом нижнем углу главного окна, но для изменения масштаба намного удобнее пользоваться «горячими» клавишами. Нажатие клавиш Cntrl+2(PC) или Command+2(Mac) масштабирует рабочее поле так, чтобы оно вплотную занимало все свободное место в главном окне. Использование сочетания клавиш Cntr+3 или, соответственно, Command+З масштабирует рабочее поле так, что в главном окне максимально распахивается область, содержащая все изображения, в том числе те, которые находятся на серой области вне пределов рабочего поля. Сочетание Cntrl+1 (Command+1) возвращает рабочему полю масштаб 100%. И наконец, использование командных клавиш в сочетании с + и - позволяет изменять текущий масштаб в два раза. Последнее, о чем хотелось бы здесь сказать, - кнопки Show/Hide (Показать/Скрыть) и Lock/Unlock (Заблокировать/Разблокировать). Эти функции чрезвычайно полезны тем, что позволяют отобразить отдельные слои или определенный набор слоев. Блокировка слоев позволяет без труда выбрать нужный вам объект, не внеся при этом случайных изменений в другой слой.

Импорт мультимедийных элементов во Flash

Импорт мультимедийных элементов во Flash

Хотя основой Flash является векторная графика, программа может использовать и другие элементы, например растровые изображения и звуковые файлы. Flash не позволяет редактировать эти элементы, они только отображаются. Создавать растровые изображения и звуки следует в других программах, например Adobe Photoshop и Sound Forge. Давайте рассмотрим эти два типа элементов и способы их- использования с помошью ActionScript.

Интерфейс Flash

Интерфейс Flash.

Прежде чем создавать сложные программы на ActionScript, вам необходимо хорошо изучить интерфейс Flash, который включает множество окон, панелей и меню.

Это окно содержит три панели

Рисунок 1.2 Это окно содержит три панели

Вы можете изменить состав окна панелей, а также создать новое окно. Это осуществляется перетаскиванием панелей за левую, помеченную характерной "дырчатой" текстурой, часть титульного поля панели. Для того чтобы научиться перемещать панели, требуется немного практики. У вас всегда есть возможность вернуть исходные настройки, выбрав команду Window -> Panel Sets -> Default Layout (Окно -> Наборы панелей -> Расположение по умолчанию). Необязательно перемешать панели между окнами панелей только потому, что у вас имеется такая возможность. Я нахожу расположение по умолчанию самым лучшим вариантом, которого и придерживаюсь. Это также удобно, если вам придется работать на другом компьютере, в этом случае вам не надо будет привыкать к какому-либо нестандартному расположению. Вы можете сохранить собственную конфигурацию панелей с помощью команды Window -> Save Panel Layout. Сохраненные конфигурации доступны с помощью команды Window -> Panel Sets.
Панель Info, которую можно выбрать командой Window -> Info, необходима для точного размещения объектов на рабочем поле. Выбрав объект, вы можете задать значения его координат (X и Y), а также его ширину и высоту (W и Н). Панель Transform (Рисунок 1.3) можно выбрать командой Window -> Transform. Эта панель позволяет изменять масштаб выделенного объекта и поворачивать его.

в ролике необходима профаммисту на

Кадры

Маркировка кадров в ролике необходима профаммисту на ActionScript для того, чтобы задать в программе нелинейный переход ролика с одного кадра на другой. Присвоить имена кадрам можно в панели Properties.
В ActionScript имеется возможность ссылаться на номера кадров, однако мы не советуем этого делать. Почему? Предположим, вы написали программу, задающую переход от кадра 7 на кадр 13, а затем на кадр 8. После этого решили добавить кадр перед кадром 1. Кадры, которые раньше имели номера 7, 13 и 8, получат номера 8, 14 и 9, и вам придется менять программу в трех местах.
Присвоив кадрам имена, вы можете ссылаться на эти имена в программе. При этом вне зависимости от количества добавленных и удаленных кадров вы всегда будете уверены, что ключевой кадр сохранил свое имя.

Меню Control

Меню Control

Меню Control (Управление) включает постоянно используемую команду Test Movie (Пробное воспроизведение ролика). Данная команда, выполняемая также нажатием клавиш быстрого доступа Command+Return (Macintosh) или Ctri+Enter (Windows), преобразует ваш текущий ролик в конечный swf-файл и затем запускает его в окне предварительного просмотра. Ролик воспроизводится аналогично тому, как он бы воспроизводился в проигрывателе Flash или в Web-браузере пользователя. Данная команда отличается от команды Play (Воспроизведение) из меню Control, которая не использует никаких сценариев ActionScript, находящихся в ролике. Команда Play совершенно бесполезна для программиста, в то время как команда Test Movie бесценна.

Меню Edit

Меню Edit

Меню Edit (Правка) включает обычные команды: Сору (Копировать), Cut (Вырезать) и Paste (Вставить). Команда Undo (Отменить) особенно полезна, так как с ее помощью вы можете отменить 100 последних действий, что является довольно значительной цифрой. Вы можете задать количество отменяемых действий, выбрав команду Edit -> Preferences (Правка -> Настройка). При выборе команды Preferences на экране появится диалоговое окно, показанное на Рисунок 1.7. Здесь вы можете не только указать число отменяемых действий, но и задать целый ряд настроек, упорядоченных в три отдельные вкладки. Что касается меня, я стараюсь придерживаться настроек по умолчанию, однако никогда не помешает знать, какие опции вам предлагаются. Обычно я меняю предлагаемый по умолчанию режим Normal (Обычный) на режим Expert (Эксперт), что позволяет мне набирать команды ActionScript непосредственно в окне редактирования сценария.

Меню File

Меню File

Меню File (Файл) включает стандартный набор команд, знакомый пользователям Macintosh и Windows. Наряду с командами Open (Открыть), Save (Сохранить) и Save As (Сохранить как) здесь присутствует также команда Import (Импорт), позволяющая импортировать в программу растровые изображения, векторную графику и звуковые файлы. Наиболее важной в меню File является простая команда Save, которой соответствует сочетание клавиш Command+S (Macintosh) и Ctrl+S (Windows). Советуем вам почаще ее использовать. Если после многочасовой работы без сохранения программа или компьютер дадут сбой, вы пожалеете о том, что не нажимали данное сочетание клавиш каждые пять минут. К сожалению, Flash время от времени имеет обыкновение давать сбой, что приводит к потере всей вашей работы со времени последнего сохранения. Компания Macromedia регулярно поставляет новые, исправленные и усовершенствованные версии flash. Обратной стороной такого стремительного развития программы является ее нестабильность. Тем не менее, если вы не будете забывать почаще сохранять вашу работу, возникающие сбои не испортят вам настроения.
В меню File также находятся команды Publish (Публикация) и Publish Settings (Параметры публикации). Подробнее об этих командах вы узнаете в конце данной главы.

Меню Insert

Меню Insert

Меню Insert (Вставка) содержит две функции, полезные для программиста на ActionScript. Первая из них - команда Convert to Symbol (Преобразовать в символ), которая преобразует выделенные вами элементы в графический объект, клип или кнопку. Вновь созданный эталон включается в библиотеку, а также остается на рабочем поле, на месте исходных элементов. При вызове данной команды на экране появляется диалоговое окно Symbol Properties (Свойства символа), в котором вы должны задать тип символа и назначить ему имя (Рисунок 1.9).

Меню Modify

Меню Modify

Меню Modify предоставит вам еще несколько способов быстрого доступа к панелям. Команда Modify -> Document открывает окно свойств документа (рис 1.10). Диалоговое окно Document Properties (Свойства документа) позволяет изменить размеры ролика, количество кадров в секунду и цвет фона.

Меню Text

Меню Text

Включенные сюда команды обеспечивают быстрый доступ к опциям панелей Text (Текст). Более подробно о работе с текстом мы расскажем в разделе "Создание текста" данной главы.

Меню Window

Меню Window

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

Нерабочая область

Нерабочая область

p Существует одна область интерфейса Flash, чрезвычайно полезная программисту на ActionScript, однако редко упоминаемая в книгах, подобных этой. Это область, которая находится за пределами рабочего поля. Взгляните на Рисунок 1.1 и обратите внимание на серую область вокруг рабочего поля, расположенного в центре окна. В эту область вы можете помещать элементы. При воспроизведении ролика в браузере пользователя или в программе Flash Player данная область не будет видна.
В нерабочей области можно, например, разместить небольшой клип с написанным для него кодом ActionScript. В отличие от кода в главной временной шкале, выполняющегося один раз, ActionScript-код клипа будет выполняться в каждом кадре. Вероятность того, что пользователь увидит нерабочую область, все же существует. Если изменение масштаба ролика выполняется во Flash Player, окне предварительного просмотра Flash или в браузере, ролик старается сохранить свои пропорции, и некоторые области, расположенные выше или ниже рабочего поля, могут быть видны. Этого не произойдет, если поместить ролик в Web-страницу, используя правильные тэги (об этом рассказывается ниже).
Таким образом, поместив небольшой клип за пределы рабочей области, где он не будет виден, вы можете создать код, выполняющий повторяв юшиеся действия, например анимацию или движение, контролируемое пользователем.

Окно Properies позволяет изменять

Рисунок 1.13 Панель Properties показывает параметры динамического текстового окна


В выпалаюшем меню имеется возможность выбрать расположение текста в одну строку (Single Line), в несколько строк (Multiline) и в несколько строк без возможности переноса (Multiline No Wrap). Кроме того, справа имеются три небольшие кнопки с опциями Selectable (Выделяемый), Render Text as HTML (Читать HTML-тэги) и Show Border Around (Показывать рамку вокруг текста). Опция HTML дает возможность использовать в тексте некоторые базовые тэги языка HTML, наподобие . Опция Border помешает текст в рамку и делает окно непрозрачным. Опция Selectable позволяет пользователю выделять блоки текста подобно тому, как это делается в текстовом редакторе.
Наиболее важной для программиста на ActionScript опцией данной панели является текстовое окно Var (Переменная), в которое вы можете ввести имя переменной. При воспроизведении ролика переменная и окно динамического текста будут связаны. При изменении значения одного из них соответственно будет меняться и значение второго. Это позволяет изменить переменную в программе и одновременно видеть эти изменения на экране.
В нижней части панели находится ряд кнопок, а также поле, где вы можете указать, начертания каких символов должны сохраняться в конечном. Flash-файле для дальнейшего использования в текстовом окне. Например, вы можете задать, чтобы вместо полного набора символов Hash сохранял вместе с роликом только цифры. С другой стороны, вы можете не сохранять вообше никаких наборов символов, тогда в текстовом окне будут использоваться только шрифты, установленные на компьютере пользователя. Flash - достаточно умная программа и никогда не включает в swf-файл более одной копии каждого набора символов. Поэтому, если вы создали две области динамического текста, использующие все символы шрифта Arial, этот шрифт сохраняется только один раз и будет совместно использоваться обеими областями.

Организация ролика

Организация ролика

Процесс организации ролика более важен для программиста на Action Script, чем для Flash-аниматоров. Символам в библиотеке должны быть присвоены содержательные имена. При необходимости их надо систематизировать по каталогам. Слои на главной временной шкале должны обеспечивать легкий доступ к различным элементам рабочего поля.

Палитра Library показывает из

Рисунок 1.5 Палитра Library показывает, из каких элементов состоит ваш ролик


Палитра Library показывает список различных элементов, составляющих ваш ролик. На первый взгляд элементы списка кажутся выбранными наугад. Например, графические образы, которые были нарисованы непосредственно на экране, не отображаются в палитре, даже если они были сгруппированы. Если же вы сохраните их как графический символ, они будут показаны. Логика здесь такая: библиотека хранит многократно используемые объекты. Любой символ, будь то клип, графический символ или кнопка, могут использоваться в одном или нескольких местах вашего ролика.Однако набор линий и заливок, нарисованных непосредственно на рабочем поле, может применяться только в кадре или наборе кадров на временной шкале. Включение эталона в библиотеку не означает, что он будет экспортирован вместе с роликом. Например, вы импортируете растровое изображение или звуковой файл, но не помешаете его на рабочее поле. Или же создаете клип и не используете его. В таком случае умная программа не включает этот объект в конечный, сжатый swf-файл, что способствует уменьшению размера файла и его быстрой загрузке. Что делать, если элемент библиотеки не выложен на рабочее поле, а ваша программа его использует? Flash не будет отслеживать это и не включит данный элемент в конечный файл ролика. Для того чтобы заставить Flash включить в конечный файл кажущийся ему ненужным элемент библиотеки, установите связь с этим элементом в диалоговом окне Symbol Linkage Properties (Свойства связи символа) - см. Рисунок 1.6. Диалоговое окно можно вызвать из всплывающего меню Options (Параметры), расположенного в правом верхнем углу палитры Library (Рисунок 1.5).

Панель Properties позволяет присваивать имена клипам

Рисунок 1.4 Панель Properties позволяет присваивать имена клипам


Панель Properties (Свойства) позволяет присваивать имена (метки) кадрам. Как ни странно, вы можете сделать это в любом слое. Например, вы можете присвоить имя первому кадру, выделив его в верхнем слое, затем присвоить имя второму кадру, выделив его в следующем слое. Неправда ли, сбивает с толку? Я советую помечать все кадры в одном слое (обычно так и делают, называя этот слой, например, "labels"). Наиболее важным окном после рабочего поля как для программиста на ActionScript, так и для художника-графика, несомненно, является палитра Library (Библиотека). Панель на Рисунок 1.5 содержит растровое изображение, кнопку, папку, графический символ и клип.

Панель Properties служит для настройки

Рисунок 1.17 Панель Properties служит для настройки звуковых файлов, находящихся на временной шкале



Вместо этого рассмотрим, как с помощью команд ActionScript запустить звуковой файл, а также настроить время и способ его воспроизведения.
В случае, если на временной шкале звук отсутствует, Flash не включит его в конечный файл, и попытка ActionScript запустить его не удастся.
Чтобы обеспечить включение звука в конечный файл, необходимо установить свойства связи (см. Рисунок 1.6). Для ссылок на звуковой файл в ActionScript следует использовать имя, назначенное данному файлу в диалоговом окне Linkage Properties.

Панель Scene позволяет создавать

Рисунок 1.21 Панель Scene позволяет создавать и по-разному организовывать сцены вашего ролика

Панель Transform позволяет изменять

Рисунок 1.3 Панель Transform позволяет изменять масштаб выделенного объекта и поворачивать его


Еще одна панель, которую постоянно используют программисты на ActionScript, - Properties (Свойства). Эта панель (Рисунок 1.4) отображает информацию о выбранном в данный момент объекте: графическом символе, кнопке или клипе. С помощью этой панели вы можете менять различные свойства выбранных объектов. Например, ставить метки выделенным кадрам и присваивать имена клипам. Для того чтобы можно было программно обращаться к клипам, им необходимо присвоить имена.

Панели

Панели

Хотя главное окно программы Flash и является основным элементом, оно содержит очень мало подробной информации о вашем ролике и его частях. Детали отображаются в небольших окнах панелей управления. При запуске они появляются в правой и нижней частях главного окна, однако, затем их можно перемешать куда угодно.
Эти панели могут быть приведены к любому виду. Панели находятся каждая в своем окне, но можно отобразить сразу несколько из них в одном окне в виде закладок. Например, на Рисунок 1.2 показано окно, включающее панели Color Mixer (Миксер цветов), Color Swatches (Образцы цвета) и Components (Компоненты). Только панель Color Swatches доступна к использованию.

Подготовка ролика к публикации

Подготовка ролика к публикации

Независимо от того, является ли ваш ролик простой анимацией или сложным приложением, после окончания работы над ним его необходимо экспортировать в swf-файл. Это можно сделать при помощи команды File Publish (Файл -> Опубликовать).
Перед этим, однако, надо проверить определенные элементы ролика и, воспользовавшись командой File -> Publish Settings (Файл -> Настройки публикации), настроить его соответствующим образом.

Пример кнопки Исходный файл Samplebuttons

Пример кнопки
Исходный файл: Samplebuttons.fla

Давайте рассмотрим пример кнопки. На Рисунок 1.11 показана кнопка прямоугольной формы с надписью. Она была нарисована непосредственно на рабочем поле при помощи инструмента Rectangle (Прямоугольник) и затем преобразована в кнопку при помоши команды Insert -> Convert to Symbol. Ролик с кнопкой находится на Web-сайте в файле Samplebuttons.fla в папке данной главы.
Процесс создания данной кнопки начался с выбора инструмента Rectangle. Два раза щелкнув по инструменту, вы получаете возможность задать значение радиуса для скругленного угла прямоугольника. В нашем примере был использовано значение 2. Для линий был задан черный цвет, для заливки - голубой.
После того как прямоугольник был нарисован, я выбрал инструмент Text (Текст) и напечатал 'PRESS ME!' (НАЖМИ МЕНЯ!). После центровки текста получилось изображение, показанное на Рисунок 1.11.
После использования команды Преобразовать в символ, я получил кнопку и присвоил ей имя "My Button" (Моя кнопка). Новый символ был включен в библиотеку и остался на рабочем поле на прежнем месте.
Два раза щелкнув кнопкой мыши по символу в библиотеке, вы можете отдельно редактировать кнопку на рабочем поле. В верхней части главного окна Flash появятся четыре предустановленных кадра, при этом все кадры, кроме кадра Up, будут пустыми. Кнопка будет работать отлично, однако станет использовать одно и то же изображение для всех своих состояний. Форма области в кадре Hit будет определяться самим изображением кнопки.
Чтобы внести разнообразие, необходимо создать ключевой кадр для каждого из четырех имеющихся кадров. Для этого выберите кадр на временной шкале и нажмите клавишу F6 (вставка ключевого кадра). Затем вернитесь к кадрам Over и Down и внесите в них какие-нибудь изменения. В нашем примере была изменена заливка каждого из кадров. Для кадра Hit текст не обязателен, значение имеет лишь форма изображения.

Публикация

Публикация

Перед тем как применить команду File -> Publish (Файл -> Публиковать), вызовите диалоговое окно Publish Settings (Рисунок 1.22). Это большое диалоговое окно состоит из трех вкладок. Вкладка Formats (Форматы) позволяет вам выбрать формат для экспорта. Однако форматы GIF, JPEG и PNG представляют собой неподвижные изображения, а форматы QuickTime Movie и RealPlayer не поддерживают ActionScript программы Flash 5 или MX.
Поэтому единственной реальной альтернативой остается формат SWF и Projectors. Вы также можете выбрать экспорт HTML-страницы, которая будет использоваться вместе с swf-файлом.

Пункты меню

Пункты меню

Выбор пунктов меню столь же богат, как и выбор панелей. Однако регулярно используется лишь небольшая их часть. Программисту на ActionScript,помимо расположения самих пунктов меню, необходимо знать сочетания "горячих" клавиш для выполнения наиболее часто используемых команд.

Растровые изображения

Растровые изображения

ля импорта растровых изображений во Flash используйте команду File -> Import (Файл -> Импорт). Вы можете импортировать различные графические форматы, включая JPEG, GIF, PICT и BMP. Файл будет добавлен в библиотеку вашего ролика. После импорта изображения в библиотеку с ним мало что можно сделать при помоши ActionScript. Тем не менее вы можете поместить его в клип. Над изображением, импортированным во Flash, можно произвести не так уж много операций. На Рисунок 1.14 показано диалоговое окно Bitmap Properties (Свойства растрового изображения), вызываемое двойным щелчком мыши по изображению в библиотеке.

Размещение Flashролика в сети

Размещение Flash-ролика в сети

Для того чтобы поместить ролик в сети, его необходимо вставить в HTML-страницу. Конечно, вы можете поместить ролик как swf-файл, однако в этом случае он увеличится до размера окна браузера, что вам не нужно.
При помощи двух тэгов вы можете поместить swf-файл на Web-страницу и для Internet Explorer, и для Netscape, Более того, множество настроек позволяют задавать нужный внешний вид ролика. Большинство из них автоматически применяются программой при публикации и могут быть установлены в диалоговом окне Publish Settings, показанном на Рисунок 1.24. Тем не менее вам не помешает знать, как выглядят эти элементы. Не знаю, как вы, а я бы скорее предпочел создать свой собственный HTML, чем использовать шаблон Flash.
Приведенный ниже элемент содержит Flash-ролик размером 550x400 под названием Sample.swf. Воспроизведение ролика начинается сразу, уровень качества - высокий, используются шрифты устройства, фоновый цвет - белый.

Приведенный выше код исполняется отлично, однако создает одну проблему: почти каждый параметр должен повторяться дважды, один раз в элементе OBJECT, второй - в элементе EMBED. Если вы вносите какие-либо изменения, не забудьте сделать это в обоих тэгах.
Теперь, узнав, как связаны Flash и ActionScript, вы готовы стать программистом на ActionScript. В следующей главе мы начнем изучение Action-Script.

Развернутый каталог в палитре Library

Рисунок 1.18 Развернутый каталог в палитре Library



На Рисунок 1.18 показана полностью развернутая палитра Library. Если вы хотите упорядочить библиотеку по дате последнего изменения (вариант Date Modified), просто щелкните мышью по заголовку столбца. Небольшая кнопка с изображением в форме пирамиды, расположенная справа от заголовков столбцов, позволяет упорядочить содержимое по возрастанию или по убыванию.
Благодаря такой организации вы можете узнать, какие элементы библиотеки используются и как часто. Здесь, конечно, не учитывается их использование в программах ActionScript.

Редактируемый текст Третьей опцией

Редактируемый текст Третьей опцией работы с текстом является Input Text (Редактируемый текст). Внешний вид окна Properties при этом почти не отличается от изображенного на Рисунок 1.13.
Для опции Input Text наряду со значениями Single Line, Multiline и Multiline No Wrap существует четвертое значение - Password (Пароль). Как вы уже, наверное, догадались, вместо символов в данном текстовом окне будут отображаться точки.
Также добавлена настройка Max Chars (Максимальное количество символов), задающая ограничение на количество вводимых символов. Установка значения 0 разрешает ввод неограниченного количества символов. Во Flash есть замечательное свойство, связанное с однострочным вводом текста. Когда вводимый пользователем текст выходит за границу текстового окна, текст автоматически прокручивается вправо. Вернуть курсор назад можно при помощи стрелки «влево». Эта функция позволяет вводить значительные блоки текста, не создавая большие области для их ввода.

Сцены

Сцены

Сцены являются более высоким уровнем организации роликов во Flash. Каждый Flash-ролик состоит из одной или нескольких сцен. В большинстве примеров, рассматриваемых в данной книге, используется лишь одна сцена, поэтому вы можете просто забыть об их существовании.
Тем не менее, сцены могут служить прекрасным организационным инструментом. Они представляют собой последовательное сочетание нескольких роликов, образующих одно целое. Каждая сцена имеет свою временную шкалу. На Рисунок 1.21 показана панель Scene (Сцена), которая включает три сцены. Они воспроизволятся точно в указанном порядке, хотя ActionScript может игнорировать его и воспроизводить сцены в любой последовательности и даже переходить с кадра одной сцены на кадр другой сцены.

Слои

Слои

Хотя в большинстве случаев программы, написанные на ActionScript, не манипулируют слоями, слои являются ценным инструментом для организации ролика. Вы можете и должны использовать разные слои для меток, кода ActionScript и графических объектов. На Рисунок 1.19 показан пример правильной организации ролика при помощи слоев.

Создание кнопок

Создание кнопок

Во Flash существует три типа символов: графические объекты, кнопки и клипы. В отличие от графических объектов кнопки и клипы могут иметь закрепленные за ними сценарии ActionScript. Программисту на Action-Script приходится создавать и использовать множество кнопок и клипов, поэтому давайте рассмотрим, начиная с кнопки, как это сделать.

Создание текста

Создание текста

Во Flash имеется три различных типа текстовых окон. Первое, статический текст, - если рассматривать его с точки зрения программиста на АсtionScript, - это не более чем графические объекты в форме текста. Другие два, динамический и редактируемый тексты, могут быть изменены при помощи ActionScript.

Список заключительных проверок

Список заключительных проверок

Вот список элементов, которые необходимо проверить перед публикацией ролика: • имена копий клипов - имена всех клипов, помещенных на рабочее поле, должны совпадать с именами в коде;
• свойства связи - в случае, если клип не используется на рабочем поле, но используется кодом, необходимо настроить его свойства связи в библиотеке таким образом, чтобы он экспортировался с роликом. Имя связи должно соответствовать имени, которое используется в вашем коде. Все вышесказанное относится и к звуковым файлам, содержащимся в библиотеке;
• имя динамического текста - имя динамического текста, используемого на рабочем поле и связанного с переменной ActionScript, должно соответствовать вашему коду;
• шрифты - текстовое окно динамического или редактируемого тек ста должно содержать все символы, которые могут вам понадобиться. В противном случае при воспроизведении на машине, где установлены другие шрифты, текст будет искажен;
• команда stop - команду ActionScript stopo необходимо поместить во все кадры, с которыми может взаимодействовать пользователь. Кадр, не содержащий команды stop О, является не более чем отдельным кадром анимации. Это также относится к клипам вашего ролика. Если они контролируются ActionScript, их первый кадр должен содержать команду stop О. Более подробную информацию об этой команде вы найдете в главе 2 "Введение в ActionScript".

Свойства текста При выделении

Свойства текста При выделении текстового поля окно Properties будет отображать свойства текста (Рисунок 1.12). Наиболее важные свойства находятся в верхнем левом углу панели Properties. На Рисунок 1.12. выбран тип Static Text; вы можете изменить это свойство на Dynamic Text или Input Text.

В диалоговом окне Document Properties

Рисунок 1.10 В диалоговом окне Document Properties задаются наиболее важные свойства ролика

Также заслуживает упоминания набор команд подменю Transform (Трансформация). Эти команды служат для изменения масштаба, вращения и транспонирования графических объектов на рабочем поле. Далее в книге рассказано, как выполнять подобные действия при помощи ActionScript, но некоторыми графическими изображениями и символами невозможно управлять при помощи ActionScript, поэтому эти команды надо обязательно знать. Следует также остановиться на команде Group (Группировать). В случае наложения друг на друга графических объектов линии и заливка объекта, расположенного снизу, могут оказаться скрытыми. Например, если вы нарисуете большой синий круг, в центре этого круга нарисуете маленький красный круг, а затем удалите красный круг, то в центре первого круга, на том месте, где был расположен красный, получится дырка. Если же вы сгруппируете синий круг перед тем, как рисовать красный, то первый не окажется частично стертым, а останется в своем первоначальном виде под вторым.

В диалоговом окне Layer Properties можно задать тип слоя

Рисунок 1.20 В диалоговом окне Layer Properties можно задать тип слоя



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

В диалоговом окне Symbol Properties

Рисунок 1.6 В диалоговом окне Symbol Properties можно указать, что объект должен быть включен в библиотеку для последующего экспорта в Action Script.

В диалоговом окне Trace Bitmap

Рисунок 1.15 В диалоговом окне Trace Bitmap осуществляется преобразование растрового изображения в векторное


Функция Trace Bitmap заменяет растровое изображение набором закрашенных векторных областей. В большинстве случаев это приводит к ухудшению качества рисунка по сравнению с исходным, но, по крайней мере, теперь его можно масштабировать аналогично векторному изображению. Многие художники преобразуют растровое изображение в векторное на одном из этапов его создания. Например, можно нарисовать что-нибудь на бумаге, отсканировать изображение в файл, а затем трассировать полученный растр в векторное изображение. Многие художники используют для преобразования не Flash, а программы типа Adobe Streamline. Затем изображение импортируется во Flash. После этого художник должен довольно много потрудиться, чтобы изображение выглядело так, как было задумано.

Вкладка Flash диалогового окна

Рисунок 1.23 Вкладка Flash диалогового окна Publish Settings позволяет изменять некоторые важные настройки swf-файла



Опция Omit Trace Actions (Игнорировать трассировку) предназначена для того, чтобы отключать сообщения, выводимые командой trace в окно Output. Вывод сообщений происходит только при проигрывании фильма в редакторе, так что для просмотра в браузере или посредством Flash-плеера эта опция не существенна.
Опция Protect from Import (Зашита от импорта) создает защищенный от импорта фильм. При попытке импортировать такой ролик будет затребован пароль.
Опция Debugging Permitted (Разрешить устранение неполадок) позволяет вам устранять неполадки в ролике во время его воспроизведения. Более подробно об устранении неполадок рассказано в главе 4 "Процесс создания игры".
Следующий ряд настроек дает возможность установить значение сжатия по умолчанию для изображений и звуков. При установке флажка Override Sound Settings (Заменять настройки звука) все звуки будут сжаты с параметрами по умолчанию, независимо от ранее установленной степени сжатия.
Опция Version (Версия) в нижней части окна, похоже, может творить чудеса. Она предлагает сохранить ролик во Flash 1, 2, 3, 4 или 5. Получается, что создаваемые вами ролики со сложным сценарием ActionScript будут работать во Flash 3? Нет. Если ваш ролик содержит хоть какой-нибудь сценарий на ActionScript, скорее всего, его необходимо экспортировать как ролик Flash 5 или MX. Если же вы используете новые команды версии MX, то ничего не остается, кроме как импортировать фильм в этой версии.
Последняя вкладка диалогового окна Publish Settings, изображенная на Рисунок 1.24. позволяет задать внешний вид HTML-файла, экспортируемого с swf-файлом.

Вкладка HTML диалогового окна

Рисунок 1.24 Вкладка HTML диалогового окна Publish Settings позволяет задавать настройки HTML-файла, экспортируемого с swf-файлом


На самом деле опции, показанные на Рисунок 1.24, не контролируют swf-файл, а только задают тэги HTML-страницы. Эти тэги мы рассмотрим в следующем разделе. Учтите, что настройки Flash Alignment, теоретически позволяющие определять положение swf-файла на странице браузера, реально не работают ни во Flash MX, ни в более ранних версиях.

Временная шкала кнопки Кнопку

Временная шкала кнопки Кнопку можно создать следующими способами: выбрать команду Insert -> New Symbol (Вставить -> Новый символ) или выделить ряд объектов на рабочем поле и выбрать команду Insert -> Convert to Symbol (Вставить -> Преобразовать в символ). Вы также можете выбрать команду New Symbol из всплывающего меню палитры Library.
Создав кнопку, вы можете редактировать прямо на рабочем поле, выбрав ее двойным щелчком мыши, или отдельно, в главном окне Flash, два раза щелкнув по ее имени в окне палитры Library.
В обоих случаях в верхней части главного окна Rash появится специальная временная шкала, которая содержит четыре изображения, необходимые для описания кнопки: Up, Down, Over и Hit.
Вы можете добавлять в кнопку сколько угодно слоев. При отображении кнопки будут использоваться только первые четыре кадра, показанные на Рисунок 1.11.

Временная шкала расположенная

• Over - вид, который принимает кнопка при помещении над ней кур сора МЫШИ;
• Down - вид кнопки, когда пользователь уже нажал, но еще не отпустил ее;
• Hit - определяет область, реагирующую на курсор.
Вначале лучше сосредоточить свое внимание на создании кадра Up. Затем создать варианты кадров Over и Down. В кадре Over кнопка должна каким-то образом выделиться, в то время как в кадре Down ее следует изобразить нажатой или выделить каким-то другим способом. В следующем разделе вы увидите несколько примеров дизайна кнопки. Вы можете создать кнопку, включающую только кадр Up. Если остальные три кадра останутся пустыми и будет отсутствовать даже ключевой кадр, кадр Up будет применен для всех четырех состояний кнопки.
Отличительной чертой кадра Hit является то, что он никогда не виден. Также не важно, какого цвета расположенный в кадре Hit объект; важна лишь форма. Кадр Hit вместе с кадрами Over и Down вообще можно не создавать. В этом случае все эти кадры заменит кадр Up.
Кадр Hit можно представить как невидимую фигуру под кнопкой, определяющую область нажатия кнопки мышью. Эта область может быть больше или меньше видимого графического изображения кнопки. Вы можете создать невидимую кнопку, оставив кадры Up, Over и Down пустыми, а кадр Hit заполненным. При этом в главном окне Flash кнопка будет выглядеть как светло-голубая фигура. При воcпроизведении ролика ее не будет видно вообще. Несмотря на это, на кнопку можно нажимать, а ее сценарий будет выполняться. Пользователь поймет, что это кнопка, так как при наведении на эту область курсор примет специальный вид. Такой способ применяется для создания различных эффектов.

Звуки

Звуки

Импорт звуковых файлов во Flash осуществляется способом, аналогичным импорту растровых изображений. Flash импортирует стандартные звуковые форматы: AIFF, МРЗ, Sun AU и Wave.
После того как файл импортирован во Flash, двойным щелчком мыши по его имени в библиотеке можно открыть диалоговое окно Sound Properties (Свойства звука) - см. Рисунок 1.16.

Создание Flash игр -практические уроки

Данный ролик состоит из двух слоев

Рисунок 2.8 Данный ролик состоит из двух слоев. Первый слой разделен на четыре части, которые содержатся в четырех кадрах, второй включает один ключевой кадр.


В первом кадре данного ролика будет использоваться та же самая команда stop(), которая остановит воспроизведение ролика сразу после его начала. В нижней части экрана размешены четыре кнопки. Каждой из них будет приписан отдельный сценарий. Первый сценарий изображен на Рисунок 2.8. Первая кнопка выбрана,и в окне ActionScript отображается ее сценарий:
on (press){
gotoAndStop("part1");
}

Так выглядит обычный сценарий кнопки. Поведение кнопки во время выполнения различных действий с ней задается программами-обработчиками. В нашем случае это действие press. Синтаксический элемент on обозначает начало программы-обработчика. В фигурные скобки заключаются команды реакции на события.
В нашем примере используется команда gotoAndStop - разновидность команды gotoAndPlay. В отличие от первой команды, задающей переход к новому кадру и остановку воспроизведения ролика, вторая команда переходит к другому кадру и запускает его воспроизведение.
Помимо этого сценария, три подобных приписаны трем другим кнопкам. Единственным их отличием является то, что они задают переход к кадрам "part 2", "part 3" и "part 4". Исходный файл: Navigation.fla
При запуске данного файла начинается воспроизведение ролика, остановленного в первом кадре. Теперь пользователь может щелкнуть по одной из четырех кнопок для перехода к одному из четырех оставшихся кадров. Попробуйте запустить ролик.
Это ваш первый настоящий Flash-ролик. Вместо простого текста "PART 1" - "PART 4", показываемого в каждом ключевом кадре, вы можете поместить презентацию наподобие той, которая создается в PowerPoint или других программах. Здесь демонстрируются возможности Flash, выходящие за рамки простой анимации.

Данный ролик состоит из последовательности

Рисунок 2.7 Данный ролик состоит из последовательности нескольких кадров, однако команда stор() останавливает его воспроизведение на первом кадре

Панель Properties может использоваться

Рисунок 2.11 Панель Properties может использоваться для связи текстового окна с переменной ActionScript

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

По сценарию данный клип перемещается вcлед за курсором

Рисунок 2.10 По сценарию данный клип перемещается вcлед за курсором



Теперь, когда вы умеете управлять воспроизведением ролика и перемещением клипа, давайте рассмотрим основные элементы программирования в ActionScript.

Ролик содержит четыре ключевых

Рисунок 2.5 Ролик содержит четыре ключевых кадра и сценарий, помешенный во второй ключевой кадр. Выбран второй ключевой кадр, и в окне Actions отображается соответствующий сценарий

Это единственный код ActionScript в ролике. При воспроизведении ролик начинается с ключевого кадра "part 1" и на экране появится текст "PART 1". Затем ролик будет двигаться по временной шкале до ключевого кадра "part2", где находится код ActionScript. По команде Flash перейдет к ключевому кадру "part4'. При этом текст "PART 2" не успеет появиться на экране1. Ролик будет находиться в кадре "part4", на экране окажется текст "PART 4".
Ролик продолжит движение по временной шкале до конца. Затем возвратится к первому кадру и опять покажет текст "PART 1". Этот цикл повторяется бесконечно.
При помощи ActionScript вы заставили Flash отступить от последовательного воспроизведения анимации. Ролик должен был последовательно проигрываться с кадра "part 1" к "part2", затем к "part3" и к "part4" однако по вашему сценарию он пропустил сразу два кадра - "part 2" и "part З'. С ActionScript вы получаете возможность контролировать порядок воспроизведения кадров Flash-ролика. Точнее говоря, если в кадре имеется сценарий, программа сначала исполняет сценарий, а потом прорисовывает кадр.
Давайте рассмотрим другой пример. По той же схеме создайте небольшие ключевые кадры в конце каждой части ролика. Мы будем создавать сценарии, воспроизводимые не в начале каждой части, а в ее конце. Исходный файл: Nonlinear.fla
На Рисунок 2.6 показано устройство ролика, включающего четыре маркированных ключевых кадра, как и в предыдущем примере, а также четыре ключевых кадра в конце каждой части ролика. В этих немаркированных кадрах содержится код.
Рисунок 2.6 Ролик состоит из четырех частей. Каждая часть начинается с маркированного ключевого кадра и заканчивается немаркированным ключевым кадром, содержащим небольшой сценарий


Ключевой кадр, следующий за "part1", содержит код: gotoAndPlay ("part3");
Ключевой кадр, следующий за "part2", содержит код: gotoAndPlay ("part4");
Ключевой кадр, следующий за "рагtЗ", содержит код: gotoAndPlay ("part2");
Ключевой кадр, следующий за "part4"', содержит код: gotoAndPlay ("part1");
При запуске ролика из файла Nonlinear.fla на экране появляется надпись "PART 1". Затем ActionScript задает переход ролика не к кадру "part2", а к "part3". Таким образом, ролик переходит от надписи "PART 1"к "PART 3". Затем, после кадра "'part3", ролик возвращается к "part2", а после него к "part4". Весь ролик воспроизводится в таком порядке - "PART 1", "PART 3", "PART 2" и "PART 4". Эта последовательность затем повторяется.
При помощи ActionScript вы полностью заменили обычную анимационную последовательность на свою собственную.
Приведенные выше примеры дают предсказуемый результат, однако у вас есть возможность использовать команду gotoAndPlay по-другому, например в сочетании с кнопками, чтобы предоставить пользователю контроль над порядком воспроизведения ролика.

Ролик содержит клип и назначенный ему сценарий

Рисунок 2.9 Ролик содержит клип и назначенный ему сценарий


Сценарий, назначенный клипу, использует программу-обработчик подобно сценарию кнопки в предыдущем занятии. Чтобы задать программу обработки, вместо командной строки on введите строку onCIipEvent, которая определяет события для клипов ролика. В данном случае событие будет следующим: enterFrame. Это автоматическое событие, происходящее при каждом обращении к данному кадру. Если ролик должен воспроизводиться со скоростью 12 кадр/с, оно должно посылаться в программу обработки 12 раз в секунду. Если ролик остановлен командой stop () или просто состоит из одного кадра, то кадр "зацикливается", то есть перерисовывается с той скоростью, которая задана ролику
Подобно программе on (press) в сценарии кнопки, команды реакции на событие onClipEvent (enterFrame) заключаются в фигурные скобки. В данной программе будет только одна команда, перемещающая клип на один пиксель влево. Давайте взглянем на сценарий и проанализируем, какие действия в нем выполняются. OnClipEvent(enterFrame) {
this._ x -- ;
}

Команда this._х --, вероятно, будет совершенно непонятной для людей, не знакомых с языками программирования, поэтому разберем ее по частям.
Команда this обозначает обращение команды к объекту, который ее содержит. В данном случае this используется для обращения к клипу, которому назначен этот сценарий.
За командой this следует точка, обозначающая обращение к свойству объекта. В нашем примере _х относится к горизонтальному положению клипа.Итак, this._x определяет горизонтальное положение клипа. Символ -- является декрементом (командой уменьшения значения). Он уменьшает значение стоящей перед ней величины на 1 (пункт). Таким образом, команда this._x -- берет значение горизонтального положение клипа и вычитает 1, благодаря чему клип перемещается влево.
Если клип необходимо переместить вправо, используется команда ++, которая называется инкрементом (это команда увеличения значения). Если вы хотите переместить клип вправо или влево сразу на несколько пикселов, используйте соответственно += или -=: OnClipEvent(enterFrame) {
this._x -= 5;
}
Данная команда переместит клип сразу на пять пикселов.

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

Рисунок 2.12 Ролик состоит из пяти кадров и пяти кнопок для перехода к каждому кадру. Текстовое окно отображает имя текущей метки кадра



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

Назад

Содержание

Вперед

Сценарии для кнопок

Сценарии для кнопок

Вы также можете задавать сценарии для кнопок. Прежде всего вам следует создать кнопку как элемент библиотеки. Затем, если необходимо, перетащите кнопку на рабочее поле. Выделите ее и нажмите F9 для того, чтобы вызвать диалоговое окно Actions. В случае, если диалоговое окно уже на экране, шенарий кнопки будет отображен при ее выделении.
Теперь окно Actions имеет заголовок Actions - Button (Действия - Кнопка). Любой сценарий, введенный здесь, будет выполнен кнопкой. Однако вы не можете просто ввести набор команд. Вы должны запрограммировать реакцию кнопки на выполнение различных событий, например на ее нажатие, помещение над ней курсора и т.д. Код, обрабатывающий подобные события, называется программой-обработчиком. Сценарий кнопки представляет собой набор из одного или нескольких обработчиков.

Сценарии кадра

Сценарии кадра

Вы можете помешать сценарии в ключевые кадры главной временной шкалы вашего ролика. Для этого выделите ключевой кадр на главной временной шкале и нажмите F9. На экране появится диалоговое окно Actions - Frame (Действия - Кадр).
Сценарии кадра могут содержать два типа элементов. Первый - это набор команд, исполняемых при воспроизведении кадра ролика. Команды исполняются друг за другом, пока не будет достигнут конец сценария.
Вторым типом элемента, включаемого в кадровый сценарий, является функция. Функции - это элементы кода, которые могут быть многократно использованы командами в сценариях кадра, а также другими сценариями ролика.

Сценарии клипов

Сценарии клипов

Вы также можете назначить сценарий клипу. Для этого прежде всего создайте клип и сохраните его как элемент библиотеки. Затем поместите копию клипа на рабочее поле. Выделив копию клипа на рабочем поле, вызовите окно Actions, оно будет иметь заголовок Actions - Movie Clip (Действия - Клип).
Аналогично сценарию кнопки вы не можете просто ввести набор команд. Команды должны быть помешены в программы-обработчики, реагирующие на события клипов. Однако, в отличие от кнопок, клипы реагируют на совершенно другой набор событий. В следующих разделах мы рассмотрим примеры сценариев кадра, сценариев для кнопок, а также сценариев клипов.

Что такое код ActionScript и где его размещать

Урок 1. Что такое код ActionScript и где его размещать

ActionScript - это язык программирования, используемый программой Flash MX. По сравнению с главной временной шкалой, позволяющей создавать лишь линейную анимацию, ActionScript расширяет возможности программирования. При помощи ActionScript ваш ролик будет реагировать, например, на выбор, делаемый пользователем, или на другие события. ActionScript позволяет управлять элементами, которые видит пользователь, и вместо простой анимации показывать нелинейные презентации, интерактивные приложения или игры. ActionScript, используемый Flash MX, был создан на основе двух источников. Первый - это набор макрокоманд, взятый из предыдущих версий Flash, в основном Flash 4, который содержал схожий, но очень простой язык программирования. Другим источником оказался JavaScript - язык, использующийся для создания небольших программ для HTML-страниц в Internet Explorer и Netscape. Новый язык стал популярен среди разработчиков Web-странии, которые являются основными пользователями Flash MX. Для того чтобы упростить изучение ActionScript, многие новые команды и синтаксис были приведены к виду, напоминающему JavaScript.
Программы ActionScript представляют собой списки инструкций, котoрые выполняются программой Flash и могут быть помешены в различные места Flash-ролика. Если вы знаете, куда поместить сценарий, это уже полдела. Давайте рассмотрим несколько мест, куда может быть помещен сценарий, а также в каких случаях он будет использован программой.

Условные выражения

Урок 10. Условные выражения

Из урока 5 "Создание кнопок для пользователя" вы узнали, как пользователь может использовать кнопки для перехода от одного кадра к другому. Пользователь решает, какую часть ролика он хочет увидеть следующей, щелкает по кнопке, и сценарий, приписанный данной кнопке, отправляет ролик в соответствующий кадр.
ActionScript также может принимать решения. Эти решения основываются на сравнении значений, которое осуществляется при помощи оператора if. Например, могут сравниваться два значения. Если они равны, программа отреагирует на это определенным образом.
Приведем пример программы, которая сравнивает переменную со значением. Если значение удовлетворяет условию, код внутри фигурных скобок выполняется. В противном случае программа пропускает его. if (a == 7) {
GotoAndPlay("special frame");
}
Символ == используется для установления тождественности двух значений. Если значения равны, условие верно. Если нет, условие ложно. Задача оператора if состоит в проверке верности условия. Если это условие верно, код в фигурных скобках выполняется.
Вы можете продлить выражение if и задать, что при невыполнении данного условия должно совершаться определенное действие. Используя оператор else после оператора if, вы можете включить еше один набор фигурных скобок, в которых будет задано какое-либо действие при невыполнении условия: if (a =- 7) {
gocoAndPlay("special frame");
} else {
gotoAndPlay("another frame");
}

Выражение if может быть длинным и включать несколько проверок условий. Выполняется код, следующий за первым верным условием. Если ни одно условие не является верным, выполняется код, следующий за оператором else. if (a == 7) {
gotoAndPlay ("special frame");
} else if (a == 12) {
gotoAndPlay("very special frame");
} else if (a == 15) {
gotoAndPlay(" extremely special frame");
} else {
gotoAndPlay("a not so special frame");
}
Символ == может также использоваться для сравнения двух строк. Например, для того чтобы определить, содержит ли переменная username строку "Gary", вы можете использовать следующий код: if (username == "Gary") {
Кроме символа ==, определить, будет ли одно число соответственно меньше или больше другого, помогут символы < и >, а символы = указывают, будет ли число меньше или равно или больше или равно другому числу. Данные символы могут использоваться и при сравнении строк, в этом случае они производят сравнение исходя из алфавитного порядка.
У вас есть возможность одновременно выполнять несколько сравнений. Например, вы можете проверить, равно ли значение а определенному числу, a username определенной строке: if ((а == 7) and (username == "Gary")) {
Предыдущая строка верна только при выполнении обоих условий. Выполнение одного из условий можно проверить при помощи оператора or: if ((a == 7) or (username == "Gary")) {
Выражения if являются основными элементами всех программ. Они могут использоваться для изменения переменных, перехода к другим кадрам, а также для того, чтобы определить выигрыш или проигрыш игрока. Другим важным элементом программы являются ииклы, которые рассматриваются в следующем разделе.

Циклы

Урок 11. Циклы

Условные выражения являются необходимым элементом программирования; не менее важный элемент - циклы.
Компьютеры превосходно выполняют повторяющиеся задания. Во Flash этими заданиями являются циклы. Наиболее распространенная их разновидность - цикл for. Он позволяет выполнять задание определенное количество раз. Приведем пример цикла for: for(i=0;i
Традиционным для программирования является использование переменной i в качестве счетчика циклов программы. В данном случае i обозначает increment (приращение). Это неплохая идея - всегда давать переменной имя, обозначающее выполняемую ей функцию. В циклах for, как правило, используется именно переменная i.
На первый взгляд цикл for кажется довольно сложным. Он состоит из трех частей, разделенных точкой с запятой. Первая часть позволяет задавать определенное значение переменной. В данном случае переменной i присвоено значение 0.
Вторая часть синтаксической структуры for проверяет выполнение условия, аналогично тому, как это делалось в конструкции if. В нашем случае условие ложно, если i меньше 10.
Третья часть синтаксиса for показывает, как должна изменяться переменная в каждом новом цикле. В данном случае i каждый раз увеличивается на 1. Результатом является следующий цикл: в начале переменная i имеет значение 0, в каждом цикле это значение увеличивается на 1, цикл заканчивается, когда переменная достигает значения 10. Таким образом, значение переменной i изменяется с 0 до 9 за 10 шагов. Если запустить вышеописанный код, вы увидите в окне Output цифры от 0 до 9. Циклы for применяются для обработки данных внутри программ, а не для анимации объектов на экране. Пока выполняется никл, на экране ничего не происходит. Короткие циклы, наподобие предыдущего примера, выполняются настолько быстро, что не оказывают никакого влияния на ролик. Однако длинные циклы могут задерживать воспроизведение ролика на несколько секунд и больше.
Приведем более распространенный пример цикла for. Предположим, у вас есть 10 клипов с именами "fox1" - "fox10", и вы хотите передвинуть их на 1 пиксел влево. Это действие будет выполнено при помощи следующего цикла: for(i=0;i _root["fox"+i]._x++;
}
Цикл меняет значение переменной i от 1 до 10. В нем применяется объект _root, с которым вы познакомились в уроке 7 "Возможность контроля клипов пользователем". Вы можете обратиться к любому клипу главной временной шкалы при помощи объекта _root [ ] с именем клипа внутри скобок. В данном случае код представляет собой строку, состоящую из слова "fox" и числа i.
Есть еще два способа создания циклов в ActionScript. Первый - это цикл while. В отличие от счетчика приращения (например, i), цикл while продолжает выполняться до тех пор, пока условие в начале выражения while верно. В цикле do, наоборот, условие находится в конце цикла. Разница в том, что если применяется вариант while, цикл может ни разу не выполниться, а в случае do он всегда выполняется один раз. Начинающие программисты на ActionScript нечасто используют подобные циклы, однако их необходимо знать.

Текст и строки

Урок 12. Текст и строки

Использовать числа в ActionScript несложно. Вы можете прибавлять, вычитать и выполнять другие операции с числами. Со строками также можно выполнить множество операций. Операции со строками являются важным шагом в изучении программирования.
Одна из простейших операций над строками - их объединение. Мы рассмотрели ее в уроке 9 "Выполнение операций". В уроке 10 "Условные выражения'' вы сравнивали строки для того, чтобы определить их тождественность и порядок следования.
Теперь давайте рассмотрим еще несколько строковых функций. Предположим, вы хотите узнать, включает ли одна строка другую. Для этого существует команда indexOf, определяющая положение первого символа второй строки внутри первой. Если вторая строка не найдена, результатом выполнения команды будет значение -1. Например, следующий код находит строку "World" в строке "Hello World" на шестой позиции, то есть там, где находится буква "W" (считая от 0). Если же вы зададите поиск "Earth", вы получите значение -1, так как этого слова в сочетании "Hello World" нет. myString = "Hello World.";
myPosition - myString.indexOf("World");
При ссылке на положение символа ActionScript начинает отсчет с 0. Строка "Hello" будет находиться в положении 0 строки "Hello World".
При помощи команды length вы можете узнать количество символов в строке: myString - "Hello World.";
myStringLength = myString.length;
Иногда необходимо получить определенную часть строки. Для этого существуют две команды. Команда substring задает часть строки от одного положения символа до другого. В данном примере результатом выполнения команды является текст "lo Wo": myString = "Hello World,";
mySubstring = myString.substring(3,8);
Эту же задачу выполняет функция substr. В отличие от предыдущей команды она задает начальную позицию отрезка и количество содержащихся в нем символов. Следующий код задает строку, которая начинается с третьего символа и состоит из пяти символов: myString = "Hello World.";
mySubstring = myString.substr(3,5);
У нас есть уже две функции, выполняющие практически одну и ту же задачу. Почему бы не ввести и третью? Функция slice полностью аналогична substring.
Созданный текст вам нужно будет показать пользователю. Это очень легко. В главе 1 "Элементы Flash для создания игр" вы познакомились с динамическим текстовым полем. Когда вы преобразуете текст в динамический в панели Properties, вы можете в поле Var присвоить ему имя.
На Рисунок 2.11 изображена панель Properties, в которой динамическому текстовому полю присвоено имя mySubstring. Пока переменная и текстовое окно находятся на одном уровне Flash, панель будет отображать содержимое переменной mysubstring. Если же эти элементы находятся на разных уровнях, например один из них является частью клипа, они не будут связаны.

Создание функций

Урок 13. Создание функций

Функция - это часть кода, которая может быть использована многократно. Вы можете передавать в нее несколько значений и получать из нее новые. Примером является функция, выдающая сумму двух чисел. Вот как она будет выглядеть в ActionScript: function sum(a, b) {
с = a + b;
return c;
}
Обычно функции помешаются в сценарии кадра главной временной шкалы. Функция задается при помощи ключевого (зарезервированного) слова function. Затем указывается имя функции, за которым следуют круглые скобки и открытая фигурная скобка {. Круглые скобки могут быть пустыми или содержать список переменных, задаваемых при вызове функции. Эти переменные называются параметрами функции (или аргументами). Например, предыдущая функция может быть вызвана следующим образом: trace (sum (7, 12));
Результатом обращения к функции будет число 19, помещаемое командой trace в окно Output. При обращении к функции sum значение 7 передается в функцию как переменная а, а значение 12 - как переменная b. После выполнения функции команда return посылает значение , с обратно к sum. Таким образом, для выполнения своей функции команда trace использует результат sum (7, 12) - число 19.
Функции используются по двум причинам. Первая - это возможность разделить программу на более мелкие части. Программу, состоящую из 30 строк и выполняющую три различные задачи, можно заменить на три функции, состоящие из 10 строк, каждая из которых выполняет свою задачу. Это значительно облегчает работу с кодом.
Другой причиной является возможность их повторного и неограниченного использования. Таким образом, если определенная часть кода используется несколько раз, вы можете поместить ее в функцию, которую затем будете постоянно вызывать, изменяя ее входные параметры. Исходный файл: Framelabeler.fla
Приведем пример функции, использующей в качестве входного параметра имя метки кадра. Она выполняет две задачи. Во-первых, помещает имя в текстовую переменную textFrameLabel. Это текстовое окно видно пользователю при воспроизведении ролика, оно информирует пользователя о том, в каком кадре он находится в данный момент. Второй задачей функции является выполнение команды gotoAndstop - переход к определенному кадру и остановка воспроизведения. function gotoFrame(frameLabel) {
franeLabelText - frameLabel;
gotoAndStop (frameLabel) ;
}
Функция помешается в первый кадр главной временной шкалы вместе с командой, задающей переход ролика к начальному кадру. Так как ролик уже находится в первом кадре, команда gotoAndstop просто останавливает ролик. gotoFrame ("introduction") ;
В примере Framelabeler.fla функция содержится в первом ключевом кадре. К каждому из пяти кадров пользователь может перейти при помощи кнопок, расположенных в нижней части экрана. Вместо команды gotoAndStop все кнопки обращаются к команде gotoFrame. На Рисунок 2.12 показан пример ролика. В верхнем левом углу рабочего поля находится область динамического текста. Временно он содержит слова "frame label". При первом обращении к функции gotoFrame они будут заменены на "introduction".

Массивы

Урок 14. Массивы

Никакое введение в язык программирования не было бы полным без рассмотрения массивов. Хотя множество простых операций может быть выполнено без применения массивов, человек, не умеющий работать с массивами, не может считаться настоящим программистом.
Массив является разновидностью переменной. Переменные, которые вы использовали до сих пор, могут содержать одно значение: число или строку. Массив может содержать ни одного, одно и больше значений. Вот как выглядит массив: myArray - ["Apple", "Orange", "Peach", "Plum"];
Для обращения к элементу массива используется специальный синтаксис: myItem. = myArray [1];
Переменная myItem будет иметь значение "Orange", так как отсчет положений в массивах, так же как и в строках, начинается с 0.
Несложно догадаться, что массивы применяются для хранения множества однотипных данных. Для выполнения операций над массивами предназначено несколько функций. Прежде всего, давайте рассмотрим, как создаются массивы. Это можно сделать несколькими способами. До сих пор мы рассматривали только способ, при котором все элементы массива задаются сразу. Вы также можете создать пустой массив и добавлять в него элементы: myArray = new Array();
myArray.push("Apple");
myArray.push{"Orange");
myArray.push("Peach");
myArray.push("Plum");
Первая строка данного кода создает пустой массив. Каждая из следующих четырех строк добавляет в массив один элемент при помоши команды push. По сравнению со способом "все сразу" данный способ кажется более сложным, однако он незаменим при построении массивов, все элементы которого не известны заранее. Например, вы можете позволить пользователю ввести данные, а затем добавить их в массив.
Длину массива можно узнать так же, как и длину строки: myLength = myArray.length;
Вы уже знаете, как получить доступ к отдельному элементу массива при помоши квадратных скобок. Используя команду pop, вы сможете взять из массива значение последнего размешенного там элемента. При этом из массива он удаляется. В нашем примере мы передаем его в окно Output. Следующий сегмент кода добавляет в массив четыре элемента, а затем, используя цикл while, удаляет конечные элементы массива и перемешает их в окно Output: myArray = new Array();
myArray.push("Apple");
myArray.push("Orange");
myArray.push("Peach");
myArray.push("Plum"); while (myArray.length>0) ( trace (myArray.pop());
Первой строкой в окне Output является "Plum", последней- "Apple", так как команда pop берет элементы в порядке, обратном помещению элементов массива {стековая схема: "последний вошел, первый вышел" -First In Last Out).
Массивы можно упорядочить. В случае, если элементами массива являются числа, Flash упорядочит их в цифровой последовательности. Если это строки, они будут упорядочены по алфавиту: myArray = new Array ();
myArray.push("Peach"};
myArray.push("Orange");
myArray.push{"Apple");
myArray.push("Plum"};
myArray.sort{);
trace(myArray.toString());
Обратите внимание на последнюю строку кода, которая содержит функцию tostring для приведения массива к виду, пригодному для отображения в окне Output, то есть преобразует все элементы массива в строку. При помоши данной функции вы можете убедиться в том, что массив соответствует вашим требованиям. Наконец, функция splice позволяет удалять один или несколько элементов из массива: myArray = [ "Apple", "Orange", "Peach" "Plurr." ] ;
myArray.splice(2,1);
Команда splice может выполнять несколько функций. В данном примере она содержит два параметра. Первый задает позицию, с которой начинается удаление элементов (считая от 0!), второй - количество удаляемых элементов. В нашем случае будет удален элемент "Peach", находящийся в позиции 2. Изменив второй параметр на 2, вы удалите и " Peach" и "Plum". Убрав второй параметр, вы удалите все элементы массива.
Функция splice используется также для добавления элементов. Добавляемый элемент задается третьим параметром: myArray = [ "Apple", "Orange", "Peach" "Plurr." ] ;
myArray.splice(2,1, "Pear");
В данном примере удаляется элемент м Peach", а его место занимает элемент " Fear". Четвертый и последующие параметры используются для добавления второго и более элементов. В случае, если значение второго параметра окажется равно 0. никакие элементы удалены не будут. Теперь, когда у вас есть представление об основах ActionScript, самое время применить эти знания для создания вполне профессиональных фрагментов Flash-роликов. В следующей главе мы создадим несколько подобных фрагментов, и затем, начиная с главы 5 "Создание визуальных эффектов", приступим к написанию целых программ.

Использование окна Actions

Урок 2. Использование окна Actions

Для программирования в ActionScript вы будете использовать окно Action-Script. При выборе команд, функций, операторов и других элементов синтаксиса в левой части окна элемент автоматически помешается в программу ActionScript в правой части окна.
Однострочная программа, содержащая команду gotoAndPlay, была помешена в программу в правой части окна двойным щелчком мыши по ее названию в списке слева. При выборе команды ее описание появляется под указателем мыши. В нашем примере был выбран gotoAndPlay(Frame);.
Рис 2.1. В вашем распоряжении имеется список команд левой части окна, которые могут быть добавлены в программу двойным щелчком мыши.

Ваша первая программа на ActionScript

Урок 3. Ваша первая программа на ActionScript

Исходный файл: Helloworld.fla
Первая команда, которую вы изучите, - trace, которая предназначена для передачи информации в окно Flash Output. Окно Output представляет собой небольшое текстовое окно, выводимое на экран во время предварительного просмотра ролика во Flash. Обычно оно используется для вывода отладочных сообщений при разработке программы.
Хотя в действительности данная команда не будет применяться в законченном Flash-ролике, приводимый здесь пример наглядно демонстрирует, что при помощи ActionScript вы можете заставить Flash выполнить указанные вами действия.
Для начала создайте новый Flash-ролик. При этом автоматически создается временная шкала с одним слоем и одним ключевым кадром. Выделив его и нажав F9, вызовите окно Actions. Затем при помощи всплывающего меню в правом верхнем углу окна переключите его в экспертный режим.
Теперь вы сможете поместить курсор в пустое программное поле в правой части окна Actions. Введите следующую строку:

trace ("Hello World!"); Точка с запятой ставится в конце каждой команды, как в примере с trace.
Команда trace - это встроенная функция Flash. В круглых скобках указываются параметры функции. Параметры - это входные данные, необходимые функциям для выполнения их задачи. Команда trace использует один параметр: строку, которая помешается в окно Output. Некоторые функции содержат один параметр и более, в то время как другие - ни одного.
Ваш экран должен выглядеть примерно так, как изображено на Рисунок 2.3. Здесь вы видите один слой и один кадр на временной шкале. Окно Actions имеет заголовок Actions - Frame. Это обозначает, что содержащийся в окне код ActionScript относится к выбранному в данный момент ключевому кадру. Единственным элементом программного листинга является команда trace. Попробуйте самостоятельно создать данный ролик.
Рисунок 2.2 Программа "Hello World" описывает первый и единственный кадр

Для того чтобы запустить программу, выберите команду Control -> Test Movie (Контроль -> Запустить пробное воспроизведение ролика). В течение секунды Flash создаст swf-файл и откроет его в окне предварительного просмотра. Окно останется пустым, так как в ролике нет никакой графики. Затем будет открыто окно Output со словами "Hello World!" (Рисунок 2.4). Это был важный шаг в изучении ActionScript. Мы дали Flash команду. В ответ Flash показал, что он понимает ее и слушается вас.
Рисунок 2.3 В окне Output содержится результат выполнения команды trace Программа "Hello World" появилась вместе с первыми языками программирования и стала традиционной. Это самая элементарная программа, которая обычно приводится как первый пример при обучении любому языку программирования, будь то ассемблер громадной ЭВМ, Basic, Pascal, С, Java или ActionScript. Только что вы прошли по следам миллионов программистов, начинающих изучать свое ремесло.

Контроль воспроизведения ролика

Урок 4. Контроль воспроизведения ролика

В уроке 2 "Использование окна Actions" мы бегло ознакомились с командой ActionScript gotoAndPlay. Эта команда приказывает Flash не принимать во внимание следующий кадр временной шкалы, а вместо этого перейти к совершенно другому кадру. При помощи команды gotoAndPlay вы можете контролировать воспроизведение Flash-ролика.
Создайте новый Flash-ролик. В этот раз он будет содержать несколько кадров. Создайте последовательность из четырех ключевых кадров и присвойте им имена начиная с "parti" и заканчивая "part4". Эти кадры представляют собой четыре части анимации. Кроме этого, в каждый из четырех кадров следует поместить статический текст, сообщающий пользователю о том, какую часть он в данный момент видит на экране.
В примере Gotoandplay.fla в каждый из четырех ключевых кадров был помешен статический текст "PART 1"- "PART 4". Текст "PART 1" появится в ключевом кадре "part1", текст "PART 2" - в ключевом кадре "part2" и т.д.
Ключевые кадры разделены несколькими кадрами, чтобы были видны названия меток на главной временной шкале. На Рисунок 2.5 показана главная временная шкала, содержащая четыре метки. Выбран второй ключевой кадр, поэтому на рабочем поле отображен текст "PART 2".
Выделив второй ключевой кадр, откройте окно Actions. Затем введите в окне следующую команду: gotoAndPlay ("part4");
Обратите внимание, что после добавления в ключевой кадр кода Action-Script на временной шкале в соответствующем кадре появляется строчная буква "а".

Создание кнопок для пользователя

Урок 5. Создание кнопок для пользователя

Исходный файл: Stop.fla
В предыдущем примере мы рассмотрели возможность управления роликом при помощи ActionScript без всякого вмешательства пользователя. Давайте добавим несколько кнопок, щелкнув по которым, пользователь сможет запустить воспроизведение той или иной части ролика.
Предоставить пользователю больше контроля над воспроизведением ролика можно, прежде всего лишив этого контроля Flash. Flash начинает воспроизведение анимации с первого кадра, затем переходит к следующему и т.д. При помощи команды stop () вы можете остановить воспроизведение анимации на первом кадре.
На Рисунок 2.7 изображен ролик из файла Stop.fla. Он состоит из четырех кадров, каждому из которых соответствует метка на временной шкале и текст на рабочем поле. В первый кадр включен небольшой сценарий с командой stop(). Воспроизведение ролика начинается и заканчивается в кадре 1.
Теперь мы можем предоставить немного самостоятельности пользователю. Создайте простой эталон кнопки и поместите его на рабочий стол. Не следует выдумывать ничего необычного. В примере кнопка представляет собой маленький кружок.
Следующим вашим шагом будет создание нового слоя с одним кадром. Теперь в ролике будут участвовать одни и те же элементы. В данный слой мы поместили четыре различных копии одной и той же кнопки из библиотеки. Результат изображен на Рисунок 2.8.

Анимация при помощи ActionScript

Урок 6. Анимация при помощи ActionScript.

Исходный файл: Animate.fla
Теперь научимся перемешать предметы по рабочему полю при помощи ActionScript. Необходимо будет назначить клипу сценарий подобно тому, как мы сделали это для кнопки на нашем предыдущем занятии.
Сначала создайте новый ролик. Затем поместите клип на рабочее поле. В примере Animate.fla на рабочее поле было помешено изображение лисы. Если хотите, нарисуйте что-нибудь более простое, например круг. Когда употребляется термин "ролик" (movie), речь идет обо всем файле проекта. Термин "клип" употребляется для символа типа movie clip.
Вы можете поместить на рабочее поле экземпляр любого клипа, имеющегося в библиотеке. На данный момент наш фильм состоит из одного слоя и одного кадра, помешенного на рабочее поле (рис 2.9).

Возможность управления клипами пользователем

Урок 7. Возможность управления клипами пользователем

Исходный файл: Usercontrol.fla
А теперь давайте сделаем так, чтобы клип двигался вслед за курсором.
В предыдущем занятии мы узнали, как получить доступ к горизонтальной позиции клипа. При помоши параметра _у так же легко оперировать изменением координаты по вертикали. Теперь все, что нам нужно, - это привязать данные координаты к курсору.
Местоположение курсора определяется двумя параметрами: _xmouse и _ymouse, которые представляют собой координаты курсора по вертикали и горизонтали. Возникает следующий вопрос: чьи это параметры?
Это могут быть параметры любого клипа или самого ролика. Например, команда this ._xmouse определяет горизонтальное положение мыши по отношению к центру текущего клипа.
Нам нужно установить положение клипа по отношению к рабочему полю. Для того чтобы получить параметры рабочего поля, вместо идентификатора this следует использовать _root. Так, переменная _root ._xmouse определяет горизонтальное расположение мыши относительно левого верхнего угла рабочего поля.
Для того чтобы привязать координаты клипа к координатам курсора, необходимо изменить параметры _х и _у клипа в соответствии с параметрами _xmouse и _ymouse рабочего поля. Вот как будет выглядеть программа: On.ClipEvent (enterFrame) {
this._x = _root._xmouse; this._y = _root._ymouse;
}

На Рисунок 2.10 показан "собранный" ролик Usercontrol.fla. Он состоит из одного кадра со скриптом, содержащим команду stop(). Клипу назначен вышеописанный сценарий. Это все, что требуется. При воспроизведении ролика клип с лисой будет следовать за курсором.

Использование переменных

Урок 8. Использование переменных

Переменные представляют собой поименованные области памяти, содержащие какую-либо информацию, такую как числа или последовательность символов. Например, вы можете создать переменную и поместить в нее число 5. Если вы прибавите к данной переменной число 2, она будет содержать число 7. Вот как эти действия будут выглядеть в ActionScript: myVariable = 5;
myVariable += 2;
myVariable - это имя созданной вами переменной. Для того чтобы создать переменную во Flash, необходимо просто один раз упомянуть ее в тексте программы. Flash автоматически создает переменную с соответствующим именем (в ActionScript не требуется какой-либо специальной инициализации переменных). В нашем примере была создана переменная myVariable со значением 5. В следующей строке к данной переменной прибавляется значение 2. Теперь переменная myVariable содержит число 7. Очень важно присвоить переменной содержательное имя. Оно должно отражать выполняемую ей задачу. Например, если переменная предназначена для хранения имени пользователя, ее лучше назвать, допустим, "userName". Позднее, просматривая код, вы сразу поймете, для чего используется данная переменная.
В переменную можно также помещать строки. Строка - это последовательность символов наподобие “Hello World”. Так же как и число, строку можно сохранить в переменной при помощи символа =. myVariable = "Hello World";
Переменные во Flash не делятся на типы. Классификация переменных -это ограничение типа данных, хранимых в данной переменной, которое применяется в других языках программирования. Это означает, что если переменная предназначена для хранения чисел, она может использоваться только для хранения чисел, но не для хранения строк. В ActionScript нет такого ограничения, поэтому любая переменная может хранить любые объекты, например числа или строки.
Помимо чисел и строк переменные могут содержать другие элементы, например указатель клипа. Вспомните, как в двух предыдущих уроках использовался элемент this для ссылки на текущий клип. Вы можете присвоить значение this переменной и с ее помощью ссылаться на клип.
Использование подобных элементов помогает управлять роликами, где содержится более чем один клип.
Вы будете часто сталкиваться с подобными ситуациями в играх, рассматриваемых в этой книге. На данный же момент вам достаточно знать, что переменные могут содержать числа, строки и ссылки на клипы. Все переменные, использованные в этом уроке и в остальной книге, это глобальные переменные. Это значит, что после того как вы их задали, к ним можно обращаться из ролика или других клипов. Также с помощью ключевого слова "var" вы можете определить локальные переменные. Локальные переменные, определенные в какой-либо функции, недоступны к использованию в остальном коде. Как локальную переменную, например, удобно определять счетчик цикла, используемого внутри функции.

Выполнение операций

Урок 9. Выполнение операций

Вам наверняка понадобится изменять данные, хранящиеся в переменной. Мы уже рассматривали, как с помощью команд ++ или += изменять значение переменной. В вашем распоряжении также имеется большой набор других операций.
Давайте начнем с переменных, содержащих числа. Вы можете выполнять большое количество математических операций с числами при помощи символов +, -, / и *. Приведем несколько примеров.
Допустим, у вас есть две переменные: а и Ь. Вы можете сложить их и поместить результат в переменную с. a = 7;
b = 5;
c = a + b;

В предыдущем примере с будет в результате содержать число 12. Вот еще один подобный пример: c = a - b;
c = a * b;
c = a / b;

Переменная с получит значение 2 в первой строке, 35 - во второй строке и 1,4 - в третьей строке.
Вы также можете выполнять более сложные математические операции при помощи специальных функций, встроенных во Flash. Все они содержатся в объекте Math, за которым следует точка и имя функции. Например, при помощи функции Math.sqrt можно вычислить квадратный корень числа: a = 9;
b = Math.sqrt(a);

Значением b является 3 - квадратный корень из 9.
Один из важнейших элементов компьютерного языка, позволяющий программистам создавать игры, - генератор случайных чисел. Без случайных чисел игры были бы полностью предсказуемыми и скучными.
Flash генерирует случайные числа при помощи функции Math. random (). При этом генерируются случайные десятичные значения между 0.0 и 1.0. Нужные числа получают, умножая данные значения на целое число, а затем переводя их в целое число при помощи функции int. Например, следующая строка служит для генерации случайного числа от 0 до 9: myRandomNumber = int(Math.random()*10) ;
Другие математические функции будут рассмотрены по мере их появления в примерах.
Функции могут применяться и к строкам. Например, для объединения двух строк может использоваться символ +: а = "Hello";
Ь = "World";
с = а + b;
В итоге переменная с превратится в строку "HelloWorld". Обратите внимание на то, что между двумя этими словами нет пробела. Вам следует дать Flash команду ввести пробел. В результате следующий код создаст "HelloWorld": а = "Hello";
b = "World";
с = а + " " -b; Более простым способом объединения двух строк является использование синтаксических элементов * = : а = "Hello";
b += "World";
Теперь, когда вы узнали больше о переменных и их использовании, рассмотрим, как с помощью ActionScript организовать выполнение кода по условию.

Создание Flash игр -практические уроки

Диалоговое окно Symbol Linkage

Рисунок 3.5 Диалоговое окно Symbol Linkage Properties позволяет включать клип в swf-файл, даже если он не используется на рабочем поле


В окне следует установить флажок Export for ActionScript (Экспортировать для ActionScript). Затем вы должны придумать имя эталона, на которое будет ссылаться код. Я обычно использую имя эталона из библиотеки. Исходный файл: AttachMovie.fla
Первым параметром функции attachMovie является имя из диалогового окна Symbol Linkage Properties. Второй параметр - это имя копии клипа на рабочем поле, третий - уровень клипа. Код данной кнопки, содержащийся в файле AttachMovie.fla, за исключением одной строки, полностью совпадает с кодом примера DuplicateMovieClip.fla. on (press) {
// Дублируем первый клип.
attachMovie("myMovieClip","newclip"+level,level);
// Кладем в случайное место.
_root["newclip" + level]._x = int(Math.random!)*550);
_root["newclip"+level]._y = int(Math.random()*400);
// Увеличиваем счетчик, level++;
}
Исходный файл: RemoveMovieClip.fla
При помоши функции RemoveMovieClip вы можете удалять клипы с рабочего поля. Например, следующий код из файла RemoveMovieClip.fla перед созданием нового клипа удаляет предыдущий: on (press) {
// Удаляем предыдущий клип.
_root["newclip"+(level-1)].removeMovieClip();
// Дублируем первый клип.
attachMovie("myMovieClip","newelip"+level,level);
// Кладем в случайное место.
_root["newelip"+level],_x=int(Math.random()*550);
_root["newclip"+level]._y=int(Math.randomf)*400);
// Увеличиваем счетчик.
level++;
}
Используя данные приемы, вы можете сделать так, чтобы ваши игры и приложения создавали свои собственные клипы, добавляя и удаляя их с рабочего поля по мере необходимости.

Эти 10 клипов были созданы из эталона при помощи ActionScrip

Рисунок 3.6 Эти 10 клипов были созданы из эталона при помощи ActionScrip


Вторая часть кода находится в программе обработки onClipEvent (enterFrame). Код выполняется в каждом цикле клипа "actions". Если клип воспроизводится со скоростью 12 кадров в секунду, код будет выполняться также 12 раз в секунду. onClipEvent (enterFrame) {
// Поворачиваем каждый клип в цикле,
for(i=0;i _root["sample"+i]._rotation += 5;
}
}
Данный код циклически выполняется во всех клипах и поворачивает каждый их них на 5 градусов. В результате на рабочем поле будет 10 вращающихся клипов. Исходный файл: Gears.fla
Я также создал улучшенную версию ролика под названием Gears.fla. За исключением кода ролик ничем не отличается от предыдущего. В Gears.fla клипы расположены таким образом, что зубья шестеренок соприкасаются. Чтобы создать эффект работающего механизма, каждый ролик изначально повернут относительно предыдущего на 15 градусов. Соседние зубья каждой шестеренки расположены с интервалом в 30 градусов, поэтому зубъя соседних шестеренок сцепляются. Кроме того, каждая шестеренка вращается в направлении, отличном от направления врашения предыдущей. Вот как выглядит код: onClipEvent (load) {
initialRotation = 0;
// Создаем 10 клипов,
for(i=0;i /7 Присоединяем очередной клип.
_root'.attachMovie ("sample","sample"+i , i) ;
// Устанавливаем координаты
_root["sample" + i]._x = i * 37 ;
_root["sample"+i]._y = 100;
// Устанавливаем каждому следующему поворот
// на 15 градусов относительно предыдущего.
_root["sample"+l]._rotation = initialRotation;
initialRotation += 15;
onClipEvent (enterFrame) {
// Пробегаем все клипы через один.
for(i=0;i // Поворачиваем по часовой стрелке.
_root [ "sample"+i] ._rotation += 5;
// Следующий поворот против часовой стрелки.
_root["sample"*(i+1)],_rotation -= 5;
}
}
Чтобы понять, как устроен код, откройте ролик Gears.fla и поработайте с ним. Этот, а также многие другие коды, которые вы встретите в данной книге, невозможно объяснить только теоретически. Для того чтобы до конца понять устройство и работу примеров, следует поработать с ними.

Клип "secondMC" включен в клип

Рисунок 3.4 Клип "secondMC" включен в клип "firstMC", находящийся на рабочем поле


Файл Levels.fla содержит два клипа. Однако только файл "firstMC" находится на рабочем поле. Клип "secondMC" находится внутри "firstMC". Текстовое окно на рабочем поле и в каждом клипе связано с переменной testvariable Эти текстовые окна отображают значения переменной testvariable на рабочем поле и в клипах "firstMC" и "secondMC" соответственно. То есть в каждом из клипов и на главной временной шкале (можно сказать в клипе _root) мы определили свою переменную и каждой из них присвоили имя testvariable.
Рабочее поле, а также каждый клип содержат кнопку, увеличивающую значение testvariable. Каждой кнопке назначен следующий код: on (press) { testVariable++; }
Кнопка изменяет значение переменной testvariable. на уровне того клипа, в котором находится данная кнопка. Кнопка, расположенная на рабочем поле, изменяет переменную testvariable на главном уровне Кнопка в клипе "firstMC" изменяет переменную testvariable в "firstМС", кнопка в "secondMC" - переменную testvariable в "secondMC" .
Следует отметить, что три переменные с именем testvariable. являются тремя разными переменными. Находясь на разных уровнях, они как не связаны друг с другом.
Нажатие одной из кнопок меньшего размера изменяет значение переменной testvariable только на том уровне, где она расположена.
Вы можете изменять значение переменных не только на уровне, где не ходится код, но и на других уровнях при помоши синтаксиса ActionScript. Примером могут служить три кнопки большего размера, расположенные в нижней части экрана.
Все три кнопки находятся на рабочем поле, а не внутри клипов. Первая кнопка изменяет значение testvariable, не указывая определенна клип. В результате изменяется переменная testvariable рабочего поля.
Вторая кнопка указывает переменную testvariable внутри клипа "firstMC". Код выглядит следующим образом: on (press) {
firstMC.testVariable++ ;
}
В результате изменяется переменная в клипе "firstMC". Для изменения переменной внутри клипа "secondMC", необходимо учитывать, что "secondMC" находится внутри "firstMC" и программе нужно это указать. on (press) {
firstMC.secondMC.testVariable++;
}
Во всех приводимых до сих пор примерах имена копий клипов указывались прямо в коде. Существует и другой способ обращения к клипам - свойство _root: _root["firstMC"].testVariable++;
Это удобно, если имя копии клипа содержит пробел, в таком случае данный метод является единственно возможным. Свойство _root используется также при создании более сложного кода, где надо представить имя клипа как строку для неявного указания этого имени. Применение данного метода будет рассмотрено в следующем разделе.

Кнопки позволяют контролировать воспроизведение клипа

Рисунок 3.2 Кнопки позволяют контролировать воспроизведение клипа


Пять кнопок позволяют полностью контролировать клип. Кнопка Play (Воспроизведение) запускает воспроизведение ролика. При достижении конца клипа воспроизведение начинается снова с первого кадра. Кнопка Stop (Стоп) останавливает воспроизведение ролика в текущем кадре. Кнопка Rewind (Перемотать) возвращает клип к первому кадру. Кнопки Previous (Предыдущий) и Next (Следующий) продвигают клип на один шаг соответственно назад или вперед.
Прежде чем передать контроль над клипом пользователю, необходимо остановить клип. Обычно клипы запускаются сразу же после своего появления на рабочем поле. Чтобы предотвратить это, в первый кадр главной временной шкалы был помещен следующий сценарий, останавливающий анимацию клипа, а также сам ролик: myMovieClip.stop();
stop () ;
Точка в первой строке сценария показывает, что функция stop () будет выполнена для копии клипа "myMovieClip". Вторая строка не содержит имени копии, поэтому команда выполняется в месте расположения сценария - в данном случае в главной временной шкале.
В сценариях для кнопок команды клипу посылаются также при помоши точки. Вот сценарий кнопки Play, задающий воспроизведение клипа: on (press) {
myMovieClip.play() ;}
Кнопка Stop посылает клипу команду stop () : on (press) {
nyMovieClip.stop() ;}
Кнопка Rewind задает переход клипа к первому кадру и его остановку. Это действие выполняет команда gotoAndstop() с параметром 1. on (press) {
myMovieClip.gotoAndStop(); }
Кнопки Previous и Next перемешают клип на один кадр вперед или назад. Эти действия выполняются при помоши команд prevFrame () И nextFrame(): on (press) {
myMovieClip.prevFrame () ;}
on (press) {myMovieClip.nextFrame ();}
Хотя целью данного урока было научить вас управлять воспроизведением клипов, вы можете использовать данный пример как руководство для воспроизведения анимации и даже слайд-шоу во Flash.

Обработчики событий

Обработчики событий

Во Flash 5 единственным способом отслеживания таких событий, как, например, enterFrame, было использование обработчиков onClipEvent в сценариях клипа. В версии MX появилась возможность использовать обработчики прямо в сценарии кадра.
Вот простой пример. Этот сценарий помещен в кадр и посылает сообщение в окно Output при каждом обращении к кадру. root.onEnterFrame = function() {
trace("enterFrame Event");
}
Вместо команды trace вы можете использовать другие команды аналогично тому, как это делалось на протяжении этого урока. Можно также определить имя для функции, обрабатывающей событие. Тогда предыдущий пример можно записать в таком виде: root.onEnterFrame = myFunction;
function myFunction() {
trace("enterFrame Event");
}
С помощью этого приема можно обращаться к любым событиям, например onMouseUp, onKeyUp, onLoad и т.д. Полное описание процедур обращения к событиям вы можете найти в документации. Пример использования данной технологии можно найти в главе 13 начиная с игры "Найди картинку".

При помоши кнопок расположенных

Рисунок 3.3 При помоши кнопок, расположенных вокруг клипа "fox", можно изменить его положение, масштаб и повернуть его on (press) {

fox._x = 200;
}
Для изменения масштаба клипа используются переменные _xscale и _yscale. В случае, если переменные имеют одинаковые значения, масштаб клипа будет изменяться пропорционально. Значение 100 соответствует масштабу 100%. Значения переменных _хsсаlе и _yscale можно задавать отдельно друг от друга. Они могут быть разными, при этом клип станет более тонким или более плоским.
Ниже приведен сценарий кнопки "50%". Две другие кнопки масштабирования используют аналогичный код, но с другими значениями. on (press) {
fox.__xscale = 50;
fox._yscale = 50;
}
Для вращения клипа используется переменная _rotation. Значение переменной задается в градусах, при этом 0 равен 360. Вы можете задать значение больше 360 или меньше 0, однако Flash преобразует их в показания между 0 и 360.
Далее приводится сценарий кнопки Tilt (Наклон). Она поворачивает клип на 30 градусов по часовой стрелке. Кнопка Straight (Прямо) возвращает клип в положение 0 градусов. on (press) {
fox._rotation = 30;
}
Используя эти переменные в более сложных сценариях, рассматриваемых далее, вы сможете перемешать клип по рабочему полю, что необходимо для создания игр различных типов.

Ролик Changingimages fla позволяет

Рисунок 3.7 Ролик Changingimages.fla позволяет отображать различные вилы одного и того же объекта


Каждая кнопка ролика Changingimages.fla задает перемещение клипа в определенный кадр. Приведем пример кода кнопки Up: on (press) {
ship.gotoAndStop("up") ;
}
Код кнопки Explode отличается от остальных, он использует команду gotoAndPlay, задающую перемещение клипа к кадру "explode" и продолжение воспроизведения: on (press) {
ship.gotoAndPlay("explode") ;
}
Клип включает последовательность из восьми кадров, которая начинается с кадра "explode" и изображает взрыв. Последний кадр последовательности содержит команду stop, задающую остановку воспроизведения клипа после взрыва.
Просматривая ролик Changingimages.fla , обратите особое внимание на временную шкалу клипа "ship". Здесь кадры маркированы таким образом, что код использует не номера, а имена кадров.

Создание клипа сценария

Создание клипа сценария

Единственным способом управлять несколькими клипами будет поместить код в точку, контролирующую их все. Например, если у вас есть 10 клипов, вы можете поместить код в первый клип, который будет контролировать все остальные.
Почему бы вместо того, чтобы возлагать контроль на один из клипов, нам не создать клип, специально для этого предназначенный? Данный распространенный прием позволяет легко запомнить, куда вы поместили ваш код. Я назвал такой клип "actions movie clip" (клип сценария). такой клип удобно называть контроллером.

Начните с создания при помоши инструмента Text небольшого текстового окна на рабочем поле и напишите в нем слово "actions" для того, чтобы его можно было легче идентифицировать. Перед окончательной пубикацией ролика лучше удалить надпись "actions" из клипа сценария, так как итоговый swf-файл должен занимать как можно меньше места
Затем, выделив текстовое окно, выберите команду Insert -> Convert to Symbol для преобразования его в клип под названием "actions". Переместите его на серую область за пределами рабочего поля, так чтобы пользователь не видел слово "actions".
Данный клип используется для назначения сценария, который будет управлять роликом. Предположим, вам необходим ролик, создающий 10 копий эталона из библиотеки и немного поворачивающий их с каждым новым циклом. Исходный файл: actionsMC.fla
Прежде всего создайте эталон. В диалоговом окне Symbol Linkage Properties установите флажок Export This Symbol и укажите имя "sample" (см. файл actionsMCfla).
Код, написанный ниже, будет включен в клип "actions". Он будет находиться внутри программы обработки onClipEvent и состоять из двух частей. Первый обработчик будет отзываться на событие load. Событие load происходит при первом появлении клипа. Код выполняется один раз. В данном случае следует воспользоваться возможностью и создать 10 новых клипов: OnClipEvent (load) {
// Создаем 10 клипов,
for(i=0;i _root.attachMovie("sample","sample"+i,i);
// Устанавливаем координаты
_root["sample"+i]._x = i*50 + 50;
_root["sample"+i]._y = 100; } }
Координаты клипов задаются одновременно с их созданием. Значение по вертикали равно 100, координата по горизонтали может иметь различные значения от 50 до 500. Результат показан на рис 3.6.

Контроль воспроизведений клипа

Урок 15. Контроль воспроизведений клипа

Исходный файл: Mcplayback.fla
Клипы представляют собой как бы небольшие ролики внутри основного Flash-ролика. Они включают полноценную временную шкалу со слоями, а также большинство элементов основного ролика. И основной Flash-ролик, и клипы можно контролировать при помощи команд play() и stop().
В библиотеке файла под названием Mcplayback.fla, находится клип "myMovieClip". Этот клип состоит из 10 кадров, промаркированных для того, чтобы вы знали, какой кадр клипа воспроизводится в данный момент.
Перетащив клип из библиотеки на рабочее поле, вы создадите его копию, которой можно и даже нужно присвоить имя. Для этого используйте панель Properties (Свойства), изображенную на Рисунок 3.1.

Управление свойствами клипа

Урок 16. Управление свойствами клипа

Исходный файл: Mcproperties.fla
Вы можете не только контролировать содержание клипа, но и задавать его внешние свойства. Например, управлять его положением, вращением и масштабом.
В примере Mcproperties.fla в центре экрана находится клип с изображением лисы. И рисунок в библиотеке, и копия клипа имеют имя "fox".
Кроме этого, вокруг изображения лисы расположено восемь кнопок. Каждая из них задает свойство клипа. Внешний вид экрана показан на Рисунок 3.3. Первые три кнопки имеют названия Left (Левая), Middle (Средняя) и Right(Правая).
В уроке 6 "Анимация при помоши ActionScript" мы узнали, что переменная _х используется для описания горизонтального положения клипа на рабочем поле. Эта переменная и будет использоваться кнопками Left, Middle и Right. Они могут использовать и переменную _у для описания вертикального положения клипа, однако в данном примере это не требуется. Приведем код кнопки Left. Он задает горизонтальное положение рисунка равным 200, то есть размещает его немного слева от центра при условии, что ширина ролика составляет 550 пикселов. Кнопки Middle и Right отличаются только значением переменной _х.

Применение метода "Перетащи и положи" к клипам

Урок 17. Применение метода "Перетащи и положи" к клипам

Исходный файл: Dragsimple.fla
Важным свойством интерфейса, будь то игра или приложение, являете возможность перетаскивать элементы по экрану. Во Flash это можно сде лать несколькими способами. Мы рассмотрим три из них.
Команда startDrag задает автоматическое следование клипа за курсором. Пример Dragsimple.fla демонстрирует самый простой способ применения данной команды.
Клип под названием "circle" с изображением круга был помешен на рабочее поле. Как только ролик запускается, нижеприведенная команда задает его движение следом за курсором. Она также задает остановку анимации главной временной шкалы, чтобы ролик не продолжал воспроизведение следующих кадров. startDrag("circle", true);
stop () ;
В нашем примере команда startDrag использует два параметра. Первый - это имя перетаскиваемого клипа. Второй - ключевое слово true которое в данном случае задает привязку центра объекта к курсору. Ее второй параметр имеет значение false, за основу будет взято расстояние между курсором и центром клипа на момент выполнения командь startDrag. Ключевые слова true и false называются булевыми константами. Они могут использоваться в случае, если атрибут либо действует, либо нет, а также отображать результат сравнения, например "а = = b.
В примере Dragsimple.fla клип "circle" следует за курсором. Однако чаше всего применяется другой способ перетаскивания: пользователь подводит курсор к объекту, нажимает кнопку мыши, перетаскивает объект в нужное место и отпускает кнопку. Исходный файл: Dragcomplex.fla
Подобную манипуляцию можно осуществить с клипом, внутри которого содержится кнопка. В файле Dragcomplex.fla в тот же самый клип "circle" была помешена невидимая кнопка (в ней заполнен лишь один кадр "Hit"). Таким образом, клип circle включает такую же графику, как и в примере Dragsimple.fla, и, помимо этого, кнопку. Кнопке назначен следующий сценарий: когда пользователь нажимает кнопку, выполняется команда startDrag, когда отпускает - команда stopDrag. on (press) {
startDrag("",false) ;
on (release) {
stopDrag();
}
Пустые кавычки внутри команды startDrag сообщают Flash, что перетаскиваться будет текущий клип. Кнопка находится внутри клипа "circle", поэтому перемещаться будет именно он. false в качестве второго параметра означает, что клип не будет привязан к центру курсора, а сохранит первоначальное расстояние между курсором и центром клипа. При этом будет создаваться впечатление, что курсор схватил круг в некоторой точке и перетаскивает его за нее.
Команда stopDrag не требует никаких параметров. Одновременно может перетаскиваться только один клип, поэтому команде необходимо лишь остановить текущее действие перемещения, благодаря чему клип вернется в неподвижное состояние.
Одним из недостатков команды startDrag является то, что одновременно может быть перемешен только один клип. Кроме того, клип перемешается автоматически, поэтому за его движением трудно проследить. По этой причине вам не помешает знать еше один способ перетаскивания клипа. Исходный файл: Dragbetter.fla
Соответствующий код содержится в файле Dragbetter.fla. Ролик устроен аналогично ролику из примера Dragcomplex.fla, клип которого содержит невидимую кнопку. Однако данной кнопке назначен совершенно другой сценарий. Согласно данному сценарию, переменная drag получает значение true, когда пользователь нажимает на кнопку, и значение false, когда отпускает. on (press) {
drag = true;
on (release) {
drag = false;
}
Переменная drag является глобальной переменной и совместно используется всем кодом клипа. В зависимости от значения drag сценарий определяет, должен ли клип следовать за курсором.
Сценарий устанавливает соответствие между переменными _х, _у перетаскиваемого клипа и _xmouse, _ymouse ролика. Два последних параметра описывают положение курсора мыши относительно рабочего поля основного ролика. onClipEvent (enterFrame) {
if (drag) {
this._x = _root._xmouse;
this._y = _root._ymouse;
}
}
Ключевое слово this обозначает ссылку на текущий объект. Сценарий назначен клипу "circle", поэтому this относится к нему. В следующем разделе мы рассмотрим другие способы обращения к клипам на различных уровнях.

Клипы и уровни

Урок 18. Клипы и уровни

Начинающему программисту на ActionScript будет трудно понять, каким образом устроены клипы и уровни. Клип можно представить как ролик внутри основного Flash-ролика. Этот клип имеет свои переменные и атрибуты, отличные от параметров и атрибутов основного ролика.
Каждый раз, когда вы помешаете клип на рабочее поле, вы создаете новый объект. Основной Flash-ролик является объектом, а клип - объектом внутри этого объекта.
Flash-ролик можно сравнить с коробкой, полной игрушек. Если вы раскрасите коробку в синий цвет, игрушки не станут синими. Каждая из них сохранит свой первоначальный цвет. С другой стороны, если вы перенесете коробку на другое место, остальные игрушки последуют за ней, сохранив при этом свои свойства, такие как цвет и положение внутри коробки.
Предположим, коробка с игрушками закрыта, и вы просите кого-то в комнате достать машинку. Если человек не знает, что игрушка находится внутри коробки, ему будет нелегко это сделать. Недостаточно просто сказать: "Достань машинку". Необходимо сказать: "Достань машинку, которая находится в коробке".
Подобным образом устроены и клипы. Если ваш клип расположен на главной временной шкале Flash-ролика, вы можете обратиться к нему по имени "toyTruck" ("игрушечный грузовик"). Однако, если ваш клип "toyTruck" расположен внутри другого клипа под названием "toyBox", к нему необходимо будет обратиться следующим образом: "игрушечный грузовик внутри коробки с игрушками", или "toyBox.toyTruck'. Исходный файл: Levels.fla
На Рисунок 3.4 изображен похожий случай. Данный ролик в файле Levels.fla.

Копирование клипов

Урок 19. Копирование клипов

Важным аспектом создания игры является умение манипулировать клипами. Но сначала нужно научиться создавать клипы. Хотя во Flash это сделать несложно, вы, возможно, захотите, чтобы ваш код создавал клипы во время воспроизведения ролика.
Представьте себе игру, в которой космические корабли врага атакуют игрока. Приближается один корабль, за ним следующий и т. д. Вместо того чтобы заранее создавать сотни клипов, ваш код может создавать их по мере необходимости.
Существует два способа создания клипов: копирование существующего клипа и создание клипа из эталона, находящегося в библиотеке, но не используемого изначально на рабочем поле.
В первом случае используется функция duplicateMovieClip, при помоши которой создается дубликат существующего клипа. Приведем пример: firstclip.duplicateMovieClip("newclip",0);
Функция duplicateMovieClip запускается копируемым клипом. Поэтому при ее использовании упоминается имя этого клипа, в данном случае "firstclip". Функция также содержит два параметра: имя новой копии клипа и уровень нового клипа.
Это может немного вас запутать. Термин "уровень" здесь (применительно к команде duplicateMovieClip) означает порядок расположения клипов. В предыдущем же разделе данный термин использовался для описания включения одного клипа в другой.
В случае, если клип создан на уровне 0, как в предыдущем примере, он располагается под клипом уровня 1. Клип уровня 1 находится под клипом уровня 2 и т. д.
Не беспокойтесь, что два клипа окажутся на одном уровне, Flash не позволит это сделать. Достаточно в каждой команде duplicateMovieClip указывать другой номер уровня. Исходный файл: DuplicateMovieClip.fla
В примере DuplicateMovieClip.fla демонстрируется применение данной команды. В первом и единственном кадре главной временной шкалы пе ременная level имеет значение 0. На рабочем поле находится кнопа "new MC", а также клип "firstclip". Каждый раз при нажатии кнопки выполняется следующий код: on (press) {
// Дублируем первый клип.
firstclip.duplicateMovieClip("newelip"+level,level);
// Помещаем его в случайную позицию.
_root["newclip"+level]._x = int(Math.random()*550);
_root["newclip"+level]._y = int(Math.random()*400);
// Увеличиваем счетчик.
level++;
}
Обратите внимание, что в коде ActionScript я в первый раз использовал комментарий. Строки комментария начинаются с двух косых черт. Содержание строки, следующей за косыми чертами, полностью игнорируется Flash и предназначено для того, чтобы вы понимали, какое действие выполняет код. Чем длиннее блоки вашего кода, тем больше они нуждаются во вспомогательных комментариях. Комментарии используются для последующего редактирования кода, а также для того, чтобы вашему коллеге было легче его понять.
В данной программе обработки переменная level используется по-разному. Во-первых, для присвоения имени новому клипу (сначала клипу присваивается имя newclip. Переменная также отображает уровень клипа В конце программы значение переменной level увеличивается на 1. Таким образом, следующий создаваемый клип будет называться level1 и располагаться на уровне 1. С помощью функции Math.random () мы задаем будущему клипу случайные координаты в пределах рабочего поля. Обратите внимание, ссылка на клип осуществляется при помощи синтаксической структуры _root []. Другой способ создания новых клипов - использование функции attachMovie. Для выполнения данной функции не требуется, чтобы клип находился на рабочем поле. Он должен просто быть в библиотеке. Однако, если клип находится в библиотеке и не используется на рабочем поле, Flash автоматически не включит его в конечный swf-файл. Для того чтобы клип был включен в конечный файл, его необходимо выбрать в библиотеке и настроить его параметры в диалоговом окне Symbol Linkage Properties, которое вызывается из меню Options. Диалоговое окно изображено на Рисунок 3.5.

Управление несколькими клипами

Урок 20. Управление несколькими клипами

Теперь, когда вы научились создавать клипы при помоши ActionScript, рассмотрим способы управления ими. Вы знаете, что можете управлять одним клипом с приписанным ему кодом, а если необходимо, управлять несколькими клипами? Что, если эти клипы ведут себя аналогичным образом?
Поместив клипы на рабочее поле, вы можете копировать код одного клипа и вставлять его в другие. Этот метод имеет несколько недостатков. Во-первых, необходимость копировать и вставлять. Затем, если вы захотите изменить код, вам придется сделать это во всех копиях клипа.

Пересечение объектов

Урок 21. Пересечение объектов.

В игах часто происходят столкновения между различными объектами, причем иногда с весьма разрушительными последствиями. Давайте научимся создавать код, позволяющий отслеживать такие события, как пересечение двух объектов или, например, прохождение курсора над определенным объектом.
Основной способ обнаружения ситуации, в которой два объекта пересекаются или объект закрывает определенную точку экрана, - использовать функцию hitTest. Аргументом функции hitTest могут быть координаты какой-либо точки или ссылка на обьект, например клип, кнопку или текстовое поле.
Давайте начнем с проверки пересечения клипа с точкой. Предположим, вы хотите определить, находится ли курсор над определенным клипом на рабочем поле. Клипу следует назначить следующий код: onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
this._x = int(Math.random()*550);
this._y = int(Math.random()*400);
}
}
Строка this.hitTest () обозначает, что функция hitTest применяется к текущему клипу. Она включает три параметра: горизонтальное и вертикальное положение мыши, а также булевый параметр (значения true/false). Последний параметр определяет, использует ли Flash для контроля пересечения прямоугольную область, в которой содержится данный клип, или точную форму изображения в клипе. Во втором случае параметр должен быть равен true. Исходный файл: Runaway.fla
Вышеописанный код рассматривается в примере Runaway.fla. Если установить курсор над клипом, он переместится в случайную точку экрана. Исходный файл: Collision.fla
Для того чтобы определить, пересекаются ли два клипа, вы можете использовать один параметр - указатель на второй клип. В ролике Collision.fla на рабочем поле находятся два клипа. Клип большего размера называется "target", меньшего - "bullet". За пределами рабочего поля расположен клип "actions" со следующим кодом: onClipEvent (enterFrame) {
// Выясняем, попала ли пуля в мишень.
if (_root["target"].hitTest(_root["bullet"])) {
// Попадание, увеличиваем цель.
_root["target"]._xscale += 5;
_root["target"]._yscale += 5;
// Убираем пулю.
_root["bullet"]._x = 350;
} else {
// Нет попадания, пуля летит дальше.
_root [ "bullet" ] ._х -= 5;
}
}
Код задает перемещение снаряда на 5 пикселов. Если сталкиваются два клипа, мишень немного увеличивается за счет увеличения масштаба на 5%. Горизонтальная координата снаряда принимает первоначальное значение, и он может опять начинать свое перемещение. Вы научились изменять масштаб клипа и его положение. Далее вы узнаете другие способы, с помошью которых можно изменить внешний вид клипа.

Изменения содержимого экрана с помощью клипов

Урок 22. Изменения содержимого экрана с помощью клипов

К сожалению, Flash не позволяет заменить один клип другам на рабочем поле. Единственным выходом будет удалить один клип и создать на его месте другой. Но если внешний вид клипа должен часто изменяться, необходим более быстрый способ.
Таким способом является создание клипа, который содержал бы все возможные состояния объекта. Например, если объектом является космический корабль, в ролик необходимо включить кадры, изображающие: космический корабль с выключенным двигателем, с включенным главным двигателем, включенным левым двигателем, с включенным правым двигателем, а также ряд кадров, представляющих взрывающийся космический корабль. Исходный файл: Changingimages.fla
Данный пример демонстрируется в файле Changingimages.fla. Кнопки,расположенные слева от клипа, помогают выбрать отображаемую часть клипа. На Рисунок 3.7 изображен фрагмент ролика.

Ввод команд с клавиатуры

Урок 23. Ввод команд с клавиатуры

В предыдущем примере каждой части клипа соответствовала одна из пяти кнопок. Хотя основным средством управления во Hash-роликах являются кнопки, иногда в играх используется и прямой ввод с клавиатуры.
Существует два способа ввода с клавиатуры. Первый подразумевает особый вариант использования кнопок. Второй способ предполагает только код, который проверяет нажатие клавиш в определенный момент времени.
Для применения кнопочного метода создайте обычную кнопку Flash. Она не должна представлять из себя ничего особенного, так как будет расположена за пределами рабочего поля. Если кнопке назначен следующий код, она будет реагировать на клавишу "r" и использовать ее для перемещения клипа: on (keyPress "r") {
circle._x++;
}
Имейте в виду, что событие keyPress чувствительны к регистру. Это значит, что если кнопке назначена клавиша "r", она не будет реагировать на нажатие комбинации Shift+R.
Исходный файл: Keyboardbutton.fla
ДЛЯ обозначения движений лучше использовать клавиши с изображением стрелок, а не буквы. Для указания данных клавиш используется специальный синтаксис. Ниже приведен сценарий, позволяющий пользователю перемешать клип в четырех направлениях. Вы можете также найти данный сценарий в файле Keyboardbutton.fla. on (keyPress "") {
circle._x++;
on (keyPress "") {
circle._x—-;
on (keyPress "") {
circle._y--;
on (keyPress "") {
circle. _у++;
} }
Клавиши не очень удобно использовать в ситуациях, требующих быстрых и плавных движений. В таких случаях при помощи кодового объекта Key вы сможете проверить, нажата ли кнопка. Если для проверки нажатия клавиши используется кнопка, при удерживании клавиши пользователем действие будет повторяться. Это происходит потому, что большинство компьютеров запрограммировано на повторение при удерживании клавиши. Время между первым и вторым нажатием одной и той же кнопки, а также между последовательным нажатием разных кнопок определяется параметрами настройки клавиатуры системы пользователя. В играх, где пользователь может удерживать кнопку для повторения действия, не следует полагаться на функциональные возможности клавиатуры. Лучше применять функцию Key. isDown (), которая рассматривается в данном разделе.
Функция Key. isDown () позволяет проверить состояние клавиши. Например, чтобы проверить, нажата ли клавиша "r", используется следующий код: if (Key.isDown("г") ) {
circle._x++;
}
Исходный файл: Keyisdown.fla
Такой код не может и не должен быть назначен кнопке. Он должен быть назначен клипу "actions", в данном случае в файле Keyisdown.fla. Код находится внутри программы обработки onClipEvent (enterFrame), поэтому проверка происходит в каждом кадре. Код проверяет нажатие клавиш с изображением стрелок, которые обозначаются специальными константами наподобие Key.RIGHT. onClipEvent(enterFrame) {
if (Key.isDown(Key.RIGHT)) {
_root.circle._x++;
}
if (Key.isDown(Key.LEFT) {
_root.circle._x--;
}
if (Key.isDown(Key.UP)) {
_root.circle._y--;
}
if (Key.isDown(Key.DOWN) {
_root. circle._y++;
}
}
При запуске данного ролика вы обнаружите, что движения круга стали более плавными. Значение частоты смены кадров было увеличено до 120 кадр/сек, максимального количества, которое может обработать компьютер.
Итак, когда же отдать предпочтение кнопке, отзывающейся на нажатие клавиши, а когда объекту Key? Если нажатие клавиши необходимо только для активации события, используйте кнопку. Она будет реагировать на нажатие клавиши в 100% случаев. Функция Key.isDown() отреагирует на нажатие клавиши, только если она вызвана. Поэтому, если пользователь нажмет и тут же отпустит кнопку, нажатие может быть пропущено. Это часто происходит на медленных компьютерах.
Функцию Key.isDown() лучше использовать для контроля движения. В данном случае плавное движение будет продолжаться на протяжении всего времени удерживания клавиши. Функция может воспринимать одновременное нажатие нескольких клавиш, в то время как кнопка реагирует только на нажатие одной клавиши.

Воспроизведение звука

Урок 24. Воспроизведение звука

Завершая вводную часть нашего учебника по ActionScript, рассмотрим использование звука. Flash может воспроизводить звуки, помещая их временную шкалу ролика или клипа. Вы также можете запускать воспроизведение звука при помощи команд ActionScript.
Запуск звука из библиотеки представляет собой несколько более сложную процедуру, чем просто вызов одной команды. Прежде всего, необ холимо убедиться, что звук включен в конечный swf-файл. Это можно сделать в диалоговом окне Symbol Linkage Properties. Сам процесс был, рассмотрен на уроке 20 "Управление несколькими клипами". В данной случае предположим, что звук связан с именем "beep".
Воспроизведение звука задается при помощи нескольких строк кода. Сначала надо создать объект типа Sound. Затем объекту необходимо сообщить что "beep" - это звук, который должен воспроизводиться. Потом следует запустить звук. Вот как будет выглядеть код внутри сценария кнопки: on (press) {
mySound = new Sound();
mySound.attachSound("beep");
mySound.start();
}
Функция start, которая используется со звуками, может включать два параметра. Первый - это задержка времени в секундах перед началом воспроизведения звука. В случае, если вы хотите пропустить первые три секунды, значение параметра будет 3. При обычном воспроизведении устанавливается 0. Вторым аргументом является количество циклов звука. Для воспроизведения 10 звуковых сигналов подряд используется значение 10.
Существует множество возможностей настройки звука. Наиболее важной из них является регулирование громкости. Если звук слишком громкий, вы можете изменить код ActionScript, а не переделывать звук. I
Для настройки громкости, значение которой варьируется от 0 до 100, используется функция setvolume. Ниже приведен тот же самый код, но с уменьшенным вполовину значением громкости: on (press) {
mySound = new Sound();
mySound.attachSound("beep");
mySound.setVolume(50);
mySound.start();
}
Стоит также отметить функцию set Pan, которая может принимать значение от -100 до 100. Она позволяет контролировать баланс для стереозвуков, при этом -100 соответствует левой колонке, 100 - правой. При воспроизведении в режиме моно звук из одной колонки будет сильнее, чем из другой. Ниже приведен сценарий, задающий воспроизведение звука только из левой колонки: on (press) {
mySound = new Sound();
mySound.attachSound("beep");
mySound.setPan(-100);
mySound.setVolume(100);
mySound.start();
}
Неудобно лишь то, что когда задается громкость или баланс, их значения остаются неизменными и при воспроизведении следующего звука. Поэтому данные параметры необходимо каждый раз настраивать заново. В противном случае новый звук будет воспроизводиться с настройками предыдущего. Исходный файл: Sound.fla
Ролик Sound.fla содержит четыре кнопки. Большая кнопка в центре отвечает за обычное воспроизведение звука. Большие кнопки слева и справа предназначены для воспроизведения звука только из левой или из правой колонки. Маленькая кнопка в центре воспроизводит звук с громкостью 50%.
Вы узнаете больше о звуках в разделе "Музыкальный автомат" главы 6 "Игрушки и безделушки", а также в разделе "Музыкальный микшер" главы 7 "Игрушки-конструкторы".
На этом мы закончили изучение основ ActionScript. В следующей главе вы узнаете о таких приемах программирования, как планирование, отладка и тестирование. Затем, начиная с главы 5 "Создание визуальных эффектов", мы начнем рассматривать примеры программ.

В панели Properties можно присвоить

Рисунок 3.1 В панели Properties можно присвоить имя копии клипа Вы наверняка заметили, что копия клипа имеет такое же имя, как и клип в библиотеке. Обычно это делается при создании одной копии клипа. Имя копии легче запомнить, если оно совпадает с именем объекта библиотеки.
Библиотека ролика, рассматриваемого в примере, также содержит пять кнопок. Они помешены на рабочее поле под копией клипа. Присваивать имена копиям кнопок необязательно, впрочем, вы и не сможете этого сделать. В любом случае код не может ссылаться на кнопку, поэтому в имени нет необходимости.

После добавления клипа и пяти кнопок рабочее поле будет иметь при мерно такой вид, как показано на Рисунок 3.2. Кнопки не только выглядят, но и используются как кнопки управления видеомагнитофоном.

Создание Flash игр -практические уроки

Анализ задачи

Анализ задачи

Важно осознать, что если задача кажется слишком большой, чтобы с ней справиться, по-видимому, она таковой и является. Разбейте ее на более мелкие задачи, и вы найдете решение.

Достоинства

Достоинства

Flash имеет множество преимуществ над другими средами разработки игр. Несмотря на то, что программирование на языках низкого уровня, типа C++ или Java, более эффективно, оно не способно превзойти Flash в следующих областях: • быстрая разработка - Flash позволяет создавать игры от начала до конца всего за несколько дней или даже часов;
• мультимедиа - Flash дает возможность импортировать и использовать различные типы графических изображений и звуковые форматы. Вы можете сотрудничать с художниками и звуковыми дизайнерами, не заботясь о необходимости конвертации файлов или каком-либо их изменении для использования в игре;
• простота использования - Flash очень прост в использовании. Такие функции как "drag and drop", меню команд ActionScript, панели и диалоговые окна позволяют быстро добавлять и изменять элементы и тратить минимум времени на утомительные процедуры;
• подача результатов вашей работы - несомненно, самым большим преимуществом Hash является способ подачи результатов вашей работы. Благодаря Flash-плагину для браузеров она может быть представлена на Web-странице для просмотра всеми желающими. Кроме того, вы можете создавать автономные проекты (просто отдельные swf-файлы), которые могут быть просмотрены практически на любом компьютере Мае или PC. Более важно осознать недостатки, а не достоинства Flash. Вы не сможете создать очередной Quake или Age of Empires. С другой стороны, ваша игра будет иметь более широкую аудиторию и возможность более легкого распространения, чем эти крупнобюджетные игры.

Flash и игры

Flash и игры

Изначально программа Flash предназначалась не для создания игр, а для подготовки анимаций и интерфейсов Web-сайтов. Возможность создания настоящих игр во Flash появилась только с введением ActionScript.

Фон

Фон

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

Глобальные и локальные переменные

Глобальные и локальные переменные

Имейте в виду, что если перед первым использованием переменной в функции не стоит ключевое слово var, то переменная является глобальной. В случае использования аналогичного имени переменной в другом месте функции ее значение может заменить значение предыдущей переменной. Допустим, вы используете переменную i в цикле for, а затем внутри данного цикла вызываете другую функцию, которая использует переменную i для своего цикла for. В таком случае значения переменных будут наложены друг на друга, и для того чтобы избежать этого, используйте разные имена переменных или синтаксическую структуру var.
Вы узнали много об ActionScript из глав 2 и 3, а также об общих приемах программирования из данной главы. Теперь вы готовы перейти к главе 5 "Создание дизайнерских эффектов при помоши ActionScript" и далее, к более сложным примерам программ на ActionScript.

Имена клипов

Имена клипов

Каждый клип, расположенный на рабочем поле, имеет два имени. Имя под которым он включен в библиотеку, не имеет никакого значения вашего кода. В отличие от него имя экземпляра клипа на рабочем поле является крайне важным. Часто разработчики вообще забывают присвоить имена экземплярам клипа.

Изменение графики

Изменение графики

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

Изменение игр рассматриваемых в данной главе

Изменение игр, рассматриваемых в данной главе

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

Изменение кода ActionScript

Изменение кода ActionScript

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

Элементы игры

Элементы игры

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

Недостатки

Недостатки

Конечно, Flash не является идеальной средой для разработки игр. Ниже приведены причины, усложняющие программирование игр: • построение вокруг временной шкалы - Flash-ролики представляют собой последовательность кадров на временной шкале. Хотя Flash является идеальной средой для создания анимаций, структура игр противоречит прямолинейному движению по временной шкале от кадра к кадру;
• медленная работа - по сравнению со своим старшим братом, Macromedia Director, Flash недопустимо медленная программа для разработчиков. Это ограничивает применение Flash для создания парных игр и игр-аркад с небольшим количеством простых элементов;
• двумерность - Flash не предусматривает создания трехмерной графики, а большинство игр сейчас использует именно 3D-rpaфику. Хотя некоторые программы способны импортировать 3D. графику во Flash, фактически результат все равно содержит лишь плоские изображения, прорисованные с трехмерных фигур. В настоящее время 3D является общепринятым графическим стандартом для игр. Тем не менее данный стандарт не распространяется на сетевые игры, которые обычно создаются с помощью Flash;
• ограниченный набор свойств - предположим, вы хотите добавить в игру какую-либо функцию и обнаружили, что Flash не может ее обработать. Если бы вы составляли программу на языке программирования более низкого уровня, например C++ или Java, у вас была бы возможность добавить эту новую функцию. Однако Flash - это Flash. Только Macromedia может включать новые функции во Flash. Это значит, что при создании игры необходимо идти на компромисс, особенно если ваша игра выходит за пределы возможностей Flash.

Нижнее подчеркивание

Нижнее подчеркивание

Небольшой ошибкой является пропуск нижнего подчеркивания (_) перед большинством встроенных параметрово Flash. Допустим, у вас есть клип под названием "myMovieClip". Тогда myMovieClip._x будет обозначать его горизонтальное положение, но myMovieClip.х - просто переменную х внутри клипа "myMovieClip".

Объединение игр

Объединение игр

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

Окно загрузки

Окно загрузки

Ролики Flash загружаются в браузер пользователя потоком. Это значит, что их воспроизведение начинается только после загрузки первой части ролика и с таким расчетом, что ко времени начала воспроизведения второй части он уже будет полностью загружен. Все происходит aтоматически, хотите вы этого или нет.

Автоматическая загрузка данных хороша для анимации, но не всегда для игр. В большинстве случаев ActionScript контролирует появление элементов на рабочем поле и не контролирует анимационную временную шкалу. Flash недостаточно умная программа, чтобы понимать, какие элементы вам нужны в первую очередь, и часто не загружает их во время передачи данных.
По этой причине в играх следует избегать автоматической загрузки. Лучше сделайте первый кадр или сцену ролика окном загрузки. Окно загрузки отображает сообщение для пользователя и не переходит дальше, пока не будет загружен весь ролик. Это предоставляет вам полный контроль над элементами, которые видит пользователь и не ставит вас в зависимость от того, какие элементы загружены, а какие нет.
Более подробно о создании окон загрузки рассказано в главе "Сложные приемы" .

Окно завершения игры

Окно завершения игры

Очень часто конец игры оформляется в виде специального окна. В некоторых играх в случае выигрыша загружается одно окно, в случае проигрыша - другое. Необязательно игры заканчиваются выигрышем или, проигрышем, некоторые из них завершаются в случае, если игрок истратил все боеприпасы, жизни или время. Иногда окно завершения игры отображает список игроков, набравших самое большое количество очков, и дает игроку возможность внести свое имя в данный список. Создание списка победителей рассматривается в главе "Сложные приемы".

Отладка

Отладка

Всем программистам приходится отлаживать создаваемые ими программы. Невозможно добиться безупречной работы программы при ее первом запуске. Хороший специалист должен уметь отлаживать программу.
Помимо использования отладчика ActionScript, отладку можно производить различными способами. При пробном воспроизведении ролика в окне Output могут появляться сообщения об ошибках. Иногда этого достаточно, чтобы вы поняли, в каком месте кода у вас проблемы.
Информация о программе может также размещаться в окне Output при помоши команды trace. Она поможет вам отследить определенные моменты программы и значение некоторых переменных в эти моменты.
Если же вы хотите воспользоваться программой отладки, советуем вам изучить соответствующую информацию в руководстве по Flash MX. Программа отладки является простым инструментом, позволяющим отображать значения переменных во время воспроизведения Flash-ролика. Однако она не в состоянии творить чудеса; программа отладки может только помочь вам разобраться в собственном проекте.

Правила программирования

Правила программирования

Во время изучения программирования следует придерживаться некоторых правил, которые помогут облегчить вашу работу. Эти правил выполняют программисты всего мира, использующие все языки программирования: • комментарии - следует приобрести привычку добавлять к коду комментарии. Даже строки, кажущиеся ясными в данный момет могут стать непонятными, если вы вернетесь к ним через месяц;
• имена переменных - используйте имена переменных, отражюшие их назначение. Они дополнят комментарии и помогут понять код, когда вы вернетесь к нему позднее;
• имена функций - все вышесказанное относится и к именам функций. Они должны описывать выполняемые ими действия;
• чем короче, тем лучше - во Flash нет ограничения на длину функции. Тем не менее, если вы напишите функцию длиной в 100 строк, позднее вам будет непросто ее редактировать. Лучше разбить функцию на задачи и поместить каждую задачу в отдельную функцию;
• включайте в код многократно используемые функции - во время программирования не забудьте подумать о том, как можно применить ту или иную функцию к схожей или аналогичной задач другой части вашей программы. Допустим, вам необходима функция, добавляющая одно очко к счету игрока. Постарайтесь использовать в ней параметр , позволяющий добавлять к счету не только одно, но и любое другое количество очков;
• старайтесь обходиться без жесткого кодирования - под жестким кодированием подразумевается включение в ваш код конкретных чисел. Допустим, для описания правой стороны рабочего поля в вашем коде используется значение 550, оно будет жестко закодировано в программу. Если вы решите расширить рабочее поле ас 600 пикселов, вам придется изменять каждое употребление значения 550 в коде. Лучше в самом начале задать переменной под названием screenRightSide значение 550 и использовать эту переменную на протяжении всей программы;
• хорошая организация - хороший программист, несомненно, должен уметь организовывать различные элементы программы. На-пример, функции следует помешать не в разные кадры, а в один кадр вашего ролика. Кроме этого, старайтесь сгруппировать функции согласно выполняемым ими задачам.

Правила

Правила

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

Программирование

Программирование

Не думайте, что изучив главу "Введение в ActionScript" и главу "Элементы ActionScript" для создания игр", вы уже научились программировать. Существует разница между умением создавать код на ActionScript и опытом программирования.
Большинству людей программирование дается трудно, мне легко. Но у меня научная степень по вычислительной технике и я занимаюсь программированием уже 18 лет. Не имея аналогичного опыта, не следует ожидать быстрых результатов.
Вот некоторые принципы, руководствуясь которыми, вы сможете научиться программировать. Как и любой навык, программирование требует времени для изучения. Вы обнаружите, что чем больше вы программируете, тем легче оно вам дается.

Распространенные ошибки

Распространенные ошибки

Независимо от того, изменяете ли вы игру или создаете свою собственную, время от времени вы будете сталкиваться с ошибками. Обычно это несерьезные ошибки, которые легко обнаружить и исправить. Вот некоторые ошибки, с которыми я столкнулся при создании игр во Flash.

Splice и Slice

Splice и Slice

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

Свойства связи

Свойства связи

Если для создания копий эталона используется команда attachMovie, необходимо выполнить соответствующие настройки в диалоговом окне Symbol Lynkage Properties, в том числе присвоить ему имя. Таким образом, присвоить клипу имя можно тремя способами: в библиотеке, в копии клипа на рабочем поле, а также в диалоговом окне Symbol Linkage Properties.

Тестирование

Тестирование

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

Титульное окно

Титульное окно

Титульное окно представляет собой красочную заставку, представляющую игру пользователю. Иногда я позволяю своим иллюстраторам вволю поэкспериментировать, чтобы создать действительно эффектную заставку.
Вспомните старые игровые автоматы 80-х. Хотя графика самой игры могла отображаться большими пикселами, автомат обычно был оформлен детально и красочно. Это один способ представления статичных элементов титульного окна.
Другой способ - расположить часть графических изображений и клипов игры вокруг названия. Используя для заставки графику из игры, вы сможете избежать увеличения размера файла игры.

Уровни клипа

Уровни клипа

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

Вопросы авторских прав

Вопросы авторских прав

Теперь, зная основы ActionScript, вы планируете заново создать вашу любимую игру 80-х, я прав? А вы когда-нибудь задумывались о том, что она может охраняться авторским правом?
Разместив что-либо на своем Web-сайте или сайте вашей компании, вы становитесь издателем. В издательском деле принято защищать свою работу от копирования. Если вы воссоздадите существующую игру и разместите ее на Web-сайте, на вас могут подать в суд за нарушение закоь об авторских правах.
К вопросу авторских прав разные компании относятся по-разному. Некоторые заявляют о своих правах даже на идеи популярных жанров компьютерных игр. Другие компании не беспокоятся о том, что их игры копируются и даже имеют в точности такие же названия, как и оригиналы.
Если вы считаете, что ваша игра похожа на одну из ранее опубликованных, проконсультируйтесь с юристом. Судя по моему опыту, юристы дают один из двух советов. Они могут объяснить вам, что это непростой вопрос, и вы должны быть осторожны. Вряд ли этот совет принесет пользу. Другим советом будет не рисковать и вообще не публиковат игру. Здесь есть здравый смысл, поскольку вы спрашиваете юриста о том, как избежать проблем, и он советует вам, как это сделать. Тем не менее данный совет не решит вашей проблемы в случае, если вы собираетесь создавать игры.
Первым делом необходимо ознакомиться с игрой, которую вы собираете создавать. Например, разработчиком игры "Othello" является производитель игрушек, которому наверняка не понравится, если вы создадите под тем же названием. Однако игра "Reversy" - это та же игра. "Reversy" считается игрой старого образца, наподобие "Chess" или "Checkers", Вопрос с другими играми более очевиден: "Scabble" запрещено копировать,если у вас нет разрешения владельца. "Backgammon" может свободно распространяться и копироваться. Другое дело - игра "Yahtzee", принадлежашая компании Milton Bradley, хотя ей предшествуют аналогичные игры "Poker Dice Yacht", считающиеся эталоном.
Задача данного раздела - поставить вас в известность о существовании подобной проблемы. Тем не менее, я не могу предложить другого выхода, кроме обращения к юристу. Имейте в виду, что игры, рассматриваемые в данной книге, предназначены для использования в этом и других вариантах на вашем Web-сайте и в других проектах. Все эти игры являются общими концепциями, наподобие головоломок.

Создание Flash игр -практические уроки

Четыре кадра анимаиии созданной при помощи ActionScript

Рисунок 5.7 Четыре кадра анимаиии, созданной при помощи ActionScript



Посмотрите ролик Textfly.fla. Обратите внимание, где располагаются сценарии и как организован ролик в целом.

Добавление ребер Восемь точек

Во Flash динамические линии создаются на основе библиотечного эталона, содержащего простую линию. Линия начинается в центре клипа и тянется вправо и вниз. Она простирается ровно на 100 пикселов по горизонтали и по вертикали. В панели Properties необходимо установить толщину линии как hairline. На Рисунок 5.11 изображено основное окно Flash, которое содержит такую линию. Обратите внимание, что шаг сетки составляет 50x50 пикселов.

Другие возможности Конечно вы

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

Другие возможности

Другие возможности

Значения параметров _хscale и _yscale не обязательно должны быть равны. Вы можете изменить только один из них, чтобы получить другой эффект. Вы также не обязаны придерживаться приводимых в книге значений. Кнопка может увеличиваться до большего или меньшего размера. Немного изменив код, вы можете заставить кнопки пульсировать. Для этого необходимо задать возвращение значения переменной newscale к 100 сразу после того, как кнопка достигнет максимального размера. В результате при наведении курсора кнопка будет мгновенно увеличиваться и сразу же уменьшаться.

Другие возможности

Другие возможности

Изменив оператор += на -= в последней строке кода, вы заставите спираль вращаться в обратном направлении. Вы можете также изменить способ смены цветов, изменив значения красной, зеленой и синей составляющих.

Другие возможности

Другие возможности

Вы можете поместить на экран дополнительные пятна, скопировав клип пятна и убедившись, что ему назначен аналогичный сценарий. На экране может быть столько пятен, сколько вы хотите.
На экране также может быть две и более царапины. Различные части вашей анимации могут содержать различное количество царапин и пятен в зависимости от того, лучшего или худшего качества пленку вы хотите сымитировать.

Другие возможности

Другие возможности

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

Другие возможности

Другие возможности

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

Если поместить курсор мыши над кнопкой она увеличивается

Рисунок 5.1 Если поместить курсор мыши над кнопкой, она увеличивается



Взглянув на рисунок, можно подумать, что когда на кнопку наводится курсор, она изменяет свой размер внезапно. Однако увеличение кнопки происходит не в одно мгновение, а постепенно, создавая приятный визуальный эффект. Посмотреть, как это выглядит, можно загрузив ролик Expandingbuttons.fla .

Эффект старого кино создается

Рисунок 5.6 Эффект старого кино создается при помощи линии и двух точек, помещаемых поверх обычной FIash-анимации


Пятна на изображении представляют собой два постоянно перемещающихся клипа. В основном они используют те же приемы, что и ролик со случайными координатами, который уже рассматривался. Мы также добавим в сценарий вероятность случайного появления. Как и в предыдущем сценарии, она будет составлять от 0% до 100%. onClipEvent(load) {
chanceOfAppearing = 10;
chance = 0;
onClipEvent(enterFrame) {
chance++;
if (Random(chanceOfAppearing) < chance) {
this._x = Randon(550);
this._y = Random (400);
chance = 0;
} else {
this._x =- 100;
}
}
При запуске клипа вероятность появления случайного пятна на рабочем поле составляет один шанс из десяти. Если этого не происходит, в следуюший раз будет два шанса из десяти. Так шанс возрастает до появления пятна.

Эффект трехмерности

Эффект трехмерности

Исходные файлы: 3d.fla, 3dcubepoints.fla, 3dcube.fla, 3dspaceship.fla
Другим часто применяемым специальным эффектом Flash является моделирование небольшого трехмерного объекта. Некоторые разработчики говорят, что Flash не позволяет создавать настоящую трехмерную графику, но это не может сделать ни одна компьютерная программа поскольку компьютерные мониторы двумерные.
Вся компьютерная трехмерная графика - это всего лишь иллюзия. Хотя Flash и ActionScript не могут похвастаться большими возможностями для создания трехмерных объектов, с их помощью нетрудно создать некоторые специальные эффекты. Используя законы тригонометрии, вы можете преобразовать трехмерные координаты в двумерные на экране и смоделировать простые объекты наподобие куба.

К сведению

К сведению

Частота смены кадров ролика определяет скорость вращения спирали и смены цветов. Максимальная частота во Flash MX -120 кадр/с. Однако следует иметь в виду, что частота смены кадров напрямую зависит от быстродействия компьютера.

К сведению

К сведению

И пятна и линию лучше поместить справа, за пределами рабочего поля, чтобы их не было видно при запуске ролика. Затем они будут периодически появляться в случайных местах.
Убедитесь в том, что сценарии находятся на своих местах. При воссоздании ролика не стоит полностью полагаться на текст данной книги. В вашем распоряжении имеются примеры. Поскольку ролик состоит из различных элементов, таких как копии клипов, местоположение сценария и имена объектов, рекомендуем вам вначале подготовить ролик на основе примера , и только после этого создавать его самостоятельно с самого начала.
После выполнения данного упражнения у вас должно получиться несколько клипов и сценариев ActionScript, которые вы можете помещать в любую Flash-анимацию, чтобы создать эффект старого кино.

К сведению

К сведению

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

К сведению

К сведению

Меняя параметр speed, вы можете изменять длину "хвоста". Значение этой переменной также влияет на скорость исполнения ролика, так как если значение speed маленькое, например 1, то программе приходится одновременно управлять сотней клипов. Другие возможности

Клип простой линии используется

Рисунок 5.11 Клип простой линии используется для создания динамических линий на рабочем поле


У куба 12 граней, следовательно, вам необходимо 12 линий. Вместо того чтобы задавать координаты х, у и z обоих концов каждой линии, вы можете использовать две точки, уже имеющиеся в массиве points. Каждая линия имеет два параметра: p1 и р2. // Создаем массив из 12 линий для граней куба,
function makeLinesO {
lines = new Array ();
lines[0] = {pi: 0, p2: 1};
lines[1] = {pi: 1, p2: 2};
lines[2] = {pi: 2, p2: 3};
lines[3] = {pi: 3, p2: 0};
lines[4] = {pi: 4, p2: 5};
lines[5] = {pi: 5, p2: 6};
lines [6] = {pi: 6, p2: 7};
lines[7] = {pi: 7, p2: 4};
iines[8] = {pi: 0, p2: 5};
lines[9] = {pi: 1, p2: 6};
lines [10] = {pi: 2, p2: 7J} ;
lines [11] = {pi: 3, p2: 4J];
for(i=0;i attachMovie("line","1ine"+i,50+i)
}
}
Вышеописанная функция создает 12 клипов. Каждый клип получает имя linex, где х - номер линии в массиве lines.
Чтобы динамически нарисовать во Flash линию, надо задать положение клипа, который ее содержит, в первой точке, затем измененить масштаб клипа и определить положение конца линии во второй точке. Так как начало линии находится в центре клипа, в первой точке задается ее верхний левый угол. Масштаб определяет протяженность линии по горизонтали и вертикали, поэтому, задав его значение равным разнице координат х и у начальной и конечной точек, вы разместите линию нужным образом.
К примеру, если вы хотите, чтобы ваша линия начиналась в точке с координатами (50,80) и заканчивалась в точке с координатами (170,210), то надо задать первую точку, присвоив переменным _х и _Y значения 50 80 соответственно. Затем вы должны вычислить разницу координат по горизонтали: 170 - 50 = 120. Разница координат по вертикали будет следующей: 210 - 80 = 130. Задав значения переменных _xscale и _yscale равными 120 и 130 соответственно, вы получите линию с начальными координатами (50,80) и конечными координатами (170,210). // Рисуем грани куба,
function drawLines() {
for(i-0;i loci = plotPoint(points[lines[i].pi]);
Ioc2 = plotPoint(points[lines[i].p2]);
this["line"+ij._x = locl.x;
this [ "line"+i] ._y = locl.y;
this["line"+i]._xscale = loc2.x-locl.x;
this["line"+i]._yscale = loc2.y-locl.y;
this["line"+i]._alpha = loc1.z+100;
}
}
Важно, чтобы высота и ширина клипа линии была равна 100 пикселам. Тогда масштаб 100% будет соответствовать 100 пикселам по ширине и высоте, 200% - 200 пикселам и т. а. Параметр толщины линии должен быть определен как "hairline", чтобы масштабирование не оказывало никакого влияния на ее толщину. Линия любой другой толщины, например 1, изменит свой масштаб соответственно изменению переменных _xscale и _yscale.
Все, что осталось сделать для того, чтобы к кубу были добавлены грани, - это задать вызов функции makeLines при запуске ролика, а также функцию drawLines из функции reposition. На Рисунок 5.12 показан полученный результат. Весь ролик вы можете увидеть, запустив файл 3Dcube.fla.

На диаграмме показано расположение

Рисунок 5.2 На диаграмме показано расположение двух сценариев ActionScript относительно главной временной шкалы, клипа и кнопки


Сценарий клипа начинается с того, что значение переменной newscale задается равным 100. Затем при каждом обращении к кадру сценарий сравнивает эту переменную со значением _xscale клипа Если же они не совпадают, параметр _xscale изменяется на 10 единиц ближе к значению переменной newscale. Параметр _yscale изменяется соответственно. onClipEvent(load) {
// Начальный размер кнопки 100%.
newscale =100;
onClipEvent(enterFrame) {
if (this._xscale > newscale) {
// Уменьшаем значения параметров.
this._xscale -= 10; this._yscale -= 10;
} else if (this._xscale < newscale) {
// Увеличиваем значения параметров.
this,_xscale += 10;
this._yscale += 10;
}
}
Обработчик OnClipEvent используется в сценариях клипов. Он устроен аналогично обработчику on() для кнопки, но может реагировать на события, происходящие не только в данном клипе, но и во всем ролике. Событие enterFrame возникает каждый раз при переходе к новому кадру или возврате в начало цикла. Событие mouseDown происходит при каждом нажатии кнопки мыши, даже если курсор не находится над заданным клипом. Кроме того, описание onClipEvent реагирует на события load, unload, mouseMove, mouseup, keyDown, keyUp и data.
При запуске ролика значение переменной newscale равно 100, параметр _xscale также равен 100. Во время события enterFrame ничего не происходит. Затем, когда пользователь помешает курсор над клипом, а следовательно, и над кнопкой внутри клипа, сценарий кнопки изменяет значение переменной newscale на 150.
При запуске события enterFrame значения параметров _xscale и _yscale будут меньше, чем значение переменной newscale. В результате масштаб увеличивается на 10. Кнопка начинает увеличиваться. Когда значение достигает 150, увеличение заканчивается, а значения newscale и _xscale еше раз становятся равными. Аналогичный процесс возникает, когда пользователь снимает курсор с кнопки и переменная newscale возврашается к значению 100. Свойства клипа _xscale и _yscale соответствуют размеру клипа по вертикали и горизонтали. Значение 100 обозначает, что размер соответствует исходному размеру копии эталона клипа. Вы можете изменять данные параметры с помощью ActionScript, тем самым растягивая или сжимая клип. При использовании отрицательного значения клип будет зеркально отражен по горизонтали или вертикали.
Для того чтобы завершить создание панели с кнопками, необходимо скопировать клип несколько раз. Внутри каждого клипа измените сценарий on (release), чтобы он выполнял какое-нибудь другое действие, например переход к другой странице. Следует также изменить текст в клипа, чтобы кнопки выглядели так, как это изображено на Рисунок 5.1.
Все клипы содержат копию одного и того же сценария ActionScript. плохо, поскольку любое изменение сценария повлечет за собой необходимость внесения таких же изменений в сценарии всех остальных кнопок.В результате в библиотеке окажется столько же клипов, сколько и кнопок, однако на самом деле вам необходима всего одна. Каждой кнопке каждого клипа будет назначен свой сценарий, в то время как каждый клип на главной временной шкале будет содержать копию одного и того сценария. Вместо того чтобы копировать, а затем вставлять один и тот же сценарий во все кнопки, вы можете использовать команду #include, которая позволяет при компиляции кода считывать сценарий из внешних файлов. При изменении сценария внешнего файла все кнопки соответственно изменят свой сценарий. Тем не менее, вам все же придется скопировать и вставить команду #include в каждую копию клипа.

Объект Color

Объект Color

Объект Color предназначен для изменения цветов клипа. Его можно представить как набор функций, позволяющих узнавать и управлять цветами клипа.
Сначала надо создать объект Color, связанный с клипом, который вы собираетесь изменять. Это можно сделать следующим образом: myColorObject = new Color("myMovieClipName");
Объекты наподобие Color построены по образу телевизионного пульта управления. Клип можно представить как телевизор, а объект Color как особый пульт управления, предназначенный для настройки цветовых параметров изображения. Методы объекта Color используются аналогично кнопкам пульта управления.
Существует два способа определения и изменения цветового объекта. Первый - это непосредственно определить цвет при помощи двух строк кода. Сначала создайте новый flash-ролик и поместите на рабочее noле один клип. Назовите копию клипа "myMovieClip". Затем поместите следующий сценарий в главную временную шкалу: myColorObject = new Color("myMovieClip");
trace(myColorObject.getRGB()).toString());
He забудьте o том, что существует различие между именем эталона клипа в библиотеке и именем конкретного экземпляра клипа на рабочем поле. ActionScript всегда ссылается на имя экземпляра клипа. Имя в библиотеке предназначено исключительно для организационных целей
Во время тестирования ролика автоматически откроется окно Output, в котором будет содержаться значение " 0". Это результат выполнения команды trace. Функция toString преобразует многие типы ActionScript, например числовые в строку текста. Она, например, удобна для преобразования цветов в числовые значения для вывода при помоши команды trace.
Более интересный результат.можно получить, изменяя цвет ролика. Чтобы это сделать, выделите клип и на панели Properties выберите в выпадающем кэшем меню Color пункт Advanced, после чего нажмите кнопку Settings. В появившемся окне Advanced Effect введите значение 128 в поля R,G и В. Введите значение 128 в поля R, G и В (Рисунок 5.3) в правой колонке. В левой колонке выставьте значение 0.

Оставляя копии клипа в позиции

Рисунок 5.9 Оставляя копии клипа в позиции, в которой только что находился курсор, можно создать след, тянущийся за курсором

Панель Advanced Effect предназначена

Рисунок 5.3 Панель Advanced Effect предназначена для изменения цвета клипа


Теперь при тестировании ролика в итоговое окно будет помешено значение 8421504, что соответствует значениям 128 полей R, G и В. Немного изменив функцию tostring, вы вместо десятичного значения получите шестнадцатеричное. Оно будет выглядеть как значение RGB, используемое дизайнерами для задания цветов. myColorObject = new Color("myMovieClip");
trace((myColorObject.getRGB()).toString(16));
Описание new позволяет создавать новые копии объектов наподобие объекта color. Оно также используется для создания новых массивов и ваших собственных объектных конструкций. Если на данном этапе оно не понятно, не беспокойтесь. Для того чтобы использовать описание new, полное понимание не требуется.
Результатом в данном случае является значение 808080, шестнадцатеричное число, представляющее собой средний серый цвет (красная,'зеленая и синяя составляющие, которые имеют значение 128, среднее между 0 и 255). Значение 16 в качестве параметра функции toString () задает преобразование числовых значений в шестнссшатеричные. Теперь, когда вы умеете получать RGB-значение цвета клипа, следующим шагом будет его изменение. Это можно сделать при помощи функции set RGB. Она имеет только один параметр: шестнадцатеричное значение, которое вы хотите использовать. Приведем пример с тем же роликом, но с несколько измененным кодом: myColorObject = new Color("myMovieClip");
myColorObject.setRGB(OxFFOOOO);
Сочетание Ox указывает, что за ним следует шестнадцатеричное число. Приведенное в коде число FF0000 соответствует красному цвету. При запуске цвет ролика изменится на красный независимо от исходного. Действие этих двух строк кода продемонстрировано в примере Color-change. fla

Перемещение букв

Перемещение букв

Исходный файл: Textfly.fla
Во многих Flash-роликах по экрану перемешается текст. Существует множество способов создания этого эффекта, некоторые из них проиллюстрированы примерами.

Подготовка ролика

Подготовка ролика

Ролик содержит несколько кнопок. Каждая кнопка представляет собой отдельный ролик с кнрпкой внутри. Из одного библиотечного эталона кнопки я создал пять разных клипов. В каждый клип поместил одну и ту же кнопку, но разный текст.
Кнопка может иметь любую форму и цвет. Я использовал классический стиль, поскольку хотел просто продемонстрировать работу сценария.

Подготовка ролика

Подготовка ролика

В данном ролике будет использоваться один элемент - спиральная фигура. Поместите его в центр рабочего поля. Начальный цвет спирали должен быть белым, а фоновый - черным. Ролик будет состоять из одного сценария, назначенного клипу с изобрел жением спирали. Переменная п, участвующая в сценарии, содержит способ изменения цвета. Значение цвета будет соответствовать числу из предыдущего списка. Так, например, если n будет равно 3, значение красной составляющей увеличится. Значение переменной п сначала равно 1, затем увеличивается до 6 и далее цикл повторяется. Ниже приведена часть кода с последовательностью if...then, которая использует значение переменной n и изменяет объект преобразования цвета. if (n == 1) {
colorTransform.rb -= 5;
if (colorTransform.rb ==0) n = 2;
} else if (n == 2) {
colorTransform.bb -= 5;
if (colorTransform.bb ==0) n = 3;
} else if (n == 3) {
colorTransform.rb += 5;
if (colorTransform.rb == 255) n = 4;
} else if (n == 4) {
colorTransform.gb -= 5;
if (colorTransform.gb == 0) n = 5;
} else if (n == 5) {
colorTransform.bb += 5;
if (colorTransform.bb == 255) n = 6;
} else if (n == 6) {
colorTransform.gb += 5;
if (colorTransform.gb == 255) n = 1;
}
Оператор += используется для прибавления к переменной определенного числа. Например, код n += 5 прибавляет 5 к значению n. тот код аналогичен коду n = n + 5. Оператор =- используется для вычитания определенного числа из переменной.
Значение переменной n проверяется в каждой части выражения if...then. В случае совпадения одна из трех цветовых составляющих объекта colorTransform изменяется. После окончания изменений, сама переменная п меняет свое значение на следующие. Полная профамма представляет собой обычный клип ActionScript с функциями onClipEvent (load) и onClipEvent (enterFrame). Первая вводит объекты цвета и преобразования, вторая выполняет постепенное изменение цветов. Кроме того, мы сделаем так, чтобы клип вращался. Вращение достигается постепенным увеличением значения параметра _rotation. onCIipEvent(1oad) {
// Создаем объект цвета и цветовой трансформации.
spiralColor = new Color(this);
colorTransform = {rb:255,bb:255, gb:255};
// Вначале п равно единице, n = 1;
onClipEvent(enterFrame) {
// Определяем, какую составляющую необходимо изменить,
if (n == 1) {
colorTransform.rb -= 5; if (colorTransform.rb ==0) n = 2;
} else if (n == 2) {
colorTransform.bb -= 5;
if (colorTransform. bb == 0) n = 3;
} else if (n == 3) {
colorTransform.rb += 5 ;
if (colorTransform. rb == 255) n = 4;
else if (n == 4) {
colorTransform.gb -= 5;
if (colorTransform. gb == 0) n = 5;
else if (n == 5) {
colorTransform.bb += 5;

if (colorTransform.bb == 255) n = 6; else if (n == 6) {
colorTransform.gb += 5;

if (colorTransform. gb == 255) n = 1; // Задаем новый цвет.
spiralColor.setTransform(colorTransform);
// Вращаем спираль.
this._rotation += 5;
}
Объект this обозначает обращение клипа к самому себе. Так как сценарий назначен клипу, использование this будет обозначать, что команда, следующая после this, относится к самому клипу, а не к другому клипу или ролику.
Параметр клипа _rotation используется для поворота клипа на определенное количество градусов. Он может иметь как положительные, так и отрицательные значения. Если вы укажете значение больше 360 градусов, Flash автоматически преобразует его. К примеру, при вводе значения 370 градусов клип будет повернут на 10 градусов.
Хотя этот же эффект можно получить и средствами классической анимации, ActionScript позволяет сделать это намного быстрее.

Подготовка ролика

Подготовка ролика

В качестве примера использования случайных чисел создадим один из популярных Flash-эффектов: сымитируем старую кинопленку. Обычно данный эффект достигается средствами анимации. Аниматор помещает небольшие точки и трещинки в различные кадры ролика, а также показывает линию, проходящую вдоль ролика и представляющую царапину на пленке.
Все эти эффекты легко создать в ActionScript. К примеру, царапину можно создать, поместив вдоль одной стороны ролика белую вертикальную линию.
Для того чтобы применить знания о случайных числах, вам прежде всего необходимо какое-нибудь исходное изображение, на которое будут накладываться царапины и пятна.
На Рисунок 5.5 показан фрагмент исходного ролика. В этом ролике пропеллер самолета вращается, а лиса моргает. Возможно, ваш ролик будет содержать больше анимации.

Подготовка ролика

Подготовка ролика

Ролик включает графическое изображение, расположенное в центре экрана и совершенно не зависящее от текстового эффекта. Внутри ролика находится один клип, содержащий букву "А". Клип был создан из небольшого текстового окна. В панели Properties ему было назначено свойство Dynamic Text и присвоено имя переменной letterText (Рисунок 5.8).

Подготовка ролика

Подготовка ролика

Создадим простой клип с кружочком внутри. Цвет и размер вы может выбрать по своему усмотрению. В нашем примере мы сделали темно-голубую окружность диаметром 20 пикселов. Клипу присвоено имя "Cursor Trail" (След курсора), в панели Linkage Properties выставлен флажок Export for ActionScript и присвоено имя связи CursorTrail.
Теперь создадим клип с надписью "Actions". Поместим его вне пределов рабочей области. Этот клип будет использоваться только как носитель кода, поэтому его содержание может быть любым. Вы можете даже не создавать внутри него никаких изображений или текста - тогда на экране он будет отображаться в виде маленького кружочка.

Подготовка ролика

Подготовка ролика

В описываемых ниже примерах используются только точки и линии. Создать точку легко, однако линия должна соответствовать определенным условиям. Подробное описание приводится ниже.

Подход

Подход

Каждая кнопка реагирует на наведение и снятие курсора. При наведении курсора на кнопку обработчик получит новое значение масштаба. Если в начальный момент времени масштаб клипа (с кнопкой внутри) составляет 100%, то новое значение будет, например, 150%.
С каждым кадром сценарий будет постепенно изменять текущий масштаб: от 100% до 150% с шагом 10%.
После того как пользователь уберет курсор с кнопки, эффект будет обратным. Новое значение будет равно 100%, и с каждым кадром кнопка будет уменьшаться на 10%, пока не достигнет этого значения.

Подход

Подход

Во Flash 5 существует два способа генерирования случайных чисел. Первый - включить в код функцию Random, которая была в четвертой версии программы. Эта функция выдает значение в диапазоне от 0 до значения,на единицу меньшего, чем аргумент. К примеру, функция Random (5) выдаст значение от 0 до 4.
Во Flash 5 появилась функция Math, random (). Возможно, что в следуюших версиях Flash функции Random уже не будет. Функщ Math.random() выдает число с плавающей запятой от 0,0 до 1,0.
Чтобы получить значение вне диапазона [0..1], результат функции Math. Random () можно умножить на какое-нибудь число. Например, умножение результата на 500 даст значение в диапазоне от 0,0 до 500,0. Функция int округляет результат в меньшую сторону. Использование этой функции в нашем случае позволит получить целое значение в диапазоне от 0 до 499. Приведем пример: n = int(Math.random()*500);
Следующая короткая функция перемешает клип в случайное место экрана, имеющего размер 550x400. onClipEvent(load) {
this._x = Math.random()*550;
this._y = Math.random()*400;
}
Использование вышеприведенной функции демонстрируется в ролике Randomlocation.fla. Запустите файл несколько раз, чтобы убедиться, что ролик каждый раз перемещается в другое место экрана.
Следующим шагом является создание случайных чисел и их использование для периодичности внесения хаотичности в ролик. Нижеприведенный сценарий перемешает клип в случайном направлении. Переменные dx и dy принимают значения в интервале от -5 до 5 и задают величину изменения координат клипа _х и _у соответственно (фактически dx и dy определяют скорость перемещения клипа). Переменные dx и dy изменяют свои значения в случайные моменты времени. onClipEvent(load) {
dx = Math.random()*10-5;
dy = Math.random О*10-5;
}
onClipEvent(enterFrame) {
this._x += dx;
this._y += dy;
if (Math.random()> .
9){
dx = Math.random()* 10-5 ;
dy = Math.random 0*10-5;
}
}
Действие этого сценария демонстрируется в ролике Randommovement.fla. Эллипс перемещается по экрану случайным образом. Он даже может покинуть пределы рабочего поля, так как никаких ограничений в коде не задано.

Подход

Подход

Ролик создается следующим образом: текст делится на отдельные буквы каждая из которых представляет собой отдельный клип. Затем из случайных мест на экране эти клипы перемешаются в позиции, соответствующие исходному тексту.

Подход

Подход

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

Подход

Подход

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

Преобразование координат

Преобразование координат

Местоположение объектов на экране определяется двумя координатами: х и у. Объекты в трехмерном пространстве должны иметь три координаты: х, у и z. Последняя определяет глубину.
Для отображения объектов на рабочем поле необходима функция, преобразующая х, у и z в экранные координаты х и у. Кроме того, вы будете наклонять и вращать объекты. Поэтому функция преобразования должна учитывать базовые наклоны и вращение.
Учтите, что это самый сложный сценарий из тех, которые мы до сих пор рассматривали и, возможно, из всех сценариев данной книги.
Математическая функция Math.atan (arctg, арктангенс) используется для преобразования координат в угол, а функции Math.sin и Math.cos - для преобразования значения углов обратно в координаты. Таким o6разом, координаты точки преобразуются в угол и расстояние от центра плоскости. Затем точка поворачивается и вновь преобразуется в координаты. Данное действие выполняется один раз для вращения и один раз для наклона. В результате вы получите координаты х и у, которые можно использовать на экране компьютера.
Комментарии, содержащиеся в нижеприведенном коде, объясняют, какое действие выполняет каждая его часть. Затем приводятся пошаговые объяснения. // Переводим трехмерные координаты в координаты на экране
// (делаем проекцию).
function plotPoint(object) {
(1) //Берем координаты объекта.
х = object.x;
у = object.у
z = object.z;
(2) // Вычисляем расстояние от центра, radius = Math.sqrt (x*x+y*y);
(3) // Вычисляем первый угол.
if (х == 0) angle = Math.atan(1000000);
else angle = Math.atan(y/x);
if (x < 0) angle += Math.PI;
(4) // Поворачиваем объект,
angle += rotation;

(5) // Вычисляем новые координаты,
realx = radius*Math.cos(angle);
realz = radius*Math.sin(angle);
realy = z;
(6) // Определяем новое расстояние от центра,
radius = Math.sqrt(realy*realy+realz*realz);
(7) // Вычисляем второй угол.
if (realz == 0) angle = Math.atan(1000000);
else angle = Math.atan(realy/realz);
if (realz < 0) angle += Math.PI;
(8) // Добавляем угол наклона сечения,
angle += plane;
(9) // Вычисляем координаты для экрана,
screenx = realx;
screeny = radius*Math.sin(angle);
screenz = radius*Math.cos(angle);
(10) // Центрируем положение объекта. screenx += 27 5; screeny += 200; (11) // Возвращаем новые координаты. return({х:screenx,y:screeny,z:screenz});
Интересно, что Flash распознает понятие бесконечности. Так, выражение Math.atan(1/0) будет вычислено с результатом 1,5707963267949, то есть Pi/2!
Функция Math.atan() преобразует линию в угол в радианах. Необходимо указать значение разницы между начальной и конечной точками линии по вертикали, разделенное на значение этой же разницы по горизонтали. Например, если значения координат начальной и конечной точек линии соответственно равны (200, 200) и (275, 250), то, . чтобы получить угол, необходимо записать Math, atan (75/50). Результатом будет значение .9828 радиан, что составляет примерно 56 градусов. В действительности функция Math.atan () немного сложнее, однако данный пример позволит вам создать общее представление о ней.
Опишем каждый шаг вышеприведенного кода: (1) Задаются координаты х, у и z объекта.
(2) Вычисляется расстояние на плоскости ху от центра координат до проекции объекта на плоскость.
(3) Определяется угол на плоскости ху.
(4) Значение угла увеличивается на величину поворота объекта.
(5) Задаются новые координаты х, у и z с учетом изменения угла.
(6) Задается расстояние от центра координат до объекта на плоскости yz.
(7) Определяется угол на плоскости yz.
(8) Задается наклон плоскости.
(9) Задаются новые координаты х, у и z с учетом наклона.
(10) Центр новых координат имеет значение 0. Для корректировки к ним прибавляется действительное значение центра экрана (в данном случае (275, 200)).
(11)Теперь координаты х и у могут использоваться для отображает объекта на экране. С помощью координаты z можно также снизить яркость объектов, которые должны казаться расположеными дальше от пользователя.
Функция plotPoint преобразует точки с трехмерными координатами в точки с двумерными координатами при помощи ортогональной проекции. Это означает, что перспектива здесь не используется, и объекты находящиеся на дальнем плане, не уменьшаются. Это подходит для моделирования небольших объектов и специальных эффектов, но не годится для создания больших трехмерных сцен.

Простой анимационный ролик использующий

Рисунок 5.5 Простой анимационный ролик, использующий случайные пятна и царапины для создания эффекта старого кино



Помимо фонового изображения вам понадобятся клипы пятен и царапин для размещения поверх ролика. В примере Oldfilm.fla царапин представляет собой простую вертикальную линию внутри клипа. Пятно это небольшой овал внутри другого клипа.

След от курсора

След от курсора

Исходный файл: Cursortrail.fla
Рассмотрим спецэффект, создание которого невозможно без использования ActionScript. В нашем примере, когда пользователь перемещает мышь, за курсором остается характерный шлейф, состоящий из тающих копий изображения, привязанного к курсору.
На Рисунок 5.9 можно увидеть пример этого эффекта. Каждая из окружностей показывает предыдущую позицию курсора. Чем раньше создана окружность, тем она меньше и светлее.

Случайность и эффект старого кино

Случайность и эффект старого кино

Исходные файлы: Randomlocation.fla, Randommovement.fla, Oldfilm.fla
Используя Flash исключительно в качестве инструмента анимации, можно добиться поразительных эффектов, но каждый раз анимация будет воспроизводиться одинаково. ActionScript имеет алгоритм выбора случайных чисел, благодаря чему в содержание ролика можно вносить элемент некой непредсказуемости.

Создание кода

Создание кода

В ролике используется два типа сценариев: назначенные кнопкам и назначенные клипам. Первый тип сценария назначен кнопке, находящейся в клипе. Сценарий, назначенный кнопке, реагирует на события мыши, происходящие именно с этой кнопкой. Такие сценарии - обработчики событий - мы уже рассматривали в уроке 6 главы 2, они реагируют на различные события и в случае кнопки задаются конструкцией on () { ... }.
Сценарий кнопки включает три различных обработчика, двумя из которых являются on (rollover) и on (rollout). Они устанавливают значение переменной newscale равным новому масштабу для увеличения или уменьшения кнопки.
Ниже приведен сценарий для кнопки "Home". on (rollover) {
// Задаем новый размер для увеличения,
newscale = 150;
} on (rollout) {
// Задаем новый размер для уменьшения.
newscale = 100;
}
on (release) {
// Код, исполняемый при нажатии на кнопку.
trace("Home");
}
С помощью конструкции on в сценарии кнопок вводятся фрагменты кода, выполняемые после определенных событий. Такими событиями могут быть press, release, releaseOutside, rollover, dragOver, dragOut и keypress.
Каждый из трех обработчиков в вышеприведенном листинге содержит строку кода, выполняемого после определенного события кнопки, пример, когда пользователь нажимает и отпускает кнопку, выполняет команда trace. При этом слово "Home" помешается в окно Output.
На самом деле в таких случаях обычно используется команда getURl которая сообшает браузеру, что нужно перейти к новой странице. Команда trace приведена здесь только в качестве примера.
Переменная newscale является индивидуально задаваемой переменной и используется для хранения значения задаваемого масштаба клипа. Когда пользователь наводит курсор мыши на кнопку, ее размер увеличивается 150%. Когда он убирает курсор с кнопки, размер возврашается к 100%
Сценарий клипа помешается на один уровень выше, чем сценарий кнопки. На диаграмме (Рисунок 5.2) изображена главная временная шкала, клип содержащий кнопку, а также два сценария.

Создание кода

Создание кода

Сначала напишем код для царапины. Поместите копию клипа царапины на рабочее поле и назначьте ему следующий сценарий: onClipEvent(load) {
wanderAmount = 300;
leftLimit = 10;
rightLimit = 540;
chanceOfJump = 50;
xPosition = 275;
speed = 10;
chanceOfChange = 0;
}
onClipEvent(enterFrame) {
xPosition += speed;
this._x = xPosition;
chanceOfChange++; if ((Math.random()*wanderAmount < chanceOfChange)
or (xPosition < leftLimit) or (xPosition > rightLimit)) {
speed = -speed;
chanceOfChange = 0;
}
if (Math.random()*chanceOfJump == 1) {
xPosition = Math.random()*(rightLimit-leftLimit)+leftLimit;
}
}
При вычислении результата математических функций с числами Flash осуществляет операции в следующем порядке: умножение и деление 8 выполняются перед сложением и вычитанием. К примеру, 2x3+4 будет равно 10. Лля изменения порядка выполнения операций необходимо использовать скобки. Например, 2х(3+4) будет равно 14.
Первая часть сценария вводит некоторые переменные. Переменные leftLimit и rightLimit описывают границы линии по горизонтали. Код не позволит ей выйти за пределы этих значений. Переменная speed определяет, насколько перемещается линия в каждом кадре. Остальные переменные задают изменения анимации.
В каждом цикле кадра горизонтальная позиция, xPosition, клипа изменяется с помощью переменной speed. Она задает перемещение клипа на 10 пикселов влево или вправо. Переменная chanceOf change увеличивается и о пределяет вероятность изменения. В случае, если переменная равна 1, существует один шанс из 300 (около 0,33%), что изменение произойдет в данный момент. К тому времени, когда переменная chanceOf Change примет значение 150, вероятность изменения составит 150 из 300 или 50%. Это хороший способ управления каким-либо событием, при котором оно происходит не слишком часто и не слишком редко. С помощью переменной chanceOf Change создается иллюзия случайности.
В данном случае "изменение" обозначает смену направления. Оно осуществляется путем изменения положительного значения переменной speed на отрицательное или наоборот. Изменение также происходит, если линия достигает правой или левой горизонтальной границы.
Другой вид изменения определяется переменной chanceOf Jump и представляет собой перемещение линии в совершенно другое место. Настоящие царапины на пленке появляются в разных местах, и такое перемещение делает ролик более реалистичным.

Создание кода

Создание кода

В процессе выполнения программы из одного клипа создается несколько его экземпляров. В каждом новом цикле при помощи функции duplitcateMovieClip создается новый экземпляр клипа для каждой из букв. После создания каждого экземпляра в него вводятся переменные еndx и endy, задающие окончательную позицию букв в анимации. Значение переменной endy соответствует позиции _у клипа Letter0, значение переменной endx увеличивается слева направо.
Сценарий создает новые копии клипа для букв начиная с той, которая идет под номером 1. Первая буква (она имеет номер 0) использует существующий клип Letter0. text = "Introducing: Flashy the Fox!";
for (i=0;i if (i > 0) duplicateMovieClip("Letter0","letter"+i,i);
this["letter"+i].letterText = text.charAt(i);
this["letter"+i].endx = this["Letter0"]._x + i*19;
this["letter"+i].endy = this["Letter0"]._y;
}
Функция charAt выбирает из строки букву, расположенную в определенной позиции. Первый символ строки имеет номер 0. Для того чтобы выделить подстроку, используйте функцию substr.
Команда for позволяет создать небольшой цикл. Код внутри цикла выполняется заданное количество раз. Первый параметр после команды for используется для задания переменной. Второй параметр необходим для проверки, которая осуществляется перед каждым циклом и определяет, надо ли его продолжать. Третьим и последним параметром является команда, выполняемая в каждом цикле. Например, строка for (i=0; i< text.length; i++) обозначает, что переменная i начиная со значения 0 увеличивается на единицу в каждом цикле, и цикл будет продолжаться до тех пор, пока значение i меньше числа символов в тексте
Число 19 в конце пятой строки обозначает, что расстояние между буквами составляет 19 пикселов. Это значение устанавливается в зависимости от используемого вами типа и размера шрифта. При создании данного эффекта лучше использовать моноширинный шрифт, в котором все буквы имеют одинаковую ширину, например Monaco, Courier и Courier New. В противном случае такие буквы, как "w" и "l", могут значительно отличаться по ширине. Использование шрифтов с различной шириной букв в рассматриваемом коде может привести к "склеиванию" символов.
Другой частью ролика является программа ActionScript, назначенная клипу Letter0. При загрузке клип помешается в случайную позицию в верхней части экрана и в каждом кадре постепенно перемешаете к своей окончательной позиции.
Каждый раз при копировании клипа Letter0 сценарий, назначенный ему, также копируется. Поэтому каждая копия клипа включает копию одного и того же кода.
Первая часть сценария задает случайное значение для переменных startх и starty, которые определяют начальное положение клипа в верхней части рабочего поля. Затем эти значения присваиваются соответствующим координатам клипа. Помните, что переменные endx и endy были заданы сценарием главной временной шкалы при создании клипов. Таким образом, у клипов теперь есть случайное начальное расположение, описываемое переменными startx и starty, а также фиксированное конечное положение, заданное переменными endx и endy.
Значение переменной п изменяется от 0 до 100 с шагом 5, показывая, на сколько процентов выполнено перемещение буквы. Значение 0 соответствует 0% по отношению к конечной точке и 100% по отношению к начальной. Для значения 5 это составляет 5% и 95% соответственно. С каждым шагом буква приближается к цели на 5%. Значение местоположения обновляется, если переменная имеет значение меньшее или равное 100% onClipEvent(load) {
startx = Math.random()*550;
starty = -Math.random()*100;
this._x = startx;
this._y = starty;
n = 0;
}
onClipEvent(enterFrame) {
n += 5;
if (n <= 100) {
this._x = endx*n/100 + startx*(100-n)/100;
this._y = endy*n/100 + starty*(100-n)/100;
}
}

Создание кода

Создание кода

Наш "actions"-клип содержит два обработчика onClipEvent. Первый включается в начале ролика и создает пустой массив, чтобы содержать ссылки на клипы, образующие хвост. Он также устанавливает счетчику trailNum значение ноль. Эта переменная содержит значение номера следующего клипа, который вы создадите.
Переменная speed определяет как быстро клипы, составляющие "хвост", будут уменьшаться в размерах и таять. On ClipEvent(load) {
// Создаем массив,
trail = new Array();
trailNum = 0;
// Меньшее значение переменной соответствует меньшей
// скорости.
speed = 2;
}
Следующий обработчик начинается с создания экземпляра клипа. Каждому клипу присваивается уникальное имя вида cursor trail + trailNum Переменная trailNum используется также для определения уровня очередного клипа. On ClipEvent(enterFrame) {
// Создаем очередной клип.
var mc=_root.attachMovie("cursor trail","cursor trail" + trailNum,trailNum);
}
Созданный клип помешаем в текущую позицию курсора. //Устанавливаем позицию.
mc._x = _root._xmouse;
mс._у = _root._ymouse,
Указатель на новый клип добавляется в массив trail. Затем значение trailNum увеличивается на единицу. // Добавляем указатель в массив. trail.push(mc);
trailNum++;
С помощью цикла в остальной части кода происходит обращение ко всем клипам массива trail. Размер и прозрачность каждого клипа изменяются на величину speed. Когда свойство _alpha текущего клипа становится меньше либо равно нулю, этот клип удаляется из массива и ролика в целом. // Обращаемся к существующим клипам,
for (var i=trail.lenght-1; i>=0; i--) {
// Уменьшаем свойства _alpha и размер клипа,
trail[i]._alpha -= speed;
trail[i]._xscale -= speed;
trail[i]._yscale -= speed;
// Удаляем клип, когда он становится невидимым,
if (trail[i]._alpha // Удаляем указатель из массива.
trail.splice(0, 1);
// Удаляем клип.
trail [i]. RemoveMovieClip();
}
}
}
Обратите внимание, что массив сканируется от конца к началу. Это сделано потому, что из массива время от времени удаляются элементы, бы массив сканировался от начала к концу, то при удалении элемента возникала бы путаница в порядке следования элементов. Например, если удалить первый элемент, то первым элементом станет второй. Тогда на следующем шаге цикла произойдет обращение к следующему за вторь элементу, то есть к третьему. Таким образом, второй элемент массу окажется пропущенным.

Создание кода

Создание кода

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

Спираль изменяет цвет и вращается

Рисунок 5.4 Спираль изменяет цвет и вращается

Трансформация цветов

Трансформация цветов

Более универсальным способом изменения цвета является использование метода setTransform() объекта Color. Аргументом метода set-Transform является объект, содержащий восемь параметров цвета. Параметры rb, gb и bb задают относительное смещение в процентах (от -100% до 100%) для красной, зеленой и синей составляющих цвета соответственно. Параметры rb, gb и bb задают абсолютное (от -255 до 255) значение цветов. Последние два параметра - аа и ab определяют значение свойства _alpha (прозрачность) клипа. На Рисунок 5.3 изображены все шесть составляющих, плюс два значения преобразующих альфа-канал (прозрачность изображения). Объект преобразования цвета может содержать различные значения каждой из восьми составляющих. Эти значения задаются путем создания новой переменной-объекта. Приведем пример: myColourTransform = {rb:255, bb:0, gb:0};
Данный объект задает изменение цвета любого цветового объекта на красный. Он включает три параметра: абсолютные значения красного, зеленого и синего цветов. Кроме того, вы можете задавать относительное смешение при помоши параметров rа, gа и bа. Имея объект преобразования цвета и цветовой объект, можно изменять цвет клипа. Следующие три строки изменят цвет клипа на красный: myColor'= new Color("myMovieClip");
myColorTransform = (rb:255, bb:0, gb:0);
myColor.setTransform(myColorTransform);
В данном примере выполняется то же действие, что и в предыдущем, но другим способом. Преимущество функции setTransform над функцией setRGB состоит в большем контроле над значениями цветов. Например, числа, задаюшие цвет, могут быть переменными ActionScript, а не жестко закодированными числовыми значениями. Кроме того, эти значения могут периодически изменяться, тем самым периодически изменяя цвет объекта. Следующий клип изменяет значение красного цвета клипа от 0 до 255. В результате клип начинается с изображения черного эллипса, который затем постепенно меняет свой цвет на красный. Для создания цветового объекта и объекта трансформации цвета используется событие load. Там же создается переменная n. Следующее за ним событие enterFrame используется для преобразования цвета, применения преобразования к клипу и увеличения значения переменной n. onClipEvent(load) {
myColor = new Color(this);
myColorTransform = {rb:255, bb:0, gb:0};
n = 0;
onClipEvent(enterFrame) {
myColorTransform.rb = n;
myColor.setTransform(myColorTransform);
n++;
}
Оператор ++ увеличивает значение переменной на единицу. Таким образом, если значение n равно 7, то строка n++ увеличивает его до 8. Для уменьшения значения используется оператор --.
В данном примере значение переменной n, описывающей красный цвет, изменяется от 0 до 255. При достижении максимального значения 255 цвет больше не меняется. Применение сценария демонстрируется в ролике Gradualtransform.fla. Вся эта информация о цветах и преобразовании может использоваться для создания специальных эффектов. Давайте попробуем сделать что-нибудь более интересное. Возьмем основной пример данного раздела и сделаем так, чтобы клип по очереди изменял свой цвет на один из цветов радуги. Для этого необходимо изменить красную, зеленую и синюю составляющие. Здесь будет использоваться та же самая функция setTransform, однако алгоритм изменения значений по сравнению с предыдущим примером будет более сложным. В качестве исходного для красного, зеленого и синего цветов берется значение 255, которое изменяется следующим образом:
1. Значение красного цвета уменьшается до 0.
2. Значение синего цвета уменьшается до 0.
3. Значение красного цвета увеличивается до 255.
4. Значение зеленого цвета уменьшается до 0.
5. Значение синего цвета увеличивается до 255.
6. Значение зеленого цвета увеличивается до 255.
При этом цвета белый, циан (cyan), зеленый, желтый, красный, фуксин (magenta), белый будут плавно превращаться из одного в другой в указанной последовательности. В ней участвуют все цвета, кроме чистогo синего. Так мы создадим изменяющую цвет спираль.

Трехмерный куб представленный

Рисунок 5.10 Трехмерный куб, представленный восемью точками на экран

Трехмерный куб состоящий из точек и пиний Другие возможности

Рисунок 5.12 Трехмерный куб, состоящий из точек и пиний

Углы куба

Углы куба

Теперь приступим к созданию восьми вершин куба. Данные о каждой вершине будем хранить в объекте со свойствами х, у и z. Весь список объектов хранится в массиве. // Создаем массив из 8 точек для вершин куба,
function makePoints() {
points = new Array();
points[0] = {x: 30, y: 30, z: 30};
points[1] = {x: -30, y: 30, z: 30};
points[2] = {x: -30, y: -30, z: 30};
points[3] = {x: 30, y: -30, z: 30};
points[4] = {x: 30, y: -30, z: -30};
points[5] = {x: 30, y: 30, z: -30};
points[6] = {x: -30, y: 30, z: -30};
points[7] = {x: -30, y: -30, z: -30};
// Создаем восемь клипов для вершин куба,
for(i=0;i attachMovie( "point", "point"+i, i )
}
}
Данная функция создает восемь клипов из эталона, хранящегося в библиотеке. Имя каждого клипа состоит из слова "point" и числа от 0 до 7. Число соответствует точке массива, которую представляет клип. Команда attachMovie создает новый клип из эталона, хранящегося в библиотеке. Однако для того, чтобы его можно было воспроизвести во Flash player или на Web-странице, необходимо назначить ему свойство Export for ActionScript. Это можно сделать, выбрав команду Options -> Linkage в окне Library. Вы также должны назначить клипу идентификатор. В данном случае назовем его "point".
Кроме точек и функции, преобразующей их координаты в экранное представление, необходимо ввести небольшую функцию, которая бы соединяла линиями полученные точки. Помимо параметров_х и_у каждой точки клипа, задается также параметр _alpha, описывающий уменьшение яркости точек по мере их удаления вглубь экрана. // Устанавливаем координаты точек и их яркость на экране,
function drawPoints() {
for(i=0;i loc = plotPoint(points[i]);
this["point"+i]._x = loc.x;
this["point"+i]._y = loc.y;
this["point"+i]._alpha = loc.z+100;
}
}
Все вышеупомянутые функции должны помешаться в главную временную шкалу. Следующие строки вводят модель и подготавливают переменную rotation. // Вызываем функцию инициализации и останавливаем
// воспроизведение ролика в этом кадре,
rotation = 0;
makePoints();
stop();

Теперь остается только обратиться к функции drawPoints. Обращение выполняется в небольшой функции reposition. Она изменяет переменную rotation в зависимости от положения курсора в правой или левой части экрана. Функция также задает переменную plane исходя из положения курсора по вертикали. Затем функция вызывает функцию drawPoints для задания текущей позиции каждой точки. // Изменяем позицию куба в каждом кадре,
function reposition () {
rotation += (275-_xmouse)/1000;
plane =- (200-_ymouse)/100;
drawPoints();
}
Функция reposition вызывается в каждом кадре из клипа, который находится за пределами рабочего поля и предназначен для запуска данной части кода при каждом его повторе. onClipEvent(enterFrame) {
_root.reposition ( );
}
Создание ролика практически завершено. Восемь точек на экране составляют куб, который вращается и поворачивается в зависимости от того, как пользователь перемешает мышь. Ролик можно посмотреть в 3dcubepoints.fla. Фрагмент этой анимации. изображен на Рисунок 5.10.

Увеличение кнопок

Увеличение кнопок

Исходный файл: Expandingbuttons.fla
Многие сайты используют Flash для навигации от страницы к странице. Даже простой Flash-ролик с одной кнопкой может значительно оживить статическую Web-страницу. При помощи ActionScript вы сможете сделал эти кнопки анимированными.

В панели Properties вы можете

Рисунок 5.8 В панели Properties вы можете назначить текстовой области свойство Dynamic Text и присвоить ей имя переменной



Затем текстовое поле преобразуется в клип при помощи команды Insert -> Convert To Symbol. Копия эталона получает имя letter0 и помешается в то место, где находится первая буква фразы, в данном случае в нижний левый угол.

Вращающаяся и изменяющая цвета

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

В начальный момент каждый кружок

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

к ним курсор мыши, не

Задача проекта

Задача проекта - создать кнопки, которые в случае, если подвести к ним курсор мыши, не меняют цвет, а увеличиваются и затем, когда курсор убран, возвращаются к нормальному размеру. На Рисунок 5.1 изображенс пять подобных кнопок, курсор расположен над второй из них.

научиться использовать случайные числа для

Задача проекта

Задача данного раздела - научиться использовать случайные числа для создания визуальных эффектов. Возможно, вы захотите создать "эффект старого кино", когда на изображении кое-где появляются царапины и точки.

В данном разделе рассказано, как

Задача проекта

В данном разделе рассказано, как создать ролик, где текстовая фраза разделяется на отдельные буквы, каждая из которых помешается в случайное место экрана. Затем эти буквы перемешаются по экрану и, соединяясь, вновь образуют исходную фразу.
На Рисунок 5.7 изображены четыре кадра из ролика. Буквы спускаются сверху и выстраиваются в нужном порядке в нижней части экрана.

В данном разделе вы научитесь

Задача проекта

В данном разделе вы научитесь преобразовывать координаты трехмерного пространства в двумерные экранные координаты. Затем вы примените эти знания для создания простого трехмерного куба, а потом и более сложного объекта. Пользователь сможет управлять этими моделями, чтобы убедиться в том, что они действительно являются трехмерными объектами, а не простыми двумерными изображениями.

Создание Flash игр -практические уроки

Аналоговые часы

Аналоговые часы

Исходный файл: Simpleclock.fla, Betterclock.fla
Одной из возможностей использования ActionScnpt является ние даты и текущего времени на компьютере пользователя. Это осуществляется благодаря объекту Date. Этот объект может использоваться различными способами, простейшим из них является создание анимированных аналоговых часов.

Часы показывают 1 час 45 минут и 10 секунд

Рисунок 6.10 Часы показывают 1 час 45 минут и 10 секунд



На рисунке не видно, что руки (и хвост) часов двигаются подобно стрелкам настоящих часов. Эти действия выполняются в три этапа. Вначале полученное значение текущего времени помешается в переменные hour, minute и second. Затем значения этих переменных преобразуются в значения углов. Далее полученные значения используются для задания параметра _rotation трех клипов, представляющих руки и хвост.

Диалоговое окно Symbol Linkage

Рисунок 6.8 Диалоговое окно Symbol Linkage Properties позволяет включать звуки в swf-файл, даже если их нет в главной временной шкале



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

Другие возможности

Другие возможности

В качестве стрелок часов вы можете использовать любой объект. Это могут быть простые линии или созданное вами изображение. Вы также можете украсить часы числами или фоновыми рисунками.
Еще одной интересной возможностью будет создание часов, стрелки которых двигаются в обратном направлении. Такие часы можно иногда встретить в магазинах и ресторанах. Вы также можете добавить звук, который будет воспроизводиться каждый час или каждые 15 минут.

Другие возможности

Другие возможности

Изображение стекла было создано аналогично пузырькам. Благодаря применению свойства альфа-прозрачности сквозь него видны пузырьки Для того чтобы ролик вписывался в ваш сайт или проект, вы можете украсить его своим логотипом.

Другие возможности

Другие возможности

Дополнительно вы можете добавить в игру кнопки для загрузки каких-то уже существующих колоний. Это избавит вас от необходимости каждый раз создавать их заново.

Главная временная шкала содержит

Рисунок 6.2 Главная временная шкала содержит полную анимацию хрустального шара



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

Игра "Жизнь"

Игра "Жизнь"

Исходный файл: gameoflife.fla
Игра "Жизнь" известна как результат серьезных разработок в области искусственного интеллекта и одновременно как популярная игра. Она была изобретена математиком Джоном Конвэйем и приобрела известность благодаря опубликованной в 1970 году статье в журнале "Scientific American". Вскоре после этого игра стала чрезвычайно популярной среди программистов.
Выглядит все очень просто — в ячейки сетки на игровом поле помещается произвольный набор точек. На очередном шаге игры содержание каждой ячейки сетки подвергается преобразованиям согласно определенному набору правил. Если данная ячейка содержит точку и в прилегающих к ней ячейках находится две или три точки, то содержимое данной ячейки остается без изменений. Если в прилегающих ячейках содержится меньше двух точек, то точка в данной ячейке "умирает" от одиночества, а если больше трех, то точка "умирает" от тесноты. Если же данная ячейка пуста и в прилегающих ячейках содержится ровно три точки, то в данной ячейке "рождается" новая точка.
Вот и все правила, которые вам нужны. Результаты могут оказаться удивительными. Попробуйте запустить исходный файл. Создайте колонию точек подобно изображенным на Рисунок 6.15 и нажмите кнопку Run.

Использование объекта Date

Использование объекта Date

Объект Date можно представить как небольшой массив, содержащий некоторую информацию о текущем моменте времени. При создании объекта Date за основу берется текущее время, установленное на компьютере пользователя. Не стоит полагаться на точность времени, установленного на компьютере пользователя. Вы удивитесь тому, сколько людей имеют неточные часы. Тем не менее я обычно не задумываясь использую эти часы, особенно для игр. Если неправильно указано время отправки электронного письма, это может привести к проблемам, для flash-ролика точность времени не так важна.
Объект Date включает следующие элементы: число, месяц, год, часы, минуты и секунды. Для вывода любого из них необходимо использовать соответствуюшую функцию: getDate (). Приводимая ниже программа обработки содержит все функции, которые используются для получения информации из объекта Date: on (release) {
now = new Date();
trace("toString:" + now.toString());
trace("getDate:" + now.getDate());
trace("getDay:" + now.getDay());
trace("getFullYear:" + now.getFullYear());
trace("getHours:" + now.getHours());
trace("getMilliseconds:" + now.getMilliseconds());
trace("getMinutes:" + now.getMinutes());
trace("getMonth:" + now.getMonth());
trace(getSeconds:" + now.getSeconds());
trace("getTime:" + now.getTime());
trace("getTimezoneOffset:" + now.getTimezoneOffset ());
trace("getYear:" + now.getYear());
trace("getUTCDate:" + now.getUTCDate());
trace("getUTCDay:" + now.getUTCDay());
trace("getUTCFullYear:" + now.getUTCFullYear());
trace("getUTCHours:" + now.getUTCHoursO);
trace("getUTCMilliseconds:" + now.getUTCMilliseconds());
trace("getUTCMinutes:" + now.getUTCMinutes());
trace("getUTCMonth:" + now.getUTCMonth());
trace("getUTCSeconds:" + now.getUTCSeconds());

Следует обратить внимание на несколько моментов. Все функции UTC подразумевают, что система пользователя настроена на соответствующую временную зону. Для того чтобы получить всеобщее (по Гринвичу) время, необходимо добавить или вычесть определенное количество часов. Результатом выполнения функции getTime будет количество миллисекунд с 1 января 1970 года. Функция day обозначает день недели и задается числом от 0 до 6. Месяц представляет собой число от 0 до 11. Число выбирается из диапазона от 1 до 31. Возможно, все это трудно для понимания и запоминания, однако данные функции аналогичным образом задаются и в других языках программирования, например С и JavaScript.
Вот результат выполнения всех функций trace: toString:Sat Oct 14 18:47:06 GMT-0600 2000
getDate:14
getDay:6
getFullYear:2000
getHours:18
getMilliseconds:0
getMinutes:44
getMonth:9
getSeconds:7 getTime:971570647000
getTimezoneOffset: 360
getYear:100
getUTCDate:15
getUTCDay:0
getUTCFullYear:2000
getUTCHours:0
getUTCMilliseconds:0
getUTCMinutes:44
getUTCMonth:9
getUTCSeconds:7

Вы можете задать любой элемент объекта Date. Каждая функция, начинаюшаяся с get, имеет соответствующую ей функцию, начинающуюся с set. К примеру, для установки часа используется функция setHour (newHour) Имейте в виду, что это приведет к изменению только объекта Date, которому вы обратились, а не системных часов пользователя. При создании нового объекта Date время в нем будет установлено в соответствии системными часами.

К сведению В конце анимации вы

Другие возможности

Вы можете внести изменения в код списка ответов. Совсем необязательно придерживаться используемой в нашем примере модели "да/ нет/не знаю". Ваши вопросы и ответы могут касаться определенной темы, например, выиграет ли сегодня местная спортивная команда или какой будет погода.

К сведению

К сведению

Кроме рассмотренных функций в сценарии кадра имеется код, вызывающий функцию creatGrid, и команда stop (). Возможна также другая реализация. Дело в том, что игра нуждается в получении определенных данных для запуска. Ведь если вы нажмете кнопку Run при пустом игровом поле, то ничего не произойдет. Поиграйте с колонией, изображенной на рис 6.15. Ее называют "маленький взрыв". Программисты, впервые реализовавшие игру "Жизнь", придумали имена некоторым таким "цивилизациям".
Попробуйте создать свои колонии или поищите в Интернете уже существующие. Поиск по ключу "game of life" откроет вам множество страниц с самыми разнообразными конфигурациями.

Лавовая лампа

Лавовая лампа

Исходный файл: Lavalamp.fla
Этот ролик воссоздает классическую лавовую лампу. На компьютерах и в сети можно увидеть множество подобных объектов. Многие из них представляют собой простые Flash-анимации, создаваемые без написания кода.
Но в этом случае после окончания анимации узор повторяется, а интереснее сделать такую лавовую лампу, узор которой в каждый момент был бы разным.

Лиса ответит на ваш вопрос после

Рисунок 6.1 Лиса ответит на ваш вопрос : после того, как вы щелкните по хрустальному шар

Музыкальный автомат воспроизводит

Рисунок 6.9 Музыкальный автомат воспроизводит песню под номером 2

Музыкальный автомат

Музыкальный автомат

Исходный файл: Jukebox.fla
Добавление звука в Web-страницу никогда не было простой задачей. Оно осуществляется при помоши либо малопонятных тэгов HTML, либо одного из множества встраиваемых модулей, ни один из которых не является стандартным. Работая во Flash, вы можете возложить на программу всю обработку звука.

Объект "лавовая лампа " состоит

Рисунок 6.13 Объект "лавовая лампа " состоит из дна, крышки, внутренней части из прозрачного стекла и красных пузырьков

Подготовка ролика Создание ролика

Создание кода

Lava Lamp использует 20 экземпляров клипа, созданных из одного библиотечного эталона. С помощью команды attachMovie копии клипа добавляются в ролик. Более подробно о команде attachMovie рассказано в главе 5, раздел "Эффект трехмерности".

При запуске ролика в первом и единственном кадре временной шкалы выполняется функция initLamp. При этом помимо 20 клипов пузырьков будет создан массив объектов, которые определяют скорость движения каждого пузырька.
Кроме того, верхняя и нижняя части лампы будут непрозрачными, из-за чего здесь пузырьки не будут видны. Поверх клипов пузырьков будет помешено изображение полупрозрачного стекла.
При использовании команд attachMovie или duplicateMovieClip необходимо указать уровень нового клипа. Уровень определяет порядок перекрывания клипов. Все новые клипы будут помешены перед существующими. Это значит, что пузырьки будут располагаться перед изображениями верхней, нижней и прозрачной частей лавовой лампы. С помощью команды duplicateMovieClip вы можете создать новые копии этих трех изображений, которые будут помешены поверх пузырьков.
Приведем код функции initLamp: function initLamp () {
// Инициализируем переменные, обозначающие верхнюю и нижнюю
// координаты лавовой лампы по оси Y.
top = 0;
bottom = 300;
// Создаем экземпляры клипа, содержащего пузырек.
numBubbles = 20;
for (i=0; i attachMovie("bubble", "Bubble"+i, i);
}

// Дублируем изображения стекла, низа и верха лампы, чтобы // они оказались над пузырьками.
duplicateMovieClip("Glass", "Glass", i + +);
duplicateMovieClip("Top", "Top", i++);
duplicateMovieClip("Bottom", "Bottom", i++);
// Создаем объекты, содержащие значение скорости пузырьков.
bubbles = new Array();
for (i=0; i bubbles[i] = {speed:0};
}
}
После того как все элементы подготовлены, воспроизведение ролика осуществляется по следующему принципу: время от времени вызывается функция, которая обновляет местоположение пузырьков и создает новые. Клип, расположенный за пределами рабочего поля, вызывает функцию moveBubbles в каждом событии enter Frame.
Функция moveBubbles задает перемещение пузырьков вверх или вниз и их остановку в верхней или нижней части ролика, а также в одном случае из 30 вызывает функцию newBubble для создания нового пузырька. Небольшие объекты можно создавать при помоши обычных скобок как видно из последней строки функции initLamp: bubbles [1]= {speed:0}. К содержанию таких объектов можно затем обратиться при помощи точечного синтаксиса: bubbles [0]. speed. При этом ваш код станет более разборчивым, а элемент переменной или массива, сможет состоять из нескольких частей. Например, вы можете записать строку myobject = {speed: б, weight: 40, clipname: "clip1"}, а затем для получения значений использовать синтаксис myObject.speed. Такой объект аналогичен структуре из языков высокого уровня, например С или Pascal.
// Перемещаем пузырьки,
function moveBubbles () {
for (i=0; i // Узнаем текущую координату.
у = _root["Bubble"+i]._y;
// Останавливаемся, если достигнута нижняя граница
// объекта "лампа".
if bubbles[i].speed = 0;
// Останавливаемся, если достигнута верхняя граница
// объекта.
} else if ((bubbles[i].speed < 0) and (y < top)) {
bubbles[i].speed = 0;
// Продолжаем перемещать пузырьки.
} else {
// Перемещаем.
_root["Bubble"+i]._y = y+bubbles[i].speed;
// Изменяем размеры пузырька.
height = _root [ "Bubble" + i] ._yscale;
width = _root["Bubble"+i]._xscale;
if (height > width) height -= 1;
_root["Bubble"+i]._yscale = height;
// Создаем новый пузырек с вероятностью 1/30.
if (Math.random()*30 newBubble();
}
}
Функция newBubble проверяет массив bubbles на наличие неиспользуемых мест для пузырьков. Затем она создает пузырек в нижней или верхней части лампы. Размер пузырька задается случайным числом. Его длина в три раза больше, чем ширина. По мере перемещения пузырька эта разница постепенно исчезает. function newBubble () {
for (i=0; i // Находим пустое место для пузырька,
if (bubbles[i].speed == 0) {
// Создаем пузырек в верхней части лампы.
if (Math.random() < .5) {
bubbles [i].speed = 1 ;
_root["Bubblen+i]._y = -40;
// Создаем пузырек в нижней части лампы.
} else {
bubbles[i].speed = -1 ;
_root ["Bubble"+i ]._y = 340;
}
// Устанавливаем размер пузырька.
size = 40+ Math, random ()*40;
_root["Bubble"+i]._xscale = size;
_root["Bubble"+i]._yscale = size*3;
_root["Bubble"+i]._x = 10+Math. random ()*80;
// Готово.
break;}
}
}
Три вышеприведенные функции составляют основу ролика Lava Lamp который вы можете просмотреть, запустив файл Lavalamp.fla

Подготовка ролика В дополнение

Подготовка ролика В дополнение к четырем кнопкам (рис 6.15) необходимо создать клип-ячейку. Назовем этот клип "gridbox". Он не должен изначально находиться на рабочем поле, но ему надо присвоить имя в панели Linkage Properties, чтобы можно было создавать его копии с помощью ActionScript.
Клип "gridbox" должен содержать два кадра - один с точкой, а второй - в виде пустой ячейки. Первому кадру назначьте сценарий с командой stop (). В отдельный слой клипа поместите кнопку, чтобы пользователь мог кликать по ячейке.
Наконец, создайте клип "actions", который будет содержать обращение к основной функции нашего кода. Создание кода

Первая функция создает сетку из 25x15 ячеек и двумерный массив, Каждая строка массива представляет собой столбец (одномерный массив) булевых переменных. Таким образом, для доступа к верхнему левому элементу сетки надо написать grid[0][0], а для доступа к пятому элементу и седьмому сверху - grid[4] [6] (то есть центр координат находится в верхнем левом углу). function createGridO {
// Создаем клипы и заполняем массив,
grid = new Array();
for(y=0;y var temp = new ArrayO;
for(x=0; x me = attachMovie("gridbox", "gridbox "+x+" "+y,y*25+x);
mc._x = x*20+30;
mc._y = y*20+30;
mc.x = x; mc.у = у;
temp.push(false); }
grid.push(temp);
}
}

Функция cycle является центральным моментом нашей программы. Она используется для вычисления правил применительно к каждой ячеке. Обратите внимание, что мы дублируем массив grid. Это делается для того, чтобы при изменении значения какого-нибудь элемента массива grid это не повлияло на дальнейшие вычисления на данном шаге программы. Все вычисления происходят опираясь на значения элементов массива baseGrid.
function cycle() {
// Дублируем массив grid. var baseGrid = duplicateGrid();
// Делаем проход по всем ячейкам,
for(y=0;y for(x=0;x thisBox = baseGrid[y][x];
mc = this["gridbox "+x+" "+y];
// Вычисляем количество "заселенных" ячеек вокруг
// данной.
n = 0;
n += baseGrid[y-1][x-1];
n += baseGrid[y-1][x];
n += baseGrid[y-1][x+1];
n += baseGrid[y][x-1];
n += baseGrid[y][x+1];
n += baseGrid[y+1][x-1];
n += baseGrid[y+1][x];
n += baseGrid[y+1][x+1];
// Если в этой ячейке уже была точка и если количество
// "жильцов" вокруг равно 2 или 3, то точка остается, .
if (thisBox) {
if ((n == 2) or (n == 3)) {
newValue = true;
} else {
newValue = false;
}

// Новая точка "рождается", если ячейка была пуста
//и если в смежных ячейках находится ровно 3 точки.
} else {
if (n == 3) {
newValue = true;
} else {
newValue = false;
}
}
// Меняем текущий кадр клипа mc.
grid[y][x] = newValue;
if (newValue) {
mc.gotoAndStop(2);
} else {
mc.gotoAndStop(1);
}
}
}
}
Функция duplicateGrid() создает копию массива grid и возвращает ее в качестве своего значения. function duplicateGrid() {
var newGrid = new Array();
for(y=0;y var temp = new Array();
for(x=0;x temp.push(grid[y][x]);
}
newGrid.push(temp);
}
return(newGrid);
}
Да, но почему мы должны пользоваться функцией duplicateGrid(), вместо того чтобы просто приравнять массив baseGrid массиву grid? Потому что иначе у нас не было бы реальной копии массива. Вместо этого и grid и baseGrid ссылались бы на один и тоже массив и изменения в массиве grid появлялись бы и в массиве baseGrid.
Клип "actions" содержит обработчик onClipEvent (enterFrame), который вызывает функцию runCicle при каждом обращении к кадру. Эта функция проверяет глобальную переменную running и запускает сусle, если ее значение истинно (true). function runCycle() {
if (running) {
cycle();
}
}
Рассмотрим теперь сценарии кнопок. Каждая кнопка содержит обработчик вида on (release), который вызывает одну из следующих функций. Первая (кнопка Run) задает глобальной переменной running значение true. function startCycle() {
running = true;
}
Если же пользователь нажмет кнопку Step, то функция cycle будет вызвана лишь один раз и переменная running не изменит своего значения. function stepCycle() {
cycle();
}
При нажатии кнопки Stop переменной running присваивается значение false. function stopCycle() {
running = false;
}
И наконец, нажатие кнопки Clear очищает массив grid и все ячейки сетки function clear() {
for(y=0;y for(x=0;x grid[y][x] = 0;
this["gridbox "+x+" "+y].gotoAndStop(1);
}
}
running = false;
}
Осталось только рассмотреть код, который находится на кнопке внутри каждого клипа-ячейки. Этот сценарий определяет состояние ячейки. В функции creatGrid мы определили переменные х и у для каждого клипа. Это позволяет установить соответствие между ячейками и элементами массива и вносить изменения в массив при изменении состояния ячейки. on (release) {
if (_currentframe == 1) {
gotoAndStop(2);
_parent.grid[y][x] = true;
} else {
gotoAndStop(l);
_parent.grid[y][x] = false;
}
}

Подготовка ролика

Подготовка ролика

Сначала рассмотрим, как выполняется анимация. Ролик состоит из двух частей. Первая представляет собой статический кадр, который выглядит, как показано на Рисунок 6.1. Ролик будет запущен после щелчка по хрустальному шару.

Единственным необходимым элементом в этом ролике является команда stopO, помещаемая в любой слой. На Рисунок 6.2. показана главная временная шкала ролика. Строчная буква "а" в первом кадре второго слоя (слоя "Text") обозначает, что этому кадру назначен код ActionScript, в данном случае команда stop ().

Подготовка ролика

Подготовка ролика

После того как вы поместили 10 экземпляров клипа на рабочее поле и присвоите песням имена в первом кадре главной временной шкалы, осталось добавить звук.
Прежде всего, импортируем 10 песен в библиотеку ролика и присвоим им имена, начиная с "song1" и заканчивая "song10". После импорта каждого звукового файла необходимо изменить его свойство связи таким образом, чтобы он был включен в создаваемый .swf-файл. Для каждой песни требуется создать идентификатор и поставить флажок напротив свойства Export for ActionScript. Соответствующее диалоговое окно показано на Рисунок 6.8. Его можно вызвать из меню Options окна Library.

Подготовка ролика

Подготовка ролика

При помоши объекта Date можно создать интересные часы. Переводя значения часов, минут и секунд текущего времени в градусы, вы можете задать параметр „rotation трех различных клипов таким образом, чтобы они двигались, как стрелки часов.
На Рисунок 6.10 показан внешний вид таких часов. Короткая рука обозначает часовую, длинная - минутную, а хвост - секундную стрелки.

Подход Создание подобного ролика

Наиболее простым способом будет создать одну кнопку и использовать ее 10 раз, один раз для каждой песни. Каждая кнопка будет представлять собой клип, содержащий одну и ту же кнопку. Таким образом, в библиотеке ролика окажется всего один клип и одна кнопка. Этот клип будет помешен на рабочее поле 10 раз, все его копии будут идентичны. Первое действие при запуске ролика - изменение текста каждой копии клипа. Это действие описывается при помощи следующего кода: // Задаем названия песен.
this["1"].text = "Song Name 1";
this["2"].text = "Song Name 2";
this["3"].text = "Song Name 3";
this["4"].text = "Song Name 4";
this["5"].text = "Song Name 5";
this["6"].text = "Song Name 6";
this["7"].text = "Song Name 7";
this["8"].text = "Song Name 8";
this["9"].text = "Song Name 9";
this["10"].text = "Song Name 10";
Для того чтобы упростить задачу, клипам присвоены имена от " 1" до "10". В результате выполнения вышеприведенного кода все копии клипа будут отображать разные названия песен. Поэтому, несмотря на то, что в библиотеке содержится один клип, все его копии будут выглядеть по-разному.
Более того, названия всех 10 песен будут включены в один сценарий Если бы каждый клип содержал, название одной песни, вам пришлось бы проделать немало работы, открывая и закрывая каждый из 10 клипов для внесения в него изменений. Данный сценарий дает возможность быстро изменить все названия песен.
Свести количество клипов к одному помогает и код, назначенный кнопке внутри клипа: on (release) {
_root.playSong (this._name);
}
Эта строка кода отправляет одно из имен клипа от "1" до "10" в функцию playSong, находящуюся на корневом уровне (уровне рабочего поля). Эта часть кода может выполняться в любом клипе, так как в каждом случае использует различное имя экземпляра клипа. Если при создании нового экземпляра клипа вы не забыли назначить ему новое имя, значение переменной this._name будет каждый раз иным.
Данный код позволяет использовать одну копию клипа необходимое число раз. В случае внесения в клип каких-либо графических или функциональных изменений вам придется сделать это всего единожды. Кроме того, конечный .swf-файл будет меньше файла, библиотека которого содержит 10 копий аналогичных клипов.

Подход

Подход

Прежде чем создавать часы, необходимо научиться работать с объектом Date. Именно он содержит текущее время, доступное для отображения

Подход

Подход

Для создания лавовой лампы, работающей по принципу случайности (Рисунок 6.13), необходимо использовать ActionScript. Вначале необходимо создать 20 клипов, представляющих пузырьки лавовой лампы. Затем надо задать постоянный вызов функции, перемещающей пузырьки вверх и вниз по экрану.

Подход

Подход

Ролик начинается с создания сетки, состоящей из клипов (ячеек). Также создается двумерный массив булевых переменных. Каждый элемент массива соответствует определенной ячейке и указывает, в каком кадре находится этот клип-ячейка ( то есть находится ли в данной ячейке "жилец").
Основная функция ролика просматривает все ячейки и вычисляет изменения в них. Выполнение этой функции представляет собой один шаг игры. Если пользователь нажимает кнопку Run, ролик выполняет эти шаги непрерывно. При выборе кнопки Step исполняется только один шаг.

Руки и хвост (то есть стрелки

Рисунок 6.11 Руки и хвост (то есть стрелки часов), направленные четко вверх, соответствуют 12:00:00. Когда вы зададите параметр _rotation, стрелки будут указывать в соответствующем направлении


Проблема состоит в том, что устройство будет работать не совсем как обычные часы. Например, на Рисунок 6.10 часовая стрелка указывает на 9 часов. Она будет продолжать указывать на отметку 9, даже когда будет 9:59, а затем в 10:00 сразу передвинется на отметку 10. В настоящих часах часовая стрелка будет в течение часа постепенно передвигаться, пока не достигнет отметки 10 в 10 часов. Для того чтобы получить такой результат, необходимо немного увеличивать угол часовой стрелки каждую минуту и угол минутной стрелки каждую секунду, Приведем соответствующий код: // Задаем угол поворота для минутной и секундной стрелки.
hourAngle += minute/2;
minuteAngle += second/10;
Минута делится на 2, что дает вам дополнительно 30° для поворота часовой стрелки каждый час. Секунда делится на 10, благодаря чему вы получаете 6 дополнительных градусов для промежуточных поворотов минутной стрелки. Выполним вычисления: в 9:59 угол будет составлять 9*30 + 59/2 = 270 + 29.5 = 299.5. В 10:00 угол составит 10*30 + 0/2 = 300 + 0 = 300.
Подобным образом, в 20 минут 59 секунд угол минутной стрелки составит 20*6 + 59/10 = 120 + 5.9 = 125.9. Еще через секунду угол будет равен 21*6 + 0/10 = 126 + 0 = 126.
На Рисунок 6.12 показаны часы, в код которых добавлена эта часть кода. Сравнив его с Рисунок 6.10, вы увидите, что положение часовой и минутной стрелок стало более точным.

Создание кода

Создание кода

В сущности «волшебство» данного ролика создается в сценарии Action Script кнопки. Как было сказано выше, сценарий задает переход ролика ко второму кадру и запускает анимацию. Это фактически последнее важное событие. Перед этим генерируется ответ, который помешается в текстовую область.
Так как ответ активизируется щелчком по кнопке, весь код необходимо поместить в сценарий, назначенный кнопке. Такой сценарий всегда начинается с оператора on, далее следует описание реакции на событие. Одним из часто используемых событий является событие release (нажатие кнопки).
Вначале сценарий создает массив и заполняет его списком ответов. Для этого существует множество способов. Один из них приведен ниже: responses = new Array("Yes", "No", "Ask again later","It is certain", "Doubtful", "Probably", "The answer is unclear","Of course not!", "Certainly!", "It looks positive", "It looks negative");
Это наиболее короткий способ создания массива и его одновременного заполнения. Однако он выглядит немного беспорядочно, так как текст переносится с одной строки на другую. Приведем другой способ: responses = new Array();
responses[0]("Yes");
responses[1]("No");
responses[2]("Ask again later");
responses[3]("It is certain");
responses[4]("Doubtful");
responses[5]("Probably");
responses[6]("The answer is unclear");
responses[7]("Of course not!");
responses[8]("Certainly!");
responses[9]("It looks positive");
responses[10]("It looks negative");
Этот способ является более аккуратным, в нем каждый ответ располагается на отдельной строке. Вы можете сразу увидеть, из каких элементов он состоит. Однако здесь вам придется в каждой строке вводить номер элемента в скобках. В случае ошибки вы можете пропустить очередной ответ или оставить место пустым. Поэтому лучше пользоваться третьим способом: responses = new Array();
responses.push("Yes");
responses.push("No");
responses.push("Ask again later");
responses.push("It is certain");
responses.push("Doubtful");
responses.push("Probably");
responses.push("The answer is unclear");
responses.push("Of course not!");
responses.push("Certainly!");
responses.push("It looks positive");
responses.push("It looks negative");

При помощи команды push ответы добавляются в массив друг за другом. Это более корректный и наглядный способ, который к тому же позволяет без труда добавлять новые ответы или удалять существующие. Применение функции push - наиболее быстрый и легкий способ добавить элемент в массив. Вы можете добавлять более одного элемента, задавая столько параметров в функции push, сколько элементов хотите добавить. Данная команда может быть одновременно использована и как функция для определения размера массива, поскольку возвращает новый размер массива. Например, newLengthOf Array = myArray.push("Gary", "Debby")
После того как массив будет заполнен возможными ответами, вам необходимо просто выбрать один из них наугад. Число элементов массива определяется при помощи параметра length. Функция Math, random позволяет выбрать случайный номер, соответствующий тому или иному элементу массива. Более подробно о функции Math.random рассказано в разделе "Случайность и эффект старого кино" главы 5.
Выбранное случайное число используется для определения текста ответа, который помещается в текстовую область. Не забудьте установить для текстовой области свойство Dynamic Text и задать имя переменной, в данном случае, fortune. Панель Properties будет выглядеть, как показано на Рисунок 6.5.

Создание кода

Создание кода

Код, задающий воспроизведение звукового файла, несложный, но и не такой простой, как можно было бы ожидать. Вместо одной команды воспроизведения звука вам придется записать три строки: первая создает звуковой объект, вторая соотносит звуковой файл из библиотеки объектом, третья задает воспроизведение звукового файла. song = new Sound();
song.attachSound("song1") ;
song.start();
Функция playSong должна выполнять еще несколько действий. Прежде всего, останавливать воспроизведение предыдущей песни. Это осуществляется при помощи команды stop. Предположим, что предыдущая песня содержится в глобальной переменной song и воспроизводится в данный момент. Приведем простой вариант функции: function playSong(songnum){
// Останавливаем воспроизведение предыдущей песни,
song.stop();
// Проигрываем новую песню,
song = new Sound ();
song.attachSoundt "song"+songnum);
song.start();
}
Осталось добавить еще один специальный эффект - подсвечивание названия выбранной песни. Клип каждого выбираемого элемента содержит два кадра: без подсветки и с подсветкой. На Рисунок 6.9 изображение музыкальный автомат с подсветкой выбранного элемента.
Перед запуском воспроизведения каждой песни необходимо y6eдиться в том, что подсветка всех песен выключена, а затем включить подсветку только выбранной песни: function playSong(songnum) {
// Останавливаем воспроизведение предыдущей песни.
song.stop();
// Убираем подсветку.
for(i=1;i this[i].gotoAndStop(1);
}
// Проигрываем новую песню,
song = new Sound();
song.attachSound("song"+songnum);
song.start();
this[songnum].gotoAndStop(2);
}

Создание кода

Создание кода

Код, который выполняет все вышеописанные действия, - это cценарий onClipEvent (enterFrame), помещаемый в клип. Код можно посмотреть в файле Simpleclock.fla. onClipEvent (enterFrame) {
// Узнаем текущее время.
now = new Date();
hour = now.getHours();
minute = now.getMinutes();
second = now.getSeconds();
// Конвертируем в значение для 12-часового дня.
if (hour > 12) {
hour -= 12;
}
// Рассчитываем углы для поворота стрелок.
hourAngle = 360*hour/12;
minuteAngle = 360*minute/60
secondAngle = 360*second/60;
/// Поворачиваем сами ролики
_root["hour hand"]._rotation = hourAngle;
_root["minute hand"]._rotation = minuteAngle;
_root["second hand"]._rotation = secondAngle;
}
Чтобы определить значение углов, значение времени делится на наибольшее возможное значение и умножается на 360. Например, значение минут делится на 60, в результате чего получается значение между 0 и 1, а затем умножается на 360, что дает значение угла между 0° и 360°. Чтобы стрелка была 12-, а не 24-часовой, из значения часов вычитается 12.
Результатом каждой операции является угол от 0° до 360°. 0° обозначает 0 (или 12) часов, 0 минут, 0 секунд. В данном случае изображения всех трех клипов, представляющих стрелки часов, будут указывать вверх (Рисунок 6.11). Затем, после задания параметра „rotation, стрелки будут указывать на соответствующее место.

В игре "Жизнь" живут и умирают маленькие красные точки

Рисунок 6.15 В игре "Жизнь" живут и умирают маленькие красные точки



Когда пользователь завершает наполнение ячеек, он нажимает кнопку начала игры. При каждом проигрывании кадра применяется к каждой ячейке описанный набор правил. В результате наполнение некоторых ячеек меняется.
Пользователь может нажать кнопку Stop для остановки игры. Имеются также кнопка пошагового исполнения алгоритма (Step) и кнопка очистки игрового поля (Clear).

В конце анимации на несколько

Рисунок 6.6 В конце анимации на несколько секунд появляется ответ, затем ролик вновь возвращается в начало

В панели Properties можно установить

Рисунок 6.4 В панели Properties можно установить значение параметра Alpha в 0%, тем самым делая элемент невидимы Эффект Alpha назван по аналогии с термином "alpha channel" (альфа-канал), который используется для описания изображений. Считается, что графическое изображение состоит из четырех каналов: красного, зеленого, синего и альфа. Первые три канала определяют цвет пикселов, последний - их прозрачность. Если значение альфа-канала равно 0, изображение совершенно прозрачно. Поэтому при установке свойства Alpha в значение 0 flash-элемент станет невидимым.
Даже если кнопка является совершенно прозрачной, она никуда не девается с рабочего поля. Поэтому кнопка полностью активна и реагирует на щелчок мышью. Мы описали один способ создания невидимой кнопки. Другой способ рассматривается в главе 14.

Когда пользователь щелкает по кнопке, ролик переходит к кадру 2 и продолжает воспроизведение. Воспроизведение анимации продолжается до конца ролика.
Вы увидите, что со 2-го по 22-й кадр анимация лап содержит промежуточные отображения. В кадре 20 запускается анимация слоя "Ball effect", и шар сверкает. Ролик целиком можно посмотреть на Web-сайте (файл Crystalball.fla).
Наиболее важное событие в данной анимации - появление второй текстовой области в кадре 23. Эта область содержит ответ на вопрос пользователя. Текст задается при щелчке по кнопке, но вплоть до кадра 23 он не виден.
Таким образом, ролик состоит из одного начального кадра, который ждет действия от пользователя, и ряда анимированных кадров, отображающих в ходе своего воспроизведения текст. После завершения анимации ролик возвращается к первому кадру и ждет следующего вопроса.

В панели Properties задается динамическое

Рисунок 6.5 В панели Properties задается динамическое свойство текста и его связь с переменной fortune


Ниже приведен полный код кнопки. После того как текст будет задан, ролик переходит к кадру 2 и запускает анимацию. Текстовая область не видна до кадра 23. on (release) {
// Создаем список возможных ответов.
responses = new Array();
responses.push("Yes");
responses.push("No");
responses.push("Ask again later");
responses.push("It is certain");
responses.push("Doubtful") ;
responses.push("Probably");
responses.push("The answer is unclear");
responses.push("Of course not!");
responses.push("Certainly!");
responses.push("It looks positive");
responses.push("It looks negative");
// Узнаем число ответов,
n = responses.length;
// Выбираем случайный ответ.
r = Int(Math.random()*n);
// Помещаем ответ в текстовую область,
fortune = responses[r];
// Запускаем дальнейшую анимацию.
gotoAndPlay(2);
Для перемещения по flash-ролику будут использоваться две команды: gotoAndPlay и gotoAndstop. Разница между ними состоит в том,что вторая команда задает переход ролика или клипа к определенному кадру или метке, но не запускает выполнения какого-либо кода или воспроизведения какой-либо анимации. В отличие от нее команда gotoAndPlay задает выполнение кода и продолжение анимации. Если вы хотите запустить выполнение кода какого-либо кадра, но не желаете переходить к следующему после него, используйте команду gotoAndPlay и включите в кадр команду stop.
В конце анимации в центре хрустального шара появляется текст (Рисунок 6.6)

В первом кадре ролика видно изображение

Рисунок 6.3 В первом кадре ролика видно изображение кнопки над хрустальным шаром



Нам необходимо, чтобы кнопка была активной и в тоже время скрытой от пользователя. Для этого в панели Properties выберите эффект Alpa и установите значение прозрачности 0% (Рисунок 6.4). Можно просто заполнить в кнопке только кадр Hit, тогда она также будет не видна пользователю, но активна.

В результате изменения кода часовая

Рисунок 6.12 В результате изменения кода часовая и минутная стрелки часов стали указывать время более точно



Файл Betterclock.fla содержит дополнительный код, сглаживающий движение стрелок. Обратите внимание, что с изменением времени минутная стрелка понемногу передвигается.

Виртуальный музыкальный автомат

Рисунок 6.7 Виртуальный музыкальный автомат напоминает устройство, которое можно было встретить в 50-е годы в любой закусочной

Волшебный хрустальный шар

Волшебный хрустальный шар

Исходный файл: Crystalball.fla
Наверное, самой распространенной интерактивной программой, которую можно встретить в Internet, является программа-предсказатель, работаюшая на основе случайных чисел. Обычно она называется "Маеgic Eight Balls" (Восемь волшебных шаров), по имени популярной игрушки Tyco.
На Рисунок 6.1 показано, как может выглядеть подобная игра.

в данном ролике является создание

Подход

Наиболее сложной задачей в данном ролике является создание изображений и анимации. Сценарий же довольно прост.

наглядный способ продемонстрировать, как используется

Задача проекта

Создание музыкального автомата - наглядный способ продемонстрировать, как используется звук во Flash. Это обычный ролик, воспроизводящий несколько песен.
Интерфейс программы изображен на Рисунок 6.7. Такой музыкальный автомат может содержать до 10 различных песен. Песня воспроизводится после щелчка по ее названию в списке.

в компьютере пользователя, должно отображаться

Задача проекта

Время, запрограммированное в компьютере пользователя, должно отображаться в виде настенных или наручных часов. Часы должны иметь часовую, минутную и секундную стрелки. Лучше сделать часы необычными и в качестве стрелок использовать не простые линии, а какой-нибудь клип.

В данном разделе мы создадим

Задача проекта

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

Программа создает сетку, заполняющую экран.

Задача проекта

Программа создает сетку, заполняющую экран. Каждая ячейка может содержать или не содержать точку. Щелкнув по ячейке, пользователь может изменить ее состояние.

Создание Flash игр -практические уроки

Альбом для рисования

Альбом для рисования

Исходный файл: Drawing-line.fla, Drawing-fill.fla
Хотя предыдущие два примера используют ваши творческие способности, в действительности они не дают возможности создавать что-либо новое. Теперь давайте рассмотрим программу для рисования, работа в которой начинается с чистого листа и которая позволяет пользователю изображать все, что угодно, и распечатывать результат.

Добавление кнопок Clear и Print

Добавление кнопок Clear и Print

Чтобы очистить рабочую область, мы просто нарисуем сверху заполненный цветом области прямоугольник. Это выполняется с помощью сценария кнопки Clear (Очистить).
Мы устанавливаем толщину линии 0. Затем перемещаем указатель в верхний левый угол нашей области и рисуем прямоугольник, который точно ее повторяет и определяет область заливки. Цвет заливки - белый, так как именно он выбран фоновым в нашем ролике. on (release) {
// Толщина линии - ноль.
_roou.lineStyle(0,OxFFFFFF,100);
// Перемещаем указатель в верхний левый угол.
_root.moveTo(actions.xmin,act ions.ymin);
// Создаем область заливки.
_root.beginFill(OxFFFFFF);
_root.lineTo(actions.xmax,actions.ymin);
_root.lineTo(actions.xmax,actions.ymax);
_root.lineTo(actions.xmin,actions.ymax);
_root.lineTo(actions.xmin,actions.ymin);
_root.endFill();
}
Еше легче создать кнопку Print (Печать). Для этого необходимо добавить команду print. Осталось еше присвоить метку "#р" единственному кадру ролика. on (release) {
// Распечатываем клип
print(_root,"bframe");
}
Команда print выводит заданный клип на печать. Добавив к команде слева _root, вы можете напечатать все содержимое рабочего поля. Второй параметр определяет границы области печати. Подробности вы найдете в руководстве пользователя Flash.

Другие возможности

Другие возможности

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

Другие возможности

Другие возможности

Вы можете легко заменить имеющиеся звуки любыми другими. Просто удалите старые звуки из библиотеки и импортируйте на их место ваши собственные. Не забудьте произвести настройку диалогового окна Symbol Linkage Properties.
Вы также имеете возможность изменять количество звуков, например, уменьшать количество циклов барабанного боя и увеличивать количество отдельных звуков. Звуков может быть сколько угодно, главное, чтобы имена копий клипов совпадали с именами соответствующих звуков библиотеки.
Ничто не мешает вам изменить анимацию любого переключателя, Обладая достаточным количеством времени, вы можете отказаться от идеи повторно используемых клипов и создать свой клип для каждого переключателя. Но имейте в виду, что это усложнит вашу задачу, если вы захотите потом как-то еще изменить ролик.

Изображение примера использования ролика К сведению

Рисунок 7.7 Изображение примера использования ролика.

Изображенные слева части тела

Рисунок 7.1 Изображенные слева части тела можно переместить к расположенному справа туловищу



Ролик можно запустить, открыв файл Makeafox-drag.fla. Вы можете выбрать любую часть тела и переместить ее в любую часть экрана.

К сведению Для того чтобы закончить

Другие возможности

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

К сведению Не забудьте поместить

Другие возможности

Вы можете усовершенствовать программу, добавив возможность выбора толщины линии по аналогии с цветами. Можно создать кнопку, которая будет определять переменную lineSize в клипе "actions". Добавив в палитру белый цвет, вы дадите пользователю возможность стирать уже нарисованное.

К сведению

К сведению

He забудьте присвоить каждой из 18 кнопок уникальное имя и сопоставить это имя с именем соответствующего звука в библиотеке. Кроме того,название звука необходимо задать в диалоговом окне Symbol Linkage Properties (Рисунок 7.9).
То, какой будет анимация каждого типа кнопки, решаете вы. В нашем примере кнопки барабанного боя мигают, изменяя свой цвет с белого на черный и обратно, кнопки басов и отдельных звуков увеличиваются. Чтобы обеспечить непрерывное воспроизведение, в последний кадр циклов барабанного боя и басов необходимо вставить команду gotoAndPlay (2). Клипы отдельных звуков после окончания своего воспроизведения должны возвращаться к кадру 1. Первый кадр этих звуков должен содержать команду stop О для того, чтобы их воспроизведение запускалось при первой загрузке ролика.

К сведению

К сведению

Три кнопки в кадре "record", инициирующие танец, должны содержать сценарии для вызова функции danceButton. Вот пример для одной из кнопок: on (press) {
danceButton("dance1");
}
В кнопке Done должен содержаться сценарий для вызова функции stopRecord. on (press) {
stopRecord();
}
Клип "actions" в кадре "playback" содержит код, вызывающий функцию danceFrame при каждом обращении к этому кадру. onClipEvent(enterFrame) {
_root.danceFrame();
}
Следует также назначить команду gotoAndstop каждой из кнопок главного меню. В первый кадр главной временной шкалы поместите команду stop(), чтобы остановить анимацию в начальный момент времени.

Кнопки в левой части экрана дают

Рисунок 7.6 Кнопки в левой части экрана дают пользователю возможность выбрать цвет и фигур


Каждая из этих кнопок создана из одного библиотечного эталона. Когда копия помешается на рабочее поле, можно настроить ее цвет с помощью меню color на панели Properties. Внутри клипа находится кнопка, чтобы отслеживать выбор пользователя. Ниже приведен сценарий кнопки. Значение цвета кнопки помещается в переменную brushcolor. Ее значение затем передается переменной linecolor в клип "actions". on (release) {
// Определяем цвет.
myColor = new Color(this);
brushColor = myColor.getRGB();
// Передаем значение переменной linecolor клипа "actions"
_root.actions.lineColor = brushColor;
// Определяем позицию рамки.
_root["Color Selection"]._x = this._x;
_root["Color Selection"]._y = this._y;
}
Сценарий кнопки устанавливает координаты клипа "Color Selection", то есть рамки, равными координатам клипа, по которому щелкнул пользователь. При этом вокруг кнопки с выбранным цветом появится контур (Рисунок 7.6.)
Маленькая кнопка с кружочком посередине служит для выбора режима рисования - с заливкой или без. Клип с этой кнопкой состоит из двух кадров: с пустым и заполненным кружочком. Кнопка содержит сценарий, позволяющий переключаться между кадрами, и определяет переменную fill клипа "actions". on (release) {
if (_currentFrame ==1) {
gotoAndStop(2);
_root.actions.fill = true;
} else {
gotoAndStop(l);
_root.actions.fill = false;
}
}
С помощью кнопок, определяющих цвета, и кнопки выбора режима (с заливкой/без заливки) пользователь может рисовать разноцветные фигуры. Как и в предыдущем примере, код, необходимый для рисования, содержится в клипе "actions".
Он начинается с определения значения следующих переменных: draw - false, fill - false, linecolor - 0x000000. Также определяются четыре переменные, для которые ограничивают область в которой пользователь может рисовать. onClipEvent (load) {
// Рисовать или не рисовать?
draw = false;
// Определяем значение fill
fill = false;
// Начальный цвет линии - черный. linecolor = 0x000000;
// Определяем границы области рисования.
хтах = 550;
xmin = 70;
утах = 400;
ymin = 0;
}
При нажатии кнопки мыши курсор начинает оставлять след. Координаты курсора хранятся в переменных х и у. Их значения проверяются, и, если они выходят за фаницы разрешенной области, рисование не происходит.
Переменная linecolor передается функции lineStyle в качестве аргумента, определяющего цвет линии. Если переменная fill имеет значение true, то определяется новый массив. Он содержит координаты всех точек вдоль кривой, которую нарисовал пользователь. Массив состоит из объектов следующего вида: {х: значение, у: значение}. Элементы массива потребуются для создания залитой цветом области. onClipEvent (mouseDown) {
// Определяем позицию курсора.
х = _root._xmouse;
у = _root . _ymouse;
// Рисуем, если не вышли за границы поля
if ((x>xmin) and (xymin) and (y draw = true;
// Определяем параметры линии.
_root.lineStyle(1,lineColor,100);
_root.moveTo(x,у);
// Если выбран режим заливки, то создаем массив if (fill) {
fillArray = new Array();
fillArray,push({x:x, y:y});
}
}
}
После того как переменной draw присвоено значение true, продолжаем линию до тех пор, пока пользователь не отпустит кнопку мыши. При каждом обращении к кадру переменным х и у присваиваются текущие координаты курсора. Если эти значения выходят за разрешенные границы, переменные х и у переопределяются. Затем используется команда lineTo для отображения очередного сегмента линии. Если выбран режим заливки, то добавляется новый элемент в массив fillArray. onClipEvent (enterFrame) {
if (draw) {
// Определяем текущую позицию.
x = _root,_xmouse;
у = _root._ymouse;
// Задаем границы области рисования,
if (x < xmin) x = xmin;
if (x > xmax) x = xmax;
if (y < ymin) у = ymin;
if (y > ymax) у = ymax;
// Рисуем линию.
_root.lineTo(x,у);
// Если выбран режим заливки, то запоминаем точку,
if (fill) {
fillArray.push({х:х, y:y});
}
}
}
Когда пользователь отпускает кнопку мыши, переменная draw принимает, значение false, и рисование прекращается. Если при этом выбран режим заливки, то в цикле просматривается массив fillArray и созданная область перерисовывается. При этом также используются команда beginFill и endFill. В результате область заливается цветом linecolor. onClipEvent (mouseUp) {
if (draw) {
// Прекращаем рисовать.
draw = false;
// Перерисовываем кривую и заливаем
// получившуюся область,
if (fill) {
// Начинаем с первой точки.
_root.moveTo(fillArray[0].x,fiiiArray[0] .у);
// В цикле определяем область для заливки.
_root.beginFill(lineColor);
for(var i=l;i < fillArray.length;i++) {
_root.lineTo(fillArray[i].x,fillArray[i].y);
}
_root.endFill();
}
}
}
Другой способ состоит в том, что вы можете вызвать команду beginFill до того, как пользователь начнет рисовать, и команду endFill - когда он закончит, вместо того чтобы перерисовывать кривую. Но Flash не очень любит использовать заливку при разных обращениях к кадру, и результат может быть хаотичен. Лучше сохранить кривую, а затем перерисовать ее и создать всю заливку в пределах одного обработчика.

Музыкальный миксер состоит из

Рисунок 7.8 Музыкальный миксер состоит из шести циклов барабанов, шести циклов с басами и шести отдельных звуковых эффектов

Музыкальный миксер

Музыкальный миксер

Исходный файл: Musicmixer.fla
Flash позволяет работать не только с графическими объектами. Вы, например, можете воспроизводить одновременно несколько звуков, создавая музыкальный коктейль. При этом пользователь получит право выбирать любой музыкальный отрезок и время его воспроизведения.

Настройки диалогового окна Symbol

Рисунок 7.9 Настройки диалогового окна Symbol Linkage Properties определяют, каким образом звук будет включен во Flash-ролик



Необходимо создать три различных типа кнопок. В действительности они представляют собой не кнопки, а клипы. Поэтому, чтобы избежать путаницы, мы назовем их "переключателями". Переключатели содержат невидимые кнопки, реагирующие на щелчок мыши. Они состоят как минимум из двух кадров. Первый из них соответствует выключенному состоянию переключателя, остальные - включенному. Так как звуки барабанов и басов представляют собой повторяющиеся циклы, анимация этих двух переключателей воспроизводится непрерывно, пока не будет прекращена повторным щелчком мыши. В отличие от этого анимация переключателя отдельного звука воспроизводится один раз и затем возвращается к состоянию "выключено". Состав анимационных последовательностей вы можете просмотреть в файле Musicmixer.fla.
Кнопки в переключателях - это простые белые фигуры, которые помешаются за другими графическими изображениями, чтобы их не было видно. В примере для переключателей барабанов и басов используется небольшая круглая кнопка, для переключателей отдельных звуков - треугольная. Чтобы было проще размещать кнопки за графическими объектами, создано только два типа изображений кнопок. Шесть копий каждого переключателя помешены на рабочее поле. Их расположение может быть любым (Рисунок 7.8).

Подготовка ролика

Подготовка ролика

Для создания игрушки-конструктора, работающей по методу drag-and-drop, прежде всего необходимо иметь различные графические изображения. На Рисунок 7.1 в правой части изображено туловище, в левой - различные изображения рук, ног, ртов и глаз.

Подготовка ролика

Подготовка ролика

Основными элементами ролика являются 18 звуков. В примере MUSICmixer.fla использовались звуки, созданные профессиональным композитором. Вам придется сочинить звуки самому, привлечь к этому друга или коллегу или позаимствовать музыку из любых других источников.
Циклы барабанного боя и басов состоят из коротких звуков, создающих законченные музыкальные фразы. Они должны быть короткими, чтобы не перегружать файл, но достаточными для того, чтобы создать интересный звук.
После импорта 18 звуков во Flash в диалоговом окне Symbol Linkage Properties (Рисунок 7.9) необходимо установить свойство Export for ActionScript, а также задать идентификатор.

Подготовка ролика

Подготовка ролика

Мы должны сделать клип "dance" правильно. В исходном файле он представляет последовательность из 20 кадров, которая разбита на четыре части по 5 кадров. Каждая часть начинается с кадра, имеющего метку, например "dance0". Последний кадр в каждой последовательности не i держит изображения, но содержит команду gotoAndPlay("dance0") Таким образом, когда данная последовательность движений заканчивается, лиса возвращается к повторению последовательности dance0 (основное движение танца). Остальные три метки кадров называются "dance1", "dance2" и "dance3". Последний кадр каждой танцевальной последовательности содержит только сценарий. Это сделано потому, что, когда выполняется команда gotoAndPlay (), содержимое кадра не отображается.
Основная временная шкала ролика содержит три кадра. Первый кадр помечен как "menu" (меню) и содержит команду stop(). Второй кадр имеет метку "record"(запись) и третий — "р1ауЬаск" (воспроизведение). Ниже мы рассмотрим код для этих трех кадров.
В кадре "menu" содержится две кнопки: Record и Playback. Я использовал один символ из библиотеки как образец для создания кнопок, но поместил на них различный текст. Каждая из этих кнопок совершает переход на соответствующий кадр.
В кадре "record" содержится четыре кнопки. Три из них включают в танец соответствующее движение, и четвертая прерывает процесс записи.
Наконец, кадр "playback" содержит единственную кнопку, останавливающую воспроизведение.

Подход В приложении используется

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

Подход

Подход

Библиотека данного ролика имеет не такую, как мы рассматривали раньше, организацию. Вместо отдельных изображений каждого варианта элемента лисы используются клипы. Каждый клип содержит все варианты данного элемента, по одному в кадре. Например, клип "Eyes" ("Глаза") будет стоять из трех кадров, каждый из которых содержит другое изображение глаз.

Подход

Подход

Центральным объектом этой программы является клип "dance". Он содержит всю последовательность танца лисы. Вы можете управлять лисой, перемещаясь к кадру, с которого начинается последовательность, составляющая данное танцевальное па.
Первым делом программа отмечает начало процесса записи. При нажатии кнопки программа фиксирует время нажатия и название движения. Информация помешается в массив объектов следующего формата: {время: значение, движение: значение}.
В начале процесса воспроизведения также отмечается текущее время. Затем программа все время проверяет, не пора ли лисе совершить первое из записанных движений, то, которое является первым элементом массива. Когда этот момент времени проходит, начинается ожидание второго момента времени, и т.д. Специальное танцевальное движение stop используется, чтобы обозначить окончание времени записи. Когда воспроизведение доходит до команды stop, ролик возвращается в главное меню.

Подход

Подход

Программа должна распознавать нажатие и отпускание кнопки мыши. Она должна определять, над каким клипом находится в данный момент курсор, и предоставлять возможность перетаскивания выбранного клипа при нажатой кнопке мыши.
Это не так легко, как кажется. Для того чтобы определить, какой клип выбрал пользователь, необходимо сравнить позицию курсора мыши с областью, занимаемой каждым клипом.

Показан фрагмент исходного файла

Рисунок 7.10 Показан фрагмент исходного файла. Лиса находится в процессе танца

Пользователь может щелкнуть по

Рисунок 7.4 Пользователь может щелкнуть по любой части тела и изменить ее

Простая программа рисования позволяет

Рисунок 7.5 Простая программа рисования позволяет нарисовать длинную черную кривую

Ролик MakeAFox дает пользователю

Рисунок 7.3 Ролик Make-A-Fox дает пользователю возможность перетаскивать части тела лисы в любое место экрана

Составь лису методом "Перетащи и положи"

Составь лису методом "Перетащи и положи"

Исходный файл: Makeafox-drag.fla
Многие компьютерные игры созданы по подобию игрушек докомпьютерной эры. Одна из таких старых игрушек - "Mister Potato Head" (Господин картофельная голова). Она представляла собой набор пластиковых частей тела которые ребенок мог прикрепить к картошке и сделать смешного человечка. Позже вместо картошки стали использовать пластиковое туловище.

Создай лису методом "Нажми и измени"

Создай лису методом "Нажми и измени"

Исходный файл: Makeafox-switch.fla
В другом варианте конструирования изображений все элементы остаются на местах, однако пользователь получает возможность изменять их. Это версия "нажми и измени" предыдущего примера. Здесь не используется перемещение, все действия выполняются только щелчками мыши.

Создание кода

Создание кода

Здесь не применяется перетаскивание, поэтому сценарий будет немного проще. Код представляет собой сценарий onClipEvent (mouseDown) помешенный в клип "actions", который расположен за пределами рабочего поля клипа. Как и функция hitTest в ролике Makeafox-drag.fla, данный сценарий проверяет, какой клип выбран.
Однако вместо имен "Part1" - "Part 13" клипы получают значащие имена (например, "Eyes" и "Head"). Сценарий должен проверить каждый клип, для чего все клипы собраны в общий список.
При нахождении соответствующего клипа код продвигается на один кадр вперед. Если впереди кадров больше нет, он возвращается к кадру 1. onClipEvent (mouseDown) {
// Определяем, в каком месте щелкнул пользователь
x = _root._xmouse;
y = _root._ymouse;
// Выясняем, по какому элементу произведен щелчок
list = ["Eyes", "Mouth", "Head", "Legs", "Left Arm", "Right Arm", "Body"];
for(i=0;i if (_root[list[i]].hitTest(x, y, true)) {
// Меняем выбранный элемент
with (_root[list[i]]) {
// Переходим к следующему кадру
if (_currentFrame == _totalframes) {
gotoAndStop(1);
} else {
nextFrame();
}
}
break;
}
}
}

Номер кадра и обшее количество кадров определяется при помощи параметров _currentFrame и _totalFrame. Это очень удобно в случае, когда клипы могут включать любое количество кадров, а код -учитывать все возможные варианты.

Конструкция with указывает, что все команды и функции кода в рамках этой конструкции должны выполняться для определенного клипа. Это позволит вам обойтись без добавления _root [movieclip] в начале каждой команды или функции.
Ролик Makeafox-switch.fla можно увидеть на Web-сайте. На Рисунок 7.4 показан один из возможных вариантов, получившихся в результате внесенных изменений. Независимо от того, сколько раз и в какой последовательности пользователь щелкает по элементам изображения, оно всегда будет оставаться цельным.

Создание кода

Создание кода

Код назначен кнопкам, которые размешены внутри переключателей. Первый кадр каждого переключателя содержит код для запуска воспроизведения звука. Помимо этого код задает переход клипа к следующему кадру. Кнопка присутствует во всех кадрах клипа. Различные сценарии используются для остановки звука в цикле барабанов и цикле басов.
Самый простой сценарий - у переключателей отдельных звуков. Задача данного сценария - запустить воспроизведение звука и задать его переход к следующему кадру. on (press) {
// Указываем, что надо проиграть из библиотеки звук
// соответствующий выбранному клипу.
instanceSound = new Sound(),
instanceSound.attachSound(this._name);
instanceSound.start();
// Начинаем анимацию, показывающую, что кнопка выбрана.
gotoAndPlay(2);
}
}
Обратите внимание, что имя звука описывается при помощи синтаксиса this._name. Это значит, что имя клипа будет являться и именем звука Если клип называется "instance 1", код попытается воспроизвести звук с именем "instance 1". Первое имя "instance 1" соответствует имени клипа на рабочем поле, второе имя "instance 1" является именем соответствующего звука в библиотеке. Эта схема работает только в том случае, если имена полностью совпадают.
Преимущество данного способа заключается в том, что один и тот же клип может использоваться на рабочем поле для воспроизведения различных звуков. Имя звука берется из имени копии клипа, а не из переменной ActionScript, что делает такой клип более универсальным.
Анимация начинается после перехода клипа к следующему кадру. В конце анимации клип возвращается к первому кадру, а находящаяся в нем команда stop () остановит его повторное воспроизведение.
В случае отдельных звуков одна и та же кнопка находится во всех кадрax, что дает пользователю возможность запустить воспроизведение нового звука даже во время воспроизведения анимации клипа.
Клипы для басов и отдельных звуков аналогичны. Основное их различие состоит в том, что первый звук должен периодически повторяться. Для этого в команду start требуется добавить два параметра: смещение от начала звука и количество циклов. В нашем случае смешение не нужно следовательно, оставим его значение равным 0. Периодическое повторение звука необходимо, поэтому соответствующий параметр должен иметь очень большое значение. on (press) {
// Проигрываем звук по названию клипа.
bassloop = new Sound();
bassloop.attachSound(this._name);
bassloop.start(0,9999);
// Начинаем анимацию.
gotoAndPlay(2);
}
Еще одно отличие между отдельными звуками и басами заключается в том, что цикл басов можно отключить. Для этого кнопке переключателя цикла басов начиная с кадра 2 необходимо назначить другой сценарий. Сценарий прекратит воспроизведение звука и вернет ролик к кадру 1. on (press) {
// Останавливаем проигрывание звука,
bassloop = new Sound();
bassloop.stop(this._name);
// Прекращаем анимацию.
gotoAndStop(1);
}
Сценарии кнопки для цикла барабанного боя немного сложнее. Прежде чем начинать воспроизведение одного такого цикла, необходимо убедиться в том, что другие циклы этой группы отключены. Сценарий проверяет звуки, начиная с "drum loop 1" и заканчивая "drum loop 6", и отключает каждый из них. Он также задает возврат каждого клипа переключателя к кадру 1, чтобы остановить анимацию. После этого запускается воспроизведение выбранного цикла. on (press) {
// Останавливаем любой другой цикл барабанного боя.
drumloop = new Sound();
for(i=l;i<=6;i++) {
_root["drum loop"+i].gotoAndStop(1);
drumloop.stop("drum loop"+i); }
// Начинаем проигрывать выбранный звук
drumloop.attachSoundlthis._nane);
drumloop.start(0, 9999);
// Воспроизводим анимацию.
gotoAndPlay(2);
}
Другой код кнопки цикла барабанного боя аналогичен коду цикла басов. Он прекращает воспроизведение звука и возвращает клип обратно к кадру 1. on (press) {
// Останавливаем проигрывание звука
drumloop = new Sound();
drumloop.stop(this._name);
// Останавливаем анимацию.
gotoAndStop(1);
}

Создание кода

Создание кода

Рассмотрим сценарий кадра "record". Он начинается с инициализации массива и определения времени начала записи. // Определяем массив.
danceArray = new Array();
// Считываем текущее время.
startTime = getTimer();
Функция danceButton вызывается одной из трех кнопок, расположенных внизу экрана. Они определяют время и название танцевального движения и помещают эту информацию в массив. Они также дают команду клипу "fox" (его библиотечное имя - "dance") к исполнению движения. // Пользователь нажимает одну из "танцевальных" кнопок,
function danceButton(moveName) {
// Промежуток времени, прошедший с начала проигрывания.
thisTime = getTimer() - startTime;
// Помещаем временной интервал и название движения в массив.
danceArray.push({time: thisTime, move: moveName});
// Показываем движение,
fox.gotoAndPlay(moveName);
}
Когда пользователь нажмет кнопку Done, движение "stop" будет помещено в массив и ролик перейдет к кадру "menu". // Нажимаем кнопку Done.
function stopRecordO {
// Вычисляем временной интервал.
thisTime = getTimerO - startTime;
// Добавляем в массив.
danceArray.push({time: thisTime, move: "stop"});
// Возвращаемся в главное меню.
gotoAndStop("menu");
}
Рассмотрим сценарий кадра "playback". Он начинается с определения времени начала воспроизведения и присваивания переменной dance-step значения 0. Эта переменная содержит номер следующего в очереди танцевального па. // Определяем время.
startTime = getTimer();
// Начинаем с шага 0.
danceStep =0;
Клип "actions" вызывает функцию danceFrame, которая проверяет состояние последовательности танцевальных движений. Она вычисляет текущее время и сравнивает его со временем запуска следующего движения.
Когда это время наступает, функция проверяет, не является ли это движение командой stop. Если это так, то последовательность завершается. В противном случае клип "fox" переходит на соответствующий кадр, и переменная danceStер увеличивает свое значение на единицу. // Вызывается при каждом обращении к кадру
// из клипа "actions".
function danceFrame() {
// Вычисляем время.
thisTime = getTimer() - startTime;
// Проверяем момент запуска следующего движения, if (thisTime >= danceArray[danceStep].time) {
// Определяем движение.
move = danceArray [danceStep] .move;
// Если это "stop", возвращаемся в кадр "menu",
if (move == "stop") {
gotoAndstop("menu");
} else {
// В противном случае отображаем движение танца.
fox.gotoAndPlay(move);
// Увеличиваем переменную.
danceStep++;
}
}
}

Создание кода

Создание кода

Если вы уже работали во Flash, вы можете подумать, что это легко - необходимо просто использовать клипы частей тела и команды startDrag, и stopDrag. На самом деле такой подход только все усложнит. Я не любитель команды startDrag и не буду использовать ее здесь, поскольку перемешать с ее помощью элементы по рабочему полю не так уж и просто.
Представив каждую часть тела в виде кнопки, вы можете назначить ей обработчик события on (press) и применить команду startDrag. Однако кнопка не может служить в качестве цели команды startDrag, такой целью может быть только клип. Если же вы представите их в виде клипов, им нельзя будет назначить функцию on (press), так как она используется только с кнопками. Еще одним вариантом является представление каждой части тела как клипа с кнопкой внутри. Здесь можно легко запутаться, так как каждый раз при добавлении в ролик новой части вам придется выполнить несколько действий.
Лучшим выходом будет написать код, выполняющий процедуру drag-ard-drop самостоятельно. Отдельным частям не будет назначено никакого кода, благодаря чему их будет легко создавать и добавлять новые.
Весь код поместим в клип "actions", который как обычно находится вне, пределов рабочей области и содержит только надпись "Actions".
Данному клипу назначен сценарий ActionScript, управляющий перемещением всех элементов. Он должен включать несколько функций onClipEvent. Ниже приведено краткое описание событий и реакций на них, которые сценарий должен выполнять: • load (загрузить) - задание переменной, указывающей, что никакого перемещения еще не происходит;
• mouseDown (кнопка мыши нажата) - определение выбранного элемента и создание переменной, сообщающей, что этот элемент перетаскивается. Определение смешения между местом, над которым нажата кнопка мыши, и центром выбранного элемента;
• mouseUp (кнопка мыши отпущена) - установка начальных параметров переменной, указывающих, что никакой элемент в данный момент не перетаскивается;
• enterFrame (проигрывание кадра) - изменение положения перемещаемого элемента соответственно движению курсора минус разница между координатами центра элемента и координатами точки, по которой щелкнул пользователь. Два момента из предыдущего списка могут смутить непрограммиста. Первый - это постоянно упоминаемая переменная. В коде ей будет назначено имя dragPart и исходное значение 0. Это значение соответствует состоянию, при котором не происходит никакого перемещения. Однако, как только пользователь выбирает элемент, переменной dragPart присваивается номер данного элемента, а когда значение переменной равно какому-либо числу, происходит перемещение. Когда пользователь отпускает элемент, переменная вновь принимает значение 0.
В рассматриваемом коде есть еще один сложный момент - смешение при передвижении элементов. Когда мы перетаскиваем какой-либо объект, то приравниваем значения его координат значению координат курсора. Однако, если пользователь щелкнет не в центре координат объекта, то при приравнивании положения объекта к положению курсора, произойдет "скачок"; координаты объекта мгновенно станут равны координатам курсора.
Чтобы этого не происходило, мы используем переменные offsetx и offsety для хранения величины расстояния между центром объекта и местом клика и при изменении координат объекта учитываем это смещение.
Теперь давайте рассмотрим каждую часть данного кода. Вначале выполняется функция onClipEvent (load). Она необходима для инициализации переменной dragPart. // При загрузке ничего не перетаскиваем.
onClipEvent (load) {
dragPart = 0; }
Наиболее сложной частью кода является функция onClipEvent (mouse-Down) . Она проверяет все 13 элементов при помощи функции hitTest и определяет, над какой из них расположен курсор. Затем задает переменную dragPart, а также переменные of f setx и of f sety.
Обратите внимание, что клипы элементов для упрощения кода имеют имена от "Part1" до "Partl3". // Начинаем перемещение.
onClipEvent (mouseDown) {
// Определяем текущие координаты курсора.
x = _root._xmouse;
y = _root._ymouse;
// Находим часть, над которой в данный момент находится курсор.
for(i=1;i<=13;i++) {
// Имеет смысл заменить константу 13 переменной, содержащей
// количество частей, например countOfParts. Это облегчит
// дальнейшую модификацию ролика.
if (_root["Part"+i].hitTest(x,y, true)) {
// Указываем, какой элемент нужно перетаскивать,
// и задаем смещение.
dragPart = i;
offsetx = _root["Part"+i]._x - x;
offsety = _root["Part"+i]._y - y;
break;
}
}
}
Когда пользователь отпускает кнопку мыши, переменная вновь принимает значение 0. onClipEvent (mouseUp) {
dragPart = 0;
}
Вместо параметров _xmouse и _ymouse вышеприведенный код использует _root._xmouse и _root._ymouse. Первые параметры соответствуют положению курсора относительно клипа, а не рабочего поля. Поэтому если ваш клип не будет расположен в верхнем левом углу, вы не получите нужных значений. При добавлении в код параметра _root положение курсора будет всегда задаваться относительно рабочего поля.
Основополагающим компонентом данного кода является функция onClipEvent (enterFrame). Она проверяет, не равна ли переменная dragPart нулю, а затем задает положение перетаскиваемого элемента соответственно текущему положению курсора мыши плюс значение смешения. // Если какой-либо элемент перетаскивается, меняем его координаты
onClipEvent (enterFrame) {
if (dragPart > 0) {
_root["Part"+dragPart]._x = _root._xmouse + offsetx;
_root["Part"+dragPart]._y = _root._ymouse + offsety;
}
}
В нашем примере используются не клипы, а графические элементы из библиотеки. Но для всех графических символов, которые будут иметь возможность перемещаться по рабочему полю, мы устанавливаем свойство MovieClip в выпадающем меню Symbol Behavior (Поведение символа). Это меню находится в верхней левой части панели Properties (Рисунок 7.2). Теперь, хотя мы создали этот символ как графический элемент его копии можно присваивать имя, как будто он является клипом! Например, символ "Arm1" в библиотеке отображается как графический: элемент, но на панели Properties мы присвоили ему имя "Part1", так как свойство его поведения было изменено.

Создание полной программы рисования

Второй параметр функции lineStyle отвечает за выбор цвета. В предыдущем примере был выбран черный цвет — 0x000000. Префикс Ох сообщает программе, что следующее за ним число надо воспринимать в шестнадцатеричном формате, так же, как это происходит при HTML-верстке. Шесть последних цифр обозначают собственно цвет. Также можно использовать значение цвета, получаемое вызовом функции getRGB. В ролике Drawing-fill.fla я использовал несколько разноцветных кнопок. Каждая из этих кнопок представляет собой клип с кнопкой внутри.
На Рисунок 7.6 показан вид исходного файла Drawing-fill.fla. Слева расположены кнопки, с помощью которых пользователь может управлять цветом.

Создание простой программы рисования

Создание простой программы рисования

Конечный ролик позволит пользователю рисовать, используя различные фигуры и цвета, однако для начала дадим ему возможность нарисовать непрерывную линию.
Мы воспользуемся новыми командами для рисования, появившимися в версии MX. Описание этих команд вы можете найти на панели ActionScript (Objects -> Movie -> Movie Clip -> Drawing Methods) или в окне Reference (справка).
Эти команды как бы имитируют движения пользователя, передвигающего мышь. Сначала используем команду line style для определения толщины и цвета будущей линии. Команда moveTo передвигает указатель точки для рисования по экрану; линия при этом не прорисовывается. И наконец, мы используем команду lineTo для рисования линии из текущей позиции в заданную.
Единственным элементом нашего ролика является клип "actions", который содержит весь необходимый код.
Сценарий начинается с присваивания переменной draw значения false. Эта переменная используется, чтобы определить, рисует пользователь или нет. Затем с помощью linestyle мы задаем толщину и цвет. Третий параметр команды lineStyle определяет прозрачность линии, то есть свойство alpha. Значение 100 соответствует абсолютно непрозрачному объекту, значение 50 делает объект полупрозрачным.
onClipEvent (load) {
// Рисовать или не рисовать?
draw = false;
// Линия шириной в 1 пиксел, черная, непрозрачная
_root.lineStyle(1,0x000000,100);
}
Когда пользователь нажимает кнопку мыши, переменной draw присваивается значение true. Затем команда moveTo перемещает указатель в текущую позицию курсора. Мы используем конструкцию _root для обращения к свойствам _xmouse и _ymouse, т.к. хотим чтобы центр координат был независим от положения клипа "actions". onClipEvent (mouseDown) {
// Будем рисовать
draw = true;
// Переходим к координатам курсора.
_root.moveTo(_root._xmouse, _root._ymouse);
}
Когда пользователь отпускает кнопку мыши, переменной draw присваивается значение false, и процесс рисования завершается. onClipEvent (mouseUp) {
// Завершаем рисование.
draw = false;
}
Значение переменной draw проверяется при каждом обращении к кадру. Если оно истинно, то рисуется линия от предыдущей к текущей позиции курсора. Константы true и false могут использоваться конструкциями if и for в качестве проверки условия выполнения кода. Вы также можете использовать их для отслеживания объектов, которые могут нахолиться только в двух состояниях (вкл/выкл).
onClipEvent (enterFrame) {
if (draw) {
_root.lineTo(_root._xmouse,_root._ymouse);
}
}
Обратите внимание, что все обращения к командам рисования происходят через конструкцию _root. Это делается для того, чтобы линии рисовались в самом ролике, на рабочем поле, а не на рабочей области клипа "actions". Можно создать отдельный клип "canvas " (холст) и рисовать линии в нем. Прорисовываясь, линии автоматически оказываются на самом заднем плане, так что, если в клипе ( или ролике) есть еще какие-то объекты, они будут закрывать линию. Наверное, вам будет удобней рисовать на пустом уровне.
На Рисунок 7.5 показана кривая, которая получилась в результате нажатия пользователем кнопки мыши и перемещения курсора. Помните, что скорость рисования соответствует частоте смены кадров ролика, поэтому для того, чтобы процесс рисования проходил плавно, это значение должно быть максимальным и равняться 120 калр/с. Готовый ролик вы можете увидеть, загрузив файл Drawing-line.fla.

Танцующая лиса

Танцующая лиса

Исходный файл: Dance.fla
Вы видели, как пользователь может создавать изображения и последовательности звуков. Попробуем теперь создать последовательность анимаций. В этом примере пользователь создает мультик с танцующей лисой. Во время сеанса записи пользователь может выбрать в режиме реального времени движения, которые будет делать лисица. Каждое движение записывается, и потом пользователь может проиграть созданную им последовательность движений.

В панели Properties вы можете

Рисунок 7.2 В панели Properties вы можете назначить графическому Flash-элементу свойство клипа и имя, отличное от его имени в библиотеке



Несколько слов о взаимном перекрывании символов на рабочем столе. Я расположил все подвижные элементы поверх головы и туловища, которые статичны. Исключение сделано для символов с изображением ног - они помешены на последний (задний) и предпоследний планы. Выделив элемент на рабочем столе, вы можете изменить его уровень с помощью команды Modify -> Arrange (Изменения -> Упорядочить).
На Рисунок 7.3 изображен один из вариантов изображения лисы, получившийся в результате перемещения ряда элементов из левой части в правую.

Для завершения записи пользователь может

Для завершения записи пользователь может нажать кнопку Done и вернуться в главное меню. Воспроизведение включается кнопкой Playback, после чего в точности воспроизводится записанная последовательность.

Исходное изображение будет полным, но,

Задача проекта

Исходное изображение будет полным, но, когда пользователь щелкнет по одному из его элементов, он изменится. Например, пользователь может щелкнуть по глазам и вместо них появится другая пара глаз.

в которой пользователь может рисовать,

Задача проекта

Задача данного раздела - создать программу, в которой пользователь может рисовать, как в простом графическом приложении. Пользователь должен иметь возможность рисовать простые линии и фигуры, а также применять различные цвета.

В данном разделе рассматривается создание

Задача проекта

В данном разделе рассматривается создание игрушки, которая позволяла бы пользователю сочинять свои собственные музыкальные произведения, смешивая звуки барабанного боя, циклы басов и другие отдельные звуковые эффекты. При этом необходимо обеспечить возможность замены файлов, а также предусмотреть обратную связь с пользователем чтобы он видел, какие музыкальные отрезки воспроизводятся. На Рисунок 7.8 показан интерфейс такого приложения.

создать приложение, которое позволит пользователю

Задача проекта

Задача этого проекта - создать приложение, которое позволит пользователю присоединять части тела лисы к неподвижному туловищу и так составлять изображение зверька. Метод drag-and drop (перетащи и положи) должен быть знаком всем, кто умеет работать с компьютером.

Создание Flash игр -практические уроки

Другие возможности

Другие возможности

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

Другие возможности

Другие возможности

Имейте в виду, что клипы, изображающие лис, не обязательно должны быть одинаковыми. Сценарий реагирует только на метки "whack" (удар) и "popup" (выглядывающая лиса), а после 24 кадра еще и на начало анимации выглядывающей лисы. Вы можете использовать несколько клипов, изображающих разных лис. Необходимо лишь убедиться, что они достаточно похожи для того, чтобы код мог их обрабатывать, а также присвоить им соответствующие имена при размещении экземпляров клипов на рабочем поле. Использование различных лис сделает игру интереснее.
Завершение игры может быть задано различными способами. В нашем примере ролик воспроизводится, пока интервал между появлениями лис не будет меньше одной секунды, что соответствует появлению 100 лис. Игра может заканчиваться и после того, как произведено определенное количество щелчков. Ваша игра может состоять из нескольких уровней. Поразив заданное число лис, пользователь переходит к другому уровню.

Другие возможности

Другие возможности

В игру легко внести различные изменения. Заданное количество выстрелов можно заменить таймером. Игра может состоять из уровней: игрок будет переходить на другой уровень, поразив определенное количество лис.
Имейте в виду, что игра дает возможность набирать более 50 очков. Каким образом? В ходе игры лисы начинают появляться друг за другом все быстрее и быстрее. Через некоторое время на экране одновременно будут появляться несколько лис. Когда пути двух лис пересекаются, вы можете убить их одним выстрелом, однако это требует сноровки. Если хотите, отмените данное свойство.
В игре могут использоваться некоторые звуковые эффекты и фоновые звуки. Игра будет более интересной, если добавить отвлекающую внимание анимацию, например пролетающую птицу или ветер, раскачивающий ветви.

Другие возможности

Другие возможности

Чтобы улучшить игру, я увеличил промежутки времени между появлениями лисы. Сейчас они составляют 2 секунды, а должны быть больше двух минут, чтобы игра стала напоминать "Охоту на оленей". Вы можете даже сделать промежутки случайными, чтобы было еще интереснее.
Вместо того чтобы переключать внимание охотника справа налево, вы можете двигаться по кругу. В некотором отношении это может быть проще. Вам не надо беспокоиться о слоях перспективы, как в этой игре. Вместо этого фон может быть одной неподвижной картинкой. Однако, вы также должны найти способ соединять друг с другом левую и правую половины круговой панорамы. Самый простой способ сделать это - заставить правую сторону повторить полную картину вида рабочего поля слева. Тогда, даже если игрок пытается продвинуться дальше вправо, вы просто повторяете весь путь налево. Потребуется немало терпения и труда, чтобы все получилось гладко, но достичь этого возможно.

Два клипа используются чтобы прятать

Рисунок 8.2 Два клипа используются, чтобы прятать лис среди деревьев. Каждый из них используется в зависимости от цвета фона позади лисы



На рабочее поле помещено несколько копий каждого клипа. Они расположены в одном из четырех различных слоев. Кроме основного кадра игра содержит окно начала и окно завершения игры. В обоих окнах есть кнопка, позволяющая пользователю начать игру.
Основной код находится в клипе, расположенном за пределами рабочего поля. Код оперирует именами клипов начиная с "fox()" и заканчивая "fox6".

Игрок только что поразил лису

Рисунок 8.5 Игрок только что поразил лису



Для того чтобы код мог управлять 18 клипами, им были присвоены имена от "fox0" до "fox17". Необходимо также создать динамическую текстовую область с именем showScore. На Рисунок 8.6 изображена панель Properties данной текстовой области.

Игровая область игры "Поймай лису"

Рисунок 8.3 Игровая область игры "Поймай лису" представляет собой бревно с 18 отверстиями. Лиса может появиться в любом из них

К сведению

К сведению

После создания кода необходимо присвоить копиям клипа имена с "fox0" по "fox6", соответствующие их именам в библиотеке. В нашем примере центр всех клипов с изображениями лис совпадает с центром рабочего поля. Это было сделано следующим образом: анимация была добавлена в главную временную шкалу, выделена, скопирована при помощи команды Edit -> Copy Frames (Редактировать ->Копировать кадры) и вставлена в пустой клип.

К сведению

К сведению

Все стандартные части предыдущих игр присутствуют и здесь. Есть окно начала игры с кнопкой в нем. Есть два текстовых поля: очки и оставшиеся выстрелы. Курсор невидим и заменен клипом с изображением р ла. Во всех этих случаях используется код как в игре "Подстрели лису*

К сведению

К сведению

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

К сведению

К сведению

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

Лиса выглядывает изза дерева Подготовка ролика

Рисунок 8.8. Лиса выглядывает из-за дерева

Найди лису

Найди лису

Исходный файл: Findafox.fla
В игре "Найди лису" игроку показывают изображение, в котором он должен определить местоположение определенных объектов. В данном случае в ролике Findafox.fla местом действия является лес, а объектами, которые ищет игрок, - лисы.
На первый взгляд игра представляется простой, однако основная ее идея в том, чтобы хорошо замаскировать объекты. На Рисунок 8.1 показан ролик, изображающий семь лис, спрятанных в лесу.

Одна из лис выглянула из отверстия Подход

Рисунок 8.4 Одна из лис выглянула из отверстия

Охота на лис

Охота на лис

Исходный файл: Huntafox.fla
Одна из самых устойчиво популярных долгие годы игр - "Охота на оленей". В этой игре вы часами сидите, наблюдая пейзаж, пока не покажется олень, которого можно будет застрелить. Несмотря на то, что продано миллионы копий этой игры, она достаточно простая. Во Flash можно легко сделать что-нибудь в этом роде.

Подготовка ролика Структура ролика

Слоев с лисами два. Один слой содержит лис, прячущихся за кустами, а другой - прячущихся за деревьями. Клипы с лисами за деревьями носят имена от "foxO" до "fox6", а клипы с лисами за кустами - от "fox7" до "fox9".
Клипы с лисами такие же, как в игре "Подстрели лису", только лиса остается видимой гораздо дольше. Чтобы лисы могли прятаться за узкими деревьями, в каждом клипе я использовал слои-маски, позволяющие скрыть те части лисы, которые не должны быть видны.
Изображения лис внутри каждого клипа с лисой такие же, как в игре "Подстрели лису". Однако последний кадр анимации попадания отправляет родительский клип назад к его первому кадру. Это означает что, когда вы попадаете в лису, она исчезает сразу же, как заканчивается анимация попадания.

Подготовка ролика

Подготовка ролика

Наиболее сложная часть создания игры - подготовка фона. Наш ролик состоит из девяти слоев, включающих изображения земли, деревьев и других элементов леса. Использование различных слоев необходимо для того, чтобы лисы могли быть спрятаны за некоторыми из них.
Ролик также включает два вида клипов с лисами. В одном лиса показана при помощи тонких линий, чтобы ее можно было спрятать в нарисованном стволе дерева. Другой представляет собой сплошное изображение лисы, которое появляется на заднем плане. Оба клипа приведены на Рисунок 8.2.

Подготовка ролика

Подготовка ролика

Имеющиеся 18 отверстий в бревне - это 18 копий одного клипа. Первый кадр данного клипа изображает обычное отверстие. Следующим элементом временной шкалы клипа является анимация лисы, ненадолго выглядывающей из отверстия и затем вновь исчезающей. Другая анимационная последовательность изображает попадание в лису и ее исчезновение. Она запускается, если пользователь успел щелкнуть по лисе (Рисунок 8.5)

Подготовка ролика

Подготовка ролика

Наиболее сложным является создание клипов. Чтобы лучше понять, о чем пойдет речь в этом разделе, внимательно изучите ролик Shootafox.fla.
В библиотеке вы увидите три клипа: Peeking Fox (Выглядывающая лиса), Running fox (Бегущая лиса) и Swinging fox (Раскачивающаяся лиса). Каждый из этих клипов состоит из одного кадра или короткой анимации лисы, за которой следует короткая анимация, изображающая удивленную лису, обведенную желтым контуром. Первая часть соответствует, движению живой лисы, вторая часть обозначает, что пользователь зверька. Вторая часть начинается с кадра, имеющего метку "hit". Ролик также включает семь клипов с именами "fox()" - "fox6". Эти клипы содержат внутри себя один из вышеописанных клипов, однако теперь, анимация изображает, как лиса движется по игровому полю или выглядывает из-за дерева. Клипы, расположенные внутри каждого из клипов с именами "fox0" - "fox6", содержат метку "fox", благодаря чему код может обращаться к ним. Для того чтобы показать, что лиса поражена, копия клипа "fox", находящегося внутри клипов "fox0" - "fox6", переходит к кадру "hit".
Большое значение имеет распределение слоев. Ролик состоит из 15 слоев, представляющих собой либо элементы обстановки (в данном случае лес), либо самих лис. Это позволяет прятать лис за одними предметами и показывать перед другими. Отдельные слои зарезервированы для клипов "actions" и "cursor".
В качестве курсора используется клип с изображением перекрестия. За кадром 1, в котором находится простое перекрестие, следует небольшая анимация вспышки, запускаемая во время выстрела игрока. Затем клип возвращается к кадру 1, который содержит команду stop ().
Как и остальные ролики, рассматриваемые в данной главе, этот ролик включает начальное окно игры, саму игру и окно завершения игры.

Подход Каждое отверстие в бревне

Другой клип под названием "actions" управляет очередностью и периодичностью воспроизведения клипов. В начале игры лисы будут выглядывать через каждые две секунды. С каждым разом интервал между появлениями лис немного сокращается.
Когда игрок щелкает по экрану, клип "actions" определяет, какая лиса была выбрана. После этого клип воспроизводит другую анимацию, изображающую лису в состоянии легкого шока.
Каждый раз при появлении лисы значение счетчика увеличивается на один пункт. Когда игрок попадает в лису, значение другого счетчика Taк же увеличивается на единицу. Счет отображается следующим образом: количество попаданий в лису, потом знак /, затем количество появлений лисы. Другими словами, значение "5/12" будет обозначать, что игрок поразил 5 лис из 12.

Подход

Подход

Может показаться, что эту игру до смешного легко создать. И действительно, игра бы состояла всего из нескольких кнопок, если бы не следующие два условия: во-первых, необходима обратная связь с пользователем, он должен знать, какие объекты найдены; во-вторых, игра должна распознавать, найдены ли все объекты.
Обратную связь можно создать, применив к клипу, содержащему лису, свойство трансформации цвета. Применив соответствующий цвет, вы добьетесь выделения лисы.
Для того чтобы определить, все ли лисы найдены, используется массив истинных и ложных значений. В начале игры массив содержит семь ложных значений. По мере того, как пользователь будет находить лис, значения станут меняться на истинные. Когда все семь значений массива примут значение true, игрок поймет, что нашел всех лис.
Вместо кнопок мы будем использовать клипы. Кроме того, потребуется управляющий клип со сценарием ActionScript, следящим за нажатием кнопки мыши. Когда нажатие будет обнаружено, функция hitTest кода начнет проверку клипов с изображениями лис и определит, какой из них был выбран. Это происходит аналогично определению выбранного клипа в игре "Составь лису', которая описывалась в главе 7.

Подход

Подход

Поскольку рассматриваемая игра была создана на основе игры "Поймай лису", основная часть кода должна быть вам знакома. Тем не менее, в него были внесены некоторые изменения и дополнения.
Первые изменения касаются способа организации клипов, которые должны содержать анимацию движения и одновременно показывать, произошло ли попадание в лису. Для этого необходимо использовать клип внутри клипа. Вложенный клип имеет два состояния: "поражен" и "не поражен". Во внешнем клипе описывается движение лисы.
В игре отслеживается и обшее количество выстрелов, и количество попаданий. Оба числа отображаются на экране. После того как пользователь израсходует все выстрелы, игра завершается.
Еще одно новшество данной игры - использование необычного курсора. Стандартный курсор мыши спрятан, вместо него виден клип, перемещающийся по рабочему полю за курсором (см. нижнюю часть Рисунок 8.7).

Подход

Подход

Все, что вы должны сделать по сравнению с предыдущей игрой, - это позволить пользователю перемешаться по большому фоновому изображению из стороны в сторону. Но это не так-то просто. Одни элементы фона ближе к играющему, чем другие. Чтобы у игрока действительно создалось ощущение движения охотника, близкие объекты должны двигаться быстрее дальних.
Чтобы этого добиться, мы разбиваем элементы фона на четыре группы: близко - деревья, подальше - кусты, еще дальше - холмы, затем - небо и земля. Небо и земля остаются неподвижными. А деревья, кусты и холмы движутся в зависимости от того, насколько далеко они от игрока.
Лисы прячутся за деревьями и в кустах. Это значит, что они должны двигаться вместе с этими элементами. Посмотрите на исходный файл Huntafox.fla на сайте, чтобы понять, как это выглядит. Если вы двигаете курсор вправо по рабочему полю, панорама смешается вправо. Видите, как деревья движутся быстрее кустов, а кусты быстрее холмов? Заметьте также, что деревья иногда затеняют кусты. Хорошему игроку нужно совсем немного подвигать панораму, чтобы убить максимально возможное количество лис. На Рисунок 8.8 показан случай, когда лиса выглядывает за-за дерева.

Подстрели лису

Подстрели лису

Исходный файл: Shootafox.fla
Рассмотрим еще одну игру из серии "Найди и нажми" - игру-тир. Как и в игре "Найди лису", задача пользователя - щелкнуть по объектам на экране. На игру "Поймай лису" она похожа тем, что объекты появляются на экране в произвольных местах и через произвольный интервал времени.
Но в отличие от предыдущих игр, объекты будут двигаться, лиса будет не просто появляться из отверстия, а бегать, поворачиваться или выглядывать из-за дерева. Игрок должен обладать хорошей реакцией, чтобы попасть по лисе до того, как она снова исчезнет.
На Рисунок 8.7 показана сцена, очень напоминающая сцену игры "Найди лису". Однако теперь лиса не будет ждать, пока игрок обнаружит ее.

Поймай лису

Поймай лису

Исходный файл: Whackfox.fla
Одна из игр в залах игровых автоматов прошлых лет называлась "Поймай крота". Игровое поле представляло собой плоскость, в отверстиях которой появлялись небольшие объекты, похожие на кротов. При помощи мягкого молотка, обычно привязанного к автомату, необходимо было ударять по кротам. Они появлялись нерегулярно и в случайном порядке, поэтому для игры была необходима хорошая реакция.
Существуют различные компьютерные варианты подобной игры, очень популярные в сети. Они построены по тому же принципу, что и игра "Поймай крота", хотя редко похожи на нее. Объекты появляются в случайных местах и в произвольное время, и игрок должен щелкнуть по ним прежде чем они исчезнут.
На примере ролика Whackfox.fla мы рассмотрим более традиционный вариант этой игры. На Рисунок 8.3 изображена игровая область: бревно с 18 отверстиями. Время от времени из отверстия на одну-две секунды выглядывает лиса. Щелкнув по лисе, игрок получает очки.

Рисунок демонстрирует кадр анимации

Рисунок демонстрирует кадр анимации, в которой лиса быстро перебегает из одной части экрана в другую.
Рисунок 8.7 В игре "Подстрели лису" лиса перемешается по игровому полю

Сцена включает семь спрятанных

Рисунок 8.1 Сцена включает семь спрятанных лис, которых должен найти игрок

Создание кода Весь код данной

// Указываем промежуток времени между появлениями лис.
timeBetweenFoxes = 2000;
// Определяем время до появления следующей лисы.
nextFox = getTimer() + timeBetweenFoxes;
// Инициализируем переменные пораженных и показанных лис.
score = 0;
numFoxes = 0;
} Функция getTimer () - это своеобразные часы. Функция возвращает количество миллисекунд, прошедших после начала ролика. Значение этих часов постоянно увеличивается, поэтому данную функцию удобно использовать для управления временными интервалами в вашей игре.
Функция onClipEvent (enterFrame) определяет, наступило ли время для появления следующей лисы. Затем она выбирает такое новое отверстие, которое не используется в данный момент. Интервал времени между появлениями лис сокращается на 10 миллисекунд, в результате чего игра с каждым разом все больше ускоряется. Если значение интервала составляет менее 1000 миллисекунд, игра завершается. За 150 секунд пользователь получает 100 возможностей поразить лису. onClipEvent (enterFrame) {
// Определяем, не пора ли показывать следующую лису,
if (getTimerO >= nextFox) {
// Сокращаем время между показами.
timeBetweenFoxes -= 10;
// Выясняем, не пора ли заканчивать игру,
if (timeBetweenFoxes < 1000) {
_root.gotoAndPlay("End") ;
// Если нет, показываем следующую лису.
} else {
// Увеличиваем счетчик показанных лис.
numFoxes++; _root.showScore = score + "/" + numFoxes;
// Определяем, какая лиса покажется,
while (true) {
fox = Int (Math.Random0*18) ;
if (_root["fox"+fox]._currentFrame == 1) break;
// Выбранная лиса появляется из отверстия.
_root ["fox"+fox].gotoAndPlay ("popup") ;
// Устанавливаем время появления следующей лисы.
nextFox = getTimerO + timeBetweenFoxes;
}
}
}
Следующая функция обрабатывает нажатия кнопки мыши пользователя. Здесь используется тот же самый прием, что и в игре "Найди лису": программа проверяет клипы на попадание по ним при помощи функции hitTest.
Также программа проверяет, воспроизводится ли анимационная последовательность, в которой лиса выглядывает из отверстия. Кадр 1 клипа является статическим и представляет собой простое отверстие. Кадры 2-24 - это анимация лисы, которую поразил пользователь. Пользователь может щелкнуть по лисе только во время анимации, в которой лиса выглядывает из отверстия (эта анимация начинается с кадра 25). Таким образом, если номер кадра больше, чем 24, щелчок разрешается. В противном случае он игнорируется. onClipEvent (mouseDown) {
// Определяем, по какому месту щелкнул пользователь.
х = _root. _xmouse;
у = _root. _ymouse;
// Проверяем на попадание всех лис.
for (i=0;i // Проверяем только выглядывающих лис.
if (_root["fox"+i]._currentFrame > 24) {
// Выясняем, попал ли пользователь по лисе,
if (_root["fox"+i].hitTest(x,у,false)) {
// Воспроизводим анимацию, соответствующую попаданию.
_root["fox"+i].gotoAndPlay("whack");
// Увеличиваем количество очков.
score++;
_root.showScore = score + "/" + numFoxes;
}
}
}
}
}

Создание кода

Создание кода

При загрузке клипа в нем создается массив found. Следующий код заполняет массив значениями false: onClipEvent (load) {
// Создаем массив, в который записываем, какие лисы
// найдены.
found = [];
for (i=0; i<7; i++) {
found[i] = false;
}
}

При нажатии кнопки мыши положение курсора сохраняется в переменных х и у. Затем при помощи функции hitTest эти значения соотносятся с координатами клипов лис. Когда совпадение найдено, соответствующее изображение становится красным. Этого достаточно, чтобы изображение спрятанной лисы выделилось из фона. Каждый щелчок мышью запускает проверку массива found на наличие значения false. Это означает, что, по крайней мере, одна лиса еще не найдена. Когда все лисы найдены, клип переходит к следующему кадру: onClipEvent (mouseDown) {
// Определяем, в каком месте пользователь щелкнул мышью.
х = _root._xmouse;
у = _root._ymouse;
// Проверяем, какое изображение лисы найдено,
for (i=0; i if (_roott"fox"+i],hitTest(x, y, false)) {
// Изменяем цвет лисы.
myColor = new Color(_root["fox"+i]);
myColor.setTransform({rb:128,bb:0,gb:0});
// Запоминаем, что лиса найдена.
found[i] = true;
break;
// Проверяем, все ли лисы найдены.
gameover = true;
for (i=0; i if (found[i] == false) {
// Если хотя бы одна еще не найдена,
// игра не закончена.
gameover = false;
//если пользователь выиграл.
// Заканчиваем игру,
if (gameover) {
_root.gotoAndPlay ("Game Over");
}
}

Команда break используется в цикле for и других для его немедленной остановки. Это удобно, когда по той или иной причине необходимо остановить цикл. В вышеприведенном коде цикл проходит значения от 0 до 6, но может завершиться в случае, если функция hitTest примет значение true.

Создание кода

Создание кода

Как и в предыдущих примерах, основной код назначен клипу "actions". Первая часть кода - функция onClipEvent (load). Клип устанавливает счета на 0 и инициализирует переменную shotsLeft, которой присваивается значение 50. Это позволяет игроку сделать 50 выстрелов и убить как можно больше лис. Переменная shotsLeft используется для отображения счета на экране, а переменная showshotsLeft, связанная с текстовой областью, отображает, сколько выстрелов осталось у игрока.
При помощи функции Mouse.hide () в блоке onClipEvent (load) скрывается курсор мыши. onClipEvent (load) {
// Задаем время между появлениями лис.
timeBetweenFoxes = 2000;
// Вычисляем, когда должна появиться следующая лиса.
nextFox = getTimer()+timeBetweenFoxes;
// Инициализируем переменную, содержащую количество
// попаданий и число выстрелов.
score = 0;
shotsLeft = 50;
_root.showScore = "Score:"+score;
_root.showShotsLeft = "Shots Left:"+shotsLeft;
// Прячем курсор.
Mouse.hide();
}
Использование объекта Mouse позволяет контролировать видимость курсора, расположенного над рабочим полем ролика. При помощи команды Mouse.hide() вы можете скрыть курсор, при помощи команды Mouse. show () - вновь вывести его на экран. Так как курсор скрыт, его необходимо заменить чем-нибудь, чтобы игрок видел, по какому месту экрана он щелкает. В данном случае клип "cursor" ставится в соответствие положению курсора мыши. В остальном функция onClipEvent (enterFrame) повторяет аналогичную функцию игры "Поймай лису".
onClipEvent (enterFrame) {
// Передвигаем курсор.
_root["cursor"]._x = _root._xmouse;
_root["cursor"]._y = _root._ymouse;
// Проверяем, не пора ли показывать следующую лису
if (getTimer()>=nextFox) {
// Сокращаем время до следующего появления лисы.
timeBetweenFoxes -= 5;
// Проверяем, не завершена ли игра
if (shotsLeft < 1) {
_root.gotoAndPlay("End");
// Если нет, показываем новую лису.
} else {
// Задаем появление новой лисы,
while (true) {
fox = int(Math.Random()*7);

if (_root["fox"+fox]._currentFrame == 1) { break;
}
}
// Начинаем анимацию лисы.
_root["fox"+fox].gotoAndPlay(2);
// Вычисляем момент появления следующей лисы.
nextFox = getTimer()+timeBetweenFoxes;
}
}
}

Функцию onClipEvent (mouseDown) из игры "Поймай лису" необходимо изменить, учесть условия игры "Подстрели лису". Прежде всего, в качестве активной точки курсора будут использоваться координаты клипа "cursor", а не реальные координаты курсора мыши, которые с обновлением кадра могут немного измениться. Затем в функции проверяется. попал ли пользователь по какому-нибудь из семи клипов. Если один из клипов поражен, в клипе "fox" внутри пораженного клипа осуществляется переход к кадру "hit" - пользователь видит, что попал в лису. Значение переменной score увеличивается в случае поражения лисы, значение переменной shotsLeft уменьшается в любом случае.
Игра заканчивается, когда с помощью функции onClipEvent (enterFrame) перед созданием новой лисы обнаруживается, что у игрока не осталось выстрелов. Ролик завершается не сразу после последнего выстрела, а через одну - две секунды. onClipEvent (mouseDown) {
// Показываем анимацию выстрела.
_root["cursor"].gotoAndPlay("blast");
// Определяем координаты курсора.
x = _root._root["cursor"]._x;
y = _root._root["cursor"]._y;
// Проверяем, в какую лису попал пользователь,
for (i=0; i<7; i++) {
// Проверяем на попадание только "высунувшихся" лис.
if (_root["fox"+i]["fox"]._currentFrame <= 1) {
// Проверяем, попал ли пользователь
//в какую-либо из лис.
if (_root["fox"+i].hitTest(x, y, false)) {
// Показываем, что попал.
_root["fox"+i].fox.gotoAndPlay("hit");
// Увеличиваем счет.
score++;
}
}
}
// Уменьшаем число оставшихся выстрелов.
shotsLeft--;
// Обновляем счет, отображаемый на экране.
_root.showScore = "Score:"+score;
_root.showShotsLeft = "Shots Left:"+shotsLeft;
}
Данный код также задает переход клипа, содержащего курсор, к кадру "blast", анимация вспышки продолжается в течение нескольких кадров, затем ролик возвращается к кадру 1. Даже если игрок не попал в лису, он видит, что выстрел был сделан.
Следующая функция, onClipEvent(unload), запускается перед исчезновением клипа с рабочего поля. Это происходит при завершении игры. В данном случае функция необходима, чтобы сделать курсор видимым. onClipEvent (unload) {
// Отображаем обычный курсор.
Mouse.show();
}

Создание кода

Создание кода

Хотя и клипы и слои отличаются от тех, что использованы в игре "Подстрели лису", основной сценарий этой игры применим и в нашем случае. Это сценарий, назначенный клипу "actions". Необходимо внести только два изменения, и я не буду приводить здесь весь код. Первое изменение состоит в том, что теперь можно выбирать из 10, а не из 7 лисиц, поэтому число внутри функции Math.random должно быть 10.
Второе изменение обращает внимание на положение курсора, так что сцена перемешалась, если пользователь двигает курсор вправо или влево. В этом случае вызывается функция moveScene на корневом уровне. Она принимает значения -1 или 1 в зависимости от направления движения. // Перемещаем панораму,
if (_root._xmouse < 50) {
_root.moveScene(1);
} else if (_root._xmouse > 500) {
_root.moveScene(-1);
}
Клип "moveScene" находится на главной временной шкале. Этот сценарий начинается с определения нескольких переменных. panAmount отслеживает расстояние, на которое пользователь сдвинулся вправо или влево. Например, если пользователь двигается влево, тогда графика движется вправо и panAmount принимает значение 1. Если он продолжает двигаться в этом направлении, panAmount увеличивается до 2, -, и т.д. Если пользователь движется в противоположном направлении, panAmount принимает значения -1, -2 и так далее.
Поскольку мы не можем нарисовать бесконечно широкую сцену, нам приходится задавать границы панорамирования. Две переменные содержат максимально разрешенное передвижение влево и вправо. Я определил эти границы путем проб и ошибок. Начал я с 50 и увидел, что игрок может доходить до конца деревьев. Тогда я начал пробовать меньшие числа, пока игрок не перестал вылезать за границы сцены. panLimitLeft = -30;
panLimitRight = 30;
panAmount = 0 ;
Чтобы перемешаться по сцене, сначала проверяется, не превышает ли следующее значение panAmount допустимые границы. Функция работает только в том случае, если следующее значение находится в пределах допустимого.
Потом три клипа - "trees", "bushes" и "hills" - перемещаются в нужном направлении. Деревья перемещаются с коэффициентом (фактически скоростью) 10, кусты - с коэффициентом 5 и холмы - 4. Я подобрал эти значения путем проб и ошибок. По-моему, они создают достаточное ощущение глубины.
Первые 7 лисиц, которые находятся прямо за деревьями, движутся с ними вместе с коэффициентом движения 10. Остальные три лисы перемещаются с коэффициентом 5, поскольку сидят за кустами. function moveScene(d) {
// Проверяем, не выходит ли значение панорамирования за
// разрешенные границы.
if ((panAmount+d > panLimitLeft) and (panAmount+d < panLimitRight)) {
// Увеличиваем значения.
panAmount += d;
// Передвигаем слои с разными скоростями,
trees._x += d*10;
bushes._x += d*5 hills._x += d*4;
/7 Передвигаем клипы "foxes 0-6".
for{i = 0;i<7;i + + ) {
_root["fox"+i]._x += d*10;
// Передвигаем клипы "foxes 7-9"
for(i=7;i<10;i++) {
_root [ "fox"+i] ._x += d*5;
}
}
}
Я уже упоминал, что в конце клипа "peeking fox" появляется новый сценарий. Клип "peeking fox" содержится внутри всех трех клипов с лисами. Это статичное изображение лисы. Также он содержит короткую анимацию попадания, которую показывает при щелчке пользователя по лисе. В конце этой анимации я возвращаю клип "peeking fox" в начальную позицию, а также отправляю родительский клип к первому кадру. Это означает, что вместо того чтобы проигрывать анимационную последовательность "покажи - подожди - спрячь", лиса сразу оказывается видимой. gotoAndStop(1);
_parent.gotoAndStop(1);

Текстовая область связывается

Рисунок 8.6 Текстовая область связывается с переменной showScore в панели Properties

После того как все семь

После того как все семь лис найдены, игра должна автоматически перейти в новое окно. Это значит, необходимо следить за тем, какие объекты найдены, а какие нет.

и менее запускается одна из

С интервалом в две секунды и менее запускается одна из анимационных последовательностей, и игрок получает возможность щелкнуть по лисе. Анимация должна продолжиться, показав перед этим, попал ли игрок в цель.
Игра должна отслеживать количество сделанных выстрелов и количество попаданий, а также задавать ограничение на число произведенных выстрелов. Курсор следует сделать не в виде стрелки, а в виде прицела ружья.

показан кадр анимации игры.

На Рисунок 8. 4 показан кадр анимации игры. В то время, когда лиса выглядывает, пользователь должен щелкнуть по ней и получить очки.
Игра ведется на время и счет.

в том, чтобы сделать игру

Задача проекта

Задача состоит в том, чтобы сделать игру - стрелялку, позволяющую пользователю передвигаться влево и вправо по пространству, большему, чем способно вместить в себя рабочее поле экрана. Мишени возникают в случайное время и в случайных местах, вне зависимости от того, куда сейчас смотрит игрок. Перемещение должно создавать игроку иллюзию пространства, так чтобы близкие объекты двигались быстрее далеких.

Создание Flash игр -практические уроки

Центр координат клипа с лисой

Рисунок 9.2 Центр координат клипа с лисой находится в середине корзинки

Другие возможности

Другие возможности

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

Другие возможности

Другие возможности

Это обучающая игра и, к сожалению, подходит лишь для маленьких детей, еще не выучивших алфавит. Однако вы можете изменить содержимое каждого кадра, содержащего хорошее или плохое яблоко. Одним из вариантов может быть увеличение яблока, для того чтобы на нем могла поместиться более длинная фраза.
Вариантом для детей более старшего возраста могут быть яблоки, включающие глаголы и существительные. Они также могут содержать четные и нечетные числа, числа кратные трем или сокращаемые дроби. Дети еще более старшего возраста могут выбирать страны определенного континента или названия деревьев. Игра может иметь любую тему, главное, чтобы на вопросы можно было дать ответ "верно/неверно".

Другие возможности

Другие возможности

Так как столкновение замедляет скорость игры, она представляет собой идеальный вариант игры на время. Начало игры можно обозначить при помощи объекта date (см. раздел "Аналоговые часы" в главе 6). Теперь вы будете знать, сколько игроку требуется времени для прохождения игры. На скорость байдарки может влиять не только столкновение со скалой. Соответственно изменив код, вы можете сделать так, чтобы байдарка набирала скорость только при движении вперед. Это сделает игру более захватывающей.
Вы можете создать другой вариант данной игры: попробуйте изменить направление движения объектов, вместо байдарки используйте машину или велосипед, а реку замените дорогой. Получится хорошая игра-гонка

Другие возможности

Другие возможности

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

Если центр яблока попадает в прямоугольную

Рисунок 9.3 Если центр яблока попадает в прямоугольную область размером 50x20 пикселов, расположенную вокруг центра корзины, оно считается пойманным функция Math. abs () (модуль числа) используется, чтобы определить, столкнулись ли объекты. Если из координат одного объекта вычесть координаты другого, получается положительное или отрицательное значение. Например, если первый объект находится на расстоянии 7 пикселов вправо от второго, вы получаете значение 7, если слева -значение -7. Функция Math. abs () убирает знак, благодаря чему в обоих случаях вы получаете значение 7. Аналогичным образом вы можете проверить, находится ли объект на определенном расстоянии слева или справа от другого.
Если яблоко поймано или упало на землю, вызывается функция removeapple. В первом случае также происходит увеличение счета. function moveApples() {

// Проверяем все падающие в данный момент яблоки,
for (i=firstApple;i // Определяем координаты яблока.
х = _root["apple"+i]._x;
у = _root["apple"+i]._y + appleSpeed; // Проверяем, достигло ли яблоко земли,
if (у > 400) {
removeApple(i);
// Проверяем, попало ли оно в корзину.
}
else if ((Math.abs(y-fox._y) < 10) and (Math.abs(x-fox._x) < 25))
{
removeApple(i) ;
score += 1;
// В противном случае яблоко продолжает падать
} else {
_root["apple"+i]._y = у;
}
}
}
При помощи функции removedClip функция removeapple удаляет клип. Она также увеличивает значение переменной firstapple, в результате функция moveapple прекращает перемешать яблоко вниз.
Если яблоко было последним, ролик переходит к кадру "game over". При этом ролик лисы удаляется с экрана. function removeApple(n) {
// Убираем яблоко с экрана.
_root["apple"+n].removeMovieClip();
// Увеличиваем указатель на первое яблоко на единицу.
firstApple = п+1;
// Проверяем, не последнее ли это яблоко?
if (n == totalApples) {
fox.removeMovieClip();
gotoAndPlay("game over");
}
}

Гонки

Гонки

Исходный файл: Racing.fla
Чтобы сделать из игры "Сплав на байдарке" игру "Гонки", надо просто изменить графику и ничего больше. Замените байдарку на машину. Замените кадры с поворотами, чтобы показывать поворот колес машины, а не поворот байдарки в другом направлении. Замените кадр перевернувшейся лодки на кадр автокатастрофы и т.д.
Однако мы можем использовать похожую технику для создания гоночных игр разных типов. Вместо вида на дорогу сверху мы можем сделать вид с водительского места. Дорога движется к игроку (см. рис 9.9).

Игра "Сплав на байдарке" состоит

Рисунок 9.6 Игра "Сплав на байдарке" состоит из байдарки в центре экрана и камней и веток деревьев, несущихся ей навстречу



Большая часть кода будет взята из двух игр, рассмотренных ранее в данной главе. Однако, в отличие от предыдущих игр, избегать придется все, а не только некоторые объекты. Счет будет содержать не количество набранных очков, а количество столкновений байдарки с объектами. Чем больше произойдет столкновений, тем скорее закончится игра.

Элементами игры "Поймай хорошее

Рисунок 9.4 Элементами игры "Поймай хорошее яблоко" являются яблоки с нарисованными буквами

Элементами игры "Поймай яблоко"

Рисунок 9.1 Элементами игры "Поймай, яблоко" являются лиса в нижней части экрана и яблоки, падающие сверху

К сведению

К сведению

Вышеприведенный код использует установленный по умолчанию размер рабочего поля для ролика - 550x400. Если вы хотите указать другой размер, необходимо внести соответствующие изменения в код. Вы также можете настроить левую и правую границу игрового поля. Выше приведенный код ограничивает расположение яблок и лисы по вертикали диапазоном между 30 и 520 пикселами, задавая ширину границы, размером 30 пикселов. Вы можете их увеличить или уменьшить.
Для остановки анимации первый кадр клипа лисы должен содержать команду stop (). Не забудьте также вставить команду gotoAndPlay в последний кадр клипа.
Ролик содержит динамическую текстовую область, связанную с переменной score, поэтому отображение счета не составит проблемы.
Полная игра (файл Applecatch.fla), состоит из трех кадров. Первый является кадром начала игры и содержит команду stop(). При помощи соответствующей кнопки осуществляется переход к кадру "Play", в котором происходит основное действие игры. Затем следует кадр "Game Over". В отличие от предыдущих игр, использующих различные сцены, кадры данной игры находятся в одной и той же. Но вы можете использовать вариант и с различными сценами.

К сведению

К сведению

Как и в игре "Поймай яблоко" перед и после кадра "play" находятся соответственно кадры "start" и "game over". He забудьте также о текстовой области "score" и других компонентах, упомянутых в разделе "К сведению" для предыдущей игры.

К сведению

К сведению

Данная игра содержит два кадра, обозначающих конец игры. Первый кадр имеет метку "lose" и содержит сообщение для игроков, которые столкнулись с большим количеством камней и проиграли игру. Второй кадр, помеченный как "win", содержит сообщение для тех, кто миновал все камни. Кадры отличаются только текстом. Оба кадра содержат кнопку "Play" для перезапуска игры.

К сведению

К сведению

Ролик-пример содержит вводный кадр и в нем кнопку начала игры. Третий кадр содержит сообщение "Game over" и не включает в себя клип с бонусом, который содержится только во втором кадре. Это предотвращает получение игроком очков после окончания игры. Я также добавил в ролик-пример фоновый пейзаж.

bad apple" состоит из 20

Рисунок 9.5 Клип " bad apple" состоит из 20 кадров. Каждый кадр содержит изображение яблока и одного из согласных звуков


function initGame() {
// Инициализация переменных, хранящих
// номера первого и последнего яблока.
firstApple = 1;
lastApple = 0;
// Инициализация переменной, хранящей число пойманных яблок,
score = 0;
// Задаем общее количество яблок.
totalApples = 50;
// Скорость падения и счетчик времени между появлениями яблок.
timeSinceLastApple = 0;
appleSpeed = 5;
// Создаем экземпляр клипа, содержащий лису.
attachMovie("running fox","fox",999999);
fox._x = 275;
fox._y = 300;
}

Функция moveFox полностью совпадает с аналогичной функцией игры "Поймай яблоко", поэтому нет смысла повторять ее здесь. Функция drop-NewApple будет отличаться, так как она должна выбирать, какое яблоко бросать, а затем отображать произвольный кадр выбранного клипа. function dropNewApple() {
// Проверяем, прошел ли заданный промежуток времени,
if (timeSinceLastApple > 20) {
// Бросаем яблоко, если не превышено
// их предельно допустимое количество,
if (lastApple < totalApples) { // Устанавливаем вероятность сброса яблока в 10%.
if (Math.random() < .1) {
// Создаем объект-яблоко.
lastApple++;
if (Math.random() < .5) {
//В 50% случаев яблоко плохое.
attachMovie( "bad apple", "apple"+lastApple, lastApple);
_root["apple"+lastApple].type = "bad";
} else {
// В 50% случаев яблоко хорошее.
attachMovie( "good apple", "apple"+lastApple, lastApple);
_root["apple"+lastApple].type = "good";
}
f=int(Math.Random()*_root["apple"+ lastApple]._totalFrames) + 1;
trace(f);
_root["apple"+lastApple].gotoAndStop(f) ;
_root["apple"+lastApple]._x = Math.random()*490+30;
_root["apple"+lastApple]._y = 0;
// Сбрасываем счетчик времени ожидания.
timeSinceLastApple = 0;
// Увеличиваем скорость падения яблока
if (appleSpeed < 10) appleSpeed += .5;
}
}
}
// Если не бросили яблоко, приближаем это событие.
timeSinceLastApple++;
}

Функция dropNewApple создает переменную type для каждого клипа. Хотя данные клипы не имеют внутри себя сценария, для них можно определять переменные. Поэтому переменная type для гласных звуков будет иметь значение "good", для согласных- bad". Данная переменная проверяется в функции moveApples, когда игрок ловит яблоко. Таким образом, можно определить, поймал ли игрок хорошее яблоко или плохое. function moveApples() {
// Проверяем все летящие яблоки.
for (i = f irstApple,- i // Определяем местоположение яблока.
х = _root["apple"+i]._x;
у = _root["apple"+i]._y + appleSpeed;
// Выясняем, достигло ли яблоко земли,
if (у > 400) { removeApple(i);
// Попало ли в яблоко корзину?
} else if ((Math.abs(y-fox._y) < 10) and (Math.abs(x-fox._x) < 25))
{ if (_root["apple"+ij.type == "good") {
// Если яблоко хорошее, увеличиваем очки,
score += -1;
} else {
// Если плохое - уменьшаем.
score -= 1;
// Проверяем, чтобы количество очков
//не было отрицательным числом,
if (score < 0) score = 0;
}
removeApple(i) ;
// Продолжаем перемещать яблоко.
} else {
_root["apple"+i]._y = y;
}}}


Функция removeApple аналогична соответствующей функции в игрe "Поймай яблоко".

Область возможного столкновения

Рисунок 9.8 Область возможного столкновения показана прямоугольником. Поскольку контроль пересечения с камнем ведется по центру клипа "rocks", то реальная область столкновения выглядит несколько меньше


Количество столкновений сохраняется в переменной spills. После шести столкновений игра переходит к кадру с меткой "lose", и игра считается завершенной. При этом происходит вызов функции removeAll, которая будет рассмотрена далее. function moveRocks() {
// Проверяем все камни.
for (i=firstRock;i // Определяем координаты камня.
x = _root["rock"+i]._x; y = _root["rock"+i]._y - riverSpeed;
// Выясняем, вышел ли камень из поля зрения.
if (y < -50) {
removeRock(i);
// Проверяем, что с камнем не было столкновений.

} else if ((_root["rock"+i].hit == false) and (Math.abs(y-fox._y) < 60) and (Math.abs(x-fox._x) < 25)) {
spills += 1;
// Столкновение.
_root["rock"+i].hit = true;
// Переворачиваем байдарку.
fox.gotoAndPlay("spill");
// Останавливаем байдарку.
riverSpeed = 0;
// Игра закончена?
if (spills > 5) {
removeAll();
gotoAndPlay("lose");
}
}
// Продолжаем перемещать камень.
_root["rock"+i]._y = y;
}
}
Как и функция removeApple, функция removeRock предназначена для проверки того, является ли данный камень последним. В этом случае игра переходит к кадру с меткой "win". function removeRock(n) {
// Убираем со сцены клип камня.
_root["rock"+n].removeMovieClip();
// Увеличиваем счетчик для первого камня.
firstRock = n+1;
// Проверяем, был ли этот камень последним,
if (n == totalRocks) {
removeAll();
gotoAndPlay("win");
}
}
В предыдущем фрагменте кода указаны два случая завершения игры. В обоих случаях вызывается функция removeAll, которая убирает с экрана все оставшиеся скалы и клип лисы. Иначе эти элементы останутся на экране даже после завершения игры. function removeAll() {
// Убираем со сцены все объекты
for (i=firstRock;i _root["rock"+i].removeMovieClip();
}
fox.removeMovieClip();
}

Подготовка ролика Фон ролика представляет

Клип, содержащий яблоко, представляет собой статическое изображение. Клип с лисой более сложный. Его первый кадр, помеченный "stand", содержит изображение неподвижной лисы. Второй кадр, "run", представляет собой начало анимации, в которой ноги лисы двигаются. В последнем кадре анимации содержится функция gotoAndPlay, возвращающая клип к кадру "run". В результате мы имеем два варианта поведения клипа с лисой: первый- клип остается в кадре 1; второй запускает анимацию всех кадров, начиная с кадра 2.
Так как и лиса, и яблоки появляются в ролике только после соответствующего запроса кода, в диалоговом окне Linkage properties содержащим их эталонам необходимо назначить свойство "Export for ActionScrip. Яблоко получает идентификатор "apple", лиса - идентификатор "running fox".

Подготовка ролика

Подготовка ролика

Вместо клипа "apples" мы будем использовать клип "rocks". В ролике Riverkayak.fla клип "rocks" состоит из трех кадров. Каждый кадр содержит анимированное изображение, состоящее из другого элемента библиотеки. Хотя каждый камень находится в одном кадре клипа, анимация воспроизводится в графическом элементе. Запустив ролик, вы увидите, что в каждом кадре вокруг камня течет вода.
Клип лисы , ловящей яблоки, будет заменен на клип лисы в байдарке Первый кадр изображает лису в байдарке, повернутой вниз по течению и с веслами над водой. Затем следуют кадры "left" и "right", содержащие изображение повернутой байдарки и одного весла, опущенного в воду. На Рисунок 9.7 изображена лиса, поворачивающая вправо. После этого в кадре 4 запускается анимация "spill", представляющая удар байдарки о камень.

Подготовка ролика

Подготовка ролика

Фон и линии, обозначающие границы дороги, - неподвижные элементы. Но для камней и звездообразных меток нужны клипы. Клип центральной линии - это просто линия, но расположенная таким образом, чтобы центральная точка клипа была на вершине линии.
Машина сама по себе нуждается в трех кадрах.- прямое движение, левый и правый повороты, которые используются, чтобы показать, что машина поворачивает.
Клипы камней и бонусных меток должны быть помещены под нижней границей экрана и названы "SideObject" и "bonus". Клип машины следует поместить внизу экрана и назвать "саг". Кроме того, слева находится клип "actions". Во всех четырех клипах содержатся сценарии. На экране должны быть два динамических текстовых поля: "timeDisplay» и "score". Они оба должны быть привязаны к переменным с такими же именами.
В ролике-примере я обозначил вводный кадр как кадр 1, таким образом, все действие начинается с кадра 2. Есть еше третий кадр с меткой "game over".

Подход

Подход

Для управления перемещением лисы используется объект Key. Он определяет, удерживает ли игрок клавишу (со стрелкой "вправо" или "влево"). Для создания объектов-яблок используется функция attachMovie. Яблоки помешаются в произвольные места в верхней части экрана, а затем начинают падать и либо ловятся лисой, либо достигают нижней границы экрана.
После создания яблока значение счетчика timesinceLastapple сбрасывается на 0. При каждом новом обращении к кадру его значение увеличивается. Следующее яблоко создается только тогда, когда счетчик принимает значение 20. Это означает, что яблоко может быть создано только через 20 кадров после появления предыдущего. Скорость падения яблока определяется переменной appleSpeed. Каждый раз при падении яблока переменная увеличивается. Таким образом, чем дольше длится игра, тем быстрее падают яблоки. Клип яблока удаляется либо после попадания в корзину, либо при достижении нижней границы экрана. Для того чтобы определить, попало ли яблоко в корзину, координаты яблока сравниваются с координатами корзины. Для облегчения вычислений центр координат клипа с лисой находится в середине корзинки. На Рисунок 9.2 показан этот клип (его центр отмечен крестиком).
После сбрасывания определенного количества яблок игра заканчивается. Счетом будет служить количество пойманных яблок, отображаемое в правом верхнем углу экрана.

Подход

Подход

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

Подход

Подход

Иллюзия глубины может быть достигнута простым использованием перспективы. На рисунке 9.9 показано, что границы дороги нарисованы диагонально по направлению к нижним углам экрана. Хотя ширина дороги предполагается постоянной, глазу кажется, что дорога спереди уже.
В дополнение к линиям, все элементы игры должны появляться с некоторого расстояния. Это означает, что они должны двигаться не только сверху вниз, но и в стороны. Сыграйте прямо сейчас, чтобы посмотреть, как движутся камни по краям дороги и дорожные метки, похожие на звезды.
Три типа элементов движутся в этой игре: камни по сторонам дороги, звездообразные "бонусы"-метки на дороге и центральная линия дороги. В зависимости от скорости машины камни движутся по экрану вниз быстрее или медленнее. Движение камней в сторону - разбегание, создающее иллюзию перспективы, - происходит с той же скоростью, что и вниз.
Звездообразные метки располагаются ближе к центру экрана, поэтому они движутся в стороны не так быстро, как вниз; скорость их движения в стороны составляет половину от значения скорости движения вниз. Это соответствует перспективе, заданной сторонами дороги. Центральная линия просто движется прямо вниз.
Все эти элементы повторяются в игре раз за разом. Например, как только камень достигает нижней границы экрана, он снова появляется на горизонте и опять движется к игроку.
В дополнение к движению трех элементов игры мы также изменяем их масштаб. Таким образом, объекты, которые предполагаются далекими, выглядят меньше и увеличиваются по мере приближения.
Наша цель не в том, чтобы создать перспективу, реальную до последнего пиксела, а в том, чтобы достаточно к ней приблизиться, предоставив возможность воображению пользователя довершить остальное и почувствовать себя въезжающим в экран.

Поймай хорошее яблоко

Поймай хорошее яблоко

Исходный файл: Applelettercatch.fla
В данном примере в предыдущую игру будет добавлено "плохое яблоко". Это довольно просто сделать. Давайте усложним задачу и сделаем так, чтобы хорошие и плохие яблоки выглядели по-разному.
На каждом падающем яблоке будет нарисована буква. В зависимости от того, гласная это или согласная, яблоко будет считаться хорошим или плохим.
На Рисунок 9.4 показан кадр из новой игры с несколькими падающими яблоками. Данный пример содержится в файле Applelettercatch.fla.

Поймай яблоко

Поймай яблоко

Исходный файл: Applecatch.fla
В первой игре "Поймай яблоко" лиса будет двигаться в нижней части экрана и пытаться поймать яблоки, падающие с дерева. На Рисунок 9.1 показан фрагмент игры. Полный ролик находится в файле Applecatch.fla.

Создание кода

Создание кода

Как и в большинстве наших игр, все события данной игры запускаются при помощи клипа "actions". В нашем примере этот клип расположен за пределами рабочего поля в верхнем левом углу экрана.
Сценарий, назначенный клипу "actions", вызывает функции главной временной шкалы ролика. Это упрощает код, так как перед именами клипов не нужно добавлять префикс _root. После зафузки клипа код вызывает функцию initGame, а затем вызывает три функции при каждом обращении к кадру. onClipEvent (load) {
root.initGame();
}

onClipEvent (enterFrame) {
_root.moveFox();
_root.dropNewApple();
_root.moveApples();
}
Таким образом, вся работа осуществляется четырьмя функциями, которые находятся в главной временной шкале. Рассмотрим каждую из них.
Первая функция, initGame, инициализирует в начале игры целый ряд переменных. Она создает и клип с лисой. Этот клип создается при помощи кода, а не добавляется при создании ролика потому, что лиса должна располагаться поверх яблок. Если бы клип лисы создавался одновременно с роликом, тогда каждое яблоко, созданное кодом, помещалось бы поверх лисы. Это позволяет нам управлять размещением уровня, в котором содержится лиса, относительно уровня с яблоками. Лисе отведен уровень 999,999. Яблоки будут помешаться начиная со слоя 1 и, следовательно, будут располагаться под лисой. function initGame() {
// Инициализация переменных, хранящих
// номера первого и последнего яблока.
firstApple = 1;
lastApple = 0;
// Инициализация переменной, хранящей число пойманных яблок,
score = 0;
// Указываем общее количество яблок.
totalApples =20;
// Скорость падения и счетчик времени
// между появлениями яблок.
timeSinceLastApple = 0;
appleSpeed = 5;
// Создаем экземпляр клипа содержащий лису,
attachMovie ("running fox", "fox", 999999);
fox._x = 275;
fox._y = 300;
}
Для того чтобы переместить лису, объект Key должен проверить состояние клавиатуры. С помощью функций Key. isDown (Key.RIGHT) и Key. isDown (Key.LEFT) проверяется, нажаты ли стрелки "вправо" и "влево" соответственно. Переменная dx принимает значение от 10 до -10 и показывает насколько и в каком направлении должна переместиться лиса. Функция Key. is Down () определяет, удерживается ли определенная клавиша в данный момент. Она особенно полезна в играх, где управление осуществляется при помощи клавиатуры. Для задания клавиши используется ее код. Помимо номеров, например 65 для буквы «А», для задания специальных клавиш, таких как стрелка "вверх", могут использоваться константы, в данном случае Key.UP. Коды клавиш приведены в приложении В справочного руководства по ActionScript Flash MX.
Кроме переменной dx, функция задает переменную _xscale клипа лисы. Действительное значение _xscale остается неизменным, но может быть либо отрицательным, либо положительным. В зависимости от этого клип поворачивается, и лиса начинает двигаться в том или ином направлении.
После задания переменной dx клип лисы перемешается на расстояние, соответствующее указанной величине. Затем проверяется, совпадает ли новое положение с левой и правой границами экрана.
Если движение лисы продолжается, а клип лисы неподвижен, задается его переход к кадру "run", чтобы создать впечатление бегущей лисы. С другой стороны, если лиса не двигается, но в то же время и не находится в кадре 1, задается переход клипа к этому кадру, и создается впечатление, будто лиса стоит. function moveFox() {
// Проверяем, нажаты ли клавиши со стрелками,
if (Key.isDown(Key.RIGHT)) {
dx = 10;
// Поворачиваем лису направо.
fox._xscale = -Math.abs(fox._xscale);
}
else if (Key.isDown(Key.LEFT)) {
dx = -10;
// Поворачиваем лису налево.
fox._xscale = Math.abs(fox._xscale);
} else {
// He двигаемся.
dx = 0;
// Передвигаем лису.
fox._x += dx;
if (fox._x < 30) fox._x = 30;
if (fox._x > 520) fox._x = 520;
// Меняем поведение лисы (стоит или бежит).
if ((dx != 0) and (fox._currentFrame ==1)) {
fox.gotoAndPlay ("run") ;
} else if ((dx == 0) and (fox._currentFrame != 1)) {
fox.gotoAndPlay ("stand");
}
}
Один раз в каждом кадре вызывается функция dropNewapple. Необходимость создания нового яблока определяется тремя вложенными условными выражениями.
Прежде всего проверяется переменная timeSinceLastapple. Условие выполняется только в случае, если ее значение больше 20. Переменная увеличивается на 1 в конце функции.
В следующей проверке определяется, соответствует ли количество упавших яблок общему количеству яблок, которое должно быть сброшено.
Наконец, функция Math.random() задает 10-процентную вероятность того, что яблоко упадет. В результате интервал между падениями двух яблок будет всегда разным.
Для создания нового клипа яблока используется функция attachMovie. Горизонтальное положение ролика выбирается в диапазоне между 30 и 520. Каждый раз при создании нового яблока значение переменной appleSpeed увеличивается. function dropNewApple() {
// Бросаем яблоко, если прошло достаточно времени,
if (timeSinceLastApple > 20) {
// Бросаем, если не превышено
// предельное количество яблок, которые можно бросить
. if (lastApple < totalApples) {
// Устанавливаем вероятность падения яблока в 10%.
if (Math.random!) < .1) {
// Создаем объект-яблоко.
lastApple++;
attachMovief"apple", "apple"+lastApple, lastApple);
_root["apple"+lastApple]._x = Math.random!)*490+30;
_root["apple"+lastApple]._y = 0;
// Сбрасываем счетчик времени ожидания.
timeSinceLastApple = 0;
// Увеличиваем скорость падения яблока
if (appleSpeed < 10) appleSpeed += .5;
}
}
}
// ЕСЛИ не бросили яблоко, сокращаем время ожидания.
timeSinceLastApple++;
}
Функция, выполняющая перемещение яблок, должна не только изменять их вертикальное положение, но и проверять, упало ли яблоко на землю или в корзину.
Чтобы определить, упало ли яблоко на землю, функция должна проверить, находится ли яблоко ниже нижней границы экрана. Определить попадание в корзину немного сложнее: необходимо установить, соответствует ли расстояние между яблоком и лисой заданному диапазону. Если яблоко находится от лисы на расстоянии в 10 пикселов по вертикали и 25 пикселов по горизонтали, считается, что оно попало в корзину. Имейте в виду, что центр клипа с лисой находится в центре изображения корзины, поэтому положение корзины фактически определяется положением всего клипа с лисой. На Рисунок 9.3 показан прямоугольник, который представляет область попадания.

Создание кода

Создание кода

Код клипа "actions" аналогичен тому, что использовался в игре "Помай яблоко". Изменятся только функции. В функцию initGame было внесено лишь одно изменение: число падающих яблок было увеличено до 50.

Создание кода

Создание кода

Клипу "actions" назначен такой же сценарий, как и в первых двух играх данной главы, однако имена были изменены в соответствии с темой данной игры. onClipEvent (load) {
_root.initGame();
}
onClipEvent (enterFrame) {
_root.moveFox();
_root.newRock();
_root.moveRocks();
}
Функции главной временной шкалы должны быть вам знакомы. Некоторые части кода аналогичны функциям, рассмотренным ранее, но имеют другие имена.
Функция initGame запускает игру со скоростью течения реки 0. Изображение лисы расположено не в нижней части экрана, а в центре. function initGame() {
// Номера первого и последнего камня.
firstRock = 1;
lastRock = 0;
// Задаем переменную, содержащую количество столкновений.
spills = 0;
// Количество камней.
totalRocks = 50;
// Время, прошедшее со времени появления последнего камня.
timeSinceLastRock = 0;
riverSpeed = 0;
/// Помещаем на рабочее поле клип лисы.
attachMovie( "kayaking fox", "fox", 999999 );
fox._x = 275;
fox._y = 200;
}
Как и в предыдущих примерах, функция moveFox определяет, нажаты ли клавиши со стрелками "влево" и "вправо". Кроме этого, она проверяет, воспроизводится ли анимация "spill", и если ответ положительный, игнорирует нажатие клавиш.
Вместо поворота изображения код задает переход клипа "fox" к кадрам, помеченным "left" или "right". Первый кадр имеет метку "still" и отображает байдарку, плывущую вперед. function moveFox() {
if (fox._currentFrame > 4) {
//Во время столкновения нажатие клавиш игнорируется.
dx = 0;
} else if (Key.isDown(Key.RIGHT)) {
// Передвигаем лису вправо.
dx = riverSpeed;
fox.gotoAndStop("left");
} else if (Key.isDown(Key.LEFT)) {
// Передвигаем лису влево dx = -riverSpeed;
fox.gotoAndStop("right");
} else {
// Клавиша не нажата.
dx = 0; fox.gotoAndStop("still");
}
// Передвигаем лису и отслеживаем,
// чтобы она не вышла за границы экрана.
fox._x += dx;
if (fox._x < 150) fox._x = 150;
if (fox._x > 400) fox._x = 400;
// Увеличиваем скорость движения байдарки
if (riverSpeed < 20) riverSpeed += .5;
}
Скорость игры увеличивается с помощью функции moveFox, в результате байдарка постепенно набирает скорость.
Функция newRock аналогична функции dropNewApplet предыдущей игры и даже немного проще, поскольку при появлении камня выбор ограничен только одним клипом. function newRock() {
// Проверяем, прошло ли достаточно времени,
if (timeSinceLastRock > 5) {
// Проверяем, превышено ли максимальное число камней
if (lastRock < totalRocks) {
// Новая скала появляется с вероятностью 10%
if (Math.random() < .1) {
// Создаем новую скалу
lastRock++;
attachMovie( "rocks", "rock"+lastRock, lastRock );
_root["rock"+lastRock]._x = Math.random()*250+150;
_root["rock"+lastRock]._y = 450;
// Решаем, какой кадр показать.
f = int(Math.Random()*_root["rock"+lastRock]._totalFrames) + 1;
_root["rock"+lastRock].gotoAndStop(f);
// Сбрасываем счетчик времени
//до появления следующего камня.
timeSinceLastRock = 0;
// Запоминаем, что с новым камнем
// столкновений не было.
_root["rock"+i].hit = false;
}
} } // Уменьшаем время до появления следующего камня
timeSinceLastRock++;
}
Обратите внимание, что для каждого нового камня переменная hit принимает значение false. Это обозначает, что байдарка ни разу не столкнулась с данным камнем. Это условие проверяется функцией moveRock перед тем, как разрешить столкновение. В случае столкновения переменная hit соответствующего клипа принимает значение true и второй раз удариться об этот камень байдарка уже не может.
Обратите внимание, что по сравнению с игрой "Поймай яблоко" меняются и координаты области попадания (столкновения). Столкновение может произойти в области с размерами 60 пикселов по горизонтали и 25 пикселов по вертикали в обе стороны от центра. Эта область примерно соответствует форме байдарки (Рисунок 9.8).

Создание кода

Создание кода

Основная часть кода - это сценарий клипа машины. Он начинается с задания переменной speed значения 0. Эта переменная должна быть на уровне _root, поскольку остальные клипы будут к ней обращаться. onClipEvent(load) {
// Инициализируем переменную скорости.
_root.speed = 0;
}
Обработчик onClipEvent (enterFrame) сначала проверяет все четыре клавиши с изображением стрелок. Левая и правая клавиши со стрелкой перемешают машину влево или вправо и также заставляют клип с машиной показывать соответствующий кадр поворота.
Клавиши со стрелками вверх и вниз изменяют скорость машины на 0,1. Постоянно осуществляется проверка, не упала ли скорость ниже 0.
Если ни одна из клавиш со стрелками не нажата, клип с машиной возвращается к первому кадру. Обработчик осуществляет еще две проверки. Первая нужна, чтобы узнать, не находится ли под машиной клип "bonus". Если да, игрок получает очки, и бонус очень быстро проезжает далее, чтобы игрок не получил за него очки еще раз.
Вторая проверка выясняет, не коснулась ли машина обочины. Если да, движение машины в сторону ограничивается и замедляется. onClipEvent(enterFrame) {
if (Key.isDownfKey.LEFT)) {
// Поворачиваем влево.
this._x -= 10;
this.gotoAndStop("left");
} else if (Key.isDown(Key.RIGHT)) {
// Поворачиваем вправо.
this._x += 15;
this.gotoAndStopC'right") ;
} else if (Key.isDown(Key.UP)) {
// Увеличиваем скорость.
_root.speed += .1;
} else if (Key.isDown(Key.DOWN)) {
// Тормозим.
_root.speed -= . 1;
// Проверяем, что скорость не меньше 0.
if (_root.speed < 0) _root.speed = 0;
} else {
_root.car.gotoAndStop("straight");
// Проверяем бонус.
if (this.hitTest(_root.bonus._x,_root.bonus._y)) {
_root.score++;
_root.bonus._y +=100;
// Замедляем движение, если коснулись обочины,
if (this._x < 80) {
this._x = 80;
_root.speed /= 2;
} else if (this._x > 470) {
this._x = 470;
_root.speed /= 2;
}}
Клип "sideObject" содержит сценарий, двигающий объект вниз и в сторону от центра. Для каждого следующего кадра значение _у увеличивается, а _х - изменяется. Оба параметра используют переменную speed для характеристики этого изменения, но _х использует коэффициент dx который может быть равен 1 или -1. Объект перемешается соответственно вправо или влево.
Когда объект достигает значения 600 по вертикали, что на 200 пикселов ниже границы экрана, он возвращается назад к значению 200, то есть вновь появляется на горизонте. С вероятностью 50/50 он помещается слева или справа от дороги. Именно в этот момент определяется значение переменной dx.
И наконец, масштаб объекта определяется в соответствии со значением _у. Это означает, что объект становится больше по мере приближения onClipEvent(enterFrame) {
// Движемся вниз.
this._y += _root.speed;
// Движемся в стороны.
this._x += dx*_root.speed;
// Возвращаем объект на исходную озицию, если он проехал за
// нижнюю границу экрана.
if (this._y > 600) {
this._y = 200;
if (Math.random() < .5) {
// Объект слева.
this._x = Math.random()*170;
dx = -1;
} else {
// Объект справа.
this._x = 550-Math.random()* 170;
dx = 1;
// Задаем масштаб в соответствие со значением
_у. this._xscale = this._y/4;
this._yscale = this._y/4;
}

Обратите внимание, что клип "sideObject" не взаимодействует с машиной. Это делает только клип "bonus". Но объекты по сторонам дороги направляют взгляд игрока так, что создается ощущение глубины.
Центральная линия движется, как и камни, но, поскольку она находится в центре экрана, она не передвигается ни вправо, ни влево. Она просто движется вниз и изменяет масштаб. onClipEvent(enterFrame) {
// Движемся вниз.
this._y += _root.speed;
// Возвращаемся к горизонту.
if (this._y > 400) {
this._y = 200;
// Устанавливаем масштаб.
this._xscale = this._y/4;
this._yscale = this._y/4;
}

Бонусные звезды ведут себя более похоже на объекты по сторонам. Однако они не появляются где попало. Они появляются с равной вероятностью в одном из двух мест на дороге.
Таким образом, двигаясь вниз по экрану, бонусная звезда движется в сторону со скоростью вполовину меньшей, чем вниз. Это позволяет создавать более точную перспективу, поскольку звезды находятся ближе к центру дороги. onClipEvent(enterFrame) {
// Движемся вниз.
this._y += _root.speed;
this._x += dx*_root.speed;
// Возвращаемся к горизонту,
if (this._y > 600) {
this._y = 200;
if (Math.random() < .5) {
// Переходим на левую сторону дороги.
this._x = 250;
dx = -.5;
} else {
// Переходим на правую сторону дороги.
this._x = 300;
dx = .5;
} // Устанавливаем масштаб в соответствии с вертикальным
// положением.
this._xscale = this._y/4;
this._yscale = this._y/4;
}
Клип "actions" расположен вне экрана и содержит игровые часы. Он замечает время начала и производит обратный счет до 0. В клипе-приме игра очень короткая, всего 15 секунд. Вы можете увеличить ее до минуты или двух.
Когда обратный отсчет доходит до 0, главная временная шкала отправляется к кадру "game over". Параметр speed становится равным 0, и машина замирает на месте. onClipEvent(load) {
// Рассчитываем время окончания игры.
endTime = getTimer()+15000;
onClipEvent(enterFrame) {
// Подсчитываем, сколько времени прошло.
timeLeft = (endTime - getTimer())/1000;
// Конец игры.
if (timeLeft _root.speed = 0;
_root.timeDisplay = "0";
_root.gotoAndStop("game over");
} else {
// Отображаем оставшееся время.
_root.timeDisplay = timeLeft;
}}
Кроме команды stop () в первом кадре, есть еще только один сценарий временной шкалы - в главном кадре игры. Он перемешает машину на передний план (уровень) экрана, так что центральная линия и бонусные звезды оказываются под ней. Кроме того, короткий цикл дублирует клип "sideObject" 5 раз. Каждой копии придано разное значение _у, поэтому камни не появляются все одновременно. // Помещаем машину на передний план,
car.swapDepths(999);
// Создаем пять камней.
for(i=0;i mc = sideobject.duplicateMovieClip("side object"+i,i);
mc._у = 400+Math.random()*200;
}

Сплав на байдарке

Сплав на байдарке

Исходный файл: Riverkayak.fla
В этом разделе данной главы мы, используя код двух предыдущих игр, создадим совершенно другую на первый взгляд игру. В этой игре наш герой лиса будет плыть по реке на байдарке, избегая препятствия и стараясь добиться хорошего времени.
Для трансформации предыдущих игр в эту, как ни удивительно, не нужно прилагать много усилий. И в то же время игры будут совершенно разными. Взглянув на Рисунок 9.6, вы убедитесь, насколько данная игра отличается от игр "Поймай яблоко".

В игре гонки дорога движется по

Рисунок 9.9 В игре гонки дорога движется по направлению к игроку

Второй кадр ролика лисы содержит

Рисунок 9.7 Второй кадр ролика лисы содержит изображение лисы, поворачивающей вправо



Для того чтобы клипы "rocks" и "fox" были включены в ролик, им аналогично клипам "apples" и "fox" предыдущих игр необходимо присвоить имена в панели Linkage Properties.

В дополнение мы примем небольшой

В дополнение мы примем небольшой набор правил. На дороге есть отметки, которых водителю необходимо коснуться, чтобы заработать очки. Чем быстрее водитель едет, тем большего числа потенциальных отметок он может коснуться, прежде чем закончится время игры. Но чем быстрее он едет, тем больше у него шансов не успеть поймать метку до того, как она уйдет. К тому же, если водитель дотронулся до границ дороги, он замедляет ход и уменьшает свою потенциальную возможность заработать очки, поскольку на меньшей скорости ему попадается меньше меток.

Яблоки падают из произвольных мест

Яблоки падают из произвольных мест верхней части экрана и через произвольный интервал времени, но не слишком часто. Вначале яблоки падают медленно, но в ходе игры скорость их падения увеличивается. После того как упадет определенное количество яблок, игра завершается. Счет будет равен количеству пойманных лисой яблок.

Поймай яблоко" единственный клип яблока

Подход

В игре " Поймай яблоко" единственный клип яблока в библиотеке содержал статическое изображение, состоящее из одного кадра. Для показа различных типов яблок нам понадобится два разных клипа, один для хороших яблок, другой для плохих. Кроме этого, каждый клип будет состоять из множества кадров с изображениями различных яблок. Клип хорошего яблока будет состоять из 5 кадров, соответствующих гласным. Клип плохого яблока будет состоять из 20 кадров, представляющих согласные звуки. Буква "Y" использоваться не будет.

Когда наступает время бросать яблоко, оно может с равной степенью вероятности оказаться как хорошим, так и плохим. Код отобразит произвольный кадр из соответствующего клипа.
После того как игрок поймает яблоко, код определит его тип и соответственно изменит счет. Подготовка ролика В библиотеке ролика вы увидите два клипа яблока. Первый, "bad apple", содержит 20 кадров. Каждый кадр включает изображение яблока и согласной. Другой клип, "good apple", содержит 5 кадров для 5 гласных. На Рисунок 9.5 изображено основное окно Flash, открытое на клипе "bad apple".
В диалоговом окне Symbol Linkage Properties обоим клипам будет назначено свойство Export for ActionScript и присвоен идентификатор "good apple" или "bad apple".

Одной из задач данной игры

Задача проекта

Одной из задач данной игры является создание определенной иллюзии у игрока. Хотя байдарка остается в центре экрана, у игрока складывается впечатление, что она движется вниз по реке. Это достигается при помощи объектов, двигающихся вверх по экрану.

Создание Flash игр -практические уроки

Другие возможности

Другие возможности

Существует несколько способов сделать нашу игру более интересной. Цвета могут быть не произвольными, а обозначать определенное количество очков. Например, красные шары могут стоить 100 очков, синие - 50 и т.д. От цвета, в свою очередь, может зависеть скорость и высота полета шара. При этом чем выше и быстрее летит шар, тем больше его ценность.
Вы можете вообще отказаться от использования шаров. В сущности данная игра напоминает игры наподобие "Sea Wolf", задачей которых является поражение самолетов, или игры про космических пришельцев. Все, что требуется, - это заменить графику.

Другие возможности

Другие возможности

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

Другие возможности

Другие возможности

Чтобы сделать игру труднее, вы можете ускорить движение захватчиков. Сначала попробуйте увеличить расстояние, на которое они падают каждый раз. Также можно увеличить скорость, с которой они движутся из стороны в сторону.
Если вы хотите добавить в игру уровней, то можете создать переменную startSpeed, которая начинается со значения 3. Задайте эту скорость функции balloonDirection каждого шарика вместо жестко заданного "3". Пусть теперь после того, как все шарики выбиты, игрок переходит к экрану "level over". Когда он нажимает кнопку "play next level", startSpeed увеличивается, и ролик отправляется к кадру "play", где шарики появляются с новой, более высокой скоростью.

Игра "Прицелься и выстрели" напоминает

Рисунок 10.4 Игра "Прицелься и выстрели" напоминает игру "Стрельба по шарам", однако в нее были добавлены новые возможности

К сведению

К сведению

Нажатие клавиши пробела контролируется кнопкой. В нашем примере она расположена за пределами рабочего поля, в левом верхнем углу экрана и визуально представляет собой надпись "button". Кнопке назначен следующий код: on (keyPress "") {
_root.shootBullet() ;
}
В соответствии с кодом кнопка не реагирует на щелчок мышью. В любом случае это не имеет значения, так как кнопка расположена за пределами рабочего поля. Программа ждет нажатия клавиши пробела и отвечает на него вызовом функции shootBullet. На первый взгляд не ясно, почему используется клавиша пробела, а не проверка Key. isDown, осуществляемая функцией moveFox. Функция Key.isDown проверяет, нажата ли клавиша во время определенного промежутка времени. В нашем примере нажатие осуществляется один раз в каждом кадре. Если игрок быстро нажмет на клавишу, это событие может произойти между проверками Key. isDown. Программа не увидит, что клавиша нажата, и выстрела не произойдет. Использование кнопки гарантирует, что нажатие клавиши будет замечено и обработано.
Скорость воспроизведения ролика составляет 30 кадров в секунду, Благодаря этому анимация воспроизводится более плавно. Изменив скорость воспроизведения ролика, вам, может быть, придется изменить скорость перемещения лисы, шаров и снарядов. В противном случае скорость игры может не соответствовать вашим ожиданиям.

К сведению

К сведению

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

К сведению

К сведению

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

Лиса идет влево и всегда готова выстрелить из соломинки

Рисунок 10.2 Лиса идет влево и всегда готова выстрелить из соломинки



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

Лиса стреляет по пролетающим воздушным

Рисунок 10.1 Лиса стреляет по пролетающим воздушным шарам из соломинки

Подготовка ролика

Подготовка ролика

В ролике Balloonshoot.fla клип лисы содержит кадр с меткой "stand" и анимационную последовательность, помеченную "walk". Анимация изображает лису, перемещающуюся влево (Рисунок 10.2), однако при помощи Action-Script вы можете повернуть лису в другую сторону, не создавая отдельной анимации. Главное условие: соломинка должна занимать во всех кадрах одно и то же положение относительно центральной точки клипа.

Подготовка ролика

Подготовка ролика

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

Подготовка ролика

Подготовка ролика

Как и в первой игре этой главы, есть кадр стоящей лисы - "stand", и анимация ходьбы. У шарика есть нормальный кадр и анимация взрыва. Все шарики сначала серого цвета и потом раскрашиваются с помощью ActionScript. Пуля - это короткий клип-линия.

Подход

Подход

Для того чтобы соломинка была повернута в правильном направлении, прежде всего необходимо измерить горизонтальное и вертикальное расстояния между курсором и соломинкой, а затем с помощью этих значений вычислить необходимый угол.
Полученное значение можно использовать для поворота клипа coлoминки в нужном направлении. Оно также определяет место вылета снаряда и количество пикселов по горизонтали и вертикали, на которое снаряд перемещается в каждом кадре.
Добавить влияние гравитации немного проще. В начале движения объектата-пули его траектория слабо изменяется под действием гравитации. Однако с каждым кадром скорость падения увеличивается. Пуля получила сильный импульс при запуске, поэтому она будет продолжать двигаться вверх, но все медленнее и медленнее, по мере уменьшения ее кинетической энергии. Затем пуля все быстрее и быстрее начнет падать вниз.
Это явление называется ускорением свободного падения и в реальном мире составляет примерно 32 фута/с2 (9,8 м/с2). В мире игры ускорение может иметь любое значение.

Подход

Подход

Поведение лисы может остаться таким же, как в первой игре этой главы. Но поведение шариков должно быть полностью изменено. К тому же во время игры не должно быть создано ни одного нового шарика. Они все появляются в начале игры.

При попадании в шар запускается

Рисунок 10.3 При попадании в шар запускается воспроизведение анимации взрыва



Для окраски шара используются оттенки серого цвета. Цвет задается одновременно с созданием нового клипа шара. В результате один клип шара каждый раз принимает новый оттенок.
Клип снаряда содержит короткую линию. Хотя в качестве снаряда используется горошина, вертикальная линия создает видимость движения вверх.

Шарикизахватчики

Шарики-захватчики

Исходный файл: Ballooninvaders.fla
В самой классической видеоигре, "Космические захватчики", есть очень странное, но запоминающееся поведение вражеских единиц. Они движутся группой из стороны в сторону, медленно опускаясь вниз. Если они достигнут поверхности, игрок проигрывает.
Давайте изменим первую игру данной главы так, чтобы воздушные шарики вели себя как космические захватчики.

Создание кода

Создание кода

Небольшой клип "actions" помешается за пределами рабочего поля и контролирует процесс игры путем обращения к функциям главной временной шкалы. Она запускает игру при загрузке и вызывает ряд функций в каждом кадре. onClipEvent(load) {
_root.initGame();
onClipEvent(enterFrame) {
_root.newBalloon() ;
_root.moveBalloons() ;
_root.moveFox();
_root.moveBullets();
}
Функция initGame задает все основные переменные, используемые в игре. function initGame() {
// Инициализируем переменные, связанные с объектами-шарами.
nextBalloonTime = 0;
nextBalloon = 0;
balloons = [];
numBalloons = 10;
// Инициализируем переменные,
nextBulletTime = 0;
nextBullet = 0;
bullets = [];
// Количество очков равно 0.
score = 0;
}
Перед созданием нового шара необходимо провести три проверки. Первая определяет, остались ли в игре шары, вторая- прошло ли достаточно времени после создания предыдущего шара. Последняя проверка представляет собой своего рода игру "орел и решка": новый шар создается с вероятностью 50%.
После завершения проверок функция newBalloon создает новый шар с 50-процентной возможностью появления шара с левой или правой стороны. Скорость шара принимает произвольное значение от 3 до 5. Число является положительным, если шар будет пролетать слева направо и отрицательным в противном случае.
Цвет нового шара выбирается из пяти возможных оттенков. Для задания цвета используется функция setTransform.
Клипы шаров можно упорядочить, поместив их имена и значения скоростей в массив balloons.
Затем задаются переменные nextBalloon и nextBalloonTime, при помощи которых осуществляется обращение к переменной newBalloon. function newBalloon () {
// Определяем, могут ли появиться новые шары,
if (nextBalloon < numBalloons) {
// Проверяем, пришло ли достаточно времени
// после появления последнего шара,
if (getTimerO > nextBalloonTime) {
// "Бросаем монетку",
if (Math.Random() "balloon"+nextBalloon,
// Создаем новый шар.
attachMovie("balloon", nextBalloon);
// Выбираем, с какой стороны
// и с какой скоростью полетит шар.
if (Math.Random() _root["balloon"+nextBalloon]._x = -30;
dx = int(Math.Random()*3)+3;
} else {
_root["balloon"+nextBalloon]._x = 580;
dx = -int(Math.Random()*3)-3;
// Выбираем высоту.
_root["balloon"+nextBalloon]._y = int(Math.Random()*100)+20;
// Выбираем цвет.
balloonColor = new Color("balloon"+nextBalloon)
r = int(Math.Random()*5)+1;
if (r == 1) {
balloonColor.setTransform({rb:255}) ;
} else if (r == 2) {
balloonColor.setTransform({gb:255}) ;
} else if (r == 3) {
balloonColor.setTransform({bb:255}) ;
} else if (r == 4) {
balloonColor.setTransform({rb:255,gb:255});
} else if (r == 5) {
balloonColor.setTransform({rb:255,bb:255});
}
// Добавляем новый шар.
balloons.push({clip:"balloon"+nextBalloon,d:dx});
// Изменяем значение переменных.
nextBalloon++;
nextBalloonTime = getTimerf) + 2000;
}}
}}
Созданные шары перемещаются на опрелеленное расстояние с помощью функции moveBalloons. Если шар достиг противоположной границы рабочего поля, его клип удаляется. Соответствующий элемент также удаляется из массива balloons. Чтобы быстро задать 50-процентную вероятность, лучше использовать фрагмент кода (Math. Random ()
Имейте в виду, что в цикле for функции moveBalloons перечисление осуществляется в обратном порядке: начинается с последнего элемента в массиве balloons и заканчивается 0. Благодаря этому удаление элемента не влияет на остальную часть массива. Предположим, из массива, состоящего из пяти элементов, был удален третий элемент. Тогда четвертый элемент становится третьим, а пятый - четвертым. Если бы вы считали в прямом направлении, вы бы пропустили третий элемент и сразу перешли к четвертому. При счете в обратном порядке такой проблемы не возникает.
Функция moveBalloons проверяет, все ли шары созданы и все ли шары исчезли, что говорит об окончании игры. function moveBalloons() {
// Перемещаем все шары,
for(i=balloons.length-1;i>=0;i--) {
// Определяем скорость шара
//и получаем ссылку на клип,
dx = balloons[i].d; balloon = _root[balloons[i].clip];
// Перемещаем шар.
balloon._x += dx;
// При вылете за экран шар удаляется,
if ((dx < 0) and (balloon._x < -20)) {
balloon.removeMovieClip() ;
balloons, splice (i,l);
} else if ((dx > 0) and (balloon._x > 570) balloon.removeMovieClip();
balloons.splice(i,1);
// Если шары закончились, игра завершается.
if ((nextBalloon >= numBalloons) and (balloons.length < 1)){
gotoAndStop("game over");
}}
Функция moveFox определяет, нажаты ли клавиши со стрелками «влево» или "вправо", и перемешает лису на 10 пикселов влево или вправо при нажатии соответствующей клавиши. Как и в предыдущих играх, параметр _xscale клипа, содержащего лису, используется для поворота лисы. Функция также задает переход клипа к анимационной последовательности (изображает идущую лису и начинается в кадре 2), а также к кадр (изображает стоящую лису). function moveFox () {
// Подвинуть лису влево.
if (Key.isDown (Key.LEFT)) {
dx = -10;
fox._xscale = Math.abs(fox._xscale);
// Подвинуть лису вправо, перевернув ее клип по вертикали.
То есть изменив знак у свойства _scale, мы создаем зеркальное отражение клипа; лиса теперь идет в другую сторону.
}else if (Key.isDown(Key.RIGHT)) { dx = 10;
fox._xscale = -Math.abs(fox._xscale);
// Иначе лиса не двигается.
} else {
dx = 0;
// Перемещаем лису.
fox._x += dx;
if ((dx == 0) and (fox._currentFrame != 1)) {
// Переходим к кадру, в котором лиса стоит,
fox.gotoAndStop(1);
} else if ((dx != 0) and (fox._currentFrame == 1)) {
// Переходим к кадру, где лиса бежит.
fox.gotoAndPlay(2);
}
}
Для того чтобы выстрелить, пользователь должен нажать на клавишу пробела. На нажатие клавиши реагирует скрытая кнопка, которая вызывает функцию shootBullet. Код кнопки будет рассмотрен далее, в разделе "К сведению".
Функция shootBullet проверяет, прошло ли достаточно времени после предыдущего выстрела. Это не дает игроку возможности стрелять залпом по всем мишеням.
Подобно шарам снаряды представлены одновременно клипом и элементом массива, в данном случае массива bullets. Массив используется функцией moveBullets для осуществления выстрелов.
Обратите внимание, что движение клипа, содержащего снаряд, начинается в точке, расположенной в 2 пикселях вправо и 55 пикселях влево от центра клипа лисы. Эта точка соответствует кончику соломинки. function shootBullet () {
// Проверяем, что с момента
// предыдущего выстрела прошло достаточно времени.
if (getTimerO > nextBulletTimei {
// Создаем новую пулю.
attachMoviet"bullet", "bullet'4nextBullet,nextBullet+9999) ;
// Устанавливаем ее координагы.
_root ["bullef+nextBullet] ._jc = fox._x+2;
_root [ "bullef+nextBullet] ._y = fo.x._y-55;
/ / Добавляем новую пулю к массиву.
bullets.push(nextBullet) ;
// Изменяем значение переменных, отвечающих
//за появление пуль.
nextBullet++;
nextBulletTime = getTimer()+1000;
}}
Функция moveBullets работает аналогично функции moveBalloons, но перемещает снаряды не вправо и влево, а вверх. Она проверяет одно из следующих условий: снаряд достиг верхнего края экрана либо попал в шар и вызвал функцию checkCollision. В обоих случаях и клип, и элемент массива удаляются. function moveBullets () {
/7 Проверяем, попали ли пули в шар.
for(i=bullets.length-1;i>=O;i--) {
// Выбираем элемент.
bullet = _root["bullet"+bullets[i]];
// Передвигаем пулю вверх,
bullet._y -= 10;
// Выясняем, достигла ли она конца экрана,
if (bullet._у < 0) {
bullet.removeMovieClip();
bullets.spliced,1) ;
// Определяем, не попал ли игрок по шару.
} else {
if (checkCollision(bullet)) {
bullet.removeMovieClip();
bullets.splice (i,1);
}}
}}
Функция checkCollision (она будет рассмотрена далее) проверяет все шары и определяет, не находится ли один из них вблизи данного снаряда. При помощи функции distance оценивается расстояние от центра снаряда до центра шара. Если расстояние составляет менее 10 пикселов, что приблизительно равно диаметру шара, выстрел засчитывается как удачный. В клипе шара происходит переход к кадру 2, элемент массива, связанный с шаром, принимает значение true, а функция moveBullet получает команду на удаление снаряда. Почему для определения попадания используется функция distance, а не hitTest? Причина в том, что функция hitTest выдает значение true в случае, если снаряд попадет в любую часть шара, в том числе и в нитку, которая его держит
function checkCollision(bullet) {
// Просматриваем все шарики,
for(j =balloons.length-1;j >=0;j--) {
balloon = __root[balloons!j].clip];
// Проверяем, попала ли пуля.
if (distance(bullet,balloon) < 10) {
// Переходим к кадру, в котором шар взрывается.
balloon.gotoAndPlay(2);
// Убираем шар из массива,
balloons.splice(j,1);
// Увеличиваем счет,
score += 1;
// Возвращаем значение true,
return(true);
// Если игрок не попал, возвращаем значение false,
}}
return(false);
}
Для определения точного расстояния в пикселях между двумя клипами функция distance использует математическую формулу. Прежде всего, она определяет значение разницы координат клипов по горизонтали и вертикали и сохраняет это значение в переменных dx и dy. Затем вычисляет квадратный корень суммы квадратов данных значений. Формула приведена ниже. function distance(clipl, clip2) {
// Определяем расстояние между клипами,
dx = clipl._х - clip2._x;
dy = clipl._y - clip2._y;
return (Math.sqrt(dx*dx+dy*dy));
}

Создание кода

Создание кода

Некоторые функции данной игры аналогичны функциям игры "Стрельба по воздушным шарам", поэтому нет смысла рассматривать их повторно. Это функции initGame, newBalloon, moveBalloons, checkCollision и distance.
Одна из новых функций в анализируемой игре - aimStraw. Она заменит функцию moveFox и будет вызываться из клипа "actions", которому назначен следующий код: onClipEvent(load) {
root.initGame();
onClipEvent(enterFrame) {
_root.newBalloon ();
_root.moveBalloons() ;
_root.aimStraw();
_root.moveBullets() ;
}
Задача функции aimStraw - вычислить угол прицела и затем задать поворот клипа соломинки. Значение угла сохраняется в переменной strawRadians, которая используется функцией shootBullet. Для того чтобы вычислить угол между двумя точками, прежде всего необходимо определить значение разницы между горизонтальными и вертикальными координатами точек. Они хранятся в переменных dx и dy функции. Задав эти значения в функции Math.atan2, вы получите значение угла в радианах. Углы измеряются в радианах или градусах. Полный круг в радианах будет равен 6,28 (2Pi), в градусах - 360. Радианы используются Flash в математических функциях наподобие Math.sin и Math.cos, а градусы - в параметрах клипов „rotation. Поэтому вы должны уметь преобразовывать значения из одних единиц измерения в другие.

Функция Math.atan2 является прекрасным инструментом для программирования игр. Арктангенс (во Flash - Math.atan) представляет собой функцию, вычисляющую угол наклона линии. Так как такой наклон определяется двумя точками, с помощью арктангенса можно преобразовать координаты этих точек в значение угла наклона. Однако при использовании арктангенса не учитывается, какая точка линии является анкером, а какая указателем, задающим угол. Поэтому легко получить углы, противоположные по значению тем, которые вам необходимы. Для того чтобы учесть различные варианты, необходимо написать несколько условных выражений. Функция Math.atan2 (y,x) вычисляет угол наклона линии между началом координат и точкой с координатами (х, у,). Тем самым решается проблема неоднозначности.
function aimStraw() {
// Определяем разницу координат начала
//и конца линии.
dx = _xmouse - straw._x;
dy = _ymouse - straw._y;
// Вычисляем угол наклона.
strawRadians = Math.atan2(dy,dx);
// Переводим полученное значение в градусы.
strawDegrees = 360*strawRadians/(2*Math.PI);
straw._rotation = strawDegrees;
}
Теперь при запуске пули в массив bullets будет записано больше информации. Чтобы осуществлять перемещение объекта-пули в каждом кадре, нам необходимо знать угол, под которым он был выпущен.
К каждому объекту массива bullets будет добавлен параметр down, описывающий силу гравитации, действующую на пулю. Исходное значение этого параметра - 0.
Для того чтобы пуля вылетала из кончика соломинки, ее координаты должны иметь значение, равное значению координат соломинки плюс 20 пикселов (длина соломинки чуть больше 20 пикселов). Эти пикселы необходимо распределить (найти значения катетов при заданной гипотенузе и у угле) между координатами х и у при помощи функций Math.sin и Math.cos для того, чтобы получить горизонтальную и вертикальную стороны угла. Функции Math.sin и Math.cos используются здесь для определения горизонтальной и вертикальной сторон угла. Для того чтобы наглядно представить это, возьмем круг, центр которого находится в точке 0,0; крайняя верхняя точка имеет координаты 0, -1(система координат, в которой ось Y направлена вниз); крайняя правая - 1,0. Задав в функции Math.sin любой угол, вы получите координату y этого угла на окружности. Функция Math.cos позволяет вычислить координату х. Таким образом, значение Math, sin (0) будет равно (-1), значение Math.cos (0) - 0, что соответствует координатам 0, -1.
Более важно понять то, что перемещение имеет две составляющие: скорость и угол. Значения расстояний для монитора компьютера не могут быть заданы по диагонали, они задаются только по вертикали и горизонтали. Функции Math, sin и Math.cos позволяют преобразовать значения скорости и угла в расстояние по горизонтали и вертикали.
function shootBullet () {
// Проверяем, можно ли выстреливать следующую пулю,
if (getTinerO > nextBulletTime) {
// Создаем пулю.
attachMovie("bullet","bullet"+nextBullet, L.nextBullet+9999);
bullet = _root["bullet"+nextBullet];
// Устанавливаем координаты.
bullet._x = straw._x + Math.cos(strawRadians)*20;
bullet._y = straw._y + Math.cos(strawRadians)*20;
// Добавляем в массив информацию о пуле:
// clip = название клипа,
// angle = начальный угол,
// down = эффект гравитации.
bullets.push({clip:bullet.angle:strawRadians,down:0}
// Увеличиваем счетчик пуль.
nextBullet++;
nextBulletTime = getTimer()+1000;
}}
Функция moveBullets использует параметры angle и down каждого снаряда для перемещения их на определенное расстояние. Кроме этого параметр down увеличивается, чтобы создавался эффект гравитации.
Так как запушенный снаряд должен снова упасть на землю, прежде чем удалить его клип из массива, необходимо проверить, достиг ли он нижнего края экрана. function moveBullets() {
// Перемещаем все снаряды.
for(i=bullets.length-1;i >=0;i —) {
// Определяем название клипа,
bullet = bullets[i].clip;
// Перемещаем клип.
bullet._x += Math.cos(bullets[i].angle)*10;
bullet._y += Math.sin(bullets[i].angle)*10;
// Добавляем искажение траектории
// из-за воздействия гравитации.
bullet._у += bullets[i].down;
// Увеличиваем значение параметра гравитации,
bullets[i].down += .2;
// Выясняем, достигла ли пуля земли,
if (bullet._у > 400) {
bullet.removeMovieClip();
bullets.splice(i,1);
// Определяем, есть ли попадение.
} else {
if (checkCollision(bullet)) {
bullet.removeMovieClip();
bullets.spliced(i, 1) ;
}}
}}

Создание кода

Создание кода

Клип "actions" такой же, как в первой игре этой главы, за исключением того, что новые шарики не создаются в каждом кадре. onClipEvent(load) {
_root.initGame();
onClipEvent(enterFrame) {
_root.moveBalloons();
_root.moveFox();
_root.moveBullets();
}
Функция initGame вызывает функцию createBalloons, чтобы создать группу шариков. Ей не нужно задавать такие переменные, как nextBalloon или создавать массив balloons, поскольку после начала игры новые шарики не создаются. function initGame() {
// Создаем шарики.
createBalloons О;
// Параметры снарядов.
nextBulletTime = 0;
nextBullet = 0;
bullets = [];
// Переменная счета.
score =0;
}
Функция createBalloons создает 30 шариков в 10 колонках по 3 штуки в каждой. Каждая ссылка на шарик хранится в массиве. Цвет шарику назначается в зависимости от того, в каком он ряду. Каждому шарику придано начальное направление и скорость равная 3. function createBalloons() {
balloons = new Array();
balloonNum = 0;
// Создаем новый ряд.
forfvar y=0;y for(var x=0;x // Создаем и размещаем новый шарик.
attachMovie("balloon", "balloon"+balloonNum, balloonNum) ;
balloonClip = this["balloon"+balloonNum];
balloonClip._x = x*30+20;
balloonClip._y = y*30+20;
// Добавляем в массив,
balloons, push (balloonClip) ;
// Устанавливаем цвет.
balloonColor = new Color(balloonClip);
if (y == 0) {
balloonColor.setTransform({rb: 255});
} else if (y == 1) {
balloonColor.setTransform({gb: 255});
} else if (y == 2) {
balloonColor.setTransform({bb: 255});
balloonNum++;}
}
// Направление (скорость) шариков.
balloonDirection = 3;
}
Функция moveBalloons двигает все шарики в массиве balloons. Если какой-нибудь из них дотронется до края экрана, то все они меняют направление. Если же какой-нибудь достигнет низа экрана, игра заканчивается. function moveBalloons() {
// Переменная-флаг изменения направления,
var newDirection = false;
// Просматриваем все шарики,
for(var i=0;i // Передвигаем текущий шарик,
balloons[i]._x += balloonDirection;
// Смотрим, не достиг ли шарик границы экрана.
if ((balloonDirection > 0) and (balloons[i]._x > 530)) {
newDirection = true;
} else if ((balloonDirection < 0) and (balloons[i]._x < 20)) newDirection = true;
// При столкновении с границой экрана
// шарики опускаются и меняют направление.
if (newDirection) {
balloonDirection *= -1;
for(var i=0;i < balloons.length;i++) {
balloons[i]._y += 3;
//He достигли ли шарики земли?
if (balloons[i-l],_y > 300) {
gotoAndStop("game over");
}
}
Все функции для создания лисы и пуль точно такие же, как и в первой игре главы, поэтому их код я здесь приводить не буду. Но функция checkCollision другая, поскольку она должна следить, не случилось ли так, что все шарики уничтожены, и заканчивать игру. function checkCollision(bullet) {
// Просматриваем все шарики,
for(j=balloons.length-1;j>=0;j—) {
balloon = balloons[j];
// Смотрим не попала ли пуля в шарик,
if (distance(bullet,balloon) < 10) {
// Удаляем шар из массива,
balloons.splice(j,1);
// Переходим в кадр взрыва шарика,
balloon.gotoAndPlay(2);
// Увеличиваем счет, score += 1;
// Если шаров больше нет - игра заканчивается,
if (balloons.length == 0) {
gotoAndStop("game over");
}
// Возвращаем значение true, так как попали в шарик,
return(true);
}}
// Возвращаем false, поскольку попали в шарик,
return(false);
}

Стрельба по воздушным шарам

Стрельба по воздушным шарам

Исходный файл: Balloonshoot.fla
Первая игра состоит из трех основных элементов: лисы, воздушных шаров и снарядов. В нашем примере лиса стреляет всего лишь горошинами из соломинки (Рисунок 10.1). Поэтому игра подойдет для любой аудитории.

Стрельба с прицелом

Стрельба с прицелом

Исходный файл: Aimandshoot.fla
А что, если бы в предыдущей игре герой стоял, а не двигался из стороны в сторону? Тогда он бы мог направлять соломинку в любом направлении, а не только строго вверх. А снаряды подчинялись бы законам гравитации и, описав дугу, падали бы на землю.
Ролик Aimandshoot.fla представляет собой как раз такую игру. На Рисунок 10.4 показан фрагмент игры; как вы можете видеть, лиса находится в центре экрана и стреляет под углом. Рассмотрим, как это можно сделать.

и подчинение пули закону гравитации.

Новые элементы - возможность прицеливаться и подчинение пули закону гравитации. При помощи мыши игрок может прицелиться, и соломинка повернется в нужном направлении. После выстрела пуля упадет на землю.

Лиса перемешается так же, как

Подход

Лиса перемешается так же, как и во всех играх предыдущей главы. Перемещение лисы будет анимированным, направление движения задается горизонтальным поворотом.

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

Поведение шариков простое. Они образуют

Задачи проекта

Поведение шариков простое. Они образуют группу шириной 10 и высотой 3 шарика, как показано на Рисунок 10.5. Шарики движутся вправо, пока первая колонна шариков не коснется правой стороны экрана. Тогда они меняют направление и чуть-чуть опускаются.
Рис 10.5 Шарики-захватчики движутся группой

Между тем лиса внизу движется слева направо и стреляет в шарики. Она должна перестрелять их всех, прежде чем группа шариков достигнет поверхности земли.

Создание Flash игр -практические уроки

Бита и блоки три измерения

Бита и блоки: три измерения

Исходный файл: 3Dpaddlebricks.fla
Итак, в этой главе вы видели, как шар движется по плоскости. А что если шар должен будет двигаться в третьем измерении: в глубину? На Рисунок 11.5 показано, как это может выглядеть. Бита - это полупрозрачный квадрат на переднем плане игры. Четыре боковые стены ведут к задней стене, находящейся на некотором расстоянии "в глубине" экрана. Шар уменьшается по мере того, как становится все дальше от биты. Цель состоит в том, чтобы выбить все кирпичи (блоки) из задней стены.

Бита и блоки

Бита и блоки

Исходный файл: Paddlebricks.fla
Следующая игра намного сложнее двух предыдущих, хотя в ней используются те же основные элементы: мяч, бита и стены. Это классическая игра изначально называлась "Breakout". На Рисунок 11.4 показан фрагмент игры. В дополнение к мячу и бите вверху экрана расположены пять рядов блоков. Цель игры - выбить блоки с помощью мяча. Когда будут выбиты все блоки, игра переходит на следующий уровень, где мяч летит с большей скоростью.

Цель этой игры такая же как и

Рисунок 11.5 Цель этой игры такая же, как и у предыдущей, но перспектива создает некоторую специфичность

Диаграмма показывает как изменяется

Рисунок 14.2. Диаграмма показывает, как изменяется положение мяча после столкновения со стеной



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

Другие возможности

Другие возможности

Игру можно усовершенствовавать, если позволить игроку пропустить в течение игры определенное количество мячей. Таким образом, игра не будет заканчиваться после пропуска первого мяча, а продолжится со вторым мячом и т.д.
Осуществить это можно, присвоив, например, в начале игры переменной ballNum значение 3 или какое-либо другое. В результате, если велична ballNvun будет превышать 0, вместо кадра "game over" ролик будет переходить к кадру "ball lost". Игрок может нажать любую клавишу и начать игру заново, но при этом значение ballNum

Другие возможности

Другие возможности

Изменить количество мячей просто: достаточно изменить только одно значение в кадре "start game". Изменяя другие параметры, можно продлить или усложнить игру. Есть и другие варианты усовершенствования игры - например, увеличить скорость биты компьютера, поменяв одно значение в функции moveComputerPaddle.
Также можно сделать компьютер "умнее". Например, написать код, который будет предугадывать место, куда прилетит мяч, и передвигать туда биту вместо того, чтобы просто перемешать ее вслед за мячом. При пересечении границ игрового поля мяч будет ударяться о верхнюю или нижнюю стенку только один раз, так что определить предполагаемое место можно с помощью простых математических расчетов, если вы хорошо владеете математикой.

Другие возможности

Другие возможности

Игра станет интереснее, если в ней будет подсчет очков. Здесь это не сделано для того, чтобы не усложнять код. Просто добавьте текстовое поле "score" и свяжите его с переменной score. Затем прибавляйте единицу каждый раз, когда игрок выбивает блок.
Возможно, вам также захочется добавить текстовые поля, чтобы сообщать пользователю, на каком он уровне и сколько осталось мячей. Можно добавить и звуковые эффекты.

Другие возможности

Другие возможности

Очень простой способ внести дополнение в эту игру - поместить какой-либо рисунок за блоками. Это можно сделать вообще без использования ActionScript. Можно также сделать, чтобы в конце каждого уровня пользователь видел другую картинку.

Элементами игры "Стена и мяч"

Рисунок 11.1 Элементами игры "Стена и мяч" являются мяч, бита и три стены

К сведению

К сведению

Убедитесь, что экземпляру клипа с мячом присвоено имя "ball", а экземпляру клипа с битой - "paddle". Если стены расположены не так, как в исходном ролике, проверьте, правильно ли указаны константы в функции initGame.
В основной кадр игры необходимо включить оператор stop, чтобы вставить паузу в основную временную шкалу (это поможет избежать досрочного перехода к кадру окончания игры).

К сведению

К сведению

В дополнение к уже описанным элементам необходимо создать текстовые поля playerScore и computerScore и поместить их на рабочее поле. Они должны быть расположены во всех кадрах, кроме "start game", таким образом, чтобы были видны между подачами мяча и в конце игры.

К сведению

К сведению

Для работы кода необходимо точно указать множество элементов. Запустите ролик Paddlebricks.fla, чтобы посмотреть готовый вариант программы в действии. Для создания своей собственной версии необходимо запомнить имена всех клипов и в каждый кадр вставить команду stop. Также нужно вставить небольшие фрагменты кода в кнопки и первый кадр.
Ряды блоков были раскрашены с помощью эффекта Tint (Окраска), благодаря чему игра стала визуально более интересной. Вы можете выбрать другое графическое решение, ничего не меняя в функциональной части игры.

К сведению

К сведению

Игра, в общем то, лишь приблизительно воспроизводит трехмерный мир. Например, когда мяч отлетает в угол, компонент скорости z меняется таким образом, что суммарный вектор скорости остается неизменным Вы можете попробовать спрятать курсор перед началом игры с помощью Mouse.hide (), только не забудьте вернуть его на место по окончании игры с помощью Mouse. show ().

Мяч и бита

Мяч и бита

Исходный файл: Paddleball.fla
Хотя предыдущая игра веселая, у нее есть один недостаток: нет никакой возможности выиграть. Вы просто играете до тех пор, пока не надоест или пока не проиграете.
Игра станет более интересной, если позволить игроку управлять одной битой в то время, как компьютер будет управлять другой. Игрок попытается не пропустить мяч, надеясь на то, что его пропустит компьютер.
На Рисунок 11.3 показан кадр из игры. Игрок управляет левой битой, а компьютер - правой.

Подготовка ролика

Подготовка ролика

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

Подготовка ролика

Подготовка ролика

В общих чертах ролик аналогичен предыдущему. Вместо трех кадров вам понадобятся четыре: "start game", "start level", "play" и "game over". Перед каждой подачей мяча будет виден кадр "start level". Кадр же “game over" станет отображаться только тогда, когда будет пропущен последний мяч.
Как и в предыдущей игре, вам нужен один клип под названием "paddle» и еше один с именем "computerPaddle". Поведение второй биты будет запрограммировано с помощью языка ActionScript. Так как бита компьютера будет располагаться справа, необходимо убрать правую стенку. При этом верхняя и нижняя стены останутся.

Подготовка ролика

Подготовка ролика

Для этого ролика нужно пять кадров, то есть больше, чем в ранее рассмотренных играх. Первый кадр - "start game". Он появляется только в начале игры. Щелчок по кнопке Play переводит игрока непосредственно в кадр "play", и игра начинается.
Второй кадр - это "start level". Он отображается, когда игрок переходит на второй и последующие уровни. Здесь щелчок по кнопке Play также переносит игрока в кадр "play", то есть к началу нового уровня.
Третий кадр - "start ball". Он отображается, когда игрок пропускает мяч и хочет подать себе следующий. Внимательно рассмотрите исходный файл. Как видите, блоки присутствуют в третьем и четвертом кадрах, то есть в кадре "play". Таким образом, изображения блоков сохраняются, пока ролик переходит от кадра "play" к кадру "start ball". Иначе блоки будут расположены на своих исходных позициях.
Последний кадр - "game over". Щелчок по кнопке Play перенесет игрока обратно к кадру "start game", где значения некоторых важных параметров будут восстановлены.
Кроме организации расположения кадров необходимо создать блоки для третьего и четвертого кадров. В исходном ролике блоки имеют ширину 48 пикселов и высоту 8 пикселов. В примере расстояние между ними составляет 50x10 пикселов, таким образом, получается 5 рядов блоков по 11 блоков в каждом, что в общей сложности составляет 55 блоков. Для того чтобы не именовать 55 блоков на рабочем поле, подумайте, а не начать ли игру вовсе без блоков, а затем воспользоваться оператором attachMovie, чтобы добавить каждый блок с помощью кода. Хотя данная техника здесь не применяется, можно посмотреть, как она реализована в следующей игре этой главы.
К сожалению, каждому блоку должно быть присвоено имя, чтобы код мог его распознать. В исходном файле им назначены имена от al до а55. Клип с мячом называется "ball", а с битой - "paddle".

Подготовка ролика

Подготовка ролика

Ролик включает в себя четыре кадра. Все действия происходят во втором кадре. Фоном для всех кадров служит параллелепипед, показанный на Рисунок 11.5. Его внешняя граница размером 400x400 полностью заполняет рабочее поле. Внутренняя граница, представляющая заднюю грань, имеет размер 120x120 и располагается точно в центре.
Рисунок 11.6 Обозначены значения х, у и z каждого угла игровой области

Остальные клипы также находятся на экране. Первый - это бита, квадрат размером 70x70. Этому клипу присвоено имя "paddle" и его параметр _alpha=50%, что делает его полупрозрачным. Мяч - это клип "ball", содержащий круг диаметром 30 пикселов. Также в стороне расположен клип "action".
В библиотеке есть также клип "brick". Клип экспортируется вместе с роликом. Он используется для создания кирпичей, которые покрывают заднюю стену.
Если вы внимательно посмотрите на рисунок 11.5, то кроме толстых линий наружной и внутренней стен можете увидеть контур из тонких линий где-то в середине. Этот набор линий движется вместе с мячом вглубь экрана. Он помогает игроку определить, где находится мяч. Посмотрите ролик-пример, чтобы увидеть, как это работает. Вам нужен, клип размером 400x400, чтобы сделать эти линии. В примере этот клип называется "ring".

Подход

Подход

Искусственный интеллект для этой игры можно создать разными способами. Один из них - сделать так, чтобы бита всегда следовала за мячом. Однако в этом случае у компьютера просто не будет возможности пропустить мяч.
Лучше, если бита компьютера будет медленно двигаться в направлении мяча. Если мяч будет лететь слишком быстро, компьютер может не успеть переместить биту в правильное положение. Кроме того, бита будет двигаться только тогда, когда мяч летит в искусственного противника. Словосочетание "искусственный интеллект" звучит таинственно. Однако для игр не так важно, чтобы противник был умным. Компьютер должен только способствовать захватывающей игре. Конечно, в большинстве игр гораздо проще создать безупречного противника. Однако в таком случае игра для компьютера становится беспроигрышной, что не интересно для игрока. Трудность состоит в том, чтобы создать противника, обладающего некими навыками (это сделает игру непростой), но чтобы имеющихся навыков не хватало для беспроигрышной игры.
Для того чтобы счет игры был сохранен, нужны несколько переменных. Однако создать паузу в игре между подачами мяча довольно сложно, поэтому в игре будет два кадра: в первом программа ждет, когда игрок щелкнет по кнопке "serve", а во втором разворачивается само действие игры. Этот второй кадр начинается с установки произвольного начального положения мяча.

Подход

Подход

Код для определения, в каком месте биты или стены ударился мяч, похож на код предыдущих двух игр. Единственное отличие заключается в том, что теперь мяч может отскакивать не только от верхней биты, а и от любой ее точки. Таким образом, становится немного проще отбить мяч.
При столкновении мяча с блоком направление его движения по вертикали изменяется на противоположное. Блок же удаляется с экрана.
В предыдущих играх было достаточно определить, когда мяч ударяется о блок, для чего использовался метод hitTest. Теперь задача усложняется: надо рассмотреть все четыре стороны мяча по отношению ко всем четырем сторонам блока. Если мяч и блок полностью перекрываются, то считается, что произошло столкновение. С помощью метода hitTest можно было бы определить момент, когда мяч находится внутри прямоугольного блока. Но этого не достаточно для данной игры.
При столкновении мяча с битой рассчитывается расстояние между центром мяча и центром биты. Длина биты - 50 пикселов, так что это расстояние может быть чуть более 25 пикселов, либо со знаком "+", либо со знаком "-". Разделите данное число на 4 и получите значение между -7 и 7.
Новое значение будет присвоено переменной dx, которая определяет скорость движения мяча по горизонтали.
Это значит, что игрок может направлять мяч. Если, например, он отобьет мяч левым краем биты, мяч будет направлен резко влево. Если же отбить серединой биты, то мяч полетит прямо вверх.

Подход

Подход

Чтобы следить за положением мяча, необходима новая переменная. Можно использовать х для горизонтальной и у для вертикальной характеристики положения шара. Третья переменная, z, следит за глубиной -как глубоко внутри экрана находится шар.
Эти три переменные определяют положение мяча внутри воображаемого параллелепипеда, в котором происходит игра. Этот параллелепипед имеет горизонтальные и вертикальные размеры по 400 единиц и 140 единиц в глубину. Чтобы перевести это в координаты экрана, нужна некоторая ловкость. Если вы еще раз посмотрите на Рисунок 11.5, то заметите, что границы шахты видимы. Наружный квадрат (грань), ближний к игроку, находится на том же уровне, что и бита. Он имеет размер 400x400. Внутренняя грань, представляющая заднюю стену, имеет размер 120x120.
На рисунке 11.6 еще раз изображены обе грани, но на этот раз с обозначенными х, у и z координатами. Верхний левый угол обеих граней имеет значения х и у равные 0. Однако наружный угол имеет значение z равное 0, а внутренний - значение z, равное 140. Остальные углы обозначаются аналогично.
Если мяч находится на позиции (х, у) = (0,0) и движется от 0 к 140 вдоль оси Oz, то он движется вдоль ребра параллелепипеда (Рисунок 11.6). Если мяч в центре экрана, в положении (200,200), и движется от 0 до 140 вдоль Oz, ему вообще не нужно смешаться вправо или влево. Если мяч в какой-нибудь промежуточной позиции, например (50,65), и движется от 0 до 140 вдоль Oz, то он должен двигаться вдоль своей линии перспективы так, чтобы сохранить свое положение относительно передней и задней граней.
Иллюзия трехмерности достигается также за счет уменьшения значения масштаба мяча по мере его удаления.

Создание кода

Создание кода

Для этой игры необходимы лишь три функции (посмотрите исходный файл, Wallball.fla). Все эти три функции будут вызываться в клипе "actions”: onClipEevent(load) {
_root.initGame();
}
onClipEvent(enterFrame) {
_root.moveBall();
_root.movePaddle () ;
}
Функции находятся в основной временной шкале. Первая функция, initGame, хранит положение мяча в переменных х и у. Указаны значения dx и dy, то есть скорость мяча по вертикали и горизонтали (5 пикселов в кадре каждая). Затем функция initGame устанавливает несколько постоянных, определяющих положение каждой стены. Этой функции передается значение радиуса мяча, которое также используется функцией moveBall. Переменной passedPaddle присваивается значение true после того, как ифок пропустит мяч. При этом надо спрятать курсор, чтобы он не отвлекал внимание игрока. function initGame() {
// Устанавливаем начальное положение мяча,
х = Ьа11._х;
у = ball._y;
// Указываем начальную скорость,
dx = 5;
dy = 5;
// Устанавливаем значения постоянных.
rightwali = 550;
leftWall = 0;
topWall = 0;
bottomWall = 4 4 0;
ballRadius = ball._width/2 passedPaddle = false;
// Прячем курсор.
Mouse.hide();
}
Функция movePaddle - "рабочая лошадка" этой игры. Сначала она изменяет значение х и у на величину значений dx и dy соответственно, чтобы получить новое положение мяча (1). Затем проверяет, пролетел ли мяч сквозь стену или нет (2).
К радиусу мяча прибавляется значение его положения, чтобы получить точную позицию правого края мяча. Если мяч оказался за стеной, функция movePaddle подсчитывает, как далеко он перелетел, и присваивает это значение переменной overshoot. Затем мяч перемешается назад на расстояние, в два раза превышающее значение overshoot. Направление мяча меняется при умножении dx на -1, таким образом, знак dx меняется на противоположный. Если значение dx до столкновения мяча со стеной было равно 5, то после этого события становится равным -5.
Затем код проверяет, пролетел ли мяч сквозь нижнюю стену или нет (3). Этот фрагмент похож на предыдущий, только вместо х и dx используются величины у и dy.
Фрагмент кода, где проверяется, пролетел ли мяч через верхнюю стену, несколько отличается от уже рассмотренных (4). Для определения положения верхней границы мяча из положения его центра вычитается радиус. Затем величина overshoot рассчитывается как разница между положениями стены и верхней границы мяча.
Для того чтобы определить, ударился ли мяч о биту или нет, сначала код рассчитывает положение правой границы биты (5). Потом, если мяч находится достаточно близко к бите, рассчитываются верхняя и нижняя границы, а затем определяется, пересекаются ли мяч и бита (6).
Если мяч сталкивается с битой, то он ведет себя так же, как и при столкновении со стеной. Однако при этом скорость мяча увеличивается на 5% (7). Если мяч перелетает через стену, совершается только одно действие - переменной passedPaddle присваивается значение true.
Если значение переменной passedPaddle равно true, и мяч находится там, где должна быть левая стена, игра заканчивается (8). Курсор возвращается в исходное положение, и ролик переходит к кадру "game over".
В конце функции moveBall положение мяча устанавливается в соответствии со значениями х и у. Оператор *= работает точно так же, как и +=, только он умножает исходное значение переменной на указанное число. То есть если значение а равно 5, строка а *= 3 изменит это значение на 15. Если же записать а *= -1, значение переменной а станет равным - 5. Воспользовавшись записью *= - 1 можно быстро изменить знак переменной.
function moveBall() {
(1)// Изменяем значение переменных х и у.
х += dx;
У + = dy;
(2)// Проверяем, достиг ли мяч правой стены,
if (x+ballRadius > rightWall) {
overshoot = (x+ballRadius) - rightWall x -= overshoot*2;
dx *= -1;
(3)// Проверяем, достиг ли мяч нижней стены,
if (y+ballRadius > bottomWall) {
overshoot = (y+ballRadius) - bottomWall;
у -= overshoot*2;
dy *= -1;
(4)// Проверяем, достиг ли мяч верхней стены,
if (y-ballRadius < topWall) {
overshoot = topWall - (y-ballRadius);
у += overshoot*2;
dy *= -1;
(5)// Находится ли мяч там, где должен удариться о биту?
paddleRight = paddle._x+(paddle._width/2);
if ((x-ballRaduis < paddleRight) and passedPaddle) {
(6)/ / Находится ли там бита?
paddleTop = paddle._y-(paddle._height/2);
paddleBottom = paddle._y+(paddle._height/2);
if ((y > paddleTop) and (y < paddleBottom)) {
// Удар о биту.
overshoot = paddleRight х += overshoot*2;
dx *= -1;
(7) // Увеличиваем скорость,
dx *= 1.05; dy *= 1.05;
} else {
// Мяч пропущен, больше ничего проверять не надо.
passedPaddle = true;}}
(8)// Проверяем, находится ли мяч у левой стены,
if ((x-ballRadius < leftWall) and passedPaddle) {
Mouse.show();
GotoAndPLay("game over");}
// Устанавливаем новое положение мяча.
ball._x = х,-ball._y = у; }
}
По сравнению с функцией moveBall функция movePaddle Поразительно короткая. Все, что необходимо сделать, - присвоить вертикальному положению биты значение вертикальной координаты курсора. function movePaddle() {
// положение биты меняется в соответствии с курсором
paddle._у = _ymouse;
}

Создание кода

Создание кода

В сценарий предыдущего ролика необходимо внести некоторые изменения. Изменить существующие функции и добавить одну новую. Приведем сценарий клипа "actions", который вызывает новую функцию moveComputerPaddle: onClipEvent(load) {
_root.startLevel();
}
onClipEvent(enterFrame) {
_root.moveBall ();
_root.movePaddle() ;
_root.moveComputerPaddle();
}
Вместо функции startGame в этой игре используется функция startLevel, которая обладает всеми возможностями функции startGame и в дополнение к ним указывает, что мяч будет двигаться в произвольном направлении. Достичь этого можно, определив, что мяч в 50% случаев подается вверх, в 50% случаев - вниз, также в 50% случаев - влево и в 50% случаев - вправо. То есть вы получаете четыре возможных направления движения мяча по диагонали. function startLevel() {
// Определяем начальное положение мяча,
х = ball._x;
у = ball._y;
// Указываем начальную скорость и одно из четырех
// произвольных направлений по диагонали,
dx = 5;
dy = 5;
if (Math.random() < .5) dx *= -1;
if (Math.random() < .5) dy *= -1;
// Прячем курсор. Mouse.hide();
// Устанавливаем значения констант.
rightWall = 550;
leftWall = 0;
topWall = 0;
bottomWall = 400;
ballRadius = ball._width/2;
passedPaddle = false;
}
Теперь в функцию moveBall включен код для определения, пролетел ли мяч мимо биты компьютера или нет (10). Он похож на код, обрабатывающий биту игрока (9), и идентичен соответствующему фрагменту кода предыдущей игры.
Когда мяч пролетает с правой (11) или с левой (12) стороны, обычно игра возвращается к кадру "start level". Однако если не осталось больше мячей, программа переходит к кадру завершения игры, "game over". В зависимости от того, кто пропустил мяч, очко записывается либо игроку, либо компьютеру (переменной playerScore или computerScore). function moveBall() {
// Изменяем координаты х и у.
х += dx;
y += dy;
// Проверяем, попал ли мяч в нижнюю стену,
if (y+ballRadius > bottomWall) {
overshoot = (y+ballRadius) - bottomWall;
у -= overshoot*2;
dy *= -1;
}
// Проверяем, попал ли мяч в верхнюю стену, if (y-ballRadius < topWall) {
overshoot = topWall - (y-ballRadius);
у += overshoot*2;
dy *= -1;}

(9) // Находится ли мяч там, где по нему должна ударить бита?

paddleRight = paddle._x+(paddle._width/2);
if ((x-ballRadius < paddleRight) and ipassedPaddle) {
// Находится ли там бита?
paddleTop = paddle._y-(paddle._height/2);
paddleBottom = paddle._y+(paddle._height/2);
if ((y > paddleTop) and (y < paddleBottom)) {
overshoot = paddleRight - (x-ballRadius)
// Удар битой,
x += overshoot*2;
dx += -1;
// Увеличиваем скорость мяча,
dx *= 1.05;
dy *= 1.05;
} else {
// Мяч пропущен, больше ничего не проверяем.
passedPaddle = true;}
}

(10) // Находится ли мяч там,

// где должен столкнуться с битой компьютера?
paddleLeft = computerPaddle._x-(computerPaddle._width/2);
if ((x+ballRadius > paddleLeft) and !passedPaddle) {
// Находится ли тем бита?
paddleTop = computerPaddle._y-(computerPaddle._height/2);
paddleBottom = computerPaddle_>y+
(computeerPaddle._height/2);
if ((y > paddleTop) and (y < paddleBottom)) {
// Удар битой.
oveershoot = (x+ballRadius) - paddleLeft;
x -= overshoot *2; dx *= -1;
// Увеличиваем скорость мяча,
dx *= 1.05;
dy *= 1.05;
} else {
// Мяч пропущен, ничего больше не проверяем.
passedPaddle = true;
}}

(11) // Проверяем, попал ли мяч в левую стену.

if ((x-ballRadius < leftWall) and passedPaddle) {
Mouse.show();
computerScore++;
if (numBalls == 0) {
gotoAndPlay("game over");
} else {
numBalls--;
gotoAndPlayf"start level");}}

(12) // Выполняем аналогичную проверку для правой стены,

if ((x+ballRadius > rightWall) and passedPaddle) {
Mouse.show();
playerScore++;
if (numBalls == 0) {
gotbAndPlay("game over");
} else {
numBalls-;
gotoAndPlay("start level");
// Устанавливаем новое положение мяча.
ball._x = х;
ball._y = у;
}
Функция movePaddle идентична одноименной функции предыдущей игры. Однако необходимо добавить функцию moveComputerPaddle, управляющую правой битой, которая будет перемещать биту только в том случае, если мяч летит вправо. Бита будет перемещаться вверх, если мяч расположен выше нее, и вниз, если ниже.
Скорость передвижения биты устанавливается в начале функции. Чем выше это значение, тем быстрее бита будет реагировать на перемещения мяча. function moveComputerPaddle() {
// Устанавливаем скорость биты, управляемой компьютером.
moveAmount = 8;
// Выясняем, движется ли мяч в этом направлении,
if (dx > 0) {
// Перемещаем биту вверх.
if (у < computerPaddle._y-moveAmount) {
computerPaddle._y -= moveAmount;
,// Перемещаем биту вниз.
} esle if (у > computerPaddle._y+moveAmount) {
computerPaddle._y += moveAmount;
}}}
Еще один важный фрагмент кода входит в кадр "start game" и устанавливает исходные значения количества мячей и очков. Эти переменные не могут быть вставлены в функцию startLevel, так как они должны быть установлены только в начале игры, а не перед тем, как подается мяч. numBalls = 7;
computerScore = 0;
playerScore = 0;
stop();

Создание кода

Создание кода

Прежде чем будет запушен кадр игры, в кадре "start game" необходимо определить две важные переменные: начальную скорость движения мяча по вертикали и количество мячей, которые могут быть поданы. dy = 3;
numBalls = 3;
stop() ;
Когда происходит переход к кадру "play", с помощью клипа "actions» можно регулярно вызывать функции. В данной игре все столкновения с мячом или стенами должны быть учтены в функции moveBall, но для блоков была создана отдельная функция - checkCollisions. onClipEvent(load) {
_root.startBall();
onClipEvent(enterFrame) {
_root.moveBall();
_root.movePaddle();
_root.checkCollisions();
}
Когда начинается кадр "play", подается мяч. Положение мяча определяется тем, где он появляется на рабочем поле. Скорость мяча по горизонтали всегда равна 3, направление движения - вправо. Скорость по вертикали указывается в первом кадре, где величине dy было присвоено значение 3. Однако это значение изменится перед следующим уровнем.
Вдобавок к параметрам мяча воспользуйтесь возможностью и установите некоторые значения, которые не будут изменяться во время игры. function startBall() {
// Определяем начальное положение мяча,
х = ball._x;
у = ball._y;
// Устанавливаем начальную скорость по горизонтали,
dx = 3;
// Прячем курсор.
Mouse.hide();
// Задаем значения констант.
rightWall = 550;
leftWall = 0;
topWall = 0;
bottomWall = 400;
ballRadius = ball,_width/2;
paddleTop = paddle._y-paddle._height/2;
paddleBottom = paddle._y+paddle.__height/2;
}
Следующая функция управляет битой, выравнивая ее по горизонтали в соответствии с движением мыши. // Бита следует за курсором,
function movePaddle() {
paddle._x = _xmouse;
}
Следующая функция покажется вам знакомой, так как она очень похожа на функцию moveBall, которая используется в других играх этой главы. Однако есть и некоторые отличия.
Для того чтобы узнать, ударился ли мяч о биту, код проверяет, полностью ли они перекрываются (13). Затем, если все-таки столкновение произошло, скорость мяча по горизонтали определяется тем, где именно мяч ударился о биту (14). К тому же код для определения, пропущен ли мяч, проще, так как он просто проверяет, пролетел ли мяч сквозь нижнюю стену или нет (15). function moveBall() {
// Изменяем горизонтальное и вертикальное положение мяча.
х += dx;
У += dy;
// Проверяем, находится ли мяч у правой стены,
if (x+ballRadius > rightWall) { overshoot = (x+ballRadius) - rightWall;
x -= overshoot*2;
dx *= -1;
// Проверяем, находится ли мяч у левой стены.
if (x-ballRadius < leftWall) {
overshott = leftWall - (x-ballRadius);
x += overshoot*2;
dx *= -1;
// Проверяем, находится ли мяч у верхней стены,
if (y-ballRadius < topWall) {
overshoot = topWall - (y-ballRadius);
у += overshoot*2;
dy *= -1;
(13)// Находится ли мяч там, где должен удариться о биту?
if ((y+ballRadius > paddleTop) and (y-ballRadius < paddleBottom)) {
// Находится ли там бита?
paddleLeft = paddle._x-(paddle._width/2);
paddleRight = paddle._x+(paddle._width/2);
if ((x+ballRadius > paddleLeft) and (x-ballRadius < paddleRight)) {
// Удар о биту.
overshoot = paddleTop- (y+ballRadius);
у += overshoot*2;
dy *= -1;
(14) // Указываем горизонтальную скорость мяча
//в зависимости от места соприкосновения мяча и биты.
dx = (ball._x - paddle._x)/4;
} else {
// Мяч пролетел мимо биты
passedPaddle = true;
(15) // Проверяем, пролетел ли мяч мимо биты.
if (у > bottomWall) {
Mouse.show() ;
if (numBalls == 0) {
// Больше мячей нет, конец игры.
gotoAndPlay("game over");
} else {
// Еще остался мяч.
numBalls--;
gotoAndPlay("start ball");
}
} // Определяем расположение мяча,
ball._x = х;
ball._y = у;
}
Для того чтобы узнать, ударил ли мяч по блоку, код проверяет все 55 блоков. Блок с горизонтальным положением равным -1000 пикселов уже был сбит, такие блоки игнорируются. В противном случае вызывается функция brickHits, чтобы определить, перекрываются ли мяч и блок. Если да, то блок удаляется, а мяч отталкивается от него.
Обратите внимание на переменную leveldone. Изначально ее значение равно true, но оно изменяется на false, как только встречается блок, который не был сбит. Если значение переменной leveldone все еще остается истинным после того, как были использованы все мячи, игроку удалось удалить все блоки. Игра переходит к кадру "start level", но прежде увеличивается скорость мяча по вертикали, то есть переменная dy. Необходимо проверить, превышает ли скорость мяча по вертикали значение 7, если да, то нужно снова присвоить ей значение 7. Это вызвано тем, что блоки имеют 8 пикселов в высоту. Если скорость мяча будет равна 8 пикселям или более, тогда мяч будет перелетать через блоки, не выбивая их. К. счастью, скорость, равная 7, и так слишком велика - даже хороший игрок долго не продержится.
function checkCollisions() {
// Определяем границы мяча. ballTop = ball._y - ball._height/2;
ballBottom = ball._y + ball._height/2;
ballLeft = ball._x - ball._width/2;
ballRight = ball._x + ball._width/2;
// Допускаем, что уровень пройден,
leveldone = true;
// Выясняем, ударил ли мяч по блоку,
for (i = l; i < = 55 ; i + +)
{ brick = _root["a" + i] ;
// Проверяем, есть пи еще блоки вокруг,
if (brick._х о -1000) {
if (brickHit(brick)) {
// Если по блоку ударили,
// его нужно удалить с экрана.
brick._х = -1000;
// Изменяем направление движения мяча,
dy *= -1;
} else {
// Блоки еще остались, так что уровень
//не закончен,
leveldone = false;
}}
} // Все ли блоки уже выбиты?
if (leveldone) {
// Начать новый уровень.
Mouse.show();
gotoAndPlay("start level");
// Увеличиваем скорость движения мяча по вертикали.
dy += 1;
if (dy > 7) dy=7;
}
}
Обратите внимание, что в функции hitBrick находятся четыре вложенных оператора if. Возможно, вам будет интересно, почему не написать четыре условия в линию, соединив их оператором AND. Дело в скорости. С вложенными операторами if, если одно из условий оказалось ложным, программа не будет проверять остальные. Таким образом, значительно сократится объем работы, которую выполняет программа, и скорость игры увеличится. С операторами AND программе Flash придется проверять все четыре условия, даже если первое из них ложное.
Функция hitBrick проверяет все четыре стороны мяча по отношению ко всем четырем сторонам блока, чтобы узнать, перекрывает ли мяч один из них. Функция возвращает значение либо true, либо false. function brickHit(brick) {
// Проверяем, попал ли мяч по блоку.
if (ballTop if (ballBottom >= brick._y - brick._height/2) {
if (ballRight >= brick._x - brick._width/2) {
if (ballLeft // Все условия верны, то есть мяч
// столкнулся с блоком,
return(true);
}}}} // Мяч не столкнулся с блоком,
return(false);
}

Создание кода

Создание кода

Код состоит в основном из функций, расположенных во втором кадре. Первая начинает игру. Вместо отдельных переменных для хранения х, у и z значений мяча, мы используем один объект, ballpos, который имеет о свойства. Таким образом, ballpos .x соответствует x-положению мяча. То же самое мы делаем для ballvel, где содержатся х, у и z скорости мяча.
В начале игры значения свойств объекта bollpos устанавливаются таким образом, чтобы мяч начинал свое движение от задней стенки параллелепипеда. Значения объекта ballvel задают начальное движение мяча строго вдоль оси Oz и скорость на единицу большую номера уровня игры (то есть 2).
Следующая часть функции initGame создает 16 блоков из одного библиотечного образца и покрывает ими всю заднюю стенку. В заключении функции мы устанавливаем уровень биты и шара так, чтобы они были расположены поверх созданных кирпичей. function initGame() {
// Устанавливаем мяч.
ballpos = {х:200, у:200, z:140};
// Определяем его скорость.
ballvel = {х:0, у:0, z:-(1+gameLevel)};
// Создаем блоки,
bricks = new Array();
for(var x=0;x for(var y=0;y brick = attachMovie("brick","brick"+x+y,x+y*4);
brick._x = 155+30*x;
brick._y = 155+30*y;
bricks.push(brick);
// Перемещаем биту и шар на передний план.
paddle.swapDepths(101);
ball.swapDepths(100);
}
Клип "actions" вызывает всего две функции. onClipEvent(enterFrame) {
_root.movePaddle();
_root.moveBall(); }

Первая из этих функций, movePaddle, очень простая. Она устанавливает биту в позицию курсора. function movPaddle() {
//Положение биты соответствует положению курсора.
Paddle._x=_root._xmouse;
Paddle._y=_root._ymouse;
}
А вот функция moveBall выполняет очень много действий. Вначале переопределяются координаты мяча (объект ballpos) с помощью значений объекта ballvel (16).
Затем вычисляется положение мяча на экране (17). Координата х определяется как значение ballpos. х, подкорректированное в соответствии со значением ballpos.z. Чем глубже находится шар, тем большую величину составляет поправка. Второй множитель поправки определяется тем, насколько далеко находится шар от стенок колодца. Если, например, шар находится ровно посередине между стенкой и центральной осью, то есть ballpos.х = 100 или (-100), то поправка будет равняться значению ballpos.z (ballpos.z соответственно). Если вы не вполне поняли логику этих рассуждений, попробуйте поменять различные параметры объекта bollpos и посмотрите на результат.
Следующий фрагмент кода устанавливает значение масштаба шара в соответствие со значением ballpos.z (18). Поскольку максимальное значение ballpos.z составляет 140, то минимальный масштаб составляет (200-140)/2, то есть 35%.
Далее мы устанавливаем масштаб клипа "ring" (19). Этот клип выполняет роль указателя, помогающего понять, на какой глубине находится шар в данный момент.
Если шар сталкивается с одной из стен параллелепипеда (20), происходит отражение от стенки. Проверка выполняется для всех четырех стен.
Столкновение с задней стенкой (21) обрабатывается несколько сложнее. Значение z меняется на противоположное. Кроме того, клипы блоков проверяют, куда именно врезался шар. Блок, с которым произошло столкновение, удаляется, и счет увеличивается.
Передней стенки у нас нет, но на ее месте располагается бита. Если параметр z принимает значение 0, клип биты проверяет, попал ли в него? шар (22). Бита имеет размер 70x70, так что шар должен находиться не далее чем в 35 пикселях по каждой из координат от центра биты. При столкновении определяются новые значения скорости шара в соответствии с расстоянием от центра биты до места столкновения (23). При столкновении строго по центру шар отражается отвесно, тогда как отражение, например, от левой стороны отклоняет мяч влево и т.д.
При столкновении с битой ее параметр _alpha на мгновение принимает значение 90 (24). В следующем кадре значение восстанавливается (26).
Если шар пролетает мимо биты, игра заканчивается (25). Если же все блоки оказываются выбиты, игрок переходит на следующий уровень. function moveBall() {

(16)// Определяем пространственные координаты шара.

ballpos.х += ballvel.x;
ballpos.у += ballvel.у;
ballpos.z += ballvel.z;

(17) // Определяем плоские координаты.

ball._x = ballpos.x + ballpos.z*(200-ballpos.x)/200;
ball._y = ballpos.у + ballpos.z*(200-ballpos.у)/200;

(18) // Корректируем размер шара.

ball._xscale = (200-ballpos.z)/2;
ball._yscale = (200-ballpos.z)/2;

(19) // Определяем размер рамки.

ring._xscale = (200-ballpos.z)/2;
ring._yscale = (200-ballpos.z)/2;

(20) // Проверяем столкновения со стенками,

if (ballpos.x > 400) ballvel.x *= -1;
if (ballpos.x < 0) ballvel.x *= -1;
if (ballpos.у > 400) ballvel.у *= -1;
if (ballpos.у < 0) ballvel.у *= -1;

(21) // Столкновение с задней стеной,

if (ballpos.z > 140) {
// Меняем направление вдоль
Oz. ballvel.z *= -1;
// Удаляем выбитые шары.
for(var i=bricks.length-1;i>=0;i--) {
if (bricks[i].hitTest(ball._x,ball._y)) {
bricks[i].removeMovieClipt);
bricks.splice(i,1);
score++;}}}

(22) // Столкновение с битой.

if (ballnos.z < 0) {
// Расстояние до центра биты,
рх = ballpos.x-paddle._x;
ру = ballpos.y-paddle._y;
// Столкновение происходит, если расположение от шара
//до центра биты не более 35 пикселов.
if ((Math.abs(px) < 35) and (Math.abs(ру) < 35)) {

(23) // Корректируем скорости по х и по у.

ballvel.x = рх/7; ballvel.y = ру/7;

(24) //Отмечаем столкновение изменением прозрачности биты.

paddle._alpha = 90;
} else {

(25) // Мяч пропущен.

removeBallAndPaddle();
gotoAndStop("game over");
// Меняем направление мяча вдоль Oz.
ballvel.z *= -1;
} else {

(26) // Возвращаем бите прежнюю прозрачность,
paddle._alpha = 50;

(27)// Смотрим, все ли блоки выбиты,

if (bricks.length < 1) {
gameLevel++;
removeBallAndPaddle();
gotoAndStop("level over");
}}
}
Вот еще два полезных фрагмента кода. Первый удаляет шар и биту. Если этого не сделать, они так и будут висеть, как в кадре "game over" так и в кадре "level over". function rernoveBallAndPaddle (){
paddle.removeMovieClip();
ball.removeMovieClip(); }

Ну а следующая функция, removeBricks, удаляет блоки из этих же кадров. Вызывается при нажатии соответствующих кнопок. function removeBricks() {
for(var i=0;i bricks[i].removeMovieClip();
}}
Первый кадр ролика - "start" - присваивает переменной gameLevel значение 1 и останавливает ролик. gameLevel=1;
stop();
Чтобы перейти к следующему кадру, надо нажать кнопку. Вот ее код. on (press) {
GotoAndStop("Play");
}
Все функции, которые мы рассмотрели, находятся в кадре "Play". Еще там есть команда, вызывающая функцию initGame. Когда уровень пройден, игра переходит к кадру "level over". Так как клип "action" находится в другом кадре, то все шары автоматически останавливаются. При нажатии единственной в этом кадре кнопки все блоки удаляются, и функция initGame может расставить их заново при переходе на следующий уровень. on (press) {
removeBricks();
gotoAndStop("Play");
}
При нажатии кнопки в кадре "game over" блоки тоже удаляются, но игра переходит к кадру "start". on (press) {
removeBricks();
gotoAndStop("Start");

Стена и мяч

Стена и мяч

Исходный файл: Wallball.fla
Первая игра называется "Стена и мяч". В ней имеются бита, управляемая пользователем, и три стены, от которых может отскакивать мяч. Четвертой стены нет (она открыта). Задача игрока состоит в том, чтобы не позволить мячу пролететь мимо биты (Рисунок 11.1).

В игре "Бита и блоки" представлены

Рисунок 11.4 В игре "Бита и блоки" представлены ряды блоков, которые игрок должен выбить с помощью мяча

Самое сложное при создании этой

Подход

Самое сложное при создании этой игры - сделать так, чтобы мяч правильно отскакивал от стен. Многие программисты не учитывают ни диаметр мяча, ни его скорость. В результате может случиться, что мяч будет отскакивать не от стены, а от точки, расположенной за ней.

Рассмотрим ситуацию, когда мяч оказывается за стеной. При этом надо выяснить, насколько далеко залетел мяч за пределы игрового поля. Так как мяч перемещается на несколько пикселов в одном кадре, он может легко проскочить за стену на несколько пикселов.
После того как вы узнаете, насколько далеко за стеной оказался мяч, вы можете изменить направление его движения, а затем поместить мяч на соответствующее расстояние с нужной стороны стены. На Рисунок 11.2 показана диаграмма работы данного алгоритма.

а блок исчезает. После того

Когда мяч ударяется о блок, он отскакивает, а блок исчезает. После того как будут выбиты все блоки, игра переходит на другой уровень, где на экране окажутся те же блоки, но мяч будет двигаться быстрее. Просмотрите ролик Paddlebricks.fla, чтобы увидеть, как работает игра.
Другое отличие этой игры от предыдущих состоит в том, что направление движения мяча зависит от того, в каком месте мяч ударится о биту. Если он попадает в левую часть биты, то отлетает влево, если же в правую, то вправо. Угол определяется тем, насколько далеко от центра биты ударился мяч.

в том, чтобы выбить все

Цель состоит в том, чтобы выбить все 16 блоков из задней стены. Как только шар касается кирпича, он выпадает. Когда шар достигает уровня с битой, она должны занимать такое положение, чтобы коснуться мяча. Место, где шар коснулся биты, определяет новое направление шара.
Когда все 16 кирпичей выбиты, уровень пройден. На следующем уровне шар движется несколько быстрее.

в том, чтобы создать противника,

Задача проекта

Цель игры состоит в том, чтобы создать противника, обладающего искусственным интеллектом, с которым будет соревноваться игрок. Левая бита будет управляться игроком, а правая - воссоздавать возможную реакцию человека с помощью компьютерных расчетов.
Мяч будет отскакивать от верхней и нижней стен, и только от действий игрока и компьютера будет зависеть, вылетит ли он за пределы экрана.
Когда мяч пролетает мимо одной из бит игроков, игра приостанавливается до тех пор, пока пользователь не щелкнет по кнопке "serve". Затем мяч снова появится в середине экрана. Счет игры сохранится. Игра заканчивается в том случае, если один из игроков наберет 7 очков.

Создание Flash игр -практические уроки

Другие возможности

Другие возможности

Хотя цель игры заключается в отображении только 10 вопросов, ни одна строчка кода не ограничивает их число. Можно запросить большее или меньшее количество вопросов из файла Flashquiz.txt.
Вместе с выводом строки пользователю можно показывать некое сообщение. Например, при отображении строчки "8 out of 10" можно подбодрить пользователя следующим образом: "You know your planets!" (Вы знаете планеты!), а при двух не правильных ответах из 10 будет выводиться сообщение "Go back to school" (Снова идите в школу).

Другие возможности

Другие возможности

Как и в предыдущей игре, в текстовый файл можно поместить столько вопросов, сколько вы хотите. Если вы знакомы с программированием CGI, вы даже можете написать программу для сервера, которая будет генерировать файл Flashtrivia.txt на основе базы данных вопросов.
Вы также можете изменить начальное количество очков для вопросов, а также число очков, вычитаемых за неправильный ответ.

Другие возможности

Другие возможности

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

Другие возможности

Другие возможности

По мере того, как игрок движется вдоль фразы с помощью клавиш со стрелками, курсор иногда оказывается над пробелом или другим неактивным знаком. Вы можете расширить код, чтобы следить за движением курсора и, когда он находится на пустым пространством, заставить его продолжать движение вперед или назад, пока он не коснется буквы.
Хотя исходный ролик содержит фразу, встроенную в код, вы можете считывать ее с помощью команд LoadVariables или LoadVars. Это дает вам возможность изменять фразу без перекомпилирования swf-файла.

Игра "Виселица" проиграна

Рисунок 12.5 Игра "Виселица" проиграна



На Рисунок 12.5 изображен основной кадр игры, где рисунок с повешенной лисой закончен и открыты некоторые буквы. В данном случае игра только что была проиграна.

Игра "Виселица"

Игра "Виселица"

Исходный файл: Hangman.fla
Следующая игра должна быть знакома всем. В классической игре с ручкой и бумагой, "Виселице", игрок должен угадать, какие символы используются в фразе. Если он угадывает букву, становятся видны все места ее включения во фразу. Если во всей фразе нет такой буквы, добавляется фрагмент рисунка с повешенным человеком. Если рисунок закончен прежде, чем фраза угадана, игрок проигрывает.

К сведению

К сведению

Вам понадобятся два звука, один с именем "right", а другой - "wrong". Также потребуется кнопка "continue", похожая на изображенную на Рисунок 12.3. Если у вас есть вопросы по работе программы, просмотрите ролик Flashquiz.fla.

К сведению

К сведению

Внимательно просмотрите каждый элемент ролика Flashtrivia.fla. В нем находятся текстовые поля: для вопроса, четырех ответов, количества возможных очков и счета. Каждая кнопка представляет собой копию одного и того же клипа, вверху нее расположен статический символ. Эти символы лишь напоминают пользователю, что он может нажать соответствующую клавишу на клавиатуре вместо того, чтобы щелкнуть по самой кнопке.

К сведению

К сведению

В конце ролика нужно вставить кадры "win" и "lose", к которым игра будет переходить при ее завершении. В ролике Hangman.fla эти кадры статичные, но вы можете добавить какую-либо анимацию в любой из них. Например, анимация "win" может показывать, что лису отпускают, в то время как анимация "lose" может демонстрировать что-нибудь устрашающее.

К сведению

К сведению

Исходный ролик содержит кадр "game over". Это к нему возвращается ролик, когда головоломка решена. Вы также можете использовать removeListener, если хотите заставить ролик перестать отвечать на нажатие клавиш.

Кадр "start game" виден пока пользователь

Рисунок 12.3 Кадр "start game" виден, пока пользователь не щелкнет по кнопке начала игры Создание кода

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

Сценарий начинается с создания нового объекта LoadVars. Этот объект с помощью своих свойств позволяет решать набор специфических задач,связанных с загрузкой переменных. Вы можете получать информацию о том, что данные были отправлены на сервер или загружены с сервера.
Поскольку вам нужен ответ от сервера, то изначально необязательно устанавливать какие-либо свойства объекта LoadVars. Подробнее мы рассмотрим эти приемы в главе 17 "Сложные приемы". Метод load объекта LoadVars обращается к серверу и загружает данные.
Метод load объекта LoadVars осуществляет загрузку, обращаясь к указанному URL. Файл данных должен иметь вид "имя переменной = данные". Например, в результате обращения к текстовому файлу myVariable=Hello переменной myvariable будет присвоено значение Hello. Поскольку обращение происходит к удаленному серверу, может пройти некоторое время между вызовом команды load и загрузкой данных.
Итак, в начале сценария создается новый объект loadQuestions. С помощью метода load он обращается к файлу Flashquiz.txt.
Свойство onLoad объекта LoadVars определяет функцию, которая вызывается, когда загрузка завершена. В этом случае будет вызвана функция initQuestions.
После выполнения команды LoadVars. load данные из текстового файла будут доступны к использованию ActionScript. Например, если переменной myProperty присвоено значение myValue, то обращение loadQuestionsmyProperty. вернет значение myValue. stop();
// Загружаем вопросы.
loadQuestions = new LoadVars();
loadQuestions.load("flashquiz.txt");
// Вызываем initQuestions, когда загрузка окончена.
loadQuestions.onLoad = initQuestions;

Функция initQuestions преобразовывает текстовую строку в массив, состоящий из вопросов, ответов и номера правильного ответа для каждого вопроса.
Вот как выглядит первая часть файла Flashquiz.txt. Первая строчка присваивает свойству topic текст "The Planets". С помощью обращения loadQuestions.topic сценарий получит доступ к этому значению и присвоит его переменной topic. Результат отобразится в динамическом текстовом поле. topic=The Planet&questions=Which planet is closest to the Sun?:
Jupiter;Saturn;Mercury,-Mars:2:
Обратите внимание, в текстовом файле переменные необходимо разделять знаком "&". Переменная questions состоит из нескольких строчек; в каждой содержится отдельный вопрос. Каждый вопрос состоит из трех частей: текст вопроса, ответы и номер правильного ответа. Части отделяются друг от друга двоеточием, а в качестве разделителя ответов мы используем точку с запятой. Which planet is titled on its axis the most?:
Earth;Venus;Mars;Uranus:3:
Which planet is the largest?:Jupiter;Earth;Neptune;Pluto:0:
Which planet has exactly two moons?:Venus;Mars,-Saturn;Uranus:1:

тема=планеты&вопросы=Какая планета ближайшая к солнцу?:
Юпитер;Сатурн;Меркурий;Марс:2:
У какой планеты ось имеет наибольший наклон?:
3емля;Венера;арс; Уран :3 :
Какая планета самая большая?:Юпитер;3емля;Нептун;Плутон:0:
Какая планета имеет две луны?:Венера;Марс;Сатурн,-Уран:1:

В конце каждой строки было добавлено двоеточие, чтобы строчка разбивалась кодом, другие дополнительные символы в конце строки будут помешены в четвертую, неиспользуемую часть. Какие могут быть дополнительные элементы? Например, при использовании текстовых редакторов Windows дополнительный невидимый символ помещается в конце каждой строки текста. Если вы позволите программе Flash использовать этот символ для номера правильного ответа, это помешает ей преобразовать номер во что-то еще. То есть лишнее двоеточие помешает дополнительный символ в неиспользуемый четвертый элемент каждой строки без ущерба для работы программы.
Не вставьте ненароком пустую строчку в конец текстового файла. Такая строчка будет создана, если нажать клавишу Enter или Return после ввода последнего вопроса. Если в конец текстового файла добавить пустую строчку, код воспримет ее как одиннадцатый элемент.
Текст разбивается на несколько элементов с помощью функции split, которая сначала отделяет вопросы друг от друга, затем разделяет части вопросов и, наконец, отделяет ответы. В результате получается двумерный массив, содержащий всю необходимую вам информацию. function initQuestions(questions) {
// Задаем значение переменной topic,
topic = loadQuestions.topic;
// Разбиваем на отдельные вопросы.
// Внимание: в некоторых случаях лучше использовать
// значение 13, а не 10.
qArray = loadQuestions.questions.split(String.fromCharCode(10));
// Разбиваем строчку вопроса на элементы,
for(i=0;i qArray[i] = qArray[i].split(":");
// Отделяем ответы друг от друга.
qArray[i][1] = qArray[i][1].split(";");}
// Начинаем игру. _root.gotoAndPlay("start game");
}
Я использовал выражение String. fromCharCode (13), чтобы получить символ возврата каретки, что нужно для отделения строк в текстовом файле. Почему я не применил константу newline? Дело в том, что newline в программе Flash отличается для систем Macintosh и Windows. В Macintosh возвращается значение 13, а в Windows - 10. Более того, некоторые текстовые редакторы предпочитают значение 10, а некоторые оба! Так что, если игра не движется далее первого вопроса, попробуйте поменять 10 на 13, чтобы проверить, не в этом ли проблема.
Когда игра переходит к кадру "play", код ActionScript в основной временной шкале сразу же вызывает функцию initGame, которая обнуляет переменные questionNum и numRight и вызывает функцию displayQuestion, отображающую первый вопрос. Функция split берет строчку и разбивает ее на фрагменты, которые помешаются в массив. Единственный параметр, который используется в этой функции, - это символ, необходимый для разделения фрагментов. В предыдущем примере как двоеточие, так и точка с запятой применялись для разбиения строчки и помещения элементов в массив.
function initGameO {
// Устанавливаем значения переменных.
questionName = 0;
numRight = 0;
// Выводим первый вопрос.
displayQuestion();
}
Функция displayQuestion определяет, закончена ли игра или нет, и в случае положительного ответа отображает окончательное количество набранных очков и переходит к кадру "game over". В противном случае она берет вопрос и каждый ответ и помешает их в текстовые поля внутри соответствующих клипов. Номер правильного ответа присваивается переменной correctAnswer. function displayQuestion() {
// Проверяем, все ли вопросы уже заданы,
if (questionNum >= qArray.length) {
// Отображаем окончательное число очков и завершаем игру
finalScore = numRight + "out of" + qArray.length;
gotoAndPlay("game over");
} else {
// Отображаем вопрос и ответы на экране.
question.text = qArray[questionNum][0];
answer0.text = qArray[questionNum][1][0];
answer1.text = qArray[questionNum][1][1];
answer2.text = qArray[questionNum][1][2];
answer3.text =qArray[questionNum][1][3];
// Выводим номер ответа.
questionNumDisplay = questionNum+1;
// Запоминаем, какой ответ верный.
correctAnswer = int(qArray[questionNum][2]
// Делаем так, чтобы текст "въезжал" на экран
animatein();
}
}
Когда у вас массив содержится в другом массиве (двумерный массив), к элементу вложенного массива можно обратиться с помощью нескольких скобок. Например, выражение myArray[3] [8] обращается в восьмому значению третьего элемента массива myArray. Массив ту Array СОСТОИТ ИЗ четырех или более элементов, в третьем элементе содержится, в свою очередь, массив по меньшей мере из девяти элементов.
Функция animatein позволяет создать эффект появляющегося из-за экрана текста. Она устанавливает положение каждого текстового клипа за рабочим полем справа. Затем для каждого из этих клипов с помощью переменной xstop присваивается нужное горизонтальное положение. Код, прикрепленный к каждому из этих клипов, перемешает его влево до тех пор, пока он не дойдет до положения xstop. function animatein() {
// Определяем положение каждого элемента текста,
//а также указываем место, где клип должен остановиться.
question.xstop = 300;
question._x = 800;
answerO.xstop = 400;
answer0._x = 1000;
answerl.xstop = 400;
answerl._x = 1200;
answer2.xstop = 400;
answer2._x = 1400;
answer3.xstop = 400;
answer3._x = 1600;
}
Когда пользователь щелкает по одной из четырех кнопок, вызывается функция selectAnswer, которой передается номер выбранного ответа (от 0 до 3). Если эта величина равна correctAnswer, звучит сигнал правильного ответа и увеличивается значение numRight. В противном случае воспроизводится сигнал неверного ответа. В любом случае увеличивается значение переменной guestionNum и отображается следующий вопрос. function selectAnswer(n) {
// Добавляем очко, если ответ правильный,
if (n == correctAnswer) {
triggerSoundf"right") ; numRight++;
} else {
triggerSound("wrong") ;
}
// Отображаем следующий вопрос.
questionNum++;
displayQuestion();
}
Функция triggersound проста, но очень полезна во многих игровых ситуациях. Ее назначение - проигрывать звук, сопровождающий правильный ответ. function triggerSoundfsoundName) {
// Проигрываем звук,
soundfx.stop();
soundfx = new Sound();
soundfx.attachSoundfsoundName);
soundfx.start();
}
Все это касается сценария основной временной шкалы. Однако есть еще два важных маленьких сценария, прикрепленных к другим элементам на рабочем поле. Первый прикреплен к каждому текстовому клипу. Он проверяет, находится ли клип правее положения xstop и, если это так, перемешает его дальше влево. В результате клип продолжает двигаться влево до тех пор, пока его положение не совпадет со значением переменной xstop. Следовательно, если клип располагается справа от экрана, с помощью функции animatein вопрос "въезжает" на экран. onClipEvent(enterFrame) { if (_x != xstop) _x -= 20;
}
К каждой кнопке также прикреплен короткий сценарий, который при щелчке по ней вызывает функцию selectAnswer и передает ей значение от 0 до 3. Сценарий следующий: on (release) {
selectAnswer(0); }
Для других кнопок вместо 0 будет указано либо 1, либо 2, либо 3.

Криптограмма

Криптограмма

Исходный файл: Cryptogram.fla
Криптограмма - это довольно распространенный вариант головоломки из слов, которая зачастую бывает труднее, чем игра в виселицу. Если вы никогда не видели ничего подобного, загляните в раздел кроссвордов в вашей местной газете. Скорее всего, рядом с ежедневным кроссвордом вы найдете и криптограмму.
В криптограмме предложение или высказывание зашифровано с помощью самой простой технологии: каждая буква алфавита заменена какой-нибудь другой буквой. Например, "Привет" может быть "Бнефид", где Б заменяет П, Н заменяет Р, Е заменяет И, Ф заменяет В, И заменяет Е и Д заменяет Т. Странность криптограмм в том, что чем они длиннее, тем легче их расшифровать. Обычно процесс начинают с поиска слов, состоящих из одной буквы, они могут значить «и» и «в», двухбуквенных слов, часто это «на», «по». Если фраза начинается с трехбуквенного слова, это может быть «что».

Подготовка ролика На экране только

Оба текстовых поля используют шрифт Courier New, поэтому все буквы занимают одинаковое место, как в игре "Виселица".

Подготовка ролика

Подготовка ролика

В этом ролике четыре кадра. Первый загружает вопросы и ответы и помещает их в массив. Второй кадр содержит информацию о правилах игры.
В третьем кадре начинается само действие, отображается вопрос, четыре ответа, кнопка рядом с каждым ответом, количество возможных очков и счет, оба последних текстовых поля - динамические, первое связано с переменной potentialPoints, а второе - с переменной score.
Помните, что на самом деле четыре ответа - это клипы, в которых находятся текстовые поля, отображающие содержимое переменной text. Однако имена четырех клипов отличаются цифрой: от "answer0" до "answer3".
И последний кадр игры - "game over". В нем показывается окончательный счет, и пользователь может щелкнуть по кнопке, чтобы сыграть заново.

Подготовка ролика

Подготовка ролика

Основной элемент - текстовое поле на экране. Сначала в нем находятся только пробелы и знаки подчеркивания, которые постепенно меняются на буквы, угадываемые игроком.
Текстовое поле должно быть динамическим и связано с переменной display. В панели Properties необходимо также выставить свойство Miltiline для текстового поля.
Текст отображается моноширинным шрифтом Monaco, который имеется в стандартной поставке системы Macintosh. Если вы создаете ролик в Windows, возможно, вам придется использовать другой моноширинный шрифт, например Courier New. Для этой игры необходим моноширинный шрифт, чтобы независимо от того, сколько букв угадано, слова имели одинаковую длину. Если бы у букв была разная ширина, то при добавлении новых символов, которые больше или меньше знака подчеркивания, программе Flash пришлось бы заново перерисовывать текст.
Игре также необходим клип "actions", который реагирует на нажатие клавиш и передает информацию о нажатой клавише сценарию основной временной шкалы.

Подход

Подход

Как и в предыдущем ролике, вопросы и ответы будут загружены из внешнего текстового файла. Однако текстовый файл будет немного отличаться. В предыдущей игре ответы были представлены в определенном порядке, и дополнительный элемент указывал, какой ответ верный. Сейчас же правильный ответ всегда будет располагаться первым, а далее будут следовать три неправильных ответа. Такое допустимо, так как ответы все равно будут перемешаны. Вот несколько строк из текстового файла flashtrivia.txt: questions=The world's first computer bug was actually a real bug
stuck in an early computer. What type of bug was it?:
Moth;Beetle,-Fly;Worm:
Which is the world's largest Island?:
Greenland;Iceland;Australia;New Zealand:
Besides humans, what other animal also has individual
fingerprints?:Koala Bears;Apes;Snakes;Frogs:

Вопросы=Какого типа был первый компьютерный вирус?
:Моль;Жук;Муха;Червь:
Как назывется самый большой остров в мире?
:Гренландия;Исландия;Австралия;Новая Зеландия:
Кроме людей, какие еще животные имеют уникальные отпечатки
пальцев?:Коалы;Обезьяны;Змеи;Лягушки.

Так же, как и при работе над предыдущим проектом, будьте внимательны: не вставьте нечаянно пустую строчку в конце текстового файла. Она появится, если вы нажмете клавишу Return или Enter после ввода последнего вопроса. Если в конце текстового файла будет вставлена пустая строка, она будет рассматриваться как одиннадцатый вопрос.
Перед тем как задается вопрос, ответы в новом массиве перемешиваются случайным образом. Правильный ответ может оказаться по счету любым из четырех вариантов. Его положение присвоено некоторой переменной.
Здесь будет использоваться такая же анимация, как и в предыдущей игре, но немного ускоренная. Вопрос будет появляться сразу же, без анимации, но ответы будут быстро "въезжать" справа. Количество возможных очков будет уменьшаться только после того, как все четыре ответа окажутся на месте.
Когда пользователь выбирает неправильный ответ, количество возможных очков уменьшается на определенную величину, но и выбранный ответ исчезает.

Подход

Подход

В игре производится множество действий с символами. Фраза, которую нужно угадать, представляет собой строку символов. Из нее вы создаете строку, в которой вместо букв находятся знаки подчеркивания. Это как раз то, что увидит пользователь.
Когда игрок угадывает букву, она сравнивается с каждой буквой исходной фразы. Если буква совпадает с какой-либо буквой фразы, она отображается на экране на своем месте (или местах).
Если игрок не угадывает, клип с лисой переходит к следующему кадру, в котором добавляется новый фрагмент изображения лисы. Если это последний кадр клипа с лисой, игра заканчивается.

Подход

Подход

В игре используются две карты букв. Первая карта букв ставит в соответствие каждую букву алфавита ее зашифрованному двойнику. Вот, например, такая карта

ОПФКТИЭШСЕЙГРМЛАБНЗДЯВЩЧЦЖХЪЮЬЁЫУ.


В этой карте первая буква алфавита, А, закодирована как О. Вторая буква, Б, закодирована как П и так далее. С помощью этой карты "Как дела" закодировано как "Гог тиро". Вторая карта букв - та, с помощью которой игрок расшифровывает головоломку. Она начинается так:

АБВГЛЕЁЖЗИЙКЛМНОПРСТУФХЦЧШШЪЫЬЭЮЯ.

Когда игрок расшифровывает одну из букв, его карта букв изменяется. Например, он решает, что Г соответствует К, тогда карта играющего примет такой вид:

АБВКДЕЙЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ.

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

Создание кода

Создание кода

Первый фрагмент кода находится в первом кадре главной временной шкалы. По существу это тот же самый код, который применялся в предыдущей игре для загрузки вопросов из текстового файла. Когда вопросы загружены, вызывается функция initQuestions, расположенная в основной временной шкале: stop () ;
// Загружаем список вопросов.
loadQuestions = new LoadVars();
loadQuestions.load("flashtrivia.txt") ;
loadQuestions.onLoad = initQuestions;

Функция initQuestions разбивает строчку на две части, первая часть- вопрос, вторая - ответы. Затем она отделяет ответы друг от друга.Вся информация хранится в массиве qArray. function initQuestions(quesions) {
// Выделяем вопросы,
qarray = questions.split(String.fromCharCode(13));
// Отделяем вопрос от ответов,
for (i=0;i qArray[i] = qArray[i].split(":");
// Отделяем ответы друг от друга.
qArray[i][1] = qArray[i][1].split(";");
}}

Наибольшая часть кода находится в кадре "play", то есть в том кадре, где задаются вопросы, и пользователь должен на них ответить. Сначала функция initGame обнуляет счет и выводит первый вопрос. function initGame() {
// Определяем переменные.
questionNum = 0;
score = 0;
// Выводим первый вопрос.
displayQuestion();
}
Функция displayQuestion берет следующий вопрос и помещает вопрос и ответы в соответствующие текстовые поля. Она также устанавливает количество возможных очков за правильный ответ на данный вопрос равным 1000. function displayQuestion() {
// Проверяем, все ли вопросы заданы,
if (questionNum >= qArray.length) {
// Отображаем окончательный счет, завершаем игру.
gotoAndPlay("game over");
} else {
// Перемешиваем ответы.
answers = shuffleArray(qArray[questionNum][1].slice(O) ) ;
// Выводим вопрос и ответы на экран,
question.text = qArray[questionNum][0];
answerO.text = answers[0];
answerl.text = answers[1];
answer2.text = answers[2];
answer3.text = answers[3];
// Отображаем номер вопроса.
questionNumDisplay = questionNum+1;
// Запоминаем, какой ответ правильный.
correctAnswer = qArray[questionNum] [1] [0] ;
// Воспроизводим анимацию текста.
animateln();
// Присваиваем начальное количество возможных очков - 1000.
potentialPoints = 1000;
}
}
При каждом обращении к кадру "play" клипом "actions" вызывается функция scoreCount. Она вычитает единицу из максимального возможного числа очков, проверяя, чтобы это значение не оказалось менее 0. //В каждом кадре из максимального возможного числа очков
// вычитаем единицу, function scoreCount() { // Проверяем, на месте ли последний ответ,
if (answers3._x == 400) {
// Вычитаем единицу.
potenrialPoints -= 1;
if (potentialPoints < 0) potentialPoints = 0;
}
}
Функция shuffleArray используется методом displayQuestion, чтобы случайным образом перемешать ответы. Сначала создается новый массив, а затем поэлементно из старого массива добавляются значения в новый массив. // Берем массив array1 и перемешиваем его элементы
// для массива аггау2.
function shuffleArray(arrayl) {
// Создаем новый, пустой массив.
array2 = new Array();
// Просматриваем массив с помощью цикла,
do {
// Выбираем случайную величину.
г = int(Math.random()*array1.length) ;
// Добавляем элемент в новый массив.
array2.push(array1[r]);
// Удаляем элемент из старого массива,
arrayl.splice(г, 1);
} while (array1.length > 0);
// Возвращаем новый массив,
return(array2);
}
}
Функция animateIn определяет положение четырех ответов с правой стороны рабочего поля. Она указывает, что каждый из этих четырех клипов должен остановиться при перемещении влево, когда достигнет нужного горизонтального положения (400 пикселов от правой границы игрового поля). Сценарий, прикрепленный к каждому клипу, перемещает клип влево до тех пор, пока не будет выполнено вышеуказанное условие. function animateln() { // Определяем положение каждого ответа
//и указываем место, где каждый клип должен остановиться.
answerO.xstop = 400;
answer0._x = 800;
answer1.xstop = 400;
answer1._x = 1000;
answer2.xstop = 400;
answer2._x = 1200;
answer3.xstop = 400;
answer3._x = 1400;
}
Когда пользователь щелкает по кнопке, выбранный ответ сравнивается со значением переменной correctAnswer, которая была определена в функции displayQuestion. Если ответ правильный, он набирает возможное количество очков, и выводится следующий вопрос. В противном случае, из количества возможных очков вычитается 200, и ответ удаляется с экрана. function selectAnswer(n) {
// Правильный ответ,
if (answer[n] == correctAnswer) {
triggerSound("right");
// Увеличиваем счет,
score += potentialPoints;
// Выводим следующий вопрос,
questionNum++;
displayQuestion() ;
} else {
// Неправильный ответ.
triggerSound("wrong");
// Уменьшаем количество возможных очков.
potentialPoints -= 200;
if (potentialPoints < 0) potentialPoints = 0;
// Удаляем ответ.
_root["answer"+n].text = "";
}
}
Функция triggerSound работает точно так же, как и в предыдущей игре. Она просто воспроизводит короткий звуковой сигнал. function triggerSound(soundName) {
// Воспроизводим звук,
soundfx.stop();
soundfx = new Sound();
soundfx.attachSoundtsoundName();
soundfx.start();
}
Другие фрагменты кода кадра "play" включают небольшую часть для клипа "actions", который вызывает метод scoreCount. onClipEvent(enterFrame) {
root.scoreCount() ;
}
Код для каждого из четырех клипов ответа также используется в программе (здесь представлен код только для одного клипа). Обратите внимание, что клип движется в два раза быстрее, чем в предыдущей игре. onClipEvent(enterFrame) {
if (_x != xstop) _x -= 40;
}
В каждой из четырех кнопок содержится сценарий, инициирующий при ее нажатии функцию selectAnswer. Кнопки реагируют не только на щелчок мыши, для каждой кнопки определена клавиша на клавиатуре. Например, первая кнопка, которую вы видите, помечена "А" (Рисунок 12.4), она реагирует на нажатие клавиши "А". on (release, keyPress "A") {
selectAnswer(0);
}

Создание кода

Создание кода

Основные фрагменты кода находятся в главной временной шкале, там всего три функции.
Первая определяет фразу в начале игры. Она проверяет все символы фразы и создает отображаемую строчку, состоящую из знаков подчеркивания. Именно такую строчку игрок видит в начале игры. function initGame() { //
Задаем фразу,
phrase = "Imagination is more important than knowledge";
// Создаем отображаемую строку.
display = "" ;
for (i = 0; i // Рассавляем пробелы там, где нужно.
if (phrase.charAt(i) == " ") {
display = idsplay + " ";
} else {
// Заменяем буквы знаками подчеркивания,
display = display + "_";}
}}
Функция charAt возвращает символ, расположенный на определенном месте в строке. Как во многих функциях языка ActionScript, первый символ располагается в позиции 0.
Каждый раз, когда пользователь нажимает клавишу, клип "actions" передает код символа в функцию makeGuess. Первое, что делает эта функция, - преобразовывает код в букву.
Переменная letter проверяется функцией isAlpha на соответствие какой-либо букве, то есть такие клавиши, как пробел иди клавиша с цифрой или другие, просто игнорируются. Более подробно мы рассмотрим функцию isAlpha позднее.
Затем функция makeGuess просматривает каждую букву, чтобы выяснить, совпадает ли она с выбранным символом, во время этого процесса заново формируется переменная display. Каждое найденное совпадение помешается в данную переменную, в которой уже содержатся те буквы, которые совпали ранее. Функция fromCharCode получает число, например 65, и преобразует его в символ, такой как "А". У всех символов есть соответствующий код. Числа от 65 до 90 относятся к заглавным буквам. Числа от 97 до 122 - к прописным (имеется в виду английский алфавит); 32 обозначает пробел. Полный список символов и их кодов можно найти в документации по Flash.
Изначально переменной gotOne присваивается значение false. Если найдено хотя бы одно совпадение, оно изменяется на true. Если в конце цикла значение переменной все еще равно false, значит, игрок не угадал букву, и клип с изображением лисы переходит к следующему кадру. Функция toUpperCase() берет любую строчку и преобразует все прописные буквы в заглавные. Эта функция очень полезна в таких ситуациях, когда вы хотите найти совпадающие буквы независимо от их регистра (работает она только для строк, содержащих буквы аиглийского алфавита).
function makeGuess(code) {
// Получаем символ, соответствующий нажатой клавише,
letter = String.fromCharCode(code);
// Проверяем, является ли символ буквой,
if (isAlpha(letter)) {
// Предполагаем, что буква не будет найдена.
gotOne = false;
// Начинаем заново отображать строку.
newDisplay = "";
for (i=0;i // Проверяем,( совпадают ли буквы.
if (phrase.charAt(i).toUpperCase() == letter.toUpperCase()) {
// Помещаем букву в отображаемый текст.
newDisplay = newDisplay +
letter.toUpperCase();
// Отмечаем найденное совпадение.
gotOne = true;
} else {
// ЕСЛИ совпадения не найдены,
// отображаем те же буквы.
newDisplay = newDisplay + display.charAt(i)}
} // Обновляем строку,
display = newDisplay;
// Если совпадения не найдены, добавляем
// еще один фрагмент в рисунок с лисой,
if (!gotOne) {
fox.mextFrame();
// Проверяем, вся ли лиса изображена,
if (fox._currentFrame ==8) {
gotoAndPlay("lose");
}
} else if (display == phrase.toUpperCase()) {
// Отображаемая строка совпадает с исходной,
// завершаем игру. gotoAndPlay("win");}
}
}
Функция isAlpha берет строчку и проверяет, является ли первый символ буквой или нет.
С помощью функции charCodeAt она получает код первой буквы. Так код для прописных букв на 32 больше, чем для заглавных, для любого кода, который больше 90, мы вычтем 32, чтобы проверять сразу же и прописные, и заглавные буквы. Функция charCodeAt возвращает код любого символа строки. Единственный аргумент, который ей передается, - это местоположение символа То есть для первого символа следует записать charCodeAt (0).
// Запускаем утилиту для проверки,
// расположен ли символ в пределах от А до Z.
function isAlpha(letter) {
// Определяем код символа.
n = letter.charCodeAt(0) ;
// Преобразуем прописную буквы в заглавную.
if (n > 90) n -= 32;
// Проверяем, расположен ли символ в пределах от А до Z.
return ((n >= 65) and (n}
Другой необходимый здесь фрагмент кода расположен в клипе "actions". Он воспринимает любое нажатие клавиши и передает его функции makeGuess Функция Key.getAscii() возвращает код нажатой клавиши, Она может использоваться внутри функции onClipEvent (keyUp), примененной к клипу.
onClipEvent (keyUp) {
_root.makeGuess(Key.getAscii()));
}

Создание кода

Создание кода

Необычность этого ролика в том, что весь код помешается в сценарии одного кадра. Весь целиком. Нет ни единой кнопки или клипа. Библиотека этого ролика совершенно пуста.
Сценарий кадра начинается с вызова функции initGame. Она задает фразу и создает карту букв. Карта букв игрока вся состоит из звездочек, обозначающих каждую букву. Результатом должны стать звездочки вместо каждой буквы в расшифрованном текстовом поле. Карта расшифровки, названная letterMap, задается вызовом функции createLetterMap. Вы также можете видеть еще не написанные функции showPhase и showCursor. Первая обновляет текстовое поле на экране, используя последнюю версию карт букв. Вторая выделяет только что выбранную букву полужирным шрифтом. Переменная charpos представляет, какая буква выбрана. Листенеры - это новое добавление версии Flash MX. Листенер сообщает Flash, что событие произошло, и пора включать набор команд или функцию. Код может создать листенер, определив сначала стандартный объект. Событие, за которым должен следить листенер, в данном случае onKeyUp, задано так, что связано с функцией. Потом команда addListener присоединяет этот объект к объекту Flash, в данном случае объекту Key. Только определенные Flash объекты могут иметь листенеры, и эти листенеры могут быть использованы только для определенных событий, связанных с этими объектами. Например, листенер Key может следить только за событиями onKeyUp и onKeyDown.
В конце функции initGame создается листенер (прослушиватель) клавиатуры, который удостоверяется, что функция getLetter вызывается всякий раз, как игрок нажал клавишу. initGame() ;
stop() ;
function initGame () {
// Используемая фраза.
phrase = "Imagination is more important than knowledge.Albert Einstein";
// Определяем переменные. createLetterMap();
userMap = "***************";
charpos = 0;
// Показываем курсор и фразу.
showPhrase();
showCursor(};
// Отслеживаем нажатие клавиши.
keyListener = new Object ();
keyListener.onKeyUp = getLetter;
Key.addListener(keyListener);
}
Чтобы создать случайную карту букв, нужно просто перебрать все буквы и приписать новую, случайную букву к каждой букве алфавита. Однако это не так просто. Вам нужно быть уверенным не только в том, что вы взяли какую-нибудь букву, но также и в том, что раньше вы ее не брали. Например, вы не хотите приписать Р как к А, так и к Б.
Следующая сложность появляется, когда вы осознаете, что не хотели бы обозначить букву как саму себя. Таким образом, например, если Г обозначает Г, вы должны выкинуть эту карту и сделать новую.
Функция createLetterMap отрабатывает цикл, пока не найдет пригодную карту букв. Обычно это происходит с первой или со второй попытки. // Создаем случайную строку,
function createLetterMap() {
do {
// Повторяем, пока не будет найдена корректная карта.
letterMap ="";
for (var i=0;i do {
// Повторяем пока не выбрана буква
r = Math.floor(Math.random()*26);
//Случайное число,
с = String.fromCharCode(r+65);
//Конвертируем в букву.
} while (letterMap.indexOf(с) > -1);
letterMap += с;
// Проверяем верность карты,
bad = false; forfvar i=0;i if (letterMap.charCodeAt(i) == i+65) {
bad = true;
// Буква в разрешенной позиции.
break;}
} } while (bad);
}
Функция showPhrase просматривает фразу. Она прогоняет каждую букву через letterMap, чтобы получить зашифрованное значение. Затем она прогоняет каждую зашифрованную букву через userMap, чтобы придать текущее, определенное пользователем, значение. Если знак является не буквой, а пробелом или знаком препинания, он показывается без зашифровки. function showPhrase() {
encrypted = "";
decrypted = "";
for (var i = 0; i < phrase.length; i++) {
// Значение буквы в этой позиции,
с = phrase.toUpperCase().charAt(i);
if ((" .-,'").indexOf(c)>-1) {
// Задаем пустое место.
encrypted += с;
decrypted += с;
} else {
// Используем карту для поиска зашифрованной буквы.
encryptedChar = letterMap.charAt(с.charCodeAt(0)-65);
encrypted += encryptedChar;
// Используем вТОрую карту для поиска расшифрованной
decryptedCharacter = userMap charAt(encryptedChar.charCodeAt(0)-65);
decrypted += decryptedCharacter;
}}
}
Когда пользователь нажимает клавишу, листенер объекта Key вызывает функцию getLetter. Нажатая клавиша помещается в две переменные ascii для ASCII-кода и code для кода клавиатуры. Значения ascii используются для идентификации букв, а значения code - для идентификации клавишей со стрелками.
Если клавиши со стрелками нажаты, происходит обновление переменной charpos. В конце этой функции вызывается функция showCursor, и правильная буква выделяется полужирным шрифтом.
Если нажата буква, происходит обновление userMap, чтобы показать, что пользователь хочет поставить нажатую клавишу в соответствие с текущей закодированной буквой. Текстовое поле обновляется с помощью showPhrase. После этого расшифрованная фраза сравнивается с исходной, чтобы выяснить, насколько она ей соответствует. function getLetter() {
// Считываем ascii код и код клавиатуры.
var ascii = Key.getAscii();
var code = Key.getCode() ;
// Передвигаем курсор,
if (code == Key.LEFT) {
charpos--;
if (charpos < 0) charpos = 0;
} else if (code == Key.RIGHT) {
charpos++;
if (charpos > phrase.length-1) charpos = phrase.length-1;
} else {
// Считываем клавиши.
var keyChar = String.fromCharCode(ascii);
keyChar = keyChar.toUpperCase();
// Убеждаемся, что была нажата буква.
if ((keyChar >= "A") and (keyChar // Считываем символ из фразы.
phraseChar = phrase.toUpperCase().charCodeAt(charpos)- 65;
// Если это буква.
if ((phraseChar >= 0) and (phraseChar < 26)) {
// Получаем ее значение в карте
letterNum = letterMap.charCodeAt(phraseChar)-65;
// Заменяем букву во второй карте.
userMap = replaceChar (userMap, letterNum,keyChar) ,
// Обновляем фразу showPhrase();
//Проверяем, не окончена ли игра,
if (phrase.toUpperCase() == decrypted) {
gotoAndStop("game over");
}}
}}
// Обновляем курсор.
showCursor();
}
К сожалению, нет такой команды ActionScript, позволяющей легко заменять одну букву в строке на другую. Поэтому придется сделать для этого собственную функцию. Функция берет буквы до замены и присоединяет их к буквам после замены, с новой буквой в середине. // Заменяем букву в строке.
function replaceChar(mainString, num, newchar) {
newString = mainString.substring(0,num)+ newchar +mainString.substring(num+1,mainString.length) ;
return(newString);
}
Чтобы показать пользователю, к какой букве относится переменная charpos, эта буква выделяется полужирным и в зашифрованном, и в расшифрованном поле. Сделать это можно с помощью объекта типа TextFormat:, появившегося в версии Flash MX. Объекты TextFormat имеют множество свойств. Когда вы применяете формат текста к текстовому полю, в поле меняются только те свойства, которые были специаль заданы в объекте.
Объект plainFormat типа TextFormat обозначает только то, что полужирное выделение ошибочно. Таким образом, если он применен к текстовым полям decryptedText и encryptedText все полужирные буквы заменяются на обычные. Объект cursorFormat имеет противоположное действие. Все буквы, к которым он применен, становятся полужирными. Код устанавливает формат текста только одной буквы в поле, которая соответствует charpos. function showCursorf) {
// Оба поля устанавливаем невыделенным шрифтом.
plainFormat = new TextFormat();
plainFormat.bold = false;
decryptedText.setTextFormat(plainFormat);
encryptedText.setTextFormat(plainFormat);
// Одну букву выделяем полужирным.
cursorFormat = new TextFormat();
cursorFormat.bold = true;
decryptedText.setTextFormat(charpos,cursorFormat);
encryptedText.setTextFormat(charpos,cursorFormat);

В этой игре при начислении очков

Рисунок 12.4 В этой игре при начислении очков принимается во внимание быстрота ответа

В криптограмме нижние буквы это

Рисунок 12.6 В криптограмме нижние буквы - это зашифрованное послание, а верхние буквы меняются в зависимости от выбора игрока. Последняя буква в первой строке выделена полужирным шрифтом, поскольку это буква, которая только что выбрана

В основном кадре игры показан

Рисунок 12.1 В основном кадре игры показан вопрос и четыре варианта ответа

Викторина с учетом времени

Викторина с учетом времени

Исходный файл: Flashtrivia.fla
Теперь, когда у вас есть работающая программа викторины, можно кое-что добавить и создать более развернутый вариант викторины. Эта игра отличается от предыдущей совсем немногим ( в данном случаем мы рассмотрим блиц-опрос, хотя это частный случай викторины).
Вы добавите более сложный подсчет очков, предоставляя игроку возможность набирать большее количество очков за быстроту, а также позволяя несколько раз отвечать на один вопрос и не терять очки за неправильный ответ.
Другая возможность - это случайность вывода ответов, то есть ответы будут перемешиваться, вследствие чего будут появляться на экране в произвольном порядке. Это упростит создание списка вопросов, так как первый ответ в файле данных всегда будет правильным ответом, но он не всегда будет отображаться для пользователя на первом месте.
На Рисунок 12.4 представлен основной кадр игры из ролика Flashtrivia.fla

Викторина во Flash

Викторина во Flash

Исходный файл: Flashquiz.fla
Первые две игры, которые вы создадите в этой главе, построены по принципу вопросов и ответов. Первая игра - викторина с десятью вопросами, для каждого из которых дано четыре варианта ответа. Выбрав ответ, игрок видит, правильный он или нет.
На Рисунок 12.1 представлен основной кадр игры. Вопрос расположен вверху, а четыре варианта ответа - под ним. Пользователь должен щелкнуть по кнопке слева от ответа.

Потенциально каждый вопрос стоит 1000

Потенциально каждый вопрос стоит 1000 очков. Но чем дольше пользователь думает над ответом, тем меньше очков получает. Если пользователь дает неправильный ответ, он теряет определенное число возможных очков. Когда же, наконец, пользователь даст правильный ответ, количество оставшихся возможных очков будет прибавлено к его счету.

На экране отображается кадр

Рисунок 12. 2 На экране отображается кадр "loading" до тех пор, пока не будут загружены все вопросы


Каждое из пяти основных текстовых полей помечено в клипе словом "text". Один клип называется "question", остальным присвоены имена от "answer0" до "answer3". Так сделано для того, чтобы не создавать простые текстовые поля и иметь возможность перемешать клипы на рабочем поле (об этом эффекте будет рассказано далее).

в среде Flash. Игрок может

Задача проекта

Цель проекта - воссоздать классическую игру "Виселица" в среде Flash. Игрок может с помощью клавиатуры угадывать буквы. Программа показывает буквы и рисует повешенного человека или, как в рассматриваемом примере, лису.

и бумаги. Компьютер сильно облегчает

Задача проекта

Криптограмму обычно решают с помощью карандаша и бумаги. Компьютер сильно облегчает разгадку такой головоломки. В бумажной версии игры, если игрок отгадал, что 3 означает Е, он должен найти все 3 и заменить их на Е. Если же он или она свое мнение поменяет, все Е придется стереть.
Игра делает это автоматически. Когда игрок задает, что 3 соответствует Е, все 3 в головоломке немедленно заменяются на Е. Если же игрок потом изменяет свое решение, все 3 легко могут быть заменены на А.

Создание Flash игр -практические уроки

Цель игры совпадений удалить все

Рисунок 13.4 Цель игры совпадений - удалить все карты, чтобы стала видна фоновая картинка

Центр этого элемента определяется

Рисунок 13.2 Центр этого элемента определяется по отношению к центру всей картинки

Другие возможности

Другие возможности

Эта игра - самая простая из программ составных картинок-загадок, Вы без труда можете ее усовершенствовать. Например, можно зaпoминать исходное положение элемента при перетаскивании, а затем возвращать его на место, если игрок неправильно поместил его.
Еще один способ сделать игру интереснее - написать функцию, которая будет проверять, все ли элементы уже находятся на своем месте и если да, будет осуществлять переход к кадру с поздравлением с победой. Можно усложнить игру, создав более 24 кусочков, тем самым получив больше мелких элементов.
Если хотите, позвольте игроку поворачивать каждый элемент на 90°, 180° или 270°. Для этого пользователь мог бы нажимать клавишу Пробел. Элемент будет фиксироваться в своем положении только в том случае, если он правильно повернут.
Конечно, есть более сложные варианты, например, картинки-загадки, у которых нет очерченного контура. Игрок может соединить два или более элементов в любом месте экрана, а затем прикрепить их к целой картине. Однако для такой игры потребуется написать большой сценарий. Вместо этого давайте перейдем к другому виду составления картинок.

Другие возможности

Другие возможности

Игра будет интереснее, если программа будет определять, когда картинка полностью собрана, и на экране будет появляться кадр с поздравлением. Это можно сделать, сохранив исходное положение элементов в массиве и выясняя после каждого шага, в нужном ли месте оказался элемент. Когда все позиции совпадут, картинка собрана.

Другие возможности

Другие возможности

Самый простой способ изменить эту игру - добавить фоновый рисунок, который будет отображаться за картами. Картинки на картах могут соответствовать теме фоновой картинки. Вы можете выбрать практически любую тему. Также в первый кадр клипа "Cards" нетрудно добавить картинку для рубашки карты.
Хотя в примере 36 карт, ничто не мешает вам уменьшить или увеличить это число. Просто не забудьте откорректировать размер сетки, а также длину массива в начале игры. Если число карт не будет вписываться в квадратную сетку, вам понадобится изменить код или написать новый, чтобы определить расположение карт.
Еще одна возможность - использовать четыре однотипные карты, а не две. Так будет гораздо проще найти совпадения.
Если вы хотите, чтобы игра определяла, когда найдены все совпадения, добавьте счетчик, который будет увеличиваться при каждом совпадении. Когда счетчик станет равен 18, игра закончится. Затем можно перейти к кадру "you win".

Другие возможности

Другие возможности

Вам должно быть легко добавлять картинки в эту игру. Вы можете иметь их столько, сколько хотите. Только помните, что надо установить код, узнающий последнюю картинку в обработчике onMouseDown.
Вы также можете сделать клип "button" больше, чем 36x36. Помните только, что тогда вам придется переделать функцию setUpRound так, чтобы она помещала кнопку дальше, чем на 18 пикселов от каждого края.
Вместо растрового изображения вы можете использовать векторный рисунок. Это сделает игру более простой и доступной для маленьких детей. Сделав соответствующее оформление и добавив анимационное вступление, можно создать хорошую игру даже для самых маленьких детей, которые еще не умеют читать.

Игра совпадений

Игра совпадений

Исходный файл: Matching.fla
Следующая программа, наверное, является самой популярной Web-игрой. Существуют ее варианты, созданные с помощью Shockwave, Flash, Java, JavaScript и даже простого HTML с применением CGI. Такую игру просто создать, в нее быстро привыкаешь играть и ее легко можно приспособить для любого сайта или ситуации.
Игра совпадений (или игра памяти, как ее иногда называют) использует сетку с картами, расположенными рубашками вверх. Существует две карты каждого типа. Игрок может одновременно открыть две карты. Если они совпадают, карты удаляются. В противном случае обе карты снова переворачиваются рубашками вверх. Игрок пытается запомнить, где какая карта расположена, чтобы было проще отыскать совпадения.
На Рисунок 13.4 показан фрагмент этой игры (файл Matching.fla): в ней 36 карт, из которых четыре уже удалены и две только что открыты. Эти две карты не совпадают, следовательно, они снова будут перевернуты, как только игрок выберет следующую карту.

К сведению

К сведению

В рассмотренном варианте игры элементы мозаики расположены друг от друга на расстоянии 54 пиксела, а игровое пространство представлено сеткой 4x4. Если вы хотите изменить один из этих параметров, необходимо тщательно проверить код и внести необходимые изменения.

К сведению

К сведению

Не забудьте вставить команду stop () в первый кадр клипа "Cards". В противном случае во всех картах будут отображаться все картинки.

К сведению

К сведению

Клип "maskedPicture", кроме маски и картинки, содержит еще границы слоя, соответствующие маске. Это помогает ему выделяться на экране. Также в каждом кадре ролика содержатся статичные участки текста, объясняющие играющему, что происходит.
Вы можете задать свойства каждого растрового изображения, чтобы определить уровень сжатия и сглаживание. Вам придется потрудиться, пока вы не добьетесь удовлетворительных результатов.

Найди картинку

Найди картинку

Исходный файл: Findthepicture.fla
Эта игра необычная, ее можно найти скорее в книге пазлов, чем на компьютере. Создание Flash-версии этой игры помогает показать несколько полезных приемов.
В игре "Найди картинку" игрок ищет не целую картинку, а ее сегмент. Целиком картинка показана; справа, а слева показана ее увеличенная часть. Задача состоит в том, чтобы быстро найти место увеличенного сегмента на целой картинке.
Игра показана на Рисунок 13.6. Сегмент слева выбран случайно и увеличен в три раза. Игрок должен щелкнуть по соответствующему месту большой картинки. В зависимости от того, насколько быстро он нашел правильное место, начисляются дополнительные очки.
Рисунок 13.6 В этой игре ваша задача найти место маленького изображения слева на большом изображении справа

Пазл почти собран Задача проекта

Рисунок 13.1 Пазл почти собран

Пазл

Пазл

Исходный файл: Jigsawpuzzle.fla
Игра "Пазл" состоит из элементов одного размера, которые, соединяясь, образуют целостное изображение. Обычно они сделаны из картона и для составления картинки требуется большая площадь, например, обеденный стол. Так как экран монитора слишком мал по сравнению со столом, создать компьютерный аналог такой игры очень сложно.
Однако в упрошенном варианте подобная игра вполне применима для Web-сайта в качестве развлекательного материала. На Рисунок 13.1 показан кадр ролика Jigsawpuzzle.fla. На игровом поле имеются 24 элемента картинки и пустая сетка, куда эти элементы должны быть помещены.

Пятнашки

Пятнашки

Исходный файл: Slidingpuzzle.fla
В отличие от пазла игра "Пятнашки" куда интереснее в качестве компьютерной игры, чем в виде обычной игры. "Пятнашки" обычно состоят из 15 квадратных элементов, которые перемешаются вдоль сетки, рассчитанной на 16 элементов. Пустое место - дополнительная область, куда может быть перемещен элемент мозаики.
На Рисунок 13.3 показана мозаика с изображением лисы. Попробуйте сыграть в эту игру, открыв файл Slidingpuzzle.fla. Вы можете щелкнуть по любому из четырех элементов, смежных с пустым квадратиком, чтобы переместить его. Цель игры - правильно собрать картинку, оставив пустым место в нижнем правом углу.

Подготовка ролика Так как же я

Я начал с изображения, которое представляло собой набор линий и областей на одном слое, после чего преобразовал все линии в области, так чтобы в изображении остались только сплошные области.
Затем я создал кадр для мозаики (см. Рисунок 13.1). Я нарисовал только небольшую часть сетки вдоль направляющих Flash, затем скопировал и вставил этот кусочек несколько раз, так что получилось очертание картинки (как в пазле).
Затем каждую область сетки залил красным цветом и выделил все залитые области, кроме той, которая предназначена для элемента мозаики в верхнем правом углу. Скопировал выделение и вставил его в верхнюю часть моей картинки. Потом выделил и удалил всю красную область, таким образом, на рабочем поле остался только один элемент.
Так как мои действия уничтожили созданное ранее, я сохранил копии очертания и картинки в других слоях. Теперь я могу повторить эти действия для создания следующей картинки. Для 24 элементов пришлось проделать это 24 раза.
Когда все было сделано и получилось 24 клипа, понадобилась сетка для повторного выравнивания элементов, так чтобы их центр располагался в нужном месте. Для завершения мне понадобилось 20 минут. Однако, возможно, вы сделаете то же самое гораздо быстрее. ,
После того как у меня получились все элементы, я поместил экземпляр каждого клипа на рабочее поле и присвоил экземпляру клипа имя, соответствующее имени самого клипа. 24 элемента называются от "0-0" до "5-3" в зависимости от вертикального и горизонтального положения элемента. Однако я разместил элементы вокруг границы рабочего поля в произвольном порядке. Также каждому клипу присвоил значение _apha=75. Затем я поместил клип контура картинки в центр и назвал его "outline".

Подготовка ролика

Подготовка ролика

Можно воспользоваться любым понравившимся вам методом создания элементов. Чтобы получить 15 элементов, я выделял квадраты на графическом изображении. В отличие от элементов составной картинки-загадки здесь не нужно размешать их определенным образом. Центром каждого элемента мозаики может бьпъ его собственный геометрический центр. То есть для этой игры создать элементы гораздо проще.
После того как вы создали все элементы, поместите их на рабочее поле так, как они должны располагаться в собранной мозаике. Я сделал кусочки размером 54x54 пиксела, то есть они должны бьпъ расположены друг от друга на расстоянии 54 пиксела как по вертикали, так и по горизонтали. Поскольку Flash не гарантирует точность при размещении клипов вручную, даже если показана сетка, выравнивать элементы перед началом игры лучше с помощью ActionScript.
Очень важно поместить элементы близко к их исходному положению и присвоить им имена. Я дал им имена от tilel до tileis, чтобы к ним можно было обращаться в коде программы.

Подготовка ролика

Подготовка ролика

В ролике Matching.fla есть клип "Cards", временная шкала которого содержит 19 кадров (Рисунок 13.5).

Подготовка ролика

Подготовка ролика

Имя эталона основного клипа в библиотеке — "picture". Он содержит три растровых изображения, по одному в каждом кадре. В первом кадре находится команда stop (). Картинки выстроены так, что верхний левый угол каждой располагается в центральной точке клипа.
Клип "picture" никогда не находится в рабочем поле сам по себе, а внутри двух других клипов: "fullPicture" и "maskedPicture".
В клипе "fullPicture", клип "picture" находится на одном слое, а маленький квадратный клип "button" - поверх него в другом слое.
В клипе "maskedPicture" клип "picture" также находится на одном слое, а клип "button" - на другом. Однако слой кнопки - это слой-маска, маскирующий слой картинки. Это значит, что только сегмент картинки под квадратом остается видимым, когда клип "maskedPicture" расположен в рабочем поле.
В рабочем поле клипы "fullPicture" и "maskedPicture" расположены бок о бок. Размешать клип "maskedPicture" достаточно сложно, поскольку, когда вы его двигаете, он показывает свои границы, которые довольно велики и покрывают все рабочее поле. Як тому же увеличил этот клип до 300%, что сделало его еще больше.
Главная временная шкала содержит четыре кадра. Первый - это страница с правилами. Потом идет кадр "play". Когда игрок заканчивает одну картинку, ролик переходит к кадру "next", чтобы дать игроку передохнуть перед следующей картинкой. Последний кадр - это кадр "game over".
В ролике используются два динамических текстовых поля. Первое, displayBonus, используется в кадре "play". Поле displayScore используется в кадрах "next" и "game over".

Подход

Подход

Большая часть рассматриваемой программы представляет собой по сути подготовку к собственно игре, обеспечивая перемешивание элементов мозаики. Сначала случайным образом выбирается элемент. Потом выполняется проверка, является ли один из четырех смежных элементов пустым. Если да, то выбранный элемент перемещается туда. В противном случае выбирается другой элемент до тех пор, пока не будет найден элемент, смежный с пустым квадратом. Этот процесс повторяется 100 раз.
Когда перемешивание закончено, пользователь может передвигать элементы сам. Когда он щелкает по элементу, код проверяет, есть ли рядом с этим элементом пустой квадрат, если да, выбранный элемент перемещается туда.

Подход

Подход

Способ, каким сегмент картинки отображается на экране, основан на использовании слоев. В клипе картинка находится на одном слое, а маленький квадрат используется как маска для этого слоя. Только та часть картинки, которая находится под квадратом, оказывается видимой, когда клип отображается на экране.
Картинка имеет размер 400x300. Квадрат - размер 36x36. Когда картинка передвигается под квадратиком маски, видна только та часть картинки размером 36x36, которая находится под квадратом. Хотя перемещение
картинки сделано в ActionScript, маска создана во временной шкале клипа во время подготовки ролика.
Когда пользователь отмечает положение сегмента на целой картинке, ему нужно щелкнуть по этому месту. Было бы естественно расположить на этом месте невидимую кнопку, дело только в том, что кнопка должна сама себя уничтожить, поскольку курсор пользователя заменяется на руку. Вместо этого поместите обычный клип на это место и используйте hitTest, чтобы определить, когда по нему щелкнут.
В ролике используются Flash МХ-листенеры, чтобы поместить весь код в главную временную шкалу. Это значит, что реакция на щелчок мыши и обслуживание изменяющегося таймера должны быть частью сценария главной временной шкалы, а не одного из "actions''-клипов. С помощью Flash MX и Flash 6 плеера стало возможным делать почти что угодно с помощью всего лишь одного сценария в главной временной шкале. Для этого необходимо регистрировать события, такие как onMouseUp и onEnterFrame, в функциях. Это может заменить обработчик onclipEvent в "actions''-клипах. Но поскольку эта технология не совместима сверху вниз с Flash 5, может пройти некоторое время, прежде чем она начнет широко применяться.
Эта игра показывает не одну картинку, а три. Общее число набранных игроком очков складывается из бонусных очков, полученных за все три картинки. Сыграйте прямо сейчас, чтобы познакомиться с игрой.

Создание кода

Создание кода

Весь сценарий прикреплен к клипу "actions", расположенному за пределами рабочего поля. Он начинается с обработчика событий onClipEvent (mouseDown), который реагирует на щелчок мыши по рабочему полю.
Этот код просто просматривает элементы картинки и определяет, находится ли один из них под курсором, а также является ли элемент полностью непрозрачным, то есть размещен ли на своем месте.
Если элемент найден, программе Flash сообщается, что теперь он подвижный и может перемещаться с помощью команды startDrag. Затем программа завершается. Команда startDrag - основное действие, позволяющее пользователю перетаскивать клип. Оно не такое универсальное, как методы перетаскивания, рассмотренные ранее, но в простых случаях работает хорошо. Команда stopDrag останавливает перетаскивание.
onClipEvent(mouseDown) {
// Определяем положение курсора.
mx = _root._xmouse;
my = _root._ymouse;
// Просматриваем все элементы картинки,
for (x=0;x for(y=0;y piece = _root[x+"-"+y];
// Выясняем, находится ли элемент под курсором
// и не находится ли он уже на своем месте?
if (piece.hitTest(mx,my) and (piece._alpha < 100)){
// Пользователь щелкнул по элементу.
piece.startDrag();
// Выходим из циклов.
х = 6 ;
У = 4;
break;
}}
}}
Когда пользователь отпускает кнопку мыши, элемент фиксируется, Код проверяет расстояние от центра элемента до центра контура: если оно не превышает 10. пикселов, элемент перемешается точно в свое положение и становится полностью непрозрачным, так что пользователь видит: элемент находится на своем месте. onClipEvent(mouseUp) {
// Прекращаем перемещение элемента.
stopDrag();
// Измеряем расстояние от центра элемента до центра контура.
dx = _root.outline._x - piece._x;
dy = _root.outline._x - piece._y;
dist = Math.sqrt(dx*dy+dy*dy);
// Если расстояние меньше 10 пикселов,
// элемент помещается на свое место,
if (dist < 10) {
piece._x = _root.outline._x;
piece. _y = _root.outline._y;
// Делаем элемент полностью непрозрачным,
piece._alpha = 100;
}
}

Создание кода

Создание кода

Большая часть кода находится в основной временной шкале. Он начинается с выравнивания элементов на расстоянии точно в 54 пиксела, затем 100 раз выполняется цикл, перемещающий случайно выбранный элемент на пустую позицию. function initGame() {
// Устанавливаем горизонтальное и вертикальное расстояние
// между элементами.
tileDist = 54;
// Помещаем все элементы на свои места,
for (x=l;x for (y=0;y tile = х+у*4;
_root["tile"+tile];
_x = x*tileDist;
_root["tile"+tile];
_y = y*tileDist+tileDist;
}}
// Совершаем 100 произвольных перемещений,
for(tilenum=0;tilenum do {
// Выбираем элемент случайным образом.
tile = "tile"+(random(15)+1);
//- Проверяем, есть ли рядом свободный квадрат.
emptySpace = findEmpty(tile);
// Цикл продолжается до тех пор, пока не будет найден
// элемент, рядом с которым расположен свободный квадрат.
} while (emptySpace == "none");
// Перемещаем элемент на свободное место.
moveTile(tile,findEmpty(tile));
}}
Когда случайным образом выбирается элемент, с помощью функции findEmpty определяется, есть ли среди смежных элементов свободный квадрат. Прежде чем проверять элемент мозаики, обязательно убедитесь в том, что свободное место не находится за границей игрового поля. // Проверяем, есть ли свободное место около данного элемента,
function findEmpty (tile) {
// Определяем положение элемента.
tilex = _root[tile]._x;
tiley = _root[tile]._y;
// Проверяем, есть ли элемент мозаики слева,
if (tilex > tileDist) {
if (!tileThere(tilex-tileDist, tiley)) {
return("left");
}}
// Проверяем, есть ли элемент мозаики справа,
if (tilex > tileDistM) {
if (!tileThere(tilex+tileDist, tiley)) {
return("right");
}} // Проверяем, есть ли элемент мозаики сверху. if (tiley > tileDist) { if (!tileThere(tilex, tiley-tileDist)) { return)"above");
}}
// Проверяем, есть ли элемент мозаики снизу,
if (tiley > tileDistM) {
if (!tileThere(tilex, tiley+tileDist)) {
return("below");
}}
// Элементы мозаики имеются со всех сторон,
return ("none");
}
Если перед выражением стоит восклицательный знак, значит, OHO отрицается, то есть true превращается в false, a false в true. Эта операция известна как логическое не (not). Например, в предыдущем коде проверяется не tileThere, a not tileThere.
Функция findEmpty использует метод tileThere, чтобы определить, находится ли элемент на определенном месте. Метод tileThere вызывается для определения элементов слева, справа, снизу и сверху. // Проверяем, находится ли элемент мозаики на определенном месте,
function tileThere (thisx, thisy) {
// Просматриваем элементы на предмет совпадения координат,
for (i=l;i // Выясняем, совпадают ли значения положения
//по горизонтали,
if (_root["tile"+i]._x == thisx) {
// Совпадает ли положение по вертикали,
if (_root["tile"+i]._у == thisy) {
return true;
}
}} // Эти координаты соответствуют пустому квадратику,
return false;
}
После того как было решено переместить элемент, вызывается функция moveTile. Эта же функция используется, когда игрок перемешает элементы. // Перемещаем элемент в определенном направлении,
function moveTile (tile, direction) {
if (direction == "above") {
_root[tile]._y -= tileDist;
} else if (direction == "below") {
_root[tile]._y += tileDist;
} else if (direction == "left") {
_root[tile]._x -= tileDist;
} else if (direction == "right") {
_root[tile]._x += tileDist;
}}
После того как контроль передается игроку, надо определить, по какому элементу щелкнули мышкой. Для этого вызывается функция tileUnderMouse. // Определяем, по какому элементу щелкнул игрок,
function tileUnderMouse О {
for (i = l; i< = 15; i + +) {
if (_root["tile"+i].hitTest(_xmouse, _ymouse)) {
return (i);
}
}}
Сценарий в основной временной шкале заканчивается вызовом функции initGame и выводом на экран перемешанных элементов. initGame();
stop();
Игрок взаимодействует с картинкой мозаики посредством клипа "actions», расположенным вне рабочего поля. Клип воспринимает щелчок мыши, определяет, по какому элементу щелкнул пользователь, и перемещает этот элемент. onClipEvent (mouseDown) {
// Определяем, по какому элементу щелкнул пользователь.
tileClicked = _root.tileUnderMouse();
// Определяем, есть ли рядом пустое пространство.
emptySpace = _root.findEmpty("tile"+tileClicked);
// Перемещаем элемент на свободное место.
_root.moveTile("tile"+tileClicked, emptySpace);
}

Создание кода

Создание кода

Почти весь код этой игры находится в основной временной шкале. Ролик начинается с вызова функции initGame, которая создает список 18 пар карт, случайным образом выбирает карты из первого списка, а затем помешает их во второй список, чтобы перемешать колоду карт.
Потом функция создает 36 карт. Каждый клип автоматически начинается с того, что карта помещается рубашкой вверх, а свойству клипа ("picture") присваивается номер картинки, которую карта будет представлять. initGame();
stop();
function initGame() {
// Создаем отсортированный список карт.
cardsListOrdered = [];
cardsListOrdered.push(i,i);
}
// Список перемешанных карт.
cardsListSorted = [];
while (cardsListOrdered.length > 0) {
r = int(Math.random()*cardsListOrdered.length);
cardsListSorted.push(cardsListOrdered[r]};
cardsListOrdered.splice(r,1);}
// Создаем клипы карт и определяем их положение и картинки,
х = 0; У = 'О; for(i=0;i attachMovie("card", "card" + i, i) ;
_root["card"+i].picture = cardsListSorted[i];
_root["card"+i]._x = x*60+200;
_root["card"+i]._y = y*60+50;
// Переходим к следующей карт
х++;
if (х > 5) {
х = 0;
У++;
}} // Располагаем эти две карты рубашками вверх,
firstclip.gotoAndStop(1);
secondclip.gotoAndStop(1);
firstclip = 0; secondclip = 0;
firstdip = 0;
}
Обратите внимание, что с помощью команды push в массив можно добавить сразу более одного элемента, Например, выражение myArray.push(7,12) добавит в массив myArray числа 7 и 12.
Функция initGame заканчивается тем, что обнуляется переменная firstclip. В этой переменной содержится ссылка на карту, по которой щелкнули первой. Когда щелкают по клипу, кнопка внутри этого клипа отреагирует и на основную временную шкалу с помощью функции clickCard будет добавлена ссылка к клипу.
Функция clickCard может выполнить одну из 3-х функций. Если значение переменной firstclip равно 0, ей присваивается клип, по которому щелкнули, карта переворачивается, то есть программа переходит к кадру, содержащему соответствующую картинку.
Если в переменной firstclip хранится ссылка на некий клип, значит, одна карта уже перевернута. В этом случае программа пepeвopaчивает и вторую карту, присваивает переменной secondclip значение клипа и сравнивает два клипа. Если они совпадают, оба клипа удаляются.
Третье условие, которое, на самом деле, проверяется до двух первых, возникает тогда, когда игрок щелкает по одной и той же карте дважды. В таком случае значение переменной clip будет равно firstclip. Карта просто снова переворачивается и значение firstclip обнуляется.
Прежде чем проверить эти три условия, функция clickCard определяет, перевернуты ли уже две карты. Если да, значит, игрок уже выбрал две карты, но они не совпали. Прежде чем перевернуть следующую карту, эти две карты поворачиваются рубашками вверх function clickCard (clip){
// Проверяем, отображены ли две карты,
if (secondclip != 0) {
// Располагаем эти две карты рубашками вверх,
firstclip.gotoAndStop(1);
secondclip.gotoAndStop(1);
firstclip = 0;
secondclip = 0;
}
// Проверяем, щелкнул ли пользователь дважды
//по одной и той же карте,
if (firstclip == clip) {
// Переворачиваем карту,
firstclip.gotoAndStop(1);
firstclip = 0;
// Выясняем, есть ли хоть одна перевернутая карта.
} else if (firstclip == 0); {
// Переворачиваем первую карту,
clip.gotoAndStop(clip.picture+1);
firstclip = clip;
// Одна карта должна быть перевернута
} else {
// Переворачиваем вторую карту.
clip.gotoAndStop(clip.picture+1);
secondclip = clip;
// Проверяем, совпадают ли карты.
if (firstclip.picture == secondclip.picture) {
// Удаляем обе карты.
firstclip.removeMovieClip();
secondclip.removeMovieClip();
firstClip = 0;
secondclip = 0;
}
}}
Вот все, что нужно для игры. У кнопки внутри клипа "Cards" только одна строчка кода, которая передает основной временной шкале информацию о том, что по клипу щелкнули. on (press) {
// Передаем основной временной шкале информацию о щелчке мышью
_root.clickCard(this);
}

Создание кода

Создание кода

В начале ролика задаются функции roundNum и score. Переменная roundNum содержит номер картинки, которая должна появиться. // Начинаем с первой картинки.
roundNum = 1;
score = 0;
stop();
Игра начинается, когда пользователь нажимает кнопку в первом кадре. Все коды содержатся на главной временной шкале, в первом слое. Нажатие кнопки вызывает функцию setUpRound.
После того как функция отправляет ролик к кадру "Play", она определяет два клипа. Содержащийся в каждом из них клип "picture" устанавливается в кадр, определяемый переменной roundNum.
После этого выбирается случайное место на картинке. Это происходит с учетом того, что площадь сегмента 36x36, таким образом, это случайное место должно быть не ближе 18 пикселов от края изображения.
В клипе "maskedPicture" положение картинки изменяется таким образом, что случайное место располагается в позиции (0,0), на которой располагается квадрат-маска. Таким образом, если сегмент выбрана из позиции (100, 150), то увеличенная картинка должна быть сдвинута на -100 пикселов по горизонтали и на -150 - по вертикали.
В клипе "fullPicture" картинка остается неподвижной, а движется клип "button", пока не займет нужное положение. Свойство _alpha равно 0, чтобы кнопка была невидимой. Вместо того, чтобы задавать свойство _alpha клипа равным 0, попробуйте задать его равным 25 во время отладки программы. Поскольку клип будет видимым, вам будет легче понять, что игра работает.
function setUpRound(pictureNum) {
// Переходим к кадру игры. gotoAndStop("Play");
// Выбираем картинку в обоих клипах.
fullPicture.picture.gotoAndStop(pictureNum);
maskedPicture.picture.gotoAndStop(pictureNum);
// Задаем случайное положение картинки.
w = fullPicture._width;
h = fullPicture._height;
x = Math.random()*(w-36)+18;
у = Math.random))*(h-36)+18;
// Передвигаем картинку под маской в это положение.
maskedPicture.picture._x = -х;
maskedPicture.picture. _y = -у;
// Задаем координаты кнопки.
fullPicture.button._x = х;
fullPicture.button._y = у;
// Делаем кнопку невидимой.
fullPicture.button._alpha = 0;
// Запускаем таймер.
startTime = getTimer();
}
В конце функции setupRound. переменной startTime присваивается текущее время. Это время используется следующим фрагментом кода, который все время пересчитывает бонусные очки. Он берет текущее время,вычитает startTime, а потом вычитает итог из 30000 миллисекунд. В результате бонусное время начинается с 30000 миллисекунд и происходит обратный отсчет до 0. Вместо того чтобы поместить этот процесс в клип "actions", я просто назначил функцию событию onEnterFrame. Это новый прием, появившийся в версии MX. // Пересчитывем бонусные очки при каждом обращении к кадру.
_root.onEnterFrame = function!) {
// Бонус равен 30000 минус значение startTime.
bonus = 30000-Math.floor(getTimer() - startTime);
if (bonus< 0) bonus = 0;
displayBonus = "BONUS: "+bonus;
}
Другое событие, нуждающееся в отслеживании, это onMouseDown. Когда оно происходит, используется hitTest, чтобы определить, нажал ли пользователь на скрытую кнопку. Если да, то кнопка становится видимой (полупрозрачной) и ролик переходит к другому кадру. Количество бонусных очков прибавляется к общему количеству, и очки показываются на экране. // Определяем функцию, отслеживающую нажатие кнопки мыши
// (листенер).
- _root.onMouseDown = function!) {
// Смотрим,щелкнул ли пользователь по мыши,
if (fullPicture.button.hitTest (_root ._xmouse,_root ._ymouse)) {
// Смотрим, была ли кнопка спрятана,
if (fullPicture.button._alpha < 50) {
// Показываем кнопку.
fullPicture.button._alpha = 50;
// Начисляем очки, score += bonus;
displayScore = "SCORE:"+score;
i f (roundNum < 3) {
// Если не все картинки пройдены,показываем
// следующую.
gotoAndStop("next");
} else{
// Если была последняя - заканчиваем игру.
gotoAndStop("game over");
}}
}}

В "Пятнашках" используется 15

Рисунок 13.3 В "Пятнашках" используется 15 элементов и один пустой квадрат

Во временной шкале клипа "Cards"

Рисунок 13.5 Во временной шкале клипа "Cards" имеется 19 кадров, первый без картинки и остальные 18 с различными картинками



В первом кадре расположена рубашка карты, то есть никакой картинки нет. В остальных 18 кадрах содержатся изображения, соответствующие разным картам.
Кнопка - просто прямоугольник такого же размера, что и карта. Она расположена в третьем слое клипа "Cards" (см. Рисунок 13.5), то есть за фоном.
Хотя кнопку не будет видно, она будет реагировать на действия пользователя.
Также в клипе "Cards" присутствует фон. У первого кадра, содержащего рубашку карты, фон серый. У остальных кадров, в которых находится какая-либо картинка, белый фон.

Для создания этой игры можно

Подход

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

Когда кнопка мыши отпускается, код определяет, находится ли элемент мозаики рядом со определенным для него местом, и, если да, элемент фиксируется.
Сначала устанавливаем для всех клипов, содержащих элементы мозаики, свойство _alpha=75, чтобы они стали немного светлее. Затем, когда игрок поместит элемент на свое место, соответствующий клип станет полностью непрозрачным. Таким образом, будет обеспечена некая обратная связь с игроком, ему будет сообщаться, что элемент находится на своем месте. Также будет проверяться, является ли элемент мозаики полностью непрозрачным в тот момент, когда пользователь щелкает по нему мышкой и начинает перетаскивать. Это необходимо, чтобы те элементы, которые уже находятся на своем месте, больше не перемешались.
Узнать, находится элемент на своем месте или нет, несложно, потому что они сделаны таким образом, чтобы их центр находился в центре основной картинки. Например, у элемента из верхнего левого угла центр будет правее и ниже (Рисунок 13.2).
Теперь представьте, что каждый элемент создан именно так. Центр элемента останется в центре картины не зависимо от того, где он будет располагаться. Если вы не совсем поняли, что я имею в виду, просмотрите исходный ролик Jigsawpuzzle.fla. Изучите несколько клипов, содержащих элементы мозаики, и увидите, что центр остается постоянным.
Это намного упрощает код. Каждый элемент должен быть помещен точно на свое место, чтобы вписаться в контур картинки. Так что способ определения надлежащего положения элемента будет одинаковым для всех клипов.

в начале игры случайным образом

Очень важно в начале игры случайным образом расположить элементы. Для этого Flash-ролик сначала нарисует все элементы мозаики на своих местах, а затем будет выполнено 100 произвольных перемещений. Таким образом, элементы окажутся перемешаны, и собрать такую мозаику будет сложно, но возможно.

В игре используется только два

Подход

В игре используется только два библиотечных элемента. Первый – клип, в первом кадре которого представлена рубашка карты. В остальных кадрах содержатся картинки. Так как будет 18 различных картинок, в клипе окажется 19 кадров. Если вы хотите, чтобы клип отобразил рубашку, карты, перейдите к первому кадру; если хотите увидеть картинку, перейдите к одному из кадров 2-19.

Второй элемент библиотеки - кнопка, расположенная внутри карт клипа Она будет использоваться для реагирования на действия пользователя.
Игра начинается с создания 36 клипов, помещенных в сетку на рабочем поле. Каждый клип отображает рубашку карты, но если карта перевернута, показывается другая картинка. Каждая картинка будет содержаться в двух клипах, таким образом, получится 18 пар карт.
Когда игрок выбирает первую карту, отображается соответствующая ей картинка. Когда игрок выбирает вторую карту, она тоже переворачивается и появившаяся картинка сравнивается с первой открытой картой. Если они совпадают, карты удаляются, в противном случае ничего не произойдет до тех пор, пока игрок не щелкнет еще раз. Тогда первые две карты переворачиваются обратно, и отображается картинка новой выбранной карты.

Чтобы создать эту игру, ваш

Задача проекта

Чтобы создать эту игру, ваш сценарий должен уметь выбирать случайный сегмент из большой картинки и показывать его рядом с ней. Это требует использования масок. Также ActionScript должен уметь сопоставить сегмент с соответствующей областью на большой картинке.
Кроме манипуляций с изображениями, в игру должен быть включен таймер. Таймер начинает с некоего большего числа и производит обратный отсчет. Когда игрок верно угадывает место сегмента на картинке, он получает дополнительные очки в зависимости от показаний таймера.



    Сайт: Аннимация - Видео - Графика

• Анимация на сайте
  
• Графика на сайте
  
• Фотография на сайте
  
• Кино на сайте
  
• Flash на сайте
  
  
• Видео для сайта
  
• Premiere Pro
  
• Vstudio
  
• VirtualDub
  
• Sonic Scenarist
  
  
• DVD
  
  
• Изображения для сайта
  
• Пакет Photoshop
  
• Adobe Illustrator
  
• Adobe Illustrator
  
• CorelDRAW
  
  
• CorelXARA
  
• Maya