Управление несколькими видеоклипами

Мы умеем размещать видеоклипы, а также управлять ими при помощи основных кнопок. А значит, мы сможем создать для доступа к нашим клипам интерфейс в виде телевизора (для тех, у кого черно-белая кар­тинка, подскажу, что телевизор у меня — желто-оранжевый). Первым делом мы рассортируем видеоклипы, затем добавим кнопки управления, а в конце — звук.

Хочу Flash-телевизор!

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

1. Скачайте с сайта и откройте файл tv_clips. f la. Он содержит импорти­рованные клипы и звукозаписи, используемые в этом упражнении. Как и прежде, вы вольны использовать свои собственные файлы — импортировать видео вы умеете, о звуке подробно рассказывается в главах 6 и 7.

2. Первым делом надо поместить видеоклипы в клипы-символы. Исполь­зуя команду Вставить > Новый символ (Insert > New Symbol), создай­те новый клип-символ под названием

3. На монтажный стол символа 1 _ballet перетащите из Библиотеки ко­пию клипа ballet. mov (любители этого вида спорта тут же заявят, что этот трюк называется «Flatlands», а никакой не балет — ну, приношу

Извинения!).

4. На запрос об увеличении числа кадров в появившемся диалоговом окне ответьте «да» и отцентрируйте видео в сцене.

5. Создайте клипы-символы для всех оставшихся видеоклипов (вклю­чая TVfuzz. mov), не забывая расширять монтажный стол каждого кли­па. Дайте символам имена — такие, как на снимке:

6. Покончив с этим, создайте в Библиотеке новую папку под названием «video movie clips» и сложите в нее все созданные клипы-символы, чтобы не создавать беспорядка и путаницы в нашей Библиотеке.

7. Вернувшись на основной монтажный стол, дайте имеющемуся слою новое имя — «videos». Клавишей F7 вставьте пустые ключевые кад­ры в каждый кадр до 6 включительно:

1 А □

1 , 5∏ ’ Ю

T Н T В1 *1 *,

OloOO]oB

8. Перетащите копию символа TV fuzz на сцену — в кадр 1 слоя videos. В инспекторе Параметры (Property) измените размер фильма на 180×135 точек, затем отцентрируйте клип.

Теперь клип со «снегом» такого же размера, как остальные импортиро­ванные клипы. Этот клип символизирует помехи, мы можем спокойно изменять его размер — чем больше искажений, тем лучше эффект.

9. Теперь давайте нарисуем сам телевизор. Создайте новый слой под названием «TV» и поместите его ниже слоя videos.

10. Заблокируйте слой videos, и используйте клип TV fuzz как шаблон для изображения телевизора в слое TV. Если нужно закруглить углы «ящика», в инструменте Прямоугольник (Rectangle) используйте оп­цию Радиус скругления прямоугольника (Round Rectangle Radius). В общем, подойдите к этому творчески и создайте свой идеальный те­левизор, а хотите — импортируйте картинку с изображением реаль­ного телевизора.

11. графический символ под названием «television set»;

Закончив рисовать, выделите весь свой телевизор и преобразуйте его

12.Заблокируйте слой TVи разблокируйте слой videos. Перетащите сим­вол l_ballet в кадр 2 слоя videos и отцентрируйте.

13.Перетащите последовательно оставшиеся клипы в кадры с 3 по 6, пос­ледним будет 5_wallride в кадре 6. Все их отцентрируйте.

Теперь нужно сделать кое-что особо важное. Во-первых, надо уста­новить метки кадров, чтобы связать их с нашими кнопками.

14.Создайте новый слой под названием «frame labels» (метки кадров). Поместите его поверх двух других слоев. Как вы уже делали недавно, вставьте ключевые кадры в каждый кадр слоя frame labels до 6 вклю­чительно:

p videos,dtv,p iiame iabelc z • •

15.Выделите кадр 1 и назначьте ему в инспекторе Параметры (Property) метку кадра (frame label) «fuzz». Мы будем использовать ее для того, чтобы возвращать воспроизведение «помех» после того, как клип будет проигран до конца.

16.Выделите кадр 2 и назначьте метку Наверное, вы уже поняли, что она соответствует цифре-приставке в имени клипа. Пометьте кадры 3 — 6 цифрами 2 — 5 (то есть номер кадра минус 1). И вот теперь мы видим на монтажном столе множество красных флажков. Да здрав­ствует День Победы! Ошиб… ну, успокойтесь. Это просто метки кад­ров загружены, извините.

Эти метки будут служить ссылками для кнопок каналов, которые мы создадим чуть позже. Но сначала мы остановим кадры на монтажном столе.

17.Создайте еще один слой, назовем его «actions», то есть «действия». Расположите его поверх остальных слоев и, как прежде, вставьте клю­чевые кадры до 6 включительно. Помещать слой actions выше всех остальных — общая практика, это упрощает расшифровку фильмов Flash.

18.Выделите кадр 1 слоя actions и вставьте действие stop. To же самое сделайте с остальными кадрами в этом слое, и монтажный стол дол­жен приобрести такой вид:

w actions,l> frame labels _> videos

Если сейчас вы протестируете фильм, то увидите сплошные помехи и больше ничего. Монтажный стол остановлен на кадре 1 и клип fuzz прокручивается снова и снова:

Кнопки управления

Как же нам прекратить эти помехи и посмотреть что-нибудь поинтерес­нее? Пора заняться кнопками…

1. Создайте новый символ-кнопку под именем «change button».

2. На монтажном столе символа нарисуйте небольшой квадратик, по­местив его в центре.

3. Вернувшись на основной монтажный стол, создайте новый слой под названием «buttons» (кнопки), поместив его ниже всех прочих слоев. Перетащите в слой buttons пять копий символа change button:

4. Каждую кнопку нужно запрограммировать на включение одного из каналов, поэтому выделите крайнюю слева кнопку и откройте панель Действия (Actions). Введите следующий код:

On (release) {

If Lcurrentframe!=2) {

GotoAndPlay ("1");

}

}

Данный код указывает Flash, что следует переместить указатель вос­произведения основного монтажного стола к кадру с меткой — 1» (это у нас второй кадр).

Вместо метки можно было бы использовать просто номер каДра, но мет­ки зачастую бывают уДобнее (например, если материал на монтажном столе постоянно сДвигается, пришлось бы обновлять номер каДра). Мы могли бы написать вторую строку в виДе _Root.GotoAndPlay («1»), но, поскольку кнопки расположены на Root (главном монтажном столе), Дополнительно ссылаться на него нет смысла.

5. Выделяем вторую кнопку и вводим в панели Действия следующий код. Как и в случае с предыдущей кнопкой, индикатор воспроизведе­ния отсылается к помеченному кадру:

On (release) {

If ( Currentframe!=3) {

GotoAndPlay ("2");

}

1

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

On (release) {

If ( currentframe!=6) {

GotoAndPlay ("5");

}

}

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

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

8. Двойным щелчком на символе _ballet в Библиотеке откройте его для редактирования. Создайте новый слой и назовите его «actions».

9. Отыщите последний кадр видеоклипа и в параллельный кадр слоя actions вставьте ключевой кадр, как показано на рисунке вверху сле­дующей страницы.

10. Откройте окно Действия (Actions) и вставьте следующий код:

Root. gotoAndStop ("fuzz");

Это просто указание Flash перейти к метке fuzz (кадру 1) на основ­ном монтажном столе, когда воспроизведение клипа закончится.

1 !.Повторите шаги 8 — 10 для всех видеоклипов. Не забывайте встав­лять ключевой кадр параллельно последнему кадру видео.

12.Проверьте фильм — клип воспроизводится, а по окончании перехо­дит обратно к помехам. В телевизоре, конечно, не совсем так, но все — таки лучше, чем реклама.

Добавляем звук

Наш домашний театр почти готов. Осталось только озвучить его и доба­вить маску, чтобы скруглить утлы телеэкрана.

1. Вставьте на основной монтажный стол новый слой под названием «sounds» (звуки). Поместите его над слоем videos. Как и в других сло­ях, вставьте ключевые кадры в каждый кадр слоя до 6 включительно:

2. Выделите кадр 1 слоя sounds и откройте список Звук (Sound) в инс­пекторе Параметры (Property):

5 — Flash MX Video

3. Из списка выберите fuzz, aiff. В опции Цикл (Loop) задайте значение «9999»:

т] Πp⅛bmtb∣,none,смняро: ieuent,44 khz стерео 16 бит 0.2 s 35.8 кв

Максимальное ч исло Повторов во Flash9999, и нам остается надеять­ся, что наши пользователи не станут вглядываться в помехи так дол­го, что успеют прослушать все эти повторы.

4. Для кадра 2 этого слоя выберите из списка Звук (Sound) train_exc. aiff. В поле Цикл (Loop) оставьте стандартный 0, поскольку он должен быть проигран только один раз (продолжительность звукозаписи пример­но такая же, как видеоклипа).

5. Остальные звуки у нас будут такими:

• Кадр 3: intro2.mp3

• Кадр 4:show_yr_colors_nozzle. aif

• Кадр 5: nozzle_exc. aiff

• Кадр 6:shootingstar_exc. aif

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

7. К счастью, с помощью ActionScript это можно устранить. Выделите крайнюю слева кнопку и откройте окно Действия (Actions). Вставьте строку кода после первой:

StopAIISounds ();

Полностью код для этой кнопки будет выглядеть так:

On (release) {

If Ccurrentframe!=2) {

StopAIISounds (); gotoAndPlay ("1");

I

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

8. Теперь нужно добавить тот же код для каждой кнопки.

9. Проверьте фильм, и теперь переходы между звуковыми дорожками должны быть безупречными. Единственная проблема, которую мож­но отметить — то, что звуковая дорожка клипа иногда продолжается уже после того, как клип закончился, и начались «помехи».

Ю. Для устранения этого явления добавьте строчку кода StopAllSounds (); в начале того кода, который мы вставили в конец каждого видео­клипа (_root. gotoAndPlay («fuzz»);).

Маскирование

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

1. Вставьте новый слой под названием «mask» (маска). Поместите его непосредственно над слоем videos. Нам нужно нарисовать прямоу­гольник со скругленными углами по размеру нашего телеэкрана.

2. Для облегчения этой работы нужно включить опцию Привязать к объектам (Snap to Objects). Раскрыв меню Вид (View), проверьте, включена ли она.

3. Выберите инструмент Прямоугольник (Rectangle), в качестве цвета заполнения и обводки выберите отвратительный ядовито-зеленый цвет. На самом деле это не обязательно должен быть зеленый, про­сто такой цвет, который вы вряд ли станете использовать в своем твор­честве. Этот прямоугольник станет маской, и цвет будет обозначать прозрачное «окно», сквозь которое будет смотреть пользователь, а нашего цветного прямоугольника он не увидит никогда.

5′

4. Выберите опцию Радиус скругления прямоугольника (Round Rectangle Radius) и установите то же значение, какое вы использова­ли, рисуя телевизор — моем случае 10, — чтобы у нашей маски были закругленные углы.

5. В кадре 1 слоя mask подведите курсор к левому верхнему углу видео­клипа fuzz.

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

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

8. Двойным щелчком на значке (в виде листа бумаги) откройте Настрой­ки слоя (Layer Properties), в списке типов выберите Маска (Mask). Нажмите кнопку ОК, и значок рядом с именем слоя превратится в квадратик с овалом внутри.

9. г ⅜j⅛c,; / * • иНажмите и тащите слой videos под букву «т» слоя mask: ! Ii⅛g∣ *~∙I3]

10. Отпустите кнопку мыши — значок слоя videos изменится, а само имя слоя сдвинется. Это значит, что он теперь маскирован слоем mask. Проверьте фильм, и вы увидите, что теперь форма нашего телеэкра­на стала более реалистичной.

Итак, наш телевизор готов! Вы можете продолжить самостоятельно, выбрав собственные клипы, звуковые дорожки, улучшив графику. Я вот еще добавил пульт и руку, которая переключает каналы, а также рамку вокруг видеоклипов, чтобы резче выделить их. Если хотите посмотреть на то, что у меня получилось, скачайте файл tv_final. fla:

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

Заключение

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

Мы увидели, насколько просто организовать подачу видео в сочета­нии с графическими и другими материалами. Таким образом, можно создавать целые веб-страницы с внедренным видео. Скажите «до сви­дания» всяким дополнительным окнам и внешним программам, встре­чайте веб-сайты, созданные целиком во Flash!

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

ГЛАВА

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

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