cs101 introduction to computing lecture 41 images animation web development lecture 14
Download
Skip this Video
Download Presentation
CS101 Introduction to Computing Lecture 41 Images & Animation (Web Development Lecture 14)

Loading in 2 Seconds...

play fullscreen
1 / 53

cs101 introduction to computing lecture 41 - PowerPoint PPT Presentation


  • 291 Views
  • Uploaded on

CS101 Introduction to Computing Lecture 41 Images & 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'cs101 introduction to computing lecture 41' - Leo


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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
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
String Methods

FORMAT

string.methodName( )

EXAMPLE:

name = “Bhola” ;

document.write( name.toUpperCase( ) ) ;

document.write( name.bold( ) ) ;

BHOLABhola

two types of string methods
Two Types of String Methods
  • HTML Shortcuts
  • All Others
string methods html shortcuts
String Methods: HTML Shortcuts

big( )

small( )

fontsize( n )

bold( )

italics( )

strike( )

link( URL )

sub( )

sup( )

fixed( )

fontcolor( color )

string methods all others
String Methods: All Others

charAt( n )

substring( n, m )

toLowerCase( )

toUpperCase( )

split( delimiter )

indexOf( substring, n )

lastIndexOf( substring, n )

automatic conversion to strings
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
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
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 method explicit conversion to a string
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

today s goal images animation
Today’s Goal(Images & Animation)
  • To become able to add and manipulate images and simple animations to a Web page
images in html
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!
slide16
<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
  • 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
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
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
slide23

die1.gif

die2.gif

die3.gif

die4.gif

die5.gif

die6.gif

slide24
<HTML>

<HEAD>

<TITLE>Roll the Die</TITLE>

<SCRIPT>

JavaScript Code

</SCRIPT>

</HEAD>

<BODY >

HTML Code

</BODY>

</HTML>

slide25
<IMG name="die"src="die6.gif">

<FORM>

<INPUT type="button" value="Roll the Die"

onClick="rollDie( )">

</FORM>

slide26
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
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
slide29
<HTML>

<HEAD>

<TITLE>Image Selector</TITLE>

<SCRIPT>

JavaScript Code

</SCRIPT>

</HEAD>

<BODY >

HTML Code

</BODY>

</HTML>

slide30
dieImg = new Array( 7 ) ;

for( k = 1; k < 7; k = k + 1 ) { // Preload images

dieImg[ k ] = new Image( ) ;

dieImg[ k ].src = "die" + k + ".gif" ;

}

slide31
<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
Where Else Can We Use This?
  • Automobile Web site
  • ???
animation example 1
Animation Example 1
  • Take 16 images and cycle through them to create an animation effect
slide34

2

4

1

3

6

8

5

7

10

12

9

11

14

16

13

15

slide36
<HTML>

<HEAD>

<TITLE>Animation 1</TITLE>

<SCRIPT>

JavaScript Code

</SCRIPT>

</HEAD>

<BODY >

HTML Code

</BODY>

</HTML>

slide37

setTimeout( ) executes circulate( ) once after a delay of gap milliseconds

<CENTER>

<IMG name="circle"src="circle1.gif"onLoad="setTimeout( \'circulate( )\', gap)">

</CENTER>

slide38
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" ;

}

slide39
function circulate( ) {

document.circle.src =

circImg[ imageN ].src ;

imageN = imageN + 1 ;

if( imageN > 16 )

imageN = 1 ;

}

animated gifs
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
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
slide44
<HTML>

<HEAD>

<TITLE>Animation 2</TITLE>

<SCRIPT>

JavaScript Code

</SCRIPT>

</HEAD>

<BODY >

HTML Code

</BODY>

</HTML>

slide45
<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>

slide46

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" ;

}

slide47

No change

function circulate( ) {

document.circle.src =

circImg[ imageN ].src ;

imageN = imageN + 1 ;

if( imageN > 16 )

imageN = 1 ;

}

slide48

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
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
structured vector graphics
Structured Vector Graphics
  • New format; may become more popular than Flash
  • Plug-in required
  • Text-file storage; search engine friendly
during today s lecture
During Today’s Lecture …
  • We became able to add and manipulate images and simple animations to a Web page
our 15 th final web dev lecture programming methodology
Our 15th & Final Web Dev Lecture:(Programming Methodology)
  • To understand effective programming practices that result in the development of correct programs with minimum effort
  • To become familiar with simple debugging techniques
ad