Macromedia Flash MX: Компьютерный практикум по темам "Работа со слоями - масками. Озвучивание ролика"

Разделы: Информатика

Комментарий для учителя: Данный компьютерный практикум предназначен для выполнения на занятиях элективного курса «Flash: графика, анимация и элементы программирования» для учащихся старшей ступени после изучения тем «Рисование. Работа со слоями-масками. Импортирование объекта на сцену. Вставка и импортирование звука. Программное управление звуком. Библиотека Buttons».

Задание практикума

Создать поздравительный ролик «С днём учителя» с живым, радужным поздравлением. Озвучить ролик и поместить на сцену из общей библиотеки готовые кнопки для остановки, запуска проигрывания звука, а также регулятор громкости звука.

В качестве исходного файла можно взять любой поздравительный рисунок, созданный в программе Macromedia Flash MX на предыдущих занятиях (пример – Приложение 1) или импортировать картинку на сцену.

1. Импорт объекта на сцену

 Если вы выбрали импортирование картинки, то для этого:

  • Создайте новый документ Flash и сохраните его под именем Поздравление.fla
  • Назовите слой Фон.
  • Выполните File – Import…
  • В окне Import укажите файл выбранной картинки и нажмите на кнопку открыть.
  • Выделите появившуюся на рабочем столе картинку и в панели Properties посмотрите её размеры.
  • Выделите сцену в панели Properties и установите её размеры такие же, как размеры картинки.

2. Создание радужной заливки для букв.

Если вы выбрали 1 способ, то для этого:

  • Откройте созданный вами файл (Приложение 1) и сохраните его под именем Поздравление.fla.
  • Создайте слой Радуга над слоем Ваза (Фон).
  • Нарисуйте круг такого размера, чтобы он целиком покрывал сцену.
  • Удалите его контур (сделав двойной щелчок и нажав клавишу Delete), залейте радужным градиентом (этот градиент находится в панели Colors).

Рисунок 1

  • Создайте ключевой кадр в 20 позиции слоя Радуга.
  • В 1 кадре сделайте круг прозрачным:
    • Выделите круг;
    • В панели Color Mixer поочерёдно выделите каждый из семи цветных указателей и устанавливайте для них прозрачность 0.

Рисунок 2

Круг постепенно становится чёрным.

  • Создайте в первом кадре анимацию Shape.
  • Просмотрите ролик – на сцене проявляется радужный круг, постепенно теряя прозрачность.

3. Совмещение Shape и Motion в одном слое.

А теперь сделаем круг вращающимся.

  • В слое Радуга создадим ключевой кадр в 21 позиции.
  • Превратите круг в 21 кадре в группу (Modify-Group).
  • Создайте ключевой кадр в 50 позиции.
  • В 21 кадре создайте анимацию Motion, установите вращение на 2 оборота.

Рисунок 3

  • Посмотрите ролик.

Рисунок 4

4. Слой-маска.

Фон для букв мы создали, а теперь перед этим вращающим радужным кругом мы поставим непрозрачный экран, в котором прорезан текст поздравления. Тогда мы будем видеть только то, что проглядывает сквозь прорези.

Роль такого экрана играет слой-маска, который мы сейчас создадим.

  • Создайте слой Поздравление над слоем Радуга.
  • Щёлкните по имени слоя правой кнопкой мыши и в контекстном меню выберите Mask.

Рисунок 5

Что при этом произошло:

  • Изменились пиктограммы слоя Поздравление и слоя Радуга.
  • Пиктограмма слоя Радуга сдвинулась вправо, что означает, что этот слой является маскируемым.
  • Оба слоя оказались заблокированы.
  • Снимите замок со слоя Поздравление и инструментомText Tool напишите текст поздравления. Например, такой:

С днём учителя!

В прекрасную жизнь, в дорогу открытий
Готовит нас добрый и строгий учитель.
Бываем упрямы, дерзки, шаловливы,
Уроки не учим, бывает подчас.
Спасибо, спасибо , что так терпеливы,
Спасибо за то, что вы любите нас!

  • Подберите подходящую гарнитуру, установите небольшой размер шрифта (около 19-24 пт).
  • Расположите заголовок по центру, а текст поздравления по левому краю.

Рисунок 6

  • Запустите ролик – теперь вы видите переливающийся текст.

5. Анимация маски.

 Сделаем так, чтобы текст постепенно увеличивался.

  • Создайте ключевой кадр в 30 позиции слоя Поздравление.
  • Инструментом Free Transform Tool увеличьте размеры текста.

Рисунок 7

  • В первом кадре создайте анимацию Motion.
  • Выделите 50 позицию во всех слоях расположенных под слоем Радуга и вставьте обычный кадр клавишей F5.
  • Посмотрите анимацию.

6. Зацикливание ролика.

Осталось сделать, чтобы ролик не повторялся с начала, как только текст вырос, он так и должен переливаться.

  • Вставьте в 50 кадр слоя Радуга команду gotoAndPlay(36);(в панели Actions-Frame), которая переводит проигрывание анимации с 50 кадра на 36 – теперь текст переливается не прерываясь.

 Посмотрите ролик (Приложение 2)

7. Вставка, импортирование и синхронизация звука.

Добавим в наш ролик песню (например «Школьная пора»).

  • Создайте новый слой Песня.
  • Импортируйте в библиотеку звуковой файл shkolnaya_pora.mp3.
    • Выполните File - Import to Library..
    • Выберите файл shkolnaya_pora.mp3
    • Откройте библиотеку (Windows - Library).
    • Выделите 1 кадр слоя Песня.
    • Перетащите импортированный звук из библиотеки в первый кадр слоя Песня.
    • Выделите первый кадр слоя Песня.
    • В панели Properties в списке Sync выберите Start и loop: 1.

Рисунок 8

  • Посмотрите ролик.

 8. Библиотека Buttons.

Дадим возможность зрителю нашего ролика изменять громкость звука, останавливать и запускать его проигрывание. Для этого поместим на сцену соответствующие готовые кнопки из общей библиотеки.

  • Выполните Windows - Common - Libraries - Buttons.
  • Раскройте в библиотеке Buttons группу Playback и перетащите на сцену в слой Ваза (Фон) кнопки gel Right, gel Stop.

Рисунок 9

9. Задание идентификатора звуку.

 Мы собираемся управлять проигрыванием песни, поэтому дадим ей имя (идентификатор).

  • Выделите в библиотеке объект shkolnaya_pora.mp3
  • В его контекстном меню выберите Linkage..
  • В окне Linkage Properties:
    • установите переключатель Export for ActionScript;
    • впишите в поле Identifier имя pora.

Рисунок 10

  • Закройте окно кнопкой ОК.

10. Программное управление звуком.

Прежде чем писать сценарии для кнопок, зададим начальные значения.

  • В первый кадр слоя Песня запишите сценарий (в панели Actions - Frame).

a=new Sound();
a.attachSound(“pora”);
vol=100;

Здесь мы создаём экземпляр a объекта Sound (звук), привязываем к нему pora и присваиваем vol, которая будет хранить величину громкости, значение 100.

  • В 50 кадр слоя Песня вставьте ключевой кадр(Insert - Keyframe) и запишите в него сценарий:

gotoAndPlay(2);

Теперь напишем сценарии кнопок:

  • Для первой кнопки Play(предварительно выделите её):

on(release)
a.start();

  • Для второй кнопки Stop(предварительно выделите её):

on(release)
a.stop(“pora”);

  • Запустите ролик и проверьте работу кнопок.

11. Использование готового регулятора громкости.

  • В общей библиотеке кнопок (Windows - Common - Libraries - Buttons) в группе Knobs&Faders найдите клип fader-gain.
  • Вытащите его на сцену в первый кадр слоя Ваза (Фон).

Рисунок 11

  • Дайте регулятору имя voll (выделите его в панели Properties в поле Instance Name впишите имя voll).
  • В сценарий первого кадра вставьте команду:

 voll.sound=new Sound();

Ролик готов (Приложение 3).

Задание для самостоятельного выполнения по темам: «Работа со слоями-масками». «Озвучивание ролика». «Сценарий flash-символа».

Создать новогодний ролик с радужной надписью, кнопкой в виде хлопушки из которой будет лететь разноцветное конфетти и музыкальным сопровождением.

Рисунок 12

Готовый ролик (Приложение 4).