Создание кнопки в Adobe Flash CS5

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

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

создание нового документа ActionScript 3.0

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

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

на панели анимации создаем два слоя actions и button

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

нарисуем кнопку инструментом Rectangle Primitive Tool

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

немного закруглим углы кнопки для Rectangle Primitive

кнопка объект Rectangle Primitive с немного закругленными углами

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

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

преобразование объекта в символ при помощи Convert to Symbol

называем символ в AdobeFlash

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

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

на панели анимации объекта Button будет четыре кадра Up, Over, Down и Hit

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

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

создаем ключевые кадры через контекстное меню Insert Keyframe в AdobeFlash

ключевые кадры объекта Button в AdobeFlash

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

в настройках Color выбираем цвет для кнопки

изменен цвет кнопки в настройках Color при наведении курсора

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

цвет кнопки для элемента Down

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

уменьшаем размер кнопки при помощи инструмента Free Transform Tool

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

клавишами Alt+Shift и инструментом Free Transform Tool уменьшаем размер кнопки

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

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

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

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

создаем еще один слой в панели анимации, чтобы добавить текст на кнопку

кнопка с произвольным текстом

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

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

перейти из символа на основную сцену проекта

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

в настройках Properties в поле Instance Name вводим имя кнопки

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

добавление кода ActionScript 3 в окно кода Actions

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

btn1.addEventListener(MouseEvent.CLICK, click1);

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

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

function click1(e:MouseEvent):void { 
var url:String = "http://www.jwinters.ru"; 
var urlRequest:URLRequest = new URLRequest(url); navigateToURL(urlRequest); 
}

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

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

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

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

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


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


Комментировать

Почта не публикуется.Обязательные поля отмечены *