CS101 Introduction to Computing Lecture 41 Images & Animation (Web Development Lecture 14)

CS101 Introduction to ComputingLecture 41Images & Animation(Web Development Lecture 14)

During the last lecture we discussed String Manipulation • We became familiar with methods used for manipulating strings • We became able to solve simple problems involving strings

String Manipulation in JavaScript • In addition to the concatenation operator (+) JavaScript supports several advanced string operations as well • Notationaly, these functions are accessed by referring to various methods of the String object • Moreover, this object also contains the ‘length’ property

String Methods FORMAT string.methodName( ) EXAMPLE: name = “Bhola” ; document.write( name.toUpperCase( ) ) ; document.write( name.bold( ) ) ; BHOLABhola

Two Types of String Methods • HTML Shortcuts • All Others

String Methods: HTML Shortcuts big( ) small( ) fontsize( n ) bold( ) italics( ) strike( ) link( URL ) sub( ) sup( ) fixed( ) fontcolor( color )

String Methods: All Others charAt( n ) substring( n, m ) toLowerCase( ) toUpperCase( ) split( delimiter ) indexOf( substring, n ) lastIndexOf( substring, n )

Automatic Conversion to Strings • Whenever a non-string is used where JavaScript is expecting a string, it converts that non-string into a string • Example: • The document.write( ) method expects a string (or several strings, separated by commas) as its argument • When a number or a Boolean is passed as an argument to this method, JavaScript automatically converts it into a string before writing it onto the document

The ‘+’ Operator • When ‘+’ is used with numeric operands, it adds them • When it is used with string operands, it concatenates them • When one operand is a string, and the other is not, the non-string will first be converted to a string and then the two strings will be concatenated

Strings In Mathematical Expressions When a string is used in a mathematical context, if appropriate, JavaScript first converts it into a number. Otherwise, a “NaN” is the result document.write("2"* Math.PI ) ; document.write( "Yes" ^ 43 ) ; 6.283185307179586 NaN

The ‘toString’ MethodExplicit conversion to a string EXAMPLE: Convert 100.553478 into a currency format a = 100.553478 ; b = a.toString( ) ; decimalPos = b.indexOf(".", 0 ) ; c = b.substring( 0, decimalPos + 3 ) ; document.write( c ) ; 100.55

Conversion from StringsparseInt( ) and parseFloat( ) methods

Today’s Goal(Images & Animation) • To become able to add and manipulate images and simple animations to a Web page

Images in HTML • It is quite straight forward to include gif and jpg images in an html Web page using the <IMG> tag • Format: <IMGsrc=URL, alt=text height=pixelswidth=pixels align="bottom|middle|top"> • Plea: Don’t use images just for the sake of it!

<HTML><HEAD> <TITLE>Image Demo</TITLE> </HEAD><BODY> <H1>Image Demo</H1> Here is an image <IMGsrc="die5.gif"> <IMG src="die5.gif" height="63" width="126"> <P> Here is another <IMG align="middle"src= "http://www.vu.edu.pk/images/logo/logotop.jpg"> </BODY></HTML>

Images in JavaScript • Images in JavaScript can be manipulated in many ways using the built-in object Image • Properties: name, border, complete, height, width, hspace, vspace, lowsrc, src • Methods: None • Event handlers:onAbort, onError, onLoad, etc.

Image Preloading • The primary use for an Image object is to download an image into the cache before it is actually needed for display • This technique can be used to create smooth animations or to display one of several images based on the requirement

The Image Pre-Loading Process • An instance of the Image object is created using the new keyword • The src property of this instance is set equal to the filename of the image to be pre-loaded • That step starts the down-loading of the image into the cache without actually displaying it • When a pre-loaded image is required to be displayed, the src property of the displayed image is set to the src property of the pre-fetched image

Let us revisit an example that we first saw in lecture 35

* * * *

die1.gif die2.gif die3.gif die4.gif die5.gif die6.gif

<HTML> <HEAD> <TITLE>Roll the Die</TITLE> <SCRIPT> JavaScript Code </SCRIPT> </HEAD> <BODY > HTML Code </BODY> </HTML>

<IMG name="die"src="die6.gif"> <FORM> <INPUT type="button" value="Roll the Die" onClick="rollDie( )"> </FORM>

dieImg = new Array( 7 ) ; for( k = 1; k < 7; k = k + 1 ) { //Preload images dieImg[ k ] = new Image( ) ; dieImg[ k ].src = "die" + k + ".gif" ; } function rollDie( ) { dieN = Math.ceil( 6 * Math.random( ) ) ; document.die.src = dieImg[ dieN ].src ; }

Another Example • Develop a Web page that displays six thumbnail images and a main image • The main image should change to a larger version of the thumbnail as soon as the mouse moves over on a thumbnail image

<HTML> <HEAD> <TITLE>Image Selector</TITLE> <SCRIPT> JavaScript Code </SCRIPT> </HEAD> <BODY > HTML Code </BODY> </HTML>

dieImg = new Array( 7 ) ; for( k = 1; k < 7; k = k + 1 ) { // Preload images dieImg[ k ] = new Image( ) ; dieImg[ k ].src = "die" + k + ".gif" ; }

<IMGname="big" src="die6.gif"width="252" height="252"><P> <IMGsrc="die1.gif" width="63" height="63" onMouseOver= "document.big.src=dieImg[ 1 ].src"> … … <IMGsrc="die6.gif" width="63" height="63" onMouseOver= "document.big.src=dieImg[ 6 ].src">

Where Else Can We Use This? • Automobile Web site • ???

Animation Example 1 • Take 16 images and cycle through them to create an animation effect

2 4 1 3 6 8 5 7 10 12 9 11 14 16 13 15

<HTML> <HEAD> <TITLE>Animation 1</TITLE> <SCRIPT> JavaScript Code </SCRIPT> </HEAD> <BODY > HTML Code </BODY> </HTML>

setTimeout( ) executes circulate( ) once after a delay of gap milliseconds <CENTER> <IMG name="circle"src="circle1.gif"onLoad="setTimeout( 'circulate( )', gap)"> </CENTER>

gap = 100 ; imageN = 1 ; circImg = new Array( 17 ) ; for( k = 1; k < 17; k = k + 1 ) { // Preload images circImg[ k ] = new Image( ) ; circImg[ k ].src = "circle" + k + ".gif" ; }

function circulate( ) { document.circle.src = circImg[ imageN ].src ; imageN = imageN + 1 ; if( imageN > 16 ) imageN = 1 ; }

Animated Gifs • We could have saved the 16 gif images of the previous example in a single file in the form of an animated gif, and then used it in a regular <IMG> tag to display a moving image • However, JavaScript provides better control over the sequencing and the gap between the individual images

Animation Example 2 • Take 16 images and cycle through them to create an animation effect • Provide buttons to slow down or speed up the animation

<HTML> <HEAD> <TITLE>Animation 2</TITLE> <SCRIPT> JavaScript Code </SCRIPT> </HEAD> <BODY > HTML Code </BODY> </HTML>

<CENTER> <IMG name="circle"src="circle1.gif"onLoad="setTimeout( 'circulate( )', gap)"> </CENTER> <FORM> <INPUT type="button" value="Slow Down" onClick="slowDown( )"> <INPUT type="button" value="Speed Up" onClick="speedUp( )"> </FORM>

No change gap = 100 ; imageN = 1 ; circImg = new Array( 17 ) ; for( k = 1; k < 17; k = k + 1 ) { // Preload images circImg[ k ] = new Image( ) ; circImg[ k ].src = "circle" + k + ".gif" ; }

No change function circulate( ) { document.circle.src = circImg[ imageN ].src ; imageN = imageN + 1 ; if( imageN > 16 ) imageN = 1 ; }

Two new functions function slowDown( ) { gap = gap + 20 ; if( gap > 4000 ) gap = 4000 ; } function speedUp( ) { gap = gap - 20 ; if( gap < 0 ) gap = 0 ; }

Flash Animation • Designed for 2-D animations, but can be used for storing static vector-images as well • A special program (called a plug-in) is required to view Flash files in a Web browser • Can be used to design complete, animated Web sites with hardly any HTML in it • Binary-file storage

CS101 Introduction to Computing Lecture 41 Images & Animation (Web Development Lecture 14)