Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cs101 Lec41

    Transféré par

    Fahad Nabeel
    24 vues53 pages
    This document discusses images and animation in web development. It covers adding images to HTML using the <IMG> tag and manipulating images in JavaScript using the Image object. Methods like preloading images are described to create animations. Examples are provided to cycle through multiple images to produce simple animations and provide controls to speed up or slow down the animation. Other animation techniques like Flash and SVG are also mentioned. The goal of the lecture is stated to be learning how to add and manipulate images and basic animations to a web page.

    Description originale:

    Titre original

    Cs101_Lec41

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPS, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    This document discusses images and animation in web development. It covers adding images to HTML using the <IMG> tag and manipulating images in JavaScript using the Image object. Methods like preloading images are described to create animations. Examples are provided to cycle through multiple images to produce simple animations and provide controls to speed up or slow down the animation. Other animation techniques like Flash and SVG are also mentioned. The goal of the lecture is stated to be learning how to add and manipulate images and basic animations to a web page.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPS, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    24 vues53 pages

    Cs101 Lec41

    Transféré par

    Fahad Nabeel
    This document discusses images and animation in web development. It covers adding images to HTML using the <IMG> tag and manipulating images in JavaScript using the Image object. Methods like preloading images are described to create animations. Examples are provided to cycle through multiple images to produce simple animations and provide controls to speed up or slow down the animation. Other animation techniques like Flash and SVG are also mentioned. The goal of the lecture is stated to be learning how to add and manipulate images and basic animations to a web page.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPS, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 53

    CS101 Introduction to Computing

    Lecture 41
    Images & Animation (Web Development Lecture 14)
    1

    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
    3

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

    Two Types of String Methods


    1. HTML Shortcuts 2. All Others

    String Methods: HTML Shortcuts


    big( ) small( ) fontsize( n )
    sub( ) sup( )

    bold( ) italics( ) strike( )

    link( URL )

    fixed( ) fontcolor( color )

    String Methods: All Others


    toLowerCase( ) toUpperCase( ) charAt( n ) substring( n, m )

    indexOf( substring, n ) lastIndexOf( substring, n )

    split( delimiter )
    7

    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 8 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 9

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


    6.283185307179586

    document.write( "Yes" ^ 43 ) ;
    NaN
    10

    The toString Method


    Explicit conversion to a string
    EXAMPLE: Convert 100.553478 into a currency format

    a = 100.553478 ; 100.55 b = a.toString( ) ; decimalPos = b.indexOf( ".", 0 ) ; c = b.substring( 0, decimalPos + 3 ) ; document.write( c ) ;


    11

    Conversion from Strings


    parseInt( ) and parseFloat( ) methods

    12

    Todays Goal (Images & Animation)


    To become able to add and manipulate images and simple animations to a Web page

    13

    Images in HTML
    It is quite straight forward to include gif and jpg images in an html Web page using the <IMG> tag

    Format: <IMG src=URL, alt=text height=pixels width=pixels align="bottom|middle|top">


    Plea: Dont use images just for the sake of it!
    14

    15

    <HTML><HEAD> <TITLE>Image Demo</TITLE> </HEAD><BODY>

    <H1>Image Demo</H1>
    Here is an image <IMG src="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>
    16

    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.
    17

    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

    18

    The Image Pre-Loading Process


    1. An instance of the Image object is created using the new keyword 2. The src property of this instance is set equal to the filename of the image to be pre-loaded 3. That step starts the down-loading of the image into the cache without actually displaying it 4. 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 pre19 fetched image

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

    20

    ****

    21

    22

    die1.gif

    die2.gif

    die3.gif

    die4.gif

    die5.gif

    die6.gif
    23

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

    <BODY > HTML Code </BODY>

    24

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


    <FORM> <INPUT type="button" value="Roll the Die" onClick="rollDie( )"> </FORM>

    25

    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 ; }
    26

    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

    27

    28

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

    29

    dieImg = new Array( 7 ) ;


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

    30

    <IMG name="big" src="die6.gif" width="252" height="252"><P> <IMG src="die1.gif" width="63" height="63" onMouseOver= "document.big.src=dieImg[ 1 ].src"> <IMG src="die6.gif" width="63" height="63" onMouseOver= 31 "document.big.src=dieImg[ 6 ].src">

    Where Else Can We Use This?


    Automobile Web site ???

    32

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

    33

    10

    11

    12

    13

    14

    15

    16
    34

    35

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

    36

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

    37

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

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

    40

    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

    41

    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

    42

    43

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

    44

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

    gap = 100 ; imageN = 1 ; circImg = new Array( 17 ) ;

    No change

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

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

    No change

    47

    function slowDown( ) {
    gap = gap + 20 ;

    Two new functions

    if( gap > 4000 ) gap = 4000 ;


    } function speedUp( ) { gap = gap - 20 ; if( gap < 0 ) gap = 0 ;

    48

    49

    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
    50

    Structured Vector Graphics


    New format; may become more popular than Flash Plug-in required Text-file storage; search engine friendly

    51

    During Todays Lecture


    We became able to add and manipulate images and simple animations to a Web page

    52

    Our

    th 15

    & 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

    53

    Vous aimerez peut-être aussi