Выбор обложки для отдельных компонентов пользовательского интерфейса для воспроизведения FLV-файлов

Компоненты пользовательского интерфейса для воспроизведения FLV-файлов позволяют настроить внешний вид элементов управления компонента FLVPlayback в FLA-файле и увидеть результаты во время предварительного просмотра веб-страницы. Однако эти компоненты не предназначены для масштабирования. Для установки определенного размера необходимо отредактировать фрагмент ролика и его содержимое. По этой причине рекомендуется иметь компонент FLVPlayback в рабочей области нужного размера со свойством scaleMode установленным на exactFit .

Для начала просто перетащите нужные компоненты пользовательского интерфейса для воспроизведения FLV-файлов с панели «Компоненты» в нужное место в рабочей области и присвойте им имена экземпляров.

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

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

Компоненты Button

Компоненты Button имеют схожую структуру. Кнопки включают в себя BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton и StopButton. Большинство из них имеют один фрагмент ролика в Кадре 1 с именем экземпляра placeholder_mc. Как правило, это экземпляр кнопки в нормальном состоянии, но не обязательно так. В Кадре 2 в рабочей области находятся четыре фрагмента ролика для каждого состояния отображения: нормального, при наведении указателя, нажатого и отключенного. (При исполнении компонент никогда не переходит в Кадр 2; эти компоненты помещены сюда для удобства редактирования и принудительной загрузки в SWF-файл без установки флажка «Экспортировать в первый кадр» в диалоговом окне «Свойства символа». Однако необходимо выбрать параметр «Экспорт для ActionScript».)

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

Некий сценарий ActionScript, как правило, отображается в Кадре 1. Этот сценарий изменять не требуется. Он просто останавливает указатель воспроизведения в Кадре 1 и указывает, какие фрагменты роликов использовать для каких состояний.

Кнопки PlayPauseButton, MuteButton, FullScreenButton и CaptionButton

Кнопки PlayPauseButton, MuteButton, FullScreenButton и CaptionButton отличаются от других; они имеют только одну рамку с двумя слоями и не имеют сценария. В этом кадре расположены две кнопки, одна поверх другой. В случае с кнопкой PlayPauseButton — это кнопки воспроизведения и паузы; в случае с MuteButton — кнопки включения и выключения режима без звука; в случае с FullScreenButton — кнопки включения и выключения полноэкранного режима; в случае с CaptionButton — кнопки включения и выключения субтитров. Для выбора обложки этих кнопок необходимо выбрать обложку для каждой из двух внутренних кнопок, как описано в разделе Выбор обложки для отдельных компонентов пользовательского интерфейса для воспроизведения FLV-файлов ; дополнительных действий не требуется.

Кнопка CaptionButton предназначена для компонента FLVPlaybackCaptioning и должна прикрепляться к нему, а не к компоненту FLVPlayback.

Кнопки BackButton и ForwardButton

Кнопки BackButton и ForwardButton также имеют свои особенности. В Кадре 2 они имеют дополнительные фрагменты роликов, которые можно использовать в качестве рамки вокруг одной или обеих кнопок. Эти фрагменты роликов не обязательны и не имеют особых функций; они предоставлены для удобства. Чтобы использовать их, просто перетащите их в рабочую область с панели «Библиотека» и поместите в любое место. Если они вам не нужны, не используйте их или удалите с панели «Библиотека».

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

Компонент BufferingBar

Компонент BufferingBar простой: он содержит анимацию, которая проявляется, когда компонент входит в состояние буферизации, и не требует специального сценария ActionScript для настройки. По умолчанию этот компонент представляет собой полосатую строку, двигающуюся слева направо, с прямоугольной маской, но в его конфигурации нет ничего особенного.

Хотя строки буферизации в SWF-файлах обложек используют 9-зонное масштабирование, так как их масштабирование осуществляется при исполнении, компонент пользовательского интерфейса BufferingBar для воспроизведения FLV-файлов не использует и не может использовать 9-зонное масштабирование, так как имеет вложенные фрагменты роликов. Если требуется увеличить ширину или высоту компонента BufferingBar, вы можете изменить его содержимое вместо масштабирования.

Компоненты SeekBar и VolumeBar

Компоненты SeekBar и VolumeBar похожи, хотя имеют разные функции. Каждый из компонентов имеет маркеры, использует те же механизмы отслеживания маркера и имеет поддержку вложенных роликов для отслеживания хода выполнения и заполненности.

Во многих случаях код ActionScript в компоненте FLVPlayback предполагает, что точка регистрации (также известная как исходная точка или нулевая точка ) компонента SeekBar или VolumeBar находится в левом верхнем углу содержимого, поэтому очень важно соблюдать это условие. В противном случае могут возникнуть проблемы с маркерами и фрагментами роликов хода выполнения и заполненности.

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

Маркер

Экземпляр фрагмента ролика маркера находится в Кадре 2. Как в случае с компонентами BackButton и ForwardButton, этот компонент никогда не переходит в Кадр 2; эти фрагменты роликов помещены сюда для удобства редактирования и принудительной загрузки в SWF-файл без установки флажка «Экспортировать в первый кадр» в диалоговом окне «Свойства символа». Однако все равно необходимо выбрать параметр «Экспорт для ActionScript».

Как вы заметили, фрагмент ролика маркера имеет фоновый прямоугольник, значение альфа-канала которого установлено на 0. Этот прямоугольник увеличивает размер области попадания маркера, упрощая его захват без изменения внешнего вида, подобно состоянию попадания кнопки. Так как маркер создается динамически при исполнении, он должен быть фрагментом ролика, а не кнопкой. Прямоугольник со значением альфа-канала равным 0 не нужен ни для какой другой цели, и его можно заменить любым изображением. Однако рекомендуется оставить точку регистрации в центре по горизонтали, в середине фрагмента ролика маркера.

Следующий код ActionScript в Кадре 1 компонента SeekBar предназначен для управления маркером: 

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

Вызов функции stop() необходим из-за содержимого Кадра 2.

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

Переменная handleLeftMargin определяет исходное положение маркера (0 %), а переменная handleRightMargin определяет его конечное положение (100 %). Эти числа определяют отступ от левого и правого концов элемента управления «строка», где положительные числа задают границы в пределах строки, а отрицательные — за ее пределами. Эти отступы указывают место перемещения маркера на основе его точки регистрации. Если поместить точку регистрации в середине маркера, его дальние левый и правый края выйдут за поля. Для правильной работы фрагмент ролика строки поиска должен иметь точку регистрации в левом верхнем углу содержимого.

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

Например, при таких границах, если для строки заданы границы (100, 100) и ее ширина равна 100 пикселам, границы маркера по горизонтали будут составлять от 102 до 198, а положение по вертикали — 111. Если изменить значения переменных handleLeftMargin и handleRightMargin на -2, а значение handleY на -11, границы маркера по горизонтали будут составлять от 98 до 202, а положение по вертикали — 89.

Фрагменты роликов хода выполнения и заполненности

Компонент SeekBar имеет фрагмент ролика ход выполнения , а компонент VolumeBar имеет фрагмент ролика заполненность , но на практике любой компонент SeekBar или VolumeBar может иметь любой из этих фрагментов роликов, ни одного из них или оба эти фрагмента роликов. Они имеют одинаковую структуру и схожее поведение, но отслеживают разные значения. Фрагмент ролика хода выполнения заполняется по мере загрузки FLV-файла (что применимо только к загрузке через HTTP, так как эта строка всегда отображается заполненной при потоковой передаче с FMS), а фрагмент ролика заполненности заполняется по мере движения маркера слева направо.

Компонент FLVPlayback находит экземпляры этих фрагментов роликов по конкретным именам экземпляров, поэтому экземпляр фрагмента ролика хода выполнения должен иметь родительский фрагмент ролика строки и имя progress_mc. Экземпляр фрагмента ролика заполненности должен иметь имя fullness_mc.

Фрагменты роликов хода выполнения и заполненности могут иметь или не иметь вложенный экземпляр фрагмента ролика fill_mc. Фрагмент ролика fullness_mc компонента VolumeBar демонстрирует метод с использованием фрагмента ролика fill_mc, а фрагмент ролика progress_mc компонента SeekBar демонстрирует метод без использования фрагмента ролика fill_mc.

Метод с использованием вложенного фрагмента ролика fill_mc используется в случаях, когда требуется заполнитель, масштабирование которого не обходится без искажения внешнего вида.

Во фрагменте ролика fullness_mc компонента VolumeBar вложенный фрагмент ролика fill_mc имеет маску. Маску можно наложить либо при создании самого фрагмента ролика, либо она будет создана динамически при исполнении. Если маска представляет собой фрагмент ролика, присвойте экземпляру имя mask_mc и настройте его так, чтобы fill_mc отображался, как при 100 % заполнении. Если не наложить маску на fill_mc, динамически созданная маска будет прямоугольной и иметь тот же размер, что и fill_mc при 100 % заполнении.

Фрагмент ролика fill_mc проявляется с маской одним из двух способов, в зависимости от того, установлено свойство fill_mc.slideReveal на значение true или на значение false .

Если значение fill_mc.slideReveal равно true , то fill_mc двигается слева направо, проявляясь через маску. При 0 % он находится в крайнем левом положении и совсем не проявляется через маску. По мере роста процентной величины он сдвигается вправо, пока, достигнув 100 %, не окажется в том месте, в котором был создан в рабочей области.

Если значение fill_mc.slideReveal равно false или является неопределенным (поведение по умолчанию), размер маски будет изменяться слева направо, все больше проявляя fill_mc. В положении 0 % маска будет масштабирована до 05 по горизонтали, и по мере роста процентной величины значение scaleX будет увеличиваться, пока, при 100 %, fill_mc не проявится полностью. Не обязательно scaleX = 100, так как экземпляр mask_mc мог быть масштабирован при создании.

Метод без использования fill_mc проще, чем метод с использованием fill_mc, но вызывает искажение заполнителя по горизонтали. Если такое искажение нежелательно, необходимо использовать fill_mc. Фрагмент ролика progress_mc компонента SeekBar иллюстрирует такой метод.

Фрагмент ролика хода выполнения или заполненности масштабируется по горизонтали на основе процентной величины. При 0 % свойство scaleX экземпляра установлено на значение 0, делая его невидимым. По мере роста процентной величины значение scaleX регулируется, пока, достигнув 100 %, ролик не достигнет того же размера, который имел в рабочей области при создании. Опять же, не обязательно scaleX = 100, так как экземпляр ролика мог быть масштабирован при создании.

Соединение компонентов пользовательского интерфейса для воспроизведения FLV-файлов

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

Если в рабочей области расположено несколько компонентов FLVPlayback или если пользовательский элемент управления и экземпляр FLVPlayback находятся не на одной временной шкале, необходимо написать код ActionScript, чтобы присоединить компоненты пользовательского интерфейса к экземпляру компонента FLVPlayback. Сначала необходимо присвоить имя экземпляру FLVPlayback, а затем при помощи ActionScript назначить экземпляры компонентов пользовательского интерфейса для воспроизведения FLV-файлов соответствующим свойствам компонента FLVPlayback. В следующем примере экземпляр FLVPlayback имеет имя my_FLVPlybk, имена свойств FLVPlayback написаны после точек (.), а экземпляры компонентов пользовательского интерфейса стоят справа от знака «равно» (=): 

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar;

Следующая процедура создает пользовательские элементы управления StopButton, PlayPauseButton, MuteButton и SeekBar:

  1. Перетащите компонент FLVPlayback в рабочую область и присвойте ему имя экземпляра my_FLVPlybk .

  2. При помощи Инспектора компонентов установите параметр source на значение http://www.helpexamples.com/flash/video/cuepoints.flv .

  3. Установите параметр «Обложка» на значение «Нет».

  4. Перетащите StopButton, PlayPauseButton и MuteButton в рабочую область и поместите их поверх экземпляра FLVPlayback, накладывая их вертикально слева. В Инспекторе свойств присвойте каждой кнопке имя экземпляра (например, my_stopbttn , my_plypausbttn и my_mutebttn ).

  5. На панели «Библиотека» откройте папку FLVPlayback Skins, затем откройте под ней папку SquareButton.

  6. Выберите фрагмент ролика SquareBgDown и дважды щелкните его, чтобы открыть в рабочей области.

  7. Щелкните его правой кнопкой мыши (в Windows) или щелкните мышью, удерживая клавишу Ctrl (в Macintosh), выберите пункт меню «Выделить все» и удалите символ.

  8. Выберите инструмент «Овал», нарисуйте овал в том же месте и задайте синюю заливку ( #0033FF ).

  9. В Инспекторе свойств установите ширину (W:) на 40 , а высоту (H:) на 20 . Установите координату «x» (X:) на 0.0 , а координату «y» (Y:) на 0.0 .

  10. Повторите шаги 6-8 для SquareBgNormal, но измените заливку на желтую ( #FFFF00 ).

  11. Повторите шаги 6-8 для SquareBgOver, но измените заливку на зеленую ( #006600 ).

  12. Отредактируйте фрагменты роликов для различных значков символов внутри кнопок (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon и StopIcon). Эти фрагменты роликов можно найти на панели «Библиотека» в разделе FLV Playback Skins/ Метка Button/Assets, где Метка — это имя кнопки, например Play, Pause и т. д. Для каждого фрагмента ролика выполните следующие действия:

    1. Выберите параметр «Выделить все».

    2. Измените цвет на красный ( #FF0000 ).

    3. Установите масштаб на 300 %.

    4. Измените местоположение X: содержимого на 7.0 , чтобы изменить горизонтальное расположение значка для каждого состояния кнопки.

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

  13. Нажмите синюю стрелку «Назад» над временной шкалой, чтобы вернуться к Монтажному кадру 1, Кадру 1.

  14. Перетащите компонент SeekBar в рабочую область и поместите его в правом нижнем углу экземпляра FLVPlayback.

  15. На панели «Библиотека» дважды щелкните компонент SeekBar, чтобы открыть его в рабочей области.

  16. Установите масштаб на 400 %.

  17. Выберите контур и задайте красный цвет ( #FF0000 ).

  18. Дважды щелкните SeekBarProgress в папке FLVPlayback Skins/Seek Bar и задайте желтый цвет ( #FFFF00 ).

  19. Дважды щелкните SeekBarHandle в папке FLVPlayback Skins/Seek Bar и задайте красный цвет ( #FF0000 ).

  20. Нажмите синюю стрелку «Назад» над временной шкалой, чтобы вернуться к Монтажному кадру 1, Кадру 1.

  21. Выберите экземпляр SeekBar в рабочей области и присвойте ему имя my_seekbar .

  22. На панель «Действия» Кадра 1 временной шкалы вставьте инструкцию import для классов Video и назначьте имена кнопки и строки поиска соответствующим свойствам компонента FLVPlayback, как показано в следующем примере: 

    import fl.video.*; 
my_FLVPlybk.stopButton = my_stopbttn; 
my_FLVPlybk.playPauseButton = my_plypausbttn; 
my_FLVPlybk.muteButton = my_mutebttn; 
my_FLVPlybk.seekBar = my_seekbar;

  23. Нажмите Control+Enter для тестирования ролика.