Для начала рекомендую: просмотреть, вот, "шедеВРАЛЬНУЮ трилогию". Многие это знают, просто напоминаю.  1   2   3

Урок не совсем для новичков, хотя постарался раскрыть пошире всё.

Все скрины увеличиваются по клику.

1.Придумали проект

2.Создаём папку проекта. В ней загружаем исходный материал для работы: фоновые изображения, кнопки и другое. Рекомендую создать в папке и текстовый документ с ссылками на музыкальные файлы. Всё это не обязательное условие, но удобнее работать.Для урока скачайте вложение со всеми материалами.  

Скачивайте вложение, пользуйтесь для обучения.

3.В программе (АФ или Сотинк) создаём новый документ AS2, задаём размеры (в дальнейшем буду ссылаться на наш рабочий пример): 552/595

4.Сохраняем сразу в папку проекта FLA файл: Файл - Сохранить как...,  имя, например, "Телик".

5.Импортируем в библиотеку файлы 1-6 из папки проекта: Файл - Импорт - Импортировать в библиотеку. 

            6.На первый кадр (пока единственный) переносим из библиотеки изображение 1. Выравниваем по центру: открыть вкладку "Выровнять", нажать иконки выравнивания как на скрине:

7.Для порядка, переименовываем слой 1, например, "Телик" 

8.В этот первый кадр (кликать по нему для активации) вписать скрипт:

stop(); 

( скрипты есть во вложении). Закрываем слой на замок

9.Создаём новый слой, называем "Переключатель".  В первый кадр переносим из библиотеки "Переключатель" - изображение 3. Располагаем на монтажном столе переключатель в центре цифрового круга (пользуемся стрелками на клавиатуре).

10.Выделяем вторые кадры на оба слоя,  клик правой кнопкой на вторые кадры - Вставить ключевой кадр: Закрываем замок и на втором слое.

11.Создаём новый слой, название "Кнопка включения". Активируем первый кадр. Из библиотеки перетаскиваем изображение 4. Размещаем под экраном, можно чуть уменьшить размеры  Удобно задать значения в панели "Свойства", помогаем себе кнопками на клавиатуре.

Ваши значения в "Свойствах" могут отличаться от примера. Важно точно запомнить их - они нужны Вам для второго кадра. Хотя можно возвращаться на первый кадр, активировать кнопку включения и посмотреть данные.

12.Кликаем правой кнопкой мыши на второй кадр и выбираем: Вставить пустой ключевой кадр. Переносим из библиотеки изображение 5 и в панели свойства задаём те же параметры "Х"  = 185 и "Y"  = 545, а также размеры (60/20). 

Далее преобразовываем изображения кнопок вкл (на первом кадре) и выкл (на втором кадре) в  активные флешкнопки. Для этого: 

13.Слой Кн.Вкл, первый кадр, кликаем правой кнопкой мыши на изображение кнопки включения и выбираем: Преобразовать в символ... Выбираем символ "Кнопка". Назовём "Вкл" - Ок. Переходим на второй кадр и точно так же преобразовываем изображение кнопки в символ "Кнопка" по имени "Выкл". В библиотеке появились символы кнопок. 

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

         - правой кнопкой на третий кадр (Down) -  Добавить кадр.

         - создаём новый слой

         - правой кнопкой на третий кадр (Down) второго слоя - Вставить ключевой кадр.

         - при активном третьем кадре второго слоя из библиотеки переносим на сцену звуковой файл (6.mp3) 

         - активный третий кадр второго слоя, открываем "Свойства" и в разделе "Звук" - "Синхронизация" - выбираем "Событие".

Кнопка озвучена.

15. Аналогично поступаем с кнопкой "Выкл" - в точности повторите пункт 14.

Возвращаемся на монтажный

16.Впишем кнопкам скрипт, указывая какое действие должна осуществить каждая. А должны они перенести и остановить флешку на определённый кадр: кнопка "Вкл" переносит на второй кадр, кнопка "Выкл" - обратно на первый кадр. (Переход сопровождается звуком, кнопка меняет вид). 

                   Скрипт вписывается в кнопку. Для этого:

                               - стали на первый кадр (верхний слой)

                               - активируем кнопку на сцене

                               - открыли вкладку "Действия" и вписываем код: 

                                                                              on (release)

Создаём текстовое поле и пишем: Сегодня  по каналам: (или Ваш текст). Создаём новое текстовое поле, прописываем "Анна Белкина с "Бомбой". И так  далее, всего шесть полей. размещаем их на фоне экрана, передвигая каждое поле по отдельности или блоками. Будет примерно так:

Закрываем слой на замок.

19.Переходим на слой "Телик", снимаем замок. Клик правой кнопкой мыши на его третий кадр, выбираем "Вставить пустой ключевой кадр". И на этот кадр из библиотеки перетаскиваем изображение 2. Выравниваем по центру. Теперь стали на седьмой кадр слоя и через правую кнопку мыши выбираем опцию "Добавить кадр". Закончили работу с этим слоем, ставим на нём замок.

20.Переходим на слой "Переключатели, разблокируем. Становимся на третий кадр, нажимаем правую кнопку мыши и выбираем "Вставить ключевой кадр".  Активируем на монтажном кадре изображение переключателя, открываем панельку "Преобразование" (если нет в списке панелек - открываем из панели "Окно") и задаём угол поворота 60 градусов:

Продолжаем то же на четвёртом кадре: правой кнопкой мыши выбираем "Вставить ключевой кадр", активируем изображение переключателя на монтажном кадре, в панельке "Преобразование" (Преобразовать) задаём угол поворота 120 градусов.

На пятом кадре угол поворота = 180 градусов,

На шестом кадре угол = -120 (минус 120),

На седьмом = -60 (минус 60).

Закончили работу со слоем "Переключатель, блокируем замочком.

21.Разблокируем слой "Кн.Вкл", кликать правой кнопкой на седьмой кадр, выбираем "Добавить кадр". Закрыли на замок.

22.Загружаем картинки: создаём новый слой, имя "Картинки" (хотя могут быть ролики разные). Переносим этот слой на самый низ, под слой "Телик".  Импортируем в библиотеку из папки проекта заготовленные картинки 7_1 ... 7_5.

- На третий кадр вставляем пустой ключевой кадр, Переносим из библиотеки картинку 7_1.Бомба, с помощью стрелок на клавиатуре размещаем примерно по центру экрана телика.

- Четвёртый кадр: "Вставить пустой ключевой кадр", перенести и разместить в экран картинку 7_2...

-Пятый кадр - то же, картинка 7_3, шестой - картинка 7_4, седьмой - картинка 7_5. Закрыли замочек на слой.

23.Теперь создаём новый слой "Каналы" над слоем "Телик": "Вставим ключевой кадр" на второй кадр. То есть, нажали правую кнопку мыши на второй кадр и выбрали "Вставить ключевой кадр" 

24.Сейчас создадим простенькую кнопку: Идём по пути "Вставка - Создать символ - Кнопка - Ок".Название, например, "Переходы". Оказавшись в поле редактирования символа, инструментом "Прямоугольник рисуем прямоугольник без обводки и любым цветом (кроме чёрного, а то не видно будет на чёрном телике). Точка регистрации не важно. Выделяем прямоугольник и в панельке "Свойства" задаём размеры 20/20, "{" и "Y" =0.. Возвращаемся на монтажный кадр.

25.Стоим на втором кадре слоя "Каналы" и переносим из библиотеки на кадр символ кнопки "Переходы", размещаем его на цифре "0". Ещё раз перенос на цифру "1" и таким образом покрываем все цифры. Вот:

26.Теперь впишем каждой из этих кнопок скрипт, который укажет на какой кадр перевести и остановить флешку. Этот код использовали уже для кнопок включения и выключения телика: 

27.Теперь сделаем ещё один круг по этим кнопочкам-квадратикам: выделяем каждую из них и в панели ="Свойства" - Стиль - Альфа канал = задаём нулевое значение.

Телик включается, каналы переключаются. Осталось загрузить музыку. Для этого нам нужно создать фрагменты роликов ( в нашем примере - шесть). Для второго кадра (программа) будет фоновая музыка, на остальных будет звучать определённая в соответствии с нашими картинками (точнее - наоборот: картинка по музыке). А все музыкальные произведения будут загружаться по ссылке с сайта или хостинга.  Я уже писал о том, что со многих ресурсов через время пропадает поддержка музыки в флеше. В том числе и с ЛиРу. Для этих целей устойчиво поддерживается с личного сайта, а в отсутствии такового рекомендую ресурсы:

http://zaycev.net/

http://mp3-pesnja.com/

Кажется сайт Привет.ру тоже нормальный в этом плане.

Для урока я дал во вложении ссылки на музыку с сайта Зайцев.нет

28.Создаём фрагменты роликов с музыкой: Вставка - Создать символ - Фрагмент ролика. Назовём р2 - ролик для второго кадра. В редакторе ролика на первом (единственном) кадре в панели "Действия вписываем скрипт:

var my_sound:Sound = new Sound();

         my_sound.loadSound("Ссылка на аудио", true);

 

Вместо слов "Ссылка на аудио" вставляем ссылку (в примере 6-я ссылка из текстового документа вложения - http://dl.zaycev.net/515319/2215032/fonovaya_muzyka_dlya_podarkov_-_fonovaya_muzyka_dlya_igr_(zaycev.net).mp3. Получаем следующее: 

var my_sound:Sound = new Sound();

        my_sound.loadSound("http://dl.zaycev.net/515319/2215032/fonovaya_muzyka_dlya_podarkov_-_fonovaya_muzyka_dlya_igr_(zaycev.net).mp3", true);

Ролик содержит один слой с одним кадром и скриптом со ссылкой на музыку.

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

30.Создаём следующие пять мувиков (Фрагменты роликов): р3, р4, р5, р6, р7. Скрипт тот же, только ссылки на музыку разные. И будем их размещать, соответственно, на кадры 3 ... 7 слоя "Переключатель". (Можно было создать отдельный слой для этих музроликов, в флешке никаких следов, кроме звука, от них нет).

31.Всё, должно работать!  

Все непонятки выкладывать смело!

По такой схеме создана работа Radio_Retro

Можно варьировать контентом и скриптами, создавая множество разнообразных работ.

Будет время - расскажу как делается такая работа: Открытка. Довольно похоже с выложенным, но есть различия. Может и сами разберётесь.

Вложение: 4167220_telik1.rar

Серия сообщений "МОИ УРОКИ. ":
Часть 1 - Создание флеш-альбома "Листалка" в программе FLIP Flash Album Deluxe 2
Часть 2 - Наложение футажей в фотошопе на временной шкале.2-й урок
...
Часть 34 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок третий.
Часть 35 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок четвёртый.
Часть 36 - Урок создания телика "Cruto_TV". АФ, AS2.
Часть 37 - Урок: Делаем регулятор громкости во флеш, AS3.
Часть 38 - Пользуйтесь своим браузерным плеером!
...
Часть 46 - Пламя свечи на AS3
Часть 47 - Выставляем на ЛиРу картинки с Гугл фото!
Часть 48 - Сглаживание анимации в фотошопе на видео шкале.