Архив рубрики «Самоучитель по веб-дизайну. Книга 3»

Глава 7. Анимация, звук и видео 36 7





ПРАКТИКУМ

Формально для отображения Flash-фильма HTML-код использовать не нужно — в том смысле, что большинство браузеров просто откроют и воспроизведут Flash- фильм, если вы наберете адрес самого файла фильма в адресной строке браузера. Однако без HTML-кода, определяющего размеры Flash-фильма, фильм автомати — чески примет высоту и ширину окна браузера. В большинстве случаев будет луч — ше, если определять размеры фильма будете вы, а не посетитель. Встраивая Flash — фильм в HTML-документ, следует принять во внимание различия между браузерами Netscape Navigator и Internet Explorer. Основное различие состоит в том, для воспроизведения в Internet Explorer (и Netscape Navigator 6) вставка Flash —

фильма производится с помощью дескриптора, а для Netscape Navigator

версии 4 Flash-фильмы вставляются с помощью дескриптора . При откры — тии приведенного ниже HTML-кода в Internet Explorer браузер игнорирует деск —

риптор , подготовленный для Netscape Navigator. Аналогично, если вы от — кроете следующий HTML-код в Netscape Navigator, браузер будет игнорировать дескриптор , предусмотренный для Internet Explorer:



codebase=»http://download. macromedia. com/pub/shockwave/cabs/flash/

swflash. cab#version=5,0,0,0″

width=»800″

height=»600″

param name=»quality» value=»high»>

width=»800″

height=»600″

type=»application/x-Shockwave-flash»

pluginspage=»http://www. macromedia. com/shockwave/download/

index. cgi? Pl Prod Version=ShockwaveFlash»>





Для того чтобы воспроизвести Flash-фильм, у браузера должно быть специаль — ное программное обеспечение — модуль воспроизведения Flash. Вместо того чтобы просто не воспроизводить Flash-фильм в случае отсутствия этого модуля в браузе —

ре пользователя, приведенный выше HTML-код задает местонахождение ресурса, откуда браузер может загрузить модуль. Если у пользователя нет модуля воспроиз — ведения Flash, браузер выведет на экран диалоговое окно, предоставляя пользова —

телю возможность выгрузить и установить модуль. Установив модуль, посетители смогут с его помощью просматривать в будущем и другие Flash-анимации. В при —

веденном выше HTML-коде атрибуты codebase и piuginspage сообщают браузеру местонахождение ресурса, откуда посетитель может выгрузить модули для браузе — ров Internet Explorer и Netscape Navigator соответственно. Помещая Flash-анима — цию на Web-сайт, структурируйте HTML-код так, как показано выше, чтобы дать пользователю возможность выгрузить требуемый модуль.

368 Глава 7. Анимация, звук и видео





Атрибуты в приведенном выше HTML-коде выполняют следующие функции:



• widt h И height. Ширин а (width ) И ВЫСОТа (height ) Flash-фиЛЬМа МОГут ВЫ —

ражаться в виде отношения в процентах к ширине и высоте окна браузера

ИЛИ В ПИКСеЛЯХ (дескрипторы И ).



• movie. Местонахождение Flash — фильма, который требуется воспроизвести

(деСКрИПТОр ) .



• data. Местонахождение Flash-фильма, который требуется воспроизвести

(деСКрИПТОр ) .



• ciassid. Идентифицирует элемент управления ActiveX, воспроизводящий

Flash-фильмы (дескриптор ct>). ^ H



• codebase. Местонахождение элементов управления ActiveX. Позволяет брау — зеру выгрузить проигрыватель при отсутствии последнего (дескриптор

).



• src. Идентифицирует местонахождение Flash-фильма (дескриптор

).



• piuginspage. Местонахождение подключаемого модуля Flash. Позволяет браузеру выгрузить проигрыватель при отсутствии последнего (дескриптор

).



• quality. Задает качество Flash-фильма; возможные значения — High (высо- кое), Medium (среднее), Low (низкое) (дескрипторы И ).



• bgcolor. Задает фоновый цвет Flash-фильма (не HTML-страницы) (дескрип —

торы И ).



• type. Сообщает браузеру, какой подключаемый модуль использовать для воспроизведения Flash-фильма.

Можно использовать и дополнительные параметры, которые определяют, когда

фильм будет воспроизведен и сколько раз он будет воспроизведен. Приведенный выше код дает Web-браузеру указание отобразить и воспроизвести фильм

splash. swf в заданной области 800 на 600 пикселей.



Создание Flash-фильма с чистого листа

Работая с Flash, вы, в известном смысле, становитесь кинорежиссером. Скажем, например, Голливудская кинокомпания принимает решение создать новый фильм; одним из первых дел компания наймет режиссера. Режиссер, в свою оче- редь, работает с актерами, командой звукооператоров, художниками-декораторами

и операторами для того, чтобы создать фильм. В Flash вы режиссер, а актеры — это элементы Flash-фильма. В качестве актеров (элементов) может выступать текст, ап —

пликация, фотоизображения, а также звуки и видео.

Глава 7. Анимация, звук и видео 369





Если у вас нет Flash, можно выгрузить 30-дневную пробную версию программ —

ного обеспечения из Web-сайта Macromedia (http://www. macromedia. com/

downloads). Открыв Flash в первый раз, вы увидите сцену, окруженную рабочей

областью. В сцену и рабочую область вы будете помещать «кусочки» (элементы)

анимации. Собственно говоря, воспринимайте сцену как экран, на который «про- ецируется» ваш фильм. Когда элементы находятся на сцене, их видно в фильме; когда же они находятся в рабочей области, они «за сценой» и, следовательно, не видны, как было показано на рис. 7.16.

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

является на сцене и когда он исчезает, то есть покидает сцену. Во временную шка —

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

на сцену слева, пройти по ней и выйти справа, как показано на рис. 7.17.





Чтобы проиллюстрировать, как сцена и временная шкала используются в Flash для генерации движения, создадим простую, состоящую из трех кадров анимацию прыгающего мяча:

1. Начните с открытия в Flash нового документа (File | New (Файл | Создать));

назовите его bounce.

2. Выберите на временной шкале Frame 1 (Кадр 1) (см. предыдущую иллюстра — цию).

3. С помощью инструмента рисования Oval (Овал) из панели инструментов на — рисуйте кружок в верхнем правом углу сцены. Нарисовать правильный круг можно, удерживая во время рисования клавишу SHIFT (цвет кружка значе — ния не имеет).

4. Выберите на временной шкале Frame 2 (Кадр 2) и добавьте опорный кадр

(Insert | Keyframe (Вставить |.Опорный кадр)). В кадре 2 появится маленькая

черная точка, указывающая, что кадр является опорным.

5. С помощью инструмента Move (Переместить) (черная стрелка) из панели инструментов перетащите кружок в центральную нижнюю часть сцены. По — скольку вы перемещаете опорный кадр в кадр 2, вы на самом деле переме — щаете копию мяча. Теперь у вас имеется один мяч в верхнем правом углу и один внизу по центру.

37 0 Глава 7. Анимация, звук и видео





6. Выберите на временной шкале Frame 3 (Кадр 3) и добавьте опорный кадр

(Insert | Keyframe (Вставить | Опорный кадр)). В кадре 3 появится маленькая черная точка, обозначающая еще один опорный кадр.

7. Перетащите кружок, находящийся внизу, в верхний правый угол сцены. По — скольку вы перемещаете опорный кадр в кадр 3, вы перемещаете копию мяча. Теперь у вас имеется три мяча: слева вверху (кадр 1), внизу в центре (кадр 2) и вверху справа (кадр 3).



Чтобы просмотреть отдельные мячи в каждом кадре, щелкните на черных точ- ках кадров 1, 2 и 3. При выборе определенного кадра мячи появляются (по одно — му) на сцене, как показано на рис. 7.18.





Для предварительного просмотра этой простой анимации выберите в меню

Window | Toolbars | Controller (Окно | Панели инструментов | Контроллер) в Windows —

версии или Window | Controller (Окно | Контроллер) в Macintosh-версии. Откроется окно контроллера с элементами управления, похожими на органы управления ви — деомагнитофона. Чтобы просмотреть анимацию, щелкните на кнопке Play (Вос — произвести) в окне контроллера (стрелка вправо). Если вы хотите увидеть фильм,

Глава 7. Анимация, звук и видео 37 1





воспроизводимый в Flash Player, выберите в меню Control | Test Movie (Управление |

Тест фильма). Flash экспортирует фильм в Flash-файл (.swf) и откроет его в Flash

Player.

Чтобы сохранить фильм для использования в Internet, выберите в меню File | Export Movie (Файл | Экспорт фильма). Выберите в качестве формата Flash Player и

дайте файлу имя с расширением .swf. Например, фильм с прыгающим мячом

можно было бы назвать bounce. swf.

В этом примере продемонстрирована лишь малая толика возможностей Flash — анимации. Можно не только создавать простые фигуры опорных кадров и переме — щать их по сцене, но также использовать функции построения промежуточных

изображений для создания всех кадров между опорньгми кадрами й получения плавной анимации. Кроме того, можно добавить больше слоев в палитру времен- ной шкалы и добавить другие объекты, такие как текст и изображения, для созда — ния более сложной презентации. Flash — средство разработки мультимедиа для Internet профессионального качества в полном смысле этого слова.

Чтобы помочь вам в ваших начинаниях с Flash, несколько сайтов в Internet

предлагают уроки по Flash:

Flash Kit http://www. flashkit. com

Flash Planet http : //www. flashplanet. com

Faap. COm http://www. flaap. com

Macromedia http://macromedia-flash-5-infocenter. com /



Построение анимации на основе текста с помощью FlaX

Приложение Macromedia Flash — одно из наиболее мощных средств, с помо — щью которых дизайнеры могут создавать анимацию для Web. К сожалению, по- скольку Flash является столь мощным орудием, разработчику может понадобиться немало времени, чтобы научиться использовать Flash для создания анимации про — фессионального качества.



ПРАКТИКУМ

Пока вы учитесь создавать Flash-анимации, вы можете воспользоваться мощной условно-бесплатной программой, называемой FlaX, с помощью которой можно со — здавать большое количество высококачественных Flash-анимаций, затрачивая на это всего лишь несколько минут. Работая с FlaX, вы просто набираете текстовое сообщение, которое хотите анимировать, например, название своей компании или рекламный лозунг, а затем выбираете требуемый анимационный эффект (см. рис.

7.19). ‘

Создав требуемый эффект, вы можете дать FlaX указание экспортировать ани — мацию в Flash-фильм. FlaX — простой и мощный инструмент создания анимации профессионального качества. Чтобы выгрузить FlaX, посетите Web-сайт компании

GoldShell (www. goldshell. com/flax).

37 2 Глава 7. Анимация, звук и видео





Передача потокового аудио и видео

На AM-, FM — и ХМ-радиоканалах радиостанции передают сигналы всем, кто

настроил свои приемники на их волну. Аналогичным образом телевизионные

станции транслируют передачи по воздушным каналам (или по кабелям) на раз — личных частотах для своей аудитории. Подобно им, Internet-радио — и телестанции

передают сигналы по Internet — «настроиться на волну» можно, посетив соответ — ствующий Web-сайт с помощью браузера. Во Всемирной Паутине существуют ты — сячи Internet-радиостанций, передающих спортивные передачи, новости, музыку и даже ток-шоу. Как показано на рис. 7.20, чтобы «настроиться» на Internet-радиостан — цию, вы просто посещаете Web-страницу сайта с использованием своего браузера.





Глава 7. Анимация, звук и видео 37 3





Более длинный перечень радиостанций можно найти на Web-сайте справочни —

ка радиостанций brs (http://web-radio. fm/). На этом сайте можно просмотреть списки радиостанций по штатам, странам или по формату (джаз, легкая музыка,

ретро, спорт, ток-шоу и так далее). * .

Чтобы обеспечить свою непревзойденность, некоторые сайты предлагают пото — ковое видео, просматривать которое можно в окне на экране, как показано на рис. 7.21. Перечень сайтов, транслирующих телепередачи в Web, можно найти по адресу http://www. tvradioworld. com, http://www. etown. edu/vl/radio. html И http://dmoz. org/Arts/Television/News/.

















$11.

Did Entertainment EditorJoel

SiegeienjoyOcean’s1i? Findout

in his review of the ail-star heist movie.

























Если вам нужно передавать со своего Web-сайта потоковые видео — и аудиодан — ные, вам, в сущности, доступны два варианта размещения своего содержимого в Web. Первый заключается в размещении и передаче данных с привлечением ком- пании, специализирующейся на предоставлении подобных услуг. Обычно подоб — ные компании взимают помесячную оплату, размер которой зависит от объема

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

за данные, передаваемых от вашего имени. Существует несколько компаний, предла- гающих услуги по размещению и трансляции потоковых аудио — и видеоданных:

Bit Streaming Video

Host Express. com

Prime Internet Network

Stream Audio



http://www. bitstreamingvideo. com/index. html

http://www. hostexpress. com/real. html http://www. primenetwork. net/housing. html

http://www. streamaudio. com



Второй и, пожалуй, более интересный вариант (хотя, вероятно, не столь прак- тичный, если вы планируете обеспечивать качественное вещание 24 часа в сутки 7 дней в неделю) — это размещение своих аудио — и видеоданных на собственном ве- щательном сервере. В течение нескольких лет лидером в области потокового ме —

37 4 Глава 7. Анимация, звук и видео





диа является компания RealNetworks. RealNetworks предлагает пробный сервер,

который вы можете загрузить и использовать на своей машине (пробный сервер будет работать в течение одного года, однако будет поддерживать только 25 под — ключений одновременно). Кроме того, у RealNetworks можно приобрести и пол — нофункциональный сервер потокового медиа. •



ПРАКТИКУМ

Чтобы выгрузить и опробовать сервер RealNetworks, посетите Web-сайт

RealNetworks (http://www. reai. com) и следуйте ссылкам, ведущим к «Products

And Services» («Продукция и услуги»); затем воспользуйтесь поиском, чтобы найти

бесплатные продукты («free products»). После завершения выгрузки запустите про — грамму установки, которая установит на вашей машине сервер потокового медиа. Чтобы вам было легче освоиться, в дистрибутив сервера включены несколько

аудио — и видеофрагментов, к которым вы (и другие пользователи) можете подклю — чаться со своего сайта. Для обращения к потоковому медиа в URL-адрес обычно включается номер порта, например, 8080, как показано ниже:



http://www. yoursite. com:8080/ramgen/AudioClipName. rm



«За кулисами» сетевые приложения ссылаются друг на друга с помощью номе —

ров,’которые программисты называют номерами портов (port numbers). HTTP-брау — зер и сервер, например, обращаются друг к другу как к «приложению, выполняю —

щемуся на порте 80″. Номер порта — это просто значение, которое соответствует конкретному приложению. Номер порта 8080 соответствует серверу потокового

медиа Real Media. При включении в URL номера порта 8080 удаленный сервер посылает запросы не на Web-сервер (который находится на порту 80), а, в данном случае, на сервер потокового медиа.



ПРИМЕЧАНИЕ Если ваш сервер защищен брандмауэром, для того, чтобы ваш сайт мог по — сылать потоковое медиа (или получать запросы на потоковое медиа), может потребоваться разрешить сообщениям проходить сквозь брандмауэр к порту 8080.



Создание потокового медиа

Установив сервер потокового медиа, вы, скорее всего, захотите создавать свои собственные файлы потоковых видео — или аудиоданных. Чтобы создать потоковый аудиофайл, пригодный для использования с RealNetworks, можно воспользоваться

такой программой, как Cool Edit, которую можно выгрузить по адресу http:/ /

www. syntrillium. com (СМ. рИС. 7.22).



ПРАКТИКУМ

Работая с Cool Edit, вы просто открываете аудиофайл и затем выбираете в меню

File | Save a Copy As (Файл | Сохранить копию как…), чтобы сохранить файл в формате

.rm (Real Media). Затем, чтобы поместить файл на свой сайт для трансляции, можно

создать ссылку на аудиофрагмент в HTML-файле, как показано ниже;





Запуск аудиофрагмента

Глава 7. Анимация, звук и видео 375









В Internet можно отыскать несколько программ для преобразования видеофай — лов из одного формата в другой, например, из AVI в QuickTime. Сервер потокового медиа RealNetworks поддерживает видеоформаты MPE G и QuickTime, а также фор —

мат Real Video (файлы с расширением .rm). Чтобы поместить в Web-страницу потоко- вое видео, используется ссылка, аналогичная показанной ниже:

Запуск потокового видео





Создание страницы с Web-камерой



Применение Web-камер для передачи видеоданных в режиме реального време — ни в последнее время резко возросло. В прошлом Web-камеры были нацелены на парки, национальные монументы, городские пейзажи и т. п. Сегодня агентства но — востей нацеливают Web-камеры на городские улицы, чтобы предоставить пользовате — лям сиюминутную информацию о состоянии движения, как показано на рис. 7.23.

Многие компании также нашли способы внедрить Web-камеры в свои Web-сай —

ты, тем самым снабдив посетителей весьма полезными инструментами. Например,

многие детские сады сейчас предлагают страницы, позволяющие родителям «заг — лядывать к ним» в течение дня. Другой пример: тюрьма округа Марикопа в Аризо —

не ИСПОЛЬЗует Web-камеру (http://www. crime. com/info/jailcam. html), чтобы

пользователи могли наблюдать за жизнью заключенных в окружной тюрьме. Боль —

шой перечень Web-камер можно найти по адресу http://www. ispy. nl.

376 Глава 7. Анимация, звук и видео





В создании Web-камеры фактически ничего сложного нет. Для начала потребуется выбрать одну из множества различных камер для подключения к своему компью- теру; кроме того, существуют разнообразные варианты подключения камеры. В за — висимости от типа камеры можно подключить камеру через универсальную после —

довательную шину (USB), карту TV-адаптера или даже через последовательный порт. Чтобы устранить необходимость протягивать кабельную проводку от компь — ютера к камере, некоторые компании, напри —

мер, Х10, чей сайт вы можете посетить по

адресу http://www. xio. com, предлагают бес — проводные камеры, подобные той, которая по — казана на рис. 7.24. Такие камеры могут пере- давать сигнал на расстояние до 30 метров приемнику, подключенному непосредственно к компьютеру.

Запуск видео