Окончательная сборка

В данном примере мы покажем, как, сведя воедино анимированные GIF-файлы, старый добрый HTML, анимацию в форматах Flash и Director Shockwave, создать на Web интерактивный музыкальный автомат, с помощью которого можно будет управлять потоковой передачей аудиоданных.

1. Наш музыкальный автомат делится на две части: баннер, построенный при помощи HTML, и интерактивную часть, построенную в Director 7 с использованием Shockwave Audio и Flash 3. Для начала в Xara3D мы построили анимированную вращающуюся центральную часть композиции.

2. Чтобы свести полученный анимированный GIF-файл всего к 16 индексированным цветам, мы воспользовались программой GIFCruncher (http://www. gifcruncher.com). Затем оставшуюся часть баннера мы построили в программе Photoshop и разрезали изображение на части, чтобы импортировать его в Web-дизайнерский пакет, работающий по методу drag-and-drop.

3. Куски изображения и анимированный GIF были сведены в один HTML-файл, где при помощи таблиц мы выровняли их друг относительно друга. Такие пакеты, как Macromedia Fireworks или Adobe ImageReady, автоматически сгенерируют для вас необходимый HTML-код.

4. Теперь пришло время оцифровывать звук. Снимем его со стандартной кассетной деки, подключив ее к разъему line in на звуковой карте компьютера. Записывать аудиоклипы будем на частоте 44,1 кГц в виде 16-битных сэмплов, что по качеству близко к записи на CD. После этого сохраним файлы в Windows-формате WAV.

5. Чтобы преобразовать аудиоданные в формат, пригодный для потоковой передачи через Web, придется запустить Director 7. В этом пакете выберите команду Xtras | Convert WAV to SWA. Аббревиатура SWA обозначает Shockwave audio, что на самом деле соответствует MP3.

6. В открывшемся диалоговом окне можно установить нужную битовую скорость компрессии. В документации по программе Director для потоковой передачи аудиоданных через Web рекомендуется параметр 16 бит. В результате качество звучания соответствует длинноволновому радио.

7. Следующая наша остановка — Macromedia Flash 3, где мы построим анимационные фрагменты двух разных типов: интерактивную панель кнопок и комплект анимаций, которые в окончательной презентации будут оживать, когда пользователь нажмет на определенные кнопки.

8. Всего будет три таких анимации, которые приводятся в действие в результате определенных действий. В каждом из этих трех случаев мы сгруппировали изображение и превратили его в графический символ в формате Flash. Затем в разделе Symbol Editing мы его оживили: добавили масштабирование, повороты и перемещения, после чего экспортировали анимации в файлы Shockwave Flash.

9. Создание кнопочной панели — задача несколько более сложная. Нарисуйте небольшой круг, выделите его и преобразуйте в символ, выполнив команду Insert | Create Symbol. В открывшемся диалоговом окне в качестве типа символа укажите тип Button.

10. Анимируйте кнопку в режиме Symbol Editing, придав ей различные формы в зависимости от того, в каком состоянии она находится: курсор над ней, курсор в стороне от нее, кнопка нажата. Для своей кнопки мы создали эти три состояния, воспользовавшись библиотекой символов Button.

11. Теперь пришло время заняться командами Lingo, которые будут выполняться в окончательной презентации, собранной в программе Director. Мы выделили кнопку и выбрали команду Modify | Instance. В разделе Actions диалогового окна Properties в поле Action мы указали вариант Get URL.

12. В поле URL введите текст «event: название_события» (где «название_события» — это название соответствующего Lingo-скрипта, которым мы займемся позднее). Первой кнопке приписано событие «event: tomplay» (обычное состояние), второй — «event funkplay» (нажатое состояние) и так далее. Каждому событию соответствует определенный скрипт (сценарий), по которому будет запускаться определенный музыкальный фрагмент.

13. Теперь эту кнопочную панель Flash 3 со встроенными Lingo-командами нужно экспортировать в формат Shockwave Flash для дальнейшего импорта в Director 7 в качестве составной части общей композиции. На следующем этапе запускаем Director 7 и приступаем к сборке музыкального автомата.

14. Импортируем в Director 7 все составные элементы композиции: анимации ShockWave Flash и другие значки и графические элементы. Затем через меню Insert вставляем файлы Shockwave audio в качестве так называемых мультимедийных элементов Media Elements (несмотря на то что они являются составными частями композиции, они остаются внешними присоединенными файлами).

15. Выделите во временной шкале все, что соответствует кнопочной панели, построенной нами ранее в формате Shockwave Flash, и выберите команду Modify | Sprite | Script. Напишите Lingo-сценарии, о которых мы говорили ранее. По команде «play member <наименование_фрагмента>» они будут запускать музыкальные клипы, записанные в формате Shockwave audio.

16. Кроме того, в сценарий нужно вставить команду «stop member <имя_другого_фрагмента>», чтобы остановить звучание других клипов, пока проигрывается данный. Когда оставшаяся часть презентации будет собрана и на временной шкале будут размещены команды потоковой передачи анимационных и медиа-элементов, нужно будет перед заключительным этапом обновить весь фильм.

17. На предпоследнем этапе нужно выбрать команду File| Save As Shockwave Movie и сохранить все, над чем вы до сих пор работали, в стандартном файле Director в том же каталоге, где хранится файл jukebox.htm (сохранив все связи с внешними файлами). Поскольку графика у нас хранится в компрессированных GIF- и PNG-файлах, результирующий файл займет примерно 40 Kбайт.

18. Теперь с помощью вашего любимого drag-and-drop-редактора поместите окончательный Shockwave-фильм в файл HTML и протестируйте результат в браузерах Netscape Navigator и Internet Explorer. В еще более сложную версию музыкального автомата можно вставить Lingo-управляемые индикаторы объема прокрученного файла и кнопки управления воспроизведением, имитирующие перемотку ленты на магнитофоне.