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

Создаем новый документ «ActionScript 3.0»

Создание кнопки: нарисуем объект на сцене

На панели «timeline» создаем два слоя, первый называем «actions» , второй — «button» .

Теперь выберем слой «button» и нарисуем на нем кнопку при помощи инструмента «Rectangle Primitive Tool» .

Сделаем заливку синего цвета и немного закруглим углы.

Преобразование объекта в символ-кнопку

Преобразуем объект в символ. Для этого, используя инструмент «Selection Tool» , который находится на правой панели, выбираем объект и нажимаем правую кнопку мыши, в появившемся контекстном меню выбираем «Convert to Symbol» , в поле «type» устанавливаем»button» , в поле «name» дадим имя объекту «button1» .

Настройка кнопки

Два раза щелкаем по объекту. На панели «timeline» появилось четыре кадра: «Up» , «Over» , «Down» и «Hit» .

Кадр «Up» отображает кнопку в обычном состоянии, когда на нее не наведен курсор и когда она не нажата. Кадр «Over» показывает состояние кнопки, когда на ней находится курсор, а «Down» отображает внешний вид кнопки при нажатии на нее мышью. Кадр «Hit» отображает кнопку после нажатия, мы его использовать не будем.

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

Теперь нужно отредактировать внешний вид кнопки в каждом кадре по отдельности. Элемент «Up» оставим без изменений, выбираем «Over» и направляемся в верхнюю правую панель программы. В настройках «Color» выбираем цвет для кнопки немного светлее первоначального.

Для элемента «Down» установим цвет темнее обычного.

Давайте сделаем так, чтобы при нажатии кнопка немного уменьшалась. Для этого находясь на выделенном кадре «Down» , выбираем на правой панели инструмент «Free Transform Tool» .

Зажимаем клавиши Alt+Shift и уменьшаем размер объекта.

Запуск приложения

Можно посмотреть, что получилось. Для этого перейдите в главное верхнее меню «File -> Publish Preview -> Flash» или просто нажмите ctrl+enter на клавиатуре.

Добавление текста на кнопку

Теперь давайте добавим на кнопку текст. Чтобы это сделать, создайте, находясь в режиме редактирования button1, на панели «timeline» еще один слой, на который мы поместим произвольный текст.

Добавление обработчика события при нажатии на кнопку

Чтобы при нажатии на кнопку происходило какое-то действие, нужно внести программный код. Для этого переходим из режима редактирования кнопки в режим сцены.

При помощи инструмента «Selection Tool» выбираем объект и в правой панели программы, в настройках «Properties» в поле «Instance Name» вводим имя кнопки, для того, чтобы можно было использовать объект в режиме программирования. Давайте назовем объект «btn1» .

Теперь выбираем слой «actions» , далее в главном верхнем меню переходим в режим редактирования кода «Window -> Actions» или нажимаем F9.

Давайте напишем первую строчку кода. Имейте ввиду, что язык ActionScript3.0 чувствителен к регистру, это означает, что слово с маленькой буквы и с большой он считает разными. Итак, пишем:

[code language=»actionscript3″]
btn1.addEventListener(MouseEvent.CLICK, click1);
[/code]

Рассмотрим эту строчку немного подробнее:
btn1 — это кнопка, имя которой давали в режиме редактирования сцены;
addEventListener — здесь добавляем обработчик событий для кнопки;
MouseEvent.CLICK — событие — нажатие кнопки мыши;
click1 — это будущая функция, которая будет делать то, что мы хотим, чтобы происходило при нажатии на кнопку.

Напишем функцию для обработки кнопки:

[code language=»actionscript3″]
function click1(e:MouseEvent):void {
var url:String = "httpsss://www.jwinters.ru";
var urlRequest:URLRequest = new URLRequest(url); navigateToURL(urlRequest);
}
[/code]

Рассмотрим некоторые моменты в коде:

function click1(e:MouseEvent):void — имя функции с параметром, которая не будет возвращать никаких значений;
var url:String = "httpsss://www.jwinters.ru"; — создаем строковую переменную и сразу назначаем ей текстовое значение в виде url-адреса.
var urlRequest:URLRequest = new URLRequest(url); Чтобы кнопка перенаправила на url-адрес, нужно создать переменную с типом URLRequest и передать ей в качестве параметра стоковое значение или текстовую переменную с таким значением.
navigateToURL(urlRequest); — перенаправление на url-адрес.
Нажимаем ctrl+enter и смотрим, что получилось.

Чтобы сохранить проект в файл, в главном верхнем меню переходим: «File -> Export -> Export Movie…» .

Смотрите также:

AdobeFlash: Как сделать кнопку с плавной анимацией и звуком при помощи ActionScript 3

ActionScript 3: Как сделать простой прелоудер (загрузчик) в Adobe Flash