Flash. Реализуем кнопку с переходом

Учимся создавать кнопки, обрабатывать их и переходить с их помощью на другие кадры. Используем язык Action Script.

Рисовать мы уже немного научились, поэтому хочу предоставить возможность вам ознакомиться с очень интересной областью Flash - содание кнопок (button). Меня просто таращит от применения этих волшебных символов для своих целей. В отличие от других сред, что меня собственно и завараживает во flash, создание кнопок подразумевает не только задать алгоритм работы но кнопки, но и ее создание. Т.е. мы сами прорисовываем и придумываем, как наша кнопка будет работать, что с ней будет происходить при нажатии, при наведении курсора и много другое. Уверяю вас, такой разброс фантазии сподвигает вас на новые открытия и ++ в ваш очаг удовольствия от проделанного :)

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

В данной статье я хочу рассмотреть применение кнопки в качестве перехода на новый кадр. То есть: имеется несколько кадров, но они не сменяют друг друга поочередно, так как на первом кадре мы установили команду stop () (о ней я рассказывал в командах для фрейма). Итак представим: у нас имеется два кадра, на каждом из которых расположена надпись, информирующая о номере данного кадра для видимости и легкого восприятия. На первом и втором кадре у нас содержится кнопка. Я взял готовую кнопку из библиотеки Adobe Flash CS4 (чтоб красиво было), но вам рекомендую самим сделать кнопку. Как она делается?

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

1. Кнопку (button) - будет иметь свою структуру, а также предназначения для программирования ее на выполнение различных команд. То есть при совершении с кнопками различных манипуляций: нажатие, наведение курсора, отвод курсора и другое - будет совершаться какой-то скрипт, установленный и определенный нами.
2. Клип (movie) - клип, имеющий внутреннюю анимацию (расскажу об этом позже)
3. Графику (Graphic) - графика, статичная и неподвижная, как картинка будет находиться на нашем поле деятельности.

Соответственно выбираем Button. Все - наша кнопка сделана, но она какая-то статичная, не меняется при наведении курсором, в общем просто картинка, и непонятно, жива ли она вообще?

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

Видим, что мы находимся внутри кнопки, и тщательно рассматриваем ее структуру в области кадров: она имеет 4 пункта:

1. Up - все, что находится под данной меткой, это вид нашей кнопки в обычном режиме, т.е. как кнопка будет выглядеть, если она просто расположеная на экране (мы не совершаем с ней никаких действий). Так мы будем видеть ее при первой встрече.
2. Over - вид кнопки, когда курсор мыши находится над ней. Т.е. мы наводим на нее наш курсор, и наша кнопочка меняет свой вид, чтобы дать нам понять, что мы навели на нее и, возможно, хотим ей воспользоваться. Очень удобная функция во Flash, мне очень нравится :)
3. Down - вид кнопки, когда мы нажимаем на нее, т.е. в момент нажатия курсором мыши на кнопку мы будем видеть ее именно такой, как определяет данный маркер
4. Hit -  признаюсь, что не знаю, зачем этот пункт, но я обычно рисую здесь вид кнопки в нейтральном режиме, как при метке Up.

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

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

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

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

on (release) {
    gotoAndStop(2);
}

Сейчас все объясню: on (release) - данная операция определяет нам, что дальше в квадратных скобках пойдет код, который будет выполняться при нажатии на данную кнопку. То есть мы жмякаем на кнопку и свершается чтение данного кода внутри него. Что же будет внтури? Внутри квадратных скобок мы пропишем, уже известную нам команду gotoAndStop(2);

Что у нас получилось: при нажатии на кнопку мы переходим к проигрыванию кадра номер 2. Хотя изначально мы останавливаемся на кадре номер 1, так как в нем прописана команда stop(). Теперь по нажатию на кнопку с первого кадра мы переходим к проигрыванию второго.

Второй кадр не имеет команд внутри себя для выполнения, но мы останавливаемся на нем, так как при переходе с 1 кадра нам было приказано остановиться на данном кадре (так как gotoAndStop(2)). Поэтому мы замираем на данном кадре и видим как бы статическую картинку. Как нам вернутся теперь на 1 кадр? Я думаю вы уже догадались - для кнопки второго кадра мы пропишем ранее использованный набор команд, лишь изменив номер кадра, к которому мы собираемся перейти:

on (release) {
    gotoAndStop(1);
}

Мы и не ошибемся если вместо gotoAndStop(1) пропишем gotoAndPlay(1), так как в любом случае мы остановимся на 1 кадре, ведь он содержит в себе команду stop(), которая свершит остановку проигрывания на 1 кадре в любом случае, ведь код первого кадра будет считываться только после команд второго кадра, с которого мы совершили скачок. Давайте взглянем, что у нас должно было получиться на flash:

Итог: по нажатию на кнопку (button) мы совершаем переходы между первым и вторым кадрами. Данная реализация очень часто применяется в жизни, когда по нажатию на кнопку нам нужно совершить какое-то событие или переход. Так же её можно применять в различных ситуациях: когда нужно запустить какой-то клип (об этом расскажу позже), изменить прорисовку кадра, установить другие команды для кадра, сделать операции вычисления и много-много другого. Попробуйте немного поэксперементировать и поварьировать с местом применения уже известных вам команд и действий. Жду от вас результатов и возникающих вопросов! :)