Делаем интерактивные флеш кнопки для плеера.


Дороие мои, спасибо вам за поддержку и теплые слова, за вашу заботу обо мне. Мне очень приятно, что вы ждете меня и помните обо мне. Давно уже ничего не писала из уроков, но очень много разных заготовок. Вот урок как сделать кнопочку из векторного клипарта. Может быть кого-т он заинтересует.
В этом уроке сделана кнопочка "PLAY". По аналогии можно сделать и кнопочку "STOP". Как из этих кнопочек собрать плеер - урок (от Леночки jzayka) здесь:


Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"

Будем делать интерактивные флеш кнопки для плееров, используя векторный клипарт формата AI. Формат AI это векторный формат программы Adobe Illustrator. Его напрямую можно импортировать в программу Adobe Flash и использовать все элементы векторного файла в создании флешек. Вот примеры таких кнопочек и плееры собранные из этих кнопочек.










Скачать векторные файлы для работы можно по ссылке

Кнопки техно

Фрукты

Скачать звуки для кнопок

Звуки для кнопок


Итак начнем.
Создайте папку для нового проекта и откройте программу Adobe Flash

Создайте документ Action Script 3

Файл - Создать



"Смотрим урок «Делаем интерактивные флеш кнопки для плеера» далее."

Серия сообщений "Уроки Flash":

уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 25 - Работа по уроку «Создание эффекта Боке».
Часть 26 - Календарик. Работа Preriy
Часть 27 - Делаем интерактивные флеш кнопки для плеера.

Серия сообщений "Флеш заготовки":

флеш заготовки, флеш материал

Часть 1 - Флеш заготовки «Часики, календарики и приветствия».
Часть 2 - Флеш заготовки «Календарики и часики».
...
Часть 14 - Мои копилочки с Я - ру. Для часиков.
Часть 15 - Мои копилочки с Я - ру. Пасхальные кластеры и декор для дизайна флешек.
Часть 16 - Делаем интерактивные флеш кнопки для плеера.

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 21 - Как создать и наложить маску определенной формы на видео в Adobe Flash.Урок.
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 19 - Три урока флеш в одной работе
Часть 20 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).
Часть 21 - Как создать и наложить маску определенной формы на видео в Adobe Flash.Урок.
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).

По просьбе LiSu рассмотрим как сделать эффект 3D переворота на 180 градусов по этому Уроку..

Буду благодарна,если меня поправят и дополнят опытные флешеры.

Кликните по разным сторонам прямоуголика.

1.Создадим папку.Название не важно.
2.Создадим новый документ документ AS3.Размеры 240/320.
Сохраним (Файл-Сохранить как) в созданную папку.

3.Создадим воображаемые страницы,которые по клику на них будут переворачиваться на 180 градусов.

Сделаем по размеру рабочей области прямоугольные формы разных цветов.
Это в моем примере..вы можете просто пронумеровать страницы или придумать что-то другое).
Делаем на примере 3-х страниц.Т.е.создадим 3 одинаковых по размеру прямоугольника.

4.Преобразуем в символ

Привязываем к AS с точкой регистрации в верхнем левом углу
Называем для 1-ой страницы page_1
В строку класс вписываем Page_1
Удаляем из рабочей области.


При появившемся окошке(выделено красным),жмем ОК.


То же самое проделаем поочередно со стрницами 2 и3.
Имя пишем page_2,page_3.Класс Page_2,Page_3 cоотвтственно
и удаляем со сцены.

5.Сделаем еще один прямоугольник,размер не важен .
У меня 240/50.Это будет что-то вроде шапки ..

6.Преобразуем в символ (см. скрин в п.4) .
Назовем top_tip.Поставим галочки в строке класс напишем TopTip.
Удалим.

Жмем ОК и еще раз ОК.

Так выглядит библиотека на данном этапе.
У меня присутствует page_4 Page_4(делала заготовки для 4-х страниц).

Если вы хотите добавить что-то на страницы (это может быть картинка,анимашка,текст и т.д),откройте поле редактирования символа.

Чтобы открыть,жмите на маленький треугольничек рядом с иконкой.
Откроются все символы,которые мы создали.

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

Все, на этом ручная работа закончена.

7. Cкопируйте файл Vertelka.as из вложения к посту в созданную папку.
Куда сохранили .fla файл.

Возвращаемся к документу .fla.
8.Открываем панель Действия, пишем на главной сцене в первом кадре код:
===============================================
import flash.geom.Point;

var pages:Array = [new Page_1(), new Page_2(), new Page_3()]
var vertelka:Vertelka = new Vertelka( this, new Point( 120, 160 ), pages, new TopTip() )
================================================

Тестируем(CTRL+ENTER).
Сохраняем работу(Файл-Сохранить)
Экспортруем(Файл-Экспорт-Экспортровать ролик)

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


Вот и все!Осталось только включить фантазию.Успехов!

Серия сообщений "Мои уроки":

Часть 1 - Цветочный шлейф за курсором
Часть 2 - Делаем снегопад в SWFQuicker..)
...
Часть 10 - Кнопка-плеер в Adobe Flash.
Часть 11 - Цифровые часики в Adobe Flash(AS2,AS3).
Часть 12 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 18 - Вертикальное вращение во флеш
Часть 19 - Три урока флеш в одной работе
Часть 20 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).
Часть 21 - Как создать и наложить маску определенной формы на видео в Adobe Flash.Урок.
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Три урока флеш в одной работе


В этой работе я соединила три урока Леночки - jzayka
Спасибо, дорогая, за науку...)) Это так интересно!!!
Кнопка-плеер в Adobe Flash
Делаем эффект "Боке" в Adobe Flash
Делаем цифровые часики

Или размер поменьше...

Серия сообщений "* Мои работы в Adobe Flash CS6":

Часть 1 - Моя первая работа в Adobe Flash CS6 - Mouse Over Image Animation
Часть 2 - Урок размытого изображения во флеш
...
Часть 17 - Эффект "боке" + музыка - моя работа в Adobe Flash CS6
Часть 18 - Моя работа по уроку "Эффект "Yo-Yo" во флеш"
Часть 19 - Три урока флеш в одной работе

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 17 - Дополнение к уроку "Эффект Yo-Yo во флеш"
Часть 18 - Вертикальное вращение во флеш
Часть 19 - Три урока флеш в одной работе
Часть 20 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).
Часть 21 - Как создать и наложить маску определенной формы на видео в Adobe Flash.Урок.
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Вертикальное вращение во флеш

Билась, билась с УРОКОМ , но у самой так ничего и не получилось.
И кто такие уроки пишет???
Спасибо Марине - novprospekt, которая расписала все по-полочкам!




Пояснения к уроку от Марины - novprospekt

Читать далее...

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 16 - Флеш на AS3
Часть 17 - Дополнение к уроку "Эффект Yo-Yo во флеш"
Часть 18 - Вертикальное вращение во флеш
Часть 19 - Три урока флеш в одной работе
Часть 20 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка).
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 15 - Эффект "Yo-Yo" во флеш
Часть 16 - Флеш на AS3
Часть 17 - Дополнение к уроку "Эффект Yo-Yo во флеш"
Часть 18 - Вертикальное вращение во флеш
Часть 19 - Три урока флеш в одной работе
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 14 - Вращающийся шлейф от курсора
Часть 15 - Эффект "Yo-Yo" во флеш
Часть 16 - Флеш на AS3
Часть 17 - Дополнение к уроку "Эффект Yo-Yo во флеш"
Часть 18 - Вертикальное вращение во флеш
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 13 - Программная анимация в Adobe Flash.
Часть 14 - Вращающийся шлейф от курсора
Часть 15 - Эффект "Yo-Yo" во флеш
Часть 16 - Флеш на AS3
Часть 17 - Дополнение к уроку "Эффект Yo-Yo во флеш"
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Вращающийся шлейф от курсора



УЧИМСЯ ДЕЛАТЬ ФЛЕШКИ

Вращающийся след от курсора

Понравился такой эффект , давайте научимся его делать в программе Adobe Flash



Читать далее...

Серия сообщений "уроки Ларисы Гурьяновой":
Часть 1 - Обучение фотошоп
Часть 2 - Учимся делать рамки в ФШ
...
Часть 28 - Тонируем фотографию в разные цвета
Часть 29 - >Знакомимся с фильтром Splatter...
Часть 30 - Вращающийся шлейф от курсора
Часть 31 - Cервис по созданию виртуальных открыток
Часть 32 - Несколько способов анимации воды в ФШ
...
Часть 34 - Анимация букв в Фотошоп
Часть 35 - Простой коллаж
Часть 36 - Анимация плагином - Alien Skin Xenofex

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 12 - Видео-уроки Adobe Flash
Часть 13 - Программная анимация в Adobe Flash.
Часть 14 - Вращающийся шлейф от курсора
Часть 15 - Эффект "Yo-Yo" во флеш
Часть 16 - Флеш на AS3
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 11 - Делаем эффект "Боке" в Adobe Flash.
Часть 12 - Видео-уроки Adobe Flash
Часть 13 - Программная анимация в Adobe Flash.
Часть 14 - Вращающийся шлейф от курсора
Часть 15 - Эффект "Yo-Yo" во флеш
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 10 - Собери пазл (как я делала)
Часть 11 - Делаем эффект "Боке" в Adobe Flash.
Часть 12 - Видео-уроки Adobe Flash
Часть 13 - Программная анимация в Adobe Flash.
Часть 14 - Вращающийся шлейф от курсора
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Делаем эффект "Боке" в Adobe Flash.

Урок
Будем делать вот такой эффект.


1.Создадим на компьютере папку для проекта.
Назовем(не важно как) ,например, "боке".
1.1.Поместим в нее папку Classes из вложения в посту.

2.Создадим документ АS3.(Файл-Создать-AS 3.0)
Сохраним в созданную папку"боке" (!Обязательное условие!)
под любым названием,например"эффект боке".

3.Содадим два слоя.
На слой 1 поместим фон,слой 2 для скрипта.
Для фона можно импортировать картинку,например,ваш красивый коллаж.Размеры рабочей области по размару картинки.

Или нарисуем прямоугольник по размеру рабочей области(как в примере).
Заливка любым цветом или градиентом ,без обводки.

Я взяла коллаж размером 700/424.


Меняем размеры рабочей области.


4.Выравниваем инструментом Выравнивание.


5.Встаем на слой2.Окрываем панель Действия(F9)
Вставляем код.
======================
import Classes.Lights;

var light:Lights = new Lights();


/* Первая цифра-->Размер документа по ширине; Вторая цифра-->Размер по высоте-->Третья цифра-->Количество пузырьков; Четвертая цифра-->Размер пузырьков; 0х#FFFFFF-->Цвет пузырьков (здесь белый) */
light.init(600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2);

addChild(light);
=======================
6.Меняем в коде аккуратно размеры на свои..и по желанию размер,количество и цвет пузырьков(см скрин).

Я поменяла все...


7.Смотрим что у нас получилось(Сtrl+Enter)



8.Сохраняем работу(Файл-Сохранить)
9.Экпортируем ролик.(Файл-Экспорт-Экпортировать ролик)

Серия сообщений "Мои уроки":

Часть 1 - Цветочный шлейф за курсором
Часть 2 - Делаем снегопад в SWFQuicker..)
...
Часть 7 - Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"
Часть 8 - Украшение работ"рандомным"эффектом в Adobe Flash.
Часть 9 - Делаем эффект "Боке" в Adobe Flash.

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 9 - Украшение работ"рандомным"эффектом в Adobe Flash.
Часть 10 - Собери пазл (как я делала)
Часть 11 - Делаем эффект "Боке" в Adobe Flash.
Часть 12 - Видео-уроки Adobe Flash
Часть 13 - Программная анимация в Adobe Flash.
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 7 - 3Д Вращение обьекта в Adobe Flash
Часть 8 - Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"
Часть 9 - Украшение работ"рандомным"эффектом в Adobe Flash.
Часть 10 - Собери пазл (как я делала)
Часть 11 - Делаем эффект "Боке" в Adobe Flash.
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"

Продолжим изучение возможностей Панели "Фрагменты кода"
Многие из нас загружают в свои флешки музыку.
Сегодня я раскажу об одном из вариантов как загружать музыку в Adobe Flash.
И загружать мы будем используя Панель "Фрагменты кода"в версии программы CS6(в CS5 эта функция тоже присутствует).
Кто не знаком с Панелью,можно посмотреть пост Панели "Фрагменты кода"в Adobe Flash CS6.
Мы же продолжим тему.

Используя этот вариант ,не нужно загружать музыку непосредственно в программу.
Для этого достаточно иметь прямую(рабочую) ссылку на аудиофайл в формате mp3.
Ссылки рекомендую использовать с сайтов Привет.ру,ЛиРу,playcast.ru.
У кого на Ucoz создан сайт,можно туда загружать музыку и забирать прямые ссылки.

Вид ссылок:
playcast.ru

ЛиРу

ucoz

Привет.ру

Как получить ссылку

на ЛиРу-здесь

на Привет.ру- здесь

С других сайтов ссылки могут не распознаваться программой или же быстро"умирают".
Например, с Майла ссылки программа не принимает .

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

смотрим и читаем далее

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 6 - Создание 3D карусели (мои пояснения к уроку).
Часть 7 - 3Д Вращение обьекта в Adobe Flash
Часть 8 - Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"
Часть 9 - Украшение работ"рандомным"эффектом в Adobe Flash.
Часть 10 - Собери пазл (как я делала)
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 5 - Шлейф за курсором - моя работа в Adobe Flash CS6
Часть 6 - Создание 3D карусели (мои пояснения к уроку).
Часть 7 - 3Д Вращение обьекта в Adobe Flash
Часть 8 - Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"
Часть 9 - Украшение работ"рандомным"эффектом в Adobe Flash.
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5

Создание 3D карусели (мои пояснения к уроку).

Источники уроков Здесь и Здесь.

Многим понравилась карусель (флеш меню). Меня попросили рассказать как я делала этот урок. Уроков никогда не писала, это первый. Огромное спасибо Леночке jzayka за помощь!


1. Создайте новый документ 550х400

"Читать далее..."

Серия сообщений "уроки по Adobe Flash":
Часть 1 - Уроки по созданию флеш
Часть 2 - Видео-уроки по Adobe Flash
...
Часть 4 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
Часть 5 - Шлейф за курсором - моя работа в Adobe Flash CS6
Часть 6 - Создание 3D карусели (мои пояснения к уроку).
Часть 7 - 3Д Вращение обьекта в Adobe Flash
Часть 8 - Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"
...
Часть 22 - Плеер во AdobeFlash на AS3
Часть 23 - Делаем интерактивные флеш кнопки для плеера.
Часть 24 - Как установить без ключа активации Adobe Flash Pro CS5.5