+++
+++
} ******** Все для Вас  Skandalikaва копилка  fleshmagik - Флеш анимации Музыкальные открытки Kubines - Оформление системы  Flash Magic - Флеш анимации DiZona – все для Photoshop SuprGif - Самая лучшая анимацияАнимация.GIF - Elza *******************

среда, 2 ноября 2016 г.

Кнопка-плеер в Adobe Flash. от Лены





Как создать кнопку и загрузить в нее музыку мы учились
в этом уроке.

Сегодня будем совершенствовать нашу кнопку и создадим кнопку-плеер,которая при нажатии на нее будет менять вид.
Это может быть цвет,размер,другая картинка,поведение(если будем использовать анимашку)и т.д.

Сделаем это на простом примере,не делая акцент на красивость.

Создадим на компьютере в любом месте папку с проектом.
Назовем,например"плеер - кнопки"



В программе:Создадим Документ ActionScript3.0
Файл-Создать-ActionScript3.0
Сохраним его п в папку с проектом "плеер - кнопки"

Продолжаем работать в программе!!!

1.Создадим символ.Вставка-Создать символ.

2.Назовем его Кнопки.


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




3.Создадим два новых слоя.Теперь на временной шкале у нас 3 слоя.
Переименуем для удобства, как на скрине.
На слое Играть расположим кнопку для воспроизведения звука.
На слое Стоп расположим кнопку для остновки звука.



Для примера я взяла клипарт бабочки разных оттенков.Сделала надписи.

4.Импотрируем на слой Играть бабочку Play.
Выделяем стрелочкой.Преобразуем в символ.


Назовем Играть.В Свойствах пишем btnPlay

5.Встаем на слой Стоп.Импортируем на него бабочку Stop
Выделяем стрелочкой.Преобразуем в символ.

Чтобы при нажатии она немножко смещалась,сдвинем ее стрелочками на клавитуре на 1пкс вправо(жмем 1 раз стелочку вправо) и на 1пкс вниз(стрелочка вниз).
Можно не делать этого..


Назовем Стоп.В Свойствах пишем btnStop


6.Встаем на слой Скрипт.Открываем Действия(F9)
Вставляем скопированный ниже код

code:
btnPlay.visible = true; btnStop.visible = false; // слушатели событий btnPlay.addEventListener(MouseEvent.CLICK, onClickPlay); btnStop.addEventListener(MouseEvent.CLICK, onClickStop); function onClickPlay(e:MouseEvent){ btnPlay.visible = false; btnStop.visible = true; } function onClickStop(e:MouseEvent){ btnPlay.visible = true; btnStop.visible = false; }

7.Возвращаемся на основную рабочую сцену с подготовленной работой.
8.Создаем вверху слой и на него из библиотеки перетаскиваем символ "Кнопки"


9.Жмем на бабочку,смотрим,что получилось. CTRL+Enter( для просмотра размер флешки уменьшен)


Все. Кнопка -плеер готова.Разместим ее как нам нравится.
При необходимости поменяем размер.


Осталось загрузить музыку.
10.Для этого выделяем бабочку стрелочкой. В Свойствах пишем любое имя литиницей У меня это knopa

11.Откроем Фрагменты кода.Жмем на папку Аудио видео.
12.Выбираем :
Нажмите для восроизведения/остановки.

Жмем на значек справа.Откроется окошко.Прокрутим вниз (см .скрин),куда будем вставлять свою ссылку.


Аккуратно между кавычек вставьте вашу ссылку.
14.Жмите Вставка.

Смотрим на временную шкалу.
Программа автоматически создала новый слой с скриптом.
Музыка загружена в кнопку.

Тестируем ctrl+enter(жмем на бабочку)
На фон добавила эффект "боке"


Еще не все..
15.Откроем Параметры публикации.

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


Подробности об этом в уроке(ссылка выше)

Сохраним работу.
Экспортируем(Файл-Экспорт-Экспортировать ролик)
На этом все!Удачи в творчестве!
Серия сообщений "**Мои уроки":
Часть 1 - Цветочный шлейф за курсором 
Часть 2 - Слайд-шоу в Aleo Flash Intro Banner Maker встроенным эффектом..)
...
Часть 9 - Украшение работ"рандомным"эффектом в Adobe Flash.
Часть 10 - Делаем эффект "Боке" в Adobe Flash.
Часть 11 - Кнопка-плеер в Adobe Flash.
Часть 12 - Цифровые часики в Adobe Flash(AS2,AS3).
Часть 13 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка). 
...
Часть 22 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 23 - Урок. Картинка из кусочков в Adobe Flash CS6
Часть 24 - Урок.Эффект полосок на картинке в Adobe Flash.

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

Отправить комментарий