Думаю, все знают о такой возможности flash-плеера, как полноэкранный режим, когда флеш-ролик занимает весь экран монитора. Данный режим особенно часто используется в видео-плеерах, созданных на платформе Flash. Именно работе с полноэкранным режимом и посвящён данный пост.
Надо особо отметить, что переход в полноэкранный режим возможен только в ответ на действия пользователя. Это может быть клик по кнопке или нажатие клавиши клавиатуры.
Ещё одним ограничением полноэкранного режима является недоступность в этом режиме большинства клавиатурных клавиш.
В самом простом случае, для входа/выхода в полноэкранный режим будет достаточно кнопки и небольшого фрагмента кода...
Код ActionScript 3.0:
/*
кнопка перехода в полноэкранный режим
*/
btn.addEventListener(MouseEvent.CLICK,onFullScreenFlash);
function onFullScreenFlash(event:MouseEvent):void
{
/*
если флеш-плеер в данный момент не находится в полноэкранном режиме
*/
if (stage.displayState == StageDisplayState.NORMAL)
{
/*
переходим в полноэкранный режим
*/
stage.displayState = StageDisplayState.FULL_SCREEN;
}
/*
иначе
*/
else
{
/*
выходим из полноэкранного режима
*/
stage.displayState = StageDisplayState.NORMAL;
}
}
Проверять работу данного кода в среде разработки Adobe Flash бессмысленно. Чтобы посмотреть работу нашего кода нам надо встроить наш флеш-ролик в html-страницу. При этом код вставки флеш-приложений в html-страницу нам, скорее всего, придётся немного изменить. Дело в том, что для работы полноэкранного режима мы должны добавить в код вставки параметр allowFullScreen и присвоить этому параметру значение true. Тем самым мы разрешим перевод флеш-ролика в полноэкранный режим на данной веб-странице.
Код HTML:
<param name="allowFullScreen" value="true" />
<embed ... allowfullscreen="true" />
Не мудрствуя, я добавил данные параметры к коду вставки, который генерирует Adobe Flash CS5.5.
Код HTML:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="fullscreenas3" align="middle">
<param name="movie" value="fullscreenas3.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="fullscreenas3.swf" width="550" height="400">
<param name="movie" value="fullscreenas3.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Загрузить Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Теперь мы можем проверить работу нашего флеш-приложения:
Кликаем по кнопке, чтобы перейти в fullscreen-режим. Ещё раз кликаем по кнопке, чтобы выйти из него. Надеюсь, всё работает правильно в вашем браузере:-)
При переходе флеш-плеера в полноэкранный режим генерируется событие FullScreenEvent. Это событие можно отслеживать и использовать для ваших нужд. Например, давайте получим при переходе флеш-ролика в полноэкранный режим новые размеры нашего флеш-плеера.
Код ActionScript 3.0:
function onFullScreenEvent(event:FullScreenEvent):void
{
if (event.fullScreen == true)
{
txtField.text = "Ширина: "+stage.fullScreenWidth+"\nВысота: "+stage.fullScreenHeight;
}
else
{
txtField.text = "";
}
}
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullScreenEvent);
В приведённом фрагменте кода txtField - это динамическое текстовое поле, в котором отображаются новые размеры окна флеш-плеера после его перехода в полноэкранный режим.
Получили следующее флеш-приложение:
Есть ещё один важный момент, который надо упомянуть. Дело в том, что вид вашего флеш-ролика в полноэкранном режиме, кроме всего прочего, будет зависеть от настроек масштабирования данного флеш-ролика, то есть, в конечном счёте, от свойства scaleMode класса Stage. В предыдущих примерах мы не изменяли этого свойства. Давайте теперь его изменим на, например, значение StageScaleMode.EXACT_FIT и посмотрим, как это влияет на отображение флеш-ролика в fullscreen-режиме.
Код ActionScript 3.0:
/*
кнопка перехода в полноэкранный режим
*/
btn.addEventListener(MouseEvent.CLICK,onFullScreenFlash);
function onFullScreenFlash(event:MouseEvent):void
{
trace(stage.scaleMode)
/*
если флеш-плеер в данный момент не находится в полноэкранном режиме
*/
if (stage.displayState == StageDisplayState.NORMAL)
{
/*
изменяем значение scaleMode
*/
stage.scaleMode = StageScaleMode.EXACT_FIT;
/*
переходим в полноэкранный режим
*/
stage.displayState = StageDisplayState.FULL_SCREEN;
}
/*
иначе
*/
else
{
/*
выходим из полноэкранного режима
*/
stage.displayState = StageDisplayState.NORMAL;
}
}
Получится следующее:
Обратите внимание, что в данном ролике при переходе в полноэкранный режим содержимое ролика как-бы растягивается на весь экран и при этом могут нарушаться пропорции (это зависит от первоначальных пропорций флеш-ролика и разрешения вашего монитора).
Исходник под Adobe Flash CS5.5 и html-код вставки скачать можно здесь.