HTML and CSS Reference
In-Depth Information
http
:
//138.23.124.165/collections/permanent/object_genres/photographers/muybridge/
contents.html#
What's interesting about Muybridge is that, in 1878, he was able to create movies using a
series of photographs. So, well before h omas Edison invented the motion picture, Muybridge
was making short movies (about 12 frames) giving us an animated view to the past. h e
University of California, Riverside, has preserved and animated Muybridge's work using
animated GIF i les online. To see how you can make animations using refresh pages, down-
load one of the animated GIF's from Muybridge's collection from the link above — locomo-
tion studies — and extract the 12 individual photographs from the GIF i le. You can extract
animated GIF images with Adobe Photoshop, Adobe Fireworks, and several other programs.
(Search on “extract images from animated GIF” in a search engine to i nd plenty of ways to
get the individual images. If you have a Mac, you can use the Preview application, and just
drag the individual images from Preview to a separate folder.)
Once you have extracted the individual GIF i les, set up your animation using the Refresh
state with the
meta
element in the
<head>
section of your program. To get started, use the
following HTML5 script (
an1.html
in this chapter's folder at
www.wiley.com/go/
smashinghtml5
).
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
meta http
-
equiv
=
”Refresh”
content
=
”0.1; URL=an2.html”
>
<
title
>
Image
1
</
title
>
</
head
>
<
body
>
<
img src
=
”an1.png”
alt
=
”one”
>
</
body
>
</
html
>
107
h e individual GIF i les were saved as
.png
i les and renamed
an1.png
through
an12.png
(the
an
is for animation). Likewise, the 12 HTML i les were named using the
an
preface from
an1.html
through
an12.html
. Once you're i nished, you'll have a walking horse. If you
link the 12th page back to the i rst, the horse just keeps on truckin.
