Return to Unit Menu | | | Terms of Use  |

Scroll Background Image
Let's now animate (or scroll) the background image we used in the last lesson. This specific image was chosen because it lends itself to scrolling nicely without obvious interruptions or jumps in the display.

The image will be scrolling horizontally. The scrolling can move to the left or to the right. Vertical scrolling is also possible, but is not coded on this page. To scroll vertically, work with the y-coordinates instead of the x-coordinates.
When dealing with scrolling, there will be a problem as the image moves through the window. As the background starts to move, there will be empty (blank) space following along behind the image. The cure for this problem is to attach another copy of the background to follow behind the first image, and to continue these attachments.

To accomplish the left (or right) movement, the x-coordinate will be changing by a negative (or positive) value. Keep this value small to prevent a "jumping" appearance in the scroll. The sample below will use an x-coordinate movement of 1 pixel at a time.
(Adding a negative value moves left. Adding a positive value moves right.)

Sample Coding



Return to Unit Menu | | | Terms of Use  |

Notice: These materials are free for your on-line use at this site, but are not free for the taking.
Please do not copy these materials or re-post them to the Internet, as it is copyright infringement.
If you wish hard-copies of these materials, refer to our subscription area,
Help us keep these resources free. Thank you.