Untitled Document

Other Forms of HTML (supported) based Animation/Interactivity/Graphics

How is Animation achieved usually --- without HTML

There are forms of media (flash, animated gif) that can be added to your web-pages besides images, sound and video.

Also, languages like JavaScript can be used to achieve annimation. CSS can also be used like JavaScript on the clientside to
achieve animation.

Also, you can do server side programming to achieve it

There is A LOT of interactivity that you can do with CSS, JavaScript on the client side. We are not
going to feature that here (except to mention canvas below) -- instead we are
focusing on some simple things you do with mostly HTML. See discussion on CSS, and JavaScript
for client-side interactivity/ animations. This is just the "TIP" of the iceberg.

Canvas

Canvas is new from HTML 5 --- it allows for drawing on a canvas. It uses JavaScript

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
Your browser does not support the canvas element.

Above is a canvas Shown filled in with red --- if your browser supports canvas. Here is the code that produced it:

<canvas id="myCanvas" style="display:none"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
See w3schools.com for more examples of canvas drawing ---but, it is your imagination.
Look at the Context object to see what JavaScript methods exist for drawing (i.e. drawImage, drawLine, etc).

Animated Marquee

Is a line of scrollig text that moves from one side of the pageto another.

see browsers for conditional support.

In other browsers will just see text. To produce this affect for other browsers you must either create an animated gif or a Java applet or JavaScript.
Here is an example: CST102 is a Cool Class!
How to do:

Simply surround the text with the <Marquee> and </Marquee>tags.

Options to the Marquee tag:
bgcolor
can set the background color of marquee area.
HEIGHT, WIDTH
size of bounding box either in percentage or pixels.
HSPACE, VSPACE
determine space around marquee area and surrounding text.
ALIGN
determines how surrounding text appears in relation to marquee area.

Animation/Presentation Slides: Client Pull and Server Push of Pages

This is an easy way of creating an animation or a presentation where theuser simply view slides that automatically change.

The user doesn't have to lick on anything...they just have to sit back and "enjoythe show".

For small animations this kind of animation may be better achieved with Animated Gif image.

For larger presentations, a more efficient implimentation can be achieved withJava or using Shockwave (shockwave is a method of taking a multimedia presentaton/product and converting it for presentation on the web). The problemwith both of these is you need advanced knowledge of programming or multimediatool use. An advantage of usig Java or Shocking a multimedia product is that youcan also have added interactivity if appropriate.

Client Pull
this causes the browser to load the same page or a different pageautomatically after a certain amount of time has passed.

This technique fine for presentations...less good for animation.

how to do
Based on use of the Meta tag which is included in the Head tags before the Body tags. The attribute of Meta that produces this client pull is HTTP-EQUIV Below is an example that shows how after the current page is loaded it will load page2.htm.

<HTML> <HEAD><TITLE> Slide 1 </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="4;URL="http://www.monterey.edu/students/CLASSES/CST102/Lecture10-HTML/Animation/page2.htm" </HEAD> ..............
In the example above, the HTTP-EQUIV="Refresh" tells the browserwe are going to be doing a Client Pull and to "refresh" the browser with a newpage specified by the CONTENT attribute. Note that the 4 afterwardsmeans to wait 4 units of time (what this acutally means will varry greatlyas a function of your machine, your Internet connection, the network traffic, etc)the URL must be a complete URL not a relative path to a file!!!

Now in page2.htm you can also have a meta statement to load thenext page in the animation or presentation!

Example
Server Push
The connection between the server and browser remains open and the servercontinues to feed new pages over the connection. The server sends the first page, waits some amount of time and then sends the next page, and so on.

The new data sent can be an entire page or actually with images can repeatedly fill an area with a new image....hence creating an animation.

This is better than client pull for achieving animation as multiple iagescan load into a page repeatedly and possibly faster than client pull...for a smootheranimation sequence.

Using a Java Applet or shocking a multimedia file has replaced this form ofanimation or dynamic presentation because they usually will have greaterspeed (especially Java) than pushing out pages.

Works with a content-type called multipart/x-mixed-replacewhich is a special MIME type that indicates multiple pieces of data ma have different content-types (e.g. an html file or a GIF image or a sound file....all in one package

To create:
you must create a CGI script that sends the initial content-type of mutipart/x-mixed-replace and then sends each block of data sequentially.

READ our handouts on CGI scripts or the book FIRST before continuing

Example CGI script that will display 4 images one after another with pauses of 1 second in between. Must save this script in a cgi-bin diretory on yourWeb server (must ask webmaster for access). Then you must include thisscript in your webpage.
#!/bin/sh
echo "Content-type: multipart/x-mixed-replace;boundary=MyMarker"
echo
echo "MyMarker"
echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image1.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)


echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image2.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)


echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image3.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)


echo "Content-type: text/html"
echo "<HTML><HEAD><TITLE>Animation></TITLE></HEAD>"
echo "<BODY><br><br>"
echo "<CENTER>  <IMAGE src="image4.gif">   </CENTER>"
echo "</BODY>   </HTML>"
echo "MyMarker"
sleep(1)
Java Applet

This is a kind of Java program that you can include in your web-page

It can do everything from showing an animation, acting like a web-form, etc.

We have an entire class in CST that talks about how to create Java programs.Here we will discuss if you have a Java applet how you can include it in yourweb-page. Like with other kinds of media, if it is owned by someone else youmust ask for permission to use it!!!!

Java Applet Filenames

The filename for any applet always has the extension .class

For example,
myApplet.class

How to include in webpage

Wherever you want the applet to appear in your HTML type the following:

<APPLET CODE="myApplet.class" WIDTH=X HEIGH=X></APPLET>
where X and Y are pixel values determining the size of the applet region.

Sometimes you will pass parameters (information) to your applet. In this case, you will have one or more (for one or more parameters) <PARAM> tags Example when want to pass a color to the applet:<APPLET CODE="myApplet.class" WIDTH=X HEIGH=X> <PARAM NAME="color" VALUE="red"></APPLET>

Example

Where to find Java Applets and Get more info:
Java Soft