Программирование с использованием видео и звука

Краткое содержание главы:

Введение в объектно-ориентированное программирование (ООП);

• создание пользовательских компонентов;

• создание универсального проигрывателя.

Если вы все-таки дошли до этой части книги, то, наверняка, уже приоб­рели все навыки, необходимые для эффективной работы в мире Flash MX video. В данном последнем разделе мы попробуем подняться на но­вый уровень, вооружившись всем, чему научились.

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

Без них книгу о видео во Flash MX нельзя считать законченной. Это все равно, что пролежать все дни каникул на солнечном пляже какого — нибудь райского уголка планеты, так и не узнав всей его красоты и экзо­тики. Осилив данный раздел с помощью наших советов, вы в награду получите полностью настраиваемый проигрыватель звука и видео в ка­честве компонента Flash.

Что это значит? Это значит, вы станете обладателем проигрывателя, который можно использовать во всех будущих проектах простым пере­носом с небольшой подстройкой. На рисунке показано то, о чем идет речь.

Перед тем как приступать к реализации проекта, рассмотрим вкрат­це теорию вопроса.

Объекты и объектно-ориентированное программирование

Большинство людей при слове «объект» или «объектно-ориентирован­ный» инстинктивно вспоминают о «программировании». Это происхо­дит во многом благодаря тому, что данные термины в сочетании дают название новой концепции. Принципы объектно-ориентированного программирования (ООП) были заложены в 1960-х годах, когда возник­ла потребность программирования сложных задач более простыми и понятными способами.

Такая потребность с годами все возрастала, что привело не только к разработке множества языков объектно-ориентированного программи­рования, но и к созданию так называемых заготовок drag-and-drop, то есть готовых для использования объектов. Более того, применение та­ких объектов настолько упростило работу, что во многих случаях вовсе отпадает необходимость в программном коде. Одним из больших сто­ронников использования заготовок drag-and-drop является Macromedia Flash. He нужно определять для Flash, что такое фильм, вместо этого вы просто создаете его и используете. Возможно, вы об этом и не подозре­вали, но при каждом использовании фильма вы на самом деле практи­ковались в ООП.

Главная предпосылка здесь в том, что объекты сохраняют связанные с ним данные и программный код. Они привлекают тем, что пользовате-

Лю не нужно знать внутреннее устройство объекта; достаточно знать, какими данными его «заполнить» и к чему это приведет. Такой подход часто описывается как Черный ящик — мы не знаем, как он устроен; нам и не нужно это знать, пока он делает то, что мы от него хотим.

Тем не менее, каждый полезный объект был кем-то запрограммиро­ван. В этой главе мы будем не только использовать их, но и попробуем создать свои многократно используемые объекты — компоненты про­игрывателей.

Простейший объект

Наиболее общим объектом во Flash является Object. Какой бы объект не был создан, он будет наследовать методы (поведение) и свойства (ха­рактеристики) исходного объекта. По сути, любой новый объект пере­нимает «гены» родительского объекта. Например, познакомьтесь с Фре­дом:

Fred = new Object();

Здесь Фред — это новый объект, унаследовавший свойства объекта Object. Пока он еще довольно примитивен. Однако он может превра­титься в новый фильм:

Fred = new MovieCIipO;

Теперь у Фреда появились какая-то индивидуальность. Он приобрел все свойства и методы объекта MovieClip, который в свою очередь унас­ледовал все свойства и параметры объекта Object. Так что Фред стал намного круче. С помощью ActionScript мы можем получить доступ к множеству таких методов, как play, stop и enterFrame, а также к много­численным свойствам, включая _х,_у (определяющим положение Фре­да в кадре) и _width,_height.

До появления версии Macromedia Flash MX новый клип создавался с помощью команды Новый символ в меню Вставить с последующим до­бавлением графических элементов в его временную шкалу. Такой но­вый символ тоже является Объектом в смысле привязанности его про­граммного кода и переменных к соответствующей временной шкале, но он будет более «объектно-ориентированным», когда не требуется ста­тичное изображение.

Динамический Фред

В предыдущих версиях Flash внешний вид фильма из Библиотеки мож­но было изменить с помощью метода attachMovie. Во Flash MX наряду с изменением изображения в фильме также есть возможность динами­чески составлять фильмы. Давайте попробуем создать динамического Фреда и придадим ему какую-нибудь наружность.

1. Создайте новый графический символ с помощью команды Новый символ (New Symbol) в меню Вставить (Insert). Нарисуйте на сцене Фреда на свой вкус:

2. Зайдите в Библиотеку и выделите созданного вами человечка. Из меню Библиотеки (оно появляется при щелчке на значке в верхнем правом углу панели) выберите команду Связи. Установите флажок Экспорт для ActionScript и в поле Название введите «appearance»:

3. Затем для первого кадра основной временной шкалы введите следу­ющий программный код:

Fred = CreateEmptyMovieCIip ("fred", 1); fred. attachMovie ("appearance", "newAppearance", 1);

Теперь наш Фред не только представляет собой объект со свойства­ми и методами объекта MovieClip, но и приобрел внешний вид с на­званием appearance, который создан не с помощью диалогового окна Создать новый символ (Create New Symbol) а взят из графического символа.

4. Сохраните фильм под названием fredl ,fla.

Методы и свойства

Что же такое методы и свойства, и для чего они нужны? Метод, по сути, является функцией, применяемой к объекту, то есть определенным дей­ствием над ним. Свойства — это обычные свойства. Они описывают па­раметры объекта, положение, размеры и т. д.

Самым простым методом, известным всем пользователям Flash, яв­ляется play. Так как в принципе любой объект может быть преобразо­ван в объект MovieClip посредством ActionScript или с помощью коман­ды Новый символ в меню Вставить, то к нему можно применить метод play и другие подключенные методы.

Кроме того, можно создать и применить к копии объекта новый ме­тод, например:

Fred. rotate = function (n) {

This, rotation += n;

};

Так, при каждом обращении к fred. rotate(number) Фред будет пово­рачиваться на заданное число градусов. Эта функция rotate (number) яв­ляется МетоДом, применяемым к Фреду.

Вращение Фреда

Давайте испытаем новый метод.

1. Откройте файл fredl. На, если он еще не открыт после последнего уп­ражнения. Добавьте следующие функции непосредственно за вве­денными ранее строками:

};This. OnEnterFrame = function () { fred. rotate (5);

};

fred. rotate = function (n) { this, rotation += n;

2. Сохраните файл как fred2.fla.

3. Теперь можно протестировать получившийся фильм (Ctrl + Enter), при

Этом вы должны увидеть Фреда, вращающимся по часовой стрелке:

ij iιed2

Если этого не происходит, проверьте в окне Параметры связи (Linkage

Properties), установили ли вы флажок Экспорт (Export) в первый кадр.

Понятно, что Фреда заставляет вращаться его свойство _rotation. Свойство является определенной характеристикой, принимающей раз­личные значения для разных экземпляров объекта. Так, все объекты MovieClip имеют свойство _rotation, но его значение уникально для каж­дого экземпляра. Поэтому если, например, fred._rotationравно 5, то это вовсе не значит, что и fred2._rotationтакже должно равняться 5. Классы и наследование

Как мы ранее выяснили, наследование означает простую передачу «ге­нов» от одного объекта другому. Мы уже знаем, что такими генами яв­ляются методы и свойства, которые наследуются от объекта Object, или выражаясь точнее, Класса Object. В случае с Фредом мы можем превра­тить его в класс, из которого позже можно создать двойников Фреда. Знакомьтесь, Фред Младший

1. Откройте новый фильм и введите для первого кадра основной вре­менной шкалы следующий программный код:

Fred = function () {

This. x = 100

};

Как правило, названия классов начинают с заглавной буквы, а названия элементов Данного класса — со строчной буквы. Это помогает легко их различать в ActionScript.

В нашем случае Fred это простейший класс, но при создании нового

Фреда (new FredQ) мы увидим, что он наследует свойства своего «ро­дителя».

2.

fredjr = new fred (); trace("fredjr.x ='' + fredjr._x);

Следом добавьте следующие строчки:

3. Теперь проверьте свой фильм и просмотрите окно Выход (Output)

Как видите, координата _х объекта fredJr тоже равна ЮО, так как она унаследовала данное свойство у класса Fred.

4. Сохраните фильм как fred3.fla.

Прототипы

Одним из последних приемов, которые мы рассмотрим при работе с объектами, будет установка цепочки наследования с использованием свойств prototype и _proto_. Они позволяют определить самый верх­ний уровень любого класса. В нашем случае объект Object использует прототипы для определения класса. Эти прототипы задают объект MovieClip и, в конечном счете, Фреда тоже.

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

Переделки

1. Для начала откройте новый фильм. Вновь создайте Фреда путем подклю­чения следующей строки ActionScript к первому кадру имеющегося слоя:

Fred = new MovieClip();

2. Под этой строкой добавьте к классу MovieClip следующий прототип:

MovieClip. prototype. pickupLine = function () {

Trace("Would you like my objects in your Timeline?");

);

Теперь новый метод pickupLine наследуется всеми объектами типа

MovieClip, в том числе и нашим Фредом.

3. Для проверки вышесказанного нужно приписать еще одну строку:

Fred. pickupLine();

4. Просмотрите фильм (Ctrl + Enter) и содержимое окна Выход:

Фред думает, что он в этом смысле стал уникальным. Это не так, но говорить ему не будем. Дело в том, что новый метод pickupLine дос­тупен всем объектам класса MovieClip. Поэтому если мы запишем:

Bob = new MovieClip(); то после записи:

Bob. pickupUne();

Будет несколько таких же Фредов.

5. Сохраните свой фильм как fred4.fla.

Область действия

Последний прием, который мы должны освоить для эффективной рабо­ты с объектами, связан с понятием области действия. Оно, по сути, оз­начает точку (во временной шкале), в которой объявлен данный объект. К нему всегда можно обратиться, указав на его собственное «местона­хождение» (this). Раньше, когда мы заставляли Фреда вращаться, вы, наверное, заметили, что мы обращались к нему как this при объявлении нового метода rotate. Мы вводили такую строку:

This√otation+=n;

До тех пор, пока мы находимся внутри функции fred. rotate, мы зна­ем, что все действия совершаются над fred. Поэтому мы можем обра­щаться к нему как к this. Этот прием широко используется при задании структуры временной шкалы Flash. А так как, чаще всего, временная шкала устанавливается вместе с фильмами, то к ним можно также обра­щаться посредством this.

Основная временная шкала, кроме возможности использования ссылки this, имеет еще и собственный уникальный идентификатор _root. На каком бы уровне в иерархии вложенных объектов вы не находились, вы всегда можете обратиться к основной временной шкале посредством _root. Такой подход очень похож на указание «абсолютного» пути к файлам на сервере: не важно, в какой из вложенных папок расположен файл, если ссылка начи­нается с корневого каталога (Http://www. LyuboeImyaDomena. com/).

Во Flash MX Используется новый идентификатор _Global, Который мож­но использовать Для заДания переменной или функции так, чтобы они были Доступны с Любой Временной шкалы.

И, наконец, последний уникальный идентификатор, задающий об­ласть действия, это _parent. Где бы в целевом пути вы не использовали ссылку _parent, это всегда будет означать обращение к объекту, содер- жащемуданный объект. Так, если, например, мы поместим новый фильм в существующий фильм, то новый фильм будет обращаться к существу­ющему фильму посредством _parent.

Определение области действия объектов

Проводник фильмов и кнопка Вставить целевой путь (Insert a target path) (на панели Действия) очень полезны в тех случаях, когда нужно задать область действия или целевой путь объектов.

Проводник фильмов (Movie Explorer) (команда Проводник фильмов в меню Окно) не только помогает организовать размещение всех состав­ных частей в фильме Flash, но также отображает весь программный код ActionScript, подключенный к фильму, и расположение объектов, вклю­ченных в другие объекты.

Кроме того, есть возможность поиска какого-либо слова среди объек­тов с помощью поля Найти.

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

объекту, начиная с корневой временной шкалы. для эффективного кон,кнопка вставить целевой путь

троля над клипами, загруженными фильмами или кнопками, необходи­мо уметь задавать целевой путь в ActionScript. Зная его, всегда легко най­ти объекты и задать относительные связи между ними:

Компоненты

Во Flash MX включен новый объект под названием компонент. Компо­нентами называют сложные клипы, имеющие установленные свойства и уникальный набор методов ActionScript, позволяющих устанавливать какие-то параметры и дополнительные опции во время прогона файла.

Во Flash MX есть несколько готовых компонентов на панели Компо­ненты (команда Компоненты в меню Окно):

В последнее время развивается тенденция создания полностью объек­тно-ориентированных компонентов, что справедливо и по отношению ко Flash MX. Их внешний вид можно настроить так, чтобы они вписыва­лись в общую концепцию дизайна сайта. Значения переменных для ком­понентов устанавливаются на панели Параметры или в соответствую­щих интерфейсных меню.

Компонент ListBox

Теперь, когда мы уже знаем, что такое компоненты, можно рассмотреть один из них подробнее. Компонент ListBox предоставляет готовые окна списка с полосой прокрутки, которые можно вставить в фильм Flash.

Если вы уже уверенно чувствуете себя в объектно-ориентированном программировании и довольно далеко продвинулись в ActionScript, то этот компонент поможет вам заметно облегчить создание классов и орга­низацию программных кодов.

Давайте рассмотрим следующие возможности: настраиваемые вне­шние оболочки, разделение классов на общие и частные, а также па­нель Определение компонентов.

1. Создайте новый фильм. Откройте панели Библиотека (F 11) и Компо­ненты (Ctrl + F7), если они не открыты по умолчанию.

2. Затем перетащите один экземпляр ListBox на сцену.

3. Обратите внимание, что при этом в Библиотеку добавилась папка

Flash UI Components. Она содержит все элементы для компонентов

ListBox и ScrollBar:

4. Теперь откройте папку Component Skins, и в ней перейдите к папке FScrollBar Skins.

5. Дважды щелкните на значке fsb_downArrow для перехода в режим Редактирования символов. Если теперь вы щелкните на первом кад­ре слоя README и откроете панель Действия (F9), то будет отобра­жен следующий код:

ComponentTegisterSkinEIement (arrow_mc, "arrow");

ComponentregisterSkinElement (face mc, "face");

ComponentJegisterSkinBement (shadowmc, "shadow"); component. TegisterSkinBement {darkshadow_mc, "darkshadow"); ComponentJegisterSkinBement (highlight_mc, "highlight"); FamponentregfetefSkihBement (highlight3D mc, "highlight3D");

RegisterSkinElement это метод, позволяющий компоненту перенять свойства, установленные для объекта globalStyleFormat. Изменением свойств такого глобального объекта можно менять соответствующие свой­ства всех компонентов (например, цвет, как это показано на рисунке):

Одно из больших преимуществ использования компонентов связано с панелью Определение компонента (Component Definition). Для ее от­крытия нужно выбрать один из компонентов, а затем щелкнуть на пун­кте Определение компонента из меню Библиотеки. На этой панели мож­но задать определенные значения переменным или предоставить пользователю возможность выбора из массива опций, поэтому каждый экземпляр данного компонента может быть легко настроен:

Компонент проигрыватель

И вот, наконец, наступилмомент, которого вы ждали: в оставшейся час — тиданной главы мы попробуем создать новый компонент из проигрыва­теля звуковых и видео объектов. Речь идет о мультимедийном проигры­вателе для загрузки файлов видео и MP3. В центральном окне просмот­ра будет отображаться фильм, а в случае звуковых файлов — визуаль­ное представление звука в форме графического эквалайзера:

bentto-sopo рго-1627 c4u ■ cu-nikecooi-i drloopsl-drtoops-: dealtn>b⅛>πic 1135$ i,els8-118jnov

Структура данного компонента создана с использованием объектов. Они организованы таким образом, что наглядно иллюстрируют как ви­зуальную, так и программную стратегию классификации объектов, что мы уже применяли при объектно-ориентированном программировании нашего плеера:

Sound-video player

^1 I

FoRegrOundync contRol sync videosync equal izerync lists (x4!background

ES W ! E ES Sk ES

i Γ,stopync playync,high!ight3dync darkshadowync arrov_, 1 i 1 1,panync voluineync p2 aybaekyne

В дальнейшем, когда все объекты будут созданы, вы в любой момент можете обратиться к показанной диаграмме для их правильного разме­щения и создания связей между ними, а также для подгонки их внешне­го вида в соответствии с общим видом проигрывателя. На рисунке ука­заны все объекты и необходимые для их создания графические элемен­ты (которые, впрочем, вы при желании можете изменить для разработки своего дизайна). Весь программный код и исходные файлы для этой гла­вы можно скачать с Www. friendsofed. com.

Трудности при объектно-ориентированной разработке могут возник­нуть из-за того, что зачастую объекты по отдельности, то есть вне связи с другими объектами из показанного дерева взаимодействий, работают очень плохо или совсем не работают. Поэтому нам придется действо­вать почти наудачу, так как проверить работоспособность объектов мы сможем только после создания всего фильма целиком.

Разработку начнем с «малых» объектов, таких как кнопки Stop И Play, Регуляторы Pan И Volume, Индикатор Playback, А также Fader И Graph. Затем мы их объединим в два объекта Controls И Equalizer. И, наконец, из двух последних мы создадим наш SoundVideo Player.

Фильм для кнопки Stop

Сразу же возьмемся за дело.

1. Откройте новый фильм и создайте в нем новый клип с именем stop.

2. Переименуйте слой в graphics, и в первом кадре на сцене нарисуйте то, что, по-вашему, может быть кнопкой (или можно скопировать нашу кнопку). При этом ее правый верхний угол должен иметь коор­динаты (0,0):

3. Вставьте во второй кадр слоя graphics ключевой кадр и немного ви­доизмените изображение кнопки так, чтобы было понятно, что она находится в нажатом положении:

4. Вставьте новый слой с названием actions, добавьте во второй кадр ключевой кадр и подключите к нему действие stop.

Кнопка стоп является одним из основных объектов для звуковых и видеопроигрывателей. Тем не менее, она сама тоже в свою очередь состоит из объектов, а точнее — из клипов фильмов. Все они уже ав­томатически помещаются в библиотеку при перетаскивании компо­нента ListBoxна сцену. Параметры цвета для этих клипов, как это было

Выше отмечено, будут соответствовать значениям, установленным для объекта GlobalStyleFormat.

5. Откройте панель Компоненты и перетащите компонент ListBox на сцену. Теперь выделите его и удалите. При этом все клипы, необхо­димые для кнопок, останутся в Библиотеке.

6. На панели Действия подключите к первому кадру слоя layer следую­Щий код:

Function pressActions () { this. gotoAndStop (2);

}

Function TeieaseActions () { parent. parent. stopS (); this. gotoAndStop (1);

_parent. play_mc. gotoAndStop (1);

}

Здесь функция pressActions переводит головку проигрывателя на вто­рой кадр клипа так, чтобы отобразить рисунок, соответствующий нажатой кнопке. Затем функция releaseActions вновь переносит вре­менную шкалу клипа stop в начало, то есть в первый кадр. То же про­исходит и со шкалой родительского клипа. Строка _parent. stops(); запускает в проигрывателе метод, который будет отвечать за оста­новку воспроизведения.

Во Flash MXДля созДания кнопки можно использовать не только объект Button. Теперь сами клипы могут реагировать на щелчки пользователя так же, как обычные кнопки. Именно этим мы только что и воспользо­вались в клипе Stop.

7. К первому кадру слоя layer подключите следующий код:

This. onPress = pressActions; this. o∩Release = releaseActions; this. o∩ReleaseOutside = releaseActions; stop ();

Как видите, теперь в ответ на событие onPress будет включаться фун­кция pressActions, а на события onRelease и onReleaseOutside — фун­кция releaseActions.

Вот и все, мы создали первый объект проигрывателя. Перед тем, как продолжить работу, проверьте, совпадают ли ваши установки для вре­менной шкалы с нашими:

[ □ ii,∣ ’ ɪ

Фильм для кнопки play

Теперь попробуем создать кнопку play для управления воспроизве­дением файлов проигрывателем. При этом она должна выполнять два действия, то есть еще в качестве кнопки pause. При воспроизведении файла нажатием кнопки play пользователь сможет временно приоста­новить его проигрывание,.;, при повторном нажатии — возобновить вос­произведение, как в обычных CD или DVD проигрывателях.

Создание клипа play во многом схоже с клипом stop, за исключением того, что теперь он должен вдобавок содержать кнопку паузы. При от­пускании кнопки play головка проигрывателя будет переходить на изоб­ражение кнопки паузы.

Так как клип play также содержит кнопку паузы, то нужно использо­вать выражение if для проверки того, что кнопке в данный момент соот­ветствует кадр кнопки play или кадр кнопки pause.

1. Создайте новый клип с именем play и добавьте во временную шкалу новый слой. Как и в случае с кнопкой stop, назовите слои actions и graphics.

2. В первом кадре слоя graphics нарисуйте кнопку воспроизведения, проверив при этом, что ее верхний левый угол имеет координаты (0,0).

3. Вставьте в каждый слой по три ключевых кадра, а затем во втором кадре слоя graphics перерисуйте кнопку так, чтобы было видно, что она выделена.

4. В третьем кадре того же слоя измените рисунок на изображение кноп­ки паузы в не нажатом положении.

5. Затем в кадре 4 немного видоизмените ее, как при нажатии кнопки.

Для ясности можно посмотреть на рисунке все четыре изображения и соответствующие им параметры временной шкалы:

А в

А»а

6. К первому кадру слоя actions подключите следующий код для функ­ций pressActions и releaseActions:

Function pressActions () {

If (this._currentframe == 1) {

This. gotoAndStop (2);

} else if == 3) {

This. gotoAndStop (4);

}

Function pressActions (} {

If (this. Currentframe == 2) {

_parent._parent. playS (); this. gotoAndStop (3);

} else if (this._currentframe == 4) {

7. К оставшимся трем кадрам слоя actions подключите действие stop. Временная шкала для клипа play должна выглядеть так:

Фильм Pan

I

Controls тс

Videos тс

IB

IB

J

~Γ^

I

Play-mc Рап_тс

Volume_mc

IB

I

IB

I

IB-

I

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

1. Как и прежде, начните с создания нового клипа с именем pan.

2. Переименуйте слой в graphics и нарисуйте на его сцене тонкий пус­той прямоугольник шириной около 80 пикселей. Он будет отображать дорожку для движения бегунка регулятора.

3. Добавьте новый слой с именем text и с помощью инструмента Текст, находящегося на стандартной панели, поместите по краям созданной дорожки буквы ‘L’ и ‘R’, как показано на рисунке. Вооружитесь во­ображением, например, для нанесения меток вдоль дорожки.

4. Вставьте еще один новый слой с названием slider и нарисуйте в пер­вом кадре фигуру, которую будущий пользователь будет перемещать в качестве бегунка регулятора баланса звука:

5. Затем выделите изображение бегунка и преобразуйте его в клип (Вставить > Преобразовать в символ) под названием horSlider (сокра­щенно от horizontal slider — горизонтальный бегунок, в отличие от vertical slider — вертикального бегунка, который мы создадим для управления громкостью звука). Не забудьте проверить, что его верх­ний левый угол имеет координаты (0,0).

6. Во временной шкале фильма pan выделите на сцене клип horSlider, и на панели Параметры задайте имя копии horSlider_mc:

Добавление символов ‘_тс’кконцу имени копии фильма в Flash MXnpu Водит к тому, на панели Действия при введении точки сразу после име­ни копии будет появляться всплывающая подсказка со свойствами дан­ного объекта MovieClip.

Теперь добавим немного ActionScript, чтобы все это заработало.

7. Создайте новый слой actions и в его первом кадре введите следую­щий код:

Function getPan () {

Var x = horSlider_mc._x;

If (x>=35) {

(pan = (x-35)∕35);

} else {

(pan= — (35-x)∕35);

}return pan;

}

Function pressAction () {

HorSlider_mc. startDrag (false, 0, horSlidermc._y, 69, horSlidermc. y); this. onAnterFrame = function () {

_parent._parent. adjPan (getPan 0*100);

Function feleaseActions ()

HorSlider mc. startDrag ();

}

This. onPress = pressAction; this. onRelease = releaseAction; this. onReleaseOutside = releaseAction;

Вы, вероятно, уже заметили, что структура этого программного кода аналогична кодам фильмов stop и play. Главная функциональная разни­ца заключается в том, что бегунок управления балансом звука, то есть клип horSlider, должен быть подвижным. Кроме того, нужно определять долю расстояния от текущего положения бегунка до правого или левого конца дорожки для того, чтобы объект Sound после обработки этих дан­ных соответствующим образом установил баланс звука между канала­ми.

Позже мы еще раз воспользуемся данным приемом при создании регулятора громкости объекта Sound.

Теперь давайте рассмотрим в деталях, как это будет работать.

Во введенном вами коде для фильма pan в функции pressAction есть следующая строка:

HorSlider_mc. startDrag (false, 0, horSlider_mc._y, 69, horSlider_mc._y);

Интервал, вдоль которого пользователь может перемещать бегунок, ограничивается числами 0 и 69. Это означает, что клип horSlider можно будет перемещать вдоль оси X в диапазоне от 0 до 69. Так как сам регу­лятор pan имеет горизонтальное положение, то мы должны исключить возможность перемещения бегунка по вертикали. Это достигается ус­тановкой одного и того же значения horSIider_mc._yверхней и нижней координатам.

Сразу после указанной строки записана следующая функция:

This. onAnterFrame = function () {

Parent._parent. adjPan (getPan 0*100);

}; ‘ ^

В ней обработчик enterFrame передает данные о текущем положе­нии бегунка в родительский клип _parent._parent — как вы помните, им является сам создаваемый нами проигрыватель (можно освежить все в памяти, вернувшись к иерархической структуре в самом начале дан­ного задания). Следующая функция getPan непосредственно вычисляет это значение в процентном отношении и возвращает его.

Во Flash MXПоявилась возможность установки обработчиков событий в фильмах с любой временной шкалы, как в нашем случае с обработчи­ком OnEnterFrame.

Фильм Volume

I Г

Controls me Vkteos Тс

B’ IB

~l I I

Play_mc pan_mc volume_mc

Б б IS

Теперь попробуем создать еще один объект в виде Регулятора, который также станет частью пользовательского интерфейса. Он будет очень похож на только что с озданный нами клип регулятора баланса звука pan за исключением того, что он должен располагаться вертикально и по­зволять пользователю управлять Громкостью Воспроизводимого звука.

1 • Создайте новый фильм, преобразуйте его в символ, назовите volume и верхний левый угол поместите в точку (0,0).

2. Переименуйте имеющийся слой в graphics и нарисуйте на нем тон­кий пустой вертикально расположенный прямоугольниквысотой 91 пикселей, который станетдорожкой движения бегунка. Верхний ле­вый угол его должен по оси у иметь координату 21.

Это небольшое пространство в отличие от регулятора pan мы остав­ляем для помещения надписи «VOL» (громкость) над прямоугольни­ком.

3. Добавьте новый слой, назовите его text и с помощью инструмента Текст введите ‘VOL1 в верхней части регулятора.

4. На этом же слое text нанесите шкалу с цифрами вдоль дорожки для оценки уровня громкости:

VOL

-WO

-90

-80

-70

-ео

-50

-40

-30

-со

-IQ

5. Затем вставьте новый слой с именем slider и убедитесь, что он явля­ется верхним слоем на вашем монтажном столе. На сцену первого кадра этого слоя перетащите копию фильма horSlider из библиотеки.

6. Выделите horSlider и нажмите F8 для преобразования в символ типа фильм, и назовите его verSlider:

7. Дважды щелкните на фильме verSlider на сцене для перехода в ре­жим Править символы (Edit Symbols). Сочетанием клавиш

Ctrl + Shift + 9 поверните его на угол 90 градусов вдоль часовой стрел­ки так, чтобы он стал похож на вертикальный бегунок. При этом его верхний левый угол по-прежнему должен иметь координаты (0,0).

8. Вернитесь в режим правки для фильма volume и установите бегунок verSlider в верхней части дорожки регулятора:

9. Выделите verSlider, и на панели Параметры введите имя копии verSlider тс:

Это весь графический материал, который нам нужен. Пойдем даль­ше — воспользуемся ActionScript для того, чтобы все нарисованное нами позволило управлять громкостью звука.

10. Вставьте новый слой с названием actions. Откройте панель Действия (F9) и, выделив первый кадр слоя actions, введите следующий код:

Function getVol () {

Return ()112-verSlider_mc._y)/91)*100;

}

Как видите, к фильму volume мы применили функцию getVol в про­тивоположность уже использованной нами функции getPan. Во вто­рой строке вычисляется отношение текущего значения свойства _у для verSlider_mc ко всей длине дорожки.

11. Теперь тут же добавьте следующий код:

Function pressActions () {

VerSIider mc-StartDrag (false, verSlider_mc._x, 21, verSlider mc. x, 112);

This, onEπterFrame = function () {

_parent._parent. adjVol(getVol ());

}; ‘

1

Здесь функция StartDrag устанавливает ограничения на возможные перемещения объекта. В данном случае пользователь не может пере­двигать verSlider_mc вдоль горизонтальной оси, в то время как по вертикали его координата может меняться от 21 до 112.

12. Наконец, последняя часть, которую нужно добавить:

Function TeIeaseActions () { verSlider mc. stopDrag ();

}

This. onPress = pressActions; this. onRelease = releaseActions; this. o∩ReleaseOutside = releaseActions;

Есть еще один объект, который нам осталось создать перед тем, как собрать все средства управления вместе. Речь идет об индикаторе вос­произведения, то есть о горизонтальной полосе, увеличивающей свою длину по мере проигрывания звукового или видео файла. Он дает пользо­вателю возможность видеть, какая часть файла уже пройдена, и какая — осталась:

Индикатор воспроизведения

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

2. Переименуйте слой в actions, а затем вставьте два новых слоя с име­нами edges и length.

3. В первом кадре слоя edges нарисуйте тонкий пустой прямоугольник, который будет контуром, внутри которого должен перемещаться

Индикатор. Установите для него ширину 100 пикселей, высоту 3 пик­селя, а координаты верхнего левого угла — (0,0).

4. В первом кадре слоя length нарисуйте очень маленький прямоуголь­ник в виде штришка высотой 2,3 и шириной 1 пиксель непосредствен­но с внутренней стороны левого края уже имеющегося контура.

5. Выделив этот маленький прямоугольник, с помощью клавиши F8 пре­образуйте его в символ типа фильм под именем ‘length’. Убедитесь, что его верхний левый угол расположен в точке (0,0).

6. Вернитесь к фильму SoundLength и откройте панель Параметры (Ctrl + F3). Введите имя копии bar_mc.

7. И, наконец, примените действие stop к первому кадру слоя actions.

Вам, должно быть, интересно, почему индикатор (фильм length) име­ет такую незначительную ширину — он почти незаметен, не так ли? Он не виден, когда никакой файл не воспроизводится, но при воспроизве­дении Flash будет изменять свойство _width (ширина) копии bar_mc объекта length в соответствии с долей уже проигранной на данный мо­мент части файла. Поэтому ширина прямоугольника, то есть фильма length, будет меняться так, чтобы отображать, какая часть воспроизво­димого файла уже пройдена.

Соответствующий код ActionScript к клипу length мы подключим поз­же, при окончательной сборке фильма sound-video player. А сейчас со­берем вместе все объекты, которые мы до этого момента создали для получения пользовательского интерфейса.

Создание клипа Controls

После данного раздела преимущества объектно-ориентированной разработки станут еще более очевидными. Мы соберем вместе все со­зданные в этой главе объекты в один законченный фильм Controls, Кото­рый будет выполнять функции пользовательского интерфейса для на­шего проигрывателя:

1. Начните с создания нового символа с именем ‘controls’.

2. В этом фильме controls к установленному по умолчанию слою добавь­те еще 5 новых, и назовите их ‘actions’, ‘play_stop’, ‘pan’, ‘volume’, ‘indicatorbar’ и ‘viewer’ по порядку снизу вверх.

Перед размещением объектов на сцене нужно определиться с фор­мой и размерами всего проигрывателя в целом так, чтобы затем ра­ционально решить вопрос о положении каждого из них. Поэтому вна­чале нарисуем окно просмотра для компонента player.

3. В первом кадре слоя viewer нарисуйте контур в виде окна, в котором фильм будет воспроизводиться. Форму контуру можете задать лю­бую по желанию, а можете воспользоваться нашим файлом (с разме­рами и координатами) в качестве шаблона:

4. Затем перетащите из Библиотеки копии каждого из фильмов play, stop, pan, volume и soundLength в первые кадры соответственно на­званных слоев (soundLength нужно перетащить на слой indicator bar).

5. Разместите объекты в окне просмотра. В нашем исходном файле они имеют координаты:

Play (157.8, 162.7) Stop (142.2, 162.7} pan (36.0, 166.7)

• volume (176.2, 57.1)

Indicator bar (36.5, 163.7)

Теперь, когда объекты расставлены по местам, вновь обратимся к ActionScript, с помощью которого мы установим их связь компонен­том sound-video player.

Так как к каждому из этих объектов мы будем обращаться из фильма sound-video player (являющегося для них родительским фильмом _parent_parent), то нужно задать для них имена копий.

6. С помощью панели Параметры введите имена копий объектов ‘play-mc’, ‘stop_mc’, ‘pan-mc’, ‘volume-mc’, а для фильма SoundLength —

7. И, наконец, в первом кадре слоя actions введите следующий код:

Stopmc-Visible = false; playmc._visible = false; stop {);

Он делает невидимыми кнопки play и stop в начале фильма. Эти кноп­ки становятся видимыми после того, как звуковой или видеофайл заг­рузится и будет готов для воспроизведения. Программный код, кото­рый это выполняет, будет добавлен позже, когда мы составим законченный компонент.

А теперь, после создания фильма controls, пойдем дальше — постро­им следующий объект нашего проигрывателя, а именно, Графический эквалайзер.

Эквалайзер

Под эквалайзером (часто называемым графическим эквалайзером) по­нимают визуальное представление частотного диапазона проигрывае­мого в данный момент звукового файла. В нашем случае мы будем со­здавать не совсем то, что имеется в виду, и что вы увидели бы на своей аудиосистеме. Тем не менее, это выглядит достаточно эффектно при подключении ActionScript. В итоге мы должны примерно следующее:

Ядро эквалайзера состоит из 20 фильмов. Десять фильмов будут ото­бражать верхние колонки, а еще десять — нижние. Если вы обратитесь к нашему файлу, то заметите, что они очень маленькие, как это показа­но на рисунке, однако их высота будет изменяться в соответствии с ко­мандами ActionScript в фоновом режиме одновременно с воспроизво­димой музыкой.

TO t! t2 t3 t4 t5 t6 t8 t9

ЬО Ы Ь2 ЬЗ Ь4 Ь5 Ь6 Ь7 Ь8 Ь9

Объекты для эквалайзера

Начнем с создания Клипов Top и Bar, А затем просто снимем с них по несколько копий с размещением вдоль нижней кромки родительского объекта Bar Graph. В итоге мы должны получить примерно следующую иерархическую цепочку объектов:

1 t

Equalizer_mc

Итак, поехали.

1. Создайте новый фильм под названием ’top’, поместив его в верхнем левом углу сцены.

2. В первом кадре установленного по умолчанию слоя нарисуйте пус­той прямоугольник размером 15×2,5, указав при этом для его верхне­го левого угла координаты (0,0).

3. Создайте в верхнем левом углу еще один новый фильм и назовите его bar.

4. Нарисуйте прямоугольник размером 15×1.

5. Откройте Микшер цвета (Shift + F9) и измените значение Альфа на 60%.

6. Вставьте новый слой с именем ‘actions’, и в его первом кадре введите следующую функцию:

Function getNum (n) {

Return n. name. substr(1,1)

J

Как мы уже говорили, с фильма bar будут сняты копии так, что все десять похожих объектов разместятся вдоль всей ширины эквалай­зера. При этом каждой копии мы дадим соответствующие имена ЬО, Ы, Ь2 и так далее до Ь9. Введенная нами функция getNum(n)путем обращения ко второму символу в имени копии фильма bar определя­ет ее номер.

7. Теперь следом введите еще одну функцию:

Function inv (n) {

Varx = int 9getNum(n));

Return -(V(×+1)))’>

}

Она вычисляет значение _у для высоты фильма bar и координату _у для соответствующего фильма top. Теперь при воспроизведении зву­кового файла верхние края этих фильмов образуют гладкую кривую, снижающуюся слева направо, как бы напоминая стереосистему, в ко­торой усилено звучание басов по сравнению с высокими частотами.

8. Далее добавьте следующие строки:

Function adjBar () {

//adjust bottoms var StartY = this._y;

Var dis = — startY -parent. amplityde ⅛dj:

(!_parent. stopPlay) ? (this._y += dis*_parentfrc+random (11) — 5): this._y-;

Здесь выполняется вся работа по изменению высоты фильма bar про­порционально амплитуде (громкости) воспроизводимого звука. Если вы выделите на сцене прямоугольник, изображающий объект bar, и увеличите значение его высоты на панели Параметры, то заметите, что размер возрастет с его нижней стороны.

Функция adjBar вначале вычисляет новое значение высоты для bar, a затем определяет, каким образом его разместить так, чтобы нижний край клипа по-прежнему оставался выровненным вдоль прямой. Она прибавляет значение переменной dis (расстояние) к высоте клипа, если эта высота находится ниже текущей амплитуды, или вычитает единицу, если она находится ниже текущей амплитуды.

Вы можете спросить: зачем также определять значение random (11) -5 в качестве части высоты. Это позволяет изменять координату _у слу­чайным образом в диапазоне 5 пикселей около истинного значения _у, что дает больший эффект реалистичности при воспроизведении.

10 — Flash MX Video

9. Теперь введите еще несколько строк:

If (_parent. stopPlay |1 (this.-y>O)) {

This._y = 0;

} ^

This. _height = — this. y;

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

Значение if будет истинно, если оба названных условия выполняют­ся. Поэтому в обоих случаях координата _у принимает значение 0, то есть фильм становится невидимым. Если ни одно из условий не вы­полняется, то последняя строка просто меняет знак переменной _height фильма bar на противоположный так, чтобы изображение объекта bar стало видимым.

10. И, наконец, осталось ввести последнюю часть кода для фильма bar:

//adjust tops

If (this._y<_parent ["t"+num].y) {

_parent ["t"+num]. y = this._y; step = 0;

} else {

_parent ["t"+num].j += step; step+=. 90;

}

}

Adj = inv (this); num = getNum (this); this. onEnterFrame = adjBar;

Здесь мы просто изменяем соответствующий фильму bar клип top таким образом, чтобы он стал равным по размеру с прямоугольником bar в том случае, если высота bar больше высоты top. Аналогично, клип top опускается вниз по направлению к bar, когда высота bar становится меньше высоты top.

Эффект падения создан так, что top движется по направлению к bar на большие расстояния при каждом выполнении кода. Последняя стро­ка this. onEnterFrame adjBar применяет функцию adjBar к каждому кадру.

Изображение для Bar

Graph_mc

tθ-t9 (х9) ьо-ь9 (х9)

Попробуем теперь создать новый фильм в виде фоновой сетки, и поме­стить на нем наши фильмы bar и top так, чтобы все это выглядело напо­добие обычных графических эквалайзеров.

1 • Как обычно, начните с создания нового символа типа фильм с разме­щением в верхнем левом углу. Назовите его ‘bargraph’.

2. К имеющемуся слою добавьте три новых. Назовите их по порядку ‘actions’, ‘tops’, ‘bottoms’ и ‘grid’.

3. В первом кадре слоя grid нарисуйте сетчатую область так, чтобы это было похоже на фон эквалайзера. Если вы используете наши файлы, то на рисунке показаны координаты.

4. Выделите первый кадр слоя bottoms и перетащите на него из Библио­теки десять копий фильма bar. С помощью команды Выравнивание (Ctrl + К) выровняйте их вдоль нижнего края фоновой сетки так, что­бы каждый из них занимал в сетке отдельную ячейку:

10*

Ранее говорилось о том, что компонент проигрыватель будет управ­лять данными клипами в соответствии с амплитудой воспроизводи­мого звукового файла. Поэтому нужно каждому прямоугольнику дать название.

5. С помощью панели Параметры задайте каждому клипу, начиная с самого левого, имена bθ, b 1, Ь2 и так далее до Ь9.

6. Выделите первый кадр слоя tops и повторите все действия — перета­щите из Библиотеки десять копий фильма top и выровняйте их вдоль прямой непосредственно над клипами bar:

»^мвиии^1винния^яния^я^|яннии^

7. Затем также задайте им имена tθ, tl, t2,…, t9.

8. Выделите первый кадр слоя actions и откройте панель Действия. До­бавьте следующий код:

MaxHeight = 140; minHeight = 5; frc=.1O;

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

9. Теперь введите следующую функцию:

Function StopPlaying () { this. stopPlay = true;

}

Функция StopPlaying запускает фильм bar graph для установления ну­левого значения амплитуды звукового сигнала каждый раз, когда ос­танавливается воспроизведение graph. Она доступна также вне сим­вола bar graph.

10. Далее введите еще несколько строк:

Function StopPlaying () {

StopPlay = false; n=0;

This. o∩EnterFrame=getAmp;

}

Здесь функция StartPlaying аналогична функции StopPlaying в том смысле, что она тоже является общедоступной. Разница в том, что переменная StopPlay теперь имеет значение false. Кроме того, собы­тию OnEnterFrame присваивается функция getAmp.

11. Последняя часть программы:

Function getAmp () {

If (!{n%4) && IstopPIay) {

Amplitude = random (maxHeight-minHeight)+miπHeight;

} else if

Amplitude-;

} else {

Amplitude=0;

Delete this. onEnterFrame;

This. gotoAndStop (1);

}

N++;

}

This. onEnterFrame = getAmp;

Функция getAmp устанавливает случайным образом значения амп­литуды и частоты для звуковых файлов. Во-первых, при каждом выпол­нении тела функции значение переменной п увеличивается на единицу до тех пор, пока продолжается воспроизведение звука, а при остановке проигрывания ей присваивается значение 0. Во-вторых, проверяется, не равен ли нулю модуль п, а также что StopPlay имеет значение false.

Под модулем числа здесь имеется в виду остаток от Деления его на Дру­гое число. Он записывается символом %.

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

Постепенное появление

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

Здесь нам поможет фильм fade в качестве визуального перехода, при котором одновременно с постепенным «растворением» эквалайзера на первый план будет выходить экран видео. Точно такой же плавный пе­реход должен происходить и в обратную сторону. На нашей иерархи­ческой схеме данный фильм занимает показанное на рисунке место: βqualizer-mc

Graph_mc fadejnc

В в

1. Создайте в верхнем левом углу новый символ типа фильм под назва­нием ’fade’.

2. В первом кадре установленного по умолчанию слоя нарисуйте зали­тый черным цветом прямоугольник шириной 158 и высотой 146 пик­селей с размещением его верхнего левого угла в точке (0,0).

3. Вставьте новый слой с именем ‘actions’. Откройте панель Действия (Actions), и в первом кадре введите следующий код:

Function fadeout () {

(this. alpha>0) ? (this._alpha — =5): (delete this. onEnterFrame);

} ^ function fadeln () {

This, onEnterFrame = function () { if (this._alpha<100) (

This._alpha += 5;

} else {

Parent. gotoAndStop (1); delete this, onEnterFrame;

}

};

}

This. onEnterFrame = fadeout;

Это все что нужно для клипа fade. А теперь перейдем к фильму с эк­валайзером и применим там созданный нами эффект fade.

Фильм Equalizer

Не забыли, как будет в итоге выглядеть наш эквалайзер?

Тем не менее, нужно учесть, что он будет работать далеко не всегда. То есть иногда в том же пространстве, в котором отображается эквалай­зер, будет происходить воспроизведение видео. Поэтому мы сделаем так, чтобы фильм эквалайзера состоял из двух картинок, причем родительс­кий клип, то есть компонент проигрыватель, будет иметь возможность выбирать одну из них в зависимости от типа проигрываемого файла: звукового или видео.

1. Создайте в верхнем левом углу сцены новый символ типа фильм с названием ‘equalizer’.

2. Добавьте к существующему слою два новых, и назовите их по поряд­ку ‘actions’, ‘graph1 и ‘fade’.

3. В первом кадре слоя fade нарисуйте в верхнем левом углу черный прямоугольник шириной 158 и высотой 146 пикселей.

4. Во второй кадр этого же слоя вставьте ключевой кадр и удалите на нем нарисованный вами прямоугольник.

5. Оставаясь во втором кадре, откройте Библиотеку и перетащите ко­пию фильма fade на сцену. Ее верхний левый угол поместите в точку (0,0) и введите имя копии fade_mc.

6. Во второй кадр слоя graph вставьте ключевой кадр и перетащите в него фильм bar graph из вашей Библиотеки. Фильм должен распола­гаться в верхнем левом углу.

7. Откройте панель Параметры и введите для bar graph имя копии graph_mc.

Действия для фильма equalizer, к счастью, будут очень простыми. Ро­дительский фильм с помощью действия gotoAndStop будет опреде­лять, какой из двух кадров воспроизводить в фильме equalizer в зави­симости от того, проигрывается звуковой файл или видео. Таким образом, все, что нам нужно, это сохранять выбранный кадр види­мым после того, как родительский фильм сделал свой выбор.

8. Вставьте ключевой кадр (F6) во второй кадр слоя actions. Откройте панель Действия (F9) и примените действие stop к обоим ключевым кадрам.

Мы уже близки к концу, но осталась еще одна немаловажная вещь: где видео?

Файлы видео

Sound-video player

Ib

<‘i — M∙ ∙ -: S⅛

_______

Conlrols_mc

ГI

Videos_mc i equalizer_mo

π

Lists (x4)

1

Background

IET

Т

E

I

I

S4≈H

Фильм videos действует наподобие прототипа всех видеофайлов, ко­торые мы хотим использовать. В нем будут содержаться отдельные филь­мы, названные соответственно video video 2 и т. д. — по одному филь­му для каждого используемого нами файла видео.

Подключение видео

Для рассмотрения того, как это делается, мы поместим в фильме videos два файла видео, но вы при желании можете увеличить их число. В этом смысле вам предоставляется полная свобода действий, однако если вы хотите придерживаться нашего примера, то нужно воспользоваться дву­мя файлами MOVиз прилагающегося программного материала.

1. Создайте новый символ типа фильм с названием ‘video Г.

2. Вставьте два новых слоя и назовите их по порядку ‘actions’, ‘mask’ и

‘video Г.

3. Дважды щелкните на слое mask и в появившемся диалоговом окне

Настройки слоя (Layer Properties) установите кнопку выбор Маска

(Mask). В соответствующем окне для слоя video 1 щелкните на кноп­ке выбора Маскировано (Masked). После этого ваш монтажный стол должен иметь вид, показанный на рисунке.

⅛ о I

.)

IF actions F ♦ ♦ ■ I

Г

И mask ∙ ∙ Cj

: •

LZ⅛⅛⅛Ξ2ΞZ⅛

: ♦

ОАО Q

Ij

4. В первом кадре слоя actions примените действие stop, во второй кадр вставьте ключевой кадр.

5. Другой ключевой кадр поместите во второй кадр слоя video 1 — здесь будут размещены наши видеофайлы.

6. Оставаясь в этом же втором кадре, произведите импорт необходимого файла. В нашем примере он называется el-118.mov (он расположен в папке assets в списке прилагающихся к данному разделу файлов).

7. В открывшемся диалоговом окне Импортировать видео (Import Video) выберите Вставить видео в документ Macromedia Flash, и затем в окне Параметры импорта видео установите подходящие вашему файлу настройки. В нашем примере можно выбрать Качество 80%, так как исходный файл все равно староват и зернист.

8. После установки всех настроек нажмите ОК для импорта видео:

Пока видео имеет формат 240×180, то есть он слишком велик для на­шего проигрывателя. Поэтому для того чтобы картинка не перекры­вала фильм controls (кнопки управления) или еще что-то и соответ­ствовала установленным нами размерам, мы наложим на изображение видео маску нужных нам ширины и высоты. Имейте в виду, что любой включенный, но не отображаемый видеоматериал, в том числе и лишние края изображения, в итоге сильно сказывается на размере файла Flash.

Если вы хотите, чтобы все изображение умещалось в области просмот­ра, тогДа нужно изменить его масштаб в режиме Редактирования Video 1 так, чтобы оно целиком было виДно в окне просмотра.

9. Вставьте ключевой кадр во второй кадр слоя mask.

10. В этом кадре нарисуйте прямоугольник шириной! 56 и высотой 144 Пикселей. Можно приближенно нарисовать его, а затем подогнать его размеры на панели Параметры.

Не забудьте поместить его в верхнем левом углу. Однако здесь нуж­но быть внимательнее с выравниванием маски и видео. Мы хотим, чтобы верхний левый угол изображения находился в точке (0,0) и точ­но подходил под область просмотра. Поэтому маску также нужно рас­положить в верхнем левом углу, а не подгонять под видео.

11. Выделите контур маски на сцене и на панели Параметры установите его верхний левый угол в точку (0,0).

12. Далее во втором кадре слоя video 1 выделите видео и перетащите его на сцену так, чтобы оно располагалось непосредственно за маской независимо от координат (такой прием может быть полезным при временном отображении слоя mask в режиме разметки).

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

13. Найдите на временной шкале последний кадр вашего видео (в нашем примере это кадр 90), вставьте в него ключевой кадр на слое actions и введите следующий код:

This. gotoAndStop (1);

14. Теперь вставьте на слое mask столько же пустых кадров, сколько их содержится в остальных двух слоях (90 в нашем случае). Не забудьте заблокировать все слои, чтобы маска нормально функционировала.

Это все, что нужно проделать с фильмом video Теперь он будет на­ходиться в Библиотеке и ждать того момента, когда мы внедрим в ком­понент проигрыватель.

А теперь мы создадим еще один фильм для другого видео, но уже с использованием заготовки video 1. Так что это не должно занять мно­го времени.

15. Выделите в Библиотеке клип video а затем выберите в меню библио­теки команду Дублировать и создайте копию с названием ‘video 2’.

16. Переименуйте слой video 1 в video 2 и удалите весь содержащийся в нем видеоматериал.

Теперь осталось просто выделить второй кадр и импортировать но­вое видео.

17. Щелкните на кадре 2 и выберите команду Импорт в меню Файл для импорта нового файла видео. В нашем примере это el88-119.Mov (в той же папке assets).

18. Увеличьте или уменьшите число кадров в слоях в соответствии с им­портированным видео. В нашем случае каждый слой должен содер­жать 122 кадра.

Итак, два клипа готовы. Повторяя проделанную процедуру, вы мо­жете создать столько фильмов, сколько вам понадобится, просто уве­личивая его номер в названии на единицу. Однако будем считать, что имеющегося материала нам вполне достаточно для сборки на его ос­нове клипа Videos.

19. Создайте новый символ типа фильм с названием ‘videos’.

Данный фильм имеет очень простую структуру. Каждый отдельный созданный нами клип будет находиться в первом кадре соответству-

Ющего слоя с тем же названием копии, но с добавлением в конце ‘_тс’. При этом никаких действий подключать не потребуется, так как все клипы будут вызываться непосредственно с проигрывателя.

20. Переименуйте установленный по умолчанию слой в ‘video 1 ‘ и вставь­те в его первый кадр копию фильма video 1.

21. С помощью панели Параметры поместите его в верхнем левом углу и ведите для него имя копии ‘videol_mc’.Повторите эти действия на новых слоях с каждым нужным клипом.

22. В нашем примере процедура повторяется только один раз со вторым фильмом: вставьте новый слой с именем ‘video 2′ и поместите в его верхнем левом углу копию клипа video 2. Не забудьте ввести имя ко­пии ‘video2_rnc’.

Вот и все. В заключение нам осталось собрать все кирпичики в один компонент проигрыватель.

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

Далее нам предстоит проделать довольно большой объем работы с при­менением ActionScript, однако после данной финальной стадии мы по­лучим готовый для использования проигрыватель звуковых и видеофай­лов, который можно будет подключить при разработке сайтов.

1. Начните с создания нового символа типа фильм с названием ‘sound — video player’.

2. Добавьте к имеющемуся пять новых слоев. Назовите их сверху вниз ‘actions’, ‘controls’, ‘videos’, ‘equalizer’, ‘scrollcomponents’и’background’.

3. В первый кадр слоя controls перетащите из Библиотеки копию филь­ма controls. Установите для него координаты (9.2, 1.5) и задайте имя копии ‘controls_mc’.

4. В первый кадр слоя equalizer перетащите копию фильма equalizer, расположив еговточках (27.5,18.0). Введите имякопии ‘equalizer_mc’.

5. Выделите кадр 1 слоя videos и перетащите на сцену копию фильма videos. Задайте координаты (27.5, 18.0) и имя копии, videos-mc’.

Далее воспользуемся встроенным компонентом Flash под названием ListBox. В интерфейсе проигрывателя мы применим его 4 раза: два для отображения воспроизводимых файлов и еще два для отображе­ния звуковых и видео эффектов. В данном разделе мы просто вста­вим видео и звуковые файлы в первую пару компонентов ListBox, a ко второй паре эффектов ListBox добавим немного функциональнос­ти так, что позже вы можете при необходимости по аналогии создать другие эффекты. Здесь пока мы используем два из них для отобра­жения списка видео и звуковых файлов, один из которых можно выб­рать для воспроизведения.

6. Итак, предположим, в вашей Библиотеке уже есть компонент ListBox. Выделите первый кадр слоя scroll components и перетащите четыре копии указанного компонента на сцену. Разместите их по бокам от центрального окна, как показано на рисунке:

7. На панели Параметры для каждого компонента установите ширину 136 и высоту 86 пикселей.

8. Выделите по очереди каждый элемент ListBox и введите имя копии: ‘soundlist (верхний левый)’, lsound-effects (нижний правый)’, ,videoList (верхний правый)’ и ‘video-effects(нижний правый)’.

9. Оставаясь на панели Параметры, введите в поле Change Handler (вкладка Параметры) для каждого компонента ListBox по очереди значение ‘onChange’.

10. Выделите на сцене копию videoList, и на панели Параметры дважды щелкните в поле Labels. В открывшемся окне Значения с помощью кнопки со знаком плюса добавьте два поля и введите в них названия своих файлов видео:

Эти значения будут отображаться в компоненте ListBox, и у пользо­вателя будет возможность выбрать один из файлов для воспроизве­дения. С копией SGundList мы поступим немного иначе. Названия зву­ковых файлов будут динамически вызываться из текстового файла так, что Flash после анализа его содержимого будет отображать соот­ветствующую информацию в компоненте.

11. Откройте установленный на вашем компьютере по умолчанию тек­стовый редактор, например, Notepad (Блокнот) или SimpleText, а за­тем введите следующее:

Ssoundnies=

12. Если вы работаете с нашими примерами файлов, то сразу за данной строкой введите следующие. Помните, что при этом переход на сле­дующую строку должен происходить по заполнению предыдущей, то есть не следует нажимать клавишу Enter для возврата каретки.

Buritto-SoPj_Pro-1627.mp3|C4U_-_Cu-NikeCool-1689.mp3∣DRLooPS1-DRLooPS — 1552.mp3∣Dualtro-BionicJ-1855.mp3∣Outtake-MachNew-4417.mp3∣Oddgroov — OakLeY- 1350.mp3

Если вы используете свои собственные файлы МРЗ, то просто введи­те название каждого из них (включая расширение), разделяя их зна-

Ком‘|’.

13. После указания названий всех файлов введите следующий текст (так­же без возврата каретки):

&done=true&

14. Сохраните созданный файл под названием list. txt и закройте его.

На данном этапе важно позаботиться об организации ваших файлов. Flash будет обращаться к list. txt и всем файлам из папки assets при выполнении, поэтому их нужно выстроить в соответствии с поряд­ком их воспроизведения. Если вы пользуетесь нашими файлами, то вы должны заметить, что они уже имеются в папке assets.

15. Удостоверьтесь, что у вас есть папка assets, размещенная там же, где и файл FLA с проигрывателем. Если это не так, переметите все видео и звуковые файлы вместе с list. txt в эту папку.

Теперь попробуем связать все созданные объекты фильмы воедино с помощью ActionScript.

16. Вернитесь к своему фильму Flash для проигрывателя. Откройте па­нель Действия (F9) и выделите первый кадр слоя actions. Затем вве­дите строчку:

Location = "assets∕list, txt";

Как видите, данная переменная просто указывает путь к только что созданному нами текстовому файлу, содержащему названия МРЗ файлов.

Теперь установим общий «просмотр» всех наших компонентов с по­мощью ActionScript. Ранее в данной главе мы уже обсуждали уста­новку свойств globalStyleFormat. Здесь мы воспользуемся ею с помо­щью элемента registerSkinEnelement для придания одинакового внешнего вида фону, кнопкам и другим составляющим компонентов, причем цвет будет установлен далее.

Следующие Несколько шагов включают в себя описания программного коДа. Конечно, можно поДробно рассмотреть и ввести кажДую из стро­чек вручную, но мы предлагаем поберечь руки и время, то есть просто скопировать все из прилагающегося файла ChapteiyJ 1_сос1еЛх1Для ша­гов с 16 по 23.

17. За последней введенной строкой добавьте следующие:

Function SetStyIeFormat () {

/’/This function sets the skin colors of the ListBox and playback buttons //You can optionally set the font and font size below. Note: the Listbox

Adjust to fit an exact row based on the font and font size chosen

//

/∕globalStyleFormat. textFonf = "hooge 05 54”; //www. miniml. com /∕globalStyleFormat. textSize = 8;

//

GlobalStyleFormat. textColor = 0x000000; globalStyleFormat. background = 0x88894B0; globalStyleFormat. backgroundDisabled=OxCOCOCO; globalStyleFormat. selection = Ox01 OEA3; globalStyleFormat. selectionDisabled=OxCOCOCO; globalStyleFormat. selectionUnfocused=Ox88894BO;

//

GlobalStyleFormat. arrow = OxFFFFFF; globalStyleFormat. face = Ox7O8OA0; globalStyleFormat. shadow = 0x000000; gfobalStyleFormat. darkshadow = Ox373F59; globalStyleFormat. hightlight = OxFFFFFF; globalStyleFormat. hightlight3D = 0xA8B0C8; globalStyleFormat. foregroundDisabled = Ox7080AO; globalStyleFormat. scrollTrack = Ox7080AO;

//

GlobalStyleFormat. applyChanges ();

}

18. Далее нужно подключить следующие функции:

Function adjVol (v) {

Soundlns. setVolume (v);

}

Function adjPan (p) {

Soundlns. setPan (p);

}

Function TesetPIayButton () {

Controlsjτ∩c. play mc. gotoAndStop (1);

}

Function buttonsVιsible () {

Controls_mc. stop_mc._visible = true; controls_mc. play mc._visible = true;

} ^ ^

Данные функции выступают в роли посредника между пользовате­лем, осуществляющим свой выбор, и соответствующими объектами. Среди них есть новый объект под названием soundlns, который про­сто является звуковым элементом типа Object для проигрывателя.

19. Теперь добавьте следующие функции:

Function playS () {

(kind) {

Case "sound": if {soundLoaded) {

StopSound = false; equalizerjnc. gotoAndStop (2); soundlns. setVolume (controls_mc. vol_mc. getVol ()); soundlns. setPan (controls_mc. pan_mc. getPan ()); if (pauseSound) {

StartTime = pauseTime/1000; soundlns. start (startTime); pauseSound = false;

} else {

Soundlns. start ();

}

Equalizerjnc. gotoAndStop (2); equalizer mc. graph mc. startPlaying ();

} else {

Trace ("no sound loaded");

}

Break;

Case "video":

If (pauseVκJeo) {

This. videolnitialize(numVideo, pauseFrame); pauseVideo = false;

} else {

Equalizermc. gotoAndStop (1); this. VideoInitiaIizefnumVideo);

}

Break; default:

Break;

}

This. onEnterFrame = run;

}

Function stops() {

ResetPlayButton();

Controls_mc. playback_mc. bar_mc._width = 0; switch (kind) { case "sound":

StopSound = true;

PauseSound = false;

Equalizermc. graphmc. stopPlaying();

Soundlns. stop();

Break;

Case "video":

StopVideo = true;

= false;

This["videos_mc"]["video"+numVideo+"_mc"].gotoAndStop (1); break;

Default: break;

}

Delete this. onEnterFrame;

}

Function pauses() { switch (kind) { case "sound":

PauseSound = true;

PauseΓιme = soundlns. position;

Equaiizer_mc. graph_mc. stopPlaying();

Soundlns. stop();

Break;

Case "video":

PauseVideo = true;

This["videos_mc") ["video"+numVιdeo+"jτιc"] .stop();

PauseFrame=this["videos_mc"] ["video,,+numVideo+"mc"] ._currentf rame;

Break;

Default: break;

}

}

Здесь функции playS, stopS и pauseS переключаются, когда пользо­ватель нажимает одну из кнопок play, pause и stop. Затем они опреде­ляют, нужно ли обрабатывать музыку или фильм, и какие установки должны быть изменены.

Ранее в данном разделе для каждого компонента ListBox в фильме sound-video player полю Change Handler мы задали значение OnChange на панели Параметры. На следующей странице мы с помо­щью ActionScript создадим тело функции onChange, то есть опреде­лим, что должно произойти после того, как пользователь щелкнул на одной из записей в списке ListBox.

20.Добавьте следующие строки:

Function onChange(component) {

If (component. jιame == "soundList") {

Kind = "sound";

Var num = component. getSelectedlndex(); root. loadermc. initLoad("JevelO", "SOUND", "loading"+soundArr[num]); this. soundlnitialize("assets∕"+soundArr[num]);

} else if (component._name == "videoList"){ stops(); kind = "video";

Equalizer_mc. fade_mc. fadeln();

NumVideo = component. getSelectedlndex()+1;

NumOWideos = component. getLength();

ButtonsVisible();

}

}

21.Теперь добавим две новые функции, SoundInitialize и VideoInitialize, которые вызываются обработчиком onChange каждый раз, когда пользователь выбирает новый файл и нажимает кнопку воспроизве­дения. Добавьте следующее:

Function videolnitialize(n, m) { var х = numOWideos+1; if (m == null) {

M = 2;

While (х-) { if (х == п) {

This["videos_mc"]["video"+x+"_mc"].gotoAndPlay(m);

} else {

This["videos mc"]["video"+x+" mc"].gotoAndStop( 1 );

}

}

}

Function soundlnitialize(path) { stops();

Videolnitialize(null) soundlns = new Sound(this); soundlns. onLoad = Iunction(Succcss) {

If (success) {

ResetPlayButton(); buttonsVisible(); soundLoaded = true;

} else {

Trace("Download of MP3 file failed!");

}

};

Soundlns. loadSound(path, false);

}

22. Далее мы введем еще одну новую функцию под названием percent, которая будет определять в процентном отношении долю уже воспро­изведенной части видео или звукового объекта. То есть если пользова­тель нажмет кнопку паузы, Flash будет знать, на каком месте файла произошла остановка. Поэтому проигрывание будет продолжено с правильной позиции. Для этого введите следующие строки:

Function percent() { switch (kind) { case"sound":

Var num = soundlns. position; var denom = soundlns. duration; break;

Case "video":

Var num = this["videos_mc"]["video"+numVideo+"_mc"].currentframe; var denom = this["videos_mc"]["video"+numVideo+"_mc"] .Jotalframes; break;

Default: break;

}

Return num/denom;

}

Function ιndicatePlaying(p) {

Controls = p* 100;

}

23. Следующая функция, sortAssets, разбивает массив, полученный из файла list. txt, и содержит полученные значения в переменной soundArr. Введите следующее:

Function sortAssets() {

SoundArr = soundFiles. split("∣"); var I = soundArr. length;

SoundListremoveAIIO; for (var x =

SoundLiStaddItem (soundArr[x]);

Function IoadteetsUst(I) { var StartTime = var wait = 3000;

IoadVariabIesf 1,""); this. onEnterFrame = function() {

CurrTime =

Var n = CurrTime-StartTime; if (done == "true") {

SortAssets();

Delete this. onEnterFrame;

} else if (n>=wait) {

Trace("could not find asset list"); delete this. onEnterFrame;

J

};

Function run() { per = percent();

(per<.99) ? indicatePlaying(per): stops();

}

SetStyIeFormatf);

IoadAssetUst(Iocation);

Теперь можете выдохнуть — это весь код ActionScript необходимый для фильма sound-video player. Все, что осталось сделать, это закон­чить с графикой и протестировать созданный проигрыватель.

24. На слое background нарисуйте прямоугольник, охватывающий весть проигрыватель, и на этом работа с графическими элементами закон­чена.

25. Вернитесь на основную временную шкалу, переименуйте установ­ленный по умолчанию слой в ‘player’ и перетащите на сцену фильм sound-video player.

26. Наконец, вставьте новый слой с именем ‘actions’ и примените дей­ствие stop к его первому кадру. Теперь проверьте созданный фильм нажатием клавиш Ctrl + Enter. При этом на экране должны отобра­зиться все видео и звуковые компоненты:

27. Сохраните свой фильм и закроите его.

Заключение

Macromedia Flash в начале задумывался как инструмент для анимации с очень ограниченными возможностями написания сценариев (то есть программирования). За последние несколько лет он вобрал в себя язык объектно-ориентированного программирования и превратился в мощ­ный разработчик web-приложений. Теперь пользователь может не толь­ко воспользоваться готовыми объектами, но и создать свои с последую­щим преобразованием их в компоненты Flash.

В данном разделе вы познакомились с базовыми концепциями и тео­рией объектно-ориентированного программирования. Вы узнали, как применить объектно-ориентированный подход во Flash-разработке, и создали полностью работоспособный видео и звуковой проигрыватель с использованием объектов. Неплохо, не правдали?

Если вы решили, что ActionScript это ваша стихия, и горите желани­ем продолжить эксперименты с ним, то загляните на сайт ED, с которо­го можно скачать видео и звуковой синтезатор. Наш проигрыватель дает возможность его дальнейшей модификации и создания на его основе синтезатора, в котором пользователь мог бы одновременно воспроиз­водить и видео, и звук, а также задать порядок их воспроизведения.

Для всего этого потребуется еще поработать в ActionScript, но, смеем надеяться, мы помогли вам проникнуться удивительными возможнос­тями применения ActionScript и приемов ООП при создании проектов. Мы будем рады, если смогли вдохновить вас на использование указан­ных приемов в вашей последующей работе с Flash. Ну что ж, вперед!

Послесловие

Поздравляем вас с окончанием курса Flash MX Video. Теперь вы в пол­ной мере подготовлены к использованию самых передовых технологий подачи и демонстрации материалов при помощи Flash MX.

Однако не стоит успокаиваться на достигнутом. Эта книга познако­мила вас с несколькими захватывающими сферами деятельности, и friends of ED (Www. friendsofED. com) поможет вам в дальнейшем иссле­довании мира веб-дизайна.

После этой книги открываются два пути. Но это отнюдь не значит, что вы должны выбрать один из них, напротив — вы вольны пойти по обоим сразу!

Путь первый приводит в мир цифрового видео, знакомство с кото­рым состоялось в главах 2 и 3. Съемка и обработка цифрового видео — это самостоятельный вид искусства, и с ним вас познакомит DVision, наш отдел, посвященный цифровому видео.

Зайдите на сайт Www. DVision. info, здесь вы увидите издания, посвя­щенные пакетам для цифрового видеомонтажа — Premiere, Final Cut Pro, After Effects, iMovie, QuickTime Pro, и, наряду с ними, книги, посвящен­ные отдельным аспектам — такие, как Transitions (Voices On The Craft Of Digital Editing) (Переходы (Об искусстве цифрового монтажа)).

Путь второй — дальнейшее исследование панорамы Flash MX, нача­тое нами в последней главе. Здесь вам укажет путь Www. flashmxlibrary. com, серия изданий friends ofED, целиком посвящен­ная великолепной новой версии Flash. Здесь вы найдете руководства для начинающих, такие, как Foundation ActionScript (Основы ActionScript), Описание более развитых приложений Flash, как Macromedia Flash MX Studio, и многое другое.

Не покидайте нас, закрыв последнюю страницу — нам хотелось бы узнать, что вы думаете об этой книге, как мы могли бы ее улучшить, ка­кие книги вы хотели бы получить от нас в будущем. Для нас очень важна обратная связь с читателями, очень часто мы выпускаем книги именно по вашим просьбам. Напишите нам на Feedback@friendsofed. com или просто зайдите на форум.

Приложение

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *