Я думаю, что вы неоднократно наблюдали на различных сайтах, как флеш-анимацию размещают над содержимым веб-страницы для реализации каких-то декоративных эффектов. Сегодня мы рассмотрим простой способ сделать что-то подобное.
Первым делом, нам понадобиться сама 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.
Как видите, всё довольно просто. И при этом работает (проверено в нескольких браузерах). Скачать материалы к данному уроку можно здесь.
Рейтинг поста: 
ActionScript 2.0:
Stage.scaleMode = "noScale";ActionScript 3.0:
stage.scaleMode = StageScaleMode.NO_SCALE;