То что получится у нас в итоге можно посмотреть в примере ниже или скачать. Единственное, о чем хочу предупредить сразу - так как котейка выполнен во Flash, в браузерах использующих движок Хромиум, возможна не работа анимации. Вместо нее Вам будет предлагаться включить анимацию. Лично у меня, как и у многих Flash - анимация в Хроме и в Опере включена уже давно, но вдруг у кого это не так, то будет выводится сообщение с просьбой включить.
Пример сообщения из Opera .
Чтобы добавить такой блок себе на сайт, нужно сделать всего лишь несколько основных шагов. Для начала скачать архив с файлами, он доступен по кнопке выше. Залейте файлы на сайт, например туда, где лежат файлы страницы.
Теперь нужно, в зависимости от того, где вы хотите разместить котейку, добавить код вызова анимации. Открываете нужный вам файл и в его HTML код, добавляете следующие строки:
<div class="koteika"> <object type="application/x-shockwave-flash" data="kot.swf" allowfullscreen="true"> <param name="wmode" value="transparent" /> <embed src="kot.swf" /> <img src="koteika.png"> </object> </div>
Тут все просто. Анимация подключается через object, но сперва он заключен в блок с классом - koteika. Это как бы контейнер, фоном которого является трава и он задает позиционирование объекта на странице.
Во второй и четвертой строке, идет подключение флеш файла с анимацией - kot.swf. В нашем случаи все файлы лежат в той же папки что и страница, если у вас, например, они будут лежать в разных, то путь нужно указать соответственно, например papka/kot.swf.
Также в пятой строке подключается картинка koteika.png, которая будет выводится в случаи если в браузере не разрешена Flash анимации. Как и kot.swf тут тоже нужно указывать правильный путь, если файлы лежат не в той же папке что и файл в который вы добавили наш HTML код.
Следующим шагом будет добавление стилей для корректного отображение нашего блока с травой и котейкой. Для этого в свой файл стилей нужно добавить вот такой код. Если вы не очень ориентируетесь в файле стилей и не знаете где и что за что отвечает, то просто добавьте код в его конец.
.koteika {
width:500px;
height:180px;
position:absolute;
z-index:1;
left:50%;
margin-left:-250px;
background:url(green.png) no-repeat bottom;
}
.koteika object{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Стили можете править как угодно, в зависимости от вашей фантазии и потребностей. Можете заменить траву или вообще ее убрать, разместить анимацию в сайдбаре и тд, менять размеры блока, позиционирование и тд.
Как и писал в начале, это просто украшение для сайта и не больше. Сейчас уже Flash отходит на задний план и тот же движок Хромиум, что лежит в основе многих браузеров, часто по умолчании Flash не показывает. Все же, если Вы захотите, то всеравно можете установить себе эту анимацию на сайт.
На этом все, спасибо за внимание. 🙂
