ActionScript 3.0 и полноэкранный режим

Думаю, все знают о такой возможности 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>

Теперь мы можем проверить работу нашего флеш-приложения:

Загрузить Adobe Flash Player

Кликаем по кнопке, чтобы перейти в 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 - это динамическое текстовое поле, в котором отображаются новые размеры окна флеш-плеера после его перехода в полноэкранный режим.

Получили следующее флеш-приложение:

Загрузить Adobe Flash Player

Есть ещё один важный момент, который надо упомянуть. Дело в том, что вид вашего флеш-ролика в полноэкранном режиме, кроме всего прочего, будет зависеть от настроек масштабирования данного флеш-ролика, то есть, в конечном счёте, от свойства 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 Player

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

Исходник под Adobe Flash CS5.5 и html-код вставки скачать можно здесь.

Автор: admin

Дата добавления: 2011-11-28

Просмотров: 9955

Рейтинг поста: +21-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-10-14
Увы, любителя. Но за похвалу спасибо - приятно :-)
Комментатор
Комментарий добавил(а): Александр
Дата добавления: 2014-10-14
Замечательный сайт, отличные статьи по AS. Чувствуются знания профессионала. Огромное спасибо за уроки!!!
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2014-06-22
Чтобы не дописывать ничего руками, лучше зайти в настройки публикации и поставить галочку "разрешить оконный режим".
Комментатор
Комментарий добавил(а): Виталий Брагин
Дата добавления: 2012-05-06
Спасибо за замечательный, полезный и легко понимаемый урок!!!!
Искал в гугле, потом вспомнил про этот сайт и сразу нашел что нужно! А главное, всё работает!!!!!!!!
С П А С И Б О !
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика