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

Macromedia Flash MX: Компьютерный практикум по темам "Работа со слоями ­ масками. Озвучивание ролика" Шарапова Елена Васильевна, учитель информатики Раздел: Информатика Комментарий для учителя: Данный компьютерный практикум предназначен для  выполнения на занятиях элективного курса «Flash: графика, анимация и элементы  программирования» для учащихся старшей ступени после изучения тем «Рисование.  Работа со слоями­масками. Импортирование объекта на сцену. Вставка и импортирование  звука. Программное управление звуком. Библиотека Buttons». Задание практикума Создать поздравительный ролик «С днём учителя» с живым, радужным  поздравлением. Озвучить ролик и поместить на сцену из общей библиотеки готовые  кнопки для остановки, запуска проигрывания звука, а также регулятор громкости  звука. В качестве исходного файла можно взять любой поздравительный рисунок, созданный в  программе Macromedia Flash MX на предыдущих занятиях  или импортировать картинку на сцену. 1. Импорт объекта на сцену  Если вы выбрали импортирование картинки, то для этого:  Создайте новый документ Flash и сохраните его под именем Поздравление.fla  Назовите слой Фон.  Выполните File – Import…  В окне Import укажите файл выбранной картинки и нажмите на кнопку открыть.  Выделите появившуюся на рабочем столе картинку и в панели Properties посмотрите её размеры.  Выделите сцену в панели Properties и установите её размеры такие же, как размеры  картинки. 2. Создание радужной заливки для букв. Если вы выбрали 1 способ, то для этого:  Откройте созданный вами файл (Приложение 1) и сохраните его под  именем Поздравление.fla.  Создайте слой Радуга над слоем Ваза (Фон).  Нарисуйте круг такого размера, чтобы он целиком покрывал сцену.  Удалите его контур (сделав двойной щелчок и нажав клавишу Delete), залейте  радужным градиентом (этот градиент находится в панели Colors). Рисунок 1  Создайте ключевой кадр в 20 позиции слоя Радуга.  В 1 кадре сделайте круг прозрачным: o Выделите круг; o В панели 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 увеличьте размеры текста.  В первом кадре создайте анимацию Motion. Рисунок 7  Выделите 50 позицию во всех слоях расположенных под слоем Радуга и вставьте  обычный кадр клавишей F5.  Посмотрите анимацию. 6. Зацикливание ролика. Осталось сделать, чтобы ролик не повторялся с начала, как только текст вырос, он так и  должен переливаться.  Вставьте в 50 кадр слоя Радуга команду gotoAndPlay(36);(в панели Actions­Frame),  которая переводит проигрывание анимации с 50 кадра на 36 – теперь текст  переливается не прерываясь.  Посмотрите ролик. 7. Вставка, импортирование и синхронизация звука. Добавим в наш ролик песню (например «Школьная пора»).  Создайте новый слой Песня.  Импортируйте в библиотеку звуковой файл shkolnaya_pora.mp3. o Выполните File ­ Import to Library.. o Выберите файл shkolnaya_pora.mp3 o Откройте библиотеку (Windows ­ Library). o Выделите 1 кадр слоя Песня. o Перетащите импортированный звук из библиотеки в первый кадр  слоя Песня. o Выделите первый кадр слоя Песня. o В панели 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: o установите переключатель Export for ActionScript; o впишите в поле 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(); Ролик готов . Задание для самостоятельного выполнения по темам: «Работа со слоями­масками».  «Озвучивание ролика». «Сценарий flash­символа». Создать новогодний ролик с радужной надписью, кнопкой в виде хлопушки из которой  будет лететь разноцветное конфетти и музыкальным сопровождением. Рисунок 12