Instructions
You can "animate" pictures by using setTimeout
combined with changing pictures :
picture.src="name.jpg"
In this example, there is a bear picture
on top of the big picture. There is a "left" (bear2.gif)
and a "right" (bear1.gif) version of the bear picture.
There is also a second penguin that faces left/right/left/right...
That is an exact copy of the other penguin. It dances, too.
It was created like this:
(1) Start with the arctic picture
(2) Upload the whole picture to
http://ipiccy.com
(3) CROP the penguin from the picture - this makes a copy
(4) Use the ERASE tool to erase the background, leaving just the penguin
(5) Save the result into the project folder, named PenguinA.png
You must use .png format, not .jpg, if you want the background to be invisible
(6) Now use the rotate/flip tool to flip the picture to face the other direction
(7) Save this picture as PenguinB.png
(8) Now use these commands to change the picture back and forth:
peng2.src = "PenguinB.png"
or
peng2.src = "PenguinA.png"
But make a loop that makes lots of switches.
penguinDance = function()
{
for(t=0;t <= 7000; t = t+400)
{
setTimeout("peng2.src='PenguinB.png'",t+200)
setTimeout("peng2.src='PenguinA.png'",t+400)
}
}