-Цитатник

Музыкальная открытка. Поздравление от Татьяны - (0)

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

Книги для детей. - (6)

Книги для детей Читаем, слушаем, смотрим книги для детей Нашла интересный сайт для детей. ...

Поздравление от Нади (Навруб) - (1)

С днем рождения Вера! (ВАТ)

Поздравление от Татьяны Литвиновой. - (0)

С Днем рождения, Верочка! (ВАТ) или смотрим здесь Серия сообщений "поздравление": Часть 1...

Поздравление от Нади (Навруб) - (4)

С днем рождения, Вера (ВАТ)

 -Рубрики

 -Поиск по дневнику

Поиск сообщений в ВАТ

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 21.10.2012
Записей: 1568
Комментариев: 20273
Написано: 30177


Урок от Jorjorych

Понедельник, 23 Марта 2015 г. 22:24 + в цитатник
Цитата сообщения Jorjorych Урок создания телика "Cruto_TV". АФ, AS2.


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

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

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

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

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

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

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

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

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

VFL.RU - ваш фотохостинг

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

VFL.RU - ваш фотохостинг

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

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

stop(); 

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

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


VFL.RU - ваш фотохостинг

VFL.RU - ваш фотохостинг

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

VFL.RU - ваш фотохостинг

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

VFL.RU - ваш фотохостинг

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

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

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

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


VFL.RU - ваш фотохостинг

VFL.RU - ваш фотохостинг

VFL.RU - ваш фотохостинг

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

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

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

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

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

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

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

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


VFL.RU - ваш фотохостинг

VFL.RU - ваш фотохостинг

VFL.RU - ваш фотохостинг

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

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

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

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

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

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

                                                                              on (release)

                                                                                 {
                                                                                    gotoAndStop(2);   
                                                                                  } 

                                                                                                 
                                        - стали на второй кадр

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

                                        - во вкладке "Действия" вписываем код:
 
                                                                                                      on (release)
                                                                      {
                                                                        gotoAndStop(1);   
                                                                       } 

 
Можно тестировать. И сохранить проделанную работу путём нажатия одновременно клавиш Ctrl + S (или: Файл - Сохранить). Можно передохнуть, даже закрыть программу. Для продолжения просто открываете FLA и ... вперёд! А если не закрылись, то так же продолжаем. 


А работы ещё много!

17.Закрываем слой "Кн.Вкл" . Создаём слой "Текст" над слоем "Телик" и на втором кадре вставляем ключевой кадр.(напоминаю: правой кнопкой мыши клик на второй кадр слоя и выбрать опцию "Вставить ключевой кадр". Можно пустой ключевой.). Будем писать несколько текстов - "программу передач" по телеканалам

18.Находимся на слое "Текст", втором кадре. Взяли инструмент "Текст", открыли панельку "Свойства", настраиваем шрифт (я взял "Весна"), размер (20-22), цвет (чёрный или ...)

VFL.RU - ваш фотохостинг


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

VFL.RU - ваш фотохостинг

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

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


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

VFL.RU - ваш фотохостинг

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

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

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

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

VFL.RU - ваш фотохостинг


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

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

VFL.RU - ваш фотохостинг

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

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

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

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

VFL.RU - ваш фотохостинг


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

VFL.RU - ваш фотохостинг

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

VFL.RU - ваш фотохостинг

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

VFL.RU - ваш фотохостинг


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

on (release)
         {
          gotoAndStop();  
         }


Только в скобках будем указывать на какой кадр произойдёт переход. По порядку:

- выделяем символ кнопки на цифре "0" , в скобках скрипта прописываем "2"


 on (release)
         {
          gotoAndStop(2);   
         } 


-выделяем кнопку на цифре "1", в скобках прописываем "3"


-на  ............................................. "2"  ..........................................  "4"


-                                                      3                                                5


-                                                      4                                                6


-                                                      5                                                7

а

б

в

г

д

е

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


VFL.RU - ваш фотохостинг

VFL.RU - ваш фотохостинг


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

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 слоя "Переключатель". (Можно было создать отдельный слой для этих музроликов, в флешке никаких следов, кроме звука, от них нет).

VFL.RU - ваш фотохостинг

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

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

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

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

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

 

 

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

Понравилось: 3 пользователям

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку