Animation for Web Pages

Objective Students will be able to make an animation for a web page using one of the available animators provided on the internet.

Objective Students will be able to identify web sites where information on animation is provided.

Objective Students will be able to identify web sites where free web page animators are provided.

Introduction

One of the ways to make a web page more attractive is through animation. There are different methods and utilities that can make animation possible. It is possible to make animations using free software downloaded from the internet. There are many sites that provide tutorials on animation and links to software that can be downloaded to make web page animations.

Activity

Link to the following web sites and read the information provided.

Michael Schrenk’s javascript animation tutorial

Web page animation using javascript

Javascript source

Javascript source tutorial

Tutorials on animation - This page describes how to make basic animation drawings. These drawings can then be sequenced and uploaded / embedded on a webpage.

http://www.csc.uvic.ca/~labspg/tours/ymt/makinganimation.html

Gif animator

http://members.aol.com/royalef/gifanim.htm

Gif animator tutorial

http://members.aol.com/royalef/gifmake.htm

Flash tutorial

http://www.echoecho.com/flash.htm

Flash download – try flash for 30 days for free from the Macromedia website.

Making animations – some of the links here do not work.

http://www.cs.ubc.ca/spider/ladic/animate.html

Assignment

Choose one of the animation methods and create an animation for a website.

Your chooses can include:

1) Animating images using a javascript code already located on the web.

2) Animating images using a gif animator

3) Animating images using flash

Write a paragraph describe which animator you choose and why you choose that particular animator. Include the advantages and disadvantages of your animation. For example why you may want to choose a javascript animation as opposed to a gif animation.

Here is an example using javascript animation

Javascript example math guy bounce

Javascript copied from http://javascript.internet.com/bgeffects/bouncing-image.html

Submission

When you have completed your assignment, save it as a web page

(htm extension) and send it to me as an attachment to an email.

Rubric

Your assignment will be graded on two aspects - the paragraph you wrote along with your animation example.

0 1 2 3

paragraph	No topic sentence. No arguments made.	A couple of good arguments.	Some good arguments but not all support your premise.	Paragraph well written with good arguments and good grammer
animation	Image shows no motion.	Image stops after one loop.	Image seems to be slow in loading.	Image loops properly and loads and runs correctly.