mitemail@mail.ru Made by }}v{{!+е

Введение в ActionScript (финальная часть введения).

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

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

Minimum requirements:

немного серого вещества, две прямые руки, усидчивость, терпение, и Flash 5.

Maximum:

unlimited.

Открываем flash, создаём новый Movie(меню File->New или Ctrl+N). Задаем свойства нашего фильма (меню Modify-> Movie... или Cntrl+M): меняем Width(Ширина) на 500 px(пикселей),а Heigth(высота) на 400 px. Можно задать цвет фона (Background Color), если этот чем-то не нравится.

Дальше создаём два слоя (чтобы добавить слой выберите Incert->Layer). Нижний слой назовём Background - это для фона, верхний - Main - здесь будут располагаться основные клипы игрушки. Можно создать ещё слой Control ( не важно где), для Actions. Теперь создадим два символа (Symbol). Выбираем пункт меню Insert ->New Symbol или Ctrl+F8. В свойствах символа выбираете имя, например vertolet, и поведение (Behavior) как Movie Clip. Теперь рисуйте всё, что вам вздумается, учтите только - рисунок должен быть компактным и, по возможности красивым (как у меня:). Создаем ещё один символ, в Name пишем background, поведение - Movie Clip. Рисуем какой -нибудь ландшафт. У меня получилось вот так:

Возвращаемся на сцену 1 (Scene 1), открываем меню Window->Library или Ctrl+L. Выделяем слой Main и перетаскиваем клип vertolet из библиотеки в окно рисования, аналогично, background на слой Background. В сцене 1 на слое Main выделяем вертолет, в меню выбираем Window->Panels->Instance или Cntrl+I. В поле имя (Name) пишем vert. Затем, не снимая выделения с символа, в меню выбираем Window->Actions или Cntrl+Alt+A и пишем (если не пишется, переключитесь в Expert Mode клавишами Ctrl+E):

onClipEvent (load) {
moveSpeed = 15;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._x += moveSpeed;
} else if (Key.isDown(Key.LEFT)) {
this._x -= moveSpeed;
}
if (Key.isDown(Key.DOWN)) {
this._y += moveSpeed;
} else if (Key.isDown(Key.UP)) {
this._y -= moveSpeed;
}
}

Первые три строки означают, что при загрузке клипа переменной moveSpeed (скорсть вертолёта) присваивается значение 15. Слеующее действие выполняется бесконечно. Если выполняется какое-либо из четырех условий, то есть нажата клавиша (Key.isDown()) и эта клавиша - стрелка (например, Key.RIGHT - правая стрелка), то текущая координата клипа (this._x или this._y) изменяется. Всё просто до безобразия. Только внимательно следите за фигурными скобками и не путайте строчные и ЗАГЛАВНЫЕ буквы в переменных и, особенно, в действиях.

Заставим клип background двигаться. Для этого его нужно немного изменить. Делаем копию background, например backgo. Редактируем background: удаляем всё, что нарисовали раньше, вставляем backgo, делаем ещё одну копию backgo, располагаем оба клипа друг возле друга, так чтобы не было промежутков. Теперь нужно сделать плавный переход между клипами. Двойной щелчёк по одному из клипов, и вы можете редактировать его, приочём вторая копия будет изменятся автоматически! Для дальнейшей работы лучше сгрупировать клипы (главное меню Modify->Group или Control+G).Кликаем правой кнопкой мыши по 20-ому фрейму клипа background, в выпадающем меню выбираем Insert Keyframe. В первом фрейме распологаем группу так, чтобы левый клип группы закрывал окно рисования главной сцены. В последнем фрейме делаем так, чтобы правый клип встал вместо левого (здесь важна точность!). Теперь правой кнопкой жмём на 10-ом фрейме и выбираем Create Motion Tween. Всё! Теперь background должен двигаться.

Пришло время посмотреть, а что у нас получилось? Жмите F12 и не забудьте кликнуть на flash-е в окне вашего браузера. При нажатии на стрелки вертолёт должен перемещаться на движущемся фоне.

Займёмся врагами. Делаем новый клип, обзовём его vrag. Нужно сделать эффект, будто вертолёт противника взрывается. Все зависит от фантазии. Там же создаем слой Control. После Control вставим 1 чистый фрейм так, чтобы, если его выделить, в клипе ничего не было. На слое Control в первом и последнем фреймах клипа vrag в Actions пишем:

stop ();

Это нужно, чтобы клип самопроизвольно не проигрывался. Переходим на Scene1. Перетаскиваем vrag из библиотеки на слой Main. Выделяем противника. В Instance в Name пишем vrag1. В Actions для вертолёта противника пишем:

onClipEvent (load) {
this._x = 500;
this._y = random(200)+50;
hit = 0;
enemySpeed = random(6)+8;
this.gotoAndStop(1);
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.vert) and (hit<>1)) {
_root.verlives -= 5;
hit = 1;
_root.score += 200;
this.gotoAndPlay(2);
}
this._x -= enemySpeed;
if (this._x<-10) {
this._x = 500;
this._y = random(200)+50;
hit = 0;
enemySpeed = random(6)+8;
this.gotoAndStop(1);
}
}

При загрузке корабль перемещается в правую часть игрового поля. Координата x выбирается случайно, проигрывание клипа vrag останавливается на пером фрейме (где прорисован новенький ненавистный вертолёт). Если враг ударяется о наш вертолёт (this.hitTest(_root.vert)) невредимым (hit<>0 означает,что в противника ещё не попала ни одна пуля), то переменные score (очки) и verlives ("здоровье" нашего вертолёта) меняются, клип проигрывается - противник горит! Здесь hit нужен, чтобы при столкновении враг взорвался, и score увеличились только на 200 (иначе очки будут увеличиваться всё время пока противник пролетает сквозь наш вертолёт).Благодаря строчке this._x -=enemySpeed враг движется, и, когда вылетает за экран (this._<-10) снова перемещается в правую часть игрового поля.

Создайте в главной сцене слой Control (теперь уже пора). В Actions первого фрейма пишем:

numEnemy=3;
score = 0;
shots=200;
raketashots=200;
verlives=100;
lives = 200;
Mouse.hide();
for (i=2; i<=numEnemy; i++) {
vrag1.duplicateMovieClip("vrag"+i, i+100);
}
stop ();

score - наши очки, verlives - жизни, lives - здоровье будущего босса, shots и raketashots - количество будущих патронов и ракет.Mouse.hide(); прячет курсор мыши. В цикле создаётся два дополнительных клипа с именами vrag2 и vrag3

F12 - навстречу нашей машине-убийце летят противники (при столкновении они должны взрываться и исчезать).

Теперь научим наш вертолет стрелять. Создаём клип gun. В нём достаточно нарисовать только один фрейм, например пулю от крупноколиберного пулемёта, но можно постараться и сделать дым, искры, и т.д. Только не забудьте в Actions для последнего фрейма написать stop();, чтобы клип останавливался. Перетаскиваем на Main. В Instance в Name клипа gun пишем shot. В Actions пишем:

onClipEvent (load) {
shotMoveSpeed = 35;
this._y = _root.vert._y+16;
this._x = _root.vert._x+103;
}
onClipEvent (enterFrame) {
this._x += shotMoveSpeed;
this._y += random(10)-5;
if (this._x>500) {
this.removeMovieClip();
}
for (i=1; i<=_root.numEnemy; i++) {
if (this.hitTest(_root["vrag"+i]) and (_root["vrag"+i].hit<>1)) {
_root.score += 100;
_root["vrag"+i].hit = 1;
_root["vrag"+i].gotoAndPlay(2);
this.removeMovieClip();
}
}
if (this.hitTest(_root["boss1"])) {
_root.score += 100;
_root.lives -= 1;
this.removeMovieClip();
}
}

Цифры 16 и 103 во третьей и четвёртой строках подобраны эксперементально - вылет пули должен совпадать с пушкой, this.removeMovieClip(); убирает пулю, если она вылетела с экрана. Цикл в восьмой строке снизу перебирает всех врагов и, если выполняется hitTest (то есть пуля столкнулась с врагом), увеличиваются очки ( score), клип врага начинает проигрываться и происходит взрыв ( который, я надеюсь, вы предусмотрели). Последнее условие предназначено для босса (его мы рассмотрим позже).

Делаем еще один клип gun2. В Instance в Name клипа пишем raketa. В Actions клипа пишем всё то же самое, что и для клипа shot, изменилось лишь:

onClipEvent (load) {
raketaMoveSpeed = 7;
this._y = _root.vert._y+28;
this._x = _root.vert._x+38;
}

и

this._x += raketaMoveSpeed;
this._y += 50*Math.sin(this._x);

Скорость ракеты чуть меньше, и ордината изменяется по закону синуса.

Теперь в Actions нашего вертолёта дописываем после moveSpeed=15:

_root.shot._visible = false;
shotCounter = 1;
_root.raketa._visible = false;
raketaCounter = 1;

Первая и третья строки устанавливают свойство видимость (_visible) клипов shot и raketa в false, то есть клипов не видно.

А перед последней фигурной скобкой:

if (Key.isDown(Key.CONTROL) and (_root.shots>0)) {
_root.shots--;
shotCounter++;
_root.shot.duplicateMovieClip("shot"+shotCounter, shotCounter);
_root["shot"+shotCounter]._visible = true;
}
if (Key.isDown(Key.SPACE) and (_root.raketashots>0)) {
_root.raketashots--;
raketaCounter++;
_root.raketa.duplicateMovieClip("raketa"+raketaCounter, raketaCounter);
_root["raketa"+raketaCounter]._visible = true;
}

После нажатия клавиш Control и Spase клипы начинают размножаться и становятся видимыми. Есть одно замечание - располагайте клип vert в левом нижнем углу. Дело в том, что при инициализаии клипы raketa и shot начинают двигаться и, хотя они невидимы, могут попасть во вражеский вертолёт, вызвав непредвиденный взрыв (можно, конечно, списать всё на брак в вертолётах противника).

F12 - вертолёт летает, стреляет и,главное, при попадании пулей или ракетой, противники взрываются!

Теперь у нас есть основная часть игры, осталось сделать интерфейс и босса.

В Actions фрейма и символов уже предусмотрено изменение различных переменных (verlives, shots, raketashots, score, lives). Но нужно как -то вывести их на экран. Для этого во флеше есть все неоходимые средства. В Scene1 нажимаем на клавиатуре T (Text Tool). Кликаем мышкой на слое Main в том месте, где вы хотели бы разместить счётчик. Нажимайте Ctrl+T (меню Windows->Panels->Character), в появившейся панели можно выбрать цвет, шрифт, размер и т.д. текста. Затем выбираем вкладку Text Options.

В выпадающем меню выбираем Dinamic Text, ниже, где написано Embed fonts, нажимаем кнопку с цифрами 123 (выводить мы собираемся цифры), или, чтобы не мучиться, кнопку вот с такими символами [...] (теперь выводить через этот счётчик можно всю таблицу символов:-). В Variable: вводим одну из переменных. Теперь сделаем счетчики для verlives, rokets, shots. Всё то же самое, изменяем лишь Variable. Теперь сделаем подписи. Готово!

Теперь добьёмся того, чтобы выскакивала надпись Game Over (или You Loose Sucker!).

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

Во втором фрейме на Background вставьте какой -нибудь рисуночек, или оставьте пустым. В Actions пустого фрейма слоя Control напишите:

stop ();
Mouse.show();

Mouse.show показывает скрытый ранее курсор мыши.

Теперь во втором фрейме слоя Main пишите любые пожелания проигравшему. После этого выделяем этот фрейм, выбираем Windows->Panels->Frame (или Ctrl+F). В Label вводим gameover. Во фрейме должно появиться некое подобие флажка. В Actions нашего вертолета нужно дописать (в пределах скобок onClipEvent (enterFrame)):

if (_root.verlives<5) {
_root.gotoAndStop("gameover");
}

Теперь, когда verlives вертолёта становиться меньше 5, проигрывается фрейм с меткой gameover.

Но нужно же как -то вернуться,непременно спросите вы, чтобы начать игру заново? Для этого нужно вставить в Game Over кнопку. Можно сделать её самому, а можно взять готовую (Windows->Common Libraries->Buttons). В Actions для кнопки нужно написать:

on (press) {
gotoAndPlay ("start");
}

Конечно, пока вы не поставите метку start на первом фрейме, ничего работать не будет.

Если вам мешают вертолёты, которые продолжают вылетать из -за экрана, допешите в Actions второго фрейма слоя Control:

for (i=1; i<=numEnemy; i++) {
removeMovieClip("enemy"+i);
}

Это уничтожит всех врагов.

Таким же образом можно сделать About, где будут написаны правила и данные о создателе, Win, на случай, если игрок победил.

Пришло время для босса.

В Scene1 добавьте по одному чистому фрейму на слоях Main, Control, Background после фрейма с меткой start. В Background во фрейм вставьте какую -нибудь статическую картинку (это будущее место битвы с боссом). В Control в Actions фрейма напишите stop();. В Main скопируйте клипы vert, shot и raketa (можно ещё и vrag1) и все счётчики (нужно добавить ещё один - для переменной lives, т.е. здоровья босса).

Делаем босса. Назовём клип boss. В Instance в Name пишем boss1. Чтобы было немного поинтересней, нарисуем клип чуточку больше, чем простые враги. Теперь нужно сделать так: в начале клипа ничего нет (фреймов 10), а дальше появляется босс (тоже около 10-ти фреймов). В первом фрейме клипа в Actions напишем:

gotoAndPlay (random(19)+1);

Получится, что босс случайно то исчезает (пули и ракеты не приносят ему вреда), то появляется (вот тут -то его нужно расстреливать всем оружием). Теперь в Actions клипа boss1 пишем:

onClipEvent (load) {
this._x = 400;
this._y = 200;
scor = 5;
this.gotoAndStop(1);
}
onClipEvent (enterFrame) {
if(this.hitTest(_root.vert)){_root.verlives -=5}
this._y += scor;
if (this._y>400) {
scor = -scor;
}
;
if (this._y<20) {
scor = -scor;
}
;
if (_root.lives<0) {
_root.gotoAndStop("win");
}
}

scor - приращение, скорость с которой двигается босс. Второе и третье условия передвигают врага сверху вниз и обратно. Если наш вертолет сталкивается с боссом, verlives уменьшается. Когда жизней у босса нет (lives<0), фильм перескакивает на метку win, где написаны поздравления победителю. Если вы придусмотрели эффектный взрыв босса, то вместо _root.gotoAndStop("win"); вставьте _root["boss1"].gotoAndPlay(2);, в первом фрейме эффекта напишите stop();, a в последнем _root.gotoAndStop("win");. Для того, чтобы попасть к боссу, нужно дописать в Actions vert в пределах скобок onClipEvent (enterFrame):

if (_root.score>2500) {
_root.gotoAndStop("boss1");
}

Это условие позволяет перескочить к боссу, если набрано определённое количество очков.

Кому -то может не понравиться, что вертолёт вылетает за границы экрана. Чтобы играть по честному, добавьте в Actions нашего вертолета в пределах скобок onClipEvent (enterFrame):

if (this._x>=450) {
this._x = 450;
}
if (this._x<=50) {
this._x = 50;
}
if (this._y>=350) {
this._y = 350;
}
if (this._y<=50) {
this._y = 50;
}

Эти четыре условия проверяют координаты и не дают вертолёту вылететь за границы игрового поля.

Теперь почти всё. Передвиньте всю конструкцию из фреймов, которую мы нагородили в Scene1, на 5 фреймов вправо, чтобы получилось вот так:

Первые четыре фрейма мы используем для прелодера. Для этого повставляйте чистые фреймы (Blank Keyframe) на всём промежутке от первого до пятого фреймов. В первом фрейме слоя Control в Actions пишем:

ifFrameLoaded ("about") {
gotoAndPlay ("begin");
}

это условие проверяет, загружен ли фрейм с меткой about ( у меня это самый последний фрейм Scene1, поэтому, когда он загрузится, загрузится вся игра). В Main напишите или нарисуйте что -нибудь, например loading... Во втором, третьем и четвёртом фрейме рисуйте то же самое, на том же самом месте, но с небольшими изменениями (возможно, изменяется цвет). Только учтите, что первый и чеивертый фреймы должны совпадать, чтобы получилась циклическая анимация. В Actions четвёртого фрейма слоя Control пишем gotoAndPlay (1); это зациклит прелодер до момента загрузки игры. В пятом фрейме слоя Main рисуем кнопку с Actions:

on (press) {
gotoAndPlay ("start");
}

В этом же фрейме делаем метку begin.

Всё! Жмите F12 и играйте в игрушку, которую сделали только что сами!

Конечно, наша игра ещё нуждается в доработке (озвучьте игру, добавьте Options, где можно будет выбрать сложность игры, проработйте взрывы, сделайте какие -то значки для увеличения/изменения оружия, здоровья, научите противников стрелять...).

Но, главное, вы сделали первый шаг. Теперь, наверно, у вас не вызовет удивления никакая игра на Flash. Больше игрушек, хороших и разных!

Да прибудет Flash с вами:-))

Сайты, которые стоит посмотреть: