Как разместить flash-ролик над содержимым html-страницы?

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

Первым делом, нам понадобиться сама html-страница.

Код HTML:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /* Здесь будет таблица стилей. */ </style> </head> <body> <div id="content"> <div id="flash"> <object data="snow_transparent.swf" type="application/x-shockwave-flash" width="550" height="550"><param value="snow_transparent.swf" name="movie"><param name="wmode" value="transparent" /></object> </div> <h1>Демонстрация.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <img title="Зимний Псков" alt="Зимний Псков" src="winter_pskov.jpg" height="200" width="550"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>

На страницу я поместил текст-заглушку и изображение. Это сделано исключительно для целей тестирования. У вас содержимое страницы может быть любым.

Кроме этого, на страницу встроен флеш-объект - snow_transparent.swf. Это просто флеш-ролик с анимацией падающего снега. Этот ролик создан с помощью ранее упоминавшейся библиотеки на ActionScript 3.0 - смотри посты «Реалистичный эффект падающего снега на ActionScript 3.0» и «Реалистичный эффект падающего снега на ActionScript 3.0. Продолжение.».

Важно заметить, что в коде вставки флеш-объекта параметру wmode присвоено значение transparent. То есть флеш-ролик должен быть прозрачным. Это, естественно, сработает только в том случае, если на сцене самого флеш-ролика не будет непрозрачных объектов.

Ещё одним важным моментом является то, что ролик помещён внутрь контейнера div с id равным flash. Именно через id мы и будем в дальнейшем управлять нашим flash-роликом на html-странице. А управлять им мы будем с помощью CSS. Поэтому и переходим к рассмотрению таблицы стилей.

Код CSS:

* { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#ffffff; } body { background-color:#ffffff; } h1 { padding:10px; padding-top:30px; } p { padding:10px; } #content { background-color:#000000; position:relative; width:550px; margin:0 auto; } #flash { position:absolute; top:0px; left:0px; z-index:1; }

Что же у нас получилось? Смотрите сами - demo №1.

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

Если нам надо изменить положение флеш-ролика относительно блока content, то достаточно присвоить новые значения свойствам top и left. Для примера я присвоил свойству top значение 200 пикселей (px) и свойству left тоже 200 пикселей. Получившийся результат можно видеть здесь - demo №2.

Как видите, всё довольно просто. И при этом работает (проверено в нескольких браузерах). Скачать материалы к данному уроку можно здесь.

Автор: admin

Дата добавления: 2012-03-22

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-12-03
Можно так попробовать...

ActionScript 2.0:

Stage.scaleMode = "noScale";

ActionScript 3.0:

stage.scaleMode = StageScaleMode.NO_SCALE;
Комментатор
Комментарий добавил(а): Владимир
Дата добавления: 2012-12-03
Очень полезные уроки! Подскажите пожалуйста как запретить масштабирование флеш-ролика в браузере? Чтобы нельзя было уменьшать и увеличивать... Это необходимо, если есть движущийся джейпег-фон.
Комментатор
Комментарий добавил(а): Alex_M
Дата добавления: 2012-07-16
Очень классно!
Комментатор
Комментарий добавил(а): Dre
Дата добавления: 2012-06-17
Прикольно.нереально.красиво=)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-03-23
Хе-хе :-)

"Просто я", я тебя узнал :-)
Комментатор
Комментарий добавил(а): Просто я
Дата добавления: 2012-03-22
Просто нереально красиво.
Добавить комментарий:







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

Идиот-тест

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

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