Actionscript и интерактивность

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

Встроенный во Flash, язык программирования ActionScript, создан на основе JavaScript, адаптированного под нужды Flash. В настоящий момент, возможна компиляция Flash-роликов по две версии языка. 2.0. и 3.0. Различия между ними существенные, я же буду рассматривать версию 2.0., как наиболее простую для меня. Начнем с начала.



Синтаксис

Команды языка ActionScript чувствительны к регистру. То есть, команда «GotoAndPlay» должна писаться именно так. Если написать «Gotoandplay» или как нибудь иначе, это вызовет ошибку. Далее, все команды должны закрываться точкой с запятой. Ее отсутствие тоже может вызвать ошибку.

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

Код можно назначить либо на кадр таймлайна, либо на объект Movieclip или Button. Соответственно, код можно назначить кадру таймлайна, внутри Movieclip. На Graphic код назначить нельзя.

Многие синтаксические правила схожи с правилами языка JavaScript. А более подробно про синтаксис ActionScript можно почитать в стандартном Help либо на сайте Adobe.



Управление Таймлайном

Допустим, у нас есть основной таймлайн и нам нужно, чтобы анимация остановилась на 20-м кадре. Создаем новый слой для кода и называем его «actions«, для понятности.

Далее, открываем редактор, кнопкой F9 и щелкаем на двадцатом кадре, слоя «actions«. Нажимаем F6, для создания ключевого кадра. В редакторе пишем следующий код:

stop()

Скобки нужны для указания в них параметров (например, номера кадра), но в этой команде нет дополнительных параметров, поэтому они пустые. На кадре, появляется буква «а«, что означает, что на кадре есть код.

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

Создаем еще один слой, ставим в 20-м кадре пустой ключевой кадр и помещаем в него кнопку, то есть, символ Button. Почему нужно создавать пустой ключевой кадр? А потому что, если этого не делать и просто поместить кнопку в слой, она будет начинаться с первого кадра.

Теперь у нас есть кнопка. Надо назначить код на нее. Делается это так-же. Выделяем кнопку и вызываем окно редактора, нажав F9. И пишем в нем следующий код:

on(release){

    gotoAndPlay(20);

} 

То, что мы написали, есть реакция кнопки на событие. Если происходит событие «on(release)«, то выполняется действие, заключенное в фигурные скобки, то есть «gotoAndPlay(20);«. «release» в данном выражении — это отпускание кнопки, после нажатия. Если вам нужно, чтобы реакция была на нажатие, то следует написать «press«. Есть еще такие события, как «rollOver» и «rollOut» — это работает при наведении мыши на кнопки и на уведение с нее, соответственно. Есть еще несколько событий для кнопок, я не буду их тут описывать. Посмотрите в помощи. А у нас получилось вот, что: 

Get Adobe Flash player

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

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



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

Тут речь пойдет об управлении символами из других символов. Честно говоря, под символами, в данном случае, подразумевается Movieclip. Другие символы не предназначены для управления, посредством ActionScript

Get Adobe Flash player

В данном примере показано последовательное воспроизведение одного Movieclip, управляемого кнопками. Каждая из этих кнопок заставляет его воспроизводиться с разных кадров. Для изготовления подобного ролика нам потребуется кнопка — 1 штука, Movieclip c анимацией — 1 штука. А так же, различные цифры и буквы для оформления. Внутри Movieclip’а у меня есть слой с кодом, в котором стоит команда Stop на первом, девятом, девятнадцатом и двадцать девятом кадрах. Это нужно для того, чтобы он останавливался время от времени, а не крутился по кругу. В основной сцене лежит одна кнопка. Она размножена 4 раза, а чтобы не рисовать 4 разных кнопки, поверх каждой написано свое число, в отдельном слое. Рядом-же лежит наш Movieclip с анимацией. А теперь начинается интересное. выделите Movieclip на рабочей области и посмотрите на панель Properties.

Для управления клипом, посредством языка ActionScript, нам нужно этому клипу дать имя. У него уже есть имя «mc«, под которым он был создан и которое мы видим в библиотеке. Однако, для программных манипуляций нужно другое. Называется оно Instance Name. Зачем их два? Поясню. В библиотеке хранится оригинал нашего символа со своим именем. Оно действительно только для редактирования символа, как графического объекта. Мы можем разместить его на рабочей области несколько раз. И это будет не сам символ, а его экземпляр. Таким образом, если вы отредактируете этот символ в библиотеке, изменятся и все его экземпляры в рабочей области. А если мы каждому такому экземпляру дадим свое имя, мы сможем управлять ими по-отдельности, посредством языка Actionscript. Итак, назовем наш клип «my_mc«. Теперь им можно управлять программно. Выделите первую кнопку на рабочей области и откройте редактор кода. Для первой кнопки надо написать следующее:

on(press){

    my_mc.gotoAndPlay(2);

} 

что, буквально означает:

on(press){ // как только эта кнопка нажата
my_mc.gotoAndPlay(2); // символ my_mc должен начать воспроизведение с кадра 2
} 

Двойной слеш — «//» означает начало строчного комментария. Вы можете комментировать хоть каждую строчку своего кода, что я вам и советую делать, потому что, через пару недель вы можете и не вспомнить, что этот код означает. 

Далее, скопируйте этот код и вставьте его на остальные кнопки, лишь изменив в нем цифру 2, на 10, 20 и 30, соответственно. Действие у кнопок повторяется, только воспроизведение начинается с разных кадров. 

Выражение «my_mc.gotoAndPlay()» — это пример адресации. То есть путь, к объекту. Попробую объяснить на детском примере. У нас есть символ «mc_car«, внутри него лежат три символа «mc_wheel1«, «mc_wheel2«, «mc_wheel3«. Нам нужно заставить крутиться одно колесо. 

Для этого нам нужно обратиться к нему, с указанием пути, то есть: «mc_car.mc_wheel1.ROTATE«. Это есть относительный путь, потому что машина лежит в основной сцене. У основной сцены тоже есть имя: «_root«. Мы можем обратиться к колесу при помощи абсолютного пути. Выглядеть это будет так: «_root.mc_car.mc_wheel1.ROTATE«. Эти два выражения равнозначны, с той лишь разницей, что второй вариант менее гибкий. 

Второй вариант из детской сцены: нам нужно из второго колеса обратиться к крану, который лежит тоже в основной сцене. То есть, нам нужно подняться по иерархии на один уровень выше. Выражение для этого будет выглядеть так: «this._parent._parent.mc_crane.DOSOMETHING«.

Исходя из предыдущего, наш код можно записать и так:

on(press){
    _root.my_mc.gotoAndPlay(2);
} 

 Это будет абсолютный путь к объекту.

Существует и другой тип адресации. Относительно текущего символа. Выделите my_mc и напишите код на нем:

on(press){
    this.play();
} 

Да, вот так все просто. При нажатии на сам символ, он начнет воспроизведение со следующего кадра. А, так ака, в нем, через определенные промежутки, стоит команда «Stop«, то работать он будет таким-же образом, как если бы мы нажимали на кнопки. Только в данном случае он будет воспроизводиться последовательно.


Итак, применив известную сноровку, вы можете создать собственный сайт уже сейчас, использовав один Movieclip и еще несколько несложных элементов :-)

Share

Leave a Reply

Подтвердите, что Вы не бот — выберите самый большой кружок: