|
Easy Java Script Animation
By Stephen Bucaro
In this article, I show you how to create simple Java Script animations. The type of
animation you will learn to create can be used for advertising purposes or maybe to
create a children's animated ebook.
There are two kinds of animation, sprite animation and frame animation.
Frame animation is nothing more than a fast slide show. You create a set of slides or
frames with a small change in each frame. When the frames are displayed in
quick succession, the changes appears as motion.
Sprite animation is when you move one image, referred to as a sprite over a
background image. A sprite is a rectangular image, but the parts of the image where
you want the background to show through are made transparent. One sprite can move in
front of another sprite. The sprite closest to the viewer has the highest z order.
A good animation has sprite images that are themselves small frame animations moving over
a background. The example that I present here uses simple non-animated sprites. It is
possible to create animated sprites with Java Script, but I leave that for a future article.
One serious limitation of Java Script sprite animation is that you can't make a
sprite with a transparent background. You can make a non-rectangular sprite by making
parts of the image the same color as the background, thus faking transparency. This
means either your sprites will have to be rectangular, or you can't let one sprite
move in front of another sprite, or over background graphics. You can observe this
problem in the example animation shown below.
The first step is to create the graphics. For this example I use a simple graphic of
a blue circle for the sprite and a solid blue graphic for the background. To make the
rectangular sprite appear round, I color the areas outside the circle the same color
as the background. You don't have to use a plain colored background. But if the image
on your sprite is not rectangular, you need to carefully plan where you move your
sprite during the animation sequence.
The most important thing for you to understand in order to create an animation is pixel
coordinates. The origin of your computer screen is the upper-left corner. This location
has the coordinate x=0,y=0. As you move horizontally across the screen the x coordinate
increases. As you move down from the top of the screen the y coordinate increases.
You can determine your screen area by selecting Start | Settings | Control Panel,
open the Display utility and click on the Settings tab. If your screen
area is 1024 x 768 pixels, the coordinate of the center of your screen is x=612,y=384.
Your web browser window uses a similar coordinate system. The origin is the upper-left
corner of the browser window, below the tool bar. This location has a coordinate of
x=0,y=0. The browser window uses the same scale as the screen, but since the browser
window is re-sizable, it's area and the coordinates of its center can change.
To place your background image on your web page use the image tag as shown below.
<img src="background.gif">
To place your sprite on the screen, define a span as shown below.
<span id="ball1" style="position:absolute; visibility: visible; top:30; left:30; width:32; height:32; z-index:2"><img border=0 width=32 height=32 src="ball.gif"></span>
I have given the span the identifier ball1, and using style notation, defined
it's location in the browser window as x=30,y=30. In the example I created a second
span, containing the same ball image, but giving it the identifier ball2 and
setting the z-index to 1.
Note: You don't have to understand every attribute of the code here to use it. It's a
fact that all great programmers started out by copying and pasting code and playing
around with it until it does what they want.
| 
Free Downloads
RSS Feed