Анимация изображений в HTML

Анимационный GIF является обыкновенным графическим файлом. Дело
в том, что подобный файл состоит из нескольких изображений, которые через браузер последовательно выводятся на экран. Чтобы создать анимационную картинку, необходимо сначала создать картинки, из которых будет состоять результирующий файл. Эти картинки можно сделать, например, в Adobe Photoshop.

Для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация могут использоваться теги <OBJECT> и <EMBED>.

Например, подгрузить картинку в документ можно следующим образом:

<object data="fract.jpg" type="image/jpeg"> текст фрактала</object>

Атрибут data указывает местоположение данных для объекта, атрибут type указывает тип содержимого image – изображение, jpeg – тип изображения. Текст, заключенный в тег <OBJECT></OBJECT>, отобразится, если браузер не сможет отобразить объект-картинку.

Чтобы подгрузить видеоклип, запишем аналогично:

<object data="film.mpeg" type="application/mpeg"> фильм </object>

Тэг <EMBED> поддерживается на данный момент почти всеми браузерами
и используется, как и тег <OBJECT>, для внедрения объектов в документ.
Рассмотрим внедрение музыкального файла в документ:

<embed src="music.mid" width="40" height="30"

autostart="false" loop="true"

play_loop="5" hidden="false">

</embed>

В теге могут использоваться атрибуты: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали), hidden=”true” (false) – отображать указанный объект, type=” image/jpeg” – тип подгружаемого объекта, pluginspage=”http://…” – путь к плагину (plugin – небольшая программка, выполняющая какие-либо дополнительные функции. Например, чтобы проиграть flash-анимацию, браузеру нужен плагин, к которому мы указываем путь на случай отсутствия в браузере).

Рассмотрим пример вставки flash-анимации в документ:

<ENBED src="someMovie.swf" quality=high bgcolor=#FFFFFF WIDTH=500 HEIGHT=400 swLiveConnect=true NAME=yourMovie TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/Shockwave/download/

index.cgi?Pl_Prod_Version=ShockwaveFlash">

</EMBED>

Для тега <OBJECT> четыре параметра (HEIGHT, WIDTH, CLASSIC и CODEBASE) являются атрибутами и записываются внутри тега <OBJECT>, а все остальные записываются отдельно в виде тегов <PARAM>. Например:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"

WIDTH="100"

HEIGHT="100"CODEBASE="http://active.macromedia.com/flashS/

cabs/swflash.cab#version=5,0,0,0">

<PARAM NAME="MOVIE"VALUE="moviename .swf">

<PARAM NAME="PLAY"VALUE="true">

<PARAM NAME="LOOP"VALUE="true">

<PARAM NAME="QUALITY"VALUE="high">

</OBJECT>

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100