dmc 1623 web graphics

MCA(DISTANCE MODE)

DMC 1623

WEB GRAPHICS

COURSE MATERIAL

Centre for Distance EducationAnna University Chennai

Chennai – 600 025

Author

Reviewer

MrMrMrMrMrsssss. I. Mala. I. Mala. I. Mala. I. Mala. I. MalaLecturer

Department of Computer Science and EngineeringAnna University Chennai

Chennai - 600 025

DrDrDrDrDr.T.T.T.T.T.V.V.V.V.V.Geetha.Geetha.Geetha.Geetha.GeethaProfessor


Chennai - 600 025

DrDrDrDrDr.H.P.H.P.H.P.H.P.H.Peereereereereeru Mohamedu Mohamedu Mohamedu Mohamedu MohamedProfessor

Department of Management StudiesAnna University Chennai

Chennai - 600 025

DrDrDrDrDr.C.C.C.C.C. Chella. Chella. Chella. Chella. ChellappanppanppanppanppanProfessor


Chennai - 600 025

DrDrDrDrDr.A.K.A.K.A.K.A.K.A.KannanannanannanannanannanProfessor


Chennai - 600 025

Copyrights Reserved(For Private Circulation only)

Editorial Board

MrMrMrMrMr. T. T. T. T. T. R. R. R. R. RaaaaaghuvghuvghuvghuvghuveereereereereeraaaaaLecturer


Chennai - 600 025

ACKNOWLEDGEMENTS

The author has drawn inputs from several sources for the preparation of this course material, to meet the

requirements of the syllabus. The author gratefully acknowledges the following resources

1. Joel Sklar, “Principles of Web Design”, Course Technology, 1st edition, March 2000.

2. Dietel and Dietel, “Internet and World Wide Web How to Program”, Prentice Hall, 3 edition, 2003.

3. Edie Gose, “Introduction to PhotoShop 6” Springer, 2002.

4. Richard Schrand, “Photoshop 6 Visual Jumpstart”, Adobe Press 2000.

5. James L.Mohles, “Flash 5.0 Graphics, Animation & Interaction”, Macromedia 2000.

6. Ramesh Bangia, “Multimedia and Web Technologies”, FireWall Media Press, 2 edition, 2007.

7. www.w3schools.com

Mr.T.Raghuveera

Author

DMC 1623 WEB GRAPHICS

1. INTRODUCTION

HTML coding - Basic web graphics - Web page design and site building - Image maps - Adding multimedia

to the web.

2. PAINT SHOP PRO/PHOTOSHOP

Introduction - Image Basics - File Formats - GIF - JPEG - Color Palette - Layers - Creating new Images

- Brushes - Grids - Scaling Images - Moving and Merging Layers - Tool Palette - Screen capturing - Grey styling

- Using style Palette - Animation.

3. IMAGE HANDLING

Scanning Images - Adding Text to the images - Designing icons - Creating background images - Color

models - Color depths - Color calibration - Creating gradients - Oil paint effect.

4. MULTIMEDIA

Creating clippings - Animations with sound effects - Adding audio or Video - Windows Media Player

ActiveX Control - Agent control - Embedding VRML in a web page - Real Player ActiveX control.

5. APPLICATIONS

Creating web site with a particular theme using all the utilities - Graphics - Animations and Interaction.

TEXT BOOKS

1. Richard Schrand, “Photoshop 6 Visual Jumpstrat”, Adobe Press, 2000. (Unit 1,2 & 3)

2. James L. Mohles, “Flash 5.0 Graphics, Animation & Interaction”, Macromedia 2000. (Unit 4 & 5)

REFERENCES

1. Deitel, “Internet and World Wide Web How to program”, Prentice Hall 2003.

2. Robert Reinhardt, Jon Warren Lentz , “Flash 5 Bible”, Hungry Minds Inc, 2001.

i

CONTENTS

UNIT - I

INTRODUCTION TO WEB GRAPHICS

1.1 INTRODUCTION 1

1.2 LEARNING OBJECTIVES 1

1.3 HTML CODING 1

1.3.1 Text Formatting Using Html 2

1.3.2 Creating Hyperlinks 5

1.3.3 Html Tables 7

1.3.4 HTML Frames 8

1.3.5 HTML Forms 9

1.3.6 Embedding Images in HTML 10

1.3.7 Cascaded Style Sheets 12

1.4 BASICS OF WEB GRAPHICS 16

1.4.1 Graphics file formats - GIF, JPEG, PNG, SVG, and CGM 18

1.4.2 Optimizing web graphics 22

1.4.3 Web graphics software 23

1.5 WEB PAGE DESIGN AND SITE BUILDING 25

1.5.1 Web site design principles 25

1.5.2 Planning the site 32

1.5.3 Planning the site navigation 35

1.5.4 Creating page templates 36

1.6 IMAGE MAPS 39

1.7 ADDING MULTIMEDIA TO A WEB SITE 41

1.7.1 Text for the web 41

1.7.2 Images for the Web 42

1.7.3 Sound for the web 42

1.7.4 Animation for the web 43

UNIT – II

INTRODUCTION TO PHOTOSHOP2.1 INTRODUCTION 47


ii

2.3 IMAGE BASICS 47

2.4 KNOWING THE PHOTOSHOP INTERFACE 51

2.5 COLOR PALETTE 57

2.6 USING LAYERS 59

2.7 CREATING NEW IMAGES 67

2.8 BRUSHES 68

2.9 GRIDS AND GUIDES 75

2.10 SCALING OR RESIZING IMAGES 78

2.11 SCREEN CAPTURING 80

2.12 STYLES PALETTE 80

2.13 CREATING ANIMATION USING

PHOTOSHOP AND IMAGEREADY 82

UNIT - III

IMAGE HANDLIING IN PHOTOSHOP

3.1 INTRODUCTION 91


3.3 GRADIENT TOOL 91

3.4 ADDING TEXT TO IMAGES 94

3.5 CREATING BACKGROUND IMAGES 100

3.6 COLOR MODELS 103

3.7 COLOR CALIBRATION 108

3.7.1 To Display the Histogram for an Image 109

3.7.2. Levels 110

3.7.3 Auto Levels 111

3.7.4 Curves 111

3.7.5 Color Balance 113

3.7.6 Brightness and Contrast 114

3.7.7 Hue and Saturation 114

3.7.8 Desaturate and Replace Color 116

3.7.9 Channel mixer 117

3.7.10 Variations 118

3.8 OIL PAINT EFFECT 119

3.9 DESIGNING ICONS 122

iii

UNIT - IV

MULTIMEDIA4.1 INTRODUCTION 129


4.3 MEDIA EDITING SOFTWARE AND FILE FORMATS 129

4.3.1 Audio Editing 129

4.3.2 Video Editing 130

4.3.3 Sound Formats for Web 130

4.3.4 Video Formats for Web 131

4.3.5 Web Animation Software 132

4.3.6 Web Authoring Tools 133

4.3.7 Windows Media Formats 134

4.3.8 Audio and Video Players 135

4.4 CREATING CLIPPINGS 136

4.4.1 Types of Web Animation 136

4.4.2 Flash Work Environment 137

4.4.3 Creating Frame by Frame based Animations 141

4.5 ADDING SOUND EFFECTS TO YOUR ANIMATION 146

4.6 ADDING AUDIO OR VIDEO TO A WEB PAGE 147

4.6.1 Adding Background Sounds with the ‘Bgsound’ Element 148

4.6.2 Adding Video with the IMG Element’s Dynsrc Property 150

4.6.3 Using Embed Element to Add Audio 151

4.6.4 Using Embed Element to Add Video 152

4.7 USING WINDOWS MEDIA PLAYER ACTIVEX CONTROL 153

4.8 MICROSOFT AGENT CONTROL 156

4.8.1 Demonstration Of Microsoft Agent And The Lernout And Hauspie

Truvoice Text-To-Speech (Tts) Engine 156

4.8.2 Microsoft Voice Recognition Engine and Microsoft Agent 164

4.9 EMBEDDING REALPLAYER ACTIVEX CONTROL 171

4.10 EMBEDDING VRML INTO A WEB PAGE 173

UNIT - V

CREATING A WEBSITE WITH GRAPHICS

ANIMATION AND INTERACTIVITY5.1 INTRODUCTION 179


iv

5.3 SYMBOLS AND INSTANCES 179

5.3.1 Creating Symbols 180

5.3.2 Converting animation on the Stage into a movie clip 181

5.3.3 To Create a New Instance of a Symbol 181

5.3.4 To Use Buttons in Flash 182

5.4 CREATING INTERACTIVE MOVIES 184

5.4.1 Using the Action’s Panel 185

5.4.2 Assigning Actions to Objects 187

5.4.3 Using basic Actions For Navigation and Interaction 188

5.4.4 Basic and Frequently used Action Script Commands 189

5.5 CREATING A FLASH BASIC PRELOADER 193

5.5.1 Adding Preloader to an Existing Movie 196

5.6 CREATING A SIMPLE FLASH WEB SITE 198

5.6.1 Example - 1 198

5.6.2 Add Sound to Your Button 206

5.6.3 Creating a Simple Flash Web Site – Example 2 207

5.7 CREATING SIMPLE ANIMATIONS USING

HTML/DHTML/JAVASCRIPT 216

WEB GRAPHICS

NOTES

1 ANNA UNIVERSITY CHENNAI

UNIT - I

INTRODUCTION TO WEB GRAPHICS

1.1 INTRODUCTION

Web graphics is all about creating graphics for the web. Good web sites require aseamless integration of text, graphics and other media elements. Graphics capabilities of aweb site enhance the look and feel, and also is a visual treat to the user of the web site.There are many standardized graphical formats for use on the web. One just needs aMIME type so that the format is labeled correctly for transfer across the Web, GIF (GraphicsInterchange Format), JPEG (Joint Photographic Experts Group), PNG (Portable NetworkGraphics), SVG (Scalable Vector Graphics) are some of the standards. The graphics areembedded into a HTML page easily using HTML tags thereby creating web sites thatattract user attention. A wide variety of programming/scripting languages and softwaretools are available for creating graphics for web including HTML, CSS, JavaScript,DHTML, Java, Photoshop, PaintshopPro, Flash, Director, QuickTime, Dreamweaver,FrontPage etc.,. These tools aid create, edit, manipulate, and integrate graphics for web.

1.2 LEARNING OBJECTIVES

• To understand the basics of HTML including HTML tags, tables, frames, forms,CSS positioning.

• To study about the basics of web graphics

• To know the web page design principles

• To learn building a web site

• To understand the idea of image maps

• To study the means for adding multimedia to a web site

1.3 HTML CODING

HTML forms the basic work horse for creating all web related documents. HTML isHypertext Markup Language. Its tags provide formatting instructions i.e by marking up thecontent with its elements.HTML elements are defined using tags. The browsers are the

DMC 1623

NOTES


interpreters for the HTML code. The Internet Explorer 6 has support for HTML 4+extras,XHTML 1.0, JavaScript1.3+extras, CSS1+extensions, helper applications, ActiveXcontrols etc., HTML files have extensions .html or .htm and can be created using a texteditor like ‘notepad’ or a special editing software. See the first sample program below.

Sample.html

<html>

<head>

<title>sample</title>

</head>

<body>

This is a sample HTML page. <b>This text is bold</b>

</body>

</html>

The output of this program

Every HTML program should have the <html> as start tag and </html> as end tag.HTML tags are surrounded by the two characters < and >. The surrounding charactersare called angle brackets. HTML tags normally come in pairs like <b> and </b>. Thefirst tag in a pair is the start tag, the second tag is the end tag. The text between the startand end tags is the element content. HTML tags are not case sensitive, <b> means thesame as <B>.The <head> tag is used to store some meta information about the program.The content of the <title> tag is displayed in the tile bar of the browser window. Thepurpose of the <body> tag is to define the HTML element that contains the body of theHTML document. The content inside the <body> </body> is what is displayed in thebrowser.

1.3.1 Text Formatting Using Html

There are many tags for formatting text in HTML. Some of the tags have attributesand attributes can assume some values in a predefined format.

WEB GRAPHICS

NOTES


For ex: <font color=”red”> hello world</font> Here the font tag has the attribute‘color’ whose value is ‘red’ given in double quotes. This format is applied to the content of<font> tag i.e. ‘hello world’ which is finally rendered in red color. Some of the most frequentlyused tags are paragraph, font, bold, italic, pre, blockquote, center, underline, subscript,superscript, heading, br(line break), hr(horizontal ruler) etc., Here is a sample program fortext formatting using some of the formatting tags.

Formatting using basic tags

The output of this program is as shown below.

Textformat.html <html> <body bgcolor="yellow"> <b>This text is bold</b> <br> <p align="center"> hi how are you</p> <br> <pre> How you write and where are preserved.</pre> <br> <p> <font face="arial" color="blue"> helloworld</font></p> <br> <p><blockquote> Its raining heavily get an umbrella<blockquote></p></blockquote> <br> <!..this is commented text that will not be displayed..> <h1>This text is big</h1>

<br> <i> This text is italic </i> <br> This text contains <sub> subscript </sub> <br> This text contains <sup> superscript </sup> </body> </html>

DMC 1623

NOTES


Formatting using Lists

Lists can be either unoredered ,ordered or defintion.

An unordered list is a list of items. The list items are marked with bullets (typicallysmall black circles). An unordered list starts with the <ul> tag. Each list item starts with the<li> tag.

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

A definition list is not a list of items. This is a list of terms and explanation of the terms.A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag.Each definition-list definition starts with the <dd> tag.

Lists.html <html> <body> <h4>An Unordered List:</h4> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <h4>An ordered List:</h4> <ol> <li>one</li> <li>two</li> <li>three</li> </ol> <h4>Definition List:</h4> <dl> <dt>Sunday</dt> <dd>day of sun</dd> <dt>Tuesday</dt> <dd>Day of Mars</dd> </dl> </body> </html>

Output of the program.

WEB GRAPHICS

NOTES


1.3.2 Creating Hyperlinks

Text or image or any other graphic can be linked to another resource or web pageusing the anchor tag <a>.

The following statement is used to link text ‘clickme’ to the home page of‘www.yahoo.com’

<a href=”http:///www.yahoo.com”>clickme</a>

The following statement is used to link an image ‘clickme.jpg’ to the home page of‘‘www.yahoo.com

<a href=”http:///www.yahoo.com”><img src=”clickme.jpg”</img></a>

The following statement is used to see the content of the page at the given URL in anew blank page when the text link ‘clickme’ is clicked.

<a href=” http://www.yahoo.com” target=”_blank”>clickme</a>

The ‘name’ attribute is used to create a named anchor. When using named anchorswe can create links that can jump directly into a specific section on a page.

For ex: <a name=”chapter1"> content of chapter one</a> is a statement in a webpage at a particular URL say at www.chapters.com. From being within another web pageby writing the following statement one can directly jump to the section which is named as“chapter1” as shown below

<a href=”http://www.chapters.com#chapter1">click to see chapter 1</a>

If you want to jump to subsection within the ‘same’ document then use the followingstatement.

<a href=”#chapter1">chapter 1</a>

DMC 1623

NOTES


Sample program below to jump to a section within the same page.

Jumpwithin.html <html> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> </body> </html>

Output before clicking the link

After clicking the link Output

WEB GRAPHICS

NOTES


1.3.3 Html Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr>tag), and each row is divided into data cells (with the <td> tag). The letters td stands for“table data,” which is the content of a data cell. A data cell can contain text, images, lists,paragraphs, forms, horizontal rules, tables, etc.

DMC 1623

NOTES


1.3.4 HTML Frames

Frames are used to display more than one web page in the same browser window.Each HTML document is called a frame, and each frame is independent of the others. Thedisadvantages of using frames are

> The web developer must keep track of more HTML documents

> It is difficult to print the entire page

The <frameset> tag defines how to divide the window into frames. Each framesetdefines a set of rows or columns. The values of the rows/columns indicate the amount ofscreen area each row/column will occupy. <frameset> tag must be specified in the <head>section. You cannot use the <body></body> tags together with the <frameset></frameset> tags.

The <frame> tag defines what HTML document to put into each frame.

WEB GRAPHICS

NOTES


1.3.5 HTML Forms

The forms are used obtain user input. The form elements are those with which userinteracts. The elements are ‘textbox’, ‘checkbox’, ‘radio button’, ‘dropdown box’,‘textarea’, ‘password box’, and special buttons like ‘submit’, ‘reset’ etc.,

The most used form tag is <input>. ‘text’ box is for a single line input. ‘textarea’ is formultiline input, ‘password’ box is for the password field which is displayed in symbols.‘checkbox’ is to choose more than one option. ‘radio’ button is to select only one amongthe given options. ’select’ box is to select an item from a list. ‘submit’ button is special in thesense when it is clicked the form data is submitted to the server side program referred toby the ‘action’ attribute of the <form> tag. ‘reset’ button is to clear the form data for afresh entry.

DMC 1623

NOTES


1.3.6 Embedding Images in HTML

As we are dealing with graphics for web it is very important to know how to use anddisplay image data. The tag <img> is used to display images.

WEB GRAPHICS

NOTES


Image can also be added as background for the entire web page or for a table or fora cell in a table and so on.

The following statement is used to add a background image for a web page.

<body background=”tiles.jpg”>

HTML colors

HTML colors can be defined as a hexadecimal notation for the combination of Red,Green, and Blue color values (RGB). The value of the color attribute can be specified inany one of three ways. The name of the color itself, its rgb equivalent each specified as avalue between 0 to 255 and Hexadecimal value of the color with a # as prefix. The colorattribute can be used for font or text, for background of <body> or <table> or <td> etc.Any one of the following statement can be used to display a web page with yellowbackground.

For ex: <body bgcolor=”yellow”>

<body bgcolor=”rgb(255,255,0)”>

<body bgcolor=”#ffff00">

<html> <body> <p> <img src ="graphics_48x48.png" align ="left" width="48" height="48" alt="model" hspace="10" vspace="10"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src ="graphics_48x48.png" align ="right" width="48" height="48" alt="model" hspace="10" vspace="10"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html>

DMC 1623

NOTES


There are browser safe colors which are 216 standard colors that are displayedexactly as they are created across multiple platforms and browser types and versions.

1.3.7 Cascaded Style Sheets

The idea behind style sheets is to separate formatting information from content. Stylesheets contain style information that is used for displaying HTML elements. External stylesheet are saved with a .css extension. The type of style sheets are

Browser default

External

Internal

Inline

The advantages are

• External style sheets enable you to change the appearance and layout of all thepages in your web site, just by editing one single CSS document.

• A single style sheet can be used for formatting an entire web site.

• As a web developer you can define a style for each HTML element and apply it toas many web pages as you want thus saving a lot of time.

• Provides more consistency to a web site

• Cascading order is advantageous as one rule over rides other.

All of them cascade into one virtual style sheet which is finally applied to a web page.

The syntax of writing a style rule is

Selector {property: value}

Here ‘selector’ is any HTML element or tag and ‘property’ is the attribute and ‘value’is the value of the attribute. Property and its value are separated by a colon. If there aremore than one property-value pairs they can be separated with a semicolon.

Ex: p{color:blue;font-family:verdana;font-size:24}

The above example represents the syntax for a style rule that defines the font color,font family and font size attributes for paragraph element.

WEB GRAPHICS

NOTES


Example of using style sheet is as follows.

In the above program there is a <style> tag that is used for enclosing the style rule. An‘Internal style sheet’ is one where the style rules are enclosed inside <head> tag. In theabove example an Internal style sheet is used. If the style is to be applied as ‘Inline’ thenthe style rule must be written inline with the HTML element as below. The Inline stylesheetoverrides all other style sheets i.e the hierarchy is Inline, Internal, and External in that order.

<p style=”color:blue; font-family:verdana;font-size:14">blablabla</p>

If you want to have an external style sheet, write the style rule separately in a texteditor and save it with the extension .css. To link an external style sheet to a web page,write the following statement in the <head> section of the web page.

<link rel=”stylesheet” type=”text/css” href=”one.css”>

In the above statement there is a new tag <link> used to link an external style sheet toa web page. The attribute ‘rel’ is the relation and ‘type’ is the MIME type and ‘href’ is thehyperlink reference which is nothing but the URL of the style sheet.

The same style rule can be applied to more than one HTML element by grouping theselectors as below.

h1,h2,h3,h4{ color:blue;font-family:verdana}

As shown above the heading elements h1 to h4 are given the same style rule.

DMC 1623

NOTES


Class selector: If you wish to apply different styles to the same type of HTML elementthen class selector can be used.

Ex: p.one{color:blue;font-family:verdana;font-size:24}

p.two{color:yellow;font-family:arial;font-size:14}

In the above example there are two style rules for the same paragraph elementseparated using the class names ‘one’ and ‘two’ respectively. The classes can be referredas per the requirement using the following statement.

<p class=”one”>blablablablabla</p>

<p class=”two”>efghiefghiefghi</p>

Class selector can also be used such that one style rule is applicable to all the elementsthat belong to a particular class i.e. by removing the selector itself as below.

one { color:yellow;font-family:arial;font-size:14}

The above style will be applied to whichever element that refers this class inside.

ID selector

You can also define styles for HTML elements with the id selector. The id selector isdefined as #. The style rule below will match the element that has an id attribute with avalue of “green”:

#green {color:green}

The style rule below will match the p element that has an id with a value of “para1”:

p#para1{text-align: center;color: red}

CSS background

The css background properties define the background effects of an element. Thebackground can be either transparent, a color or an image. You can also set the position ofan image, if and how often the image should be repeated on the screen and whether itshould be fixed or scrolled relative to the canvas. The five properties set specific aspectsof the background while the sixth the background property, can be used to set all the firstfive properties in one declaration.

WEB GRAPHICS

NOTES


The following declaration uses the last property to set all the background propertiesat once for a paragraph element.

P{background-color:gray;

background-position:50%;

background-repeat:repeat;

background-attachemnt:scroll}

CSS text properties

The CSS text properties allow you to control the appearance of text. It is possible tochange the color of a text, increase or decrease the space between characters in a text,align a text, decorate a text, indent the first line in a text, and more.

DMC 1623

NOTES


What have you understood?

1. How to use text formatting in HTML?

2. How to embed images in HTML?

3. What are the advantages of CSS over HTML?

4. How do you create frames in HTML? Discuss the advantages anddisadvantages of using frames.

5. How do you create forms in HTML? What are the various FORM elements?

6. How do you create hyperlinks in HTML?

7. What is the cascading order of style sheets? Give an example.

8. Discuss about CSS text and background properties.

1.4 BASICS OF WEB GRAPHICS

The two variants of graphics are raster graphics and vector graphics. Raster graphicsuses pixel information for representing and displaying the images or graphics, while vector

attribute Value description

Color color or hex value or rgb value

Sets the color of a text

line-height

normal number length %

Sets the distance between lines

letter-spacing

normal length

Increases or decreases the spacing between characters

text-align

left right center justify

Aligns the text in an element

text-decoration

none underline overline line-through blink

Add decoration to text

text-indent length %

To set all the above background properties at once

text-transform

none capitalize uppercase lower case

Controls the letters in an element

word-spacing

normal length

Increases or decreases the space between words

WEB GRAPHICS

NOTES


graphics uses mathematical representations of images. Raster graphics is resolutiondependent while vector graphics is not. Graphics can be 2D or 3D.

Let us first know some of the very common terms associated with graphical images.

Color Depth

The amount of color used to create color on display is called the color depth. If yourmonitor can display 8 bits of data in each of the 3 color channels (R,G,B) it has a 24-bitcolor depth (8x3=24). 24 bit images can contain almost 17 million different colors and arecalled true color images. But many monitors cannot display 24-bit images. Some haveonly 16 bit color depth (high color) and some have only 8-bit color depth. If your monitordoes not support the full color depth of an image the browser must resort to mixing colorsthat attempt to match the original colors in the image.

Dithering

The browsers must mix its own colors when you display a 24-bit image on an 8-bitmonitor, or in a file format that does not support 24-bit color. Since the 8-bit monitor hasfewer colors to work with, the browser must try to approximate the missing colors bycreating colors from the ones the browser already has. This type of color mixing is calleddithering. Dithering occurs when the browser encounters a color that it does not support.Dithered images often appear grainy and pixilated. The dithering will be most apparent ingradations, feathered edges, or shadows. One way to control the dithering process is tocreate images that use non-dithering colors. The 216 non-dithering colors that are sharedby PCs and Mac’s are called the web palette or browser-safe colors. If you are creatinggraphics for web, to avoid trouble use the web palette as your color palette for all flat-color areas of your graphics.

Resolution

The number of pixels per inch of an image measure in ‘ppi’ (pixels per inch), formonitors it is measure in ‘dpi’ (dots per inch).

Antialiasing

This effect is only seen in raster based graphics. Because images are created usingpixel, gridded squares, images that aren’t square can appear jagged. The distinct divisionbetween pixels is called “alias,” so many graphics programs use a technique called “anti-aliasing” to create the illusion of smoothness. Curved shapes and text should always beanti-aliased to maintain a clean and presentable look

DMC 1623

NOTES


Let us understand the basics through the following topics

>Graphics file formats and standards - GIF, JPEG, PNG, SVG, and CGM

>Optimizing web graphics

>web graphics software

1.4.1 Graphics file formats - GIF, JPEG, PNG, SVG, and CGM

The three popular file formats for the web are GIF (Graphics Interchange Format),JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics).Knowing which file format to use for which type of image is important. If you choose thewrong file type, your image will not compress or appear as you expect. Color depth is animportant factor in image file formats which describe the number of bits of informationused per pixel. The greater the color depth, the greater the number of colors that can bedisplayed. JPEG supports 24-bit color, GIF supports 8-bit color and PNG supports both8-bit and 24-bit color.

GIF

This is designed for online delivery of graphics. GIF uses a lossless compressiontechnique called LZW, meaning that no color information is discarded when the image iscompressed. The color depth of GIF is 8-bit allowing a palette of no more than 256colors. In fact the fewer colors you use, the greater the compression, which results insmaller file size. The GIF file format excels at compressing and displaying flat color areas,making it the logical choice for line art and color graphics. Because of its limited colordepth, GIF is not the best file format for photographs or more complex graphics that havegradations of color, such as shadows and feathering. The registered MIME type for GIF isimage/gif .

GIF Transparency: With GIF files you can choose one color in an image to appear astransparent in the browser. The background color or pattern will show through the areasthat you have designated as transparent. Using transparent areas allows you to creategraphics that appear to have an irregular outside shape, rather than being bounded by arectangle.

WEB GRAPHICS

NOTES


GIF Animation: The GIF animation format lets you store multiple images and timinginformation about the images in a single file. This means that you can build animationsconsisting of multiple static images that play continuously, creating the illusion of motion.When you create a GIF animation, you can determine the time between frames and thenumber of times the animation plays. With a little imagination, you can create all types ofeffects including text scrolls, color changes, animated icons, and slide shows. A series ofindividual GIFs can be combined to play as an animated GIF. The final GIF animation fileis a single file with the extension .GIF.

GIF animation is somewhat limited to the results of other proprietary animation toolssuch as Macromedia Shockwave or Flash, which can play synchronized sounds and allowweb users to interact with the animation. Creating animations with these applications howeverrequires browser plug-ins, and viewing the animations demands heavy download times.Unlike most proprietary tools, you don’t need any special plug-ins to view animated GIFs,and if you limit color and motion when creating your animations, you can keep your filesizes small for faster downloads.

> GIF’s are suitable for sharp-edged line art (such as logos) with a limited number ofcolors.This takes advantage of the format’s lossless compression which preserves verysharp edges.

> GIFs can also be used to store low-color sprite data for games.

> GIFs are used for small animations and low-resolution film clips.

>In view of the general limitation on the GIF image palette to 256 colors, JPEG is a more commonly used format for digital photographs.

JPEG

Joint Photographic Experts Group format is best for photographs or continuous toneimages. JPEGs are 24-bit images that allow millions of colors. Unlike GIFs, JPEGs do notuse a palette to display color. JPEGs use a lossy compression algorithm. When the imageis compressed, some color information is discarded, resulting in a loss of quality from theoriginal image. Since the display device is the low resolution computer monitor, the loss ofquality usually is not noticeable. Furthermore, the resulting faster download timecompensates for the loss of image quality. JPEG typically achieves 10 to 1 compressionwith little perceivable loss in image quality. JPEG is the most common image format usedby digital cameras and other photographic image capture devices, and is the most commonformat for storing and transmitting photographic images on the World Wide Web. Theregistered MIME type for JPEG is image/jpeg.

Using Adobe Photoshop or other imaging software you can translate photographicimages into JPEG format. When you create the JPEG file you can also balance manuallythe amount of compression versus the resulting image quality. The higher the compression,

DMC 1623

NOTES


the lower the image quality. The most common filename extensions for files employingJPEG compression are .jpg and .jpeg, though .jpe, .jfif and .jif are also used. It is alsopossible for JPEG data to be embedded in other file types - TIFF encoded files oftenembed a JPEG image as a thumbnail of the main image. There is also an interlaced“Progressive JPEG” format, in which data is compressed in multiple passes of progressivelyhigher detail. This is ideal for large images that will be displayed while downloading over aslow connection, allowing a reasonable preview after receiving only a portion of the data.However, progressive JPEGs are not as widely supported.

PNG

Portable Network Graphics (PNG) is a bitmapped image format that employs losslessdata compression. It is specially designed for the web. PNG was created to improve uponand replace the GIF format by making it royalty-free. PNG supports palette-based (palettesof 24-bit RGB colors), greyscale or RGB images. PNG was designed for transferringimages on the Internet, not professional graphics, and so does not support other colorspaces (such as CMYK). PNG files nearly always use file-extension “PNG” or “png” andare assigned MIME media type “image/png”.

This lossless format compresses 8-bit images to smaller file sizes than GIF. PNG alsois intended to work as an image-printing format, so it supports 8-bit indexed-color, 16-bitgrayscale, and 24-bit truecolor images. Even though PNG supports 24-bit color, its losslesscompression routine does not compress as efficiently as JPEG. PNG supports transparencyand interlacing but not animation. One useful feature of PNG is its built-in text capabilitiesfor image indexing, allowing you to store a string of identifying text within the file itself.

Interlacing and progressive display: Most web-capable graphic editors let you saveimages in an interlaced or progressive format. You can choose this display option whencreating GIF, PNG, and JPEG files. GIF and PNG files use an interlacing format, whileJPEG files use a progressive format. Interlacing and progressive formats generally are thesame thing-the gradual display of a graphic in a series of passes as the data arrives in thebrowser. Each additional pass of data creates a clearer view of the image until the completeimage is displayed. The only real advantage to displaying graphics in both methods is thatusers see a blurred view of the complete image, giving them something to look at whilewaiting for the entire graphic to download. The disadvantage of choosing this displaymethod is that older browsers may not display the graphic properly and more processingpower is needed on the user’s machine to render the image.

Tips for choosing the right format

••••• If a graphic has few colors choose GIF

••••• If a graphic has lot of colors choose JPEG as well as most complicated graphicsthat contain color gradients, shadows and feathering.

WEB GRAPHICS

NOTES


••••• As a general rule, “simple” content should be saved as GIF files and “photographic”as JPG files.

••••• When designing for the Web, resolution greater than 72 dpi (dots per inch) is awaste. There is no benefit to higher resolutions as computer monitors are unable todisplay them any better. Files will be larger and take longer to download, but theimage quality on screen will not be better.

••••• Transparency can only replace one color shade. If your GIF has a backgroundthat is much different from where it will appear, making the background transparentwill leave what is known as a “halo effect” around the object after anti-aliasing: Tofix this problem, design your graphic over a background color close to your Webpage background, export an anti-aliased version, and then define the backgroundcolor as transparent.

••••• If the browser has support for PNG use PNG as a substitute for GIF. BecausePNG does not compress 24-bit images as well as JPEG, do not use it for photos.

••••• Graphics for the Web should be no larger than approximately 600 pixels wide asmost people view the Web at a screen resolution of 640x480. Graphics wider

than 640 won’t fully display without the annoying left and right scrolling.

SVG (Scalable Vector Graphics)

It is a vector graphics file format that enables two-dimensional images to be displayedin XML pages on the Web. Vector images are created through text-based commandsformatted to comply with XML specifications. In contrast to JPEG and GIF images on theWeb, which are bitmapped and always remain a specified size, SVG images are scalableto the size of the viewing window and will adjust in size and resolution according to thewindow in which it is displayed.

Benefits of SVG include:

>smaller files size than regular bitmapped graphics such as GIF and JPEG files

>resolution independence, so that the image can scale down or up to fit proportionally intoany size display on any type of Web device

>text labels and descriptions that can be searched by search engines

>ability to link to parts of an image

>complex animation

Advantages of using SVG over other image formats (like JPEG and GIF) are:

>SVG files can be read and modified by a large range of tools (e.g. notepad)

>SVG files are smaller and more compressible than JPEG and GIF images

>SVG images are scalable

DMC 1623

NOTES


>SVG images can be printed with high quality at any resolution

>SVG images are zoomable. Any part of the image can be zoomed without degradation

>Text in SVG is selectable and searchable (excellent for making maps)

>SVG works with Java technology

>SVG is an open standard

>SVG files are pure XML

The main competitor to SVG is Flash. The biggest advantage SVG has over Flash isthe compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietarytechnology that is not open source. A drawback of SVG at the moment is that not allbrowsers support it. Mozilla browsers, Firefox, and Opera support SVG, and Microsoftplan to support SVG. If your browser does not support SVG files, you will need to downloadan SVG viewer to view SVG files.

WebCGM

It is a web-oriented version of the CGM (Computer Graphics Metafile) format.WebCGM is a binary file format. The design criteria for the graphical content of WebCGMaimed at a balance between graphical expressive power on the one hand, and simplicityand implementability on the other. A small but powerful set of metadata elements arestandardized in WebCGM, to support the functionalities of: hyperlinking and documentnavigation; picture structuring and layering; and, search and query on WebCGM picturecontent. The MIME type for WebCGM is: image/cgm

1.4.2 Optimizing web graphics

The load time of your graphics is of critical importance because of the bandwidthconcerns. The larger the file, the longer it will take to load, and graphics files can be verylarge indeed. Huge graphics that take forever to load and thus visitors will be annoyed andwill switch to another. Fortunately, there are several things you can do to keep your loadtimes reasonable. The secret of shrinking graphic file size is reduction of bit depth, resolution,and dimension while preserving image quality. This classic size-versus-quality tradeoff isthe key to the art and science of graphics compression. Here are some tips for optimizingweb graphics.

••••• Consider breaking a large image up into smaller ones, and linking them togetherwith a table.

••••• Graphic files include information about the color palette of the image, which canbe superfluous. By discarding information about colors that aren’t used in theimage, the file size can sometimes be greatly reduced, with no loss in quality.

••••• Another handy trick is to use the interlaced GIF format. An ordinary GIF (orJPEG) loads in discrete chunks, like a carton being filled up with smaller boxes.

WEB GRAPHICS

NOTES


With an interlaced GIF however, the whole thing loads gradually, a blurry imagethat becomes sharper and sharper until it’s fully loaded.

••••• GIFs may also be made transparent. A transparent GIF allows you to designateone color to be transparent, meaning that the background will show through. Usually,the background color of the image is selected as the transparent color, so theimage will seem to “float” over a Web page. A non-transparent GIF however, willseem to have a box around it. Most images will look better transparent. Oneexception is an ad banner. An ad banner should never be transparent, as it may bedisplayed on various different sites, and you never know what their backgroundcolor will be.

••••• For palette-based indexed formats, such as GIF and PNG, the lower the bit depth,the smaller the file. Lossy, full color RGB formats like JPEG, do not benefit frombit depth reduction as file size is primarily related to quality.

••••• A CLUT is a digital version of a paint store’s color-mixing chart: it contains 256entries, each with its own formula for a specific color. Indexed images refer toeach color by its position in the palette. Finding the right color palette that providesthe best image quality on 8-bit machines is an art form in itself, and can dramaticallyaffect the appearance and size of your graphics.

••••• PNGs compress dithered images better than GIFs, the “dithered” PNG image ismuch smaller than the dithered GIF. PNGs typically compresses 8-bit files 10-30% better than GIFs.

••••• For animated GIFs frame optimization technique can be used where in the techniqueis saving only the pixels that change from frame to frame and thus saving a lot offile size.

1.4.3 Web graphics software

For editing Raster graphics

Adobe Photoshop

This is the mother of all graphics editors. Its power is undisputed. Unfortunately, it’salso rather expensive and tough to learn. Use Photoshop if you’re already familiar with it.

Paint Shop Pro

This is one of the most popular graphics editors in the world, due in large part to itsmagical combination of low price and powerful features.

Ulead Photo Impact

This graphics editor is the best balance between depth, ease of use and price.PhotoImpact is an all-in-one solution for Web page design, Web graphics and image editing.It offers the following features

DMC 1623

NOTES


• Edit images and create complete Web pages.

• Full array of imaging and painting tools.

• Vector 2-D and 3-D graphics

• Over 60 exclusive special effects and filters.

• Visual Web page layout and one-click HTML output.

Whether you want to edit photos and put them online or create original Web graphicsand animations, this economically priced package offers an appealing mix of power, withan interface that’s truly easy to use.

Flex GIF Animator

Flex GIF Animator is a complete image-editing suite. It has drawing, cloning, andretouching tools, exciting 2D & 3D text and graphics, add 3D look with drop shadow,glow and other effects and dozens of professional filters.

For editing Vector graphics

CorelDraw

This is one of the oldest vector graphics editors for Windows and Mac, very popular dueto its speed and features. It also contains Corel PHOTO-PAINT - a powerful bitmapgraphics editor.

Adobe Illustrator

This graphics editor is the professional solution for designers publishing for print andWeb, offering sophisticated illustration tools, time-saving productivity features, and tightintegration with other Adobe Web publishing software, including Flash.

Adobe Flash (formerly Macromedia Flash)

This is the key to designing and delivering low-bandwidth animations, presentations,and Web sites. Integration between Dreamweaver and Flash, enables users to easilyintegrate vector animations, MP3 audio, and interactivity to produce high-impact, engagingWeb pages.

XaraXtreme

This program comes complete with everything you need to create both print andWeb graphics. Xara Xtreme is fast, powerful, and features a clean, simple interface thatmakes it great for new users, and design power and flexibility that’s great for professionals.

WEB GRAPHICS

NOTES


Web graphics editors

If you find creating your own graphics with a universal editor to be too daunting, or if youwant to save time and avoid the technicalities, you can use specialized Web graphics toolsthat make creating professional-looking banners, buttons, fancy text, navigation menus,and logos incredibly fast and easy. Here are some of them...

CoffeeCup Button Factory

This is the complete and easy to use button maker. It enables you to quickly makebuttons for your site, including graphics and animation effects (Flash and Java). You canuse the included images or your own customized graphics.

Buttonz & Tilez

This is software package that includes two applications, “Buttonz”, which createsbuttons of various shapes, and “Tilez”, which renders seamless textures. The packagecomes with dozens of preset textures and buttons for you to use and modify.

ZPaint

This editor lets you easily paint colored and textured 3D objects like buttons, rings,boxes, or add those effects to existing graphics.


1. What are the popular image file formats on the web? Discuus in detail

2. Suggest tips for optimizing web graphics?

3. Write about SVG and CGM standards?

4. Write notes on some software tools for editing Vector and raster graphics.

5. Write short notes on each of the following image characteristics.

a. Dithering

b. Antialiasing

c. Color depth

d. resolution

1.5 WEB PAGE DESIGN AND SITE BUILDING

1.5.1 Web site design principles

The construction of a site and how pages are organized, in themselves can contributegreatly to the success of a website, and sometimes even as much as the content. Thedesign must be based on some simple basic principles.

DMC 1623

NOTES


Some of the principles from one school of thought are Proximity, alignment, repetition,contrast. These four principles effect how web pages are perceived.

Proximity refers to the distance between elements on a Web page and how the elementsrelate to one another. These elements include text, navigation, headings, and so on. Generallyspeaking, elements that are close together appear to have a stronger relationship thanelements that farther apart.

Alignment: One of the most critical principles of design is alignment. Like proximity,alignment can enhance or detract from the appearance of a Web page. But in addition, itcan significantly affect the readability of material on a page. The alignment style for anentire page, not just the text, must be selected. Proper alignment will create strongassociations and a pleasing presentation.

Repetition is not only saying the same thing several times to get a point across. It is alsothe use of a consistent theme throughout a Web site. While all the pages on a Web site donot have to be exactly the same, there should be enough similarities to create a consistentlook and feel to the site. This consistency is one of the things that help make a site easy tonavigate.

Contrast works in several different ways. Perhaps the most obvious example of contrastis the color of text against a background. It is much easier to read text that contrasts highlywith the background. However, contrast can also include all sorts of differences betweenelements. Under some circumstances, contrast is used to make something different so thatit stands out. This helps to indicate what is important.

According to another school of thought a comprehensive discussion on principles ofweb design is given below.

Influence of browsers on the design

One of the big challenges facing a web author is designing pages that display properlyin multiple browsers. Every browser contains a program called a “parser” that interpretsthe tags in an HTML file and displays the results in the canvas area of the browser.Because the logic for interpreting the html tags varies from browser to browser, resulting inmany, possibly conflicting interpretation of the way the html file is displayed. There areseveral different ways to approach this dilemma.

One option is what is known as Lowest Common Denominator Coding. This optionprovides the greatest acceptance across browsers because the author chooses to code hishtml using the next-to-last release of HTML. With each new release of html new featuresare added which are not supported by older browsers. By sticking with an older release ofhtml, web authors assure themselves of more accessibility by a larger number of surfers.

WEB GRAPHICS

NOTES


Some authors prefer to stay on the cutting edge of what is happening in the htmlworld. These designers insist that their users keep up with them by requiring the latestbrowser and the latest and greatest plug-ins (little programs that extend the browser’scapabilities such as Flash and Shockwave). The risk in adopting this strategy is that manyusers may not be able to see your content as it was designed.

Some authors of websites have decided that they are going to use browser specificcoding, forgoing the challenge and extra work required to code for multiple browsers bychoosing the most popular browser.

Coding for multiple screen resolutions

One of the major challenges is that you can never really know the user’s monitors’ screenresolutions. The resolution of a monitor is the horizontal and vertical height and width of thecomputer screen measured in pixels.

You can decide that your site will be created as a ‘Fixed Resolution Design’. As welook at the sample here, notice that as the resolution increases, the area on the canvas thatis used decreases. Also notice that on the 800 x 600 view, the user will have the use thehorizontal scroll bar to read the page.

The other option is to create a Flexible Resolution Design. The examples will showthe same page in two different resolutions. Notice that no matter how large or small theresolution, the information on the page adjusts to the resolution and the reader can still seeall of it, at least on the horizontal plane.

Site when viewed at 800x600

Site when viewed at 1024x768

DMC 1623

NOTES


Bandwidth concerns

A good rule of thumb is to create pages that will never take longer than 20 seconds todownload. The biggest single factor that influences the speed at which your pages downloadis the number and size of the graphics on the page. As a rule, no single image should belarger than 15K.

Design for the medium

Always keep in mind that you are not creating these pages for a printer, but rather, for amonitor. That will drive many of the decisions that you will make regarding page layout,fonts, and colors. Always remember that this medium is hypertext, not linear text. Alwaysmake your users feel comfortable by letting them know where they are and where they cango.

>Users use the interface to explore the information design. They read text, makeassociations with links, view graphics, and depending on the freedom of your design,create their own path through your information.

>Give a portable design so that it is accessible across different browsers, operatingsystems, and platforms.

>design for low bandwidth for faster downloads

>Plan for clear presentation and easy access to your information. The single mostimportant factor in determining the success of your site is your “information design,” thepresentation and organization of your information. Your graphics and navigation optionsmust present a variety of options to the user without detracting from their quest for

WEB GRAPHICS

NOTES


information. Break text into reasonable segments that make for easier on-screen reading.Use contrasting colors that are easy to read and easy on the eye.

Design the whole site

Communicate a visual theme to the user that orients them to your sites content. Thetheme should reflect the impression that your or your organization want to convey.

>create smooth transitions by legibly choosing the elements and design. The overalldesign of a page at any information level should reflect the identity of the site.

>use a grid to provide visual structure. Using HTML tables this can be achieved andborders can be removed.

>use of active white space is vital to the success of a page. White space that is useddeliberately is called active white space. Active white space is an integral part of yourdesign that structures and separates content. Passive white spaces are blank area thatborder the screen or are the result of mismatched shapes.

> Provide grounding for the user by placing navigation elements in the same positionon each page. Users will orient themselves quickly to your navigation structure. Use thesame navigation graphics throughout the site to provide consistency and reuse graphicsstored in the cache.

> The main page and secondary page share a number of characteristics:

• Consistent background graphics

• Vertical rule that provides structure

• Consistent font usage

• Logo that brands the site

• Generous areas of active white space

DMC 1623

NOTES


One design rule to note is that the logo should remain in the same place on all pagesfor consistency.

Design for the user

Keep your design efforts centered solely on your users. Knowing your audienceanswers almost all design questions. If it servers the audience, keep it; if it is potentiallydistracting or annoying, eliminate it. Find out what users expect from your site.

Design for Interaction: Think about how the user wants to interact with the informationon your web page. Decide if the user will read or scan your pages and then design yourpages to accommodate either reading or scanning. If you want to design a page for scanning,a page of links, for example, you would want to organize your page using meaningfulcolumn headings, linked text, and short descriptions. Organize links into related topic groupsand separate grouping with white space, graphics, or background color. If, on the otherhand, your page is an article that requires large blocks of text, your user should expect andbe accustomed to interacting with pages like that by scrolling and clicking hyperlinks. Thelinks might be in the main body of the article or they may be in a side bar. Keep theparagraphs short. Make reading easier by using a text column that is narrower that thewidth of the screen. Keep you text legible by providing enough contrast between theforeground and the background colors. Provide links that allow users to jump quickly torelated content.

Design for location: – It is impossible to predict a user’s exact viewing path. There is,however, some general agreement on the relative areas of screen importance (browsercanvas), as shown below. This diagram depicts the section of screen real estate ranked inorder of importance. During page design, rank the information that you are going to put onthe page and then position the most important information in the middle of the window, thenext most important across the top and so on, with the least important or static informationin the left margin.

Guide the user’s eye: Users can and will traverse your pages in a variety of ways. As afunction of normal reading habits, the user’s eyes may move from left to right and backagain. A paper based reading pattern (similar to that of a raster scan process) may be usedfor specific purposes.

WEB GRAPHICS

NOTES


Keep a flat hierarchy: Don’t make users navigate through endless layers of pages to findthe piece of information that they are looking for. Structure you site to include sections ortopic level navigation pages so users quickly find their path. A good rule of thumb to try tofollow is never make users click more than three times to find what they are looking for.Another thing you can do to make you site easy to navigate is provide some kind ofgraphical site map that shows your user the structure of you site and where your content islocated and how it is related to the rest of the site.

Use the power of hypertext linking: Unlike paper-based authors, as a hypertext authoryou have the luxury of adding clickable links where necessary to guide users through yourinformation. Readers browsing through magazines can flip to any page in any order theydesire. You can replicate this nonlinear reading method on your web site with links that letusers move from page to page or section to section… and you should!! This is one of thefeatures that make putting information on the web unique. You should really think thisfeature through and utilize its power. Some more ways of using hypertext is for contextuallinks, balloons, changing the color of the link indicating that it is visited etc.,

DMC 1623

NOTES


Design for screen

A computer screen is landscape oriented. Your page design should reflect the spacewithin which it will be displayed and read.

While a piece of paper reflects light, a computer screen has light passing through itfrom behind. This changes the nature of the colors and contrasts you choose to employand that is why contrast between foreground and background is so vitally important.

Computer screens use a much lower resolution than the printed page. Graphics andtext that would look fine on a laser printer at 600 dpi are coarse and grainy at 72 dpi, thetypical resolution for computer monitor. Because of the screen graininess, italic text isespecially hard to read in paragraph format.

It is usually not a good idea to take documents that are formatted for print and postthem online without considering the destination medium. In most cases, a document that isperfectly legible on paper is hard to negotiate online. The text length, font, and contentlength will not transfer successfully to the computer screen.

1.5.2 Planning the site

Identify the content goal: Examine closely what type of site you want to design. Yourobjectives and your user’s objectives, what you want the web site to accomplish and whatyour users want from your site, may differ. The bottom line is that you should adopt yourusers’ perspective. Think about the type of content that you want to present and then lookto the web for examples of how best to present it.

Analyze your audience: Analyze your audience and produce an audience definition, aprofile of your average user. Contact your typical users or those who work with them andanswer the following questions.

• What is that users want when they come to your site?

• How can you attract them and entice them to return for repeat visit?

• What type of computer and connection speed does your typical visitor have?

• What level of education do they have and other technical abilities?

• Will other sites link to our site or will your site provide links?

Build a web site development team: Your team must include server administrators,HTML coders, designers, writers and information designers, software programmers,database administrators, marketing.

Diagram the site: Plan your site by creating a flowchart that shows the structure and thelogic behind the content presentation and navigation choices you offer. You can sketch outyour ideas using a paper and pencil or you can use software. What you are after here is

WEB GRAPHICS

NOTES


creating the information structure of your site. This becomes sort of the blue prints for theinformation as opposed to the blue prints for the layout. Think about the information needsof your users and how they can best access the content of your site. Below are someexamples of information structures.

• Linear Structure – If you want your users to follow a predefined path, this is thetype of structure that you want to consider. Once into the content users can navigatebackward or forwards within the content path. Each page should contain a link back to theprevious page and forward to the next page. If you need to include a subtopic, link to itand only allow users to link back to the page on the main path that they just left.

• Tutorial Structure – This type of structure is perfect for the computer-based trainingcontent such as lessons, tutorials, or task-oriented procedures. The uses progress throughthe concept, lesson, and review in a linear manner. Users can choose the order in whichthey take the lessons, but once the decision has been made, they follow your predeterminedpath. It is sort of like a multi-legged linear structure.

• Web Structure – If you site is going to relatively small, a web structure might be whatyou want. In a web structure every page has links to and from every other page. Thisallows users to jump freely to any page from any other page. If you choose this type ofstructure make sure to include on each page, clear location information and a standardizednavigation bar that not only tells the users where they are, but where they can go.

Concept1 Concept2 Concept3

DMC 1623

NOTES


• The Hierarchical Structure – This is probably the most common information design.It lends itself to larger content collections because the section pages break up and organizethe content at different levels throughout the site. Navigation is primarily linear within eachsection. Users can scan the content on the section page and then choose the content pageof their choice.

• Cluster Structure – This is similar to the hierarchical structure, except that everytopic area is an island of information unto itself, with all pages in each cluster linked to eachother. This structure encourages exploration within a topic area, allowing the user to navigatefreely through the content. All pages contain a navigation bar with links to the sectionpages, main page, and site map.

Section page

Content pages

Section page

WEB GRAPHICS

NOTES


• Catalog Structure – The catalog structure accommodates electronic shopping. Theuser can browse or search for items and view specific information about each product onthe item page. Users can add items to the shopping cart as they shop. When they arefinished, they can review the items in their shopping cart, and then proceed to checkout,where they can enter credit card information and finalize the order.

1.5.3 Planning the site navigation

>Provide enough location information to let users answer the following navigationquestions

Where am I?

Where can I go?

How do I get there?

How do I get back to where I started?

Let the users know their current page and what type of content they are viewing

Let users know where they are in relation to the rest of the web site

Provide consistent and easy to understand links

Provide alternatives to the browser’s back button that let users return to their startingpoint.

Content page Search page

Item pages

Shopping cart Checkout Exit

DMC 1623

NOTES


>use hypertext to connect facts, relationships, concepts – provide contextual linkingto related concepts, facts, or definitions, letting the users make the choices they want.Know your material and try to anticipate the user’s information needs.

>Control page length.

>Use a text based navigation bar

>When using graphics based navigation make sure that they are self explanatory andalso provide alternate text for the graphic. Shown below is a web site which contains someof the standard navigational elements

1.5.4 Creating page templates

You can create page templates using HTML tables. Some standard page templatesare shown here below.

Template - 1

Text based navigation

Indicating the current location

Graphics based navigation

WEB GRAPHICS

NOTES


This is a very widely used page layout - logo on top, navigation in the left column, andmain content in the middle.

Template – 2

This layout is different in that instead of the logo being centered and by itself alongthe top of the page, the navigation starts higher up, next to the logo. This can be especiallyuseful when there is a lot of navigation links, or when the logo is not very wide.

Template – 3

This is a variation of the first template, with a right column added. Right columns aregreat for miscellaneous information and links that don’t fit elsewhere.

Template – 4

This is a variation of template 2, with a right column added. It could be placed eitherup next to the logo, or lower, as pictured to the left.

DMC 1623

NOTES


Template – 5

In this design style, the navigation is placed directly underneath the site logo. Thistends to work better when there are fewer navigation links.

Template – 6

This is a variation of 5, with either a left and / or a right column added.

Template – 7

In this example, an image, possibly containing the logo, would be in the middle of thepage. Different parts of the image would be the links to other pages of the site. It would behighly recommended with this kind of layout style to have additional text on the page givinga basic introduction to the site. However, the rest of the layout style was like number 6.


1. Discuss the principles of web design in detail.

2. Depict the web information structures and suggest a suitable application for eachof them.

3. Write about some standard page templates used for web page design.

4. Discuss the methodology to be adopted while designing for user, designing forscreen, design for medium.

5. Write about the navigation strategies to be adopted while designing a web site.

WEB GRAPHICS

NOTES


1.6 IMAGE MAPS

An image map in XHTML or Web Development is an image that has different clickableelements within the same single image. This allows Web developers to define only portionsof the image as clickable while others are not, or to define specific areas of the image topoint to different URLs.

To make a client side image you need an image, a list of coordinates designatinghotspots on the image, and the document URL associated with each hotspot. To programthe image map into your HTML document, you use the ‘usemap’ attribute of the <img>tag.

A client side image map can be implemented using html as shown below

<img src=”image” usemap=”#map” />

<map name=”map” id=”map”>

<area shape=”rect” coords=”0,10,20,40" href=”URL” alt=”click here” />

</map>

The tags that you need for creating an image map are

<map>, <img>, <area>

First you create the map on your Web page; all it needs is a name.

<map name=”name”>

When you create an image map, you are creating an area that is clickable on the image.

There are three shapes you can create:

• rect - a rectangle or four sided figure

• poly - a polygon or multisided figure

• circle - a circle

To create the areas, you need to know the coordinates you would like to map.

For a rectangle, you map the top left and bottom right corners. All coordinates arelisted as x,y. So, for upper left corner 0,0 and lower right corner 10,15 you would type:0,0,10,15. You then include it in the map:


<area shape=”rect” coords=”0,0,10,15" href=”http://abcd.com/”>

DMC 1623

NOTES


For a polygon, you map each coordinate separately. The Web browser automaticallyconnects the last set of coordinates with the first.



<area shape=”poly” coords=”10,0,14,3,7,10" href=”http://abcd.com/”>

Circle shapes only require two coordinates, like the rectangle, but for the secondcoordinate you specify the radius, or the distance from the center of the circle. So, for acircle with the center at 20,10 and a radius of 5 you would write 20,10,5:



<area shape=”poly” coords=”10,0,14,3,7,10" href=”http://webdesign.about.com/”>

<area shape=”circle” coords=”20,10,5" href=”http://abcd.com/”>

The only thing left for your image map is to close the map and link to it in your image



<area shape=”poly” coords=”10,0,14,3,7,10" href=”http://abcd.com/”>

<area shape=”circle” coords=”20,10,5" href=”http://abcd.com/”>

</map>

<img src=”image” usemap=”#name”>

In the example below the screen areas numbered as 1,2,3,4,5 are map areas that aredesignated for linking to another resource or web site etc,

WEB GRAPHICS

NOTES



1. What are image maps? How will you create client side image maps?

2. What are the HTML tags used for creating Image maps?

1.7 ADDING MULTIMEDIA TO A WEB SITE

HTML provides tags for inserting media into HTML documents; The <img> tag forinline images; the <embed> and <object> tags for compound document embedding; and<applet> tags for code (the <applet> and <embed tags> have been deprecated in HTML4.0 in favor of the <object> tag. A deprecated tag is not supported by the most recentHTML standard, yet its use remains supported by most browsers). The important <object>is used to insert a “nonstandard” item such as a JAVA applet, QuickTime movie, or Flashanimation into an HTML document. But it is not as simple as it seems. There is a differencebetween the ways the various versions of browsers handle multimedia elements and thePlug-Ins that play them. In playing a QuickTime movie, for example, the <object> tag isused by Internet Explorer on windows platforms and requires the QuickTime activeXcontrol. The <embed> tag is used by older Netscape browsers, Internet Explorer for theMAC, and other browsers that support Netscape-style QuickTime plug-Ins. The result isthat browsers that understand the <object> tag ignore the <embed> tag, and browsersthat cannot read the <object> tag need the <embed>tag so the <object> tag would includean <embed> tag to play a QuickTime movie on all browsers and platforms, as shown

<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B”

Width=”150" height = “150” codebase=”http://www.mywebsite.com/oneactiveX”>

<param name = “src” value=”hi.mov”>

The “object” tag is used to embed an object within the document. “Classid” is usedto specify the location of the objects data. Microsoft Internet Explorer versions 3.0 andlater use the “codebase” attribute to detect which version of the Flash Player/ QuickTimeplayer ActiveX Control is installed on a user’s computer. If the user’s version is earlier thanthe version specified by “codebase”, Internet Explorer can automatically download andinstall the newer version of the Flash Player/QuickTime player from the location specifiedin “codebase”.

1.7.1 Text for the web

Viewers of your web site may not be displaying the same “preferred” font that youused to design your page because user preferences in the browser may alter the way textin your document looks and flows. To make the best of this uncertainty many developersdesign their documents in Times Roman for the proportional font and Courier as the mono-spaced font. These fonts readily move across platforms and are the default fonts users

DMC 1623

NOTES


typically see if they do not set their own preferences. All though you can specify a font andeven alternates using the FACE attribute of the <font> tag (<font face = “verdana, arial”>),that tag has been deprecated in the HTML 4.0 specification in favor of using CSS.Regardless of how you specify your fonts, browsers can only use a specified font if thatfont is installed on the end users computer.

Great efforts are being made to define standard methods for displaying type faces onthe web. Standards like ‘TrueDoc’ and ‘OpenType’ have been defined by various softwaregiants. Using an OpenDoc component called WEFT (web embedding font tool) Microsoftalready offers Font embedding capabilities. If you are looking for some flexibility in fontmanagement at your web site, you can try using CSS, available in DHTML for setting textstyles across the pages of your site. Most of the discussion about how text is included in aweb page has been explained in the previous paragraphs, refer to them.

1.7.2 Images for the Web

Even though web standards do not specify a graphics format you must use, all currentreleases of browsers recognize three image formats GIF, JPEG, PNG, without resorting tospecial plug-ins. These format use built-in compression algorithms to reduce file size. Forother graphics formats such as CGM, CMX, DXF and fractal and wavelet compressedimages, special proprietary creation software and browser plug-ins may be required. Mostof the discussion about how images are included in a web page has been explained in theprevious paragraphs refer to them.

1.7.3 Sound for the web

As the web has developed sound has become more important, and plug-ins currentlyallow embedding of sounds into documents. Browsers have become sound capable;Microsoft Internet Explorer offers the <bgsound> tag to play an AU, WAV, or MIDIsound track in a document background. Netscape and Internet Explorer offer the QuickTimeplug-in for playing AIFF, MIDI, WAV and AU formats. If your browser does not supportthe appropriate sound plug-in, your browser can still download the file and launch anexternal viewer or helper application to play it. These helper applications are usually assignedby you in the “file helper preferences” of your browser. Streaming audio is more useful forthe web, where a sound file can start as soon as data begins coming in – streaming isprovided by the LiveAudio and QuickTime plug-ins. Plug-ins such as StreamWorks,VocalTec, and RealAudio feature streaming capability and high compression/good fidelity,but they also require software at the server. The QuickTime plug-in offers a fast startfeature to allow playing before a movie has been completely downloaded. You can eitherembed HTML commands in a document to play a QuickTime movie automatically in thebackground, or you can display a controller providing ‘stop’, ‘fast forward’ and ‘rewind’for the user.

WEB GRAPHICS

NOTES


<embed src=”musicfile.mid” width=144 height=60 autostart=true repeat=true loop=true>

Sound will become more fully integrated into the way people use the World WideWeb, and it can be included in shockwave, powerpoint, flash and other presentation toolsthat use plug-ins and players. CoolTalk is a real time audio and information collaborationhelper included in Netscape 3.0 to allow full duplex audio conferencing and textual andgraphical data conferencing using a shared white board. Live3D, a VRML viewer andplug-in from Netscape, provides interactive 3D spaces that include text, images, animation,sound, music and video.

1.7.4 Animation for the web

HTML makes no provision for animation, by itself delivering only a static page of textand graphics. Microsoft’s Explorer offered the <MARQUEE> tag to scroll text horizontally.Java script was applied to force sliding text into the status bar.

>’GIF89a’ specifies by putting multiple images, or frames, into a single file and displaythem with a programmable delays between them.

> Macromedia introduced Shockwave to allow animation and interactivity. Theextension is ‘.swf’.

> The QuickTime movie format includes the ability t create Virtual Reality files andalso displayed on a web page via a player. QuickTime, VRML browsers, MPEG, andother streaming technologies for animation, sound and video are being developed whichwill add power of multimedia to the World Wide Web.

The following example code if inserted into a HTML page will play the animation filewith the extension .swf using a player.

<object classid=”clsid:D697CDE7E-AE6D-11cf-96B8-458453540000"

codebase=”http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"

id=”animation name” width=”468" height=”60">

<param name=”movie” value=”animationname.swf”>

<param name=”quality” value=”high”>

<param name=”bgcolor” value=”#FFFFFF”>

<embed name=”animationname” src=”animationname.swf” quality=”high”bgcolor=”#FFFFFF”

width=”468" height=”60"

type=”application/x-shockwave-flash”

DMC 1623

NOTES


pluginspage=”ht tp : / /www.macromedia .com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”>

</embed>

</object>

Have you understood?

1. How will you embed audio into a HTML page?

2. How will you embed video into a HTML page?

3. What are plug-ins? How will the browsers use them?

4. How will you embed animation into a HTML page?

5. How will you add multimedia to a web site?

Summary

1. A wide variety of programming/scripting languages and software tools are availablefor creating graphics for web including HTML, CSS, JavaScript, DHTML, Java,Photoshop, PaintshopPro, Flash, Director, QuickTime, Dreamweaver, FrontPageetc.,. These tools aid create, edit, manipulate, and integrate graphics for web.

2. Some of the tags have attributes and attributes can assume some values in apredefined format.

3. The text between the start and end tags is the element content. HTML tags arenot case sensitive, <b> means the same as <B>.

4. For formatting text in HTML the most frequently used tags are paragraph, font,bold, italic, pre, blockquote, center, underline, subscript, superscript, heading,br(line break), hr(horizontal ruler) etc.,

5. The following statement is used to link an image ‘clickme.jpg’ to the home page of‘‘www.yahoo.com

<a href=”http:///www.yahoo.com”><img src=”clickme.jpg”</img></a>

6. Tables are defined with the <table> tag. A table is divided into rows (with the <tr>tag), and each row is divided into data cells (with the <td> tag). The letters tdstands for “table data,” which is the content of a data cell. A data cell can containtext, images, lists, paragraphs, forms, horizontal rules, tables, etc.

7. <frameset> tag must be specified in the <head> sect ion. You cannot use the<body></body> tags together with the <frameset></frameset> tags.

8. The forms are used obtain user input. The form elements are those with which userinteracts. The elements are ‘textbox’, ‘checkbox’, ‘radio button’, ‘dropdown box’,‘textarea’, ‘password box’, and special buttons like ‘submit’, ‘reset’ etc., andloops.

9. The tag <img> is used to display images.

WEB GRAPHICS

NOTES


10. The value of the color attribute can be specified in any one of three ways. Thename of the color itself, its rgb equivalent each specified as a value between 0 to255 and Hexadecimal value of the color with # as prefix.

11. The type of style sheets are Browser default, External, Internal and Inline

12. To link an external style sheet to a web page, write the following statement in the<head> section of the web page.; <link rel=”stylesheet” type=”text/css”href=”one.css”>

13. The browsers must mix its own colors when you display a 24-bit image on an 8-bit monitor, the process is called dithering.

14. The three popular file formats for the web are GIF (Graphics Interchange Format),JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics).

15. With GIF files you can choose one color in an image to appear as transparent inthe browser. The background color or pattern will show through the areas thatyou have designated as transparent.

16. JPEGs use a lossy compression algorithm.

17. PNG was designed for transferring images on the Internet, not professional graphics,and so does not support other color spaces (such as CMYK). PNG files nearlyalways use file-extension “PNG” or “png” and are assigned MIME media type“image/png”.

18. For animated GIFs frame optimization technique can be used where in the techniqueis saving only the pixels that change from frame to frame and thus saving a lot offile size.

19. Some of the principles from one school of thought are Proximity, alignment,repetition, contrast. These four principles effect how web pages are perceived.

20. The resolution of a monitor is the horizontal and vertical height and width of thecomputer screen measured in pixels.

21. As a rule, no single image should be larger than 15K.

22. Organize links into related topic groups and separate grouping with white space,graphics, or background color.

23. Some more ways of using hypertext is for contextual links, balloons, changing thecolor of the link indicating that it is visited etc.,

24. Analyze your audience and produce an audience definition, a profile of your averageuser.

25. Some of the popular web information structures are Linear, hierarchical, tutorial,web.

26. use hypertext to connect facts, relationships, concepts – provide contextual linkingto related concepts, facts, or definitions.

27. The tags used for creating a client side image map are <map>, <img>, <area>

28. GIF89a’ specifies by putting multiple images, or frames, into a single file and displaythem with a programmable delays between them.

DMC 1623

NOTES


WEB GRAPHICS

NOTES


UNIT – II

INTRODUCTION TO PHOTOSHOP

2.1 INTRODUCTION

Like any image-editing program, you can use Photoshop to “alter” images like photos,downloaded icons, or scanned artwork. Altering an image includes doing such things aschanging the colors within an image, modifying the size and scale of an image, or puttingone picture “within” another. Alteration also includes technical modifications such as changingthe mode of image compression from one type to another, or changing the number of bitsused per pixel. But, aside from altering images, Photoshop has a vast array of tools thathelp you “create” images from scratch. On the web, you will often need to make customicons, buttons, lines, balls or text art. You can easily do all this with Photoshop and itsassociated program Image Ready.


• To understand the basics Images

• To Know the Photoshop 6.0 Interface, basic tool box , various palettes

• To learn the operations performed on images like change of color settings, merginglayers, using layer styles, resizing images, changing resolution etc

• To understand how to create animation

2.3 IMAGE BASICS

Computer graphics fall into two main categories—bitmap and vector. You can workwith both types of graphics in Photoshop and Image Ready; moreover, a Photoshop filecan contain both bitmap and vector data. Understanding the difference between the twocategories helps as you create, edit, and import artwork.

Bitmap images

Bitmap images—technically called raster images—use a grid of colors known aspixels to represent images. Each pixel is assigned a specific location and color value. Forexample, a bicycle tire in a bitmap image is made up of a mosaic of pixels in that location.When working with bitmap images, you edit pixels rather than objects or shapes.

DMC 1623

NOTES


Bitmap images are the most common electronic medium for continuous-tone images,such as photographs or digital paintings, because they can represent subtle gradations ofshades and color. Bitmap images are resolution-dependent—that is, they contain a fixednumber of pixels. As a result, they can lose detail and appear jagged if they are scaled on-screen or if they are printed at a lower resolution than they were created for.

Vector graphics

Vector graphics are made up of lines and curves defined by mathematical objectscalled vectors. Vectors describe an image according to its geometric characteristics. Vectorgraphics are resolution-independent—that is, they can be scaled to any size and printedat any resolution without losing detail or clarity. As a result, vector graphics are the bestchoice for representing bold graphics that must retain crisp lines when scaled to varioussizes—for example, logos.

Because computer monitors represent images by displaying them on a grid, bothvector and bitmap data is displayed as pixels on-screen.

IMAGE ATTRIBUTES

Image Size – pixel dimensions

Image resolution

Color model

Color depth

Image File size

File Format

Palette

Image Size: The size of the image measured in pixel dimensions is the number of pixelsalong the width and number of pixels along height. The display size of an image on-screenis determined by the pixel dimensions of the image plus the size and setting of the monitor.When preparing an image for online display (for example, a Web page that will be viewedon a variety of monitors), pixel dimensions become especially important.

Ex: 640x480 image, 1024x768 image etc.,

‘Resampling’ refers to changing the pixel dimensions (and therefore display size) ofan image. When you downsample (or decrease the number of pixels), information is deletedfrom the image. When you resample up (or increase the number of pixels), new pixels areadded based on color values of existing pixels. You specify an interpolation method todetermine how pixels are added or deleted.

WEB GRAPHICS

NOTES


When an image is resampled, an interpolation method is used to assign color valuesto any new pixels it creates, based on the color values of existing pixels in the image. Themore sophisticated the method, the more quality and detail from the original image arepreserved. For Interpolation, choose one of the following options:

Nearest Neighbor (Jagged), for the fast but less precise method. This method isrecommended for use with illustrations containing non-anti-aliased edges, to preserve hardedges and produce a smaller file. However, this method can result in jagged effects, whichbecome apparent when distorting or scaling an image or performing multiple manipulationson a selection.

(Photoshop) Bilinear for a medium-quality method.

Bicubic (Smooth) for the slow but more precise method, resulting in the smoothesttonal gradations.

Image resolution: The number of pixels displayed per unit of printed length in an image,usually measured in pixels per inch (ppi). In Photoshop, image resolution and pixeldimensions are interdependent. The amount of detail in an image depends on its pixeldimensions, while the image resolution controls how much space the pixels are printedover. Ex: 72 ppi, 81 ppi etc.,

The number of pixels or dots displayed per unit of length on the monitor, usuallymeasured in dots per inch (dpi). Monitor resolution depends on the size of the monitor plusits pixel setting. Most new monitors have a resolution of about 96 dpi, while older Mac OSmonitors have a resolution of 72 dpi.

Understanding monitor resolution helps explain why the display size of an image on-screen often differs from its printed size. Image pixels are translated directly into monitorpixels. This means that when the image resolution is higher than the monitor resolution, theimage appears larger on-screen than its specified print dimensions. For example, whenyou display a 1-by-1 inch, 144-ppi image on a 72-dpi monitor, it appears in a 2-by-2 incharea on-screen. Because the monitor can display only 72 pixels per inch, it needs 2 inchesto display the 144 pixels that make up one edge of the image.

Color Model: A color mode determines the color model used to display and print images.Photoshop bases its color modes on established models for describing and reproducingcolor. Common models include HSB (hue, saturation, brightness); RGB (red, green, blue);CMYK (cyan, magenta, yellow, black); and CIE L*a*b*. Photoshop also includes modesfor specialized color output such as Indexed Color and Duotone. ImageReady uses RGBmode to work with images. The color modes supported by Photoshop are Bitmap, duotone,grayscale, indexed, Lab, RGB, CMY, HSB, Multichannel etc., In addition to determiningthe number of colors that can be displayed in an image, color modes affect the number ofchannels and the file size of an image.

DMC 1623

NOTES


Color depth: The number of bits per pixel of a color image. Ex:16 bit, 24 bit, 32 bit etc.,

Image File size: The digital size of an image, measured in kilobytes (K), megabytes(MB), or gigabytes (GB). File size is proportional to the pixel dimensions of the image.Image resolution thus becomes a compromise between image quality and file size. Anotherfactor that affects file size is file format—due to varying compression methods used byGIF, JPEG, and PNG file formats, file sizes can vary considerably for the same pixeldimensions. Similarly, color bit-depth and the number of layers and channels in an imageaffect file size. Photoshop supports a maximum file size of 2 GB and maximum pixeldimensions of 30,000 by 30,000 pixels per image.

File Format: Photoshop has support for the following file formats. PSD (photoshop nativefile format), BMP, GIF, PICT, TIFF, Photoshop EPS, Photoshop PDF, JPEG, Pixar,PNG, RAW, Targa etc.,

Palette: A number of palette types are available for converting an image to indexed color.For the Perceptual, Selective, and Adaptive options, you can choose between using alocal palette based on the current image’s colors or a master palette created in ImageReady.

Exact

Creates a palette using the exact colors appearing in the RGB image—an optionavailable only if the image uses 256 or fewer colors. Because the image’s palette containsall colors in the image, there is no dithering.

System (Mac OS)

Uses the Mac OS default 8-bit palette, which is based on a uniform sampling of RGBcolors.

System (Windows)

Uses the Windows system’s default 8-bit palette, which is based on a uniform samplingof RGB colors.

Web

Uses the 216-color palette that Web browsers, regardless of platform, use to displayimages on a monitor limited to 256 colors. This palette is a subset of the Mac OS 8-bitpalette. Use this option to avoid browser dither when viewing images on a monitor displaylimited to 256 colors.

Uniform

Creates a palette by uniformly sampling colors from the RGB color cube. For example,if Photoshop takes 6 evenly spaced color levels each of red, green, and blue, the

WEB GRAPHICS

NOTES


combination produces a uniform palette of 216 colors (6 cubed = 6 x 6 x 6 = 216). Thetotal number of colors displayed in an image corresponds to the nearest perfect cube (8,27, 64, 125, or 216) that is less than the value in the Colors text box.

Perceptual

Creates a custom palette by giving priority to colors for which the human eye hasgreater sensitivity.

Selective

Creates a color table similar to the Perceptual color table, but favoring broad areas ofcolor and the preservation of Web colors. This option usually produces images with thegreatest color integrity.

Adaptive

Creates a palette by sampling the colors from the spectrum appearing most commonlyin the image. For example, an RGB image with only the colors green and blue produces apalette made primarily of greens and blues. Most images concentrate colors in particularareas of the spectrum. To control a palette more precisely, first select a part of the imagecontaining the colors you want to emphasize. Photoshop weights the conversion towardthese colors.

Custom

Creates a custom palette using the Color Table dialog box. Either edit the color tableand save it for later use or click Load to load a previously created color table. This optionalso displays the current adaptive palette, which is useful for previewing the colors mostoften used in the image.

Previous

Uses the custom palette from the previous conversion, making it easy to convertseveral images with the same custom palette.


1 What are the two categories of graphics images?

2 What are Image attributes? Discuss in detail.

2.4 KNOWING THE PHOTOSHOP INTERFACE

The work area consists of the following components:

DMC 1623

NOTES


Menu bar

The menu bar contains menus for performing tasks. The menus are organized bytopic. For example, the Layers menu contains commands for working with layers.

Options bar

The options bar provides options for using a tool.

Toolbox

The toolbox holds tools for creating and editing images.

The tools can be categorized into the following groups

Selection, Editing, painting, Type

Also highlights the current tool, current foreground, and background colors

WEB GRAPHICS

NOTES


Rectangular Marquee: Allows you to select a rectangular portion of an image so youcan move it to another location or modify what is inside the selected area.

Move: Allows you to move image elements

Lasso: Allows you to draw around a particular element in your image to select it.

Magic Wand: Gives you the ability to select specific colors

Crop: Allows you to select an area of an image and crop the image to that Specified area.

Slice: Lets you cut the image into sections, which is handy for creating Web graphics

Airbrush: Just like its real-world counterpart, gives you the ability to paint onto the imagewith an airbrush effect.

Paintbrush: Again, like its real-world counterpart, lets you paint onto the Image with apainting effect

Clone Stamp: Lets you copy a portion of an image and recreate it in another area of theimage

History Brush: Allows you to paint a copy of an image onto the current version of theimage

Eraser: Gives you the ability to erase portions of your image

Gradient: Gives you the ability to assign a gradient to a background or a selection in yourimage.

Smudge: lets you smudge areas of the image

Dodge: lets you lighten image areas

Path component selection: Lets you work with and modify paths you create in yourfiles.

Type: Gives you the ability to add text to your image

Pen: Allows you to create a path by laying down points

Rectangle: Lets you create a rectangular element in your image

Notes: Lets you add textual notes to the image

Eyedropper: Lets you select a specific color in an image for use in another part of yourimage.

Hand: Gives you the ability to pan across your image on the screen

DMC 1623

NOTES


Zoom: Zooms in on an image.

Foreground/Background color: Opens the color picker so you can choose a color, orswaps the foreground and background colors (when you click the arrow on the upper-right side of the control)

Standard Mode: Switches to standard mode, which is the mode most often used to buildimages.

Quick Mask Mode: Switches to Quick Mask Mode, which is the mode used to add orcreate a mask.

Standard screen mode: Shows all of the controls and your work space in the defaultwindow setup

Full Screen Mode with Menu Bar: Displays a full-screen window with a menu bar andall open palettes and windows.

Full Screen Mode: Displays a full-screen window without a menu bar and all openpalettes and windows.

Jump to ImageReady: Opens ImageReady, the companion program to Photoshop.

Palettes

Palettes help you monitor and modify images. By default, palettes appear stackedtogether in groups. The palettes are Layers, Channels, Paths, History, Actions, Color,Swatches, Styles, Navigator and Info.

WEB GRAPHICS

NOTES


With all the above screen components the entire screen looks as shown below.

The drawing canvas is the area in which you will create and/or modify images. Bydefault, Photoshop gives you a drawing canvas to work with, but you can easily openanother one by using the “New” menu choice from the “File” menu item. As you can seefrom the figure below, every drawing canvas has a title bar with window control buttonsand a drawing area.

As soon as you select the ‘new’ from the ‘file’ menu the ‘new’ dialog box appears asbelow. You can enter a name for your image. Change the pixel dimensions and resolution.Choose a preset size i.e. a standard size if you want for various purposes (say A4, letter,640x480 etc.,). Choose a mode. Choose the option for a background for the canvas.

Information about the current file size and other features of the image is displayed atthe bottom of the application window. Click the triangle in the bottom border of theapplication window

DMC 1623

NOTES


Select a view option:

>Document Size to display information on the amount of data in the image. The numberon the left represents the printing size of the image—approximately the size of the saved,flattened file in Adobe Photoshop format. The number on the right indicates the file’sapproximate size including layers and channels.

>Document Profile to display the name of the color profile used by the image.

>Document Dimensions to display the dimensions of the image.

>Scratch Sizes to display information on the amount of RAM and scratch disk used toprocess the image. The number on the left represents the amount of memory that is currentlybeing used by the program to display all open images. The number on the rightrepresents the total amount of RAM available for processing images.

>Efficiency to display the percentage of time actually doing an operation instead of readingor writing the scratch disk. If the value is below 100%, Photoshop is using the scratch diskand, therefore, is operating more slowly.

>Timing to display the amount of time it took to complete the last operation.

>Current Tool to view the name of the active tool.


1 What are the Major components of the Photoshop User Interface?

2 Write about the tool palette of Photoshop.

3 How would you know the profile of the current image?

WEB GRAPHICS

NOTES


2.5 COLOR PALETTE

The color palette in photoshop looks like this

Choosing Foreground and Background colors

Photoshop uses the foreground color to paint, fill, and stroke selections and thebackground color to make gradient fills and fill in the erased areas of an image. Theforeground and background colors are also used by some special effects filters.

You can designate a new foreground or background color using the eyedropper tool,the Color palette, the Swatches palette, or the Adobe Color Picker.

The default foreground color is black, and the default background color is white. (Inan alpha channel, the default foreground is white, and the background is black.)

The current foreground color appears in the upper color selection box in the toolbox;the current background color appears in the lower box.

The Info palette, the Color palette, and the Adobe Color Picker let you display colorvalues using a number of color models.

Using color picker dialog

Choosing foreground and background color is handled in the Toolbox. Near thebottom of the toolbox you will see the color picker squares The Square on top is theforeground color and the square in back is the background color. (Note that you can easilymake the foreground color the background color and vice versa using the little switcherarrows )

To change the color, you simply click on whichever square you want to change.When you do so, the “Color Picker Dialog” will appear.

DMC 1623

NOTES


Using color palette

The Color palette displays the color values for the current foreground and backgroundcolors. Using the sliders in the Color palette, you can edit the foreground and backgroundcolors according to several different color models. You can also choose a foreground orbackground color from the spectrum of colors displayed in the color ramp at the bottom ofthe palette.

The Color palette may display the following alerts when you select a color:

In Photoshop, an exclamation point inside a triangle appears above the left side ofthe color ramp when you choose a color that cannot be printed using CMYK inks.

A cube appears above the left side of the color ramp when you choose a color thatis not Web-safe.

To change the color model of the color sliders:

Choose a Sliders option from the Color palette menu.

To select the foreground or background color:

To edit the foreground or background color, make sure that its color selection box isactive (outlined in black). To make the foreground or background color selection boxactive, click the box.

Do one of the following:

• Drag the color sliders. By default, the slider colors change as you drag. In Photoshop,you can turn off this feature to improve performance by deselecting Dynamic ColorSliders in the General section of the Preferences dialog box.

• Enter values next to the color sliders.

• Click the color selection box, choose a color using the color picker, and click OK.

• Position the pointer over the color ramp (the pointer becomes the eyedropper),and click to sample a color. Alt-click to apply the sample to the non-active colorselection box.

WEB GRAPHICS

NOTES



1 What color models supported in Photoshop? Write in detail.

2 Write about the Indexed color mode and dithering options in Photoshop.

3 How is the color palette and color picker dialog used in Photoshop?

4 What do you understand by color gamut, Channels and bit depth?

2.6 USING LAYERS

Layers allow you to work on one element of an image without disturbing the others.Think of layers as sheets of acetate stacked one on top of the other. Where there is noimage on a layer, you can see through to the layers below. You can change the compositionof an image by changing the order and attributes of layers. In addition, special featuressuch as adjustment layers fill layers, and layer styles let you create sophisticated effects.

The Layers palette lists all layers, layer sets, and layer effects in an image. You canaccomplish many tasks—such as creating, hiding, displaying, copying, and deleting layers—using the buttons in the Layers palette. You can access additional commands and optionsin the Layers palette menu and the Layers menu.

The active layer will have a paintbrush symbol in the small square just left of thethumbnail. Double-clicking on a layer in the palette gives you access to layer styles, as wellas some advanced blending options.

DMC 1623

NOTES


You’ll also notice a small eye icon for each layer. Clicking on this icon lets youtoggle the layer visibility on and off. This way you can temporarily hide a layer if it’s in yourway. Hiding a layer also prevents it from printing. You can easily hide or reveal severallayers in a row by quickly swiping across the column of icons as you hold down the mousebutton. To hide all layers except one, you can hold down the Alt/Option key as you clickthe eye for the layer you want to remain visible.

Although editing functions can only be applied to one layer at a time, there are a fewfunctions which can be performed on a series of layers. For instance, moving layers, copyinglayers between documents, and aligning layers. To perform these functions, you will needto link the layers that you want to work with.

To link layers to the currently active layer, you would click in the second square (leftof the thumbnail) in the layers palette. A link icon will appear in the space to indicate thatthe layers are linked. As with the visibility icon, you can quickly link several layers byswiping across this column with your mouse. To unlink several linked layers with one click,you can Alt/Option click on the paintbrush icon for the active layer.

Now take a look at the bottom row of buttons on the layers palette. These iconsallow you to (left to right) work with layer effects, add a layer mask, group layers into sets,create adjustment layers, create a new ordinary layer, and delete layers. For now we’reonly going to discuss the last two buttons.

If you click the delete layer button, you will be asked to confirm that you really wantto delete the active layer. If you want to delete the layer without confirmation, you can dragthe layer from the layer palette stack and drop it on the delete button.

When you click the new layer button, a new, empty layer is created above the currentlyactive layer. The new layer will be given a name such as layer 1, layer 2, and so on. If youwant to name the layer when you create it, hold down the Alt/Option key when you pressthe new layer button. To create a new layer below the active layer, hold down the Ctrl/Command key while pressing the new layer button. To create a new layer below the activelayer and give it a name, use both modifier keys while pressing the button.

To quickly duplicate a layer, drag the layer from the layer palette stack and drop itonto the new layer button. The duplicate layer will have the same name as the layer beingcopied, with the word “copy” appended to it. If you want to give it a different name at thesame time, you can hold down the Alt/Option key as you drag and drop the layer onto thenew layer button.

WEB GRAPHICS

NOTES


To change the stacking order of layers, you simply click and drag them into a newposition in the layers palette as shown above. A thick line will appear to indicate where thelayer will be placed when you let up on the mouse button.

About the background layer: When you create a new image with a whitebackground or a colored background, the bottommost image in the Layers palette isBackground. An image can have only one background. You cannot change the stackingorder of a background, its blending mode, or its opacity. However, you can convert abackground to a regular layer.

When you create a new image with transparent content, the image does not have abackground layer. The bottommost layer is not constrained like the background layer; youcan move it anywhere in the Layers palette, and change its opacity and blending mode.

Now let’s look at the options at the top of the palette.

Using Layer blending modes

The blending mode specified in the options bar controls how pixels in the image areaffected by a painting or editing tool. It’s helpful to think in terms of the following colorswhen visualizing a blending mode’s effect:

• The base color is the original color in the image.

• The blend color is the color being applied with the painting or editing tool.

• The result color is the color resulting from the blend.Some of the available blending modes have been discussed below.

DMC 1623

NOTES


Normal

Edits or paints each pixel to make it the result color. This is the default mode. (Normalmode is called Threshold when you’re working with a bitmapped or indexed-color image.)

Dissolve

Edits or paints each pixel to make it the result color. However, the result color is arandom replacement of the pixels with the base color or the blend color, depending on theopacity at any pixel location.

Darken

Looks at the color information in each channel and selects the base or blend color—whichever is darker—as the result color. Pixels lighter than the blend color are replaced,and pixels darker than the blend color do not change.

Multiply

Looks at the color information in each channel and multiplies the base color by theblend color. The result color is always a darker color. Multiplying any color with blackproduces black. Multiplying any color with white leaves the color unchanged. When you’repainting with a color other than black or white, successive strokes with a painting toolproduce progressively darker colors. The effect is similar to drawing on the image withmultiple magic markers.

Color Burn

Looks at the color information in each channel and darkens the base color to reflectthe blend color by increasing the contrast. Blending with white produces no change

Next to the blend mode menu is the opacity control for the layer. 100% opaquemeans that there is no transparency to the layer. In the example shown here, I’ve adjustedthe opacity of the star layer to 50%. Notice how the layers below show through. As youmove the slider left, the layer will become more and more transparent until you get to thefar left where the layer content disappears entirely.

You can control the opacity level using your mouse with the slider control, or numericallyusing the number keys on your keyboard.

Below the blend mode and opacity controls, you have a series of checkboxes forlocking various editing functions. From left to right the lock can be applied to the following

• Transparency• Image pixels• Position

• All of the above

WEB GRAPHICS

NOTES


When any of the locks are activated, you will see a small lock icon appear to the rightof the layer in the layers palette. When all locks are activated, the lock icon will turn solid.You’ll notice the background layer always has its transparency and position locked. Thiscannot be changed without promoting the background to a layer.

The transparency lock allows you to edit on a layer without changing the transparencylevel of the pixels in that layer. The best way to explain this is with an example.

The image pixels lock disables all painting tools for that layer. You can still move andtransform the layer contents, adjust opacity settings, and change blend modes, but youcannot paint directly on it.

The position lock is self explanatory. You can’t move or transform a layer that has itsposition locked, but you can still paint on it, apply layer effects, and change blend modes.

The last lock is the same as selecting all three locks.

Using layer effects and styles:

Photoshop provides a variety of effects—such as shadows, glows, bevels, overlays,and strokes—that let you quickly change the appearance of a layer’s contents. Layereffects are linked to the layer contents. When you move or edit the contents of the layer,the effects are modified correspondingly. For example, if you apply a drop shadow effectto a text layer, the shadow will change automatically when you edit the text.

The effects that you apply to a layer become part of the layer’s custom style. When alayer has a style, an “f” icon appears to the right of the layer’s name in the Layers palette.You can expand the style in the Layers palette to view all the effects that comprise the styleand edit the effects to change the style.

When you save a custom style, it becomes a preset style. Preset styles appear in theStyles palette and can be applied with just a click of the mouse.

You can create custom style using one or more of the following effects:

Drop Shadow

Adds a shadow that falls behind the contents on the layer.

Inner Shadow

Adds a shadow that falls just inside the edges of the layer’s content, giving the layer arecessed appearance.

DMC 1623

NOTES


Outer Glow and Inner Glow

Add glows that emanate from the outside or inside edges of the layer’s content.

Bevel and Emboss

Adds various combinations of highlights and shadows to a layer.

Satin

Applies shading to the interior of a layer that reacts to the shape of the layer, typicallycreating a satiny finish.

Color, Gradient, and Pattern Overlay

Fills the layer’s content with a color, gradient, or pattern.

Stroke

Outlines the object on the current layer using color, a gradient, or a pattern. It isparticularly useful on hard-edged shapes such as type.

The layer style options dialog box

Managing Layers:

• As you add layers to an image, it’s helpful to rename layers based on their content.Using descriptive layer names allows you to easily identify layers in the Layerspalette.

• Color coding layers and layer sets makes it easier to locate related layers in theLayers palette.

• You cannot use the painting tools or filters on layers that contain vector data (suchas type layers, shape layers, and vector masks) and generated data (such as filllayers). However, you can rasterize these layers to convert their contents into aflat, raster image.

WEB GRAPHICS

NOTES


To rasterize a single layer:

• Select the layer you want to rasterize.

• Choose Layer > Rasterize, and choose an option from the submenu.

To rasterize multiple layers:


• Link the layers you want to rasterize, and choose Layer > Rasterize Linked Layers

Merging Layers:

When you have finalized the content of layers, you can merge them to create partialversions of your composite image. The intersection of all transparent areas in the mergedlayers remains transparent. Merging layers helps manage the size of image files.

Note: You cannot use an adjustment layer or fill layer as the target layer for a merge.

In addition to merging layers, you can stamp layers. Stamping allows you to mergethe contents of more than one layer into a target layer while leaving the other layers intact.Typically, the selected layer will stamp down to the layer below it.

To merge two layers or layer sets:

• Position the layers or layer sets you want to merge next to each other in the Layerspalette, and make sure that the visibility for both items is enabled.

• Select the top item in the pair.

• Do one of the following:

• If the top item is a layer, choose Merge Down from the Layers menu or the Layerspalette menu.

• If the top item is a layer set, choose Merge Layer Set from the Layers menu or theLayers palette menu.

To merge a clipping group:

• Hide any layers you do not want to merge.

• Select the base layer in the group.

• Choose Merge Group from the Layers menu or the Layers palette menu.

To merge all visible linked layers:

Choose Merge Linked from the Layers palette or the Layers palette menu.

To merge all the visible layers and layer sets in an image:

• Choose Merge Visible from the Layers palette or the Layers palette menu.

DMC 1623

NOTES


• To create a new layer from all visible layers, while keeping the original layersintact:

• Hold down Alt, and choose Layer > Merge Visible.

To stamp layers:

• Position the layer you want to stamp to above the layer you want to stamp from,and make sure that the visibility for both items is enabled.

• Select the top item in the pair.

• Press Ctrl+Alt+E

The selected layer is stamped with the contents of the other layer.

To stamp linked layers:

Select one of the linked layers, and press Ctrl+Alt+E. The selected layer is stampedwith the contents from the other linked layers.

To stamp all visible layers:

Select the layer or layer set that you want to contain the new contents, and pressShift+Ctrl+Alt+E

Moving, copying and transforming layers

The move tool, is used when you need to move the contents of a layer, but it is alsoused for selecting layers and copying layers. As with all the tools we’ve been learningabout, there are a few key combinations that modify the behavior of the Move tool:

• Holding down the Shift key with the move tool constrains your movements tostraight lines or 45 degree angles.

• Holding down the Alt/Option key creates a copy of the layer and moves it at thesame time.

• You can combine these modifier keys to copy the layer and constrain movementsat the same time.

You can also manipulate the contents of a layer with the Free Transform command.This command works just like it does for selections, when you are in free transform mode,a bounding box appears around the layer contents and you can move, scale, rotate, skew,distort, and flip the layer contents by using the mouse and keyboard combinations. Whenlayers are linked, your transformations will be applied to all linked layers. Transformationscan also be applied numerically using the Edit > Transform submenu.

The move tool options appear on the options bar as shown below. The Auto SelectLayer option is available. In addition, there is an option to show a bounding box on theactive layer. This makes the auto select option much more useful, because you can see

WEB GRAPHICS

NOTES


exactly which layer is active, even if your layers palette is hidden. It also makes it very easyto switch into free transform mode, just by moving the cursor to one of the handles andinvoking a transformation. When you switch into free transform mode, you’ll notice thebounding box turns from a dotted line to solid, and your options bar offers input fields forapplying numeric transformations. To apply transformations and exit free transform mode,double click inside the bounding box, press Enter on your numeric keypad, or press thecheck mark on the options bar. To exit free transform mode without applying transformations,press Esc on the keyboard or the X on the options bar.

You’ll also notice some additional buttons on the options bar for the move tool. Thesewill be grayed out unless you have 2 more layers linked. These buttons allow you to alignand distribute linked layers

Layers are preserved when you save to PSD or TIFF format. When working onlayered images, it is always a good idea to save a working copy of your layered file in thenative Photoshop format for future editing purposes. To reduce the image file size and forcompatibility you will usually need to export a second copy of the file to an alternate formatdetermined by the intended use. You can use the Save As command and the image will beflattened automatically when you choose a format other than Photoshop PSD or PhotoshopPDF. A warning will appear to alert you that some image data will be lost when using aformat that does not support layers.


1. Write about the various components of the layers palette.

2. Write about the blending modes available in the layer palette.

3. What are the types of styles available for the layers?

4. What kind of operations can be performed on layers? Give details

2.7 CREATING NEW IMAGES

As mentioned previously the ‘new’ dialog box appears and a blank image is created.

To create a new image:

1. Do one of the following:

• To base the image dimensions and resolution (Photoshop) on the Clipboardcontents, choose File > New. If the Clipboard does not contain image data, theimage dimensions and resolution are based on the last image you created.

• (Photoshop) To base the image size on the default dimensions and resolution orthe last entered settings, hold down Alt when you choose File > New.

DMC 1623

NOTES


2. If desired, type a name for the image, and set the width and height.

3. Set the resolution and mode.

4. Select an option for the contents of the background layer (Photoshop) of the image.

• White to fill the background or first layer with white, the default background color.

• Background Color to fill the background or first layer with the current backgroundcolor.

• Transparent to make the first layer transparent, with no color values. The resultingdocument will have a single, transparent layer as its contents.

You can import scanned images directly from any scanner that has an AdobePhotoshop-compatible plug-in module or that supports the TWAIN interface. To importthe scan using a plug-in module, choose the scanner name from the File > Import submenu.

f your scanner does not have an Adobe Photoshop-compatible scanner driver, importthe scan using the TWAIN interface. f you can’t import the scan using the TWAIN interface,use the scanner manufacturer’s software to scan your images, and save the images asTIFF, PICT, or BMP files. Then open the files in Photoshop. TWAIN is a cross-platforminterface for acquiring images captured by certain scanners, digital cameras, and framegrabbers. The manufacturer of the TWAIN device must provide a Source Manager andTWAIN Data source for your device to work with Photoshop.

You must install the TWAIN device and its software, and restart your computer,before you can use it to import images into Photoshop See the documentation provided byyour device manufacturer for installation information.

To import an image using the TWAIN interface (Photoshop):

Choose File > Import, and choose the device you want to use from the submenu.


1. What are the various options in the ‘new’ dialog box?

2. What are the various ways of creating new images?

2.8 BRUSHES

Using the Brushes palette

Working with brushes is an important part of using the painting and editing tools. Thebrush you select determines many characteristics of the resulting stroke. Photoshop providesa variety of preset brushes to fill a wide range of uses. In Photoshop, you can also createcustom brushes using the Brushes palette. The brushes palette is attached to the option baras a drop-down menu.

WEB GRAPHICS

NOTES


The Brush pop-up palette in the options bar for the painting and editing tools lets youview, select, and load preset brush tips.

Brush tips

Photoshop comes with a set of standard brushes. The shape, hardness, and spacingof the round brushes can be modified, and you can also create your own custom brushesfrom any selection.

Diameter

Controls the size of the brush. Enter a value in pixels or drag the slider.

DMC 1623

NOTES


Angle

Specifies the angle by which an elliptical or sampled brush’s long axis is rotated fromhorizontal. Type a value in degrees, or drag the horizontal axis in the preview box.

Roundness

Specifies the ratio between the brush’s short and long axes. Enter a percentage value,or drag the points in the preview box. A value of 100% indicates a circular brush, a valueof 0% indicates a linear brush, and intermediate values indicate elliptical brushes.

Hardness

Controls the size of the brush’s hard center. Type a number, or use the slider to entera value that is a percentage of the brush diameter.

Spacing

Controls the distance between the brush marks in a stroke. To change the spacing,type a number, or use the slider to enter a value that is a percentage of the brush diameter.When this option is deselected, the speed of the cursor determines the spacing.

WEB GRAPHICS

NOTES


• Clicking on the brush preview in the options bar allows you to change the diameter,hardness, spacing, angle, and roundness.

• When you make adjustments to a brush you can click the preset button to add it tothe brushes palette. You can also choose New Brush from the palette fly out menuto make a new custom brush.

• To adjust the brush size on-the-fly while painting, use the bracket keys [ and ].

• Holding the shift key down while pressing the bracket keys will adjust the hardnessof the brush.

All the painting tools have the ability to be faded using the Fade command. The fadeoption is available in the brush dynamics dialog box for ‘size’, ‘opacity’, and ‘color’ options.After applying any paint stroke, fill, or filter, you can select this command to fade it back sothat it blends with the original pixels. You can also use it to apply a blend mode if you forgotto set the blend mode before applying paint. The fade options are located under a pop-outat the right edge of the options palette. The effect of fade is as shown below.

Brush dynamics

The Brushes palette provides many options for adding dynamic (or changing) elementsto preset brush tips. For example, you can set options that vary the size, color, and opacityof brush marks over the course of a stroke.

You can also fade the size and color of brush strokes. Each “step” specified in thefade options is the equivalent of the brush tip

The Paint Brush tool

This is probably the painting tool you will be using most often. The shortcut key is B.The Paintbrush tool applies color to your document similar to the way a traditional paintbrushwould apply paint on paper or canvas. The option box contains the chosen brush, its index

DMC 1623

NOTES


number, mode, opacity. Mode and opacity have been already discussed in the layerstopic. The same discussion is valid for this too.

Paint brush options

Wet edges apply paint that acts more like watercolor paint or markers. When youpaint with a soft brush, the paint is more translucent in the center of the stroke and darkeralong the edges of the stroke. With a hard edge brush at 100% opacity, the paint still hassome translucency, just as markers or watercolor paints would have. When Wet Edges isnot active, a soft edge brush stroke at 100% opacity will be opaque toward the center andfade out along the edges. A hard brush at 100% opacity will be completely opaque, butunlike the pencil tool, the edges will be smooth and not jaggie.

The Air brush tool

The airbrush tool works more like a traditional airbrush or spray paint. The airbrushputs paint on a bit lighter than the paintbrush tool, but when you hold your mouse buttondown without moving the cursor, the paint builds up just like it would if you were to holdthe nozzle down on a can of spray-paint. Instead of adjusting the opacity for the airbrushtool, you set the pressure. The higher the pressure is set, the thicker your paint will go on.The airbrush is especially useful for painting subtle shading and highlights. With a pressure-sensitive tablet, you can really get exceptional control with the airbrush tool.

The Pencil tool

This tool is shared with the Paintbrush and the shortcut key is B. Shift B togglesbetween the Paintbrush and Pencil tool. If you look at the options below there is a newoption “Auto Erase” that allows you to paint over the foreground color with the backgroundcolor and vice-versa. When auto-erase is enabled, if the background color is detectedwhen you first click the mouse button, you will begin painting with the foreground color; ifthe foreground color is detected, you will be painting with the background color.

WEB GRAPHICS

NOTES


History and Art History brush tools

History brush

The history and art history brush are tools that help create some fantastic effects. Towork with these tools you will need to have the history palette open, because they use aprevious version of your image.

The history brush tool allows you to paint areas of one layer onto another. It can beused to create sophisticated montages or to build other effects that would otherwise takea lot more time to create. Shown below are the history brush options.

The new snapshot dialog box (shown below) can be opened by selecting the ‘newsnapshot’ from the history palette.

The history brush tool lets you paint a copy of one state or snapshot of an image intothe current image window. This tool makes a copy, or sample, of the image and then paintswith it.

For example, you might make a snapshot of a change you made with a painting toolor filter. After undoing the change to the image, you could use the history brush tool toapply the change selectively to areas of the image. Unless you select a merged snapshot,the history brush tool paints from a layer in the selected state to the same layer in anotherstate.

DMC 1623

NOTES


The history brush tool works similarly to the clone stamp tool, but on any state orsnapshot of the image, not just the current one.

To paint with a state or snapshot of an image

1. Select the history brush tool.

2. Do one of the following in the options bar:

• Specify the opacity and blending mode

• Choose a brush and set brush options

3. In the History palette, click the left column of the state or snapshot to use as thesource for the history brush tool.

4. Drag to paint with the history brush tool.

Art History Brush

The art history brush tool lets you paint with stylized strokes, using the source datafrom a specified history state or snapshot. By experimenting with different paint style, size,and tolerance options, you can simulate the texture of painting with different colors andartistic styles.

Like the history brush, the art history brush uses a specified history state or snapshotas the source data. The history brush, however, paints by recreating the specified sourcedata, while the art history brush uses that data along with the options you set to createdifferent colors and artistic styles. The images below are the original image and the modifiedimage using art history brush.

WEB GRAPHICS

NOTES


To use the art history brush tool

1. In the History palette, click the left column of the state or snapshot to use as thesource for the art history brush tool. A brush icon appears next to the sourcehistory state.

2. Select the art history brush tool .

3. Do the following in the options bar:

• Choose a brush and set brush options.

• Specify a blending mode and opacity for the paint.

• Choose an option from the Style menu to control the shape of the paint stroke.

• For Area, enter a value to specify the area covered by the paint strokes. The

• greater the size, the larger the covered area and more numerous the strokes.

• For Tolerance, enter a value or drag the slider to limit the regions where paint

• strokes can be applied. A low tolerance lets you paint unlimited strokesanywhere in the image. A high tolerance limits paint strokes to areas that differconsiderably from the color in the source state or snapshot.

4. Drag in the image to paint.

Shown below are the options for art history brush tool

The ‘Style’ setting determines how the paint is laid onto the layer. Access the differentstyles by clicking the pop-up menu button.

The ‘fidelity’ setting determines how true to the original the colors are. The lower thefidelity, the more variance there is from the original.

The ‘spacing’ setting determines how far apart the paint strokes are when they arelaid onto the layer.

The ‘area’ setting specifies how large an area is covered by the paint strokes


1. Write about the options available in the brush palette?

2. Write about Paint brush, Air brush and pencil tools.

3. Write about History and Art History Brushes and how is the History paletteassociated with them.

2.9 GRIDS AND GUIDES

Guides appear as lines that float over the entire image and do not print. You canmove, remove, or lock a guide to avoid accidentally moving it.

DMC 1623

NOTES


In Photoshop, a grid appears by default as nonprinting lines but can also be displayedas dots. The grid is useful for laying out elements symmetrically.

Guides and grids behave in similar ways

a. Selections, selection borders, and tools snap to a guide or the grid when draggedwithin 8 screen (not image) pixels. Guides also snap to the grid when moved. Youcan turn this feature on and off.

b. Guide spacing, along with guide and grid visibility and snapping, is specific to animage.

c. Grid spacing, along with guide and grid color and style, is the same for all images.

To show or hide a grid or guides

Do one of the following

• Choose View > Show > Grid.

• Choose View > Show > Guides.

• Choose View > Extras. This command also shows or hides selection edges, targetpath, slices, and notes

To place a guide

1. If the rulers are not visible, choose View > Rulers.

2. Create a guide:

• Choose View > New Guide. In the dialog box, select Horizontal or Verticalorientation, enter a position, and click OK.

• Drag from the horizontal ruler to create a horizontal guide.

• Hold down Alt and drag from the vertical ruler to create a horizontal guide.

• Drag from the vertical ruler to create a vertical guide.

• Hold down Alt and drag from the horizontal ruler to create a vertical guide.

• Hold down Shift and drag from the horizontal or vertical ruler to create a guidethat snaps to the ruler ticks.

The pointer changes to a double-headed arrow when you drag a guide.

WEB GRAPHICS

NOTES


To move a guide

1. Select the move tool, or hold down Ctrl to activate the move tool.

2. Position the pointer over the guide (the pointer turns into a double-headed arrow).

3. Move the guide:

• Drag the guide to move it.

• Change the guide from horizontal to vertical, or vice versa, by holding down Alt asyou click or drag the guide.

• Align the guide with the ruler ticks by holding down Shift as you drag the guide.The guide will snap to the grid if the grid is visible and View > Snap To > Grid isselected.

To lock all guides:

Choose View > Lock Guides.

To remove guides from the image:


• To remove a single guide, drag the guide outside the image window.

• To remove all guides, choose View > Clear Guides.

To turn snapping to guides on or off:

Choose View > Snap To > Guides.

To turn snapping to the grid on or off””

Choose View > Snap To > Grid.

To set guide and grid preferences”


• choose Edit > Preferences > Guides, Grid, & Slices.

DMC 1623

NOTES


2. For Color, choose a color for the guides, the grid, or both. If you choose Custom,click the color box, choose a color, and click OK.

3. For Style, choose a display option for guides or the grid, or both.

4. For Gridline every, enter a value for the grid spacing. For Subdivisions, enter avalue to subdivide the grid.

If desired, change the units for this option. The Percent option creates a grid thatdivides the image into even sections. For example, choosing 25 for the Percent optioncreates an evenly divided 4-by-4 grid.

2. Click OK.

The figure below shows the grid on the top and left.


1. State the steps to create and use guides and grid?

2. Differentiate between guides and grid.

3. What are the options available in the guides and grids preferences dialog box?

2.10 SCALING OR RESIZING IMAGES

Using the Image Size/Canvas Size Menu Options

When an image needs to be resized in Photoshop the image size, the resolution, or acombination of both must be changed. There are two menu options that handle this. TheImage Size menu option allows new image size dimensions to be specified, or a newresolution to be created. The Canvas Size option allows the existing image to remain,while appending or removing areas from it according to the dimensions entered.

Image Size Menu Option

1. Select Image Size from the Title bar of the current image. A window will appearstating the current linear dimensions of the image, the current resolution, and atthe top, the total number of pixels

WEB GRAPHICS

NOTES


2. Change the Print Size width dimension, with Constrain Proportions andResample Image activated.

3. Note that the height dimension reduces to match the width, and the resolutionincreases to accommodate the total number of pixels.

4. Change the resolution.

5. Repeat above steps with Resample Image not selected. The resolution stays thesame, and the total number of pixels indicated at the top of the window reduces.

Canvas Size Menu Option

To specify a new dimension for a file without resizing the existing elements:

1. Choose Image/Canvas Size from the Menu bar.

2. A window appears stating the current image size dimensions. Increasing thedimensions will add area to the image, while decreasing the dimensions will subtractarea from the image. To control where area is to be added or subtracted, ananchor point can be specified, such as upper left corner), and area will be addedor subtracted opposite this point. If no anchor point is selected, the area affectedwill be equal on all sides.

DMC 1623

NOTES


3. Enter a new width and leave the height as-is.

4. Click the Anchor image on the middle left-hand square.

5. Click OK. Your image has been left alone, while additional space has been addedto the right of the image.


1. State the steps to create and use guides and grid?

2. Differentiate between guides and grid.

3. What are the options available in the guides and grids preferences dialog box?

2.11 SCREEN CAPTURING

• “capture” image that appears on screen

• Works like copy and paste

• Press Print Screen button to copy screen contents

• Paste into new image

• Press Alt+Print Screen to capture active window


1. What is the impact of ‘constrain-proportions’ on image resizing?

2. What are the various options in the ‘image size’ dialog box?

3. What are the various options in the ‘canvas size’ dialog box?

4. What do you understand by ‘resampling’ an image?

5. What do you understand by ‘screen capturing’? How is it performed?

2.12 STYLES PALETTE

The Styles Palette contains prepackaged and custom Styles that can be applied toshapes, layers and text.

The Styles palette, Layer Styles dialog box, and Layer Styles pop-up palette in theoptions bar for the pen and shape tool let you view and select preset layer styles. Bydefault, applying a preset style replaces the current layer style. However, you can add theattributes of a second style to those of the current style using a keyboard modifier.

The layer styles that come with Photoshop are grouped into libraries by function. Forexample, one library contains styles for creating Web buttons; another library containsstyles adding effects to text.

WEB GRAPHICS

NOTES


To display the Styles palette

Choose Window > Styles

To apply a preset style to a layer

Do one of the following

• Click a style in the Styles palette to apply it to the currently selected layer.

• Drag a style from the Styles palette onto a layer in the Layers palette.

• Drag a style from the Styles palette to the document window, and release themouse button when the pointer is over the layer content to which you want toapply the style.

• Double-click a layer thumbnail in the Layers palette, and click on the word Stylesin the Layer Styles dialog box (top item in the list on the left side of the dialog box).Click the style you want to apply, and click OK.

• When using a shape or pen tool, select a style from the pop-up palette in theoptions bar before drawing the shape.

To load a library of preset styles

1. Click the triangle in the Styles palette, Layer Style dialog box , or Layer Stylepop-up palette in the options bar.


• Choose Load Styles to add a library to the current list. Then select the library fileyou want to use, and click Load.

• Choose Replace Styles to replace the current list with a different library. Thenselect the library file you want to use, and click Load.

• Choose a library file (displayed at the bottom of the palette menu). Then click OKto replace the current list, or click Append to append the current list.

To return to the default library of preset styles

1. Click the triangle in the Styles palette, Layer Styles dialog box or Layer Stylespop-up palette in the options bar.

DMC 1623

NOTES


2. Choose Reset Styles. You can either replace the current list or append the defaultlibrary to the current list.

To change how preset styles are displayed

1. Click the triangle in the Styles palette, Layer Styles dialog box , or Layer Stylespop-up palette in the options bar

2. Choose a display option from the palette menu:

• Select Text only to view the layer styles as a list.

• Select Small or Large Thumbnail to view the layer styles as thumbnails.

• Select Small or Large List to view the layer styles as a list, with a thumbnail ofthe selected layer style displayed.


1. What is the use of ‘styles’ palette?

2.13 CREATING ANIMATION USING PHOTOSHOP AND IMAGEREADY

Below is the Adobe ImageReady program interface. This is used for creating animationsand optimizing them for the web. The first thing you’ll notice is the Image Window containsSave for Web controls in the form of Original, Optimized, 2-Up, and 4-Up Tabs (4-upnow selected). Because ImageReady is dedicated exclusively to web output, you canthink of ImageReady as always being in Save for Web mode. Though of course, you canstill save native Photoshop files.

WEB GRAPHICS

NOTES


There are also some changes to the Palettes. Instead of a Navigation Palette, wehave an Optimize Palette where we set our Compression settings. We also have aRollover, Animation, Image Map, and Slice Palette. Furthermore, subtle changes inother Photoshop’s traditional Palettes also exist. One Tool that ImageReady and Photoshopshare is the Slice Tool. It operates identically in both programs. To create an animatedbanner we need animation palette.

Preparation

Start ImageReady. Make sure the Animation palette is visible. If it is not, chooseWindow > Show Animation to make it visible.

The Animation Palette contains Tabs for Animation, Slice, Image Map, and Rollover(Slice, Image Map, and Rollover are covered later), a Frame Thumbnail, Loopingcontrol, Frame controls (First Frame, Previous Frame, Stop, Play, Next Frame), andcontrols to Tween, Add, Duplicate and Remove frames.

Frame Thumbnails

Each Frame Thumbnail consists of a frame marker which indicates the frame number,a graphical representation of the image data contained in the frame, and the duration of theframe which you change by {Clicking} on the arrow beside the duration and selecting thedesired duration (in seconds). To change the order of frames simply {Click}, hold, anddrag the frame to the new location. To add frames {Click} the Duplicate Frame button. A new frame is created with the image data contents of the previous frame inside. Todelete a frame, select it and {Click} the Trashcan icon. To control whether the animationplays once, loops continuously, or loops a set amount of times select from the Loop drop-down menu.

Frame Controls

Use the Frame controls to play and stop the animation, go to the next or previousframes, and go to the first frame.

DMC 1623

NOTES


Seven steps to construct an animation

1. Create basic image (or open an existing multilayered image) We will construct asimple image, a sign that says “WELCOME”, using the Toolbox.

• First, select File>New

• In the dialog box that opens set: Name: Welcome, Image size: Width 200, Height40, and Content: transparent

Click “OK”

Select the Text Tool in the Toolbox and click the blank transparent image. Type“WELCOME” at the cursor on the image. We want to use a 30 px Bold Arial font so enterthe values below in the Type Tool palette and change the foreground color to green.

After achieving the desired font and color the Move tool can be used to center thetext in the image. This is the basic image we will use to form the animation.

WEB GRAPHICS

NOTES


2. Add animation frames

A thumbnail of the basic image should be located in the Animation palette. The initialframe needs to be duplicated several times. This is done by clicking the “Duplicate CurrentFrame” icon . The result should look like

3. Make changes in frames using Layer palette

Changes will be made in the first and third frames to create the animation. In the thirdframe we will change the opacity so the “WELCOME” message fades away. We willchange the first frame so that the message will move “onstage” from the left side to thecenter.

Select the third frame. Then in the Layer palette move the opacity slider to 0%.

The message in the third frame should now be invisible.

Now select the first frame. Using the Marquee tool (from the toolbox) select the text“WELCOME”. Then, using the Move tool, move the selection just off the left edge of theimage. The image below shows the text partly moved.

DMC 1623

NOTES


4. Add frames with Tween

We now have three frames where the message is visible in the 2nd frame, but invisiblein the 1st and 3rd. We will use the Tween Command to fill in frames to create the desiredactions.

First we will add frames between the 2nd and 3rd frames that will cause the message tofade away. Select the 2nd frame. Open the Animation palette menu (by clicking the smalltriangle in the upper right of the Animation palette) and select Tween.

In the Tween dialog box select to add 6 frames, Tween with Next Frame, and selectOpacity to vary.

WEB GRAPHICS

NOTES


Clicking “OK” should add 6 more frames.

Now we want to use ‘tweening’ to move the message from offstage to the center.Select the 1st frame and select Tween from the Animation menu as before. Use 6 newframes again, but this time check Position and uncheck Opacity as the feature to vary.Clicking “OK” adds 6 more frames as indicated.

It only remains to set the delay between frames.

5. Add delays between frames

Go to the Animation menu and choose Select All Frames. This will highlight all theframes. Alternately, the (number on the) first frame can be clicked and the last frame canbe shift+clicked. With all the frames selected click the small down triangle to the right ofsec at the bottom of one frame. Choose a delay, for example, 0.1 seconds. This is appliedto all the selected frames. To set the delay for a single frame, for example Number 7, selectit alone and change its delay.

6. Preview animation

To view the animation go to File>Preview. It is good to check what the animationlooks like in all the popular browsers.

7. Save animation

The layered animation is saved as a .psd file using File>Save Original. To save it as agif animation use File>Save Optimized. An HTML file which includes the code for placingthe animation on a web page can also be generated by going to File>Export>Save HTML.


1. What are the options available in the ‘animation’ palette?

2. How is the ‘optimize’ palette used?

DMC 1623

NOTES


3. How will you create animation using ImageReady? Discuss with an example.

4. Differentiate between the palettes and options available in Photoshop andImageReady?

Summary

1. Computer graphics fall into two main categories—bitmap and vector. Bitmapimages—technically called raster images—use a grid of colors known as pixelsto represent images. Vector graphics are made up of lines and curves defined bymathematical objects called vectors.

2. Image attributes – size, resolution, color model, color depth, file size, file format,palette.

3. Palettes help you monitor and modify images. By default, palettes appear stackedtogether in groups. The palettes are Layers, Channels, Paths, History, Actions,Color, Swatches, Styles, Navigator and Info.

4. To know the image profile look at the status bar for the following Document size,document profile, document dimensions, scratch sizes, timing, efficiency, currenttool.

5. Color models supported in Photoshop are HSB, RGB, CMYK, L *a *b, grayscale,duotone, indexed, multichannel.

6. Layers allow you to work on one element of an image without disturbing the others.

7. To quickly duplicate a layer, drag the layer from the layer palette stack and drop itonto the new layer button.

8. The blending mode specified in the options bar controls how pixels in the imageare affected by a painting or editing tool. Some of the options are Normal, dissolve,color burn, darken, multiply etc.,

9. Photoshop provides a variety of effects—such as shadows, glows, bevels, overlays,and strokes—that let you quickly change the appearance of a layer’s contents.

10. When you have finalized the content of layers, you can merge them to createpartial versions of your composite image. The intersection of all transparent areasin the merged layers remains transparent. Merging layers helps manage the size ofimage files.

11. The move tool, is used when you need to move the contents of a layer, but it is alsoused for selecting layers and copying layers.

12. TWAIN is a cross-platform interface for acquiring images captured by certainscanners, digital cameras, and frame grabbers. The manufacturer of the TWAINdevice must provide a Source Manager and TWAIN Data source for your deviceto work with Photoshop.

13. Photoshop comes with a set of standard brushes. The shape, hardness, and spacingof the round brushes can be modified, and you can also create your own custombrushes from any selection.

WEB GRAPHICS

NOTES


14. The fade option is available in the brush dynamics dialog box for ‘size’, ‘opacity’,and ‘color’ options.

15. Wet edges apply paint that acts more like watercolor paint or markers. When youpaint with a soft brush, the paint is more translucent in the center of the stroke anddarker along the edges of the stroke.

16. The airbrush is especially useful for painting subtle shading and highlights.

17. The history brush tool allows you to paint areas of one layer onto another.

18. The art history brush tool lets you paint with stylized strokes, using the source datafrom a specified history state or snapshot.

19. Guides appear as lines that float over the entire image and do not print. The grid isuseful for laying out elements symmetrically.

20. Image Size menu option allows new image size dimensions to be specified, or anew resolution to be created. The Canvas Size option allows the existing imageto remain, while appending or removing areas from it according to the dimensionsentered.

21. Click a style in the Styles palette to apply it to the currently selected layer

22. This is used for creating animations and optimizing them for the web.

23. The Animation Palette contains Tabs for Animation, Slice, Image Map, andRollover (Slice, Image Map, and Rollover are covered later), a FrameThumbnail, Looping control, Frame controls (First Frame, Previous Frame,Stop, Play, Next Frame), and controls to Tween, Add, Duplicate and Removeframes.

DMC 1623

NOTES


WEB GRAPHICS

NOTES


UNIT - III

IMAGE HANDLING IN PHOTOSHOP3.1 INTRODUCTION

Photoshop is one of the most powerful image editing programs that helps us edit ourpicture as required. The flexibility is because of the availability of a rich variety of tools.The filters add extra look and feel to the images. The color adjustments set the tone requiredfor the images. Text can be merged with images and many text warping styles allow us tochoose one that suits the image underneath it. Background images can be created withease, oil paint effects can be produced with simple editing operations and Icons withspecial effects can be designed with less effort.


• To understand using Gradient tool.

• To Know how to add text to images

• Creating background images

• To understand how to create animation

• To know about the color models

• To know how to apply Color calibration

• To create an oil paint effect for an image.

• To know the procedures to design Icons in Photoshop

3.3 GRADIENT TOOL

The Gradient Tool is used to create gradient fills. Gradients are gradual shifts fromat least one color to another or one color to transparency. The effect is similar to the waythe sky shifts from dark blue to a lighter blue as you look toward the horizon. Gradientscan also consist of multiple colors, much like a rainbow.

Select from Linear, Radial, Angle, Reflected, and

Diamond Gradient Tools . Click and drag to create the Gradient in a Layer or

Selection.

DMC 1623

NOTES


Gradient Tool Options

Options include Gradient, Blend Mode, Opacity, Reverse, Dither, Transparency,and Edit. A preview of the Gradient appears in the Gradient Preview bar.

Gradient Options

The Gradient drop-down has 15 Gradient combinations to select from. Choosefrom any one of the 15 Thumbnails or click on the Options Triangle to edit or createyour own Gradients. Double Click on the drop-down to access the Gradient Editor.

The Gradient Menu

Reverse

Check Reverse to reverse the Gradient.

Dither

Check Dither to make the transition from one color to the next as smooth as possible.

Transparency

Check Transparency, to enable any transparency settings in the Gradient patterns. Uncheck to disable transparency.

Gradient Editor

The Gradient Editor consists of the Gradient Preset Menu, controls to create NewGradients, Rename Gradients, Remove Gradients, Duplicate Gradients, Load andSave Gradients, Adjust color or transparency, Color Stops to build Gradients, and theGradient Bar.

WEB GRAPHICS

NOTES


Creating new gradients

To create a new Gradient select ‘New’ and name it in the Name field. A newThumbnail will appear in the Gradient Preset Menu.

The Gradient Bar is automatically built with a copy of the last selected Gradient. Tochange a color select one of the Color Stops situated at the bottom of the Gradient Barand Double-Click on it. Select a color from the Color Picker.

To add additional Color Stops to the Gradient, click on an empty spot beneath theGradient Bar. To modify the location of Gradient colors drag the Color Stops andMidpoint Markers back and forth as you desire. To delete a color simply select it’sColor Stop and hit the [DEL] key or drag up or down on it and it will disappear.

To add Transparency, adjust the Stops at the top of the Gradient Bar (which displaysAlpha information rather than colors) and adjust the Opacity Slider at the bottom of thedialog box. Clicking and dragging the Stops and Midpoint Markers effects the placementof Transparency.

Adjust the Smoothness Slider click to increase or decrease the smoothness of yourGradient. You can also choose a Gradient Type from the Type drop-down Menu. Smoothis the default while Noise creates a Gradient that randomly mixes the color across a selectedrange. Adjust the various Sliders in the dialog box to find a noisy Gradient that suits yourneeds.

DMC 1623

NOTES


If you wish you can use percentage figures to precisely position the Stops and theMidpoint Markers by adjusting the location sliders at the bottom of the dialog box.

OK to finish.


1. What are the Gradient tool options? What is the effect of each of the options?

2. How would you create new Gradients?

3.4 ADDING TEXT TO IMAGES

Using the Type Tool

Type consists of mathematically defined shapes that describe the letters, numbers,and symbols of a typeface. Many typefaces are available in more than one format, themost common formats being Type 1 (also called PostScript fonts), TrueType, and OpenType.When you add type to an image, the characters are composed of pixels and have the sameresolution as the image file—zooming in on characters shows jagged edges. However,Photoshop and ImageReady preserve the vector-based type outlines and use them whenyou scale or resize type. As a result, it’s possible to produce type with crisp, resolution-independent edges. You can create horizontal or vertical type anywhere in an image.Depending on how you use the type tool, you can enter point type or paragraph type.Point type is useful for entering a single word or a line of characters; paragraph type isuseful for entering and formatting the type as one or more paragraphs.

Use the Type Tool to create text in Photoshop. For the Web you’ll

be using type to label buttons and as elements of typographic design. The two buttons inthe first group toggle between creating a new type layer, and creating a type mask. Thetwo buttons in the second group toggle between horizontal text and vertical text. Selectthe Type Tool and bring your mouse onto the Image Window. Photoshop creates a newText Layer (indicated in the Layers Palette by a capital “T” at the edge of the Layer).

WEB GRAPHICS

NOTES


Select the Vertical Type Tool to input vertical text. Select the Type Mask Tool

to create a selection in the shape of the text you input.

Let us know about typography and terminology associated with it.

Typographic Terminology

• Before you begin to create and manipulate text in Photoshop, you should knowsome of the basic typographic terminology that some of the options in Photoshopuse. Examine the following example.

Typeface

A typeface is a full set of characters (uppercase, lowercase, numerals, specialcharacters, etc.) designed in a specific Style. For example, the same word, presentedusing different typefaces, can look quite different:

Typeface Typeface Typeface Typeface

Typefaces are also often referred to as fonts. The look of your text is very much akey in the design of your images.

Baseline

The Baseline in text is an imaginary line that the characters effectively sit upon. Lowercase text, such as the “p”, has a descender, which descends below the Baseline.

Kerning

Kerning is the space between a particular pair of characters. Each typeface mayhave particular kerning values so that some characters are closer to each other than others,depending on their shape. For example, the capital letters A and V, when placed together,have complimentary shapes and are often placed closer together than A and N.

Tracking

Tracking is the space between characters in a line of text. The space betweencharacters, regardless of the particular characters, is uniform when using Tracking. It caneasily be confused with Kerning. Remember that Kerning is a very specific measurement

DMC 1623

NOTES


of spacing between particular pairs of characters, whereas Tracking is the measurement ofspacing between all characters.

In Photoshop you adjust a types Style, kerning, leading, tracking, etc. by selectingoptions from the Options Bar or the Character /Paragraph Palette. Simply highlightthe text that you want to change and select an option from either the Options Bar or thePalette.

Before you click in your document, take a moment to look at the I-beam cursor thatappears when you move you mouse into the document area: Notice the small horizontalline that intersects the I-beam This line indicates the baseline of the type. It is useful whenyou need to align the baseline of your type with another object in your document, or foraligning type to a guideline. Below is the options bar for text.

Font

Use the drop-down menu to select the Font you want to use. Photoshop will list allthe fonts installed on your system.

Style

Use the drop-down menu to select Styles such as Bold, Italic, Underline, andRegular. Available Styles differ depending on the font you’ve selected. However, youcan click on Underline, Faux Bold, or Faux Italic to add these Styles to fonts that donot have them.

Size

Input Font Size to scale your text. Size is measured in either points or pixels. Usepixels for web development. If you highlight your text by Clicking and dragging over it,any changes you make to the font size changes the size of the font. Alternately you canhighlight your type and the font size value and use [SHIFT] Arrow-Up or Arrow-Down toincrease or decrease the size value in increments of 10.

Anti-Alias

Select from None, Crisp, Strong, and Smooth to control the level of Anti-aliasing ofyour text. You’ll find that Crisp is particularly useful for small text.

WEB GRAPHICS

NOTES


Character palette

Character palette Character palette options

Paragraph Palette

Paragraph palette Paragraph palette options

The Paragraph Palette allows you to modify Paragraph Text. Paragraph text isthat which occupies a pre-defined Paragraph Block. To create a Paragraph Block youmust Click and drag in the Image Window with the Text Tool. A Paragraph Blocklooks somewhat like a Selection Marquee with handles to resize it along all sides and ablinking text cursor in the top right hand corner to input text. Use the Alignment,Justification, and Indentation Controls in the Palette to modify the positioning of text inthe Paragraph Block. Click the Hyphenation and justification options to see the dialogboxes as shown below.

DMC 1623

NOTES


Text Warp

The ability to edit text has increased greatly in Photoshop with the introduction ofText Warping. Text Warping allows the user to customize the appearance of text and stillmaintain the ability to edit it at all times. Type some text say ‘a scenic beach’ as shownbelow and Click on the Text Warp button in the Options Bar. A dialog box appears onyour screen. Select the type of warp that you’d like to create from the Style drop-downmenu. The style chosen for the example here is “flag’ which has created a wavy text.

The Warp Text Dialog box allows you to bend and distort type in a variety of ways.The style menu allows you to choose from 15 different warp styles. Warp effects can beapplied to the entire type layer whether it is line text or paragraph text. On paragraph text

WEB GRAPHICS

NOTES


the warp is applied to the bounding box. Once you choose a warp style, you can adjust theeffects using the other options in the dialog box.

• The horizontal and vertical radio buttons control the orientation of the warp.

• Bend controls the amount and direction of the warp. For instance, an arc effectwill become more pronounced the closer you move the slider to the end of thescale. The left half of the scale creates a downward arc. The right side of the scalecreates an upward arc.

• The Horizontal and Vertical distortion sliders allow you to apply perspective to thewarp effect.

Working with ‘Type’ layers

• To edit text in a type layer:

1. Select the type tool ().

2. Select the type layer in the Layers palette, or click in the text flow to automaticallyselect a type layer.

3. Position the insertion point in the text, and do one of the following:

• Click to set the insertion point.

• Select one or more characters you want to edit.

4. Enter text as desired.

5. (Photoshop) Commit the changes to the type layer.

• To rasterize text:

Some commands and tools—such as filter effects and painting tools—are not availablefor type layers. You must rasterize the type prior to applying the command or using thetool. Rasterizing converts the type layer to a normal layer and makes its contents uneditableas text. A warning message appears if you choose a command or tool that requires arasterized layer. Some warning messages provide an OK button that you can click torasterize the layer.

To convert a type layer to a normal layer:

1. Select the type layer in the Layers palette.

2. Choose Layer > Rasterize > Type.

• Converting between point type and paragraph type

You can convert point type to paragraph type to adjust the flow of characters withina bounding box. Or you can convert paragraph type to point type to make each text lineflow independently from the others.

When you convert from paragraph type to point type, a carriage return is added atthe end of each line of type (with the exception of the last line). When you convert point

DMC 1623

NOTES


type to paragraph type, you must remove carriage returns in the paragraph type to let thecharacters reflow in the bounding box.

Important: When you convert paragraph type to point type, all characters thatoverflow the bounding box are deleted. To avoid losing text, adjust the bounding box sothat all type is visible prior to conversion.

To convert between point type and paragraph type:

1. Select the type layer in the Layers palette.

2. Choose Layer > Type > Convert to Point Text, or Layer > Type > Convert toParagraph Text.


1. What are Font attributes?

2. How are text layers represented? What are the options available?

3. Write about the options available in the Paragraph palette and Character palette.

4. What are the text warping styles available in Photoshop?

3.5 CREATING BACKGROUND IMAGES

Using Paintbrush tool to create a background Image

1. Create a new document that is 5x5 inches and 72 pixels dpi. Make sure the colorswatches at the bottom of the toolbox are at default Black/White setting by clickingthe small squares.

2. Choose Edit>Fill and fill the document with the foreground color. The canvas isnow painted with black.

WEB GRAPHICS

NOTES


3. Select the paintbrush tool.

4. If the color palette isn’t open, select window>show color to open it. Choose anice shade of green.

5. Change the brush setting to soft round, 65 pixels. Make sure all of the brushdynamics settings are set to off.

6. create a pattern of your choice just by painting as you wish. Shown an examplebelow.

7. Change the brush setting to sfot round, 35 pixels and select a shade of yellowcolor. Use the paint brush to paint over it.

8. Now select Filter>Distort>Twirl and set the angle to the maximum level of 999 inthe text box of the twirl dialog.

9. Select Filter>Blur>Gaussian Blur and set the radius to 5 pixels

10. Choose Filter>Render>Lighting effects. Choose 2 O’clock spotlight and light typeas spot light, texture channel as ‘red’ and height ‘96’. You will see an effect similarto what is shown below.

DMC 1623

NOTES


To specify the current image as a background image

Select the ‘save for web’ option. Click the output settings option on the right.

1. Open the Output Settings dialog box and click ‘next’. select the Backgroundoption set.

2. For View As, select Background. (By default this is set as ‘image’ (as shown in thefigure above) change it to ‘background’.

3. To select a solid color background to be displayed while the background image isdownloading, or to be displayed through any transparent areas in the backgroundimage, click the Color box and choose a color using the color picker. Alternatively,click the triangle next to the Color box and select None, Foreground Color,Background Color, or Other (using the color picker), or select a color from thepop-up palette.

4. Click OK.

To specify a background to be used with the current image

1. Open the Output Settings dialog box and select the Background preference set.

2. For View As, select Image.

3. Select a background:

• To select a background image, click Choose and select an image to be used as abackground behind the current image.

WEB GRAPHICS

NOTES


• To select a solid color background, click the Color box and choose a color usingthe color picker. Alternatively, click the triangle next to the Color box and selectNone, Foreground Color, Background Color, or Other (using the color picker),or select a color from the pop-up palette.

If you select a background image and a background color, the background colordisplays while the background image is downloading. It also displays through any transparentareas in the background image.


1. How would you make the current image as background image?

2. How would you create a background image from scratch in Photoshop?

3.6 COLOR MODELS

HSB color model (Hue, Saturation, Brightness)

Based on the human perception of color, the HSB model describes three fundamentalcharacteristics of color:

Hue is the color reflected from or transmitted through an object. It is measured as alocation on the standard color wheel, expressed as a degree between 0° and 360°. Incommon use, hue is identified by the name of the color such as red, orange, or green.

Saturation, sometimes called chroma, is the strength or purity of the color. Saturationrepresents the amount of gray in proportion to the hue, measured as a percentage from 0%(gray) to 100% (fully saturated). On the standard color wheel, saturation increases fromthe center to the edge.

Brightness is the relative lightness or darkness of the color, usually measured as apercentage from 0% (black) to 100% (white).

Although you can use the HSB model in Photoshop to define a color in the Colorpalette or Color Picker dialog box, there is no HSB mode available for creating andediting images.

HSM model: A. Saturation B. Hue C. Brightness D. All hues

DMC 1623

NOTES


RGB color model

A large percentage of the visible spectrum can be represented by mixing red, green,and blue (RGB) colored light in various proportions and intensities. Where the colorsoverlap, they create cyan, magenta, yellow, and white.

Because the RGB colors combine to create white, they are also called additive colors.Adding all colors together creates white—that is, all visible wavelengths are transmittedback to the eye. Additive colors are used for lighting, video, and monitors. Your monitor,for example, creates color by emitting light through red, green, and blue phosphors.

Additive colors (RGB)

CMYK model

The CMYK model is based on the light-absorbing quality of ink printed on paper. Aswhite light strikes translucent inks, certain visible wavelengths are absorbed while othersare reflected back to your eyes.

In theory, pure cyan (C), magenta (M), and yellow (Y) pigments should combine toabsorb all light and produce black. For this reason these colors are called subtractivecolors. Because all printing inks contain some impurities, these three inks actually producea muddy brown and must be combined with black (K) ink to produce a true black. (K isused instead of B to avoid confusion with blue.) Combining these inks to reproduce coloris called four-color process printing.

The subtractive (CMY) and additive (RGB) colors are complementary colors. Eachpair of subtractive colors creates an additive color, and vice versa.

WEB GRAPHICS

NOTES


L *a *b color model

The L*a*b color model is based on the model proposed by the CommissionInternationale d’Eclairage (CIE) in 1931 as an international standard for color measurement.In 1976, this model was refined and named CIE L*a*b.

L*a*b color is designed to be device independent, creating consistent color regardless ofthe device (such as a monitor, printer, computer, or scanner) used to create or output theimage.

L*a*b color consists of a luminance or lightness component (L) and two chromaticcomponents: the a component (from green to red) and the b component (from blue toyellow).

L*a*b* model: A. Luminance =100 (white) B. Green to red component C. Blue toyellow component D. Luminance = 0 (black)

Bitmap Mode

This mode uses one of two color values (black or white) to represent the pixels in animage. Images in Bitmap mode are called bitmapped 1-bit images because they have a bitdepth of 1.

Grayscale

This mode uses up to 256 shades of gray. Every pixel of a grayscale image has abrightness value ranging from 0 (black) to 255 (white). Grayscale values can also bemeasured as percentages of black ink coverage (0% is equal to white, 100% to black).Images produced using black-and-white or grayscale scanners typically are displayed inGrayscale mode.

Duotone mode

This mode creates duotone (two-color), tritone (three-color), and quadtone (four-color) grayscale images using two to four custom inks.

DMC 1623

NOTES


Indexed color mode

This mode uses at most 256 colors. When converting to indexed color, Photoshopbuilds a color lookup table (CLUT), which stores and indexes the colors in the image. If acolor in the original image does not appear in the table, the program chooses the closestone or simulates the color using available colors. By limiting the palette of colors, indexedcolor can reduce file size while maintaining visual quality.

Unless you’re using the Exact color table option, the color table may not contain allthe colors used in the image. To simulate colors not in the color table, you can dither thecolors. Dithering mixes the pixels of the available colors to simulate the missing colors.

Choose a dither option from the menu, and enter a value for the dither amount. Ahigher amount dithers more colors, but may increase file size. You can choose from thefollowing dither options:

None

Does not dither colors but instead uses the color closest to the missing color. Thistends to result in sharp transitions between shades of color in the image, creating a posterizedeffect.

Diffusion

Uses an error-diffusion method that produces a less structured dither than the Patternoption. To protect colors in the image that contain entries in the color table from beingdithered, select Preserve Exact Colors. This is useful for preserving fine lines and text forWeb images.

Pattern

Uses a halftone-like square pattern to simulate any colors not in the color table.

Noise

Helps to reduce seam patterns along the edges of image slices. Choose this option ifyou plan to slice the image for placement in an HTML table.

Multichannel mode

This mode uses 256 levels of gray in each channel. Multichannel images are useful forspecialized printing

Color gamut

A gamut is the range of colors that a color system can display or print. The spectrumof colors seen by the human eye is wider than the gamut available in any color model.

Among the color models used in Photoshop, L*a*b has the largest gamut,encompassing all colors in the RGB and CMYK gamuts. Typically, RGB gamuts containthe subset of these colors that can be viewed on a computer or television monitor (which

WEB GRAPHICS

NOTES


emits red, green, and blue light). Therefore, some colors, such as pure cyan or pure yellow,can’t be displayed accurately on a monitor.

CMYK gamuts are smaller, consisting only of colors that can be printed using process-color inks. When colors that cannot be printed are displayed on-screen, they are referredto as out-of-gamut colors—that is, outside a CMYK gamut. Important: The gamut for anRGB or CMYK image depends on its document profile.

Color gamuts: A. A Lab color gamut B. An RGB color gamut C. A CMYK colorgamut

Channels and Bit depth

A working knowledge of color channels and bit depth is key to understanding howPhotoshop stores and displays color information in images.

Every Adobe Photoshop image has one or more channels, each, storing informationabout color elements in the image. The number of default color channels in an image dependson its color mode. For example, a CMYK image has at least four channels, one each forcyan, magenta, yellow, and black information. Think of a channel as analogous to a plate inthe printing process, with a separate plate applying each layer of color.

In addition to these default color channels, extra channels, called alpha channels, canbe added to an image for storing and editing selections as masks, and spot color channelscan be added to add spot color plates for printing.

An image can have up to 24 channels. By default, Bitmap-mode, grayscale, duotone,and indexed-color images have one channel; RGB and Lab images have three; and CMYKimages have four. You can add channels to all image types except Bitmap-mode images.


1. Explain in detail about the color models supported in Photoshop?

DMC 1623

NOTES


3.7 COLOR CALIBRATION

Adjusting Image colors and tones

1. Monitor Calibration

Your monitor will display color more reliably if you use color management and accurateICC profiles. Use Adobe Gamma or another monitor-profiling utility to characterize andcalibrate your monitor to a color-display standard suited to your working needs.

2. Checking scan quality and tonal range

Before making adjustments, look at the image’s histogram to evaluate whether theimage has sufficient detail to produce high-quality output. The greater the range of values inthe histogram, the greater the detail. Poor scans and photographs without much detail canbe difficult if not impossible to correct. Too many color corrections can also result in a lossof pixel values and too little detail.

A histogram illustrates how pixels in an image are distributed by graphing the numberof pixels at each color intensity level. This can show you whether the image contains enoughdetail in the shadows (shown in the left part of the histogram), midtones (shown in themiddle), and highlights (shown in the right part) to make a good correction.

The histogram also gives a quick picture of the tonal range of the image, or the imagekey type. A low-key image has detail concentrated in the shadows; a high-key image hasdetail concentrated in the highlights; and an average-key image has detail concentrated inthe midtones. An image with full tonal range has a high number of pixels in all areas. Identifyingthe tonal range helps determine appropriate tonal corrections. Shown below is an RGBimage and its histogram for the luminosity channel.

WEB GRAPHICS

NOTES


3.7.1 To Display the Histogram for an Image

1. To display histogram data for a portion of the image, first select that portion. Bydefault, the histogram displays the tonal range of the entire image.

2. Choose Image > Histogram.

The horizontal axis of the histogram represents the intensity values, or levels, fromdarkest (0) at the far left to brightest (255) at the far right; the vertical axis represents thetotal number of pixels with a given value.

3. For RGB, CMYK, and indexed-color images, choose an option from the Channelmenu. You can plot either the luminance of the composite channel (Luminosity) orthe intensity values of an individual channel.

4. To view information about a specific point on the histogram, place the pointerthere. To view information about a range of values, drag in the histogram to highlightthe range. When you are finished, click OK to close the histogram.

Statistical information about the intensity values of the pixels appears below thehistogram:

Mean Represents the average intensity value.

Standard deviation (Std Dev) Represents how widely intensity values vary.

Median Shows the middle value in the range of intensity values.

Pixels Represents the total number of pixels used to calculate the histogram.

Level Displays the intensity level of the area underneath the pointer.

Count Shows the total number of pixels corresponding to the intensity level underneaththe pointer.

Percentile Displays the cumulative number of pixels at or below the level underneath thepointer. This value is expressed as a percentage of all the pixels in the image, from 0% atthe far left to 100% at the far right.

Cache Level Shows the setting for the image cache. If the Use Cache for Histogramsoption is selected in the Memory and Image Cache preferences, the histogram displaysmore quickly and is based on a representative sampling of pixels in the image (based onthe magnification), rather than on all of the pixels (equivalent to a cache level of 1). Deselectthis option if you want to check for posterization in the image. You can press Shift whilechoosing Image > Histogram to generate the histogram using all pixels in the image.

The color adjustment tools are (Image>adjust>…..)

• Levels

• Auto Levels

• Curves

DMC 1623

NOTES


• Color Balance and Brightness/contrast

• Hue/saturation

• Desaturate and replace color

• Channel mixer

• Variations

3.7.2..Levels

The Levels Control is the primary way to modify the color in an image. Levels let youchange the color across the tonal range, modifying a composite image or individual colorchannels. The dialog features a histogram method of displaying image data that is uniqueand sometimes useful. It shows the full range of tonal values, from light to dark, on a linearscale. A graph rises and falls across that scale, indicating the actual number of pixels in theimage that have the corresponding value. Therefore, as a general rule you would want anice rounded curve that is highest in the mid-tones, with good representation in the highlightand shadow ends of the spectrum.

You can set the highlights and shadows in an image by moving Input sliders to the firstgroup of pixels on both ends of the Levels histogram. This maps these pixels—the darkestand lightest pixels in each channel—to black and white, increasing the tonal range of theimage. The corresponding pixels in the other channels are adjusted proportionately toavoid altering the color balance. You can use the middle Input slider to change the intensityvalues of the middle range of gray tones without dramatically altering the highlights andshadows. The Levels control uses highlight, midpoint, and shadow slides, which shift theimage values in the histogram, lightening or darkening the image. To adjust tones for aspecific color channel, choose an option from the Channel menu.

WEB GRAPHICS

NOTES


To adjust the shadows and highlights, do one of the following:

• Drag the black and white Input Levels sliders to the edge of the first group ofpixels on either end of the histogram. You can also enter values directly into thefirst and third Input Levels text boxes.

• Drag the black and white Output Levels sliders to define new shadow and highlightvalues. You can also enter values directly in the Output Levels text boxes.

3.7.3 Auto Levels

This approach automatically optimizes the image in a basic way, setting a white pointand black point and distributing the mid values throughout the range. There is no dialogbox here, just select the menu command and see what it does. If you’re a beginner, thiscommand can be a good place to start correcting the image.

3.7.4 Curves

Like the Levels dialog box, the Curves dialog box lets you adjust the entire tonalrange of an image. But instead of making adjustments using only three variables (highlights,shadows, midtones), with Curves you can adjust any point along a 0-255 scale whilekeeping up to 15 other values constant. You can also use Curves to make preciseadjustments to individual color channels in an image.

Curves let you modify the entire image, or just one of the color channels, changing thehighlights, mid-tones, or shadows in the image. Shown below is the curves dialog box onthe left and on the right the various zones for correction. Just position you mouse on thestraight line and move on any side and see the changes.

Original Image

After applying

Auto levels

DMC 1623

NOTES


The horizontal axis of the graph represents the original intensity values of the pixels(Input levels); the vertical axis represents the new color values (Output levels). In thedefault diagonal line, all pixels have identical Input and Output values. For RGB images,Curves displays intensity values from 0 to 255, with shadows (0) on the left. Click anypoints on the curve that you want to remain fixed. For example, if you want to adjust themidtones while minimizing the effect on the highlights and shadows, click the quarter andthree-quarter points on the curve.

You can add up to 16 control points to the curve, locking those values. To remove acontrol point, drag it off the graph, select it and press Delete. You can also do the followingto adjust the curve.

• Drag the curve until the image looks the way you want it.

• Click a point on the curve, and enter Input and Output values for the point.

• Select the pencil at the bottom of the dialog box, and drag to draw a new curve.You can hold down Shift to constrain the curve to a straight line, and click to defineendpoints. When you’re finished, click Smooth if you want to smooth the curve.

WEB GRAPHICS

NOTES


3.7.5 Color Balance

The Color Balance option changes the overall mixture of colors in an image forgeneralized color correction.

• Select Shadows, Midtones, or Highlights to select the tonal range on which youwant to focus the changes.

• Select Preserve Luminosity to prevent changing the luminosity values in the imagewhile changing the color. This option maintains the tonal balance in the image.

• Drag a slider toward a color you want to increase in the image; drag a slider awayfrom a color you want to decrease in the image.

The values above the color bars show the color changes for the red, green, and bluechannels. (For Lab images, the values are for the a and b channels.) Values can range from-100 to +100.

>Click OK.

Original Image

After applying changes

Using the above curve

DMC 1623

NOTES


The images below are, on the left – the original image and on the right is the imageafter applying color balance command by dragging the middle slider to +50 while midtonesis selected.

3.7.6 Brightness and Contrast

As simple as the sliders are self explanatory, one for Brightness and the other forcontrast.

3.7.7 Hue and Saturation

The Hue/Saturation command lets you adjust the hue, saturation, and lightness of theentire image or of individual color components in an image.

You can also use the Colorize option to add color to a grayscale image converted toRGB, or to an RGB image—for example, to make it look like a duotone by reducing itsolor values to one hue.

WEB GRAPHICS

NOTES


The two color bars in the dialog box represent the colors in their order on the colorwheel. The upper color bar shows the color before the adjustment; the lower bar showshow the adjustment affects all of the hues at full saturation.

For Edit, choose which colors to adjust:

• Choose ‘Master’ to adjust all colors at once.

• Choose one of the other preset color ranges listed for the color you want to adjust.An adjustment slider appears between the color bars (as shown in the image below),which you can use to edit any range of hues.

To colorize a grayscale image or create a monotone effect

1. If you are colorizing a grayscale image, choose Image > Mode > RGB to convertthe image to RGB.

2. Open the Hue/Saturation dialog box.

3. Select Colorize. The image is converted to the hue of the current foreground color,if the foreground color is not black or white. The lightness value of each pixel doesnot change.

4. Use the Hue slider to select a new color if desired. Use the Saturation and Lightnesssliders to adjust the saturation and lightness of the pixels. The hue selected for theexample shown below is 20, saturation – 50 and no change in lightness.

5. Click OK.

DMC 1623

NOTES


Original Image After applying colorize effect

3.7.8 Desaturate and Replace Color

Desaturate- This menu command eliminates all color in the image, reducing everythingto Black and White. No controls in this one just select the command and stand back.

Replace color - The Replace Color command lets you create a mask around specificcolors and then replace those colors in the image. You can set the hue, saturation, andlightness of the area identified by the mask. The mask is temporary. It shows you a thumbnailof the image, allowing you to select portions of it with an eyedropper. A slider adjusts therange of selection, which is updated in the thumbnail image. Once selected, the standardHue/Saturation tools let you shift Hue, Saturation, or Lightness. This is a good control thatlets you select an area by color, and then apply either a radical color shift or a subtlechange in intensity.

WEB GRAPHICS

NOTES


To use the Replace Color command:

1. Open the Replace Color dialog box.

2. Select a display option:

• Selection to display the mask in the preview box. Masked areas are black andunmasked areas are white. Partially masked areas (areas covered with asemitransparent mask) appear as varying levels of gray according to their opacity.

• Image to display the image in the preview box. This option is useful when you areworking with a magnified image or have limited screen space.

3. Click in the image or in the preview box to select the areas exposed by the mask.Shift-click or use the eyedropper + button to add areas; Alt-click or use the eyedropper- button to remove areas.

4. Adjust the tolerance of the mask by dragging the Fuzziness slider or entering a value.This controls the degree to which related colors are included in the selection.

5. Drag the Hue, Saturation, and Lightness sliders (or enter values in the text boxes) tochange the color of the selected areas.

6. Click OK.

The figure below shows the effect of replace color on peppers.jpg with fuzziness setat 70, Hue set at +45, saturation set at +29 and lightness set at 0.

3.7.9 Channel mixer

It lets you modify a color channel by combining the data from another channel in thefile. A channel is comprised of grayscale data representing the tonal range of the channel.This control lets you select a target channel to modify adding percentages of the other

DMC 1623

NOTES


channels in the file to the target. The thing to remember here is that you are not adding thecolor itself…you are only adding the grayscale values to the channel. For example, youcan select the red channel to modify, and then increase the green channel slider. You addthe grayscale values from the green channel to the red one, which makes it either more orless red, depending on what’s in the green channel.

Shown below is the modified image after applying channel mixer command on redchannel with red slider at -100%, green slider at +94%, Blue slider at +76% and contrastat +44%.

3.7.10 Variations

The Variations command lets you adjust the color balance, contrast, and saturation ofan image by showing you thumbnails of alternatives. This command is most useful foraverage-key images that don’t require precise color adjustments. It does not work onindexed-color images

WEB GRAPHICS

NOTES


To use the Variations command

1. Open the Variations dialog box.

The two thumbnails at the top of the dialog box show the original selection (Original)and the selection with its currently selected adjustments (Current Pick). When you firstopen the dialog box, these two images are the same. As you make adjustments, the current‘Pick image’ changes, to reflect your choices.

2. Select Show ‘clipping’ if you want to display a neon preview of areas in the image thatwill be clipped by the adjustment—that is, converted to pure white or pure black.Clipping can result in undesirable color shifts, as distinct colors in the original image aremapped to the same color. Clipping does not occur when you adjust midtones.

3. Select what to adjust in the image:

• Shadows, Midtones, or Highlights to indicate whether you want to adjust the dark,middle, or light areas.

• Saturation to change the degree of hue in the image. If you exceed the maximumsaturation for a color, it may be clipped.

4. Drag the Fine/Coarse slider to determine the amount of each adjustment. Moving theslider one tick mark doubles the adjustment amount.

5. Adjust the color and brightness:

• To add a color to the image, click the appropriate color thumbnail.

• To subtract a color, click the thumbnail for its opposite color. For example, tosubtract cyan, click the More Red thumbnail.

• To adjust brightness, click a thumbnail on the right side of the dialog box.

Each time you click a thumbnail, other thumbnails change. The center thumbnail alwaysreflects the current choices.

6. Click OK.


1. Why is Image histogram important for an image?

2. What kind of color adjustments you can make for an image? Explain in detail.

3.8 OIL PAINT EFFECT

Example – 1 :( Using filters)

Shown below is the original image, follow the steps below to see the oil paint effectfor this image.

DMC 1623

NOTES


1. Click on Filter > Distort > Glass and apply the following settings to your photograph.

Distortion – 1

Smoothness — 4

Texture – Canvas

Scaling: — 85%

2. Next, click on Filter > Artistic > Paint Daubs and apply the following settings toyour photograph.

Brush Size – 3

Sharpness – 3

rush Type – Simple

3. Go to Filter > Brush Strokes > Angled Strokes and apply the following settings toyour photograph.

Direction Balance – 20

Stroke Length – 5

Sharpness — 1

4. In this last step, you want to click on Filter > Texture > Texturizer and apply thefollowing settings to your photograph. This creates the appearance that your paintingwas done on canvas. To do this, we’re going to go:

Texture – Canvas

Scaling — 75%

Relief – 3

Light Direction — Top Right

WEB GRAPHICS

NOTES


Example – 2: (using Art History brush)

1. Load the original image and right click on it in the Layers palette. Select Duplicate andname this layer as the Paint layer. Then select the Art History brush from the Toolspalette. Set the brush size to around 20 pixels, the opacity to 50%, the Style to TightShort and the Area to 20 pixels. The brush size basically dictates the sampling areawhereas the Area setting sets how wide the effect is applied. Select the Paint layer andthen start making sweeping brushes in the direction of the texture.

2. The Art History brush will recycle continuously if you hold the mouse button down andkeep it still. The idea is to drag in the direction that any features or texture run in.

3. Then increase the brush size to 75 and the Area to 75 and rapidly paint in the rest ofthe background.

4. Now to make it look more like oil-brush strokes. Select the Smudge tool and set theSize to 30 pixels and the Strength to 50%. Use short strokes, repeated often, to goover the textures again.

5. Finally, create a new, duplicate layer of the Paint layer and call this Canvas layer. Thengot to Filter > Texture > Texturizer. Select Canvas as the Texture and set Relief at 5.Apply this and then change the Opacity of the layer down until the effect looks natural.In this case it was just 25%. Merge the layers then and save.

DMC 1623

NOTES



1. What are the various ways of creating Oil Paint effect for your image?

2. Explain with an example how you will create an oil paint effect.

3.9 DESIGNING ICONS

Example – 1 (designing Windows Media player Icon)

1. Start off by creating a new 100x100 image with a white background. Now create anew layer. Name it as ‘original’. Using the Elliptical Marquee tool create a circle asshown below. Fill it with any color.

2. Next right-click on the current layer and select Blending Options. Then apply thefollowing Drop Shadow and Bevel & Emboss settings.

WEB GRAPHICS

NOTES


3. Add a Stroke using the following settings.

4. Now we are going to use the rulers to pinpoint the center of the circle to make it easierto fill in each quadrant of the circle a different color. To begin this, create a new layercalled Colored Circle then select the Move tool. Verify that the rulers are visible. Ifthey are not, go to View Rulers (Ctrl+R). To add the horizontal guide, click on thetop ruler and drag your mouse down to the center of the circle. Do the same for thevertical guide, however instead of using the top ruler, use the ruler on the left side.

5. Now we are going to add some color. Verify that Colored Circle is the current layerUsing the Rectangular Marquee Tool, fill in each quadrant as shown below. NextCtrl+Click on the layer containing the original circle. Then go to Select > Inverse(Shift+Ctrl+I). Finally press the delete or go to Edit > Cut. Your icon should nowlook the image below on the right. We will no longer need the layer containing the oldblue circle, so you may delete that layer.

DMC 1623

NOTES


6. Next right-click on the Colored Circle layer and select Blending Options. Use thefollowing Bevel & Emboss Settings.

7. Next create a new layer. Then grab the Elliptical Marquee Tool and draw a circle ofsmaller radius in the center and fill it in white.

8. Now create a new layer called Triangle. Select the Custom Shape Tool then in thetools palette at the top of the screen select the triangle shape. Then change the foregroundcolor to black and create a triangle. Then go to Edit > Transform > Rotate. Rotateit till it looks like the image below.

WEB GRAPHICS

NOTES


9. Finally apply the following Bevel and Emboss settings to the Triangle layer.

Finally the layers palette will look like this

DMC 1623

NOTES


Example – 2 - Creating text in GOLD

1. Start off by creating some text in a new document. Choose a thick or bold font,because thin fonts will be hard to read once you have gone through this tutorial. Thisexample uses Engravers MT.

2. Right-click on the text layer and select Blending Options. Use the settings in theimage below for a Drop Shadow.

3. Next use the following settings for Bevel and Emboss and Contour.

WEB GRAPHICS

NOTES


4. Next use the following settings for Satin. Double-click on the Contour image to openthe Contour editor to adjust the settings.

5. Finally, use the following settings for a Gradient Overlay.

To edit the gradient, double-click on the current gradient(the colored area shownabove) to bring up the Gradient Editor. Start off by moving the little boxes to the positionsshown below. Then click on each of the little boxes to edit their colors. After clicking theboxes, you will see a color option below it. Just click on the current color to change thecolor to the hexidecimal values provided below.

You might want to use the same gradient again in other pieces; therefore you shouldsave the gradient. In the Gradient Editor, enter a name for the gradient, such as GoldText Gradient, then click the New button. You can then close the Gradient Editor byclicking ok.

DMC 1623

NOTES



1. Explain with an example how would you design Icons?

Summary

1. The Gradient Tool is used to create gradient fills. Gradients are gradual shiftsfrom at least one color to another or one color to transparency.

2. The Gradient Bar is automatically built with a copy of the last selected Gradient.

3. A typeface is a full set of characters designed in a specific Style.

4. Kerning is the space between a particular pair of characters. Tracking is the spacebetween characters in a line of text.

5. The Paragraph Palette allows you to modify Paragraph Text. Paragraph text isthat which occupies a pre-defined Paragraph Block.

6. Text Warping allows the user to customize the appearance of text and still maintainthe ability to edit it at all times. Rasterizing converts the type layer to a normallayer and makes its contents uneditable as text.

7. Hue is the color reflected from or transmitted through an object. Saturation is thestrength or purity of the color. Brightness is the relative lightness or darkness of thecolor.

8. The subtractive (CMY) and additive (RGB) colors are complementary colors.Each pair of subtractive colors creates an additive color, and vice versa.

9. L*a*b color consists of a luminance or lightness component (L) and two chromaticcomponents: the a component (from green to red) and the b component (fromblue to yellow).

10. Bitmap mode uses one of two color values (black or white) to represent the pixelsin an image. Gray scale mode uses up to 256 shades of gray. Indexed mode usesat most 256 colors.

11. Among the color models used in Photoshop, L*a*b has the largest gamut,encompassing all colors in the RGB and CMYK gamuts.

12. A histogram illustrates how pixels in an image are distributed by graphing thenumber of pixels at each color intensity level.

13. Levels let you change the color across the tonal range, modifying a compositeimage or individual color channels. Curves dialog box lets you adjust the entiretonal range of an image. Channel mixer lets you modify a color channel by combiningthe data from another channel in the file.

14. The Variations command lets you adjust the color balance, contrast, and saturationof an image by showing you thumbnails of alternatives.

15. You can use filters or Art History brush to create Oil Paint effect.

WEB GRAPHICS

NOTES


UNIT - IV

MULTIMEDIA4.1 INTRODUCTION

Here we will learn how to add the power of multimedia to a web page. We can addsound, video, and animated characters to web based applications. Multimedia files can bequite large. Some multimedia technologies require that the complete multimedia file bedownloaded to the client before the audio or video begins playing. With streamingtechnologies these are possible. Creating audio and video to incorporate into web pagesoften requires complex and powerful software such as Adobe After Effects or Director orDreamweaver etc.,


• To know about popular web audio and video formats and editors, Microsoft mediaformats, animation software.

• To know about the web authoring tools and players.

• Creating simple web animations using Flash.

• Adding sounds to animation and using ‘bgsound’ to add background sound.

• To use the img element’s dynsrc property to incorporate video into Web pages.

• To use the embed element to add sound or video.

• To use the Windows Media Player ActiveX control to play a variety of mediaformats in Web pages.

• To use the Microsoft Agent ActiveX control to create animated characters thatspeak to users and respond to spoken commands from users.

• To embed RealOne Player™ to include streaming audio and video in a Web page.

• To embed VRML worlds into a web page.

4.3 MEDIA EDITING SOFTWARE AND FILE FORMATS

4.3.1 Audio Editing

• RealProducer by RealNetworks. Create your own RealMedia streaming audioand video files.

• Audacity. Free, open source software for recording and editing sounds.

DMC 1623

NOTES


4.3.2 Video Editing

• Avid Express Pro. Real-time HD, SD, DV and film editing, DVD authoring. AdobePremiere Pro. Real-time video and audio editing tools.

• QuickTime Pro. Besides being a player, lets you edit movies and prepare andcompress audio and video for Web delivery.

• Pinnacle Studio. Analog video capture, video editing, add transitions, titles, musiceffects.

4.3.3 Sound Formats for Web

MIDI Format

The MIDI (Musical Instrument Digital Interface) is a format for sending musicinformation between electronic music devices like synthesizers and PC sound cards.

The MIDI format was developed in 1982 by the music industry. The MIDI format isvery flexible and can be used for everything from very simple to real professional musicmaking. MIDI files do not contain sampled sound, but a set of digital musical instructions(musical notes) that can be interpreted by your PC’s sound card.

The downside of MIDI is that it cannot record sounds (only notes). Or, to put itanother way: It cannot store songs, only tunes.

The upside of the MIDI format is that since it contains only instructions (notes), MIDIfiles can be extremely small. The example above is only 23K in size but it plays for nearly5 minutes. The MIDI format is supported by many different software systems over a largerange of platforms. MIDI files are supported by all the most popular Internetbrowsers. Sounds stored in the MIDI format have the extension .mid or .midi.

RealAudio Format

The RealAudio format was developed for the Internet by Real Media. The formatalso supports video. The format allows streaming of audio (on-line music, Internet radio)with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

Sounds stored in the RealAudio format have the extension .rm or .ram.

AU Format

The AU format is supported by many different software systems over a large range ofplatforms. Sounds stored in the AU format have the extension .au.

AIFF Format

The AIFF (Audio Interchange File Format) was developed by Apple. AIFF files arenot cross-platform and the format is not supported by all web browsers. Sounds stored inthe AIFF format have the extension .aif or .aiff.

WEB GRAPHICS

NOTES


SND Format

The SND (Sound) was developed by Apple. SND files are not cross-platform andthe format is not supported by all web browsers. Sounds stored in the SND format havethe extension .snd.

WAVE Format

The WAVE (waveform) format is developed by IBM and Microsoft. It is supportedby all computers running Windows, and by all the most popular web browsers. Soundsstored in the WAVE format have the extension .wav.

The MP3 Format (MPEG)

MP3 files are actually MPEG files. But the MPEG format was originally developedfor video by the Moving Pictures Experts Group. We can say that MP3 files are the soundpart of the MPEG video format. MP3 is one of the most popular sound formats for musicrecording. The MP3 encoding system combines good compression (small files) with highquality. Expect all your future software systems to support it.

Sounds stored in the MP3 format have the extension .mp3, or .mpga (for MPGAudio).

4.3.4 Video Formats for Web

AVI Format

The AVI (Audio Video Interleave) format was developed by Microsoft. The AVIformat is supported by all computers running Windows, and by all the most popular webbrowsers. It is a very common format on the Internet, but not always possible to play onnon-Windows computers. Videos stored in the AVI format have the extension .avi.

Windows Media Format

The Windows Media format is developed by Microsoft. Windows Media is a commonformat on the Internet, but Windows Media movies cannot be played on non-Windowscomputer without an extra (free) component installed. Some later Windows Media moviescannot play at all on non-Windows computers because no player is available. Videosstored in the Windows Media format have the extension .wmv.

MPEG Format

The MPEG (Moving Pictures Expert Group) format is the most popular format onthe Internet. It is cross-platform, and supported by all the most popular web browsers.

Videos stored in the MPEG format have the extension .mpg or .mpeg.

DMC 1623

NOTES


QuickTime Format

The QuickTime format is developed by Apple. QuickTime is a common format onthe Internet, but QuickTime movies cannot be played on a Windows computer without anextra (free) component installed. Videos stored in the QuickTime format have the extension.mov.

RealVideo Format

The RealVideo format was developed for the Internet by Real Media. The formatallows streaming of video (on-line video, Internet TV) with low bandwidths. Because ofthe low bandwidth priority, quality is often reduced. Videos stored in the RealVideo formathave the extension .rm or .ram.

Shockwave (Flash) Format

The Shockwave format was developed by Macromedia. The Shockwave formatrequires an extra component to play. This component comes preinstalled with the latestversions of Netscape and Internet Explorer. Videos stored in the Shockwave format havethe extension .swf.

4.3.5 Web Animation Software

After Effects - visual effects and compelling animation software. Work withsophisticated tools and tight integration with leading design applications while you deliverwork to virtually any type of media. Create from scratch or start projects from hundreds ofcustomizable presets and templates, all from within a streamlined interface.

Photoshop - at least 70% of all animations on fg-a.com are organized, sized andoptimized using Photoshop CS. Adobe is the benchmark for graphics and animationsoftware.

Flash - advanced authoring environment for creating interactive content for digital,web animation, and mobile platforms. Create interactive web sites, rich mediaadvertisements, instructional media, presentations, games, and more.

Ulead GIF Animator 5 - animator - robust and affordable animation software. Easilycreate fast-loading animation for your web site and PowerPoint presentations.

CoffeeCup GIF Animator - create animations for your Web pages easily. CoffeeCupGIF Animator can convert JPEG and BMP graphics to GIFs automatically, as well asimport and export AVI files.

Save your animations as Flash (.swf). HTML source is generated for easy insertioninto Web pages. CoffeeCup GIF Animator can also create favorite folders for quick recall,view both frames and animation simultaneously, export frames to single images, and viewthumbnails with size and dimension information.

WEB GRAPHICS

NOTES


4.3.6 Web Authoring Tools

4.3.6.1 Wysiwyg Editors

1. Microsoft FrontPage

Microsoft FrontPage 2000 is a Web authoring tool that gives you everything youneed to create and manage exactly the site you want, whether you’re creating a personalWeb page or a corporate Internet or intranet site.

Features

• Microsoft FrontPage gives you excellent control over creating a site with a consistentlook and feel. Its site management features are rated the best, including a graphicalview of your site.

• Microsoft FrontPage lets you see a graphical map of your site, and you can easilyadd pages to it from there. Your new page comes template the look and feel youcreated for the rest of your site, saving lots of time.

• Microsoft FrontPage lets you use any combination of text- and graphics-basedlayouts and navigation tools. Graphic “themes” optionally apply a consistent lookto sites’ banners, buttons, text and background. The program comes with 50 themesthat consist of similar elements for bullets, font, images, navigation bars, and otherpage elements.

2. Macromedia Dreamweaver

Macromedia Dreamweaver 3 is a Web authoring tool that is the solution for professionalWeb site design and production.

Features

• For hand-coding, Deamweaver calls up an external HTML source editor. A quickclick of Dreamwaver’s External Editor button, and you are editing source code.Switch back to Dreamwaver, and it integrates your changes into the WYSIWYGview automatically.

• Macromedia Dreamweaver keeps the HTML code you graphically create as clearas if you did it by hand.

• Dynamic HTML: Animation made easy. Macromedia Dreamweaver’s timelineshelp you create your layers on Web pages and define events to create DynamicHTML. Producing your effects is a simple matter of dragging and dropping thebrowser object you want to move.

4.3.6.2 Programme based Authoring Tools

Flash

• Flash is a tool for creating interactive and animated Web sites. Flash is a multimediagraphics program specially for use on the Web

DMC 1623

NOTES


• Flash enables you to create interactive “movies” on the Web

• Flash uses vector graphics, which means that the graphics can be scaled to anysize without losing clarity/quality

• Flash loads much faster than animated images

• Flash allows interactivity, animated images do not

• Flash does not require programming skills, java applets do

4.3.7 Windows Media Formats

Windows media files have the extensions: .asf, .asx, .wma, and .wmv.

ASF Format

ASF format (Advanced Streaming Format) is specially designed to run over theInternet.

ASF files can contain audio, video, slide shows, and synchronized events. ASF filescan be highly compressed and can be delivered as a continuous flow of data (on-line TVor radio). Files can be of any size, and can be compressed to match many differentbandwidths (connection speeds).

ASX Format

ASX (Advanced Stream Redirector) files are not media files, but metafiles.

Metafiles provides information about files. ASX files are plain text files used to describemultimedia content. The file above describes three multimedia files. When the ASX file isread by a player, the player can play the files described.

WMA Format

The WMA (Windows Media Audio) format is an audio format developed by Microsoft.WMA is designed to handle all types of audio content. The files can be highly compressedand can be delivered as a continuous flow of data (on-line radio). WMA files can be of anysize, and be compressed to match many different bandwidths (connection speeds). TheWMA format is similar to the ASF format.

WMV Format

The WMV (Windows Media Video) format is a video format developed by Microsoft.WMV is designed to handle all types of video content. The files can be highly compressedand can be delivered as a continuous flow of data (on-line radio). WMV files can be ofany size, and be compressed to match many different bandwidths (connection speeds).The WMV format is similar to the ASF format.

WEB GRAPHICS

NOTES


4.3.8 Audio and Video Players

QuickTime

QuickTime supports a wide range of media formats including MPEG-2 and MPEG-4 video, QuickTime VR, AVI, and DV. Video compressors and decompressors optimisethe quality of streaming video for a wide range of bandwidths. Other formats supportedinclude MP3, Advanced Audio Coding (AAC), JPEG and Macromedia Flash. QuickTimealso supports the synchronisation of such media through SMIL 1.0.

RealOne Player

RealOne player supports a wide range of media formats including streaming RealVideo,downloaded QuickTime, Windows Media or MPEG audio/video files and audio formatssuch as MP3. RealOne also supports the synchronisation of such media through SMIL2.0. For content providers, RealNetworks offer a range of products for the creation anddelivery of streaming media tailored to different bandwidths over multiple simultaneousstreams.

Windows Media Player

Windows Media player supports a wide range of media formats including ASF(Advanced Systems Format - its native format), Windows Media Audio (WMA), WindowsMedia Video (WMV), WAV, AVI, MPEG, QuickTime, Macromedia Flash and others. Itcan be used for playing anything from low-bandwidth audio to full-screen video, includingstreaming video. At the server end, Windows Media Services provides for creation andstreaming of live and on-demand content.

Macromedia Flash

Macromedia Flash is a tool for creating browser-independent multimedia content forthe web. Flash movies can include text, animation, interactivity, audio and video. As Flashuses efficient compression methods and vector graphics, the files produced tend to be of asmall size. Viewing of Flash content requires the Flash player, which includes support forstreamed Flash movies. The Flash player is widely distributed and is included with InternetExplorer and Netscape Navigator.

Macromedia Shockwave

Macromedia Shockwave player handles web content created with MacromediaDirector. This can includes interactive audio, video, bitmaps, 3D vectors, text and otherrich media. The Shockwave player is freely-available as a Netscape plug-in or ActiveXcontrol.

Cosmo Player

Cosmo Player is a universal player for content created in the virtual reality modellinglanguage (VRML). Cosmo Player is freely available as a Netscape plugin or ActiveX

DMC 1623

NOTES


control. Cosmo Player requires ActiveMovie 1.0 or later in order to support video andcompressed audio within VRML environments. It uses DirectSound3D to provide realistic,spatialized audio.

Platforms: Windows 9x/NT; Mac OS 7.x/8.x

WinAmp

WinAmp offers support for audio formats including MP3, Windows Media Audio,WAV and CD audio, as well as video formats including MPEG, AVI, WMV and ASF(Windows Media streaming format). The player provides a console with a range of controls,a playlist editor and a media library.


1. Write about the popular sound formats for the web.

2. Write about the popular video formats for the web.

3. What are the types of authoring tools commonly used for web? Discuss

4. Write short note on Windows Media formats.

5. Mention in brief about some popular players for the web media formats.

4.4 CREATING CLIPPINGS

4.4.1 Types of Web Animation

There are several ways to create animation for Web pages. Some are simple, othersaren’t. The two most common and popular types of Web animation are frame-basedanimation and Flash.

Frame-Based Animation

The oldest form of Web animation is the animated GIF. GIF is the most commongraphics format on the Web, and it can store and display multiple images. Animated GIFsare a lot like traditional animation. Each image in an animated GIF is a single frame. Eachframe does nothing on its own, but when played they appear as a continuous sequence.This is why animated GIFs are often called “frame-based animation”.

GIF isn’t the only image format the supports animation. Two younger formats, PNG(Portable Network Graphics) and MNG (Multi-Image Network Graphics), can also doit. What’s more they support more colors than GIF — 16 million instead of 256. The onlyproblem is that users may need a Web browser plug-in to view animated PNGs andMNGs.

Frame-based animation is that it’s simple, and you don’t need expensive software tocreate it. On the downside, complex animations increase the file size tremendously. On topof that, you can’t add sound effects to your animation.

WEB GRAPHICS

NOTES


Flash

The basic animation techniques supported in flash are

• Frame by frame animation

• Key frame or tweened animation

Motion tweening

Shape tweening

• Onion skinning

There are many more other animations possible in flash for example color interpolation,texture animation, transparency etc.,

4.4.2 Flash Work Environment

When creating and editing movies, you typically work with these key features:

• The Stage, the rectangular area where the movie plays

• The Timeline, where graphics are animated over time

• Symbols, the reusable media assets of a movie

• The Library window, where symbols are organized

• The Movie Explorer, which gives an overview of a movie and its structure

• Floating, dockable panels, which enable you to modify various elements in themovie and configure the Flash authoring environment to best suit your workflow

The stage and timeline

Flash movies divide lengths of time into frames. The Stage is where you compose thecontent for individual frames in the movie, drawing artwork on it directly or arrangingimported artwork.

DMC 1623

NOTES


Toolbar: The toolbar lets you create your own original graphics and text to animate anduse in Flash. This is an advanced imaging program in itself and lets you create, draw, paint,select and modify artwork. Flash is no lightweight in the graphic art category and this partof the program alone is worth the price to an artist or creative developer.

Timeline: The timeline controls and organizes the movie’s content over time using layersand frames. Scrollbars become available when there are more layers in the timeline thancan be displayed.

The Stage: This is where your creation will come to life and be displayed for you to edit.Change the size of the stage by selecting Modify | Movie from the menu and setting thewidth and height as desired.

Onion Skinning Buttons: Onion skins let you view all layers of your animation in thetimeline in multiple layers for positioning. Dimmed layers cannot be edited.

Keyframe: Everything on the stage where something changes is a keyframe. Keyframesdefine changes in the animation. The first frame in every layer is automatically a keyframe.Created keyframes are displayed in Flash as a solid circle. Empty keyframes are shown ashollow circles. Shown in the diagram below.

Playhead: The Playhead on the timeline is a movable beginning and ending point for yourtotal movie. You can click and move the playhead down the timeline at any speed forviewing your movie and helping you identify frame changes for editing. To play your movieat any time during it’s creation and editing stages, just hit the ‘enter’ key.

Timeline is where you coordinate the timing of the animation and assemble the artworkon separate layers. The Timeline displays each frame in the movie. The Timeline organizesand controls a movie’s content over time in layers and frames. The major components ofthe Timeline are layers, frames, and the playhead.

Layers in a movie are listed in a column on the left side of the Timeline. Framescontained in each layer appear in a row to the right of the layer name. The Timeline headerat the top of the Timeline indicates frame numbers. The playhead indicates the currentframe displayed on the Stage.

The Timeline status display at the bottom of the Timeline indicates the current framenumber, the current frame rate, and the elapsed time to the current frame. You can changethe way frames are displayed, and display thumbnails of frame content in the Timeline. TheTimeline shows where there is animation in a movie, including frame-by-frame animation,tweened animation, and motion paths.

WEB GRAPHICS

NOTES


Symbols and Instances

Symbols are reusable elements that you use with a movie. Symbols can be graphics,buttons, movie clips, sound files, or fonts. When you create a symbol, the symbol is storedin the file’s library. When you place a symbol on the Stage, you create an instance of thatsymbol.

Symbols reduce file size because, regardless of how many instances of a symbol youcreate, Flash stores the symbol in the file only once. It is a good idea to use symbols,animated or otherwise, for every element that appears more than once in a movie. You canmodify the properties of an instance without affecting the master symbol, and you can editthe master symbol to change all instances.

You can edit symbols in place on the Stage. Other elements on the Stage are visiblebut dimmed. You can also edit a symbol in a separate window. When you edit a symbol,the Timeline window displays only the Timeline of the symbol you are editing.

Library

The Library window is where you store and organize symbols created in Flash, aswell as imported files, including sound files, bitmap graphics, and QuickTime movies. TheLibrary window lets you organize library items in folders, see how often an item is used ina movie, and sort items by type.

Scenes

To organize a movie thematically, you can use scenes. For example, you might useseparate scenes for an introduction, a loading message, and credits. When you publish a

DMC 1623

NOTES


Flash movie that contains more than one scene, the scenes in the SWF file play back in onesequence in the order they are listed in the Scene panel in the FLA file. Frames in the SWFfile are numbered consecutively through scenes.

Tool box

The tools in the toolbox let you draw, paint, select, and modify artwork, and changethe view of the Stage. The toolbox is divided into four sections:

• The Tools section contains drawing, painting, and selection tools.

• The View section contains tools for zooming and panning in the application window.

• The Colors section contains modifiers for stroke and fill colors.

• The Options section displays modifiers for the selected tool, which affect the tool’spainting or editing operations.

Movie explorer

The Movie Explorer provides an easy way for you to view and organize the contentof a movie and select elements in the movie for modification. It offers many features tostreamline the workflow for creating movies. For example, you can use the Movie Explorerto do the following:

• Search for an element in a movie by name

• Display the properties panel for a selected element to perform modifications

• Familiarize yourself with the structure of a Flash movie created by another developer

• Find all the instances of a particular symbol or action

• Replace all occurrences of a font with another font

WEB GRAPHICS

NOTES


• View name/value pairs for Macromedia Generator Objects

• Copy text to the Clipboard to paste into an external text editor for spell checking

• Print the navigable display list currently displayed in the Movie Explorer

The Movie Explorer contains a display list, a list of movie contents arranged in anavigable hierarchical tree. You can filter which categories of items in the movie are displayedin the Movie Explorer, choosing from text, graphics, buttons, movie clips, actions, importedfiles, and Generator Objects. You can display the selected categories as movie elements(scenes), symbol definitions, or both. You can expand and collapse the navigation tree.

The Movie Explorer has a pop-up options menu and a context menu with options forperforming operations on selected items or modifying the Movie Explorer display. Thepop-up options menu is indicated by a triangle in the Movie Explorer’s upper right corner.

Let us understand how to create animation clippings in flash.

4.4.3 Creating Frame by Frame based Animations

Frame-by-frame animation changes the contents of the Stage in every frame and isbest suited to complex animation in which an image changes in every frame instead ofsimply moving. Frame-by-frame animation increases file size more rapidly than tweenedanimation. A keyframe is a frame where you define changes in the animation. When youcreate frame-by-frame animation, every frame is a keyframe.

DMC 1623

NOTES


To create frame-by-frame animation

• Click a layer name to make it the current layer, and select a frame in the layerwhere you want the animation to start.

• If the frame isn’t already a keyframe, choose Insert > Keyframe to make it one.

• Create the image for the first frame of the sequence.

• You can use the drawing tools, paste graphics from the Clipboard, or import a file.

• Click the next frame to the right in the same row and choose Insert > Keyframe

Converting animation on the Stage into a movie clip

If you’ve created an animated sequence on the Stage and want to reuse it elsewherein the movie, or if you want to manipulate it as an instance, you can select it and save it asa movie clip symbol.

To convert animation on the Stage into a movie clip

1. On the main Timeline, select every frame in every layer of the animation on theStage that you want to use.

2. Do one of the following to copy the frames:

• Right-click any selected frame and choose Copy Frames from the context menu.

• Choose Edit > Copy Frames.

3. Deselect your selection and make sure nothing on the Stage is selected. ChooseInsert> New Symbol.

4. In the Symbol Properties dialog box, name the symbol. For Behavior, chooseMovie Clip, then click OK. Flash opens a new symbol for editing in symbol-editing mode.

5. On the Timeline, click Frame 1 on Layer 1, and choose Edit > Paste Frames.

This pastes the frames you copied from the main Timeline to the Timeline of thismovie clip symbol. Any animation, buttons, or interactivity from the frames you copiednow becomes an independent animation (a movie clip symbol) that you can reuse throughoutyour movie.

6. Do one of the following to exit symbol-editing mode:

WEB GRAPHICS

NOTES


• Choose Edit > Edit Movie.

• Click the Scene button in the upper left corner of the document window.

• Click the Edit Scene button in the upper right corner of the document window andchoose a scene from the menu.

7. Delete the animation from the main movie Timeline by selecting every frame in everylayer of the animation and choosing Insert > Remove Frame.

Creating Key frame based animations

In keyframe (tweened) animation, you define keyframes at important points in theanimation and let Flash create the content of frames in between. Flash displays theinterpolated frames of a tweened animation as light blue or green with an arrow drawnbetween keyframes. Flash redraws shapes in each keyframe. You should create keyframesonly at those points in the artwork where something changes.

Keyframes are indicated in the Timeline: a keyframe with content on it is representedby a solid circle, and an empty keyframe is represented by a vertical line before the frame.Subsequent frames that you add to the same layer will have the same content as thekeyframe.

Flash distinguishes tweened animation from frame-by-frame animation in the Timelineas follows:

Motion-tweened keyframes are indicated by a black dot and intermediate tweened

frames have a black arrow with a light blue background.

Shape-tweened keyframes are indicated by a black dot and intermediate frames

have a black arrow with a light green background.

A dashed line indicates that the final keyframe is missing.

A single keyframe is indicated by a black dot. Light-gray frames after a single keyframecontain the same content with no changes and have a black line with a hollow rectangle at

the last frame of the span.

Flash can create two types of tweened animation. In motion tweening, you defineproperties such as position, size, and rotation for an instance, group, or text block at onepoint in time, and then you change those properties at another point in time. In shapetweening, you draw a shape at one point in time, and then you change that shape or drawanother shape at another point in time. Flash interpolates the values or shapes for theframes in between, creating the animation.

DMC 1623

NOTES


a. Create Motion tween

Step 1: Open Flash and size the work area from Modify >Movie choosing 300 x200 for this example. Use any color for the background. Select the square drawing tool,no line color and any fill color. On the stage, draw out a square, then choose the blackarrow tool from the toolbar. Select the square and drag it outside to the left of the stage.While the square is still selected, hit the ‘F8’ key to convert it to a symbol.

Step 2:On the timeline, create a keyframe on frame 39.

Step 3: Select frame 39 on the timeline, then grab and move the square on the stageto the far right outside.

Step 4: Right click anywhere between frames 1-39 on the timeline and Create MotionTween’ from the selection box.

b Creating Shape Tween

To tween a shape

• Click a layer name to make it the current layer and select an empty keyframewhere you want the animation to start.

• Create the image for the first frame of the sequence.

• Use any of the drawing tools to create a shape.

• Create a second keyframe the desired number of frames after the first frame.

• Create the image for the last frame of the sequence. (You can tween the shape,color, or position of the image created in step 2.)

• Choose Window > Panels > Frame.

• For Tweening, select Shape.

• Click and drag the arrow next to the Easing value or enter a value to adjust the rateof change between tweened frames:

WEB GRAPHICS

NOTES


• To begin the shape tween gradually and accelerate the tween toward the end ofthe animation, drag the slider down or enter a value between -1 and -100.

• To begin the shape tween rapidly and decelerate the tween toward the end of theanimation, drag the slider up or enter a positive value between 1 and 100.

• By default, the rate of change between tweened frames is constant. Easing createsa more natural appearance of transformation by gradually adjusting the rate ofchange.

• Choose an option for Blend:

• Distributive creates an animation in which the intermediate shapes are smootherand more irregular.

• Angular creates an animation that preserves apparent corners and straight lines inthe intermediate shapes.

At the beginning Intermediate At the end frameat frame no. 1 at frame no. 20 At frame no. 40

Tweening along a path

Step 1: Open Flash and size the work area from Modify>Movie choosing 300 x 200for this example. Choose any color for the background.

Step 2:On frame 1, create an object or import a graphic and then convert it to asymbol.

Step 3:Insert a keyframe around 40

Step 4:Add a motion guide layer by selecting it.

Step 5: Select the pencil tool and draw a path on the work area of the motion guidelayer. Click on frame 1 of the object layer. Select ‘arrow’ from the toolbar and select theimage object, moving it toward the top of the path you just drew until it ‘snaps to’ thebeginning of the path. Click on frame 40 of the layer, then select the object again on thework area, then drag it to the end of the path until it ‘snaps to’ the other end.

DMC 1623

NOTES


Step 6: Now go to the first frame of the object layer, select the layer and chooseinsert>create motion tween. You can resize the object at frame 40 so that while it movesalong the motion path the size changes.

Exporting flash movie

The Export Movie command lets you export a Flash movie to a still-image formatand create a numbered image file for every frame in the movie.

Choose File > Export Movie and Enter a name for the output file. By default it issaved with the extension .swf.

Publish flash movies

The Publish Settings command lets you choose formats and specify settings for theindividual files included in the movie—including GIF, JPEG, or PNG—and then storethese settings with the movie file.

Depending on what you specified in the Publish Settings dialog box, the Publishcommand then creates the following files:

• The Flash movie for the Web (the SWF file).

• Alternate images in a variety of formats that appear automatically if the Flash Playeris not available (GIF, JPEG, PNG, and QuickTime).

• The supporting HTML document required to display a movie (or an alternateimage) in a browser and control browser settings.


1. What are the types of web animations?

2. How to create frame by frame animations in Flash? Explain with an example.

3. How will you create key frame based animations in Flash? Discuss.

4. How will you embed flash files into a web page?

4.5 ADDING SOUND EFFECTS TO YOUR ANIMATION

As a very basic introduction, it’s as easy as importing a selected .wav file into your.fla. Once the sound is imported, it will be available as a choice from the library (if youimport it on its own layer) or as a choice from the ‘sound’ panel.

WEB GRAPHICS

NOTES


To use a sound as a background loop in your main timeline, create a separate layerfor it and then import it or drag it out of the library onto the stage. To play continuously, setthe ‘Sync’ to start and ‘Loops’ to 999. Leave the ‘Loops’ at 0 to play through once andthen stop. You can also set the sound to fade in or out.

Embedding flash movie into a web page

Insert the code below into a html page

<object width=”300" height=”300">

<param name=”movie” value=”somefilename.swf”>

<embed src=”somefilename.swf” width=”300" height=”300">

</embed>

</object>


1. How will you add sound effects to your animation in Flash?

2. How will you embed Flash files into a web page?

4.6 ADDING AUDIO OR VIDEO TO A WEB PAGEAudio and video can be used in web pages in a variety of ways. Audio and video files

can be embedded in a web page or placed on a web server so that they can be downloadedon demand. Some of the most popular audio and video file formats have been alreadygiven in the previous topics.

DMC 1623

NOTES


4.6.1 Adding Background Sounds with the ‘Bgsound’ Element

The bgsound element has four key properties – src, loop, balance and volume. Tochange the property values via a script, assign a scripting name to the bgsound elements idproperty.

The ‘src’ property specifies the URL of the audio clip to be played.

The ‘loop’ property specifies the number of times the audio clip will play. The defaultvalue -1 specifies that the audio clip should loop until the user browses to a different webpage or clicks the browser’s stop button. A positive integer indicates the exact number oftimes the audio clip should loop. Negative values (except -1) and zero values for thisproperty cause the audio clip to play once.

The ‘balance’ property specifies the balance between the left and right speakers. Thevalue for this property is between -10000 (sound only from the left speaker) and 10000(sound only from right speaker). The default value 0 indicates that the sound should bebalanced between the two speakers.

The ‘volume’ property determines the volume of the audio clip. The value for thisproperty is between -10000 (minimum) and 0 (maximum).

There are three tags that are typically used to add sound files. Two are not validHTML and the third doesn’t work reliably across browsers:

• <bgsound> - not a valid HTML tag, and it only works in Internet Explorer

• <embed> - not a valid HTML tag, but it works in most browsers

• <object> - a valid HTML tag, but it only works in Safari.

Given below is an implementation of ‘bgsound’ element and its properties.

1. <html>

2. <head><title>using bgsound</title>

3. <bgsound id=”audio” src=”LoopyMusic.wav” loop=”1"></bgsound>

4. <script type=”text/javascript”>

5. function changeProperties()

6. {

7. var loop=parseInt(audioForm.loopit.value);

8. if(loop >= 1)

9. {

10. audio.loop = (isNaN(loop) ? : loop);

11. }

WEB GRAPHICS

NOTES


12. else

13. {

14. alert(“please enter an integer \n”+”greater than or equal to -1");

15. }

16. var vol= parseInt(audioForm.vol.value);

17. if ((vol >= -10000) && (vol <= 0))

18. {

19. audio.volume = (isNaN (vol) ? 0 : vol);

20. }

21. else

22. {

23. alert (“please enter an integer \n”+”between -10000 and 0");

24. }

25. }

26. function stopSound()

27. {

28. if (audioForm.stopButton.value==”Stop Sound”)

29. {

30. audio.src=””;

31. audioForm.stopButton.value=”Start Sound”;

32. }

33. else

34. {

35. audio.src=”LoopyMusic.wav”;

36. audioForm.stopButton.value=”Stop Sound”;

37. }

38. }

39. </script>

40. </head>

41. <body>

42. <h1>background music via the bgsound element</h1>

43. <hr/>

44. use the fields below to change the number of iterations and the volume

45. for the audio clip </br>

46. Press <strong>stop</strong> to stop playing the sound

DMC 1623

NOTES


47. <br/>

48. press <strong> Refresh </strong> to begin playing the sound again.

49. <form name=”audioForm” action=””>

50. <p> loop [-1=loop forever]</p>

51. <input name=”loopit” type=”text” value=”1"/>

52. <br/> volume[-10000(low) to 0 (high)]

53. <input name=”vol” type=”text” value=”0"/></br>

54. <input type=”button” value=”set properties” onClick=”changeProperties()”/>

55. <input type=”button” value=”Stop Sound” id=”stopButton”onClick=”stopSound()”/>

56. </form>

57. </body>

58. </html>

In the above example the ‘loop’ property specifies that the audio clip plays only once.The ‘balance’ and ‘volume’ attributes are omitted, so they default to 0. The ‘bgsound’element should be place in the ‘head’ section of the HTML document

Function ‘changeProperties()’ is called when the ‘set properties’ button is clicked.Lines 7 to 15 read the new value property ‘loop’ from the forms ‘loopit’ field, convert thevalue to an integer and set the new property value by assigning a value to ‘audio.loop’.

Lines 16 to 24 read the new value for the ‘volume’ property from the forms ‘vol’ textfield, convert the value to an integer and set the new property value by assigning a value to‘audio.volume’.

Function ‘stopSound()’ stops the audio clip from playing when the user clicks the‘Stop Sound’ button.

4.6.2 Adding Video with the IMG Element’s Dynsrc Property

Web designers can enhance their multimedia presentations by incorporating a varietyof video formats. The ‘img’ element incorporates both images and videos in a web page.

WEB GRAPHICS

NOTES


Using the ‘src’ property indicates that the desired source is an image. Using the ‘dynsrc’(dynamic source) property indicates that the source is a video clip. The ‘dynsrc’ propertymay be followed by properties such as ‘loop’, which is similar to the ‘bgsound’s’ ‘loop’property. The following code example demonstrates the usage.

1. <html>

2. <head><title>An embedded video using the dynsrc property</title>

3. <bgsound src=”LoopyMusic.wav” loop=”1"></bgsound>

4. </head>

5. <body>

6. <h1>An embedded video using the dynsrc property</h1>

7. <table>

8. <tr><td><img dynsrc=”intro.wmv” start=”mouseover” width=”200" height=”150"loop=”-1"

9. alt=”intro to windows media player”/></td>

10. <td> This page will play the audio clip and video clip in a loop.<br/> The

11. video will not begin playing until you move your mouse over the video.<br/>

12. Press the browser’s <strong>Stop</strong> button to stop the playing the soundand the video.</td>

13. </tr>

14. </table>

15. </body>

16. </html>

The output of the program is shown above.

4.6.3 Using Embed Element to Add Audio

So far we have used elements ‘bgsound’ and ‘img’ to embed audio and video in aweb page. In both cases, viewers of the page have little control over the media clip. In thissection we will learn how to use the ‘embed’ element, which embed a media clip, audio orvideo into a web page. The ‘embed’ element displays a graphical user Interface within thebrowser window that gives the user direct control over the media clip. A browser

DMC 1623

NOTES


encountering a media clip in an ‘embed’ element launches an application that can play it.For each media type, users can set a preferred player. For example if the media clip is a.wav file Internet Explorer typically uses the Windows Media Player ActiveX control toplay the clip. The Windows Media Player has a GUI that enables users to play, pause andstop the media clip. Users can also control the volume of audio and move forward andbackward through the clip using the GUI.

Below is an example of using ‘embed’ element to add audio to the web page.

1. <html>

2. <head><title>using embed to add audio to a web page</title>

3. </head>

4. <body>

5. <h1> background audio via the embed element</h1>

6. <p> these controls can be used to control the audio</p>

7. <embed src=”LoopyMusic.wav” loop=”true”</embed>

8. </body>

9. </html>

The output of the above program is shown below.

4.6.4 Using Embed Element to Add Video

The code below is about embedding video to a web page using the ‘embed’ element.

1. <html>

2. <head><title>using embed to add video to a web page</title>

3. </head>

4. <body>

5. <h1> video via the embed element</h1>

WEB GRAPHICS

NOTES


6. <table>

7. <tr><td><embed src=”intro.wmv” loop=”false” width=”250" height=”180"></embed></td>

8. </tr></table>

9. </hr>

10. This page plays the video once

11. </br>

12. use the controls on the embedded video player to play the video again

13. </body>

14. </html>


1. With an example demonstrate how would you add sound to your web page usingthe ‘bgsound’ element?

2. How would you add video to a web page using ‘dynsrc’ attribute of ‘img’ element?

3. Explain the usage of ‘embed’ element for adding audio or video to a web page.Discuss with an example.

4.7 USING WINDOWS MEDIA PLAYER ACTIVEX CONTROL:

ActiveX controls enhance the functionality of web pages with interactivity. Letsunderstand how to embed the Windows Media Player ActiveX control in a web page sothat we can access a wide range of media formats supported by the Windows MediaPlayer. The Windows Media Player and other ActiveX controls are embedded into webpages with the ‘object’ element.

DMC 1623

NOTES


The HTML program below shows how to use the ‘object’ element to embed twoWindows Media Player ActiveX controls in the web page. One of the controls plays avideo. The other plays an audio clip. If your activeX ID is correct you can see the outputfor the program below.

1. <html>

2. <head><title>Embedded media player objects</title>

3. <script type=”text/javascript”>

4. var videoPlaying = true;

5. function toggleVideo(b)

6. {

7. videoPlaying = !videoPlaying;

8. b.value=videoPlaying ? “Pause Video” : “Play Video”;

9. videoPlaying ? VideoPlayer.Play() : VideoPlayer.Pause();

10. }

11. </script>

12. </head>

13. <body>

14. <h1> audio and video through embedded media player objects</h1>

15. </hr>

16. <table>

17. <tr><td valign=”top” align=”center”>

18. <object id = “VideoPlayer” width=”200" height=”225"

19. classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

20. <param name=”FileName” value = “abc.wmv”/>

21. <param name=”AutoStart” value=”true”/>

22. <param name=”ShowControls” value=”false”/>

23. <param name=”Loop” value=”true”/>

24. </object></td>

25. <td valign=”bottom” align=”center”>

26. <p> use the controls below to control the audio clip.</p>

27. <object id=”AudioPlayer” classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

28. <param name=”FileName” value=”LoopyMusic.wav”/>

29. <param name=”AutoStart” value=”true”/>

30. <param name=”Loop” value=”true”/>

WEB GRAPHICS

NOTES


31. </object></td></tr>

32. <tr><td valign=”top” align=”center”>

33. <input name=”video” type=”button” value=”Pause Video”onClick=”toggleVideo(this)”/>

34. </td></tr>

35. </table>

36. </body>

37. </html>

The output of the above program is shown below.

When the body of this document loads, two instances of the Windows Media Player

ActiveX control are created. The ‘object’ element in lines 18-24 creates a media playerobject for the file ‘abc.wmv’. Line 18 indicates the start of the embedded object definition.The ‘id’ property specifies the scripting name of the element (i.e. video player). The ‘width’and ‘height’ properties specify the width and height in pixels that the controls occupy in aweb page. In lines 19,20 property ‘classid’ specifies the ActiveX control ID for the windowsmedia player. ActiveX controls have unique classid’s that identify them. Lines 20-23 specifyparameters that are passed to the control when it is created in the web page. Each parameteris specified with a ‘param’ element that has ‘name’ and ‘value’ properties. The ‘FileName’parameter specifies the file containing the media clip. The ‘AutoStart’ parameter is aBoolean value indicating whether or not the media clip plays when it is loaded. The‘ShowControls’ parameter is a Boolean value indicating whether the Media Player controlsshould be displayed. The ‘Loop’ parameter is a Boolean value indicating whether theMedia Player should play the media clip indefinitely.

The ‘object’ element in lines 27-31 embeds another Media Player object in the webpage. This Media Player plays the MIDI file LoopyMusic.wav. The Media player startsplaying the clip when it is loaded (specified by setting the ‘AutoStart’ parameter to true)and loops the audio clip indefinitely (specified by setting the ‘Loop’ parameter to true).

DMC 1623

NOTES


The script in lines 3-11 controls the media player. Clicking ‘PauseVideo’ calls function‘toggleVideo’. The button is defined in the HTML form in line 33. The ‘onClick’ event setsthe ‘toggleVideo’ function as the event handler passes ‘this’ as an argument for the function.‘this serves as a pointer to the element from which it is passed in this case, the ‘input’element. This event changes the button text in lines 8-9 . Lines 10-11 use the Booleanvariable ‘videoPlaying’ to determine whether to call ‘VideoPlayer’s’ ‘Play’ method or‘Pause’ method, which play or pause the video clip respectively.


1. How would you embed Windows Media Player ActiveX control into a web page

Explain with an example.

4.8 MICROSOFT AGENT CONTROL

Microsoft Agent is an exciting technology for Interactive animated characters in awindows application or a web page. The Microsoft Agent Control provides access toAgent characters such as “Peedy (a parrot), Genie, Merlin (a wizard) and Robby (a robot)- as well as those created by third party developers. These Agent characters allow usersto interact with the application using more natural human communication techniques. Thecontrol accepts muse and keyboard interactions, speaks (if a compatible text-to-speechengine is installed) and also supports speech recognition (if a compatible speech-recognitionengine is installed). Using Microsoft Agent allows web pages to speak with users.

Users can create new characters with the help of the Microsoft Agent CharacterEditor and the Microsoft Linguistic Sound Editing Tool (both downloadable from theMicrosoft Agent web site: www. Microsoft.com/msagent/default.asp). This page alsoprovides links to download the “Lernout & Hauspie TruVoice text to speech engine” andthe Microsoft Speech Recognition Engine, ActiveX controls that power voice integrationwith Microsoft Agent.

The following program demonstrates the Microsoft Agent ActiveX control and theLernout & Hauspie TruVoice text to speech engine (also an ActiveX control). This HTMLdocument embeds these ActveX controls into a web page that acts as a tutorial for thevarious types of programming tips presented in this text. Peedy is the parrot that appearsand speaks the text that describes each of the programming tips. When the user clicks theicon for a programming tip, peedy jumps to the tip and recites the appropriate text.

4.8.1 Demonstration Of Microsoft Agent And The Lernout And Hauspie Truvoice Text-To-Speech (Tts) Engine.

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

2. <HTML>

WEB GRAPHICS

NOTES


3. <HEAD>

6. <TITLE>Microsoft Agent and the text to speech engine</TITLE>

7.

8. <!— Microsoft Agent ActiveX Control —>

9. <OBJECT ID = “agent” WIDTH = “0” HEIGHT = “0”

10. CLASSID = “CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F”

11. CODEBASE = “#VERSION = 2,0,0,0”>

12. </OBJECT>

13.

14. <!— Lernout & Hauspie TruVoice text to speech engine —>

15. <OBJECT WIDTH = “0” HEIGHT = “0”

16. CLASSID = “CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575”


18. </OBJECT>

19.

20. <SCRIPT LANGUAGE = “JavaScript”>

21. var parrot;

22. var currentImage = null;

23. var explanations = [

24. // Good Programming Practice Text

25. “Good Programming Practices highlight techniques for “ +

26. “writing programs that are clearer, more “ +

27. “understandable, more debuggable, and more “ +

28. “maintainable.”,

29.

30. // Software Engineering Observation Text

31. “Software Engineering Observations highlight “ +

32. “architectural and design issues that affect the “ +

33. “construction of complex software systems.”

34.

35. // Performance Tip Text

36. “Performance Tips highlight opportunities for “ +

37. “improving program performance.”,

38.

DMC 1623

NOTES


39. Portability Tip Text

40. “Portability Tips help students write portable code “ +

41. “that can execute in different Web browsers.”,

42.

43. // Look-and-Feel Observation Text

44. “Look-and-Feel Observations highlight graphical user “ +

45. “interface conventions. These observations help “ +

46. “students design their own graphical user interfaces “ +

47. “in conformance with industry standards.”,

48.

49. // Testing and Debugging Tip Text

50. “Testing and Debugging Tips tell people how to test “ +

51. “and debug their programs. Many of the tips also “ +

52. “describe aspects of creating Web pages and scripts “ +

53. “that reduce the likelihood of ‘bugs’ and thus “ +

54. “simplify the testing and debugging process.”,

55.

56. // Common Programming Error Text

57. “Common Programming Errors focus the students’ “ +

58. “attention on errors commonly made by beginning “ +

59. “programmers. This helps students avoid making the “ +

60. “same errors. It also helps reduce the long lines “ +

61. “outside instructors’ offices during office hours!” ];

62.

63. function loadAgent()

64. {

65. agent.Connected = true;

66. agent.Characters.Load(“peedy”,“C:\\WINDOWS\\msagent\\chars\\Peedy.acs”);

67.

68. parrot = agent.Characters.Character( “peedy” );

69.

70. parrot.LanguageID = 0x0409;

71.

72. // get states from server

WEB GRAPHICS

NOTES


73. parrot.Get( “state”, “Showing” );

74. parrot.Get( “state”, “Speaking” );

75. parrot.Get( “state”, “Hiding” );

76.

77. // get Greet animation and do Peedy introduction

78. parrot.Get( “animation”, “Greet” );

79. parrot.MoveTo( screenLeft, screenTop - 100 );

80. parrot.Show();

81. parrot.Play( “Greet” );

82. parrot.Speak( “Hello. My name is Peedy the Parrot. “ +

83. “Click a programming tip icon, and I will tell “ +

84. “you about it.” );

85. parrot.Play( “GreetReturn” );

86.

87. // get other animations

88. parrot.Get( “animation”, “Idling” );

89. parrot.Get( “animation”, “MoveDown” );

90. parrot.Get( “animation”, “MoveUp” );

91. parrot.Get( “animation”, “MoveLeft” );

92. parrot.Get( “animation”, “MoveRight” );

93. parrot.Get( “animation”, “GetAttention” );

94. }

95.

96. function imageSelectTip( tip )

97. {

98. parrot.Stop();

99. for ( var i = 0; i < document.images.length; ++i )

100. if ( document.images( i ) == tip )

101. tellMeAboutIt( i );

102. }

103.

104. function tellMeAboutIt( element )

105. {

106. currentImage = document.images( element );

107. currentImage.style.background = “red”;

DMC 1623

NOTES


108. parrot.MoveTo( currentImage.offsetParent.offsetLeft,

109. currentImage.offsetParent.offsetTop + 30 );

110. parrot.Speak( explanations[ element ] );

111. }

112. </SCRIPT>

113. 113

114. <SCRIPT LANGUAGE=”JavaScript” FOR = “agent” EVENT =“BalloonHide”>

115. if ( currentImage != null ) {

116. currentImage.style.background = “lemonchiffon”;

117. currentImage = null;

118. }

119. </SCRIPT>

120.

121. <SCRIPT LANGUAGE = “JavaScript” FOR = “agent” EVENT =“Click”>

122. parrot.Stop();

123. parrot.Play( “GetAttention” );

124. parrot.Speak( “Stop poking me with that pointer!” );

125. </SCRIPT>

126. </HEAD>

127.

128. <BODY BGCOLOR = “lemonchiffon” ONLOAD = “loadAgent()”>

129. <TABLE BORDER = “0”>

130. <TH COLSPAN = “4”><H1 STYLE = “color: blue”> 131 CProgramming Tips</H1></TH>

131. <TR>

132. <TD ALIGN = “CENTER” VALIGN = “top” WIDTH = “120”>

133.

134. <IMG NAME = “gpp” SRC = “one.gif”

135. ALT = “Good Programming Practice” BORDER = “0”

136. ONCLICK = “imageSelectTip( this )”>

137. <BR>Good Programming Practices</TD>

138. TD ALIGN = “CENTER” VALIGN = “top” WIDTH = “120”>

139. <IMG NAME = “seo” SRC = “two.gif”

WEB GRAPHICS

NOTES


140. ALT = “Software Engineering Observation” BORDER = “0”


142. <BR>Software Engineering Observations</TD>


144. <IMG NAME = “perf” SRC = “three.gif”

145. ALT = “Performance Tip” BORDER = “0”


147. <BR>Performance Tips</TD>


149. <IMG NAME = “port” SRC = “four.gif”

150. ALT = “Portability Tip” BORDER = “0”


152. <BR>Portability Tips</TD>

153. </TR>

154. <TR>


156. IMG NAME = “gui” SRC = “five.gif”

157. ALT = “Look-and-Feel Observation” BORDER = “0”


159. <BR>Look-and-Feel Observations</TD>


161. <IMG NAME = “dbt” SRC = “six.gif”

162. ALT = “Testing and Debugging Tip” BORDER = “0”


164. <BR>Testing and Debugging Tips</TD>


166. <IMG NAME = “cpe” SRC = “seven.gif”

167. ALT = “Common Programming Error” BORDER = “0”


169. <BR>Common Programming Errors</TD>

170. </TR>

171. </TABLE>

172. </BODY>

173. </HTML>

DMC 1623

NOTES


Peedy introducing itself

Explanation

Peedy introduces itself initially and stays on screen. Peedy jumps to the place of clickand starts explaining about it. While it explains the text is seen on a balloon above peedy.

Before using Microsoft Agent or the Lernout and Hauspie TruVoice TTS engine inthe web page, both must be loaded into the webpage via ‘object’ elements. Lines 9-12embed an instance of the Microsoft Agent ActiveX control into a webpage and give it thescripting name ‘agent’ via the ‘id’ property. Similarly lines 15-18 embed an instance of theLernout and Hauspie TruVoice TTS engine into the web page. The Microsoft Agent usesthe TTS engine control to speak the text that Microsoft Agent displays. If either of thesecontrols is not already installed on the computer browsing the web page, the browserattempts to download it from the Microsoft web site. The ‘codebase’ attribute specifiesthe URL from which to download this version of software.

The ‘body’ of the document 128-172 defines a ‘table’ containing 7 programming tipicons. Each ‘img’ element ‘s ‘onClick’ event is registered as function ‘imageSelectTip’,defined. Each ‘img’ element passes itself (‘this’) to function ‘imageSelectTip’ so that thefunction can determine the particular user-selected image. The ‘script’ element 20-112defines global variables used in all the ‘script’ elements and defines functions ‘loadAgent’(called in response to the ‘body’ elements ‘onload’ event), ‘imageSelectTip’ (called whenusers click an ‘img’ element) and ‘tellMeAboutIt’ (called by ‘imageSelectTip’ to speak afew sentences about a tip).

WEB GRAPHICS

NOTES


Function ‘loadAgent’ is particularly important because it loads the Microsoft Agentcharacter that is used in this example. Lines 65-66 use the Microsoft Agent Control’sCharacters collection to load the character information for Peedy. Method ‘Load’ of thecharacters collection takes two arguments. The first argument specifies a name for thecharacter that can be used later to interact with it. The first argument specifies a name forthe character that can be used later to interact with it, and the second argument specifiesthe location of the character’s data file (Peedy.acs in this example).

Line 68 assigns a reference to the Peedy Character object to global variable ‘parrot’.‘Object Character’ of the ‘characters’ collection receives as its argument the name thatwas used to download the character data in line 66. Line 70 sets the character’s‘LanguageID’ property to 0x0409 (English).

Lines 73-75 use the character object’s ‘Get’ method to download the ‘Showing’,‘Speaking’ and ‘Hiding’ states for the character. The method takes two arguments, the‘type’ of information to download (state) and the ‘name’ of the corresponding element (eg:showing). Each state has animations associated with it. When the character is displayed,its associated animation plays (eg: Peedy flies onto the screen). Downloading the ‘Speaking’state provides a default animation that makes the character appear to be speaking. Whenthe character hides (i.e. goes into ‘Hidden’ state), the animations that make the characterdisappear are played (Peedy flies away).

Line 78 calls ‘character’ method ‘Get’ to load an animation. Lines 79-85 use a varietyof character methods to interact with Peedy. Line 79 invokes the ‘MoveTo’ method tospecify Peedy’s position on the screen. Line 80 calls method ‘Show’ to display the character.When this occurs, the character plays the animation assigned to the ‘Showing’ state (Peedyflies onto the screen). Line 81 calls method ‘Play’ to play the ‘Greet’ animation. Lines 82-85 invoke method ‘Speak’ to make the character speak its string argument. If there is acompatible TTS engine installed, the character displays a bubble containing the text andspeaks the text as well.

Lines 88-93 load several other animations. Line 88 loads the set of ‘Idling’ animationsthat Microsoft Agent uses when users are not interacting with the character. When runningthis example, be sure to leave Peedy alone for a while to see some of these idling animations.Lines 89-91 load the animations for moving the character up, down, left, and rightrespectively.

Clicking an image calls function ‘imageSelectTip’(lines 96-102). The method firstuses character method ‘Stop’ to terminate the current animation. Next, the ‘for’ statementin lines 99-102 determines which image the user clicked. The condition in line 100 calls thedocument object’s ‘images’ collection, which is determined by the index of the clicked‘img’ element. If the ‘tip’ number is equal to the imge number (i), then the function‘tellMeAboutIt’ (lines 104-111) is called, where ‘i’ is passed as the argument.

DMC 1623

NOTES


Line 106 of function ‘tellMeAboutIt’ assigns global variable ‘currentImage’ a referenceto the clicked ‘img’ element. This function then changes the background color of the ‘img’element that the user clicked by highlighting that image on the screen. Line 107 changes thebackground color of the image to red. Line 108 invokes character method ‘MoveTo’position Peedy above the clicked image. When this statement executes, Peedy flies to theimage and appears to perch directly on top of it. The character objects ‘Speak’ method(line 110) speaks the text in for the selected tip. The text is stored as strings in array‘explanations.

Lines 115-118 define script that resets the background color of the selected imagewhen Peedy starts speaking. If the ‘currentImage’ is not ‘null’ the background color of theimage is changed to ‘lemonchiffon’ and variable ‘currentImage’ is reset to ‘null’.

The script for the agent control in lines (121-125) is invoked in response to the user’sclicking the character. When this occurs, line 123 plays the ‘GetAttention’ animation, line124 causes Peedy to say ‘Stop poking me with that pointer!’

4.8.2 Microsoft Voice Recognition Engine and Microsoft Agent

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

2. <HTML>

3. <HEAD>

4. <TITLE>Speech Recognition</TITLE>

5.

6. <!— Microsoft Agent ActiveX Control —>

7. <OBJECT ID = “agent” WIDTH = “0” HEIGHT = “0”

8. CLASSID = “CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F”


10. </OBJECT>

11.

12. <!— Lernout & Hauspie TruVoice text to speach engine —>


14. CLASSID = “CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575”


16. </OBJECT>

17.

18. <!— Microsoft Speech Recognition Engine —>


20. CLASSID = “CLSID:161FA781-A52C-11d0-8D7C-00A0C9034A7E”

WEB GRAPHICS

NOTES



22. </OBJECT>

23.


25. var parrot;

26. var currentImage = null;

27. var tips =

28. [ “gpp”, “seo”, “perf”, “port”, “gui”, “dbt”, “cpe” ];

29. var tipNames = [ “Good Programming Practice”,

30. “Software Engineering Observation”,

31. “Performance Tip”, “Portability Tip”,

32. “Look-and-Feel Observation”,

33. “Testing and Debugging Tip”,

34. “Common Programming Error” ];

35. var voiceTips = [ “Good [Programming Practice]”,

36. “Software [Engineering Observation]”,

37. “Performance [Tip]”, “Portability [Tip]”,

38. Look-and-Feel [Observation]”,

39. “Testing [and Debugging Tip]”,

40. “Common [Programming Error]” ];

41. var explanations = [

42. // Good Programming Practice Text

43. “Good Programming Practices highlight techniques for “ +

44. “writing programs that are clearer, more “ +

45. “understandable, more debuggable, and more “ +

46. “maintainable.”,

47.

48. // Software Engineering Observation Text

49. “Software Engineering Observations highlight “ +

50. “architectural and design issues that affect the “ +

51. “construction of complex software systems.”,

52.

53. // Performance Tip Text

54. “Performance Tips highlight opportunities for “ +

55. “improving program performance.”,

DMC 1623

NOTES


56.

57. // Portability Tip Text

58. “Portability Tips help students write portable code “ +

59. “that can execute in different Web browsers.”,

60.

61. // Look-and-Feel Observation Text

62. Look-and-Feel Observations highlight graphical user “ +

63. “interface conventions. These observations help “ +

64. “students design their own graphical user interfaces “ +

65. “in conformance with industry standards.”,

66.

67. // Testing and Debugging Tip Text

68. “Testing and Debugging Tips tell people how to test “ +

69. “and debug their programs. Many of the tips also “ +

70. “describe aspects of creating Web pages and scripts “ +

71. “that reduce the likelihood of ‘bugs’ and thus “ +

72. “simplify the testing and debugging process.”,

73.

74. // Common Programming Error Text

75. “Common Programming Errors focus the students’ “ +

76. “attention on errors commonly made by beginning “ +

77. “programmers. This helps students avoid making the “ +

78. “same errors. It also helps reduce the long lines “ +

79. “outside instructors’ offices during office hours!” ];

80.

81. function loadAgent()

82. {

83. agent.Connected = true;

84. a g e n t . C h a r a c t e r s . L o a d ( “ p e e d y ”“C:\\WINDOWS\\msagent\chars\\Peedy.acs”);

85. parrot = agent.Characters.Character( “peedy” );

86. parrot.LanguageID = 0x0409; // needed in some conditions

87.

88. // get states from server

89. parrot.Get( “state”, “Showing” );

WEB GRAPHICS

NOTES


90. parrot.Get( “state”, “Speaking” );

91. parrot.Get( “state”, “Hiding” );

92.

93. // get Greet animation and do Peedy introduction

94. parrot.Get( “animation”, “Greet” );

95. parrot.MoveTo( screenLeft, screenTop - 100 );

96. parrot.Show();

97. parrot.Play( “Greet” );

98. parrot.Speak( “Hello. My name is Peedy the Parrot. “ +

99. “If you would like me to tell you about a “ +

100. “programming tip, click its icon, or, press the “ +

101. “‘Scroll Lock’ key, and speak the name of the “ +

102. “tip, into your microphone.” );

103.

104. parrot.Play( “GreetReturn” );

105. // get other animations

106. parrot.Get( “animation”, “Idling” );

107. parrot.Get( “animation”, “MoveDown” );

108. parrot.Get( “animation”, “MoveUp” );

109. parrot.Get( “animation”, “MoveLeft” );

110. parrot.Get( “animation”, “MoveRight” );

111.

112. parrot.Get( “animation”, “GetAttention” );

113. // set up voice commands

114. for ( var i = 0; i < tips.length; ++i )

115. parrot.Commands.Add( tips[ i ], tipNames[ i ],

116. voiceTips[ i ], true, true );

117.

118. parrot.Commands.Caption = “Programming Tips”;

119. parrot.Commands.Voice = “Programming Tips”;

120. parrot.Commands.Visible = true;

121. }

122.

123. function imageSelectTip( tip )

124. {

125. for ( var i = 0; i < document.images.length; ++i )

126. if ( document.images( i ) == tip )

DMC 1623

NOTES



128. }

129.

130. function voiceSelectTip( cmd )

131. {

132. var found = false;

133.

134. for ( var i = 0; i < tips.length; ++i )

135. if ( cmd.Name == tips[ i ] ) {

136. found = true; .

137. break;

138. }

139.

140. if ( found )


142. }

143.

144. function tellMeAboutIt( element )

145. {

146. currentImage = document.images( element );

147. currentImage.style.background = “red”;

148. parrot.MoveTo( currentImage.offsetParent.offsetLeft,

149. currentImage.offsetParent.offsetTop + 30 );

150. parrot.Speak( explanations[ element ] );

151. }

152. </SCRIPT>

153.

154. <SCRIPT LANGUAGE = “JavaScript” FOR = “agent”

155. EVENT = “Command( cmd )”>

156. voiceSelectTip( cmd );

157. </SCRIPT>

158.

159. <SCRIPT LANGUAGE=”JavaScript” FOR = “agent” EVENT =“BalloonHide”>

160. if ( currentImage != null ) {

161. currentImage.style.background = “lemonchiffon”;

162. currentImage = null;

163. }

WEB GRAPHICS

NOTES


164. </SCRIPT>

165.

166. <SCRIPT LANGUAGE = “JavaScript” FOR = “agent” EVENT =“Click”>

167. parrot.Play( “GetAttention” );

168. parrot.Speak( “Stop poking me with that pointer!” );

169. </SCRIPT>

170.

171. </HEAD>

172.

173. <BODY BGCOLOR = “lemonchiffon” ONLOAD = “loadAgent()”>

174. <TABLE BORDER = “0”>

175. <TH COLSPAN = “4”>

176. <H1 STYLE=”color: blue”>Deitel & Deitel Programming Tips</H1>

177. </TH>

178. <TR>


180. <IMG NAME = “gpp” SRC = “one.gif”

181. ALT = “Good Programming Practice” BORDER = “0”


183. <BR>Good Programming Practices</TD>


185. <IMG NAME = “seo” SRC = “two.gif”

186. ALT = “Software Engineering Observation” BORDER = “0”


188. <BR>Software Engineering Observations</TD>


190. <IMG NAME = “perf” SRC = “three.gif”

191. ALT = “Performance Tip” BORDER = “0”


193. <BR>Performance Tips</TD>


195. <IMG NAME = “port” SRC = “four.gif”

196. ALT = “Portability Tip” BORDER = “0”


198. <BR>Portability Tips</TD>

199. </TR>

200. <TR>

DMC 1623

NOTES



202. <IMG NAME = “gui” SRC = “five.gif”

203. ALT = “Look-and-Feel Observation” BORDER = “0”


205. <BR>Look-and-Feel Observations</TD>


207. <IMG NAME = “dbt” SRC = “six.gif”

208. ALT = “Testing and Debugging Tip” BORDER = “0”


210. <BR>Testing and Debugging Tips</TD>


212. <IMG NAME = “cpe” SRC = “seven.gif”

213. ALT = “Common Programming Error” BORDER = “0”

214. ONCLICK = “imageSelectTip(this)”>

215. <BR>Common Programming Errors</TD>

216. </TR>

217. </TABLE>

218. </BODY>

219. </HTML>

Peedy ready to receive voice commands

Explanation

To enable Microsoft Agent to recognize voice commands, a compatible voice-recognition engine must be installed. Lines 21-24 use an ‘object’ element to embed aninstance of the Microsoft Speech Recognition engine control in the web page.

WEB GRAPHICS

NOTES


Next, the voice commands used to interact with the Peedy must be registered in thecharacter objects ‘Commands’ collection. Lines 118-120 uses the ‘Commands’ collection’s‘Add’ method to register each voice command. The method receives five arguments. Thefirst argument is a string representing the command ‘name’. The second argument is astring that appears in a pop-up menu in response to a right click on the character. The thirdargument is a string representing the words or phrase users can speak for this command(stored in array ‘voiceTips’). Optional words or phrases are enclosed in square brackets([ ]). The last two arguments are Boolean values indicating whether the command is currentlyenabled and whether the command is currently visible in the pop-up menu and ‘VoiceCommands’ window for the character.

Lines 122-124 set the ‘Caption’, ‘Voice’, and ‘visible’ properties of the commandsobject. The ‘Caption’ property specifies text that describes the voice command set. Thistext appears in the small rectangular area that appears below the character when the userpresses the ‘Scroll Lock’ key. The ‘Voice’ property is similar to the ‘Caption’ propertyexcept that the specified text appears in the ‘Voice Commands’ window with the set ofvoice commands the user can speak below it. The ‘Visible’ property is a Boolean valuethat specifies whether this ‘Command’ objects commands should appear in the pop-upmenu.

After receiving a voice command, the agent control’s ‘command’ event handler (lines158 to 161) executes. This script calls function ‘voiceSelectTip’ and passes it the name ofthe received command. Function ‘voiceSelectTip’ (lines 134-146) uses the name of thecommand in the ‘for’ statement (lines 138-142) to determine the index of the command inthe ‘Commands’ object. This value is then passed to function ‘tellMeAboutIt’ (lines 148-155), which causes Peedy to move to the specified tip and discuss it.


1. How do Microsoft Agents enhance the functionality of a web page? Demonstratewith an example how would you add an agent control to a web page?

2. Explain with an example how you would implement TTS (text to speech)functionality in a web page using Microsoft Agents.

3. Explain with an example how you would implement Voice Recognition functionalityin a web page.

4.9 EMBEDDING REALPLAYER ACTIVEX CONTROL

A RealOne Player object may be embedded into a web page to enhance the pagewith streaming audio and video. RealOne Player can also be delivered as a browser plug-in on multiple platforms. The example below demonstrates streaming audio and video in aweb page by embedding RealOne Player object in the page using ‘embed’ element. Userscan select from three different sources: this selection then calls a JavaScript function whichinvokes RealOne Player methods to play the selected audio/video stream. The programbelow shows how to embed real player.

DMC 1623

NOTES


<HTML>

1. <!— Embedding Realplayer into an HTML page —>

2. <HEAD>

3. <TITLE>Live Audio!</TITLE>


5. var locations = [ “tzp1.rm”,”tzp2.rm”,”abc.rm” ]

6. function change( loc )

7. {

8. raControl.SetSource( locations[ loc ] );

9. raControl.DoPlayPause();

10. }

11. </SCRIPT>

12. </HEAD>

13. <BODY>

14. <P>

15. Pick from my favorite audio streams:

16. <SELECT ID = “streamSelect” ONCHANGE = “change( this.value )”>

17. <OPTION VALUE = “”>Select a station</OPTION>

18. <OPTION VALUE = “0”>alpha</OPTION>

19. <OPTION VALUE = “1”>beta</OPTION>

20. <OPTION VALUE = “2”>gamma</OPTION>

21. </SELECT>

22. <BR>

23. <EMBED ID = “raControl” SRC = “”

24. TYPE = “audio/x-pn-realaudio-plugin” WIDTH = “275”

25. HEIGHT = “125” CONTROLS = “Default” AUTOSTART = “false”>

26. </BODY>

27. </HTML>

WEB GRAPHICS

NOTES


Explanation

The ‘embed’ elements in lines 24-26 embed the RealOne Player plug-in for video oraudio into the page. The ‘type’ attribute specifies the MIME type of the embedded file,which in this case is the MIME type for straming video or audio. The ‘width’ and ‘height’attributes specify the dimension of the space the control occupies the web page. The‘autostart’ attribute determines whether the media starts playing when the page loads. The‘controls’ attribute specifies which controls users can access. Setting attribute, ‘controls’to ‘default’ produces a control bar featuring the standard control buttons. The attribute‘src’ of the ‘embed’ element is not set . Normally the ‘src’ is set to the location of thestreaming media, but in this example, Javascript is used to change the source dynamicallybased on user selections.

Now that the player is embedded in the web page, we use scripting to activate thestreaming media. The ‘select’ menu lists three entries in the array ‘locations’ which containthe actual URL’s for the live video feeds. When the selection changes, function ‘change’ iscalled by the ‘onChange’ event. This function calls methods ‘SetSource and ‘DoPlayPause’of the RealOne Player media object. Method ‘SetSource’ sets the source URL of theaudio or video stream to be played. Then, method “DoPlayPause’ toggles between pausingand playing the stream.


1. How would you embed Real Player into a web page? Demonstrate with an example.

4.10 EMBEDDING VRML INTO A WEB PAGE

VRML (Virtual Reality Modeling Language) is a scene description language. It is astandard file format for representing 3D interactive vector graphics designed particularlywith the World Wide Web in mind. VRML files are commonly called “worlds” and havethe *.wrl extension. Many 3D modeling programs can save objects and scenes in VRMLformat.

Though VRML is a computer language, it is not a programming language. VRML filesare not compiled, but are simple ascii text files which can be parsed by a VRML interpreter.These intpreter programs (or parsers) are often called VRML browsers. You startwriting code with an ascii text editor, save the file with the extension .wrl (world), and viewthe VRML scene (or world) with a VRML browser. It’s that easy to get started. SinceVRML code is interpreted, the visible results of the code may vary from one browserprogram to another. Furthermore, VRML is extensible, which means that browserdevelopers, for example, can add new, non-standard functionality to the language, usingstandard components of the language. If a browser can parse the extensions to the standardVRML language which it encounters in a world file, then the new functionality describedby the extensions will be interpreted for the user as that scene is rendered.

DMC 1623

NOTES


You will need to install a VRML plug-in before you can view VRML models usingMicrosoft Internet Explorer. Once you have installed a VRML plug-in, Microsoft InternetExplorer should automatically display VRML models that are embedded in web pages.

Below is a sample VRML file

1. #VRML V2.0 utf8

2. # Red cone

3. Shape {

4. appearance Appearance {

5. material Material {

6. diffuseColor 1 0 0

7. }

8. }

9. geometry Cone {

10. bottomRadius 0.75

11. height 1.6

12. }

13. }

The output of the above program is shown below. The output is generated using avrml plg-in called ‘Cortona’. It is a VRML Client that works as a VRML plug-in forpopular Internet browsers (Internet Explorer, Netscape Browser, Mozilla, Mozilla Firefox,etc.) and office applications (Microsoft PowerPoint, Microsoft Word, etc).

WEB GRAPHICS

NOTES


The program below shows how to embed VRML files into a web page.

1. <HTML>

2. <!— Embedding VRML into a Web page —>

3. <HEAD>

4. <TITLE>Live VRML</TITLE>

5. </HEAD>

6. <BODY>

7. <EMBED SRC = “hemoglobine.wrl” WIDTH = “400” HEIGHT = “400”>

8. </BODY>

9. </HTML>


1. How would you embed VRML files into a web page? Demonstrate with an example.

Summary

1. RealProducer, Audacity – audio editing, Avid Express Pro, Quick Time Pro, AdobePremiere Pro, Pinnacle Studio – video editing software

2. MIDI, Real Audio, AU, AIFF, SND, Wav, MP3 – audio formats, AVI, WindowsMedia, MPEG, QuickTime, RealVideo, ShockWave Flash – video andanimationformats.

3. Web authoring tools – WYSIWYG tools – Microsoft FrontPage, and AdobeDreamweaver. Program based – Flash, Director etc.,

4. Windows Media formats – ASF, ASX, WMA, WMV

DMC 1623

NOTES


5. Audio and Video Players – QuickTime, RealOne, Windows Media Player,WinAmp, Flahs, Cosmo etc.,

6. Flash Work environment – Stage, Timeline, Toolbar, Onion skin buttons, playhead, key frame, Symbols and Instances, (Symbols are reusable elements thatyou use with a movie ) Library, Scenes

7. Frame-by-frame animation changes the contents of the Stage in every frame and isbest suited to complex animation in which an image changes in every frame insteadof simply moving.

8. In keyframe (tweened) animation, you define keyframes at important points in theanimation and let Flash create the content of frames in between. Flash displays theinterpolated frames of a tweened animation as light blue or green with an arrowdrawn between keyframes.

9. Flash can create two types of tweened animation. In motion tweening, you defineproperties such as position, size, and rotation for an instance, group, or text blockat one point in time, and then you change those properties at another point in time.In shape tweening, you draw a shape at one point in time, and then you changethat shape or draw another shape at another point in time. Flash interpolates thevalues or shapes for the frames in between, creating the animation.

10. The ‘bgsound’ element has four key properties – src, loop, balance and volume.To change the property values via a script, assign a scripting name to the bgsoundelements id property.

11. The ‘img’ element incorporates both images and videos in a web page. Using the‘src’ property indicates that the desired source is an image. Using the ‘dynsrc’(dynamic source) property indicates that the source is a video clip. The ‘dynsrc’property may be followed by properties such as ‘loop’, which is similar to the‘bgsound’s’ ‘loop’ property.

12. The ‘embed’ element displays a graphical user Interface within the browser windowthat gives the user direct control over the media clip. A browser encountering amedia clip in an ‘embed’ element launches an application that can play it. Forexample if the media clip is a .wav file Internet Explorer typically uses the WindowsMedia Player ActiveX control to play the clip.

13. The Windows Media Player and other ActiveX controls are embedded into webpages with the ‘object’ element. ActiveX controls enhance the functionality of webpages with interactivity.

14. Microsoft Agent is an exciting technology for Interactive animated characters in awindows application or a web page. The Microsoft Agent Control provides accessto Agent characters such as “Peedy (a parrot), Genie, Merlin (a wizard) and Robby(a robot) etc.,

15. The control accepts muse and keyboard interactions, speaks (if a compatible text-to-speech engine is installed) and also supports speech recognition (if a compatiblespeech-recognition engine is installed). Using Microsoft Agent allows web pagesto speak with users.

WEB GRAPHICS

NOTES


16. A RealOne Player object may be embedded into a web page to enhance the pagewith streaming audio and video. RealOne Player object can be embedded in web‘embed’ element.

17. VRML (Virtual Reality Modeling Language) is a scene description language. Itis a standard file format for representing 3D interactive vector graphics designedparticularly with the World Wide Web in mind. VRML files are commonly called“worlds” and have the *.wrl extension.

18. Install a VRML plug-in before you can view VRML models using Microsoft InternetExplorer. Once you have installed a VRML plug-in, Microsoft Internet Explorershould automatically display VRML models that are embedded in web pages..

DMC 1623

NOTES


WEB GRAPHICS

NOTES


UNIT - V

CREATING A WEBSITE WITH GRAPHICSANIMATION AND INTERACTIVITY

5.1 INTRODUCTION

Here we will learn how to create a web site that includes basic graphics, animationand interactivity and basic navigation using Flash 5.0 software. Creating web sites withFlash has the advantage of resolution independent vector graphics, ability to handle maymedia formats, ability to integrate them using timeline metaphor and less file sizes etc.,Graphics can be created in flash or can be imported from software like Adobe PhotoShop.Animation effects like shape tweening, motion tweening, frame by frame animation can bedone in Flash itself. For incorporating interactivity the powerful features of Action Scriptcan be used. Because Flash files in general can be streamed a ‘preloader’ would helpengage the user with the site.

We will also look into creating simple animations using HTML/DHTML andJavaScript.


• To learn about symbols and instances

• To learn how to use Flash Action scripting for creating Interactive movies.

• Creating a Preloader in Flash.

• Adding Preloader to an existing movie.

• Creating simple Flash web sites

• Creating simple animations using HTML/DHTML/JavaScript

5.3 SYMBOLS AND INSTANCES

A symbol is a graphic, button, or movie clip that you create once and then can reusethroughout your movie or in other movies. Any symbol you create automatically becomespart of the library. An instance is a copy of a symbol located on the Stage or nested insideanother symbol. An instance can be very different from its symbol in color, size, and function.

DMC 1623

NOTES


Editing the symbol updates all of its instances. But editing an instance of a symbol updatesonly that instance.

Each symbol has a unique Timeline and Stage, complete with layers. When you createa symbol, you choose how the symbol will behave, depending on how you want to use itin the movie.

Use graphic symbols for static images and to create reusable pieces of animation thatare tied to the Timeline of the main movie. Graphic symbols operate in sync with theTimeline of the main movie. Interactive controls and sounds won’t work in a graphic

Symbol’s animation sequence.

Use button symbols to create interactive buttons in the movie that respond to

mouse clicks or rollovers or other actions. You define the graphics associated with variousbutton states, and then assign actions to a button instance.

Use movie clip symbols to create reusable pieces of animation. Movie clips

have their own multiframe Timeline that plays independent of the main movie’s Timeline—think of them as mini-movies inside a main movie that can contain interactive controls,sounds, and even other movie clip instances. You can also place movie clip instances inside

the Timeline of a button symbol to create animated buttons.

5.3.1 Creating Symbols

You can create a symbol from selected objects on the Stage, or you can create anempty symbol and make or import the content in symbol-editing mode. Symbols can haveall the functionality that you can create with Flash, including animation.

By using symbols that contain animation, you can create movies with a lot of movementwhile minimizing file size. Consider creating animation in a symbol when there is a repetitiveor cyclic action—the up-and-down motion of a bird’s wings, for example.

To create a new symbol with selected elements:

• Select an element or several elements on the Stage and choose Insert > Convertto Symbol.

• In the Symbol Properties dialog box, type the name of the symbol and choose thebehavior—Graphic, Button, or Movie Clip.

• Click OK.

Flash adds the symbol to the library. The selection on the Stage becomes an instanceof the symbol. You can no longer edit the object directly on the Stage—you must open it insymbol-editing mode

WEB GRAPHICS

NOTES


To create a new empty symbol

Make sure that nothing is selected on the Stage and do one of the following:

Choose Insert > New Symbol

Click the New Symbol button at the bottom left of the Library window.

Choose New Symbol from the Library Options menu in the upper right corner of theLibrary window.

5.3.2 Converting animation on the Stage into a movie clip

If you’ve created an animated sequence on the Stage and want to reuse it elsewherein the movie, or if you want to manipulate it as an instance, you can select it and save it asa movie clip symbol.

To convert animation on the Stage into a movie clip:

• On the main Timeline, select every frame in every layer of the animation on theStage that you want to use.

• Choose Edit > Copy Frames.

• Deselect your selection and make sure nothing on the Stage is selected. ChooseInsert > New Symbol.

• In the Symbol Properties dialog box, name the symbol. For Behavior, chooseMovie Clip, then click OK.

Flash opens a new symbol for editing in symbol-editing mode.

• On the Timeline, click Frame 1 on Layer 1, and choose Edit > Paste Frames.Thispastes the frames you copied from the main Timeline to the Timeline of this movieclip symbol. Any animation, buttons, or interactivity from the frames you copiednow becomes an independent animation (a movie clip symbol) that you can reusethroughout your movie.

• Do one of the following to exit symbol-editing mode:

• Choose Edit > Edit Movie.>Click the Scene button in the upper left corner of thedocument window.

• Click the Edit Scene button in the upper right corner of the document window andchoose a scene from the menu.

• Delete the animation from the main movie Timeline by selecting every frame inevery layer of the animation and choosing Insert > Remove Frame.

5.3.3 To Create a New Instance of a Symbol

• Select a layer in the Timeline.

• Flash can place instances only in keyframes, always on the current layer. If youdon’t select a keyframe, the instance will be added to the first keyframe to the leftof the current frame.

DMC 1623

NOTES


• Choose Window > Library to open the library.

• Drag the symbol from the library to the Stage.

• If you created an instance of a graphic symbol, choose Insert > Frame to add thenumber of frames that will contain the graphic symbol.

5.3.4 To Use Buttons in Flash

Buttons are actually four-frame interactive movie clips. When you select the buttonbehavior for a symbol, Flash creates a Timeline with four frames. The first three framesdisplay the button’s three possible states; the fourth frame defines the active area of thebutton. The Timeline doesn’t actually play; it simply reacts to pointer movement and actionsby jumping to the appropriate frame.

To make a button interactive in a movie, you place an instance of the button symbolon the Stage and assign actions to the instance. The actions must be assigned to the instanceof the button in the movie, not to frames in the button’s Timeline.

Each frame in the Timeline of a button symbol has a specific function:

• The first frame is the Up state, representing the button whenever the pointer is notover the button.

• The second frame is the Over state, representing the button’s appearance whenthe pointer is over it.

• The third frame is the Down state, representing the button’s appearance as it isclicked.

• The fourth frame is the Hit state, defining the area that will respond to the mouseclick. This area is invisible in the movie.

To create a button

• Choose Edit > Deselect All to ensure that nothing is selected on the Stage.

• Choose Insert > New Symbol, or press Control+F8

• To create the button, you convert the button frames to keyframes.

• In the Symbol Properties dialog box, enter a name for the new button symbol, andfor Behavior choose Button.

Flash switches to symbol-editing mode. The Timeline header changes to display fourconsecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blankkeyframe.

WEB GRAPHICS

NOTES


To create the Up state button image, use the drawing tools, import a graphic, or placean instance of another symbol on the Stage.

You can use a graphic or movie clip symbol in a button, but you cannot use anotherbutton in a button. Use a movie clip symbol if you want the button to be animated.

• Click the second frame, labeled Over, and choose Insert > Keyframe.

Flash inserts a keyframe that duplicates the contents of the Up frame.

• Change the button image for the Over state.

• Repeat steps 5 and 6 for the Down frame and the Hit frame.

DMC 1623

NOTES


The Hit frame is not visible on the Stage, but it defines the area of the button thatresponds when clicked. Make sure that the graphic for the Hit frame is a solid area largeenough to encompass all the graphic elements of the Up, Down, and Over frames. It canalso be larger than the visible button. If you do not specify a Hit frame, the image for theUp state is used as the Hit frame.

You can create a disjoint rollover by placing the Hit frame in a different location thanthe other button frames.

• To assign a sound to a state of the button, select that state’s frame in the Timeline,choose Modify > Frame to display the Frame panel, and then click the Sound tabin the Frame panel.

• When you’ve finished, choose Edit > Edit Movie. Drag the button symbol out ofthe Library window to create an instance of it in the movie.


1. What are symbols and instances in Flash 5.0 and how would you create them?

2. How would you create buttons in Flash 5.0? What are the various events?

5.4 CREATING INTERACTIVE MOVIES

You create interactive movies by setting up actions—sets of instructions written inActionScript that run when a specific event occurs. The events that can trigger an actionare either the playhead reaching a frame, or the user clicking a button or pressing keys onthe keyboard.

You set up actions in the Actions panel for a button, a movie clip, or a frame. Usingthe Actions panel controls in Normal Mode, you can insert actions without having to writeany ActionScript; if you’re proficient in ActionScript, you can write your own script.Instructions can be in the form of a single action, such as instructing a movie to stopplaying, or a series of actions, such as first evaluating a condition and then performing anaction. Many actions require little programming experience to set up.

WEB GRAPHICS

NOTES


Flash uses the ActionScript scripting language to add interactivity to a movie. Similarto JavaScript, ActionScript is an object-oriented programming language. In object-orientedscripting, you organize information by arranging it into groups called classes. You cancreate multiple instances of a class, called objects, to use in your scripts. You can useAction Script’s predefined classes and create your own.

Objects in ActionScript can contain data or they can be graphically represented onthe Stage as movie clips.

5.4.1 Using the Action’s Panel

The Actions panel lets you create and edit actions for an object or frame using twodifferent editing modes. You can select prewritten actions from the Toolbox list, drag anddrop actions, and use buttons to delete or rearrange actions. In Normal Mode you canwrite actions using parameter (argument) fields that prompt you for the correct arguments.In Expert Mode you can write and edit actions directly in a text box, much like writingscript with a text editor.

To display the Actions panel:

Choose Window > Actions.

Selecting a frame, button, or movie clip instance makes the Actions panel active. TheActions panel title changes to Object Actions if a button or movie clip is selected and toFrame Actions if a frame is selected. There are two modes of choice Normal mode andExpert mode. You can edit the script in Expert mode.

5.4.1.1 Using the Actions Panel in Normal Mode

In Normal Mode, you create actions by selecting actions from a list on the left side ofthe panel, called the Toolbox list. The Toolbox list contains Basic Actions, Actions,Operators, Functions, Properties, and Objects categories. The Basic Actions categorycontains the simplest Flash actions and is available only in Normal Mode. The selectedactions are listed on the right side of the panel, in the Actions list. You can add, delete, orchange the order of action statements; you can also enter parameters (arguments) foractions in the Parameters pane at the bottom of the panel.

In Normal Mode, you use the controls in the Actions panel to delete or change theorder and parameters of statements. These controls are especially useful for managingframe or button actions that have several statements.

DMC 1623

NOTES


To select an action

Click an Actions category in the Toolbox to display the actions in that category.

Double-click an action or drag it to the Actions list on the right.

To use the Parameters pane

Click the triangle in the lower right corner of the Actions panel to display the Parameterspane.

Select the action and enter new values in the parameters text boxes to change

parameters of existing actions.

To insert a movie clip target path:

Click the Target Path button in the lower right corner of the Actions panel to displaythe Insert Target Path dialog box.

Select a movie clip from the display list.

5.4.1.2 Using Actions in the Expert mode

Expert Mode

In Expert Mode, you create actions by entering ActionScript into the text box on theright side of the panel or by selecting actions from the Toolbox list on the left. You editactions, enter parameters for actions, or delete actions directly in the text box, much asyou would create script in a text editor.

WEB GRAPHICS

NOTES


Expert Mode lets advanced ActionScript users edit their scripts with a text editor, asthey would JavaScript or VBScript. Expert Mode differs from Normal Mode in theseways:

• Selecting an item in the Add pop-up menu or Toolbox list inserts the item in thetext-editing area at the pointer’s position.

• No parameter text boxes appear.

• In the button panel, only the Add (+) button works.

• The Up and Down Arrow buttons remain inactive.

5.4.2 Assigning Actions to Objects

You can assign an action to a button or a movie clip to make an action execute whenthe user clicks a button or rolls the pointer over it, or when the movie clip loads or reachesa certain frame. You assign the action to an instance of the button or movie clip; otherinstances of the symbol aren’t affected.

When you assign an action to a button or a movie clip, Flash automatically assigns aspecial action called a handler—the On Mouse Event action for buttons or the On ClipEvent action for movie clips. A handler manages an event in a certain way and containsgroups of ActionScript statements that run when a specific event occurs. Each handlerbegins with the word on or onClipEvent followed by the event to which the handler responds.

Events are actions that occur while a movie is playing—for example, a movie cliploading, the playhead entering a frame, or the user pressing a key on the keyboard. Youcan specify the mouse event or keyboard key that triggers the action. Once you’ve assignedan action, it’s recommended that you test whether it works. Only simple frame actionssuch as Go To and Play work in editing mode.

The following instructions describe how to set actions for objects using the Actionspanel in Normal Mode.

DMC 1623

NOTES


To assign an action to a button or movie clip:

• Select a button or movie clip instance and choose Window > Actions.

• If the selection is not a button instance, a movie clip instance, or a frame, or if theselection includes multiple objects, the Actions panel will be dimmed.

• In the Toolbox list on the left side of the panel, click the Basic Actions category todisplay the basic actions.

• To assign an action, do one of the following:

• Double-click an action in the Basics Actions category

• Drag an action from theBasic Actions category on the left to the Actions list on theright side of the panel.

• Click the Add (+) button and choose an action from the pop-up menu.

• Use the keyboard shortcut.

If you selected a movie clip, Flash automatically inserts the On Clip Event action andthe action you selected in the Actions list. If you selected a button, Flash automaticallyinserts the On Mouse Event code to trigger any selected action.

5.4.3 Using basic Actions For Navigation and Interaction

The basic actions in the Actions panel let you control navigation and user interactionin a movie by selecting actions and having Flash write the ActionScript for you. The basicactions include the following:

• The Go To action jumps to a frame or scene.

• The Play and Stop actions play and stop movies.

• The Toggle High Quality action adjusts a movie’s display quality.

• The Stop All Sounds action stops all sounds in the movie.

• The Get URL action jumps to a different URL.

• The FSCommand action controls the Flash Player that’s playing a movie.

WEB GRAPHICS

NOTES


• The Load Movie and Unload Movie actions load and unload additional movies.

• The Tell Target action controls other movies and movie clips.

• The If Frame Is Loaded action checks whether a frame is loaded.

• The On Mouse Event action assigns a mouse event or keyboard key that triggersan action.

5.4.4 Basic and Frequently used Action Script Commands

Basic actions help us to control navigation and user interaction in a movie. Basicactions are many. The first and most simple action is ‘Goto’ statement.

Goto statement

To move from one scene to another or from one frame to another frame, Gotostatement is used.

Example:

On (press)

{

Goto and play (5);

}

(Or) on (press)

{

Goto and stop (1);

}

We cannot have Goto statement alone in the script. It is always clubbed with Play orStop statement.

Play & Stop

Using these actions, the movie can be played or stopped.

The play and stop are vital commands of action script. If we uncheck the play button,it automatically becomes stop. Goto, play and stop statements are always combined. Playand stop statements can be added separately, but goto statement cannot be separated.

Example:

Like this, we can have script

On (press)

{

Play ( );

DMC 1623

NOTES


}

On (release)

{

Stop ( );

}

And not like this:

On (press)

{

Goto;

}

Load Movie

Using this command, a movie can be loaded and unloaded. The load movie is used toload to movie from different location or from the same location. The URL of the movie, thetarget and the variables has to be specified.

URL - The specific path of the movie to be loaded.

Level - To identify the different movies that are loaded, we use a number between movies.

Target - Instance name of the movie.

Variables - To send the values of the movie to server, use post or get method. The defaultvalue is ‘don’t send’.

By specifying the proper values for location, URL and variables a movie can beloaded.

WEB GRAPHICS

NOTES


Unload Movie

In the unload movie, the level alone is required. Using the location specify the moviewhich has to be unloaded.

If the level is 1, then specify 1. Otherwise, if the target is “galaxy”, specify the targetas “galaxy”.

By specifying the target or level of a movie which has to be unloaded, unload moviewill execute.

Note: If there is any error in the path or in the values, the errors will be displayed inthe output window.

Get URL:

Using Get URL command, the object can be linked to a different location. By selectinga button, from the flash movie, if we want to navigate to another application and it can bemade with the help of Get URL command.

Syntax: get URL (url [, window [, variables]]);

URL - The location to which the link has to be made is specified in the URL text box.

Window - an argument which specifies in which window the document should open.

_ self - specifies current frame in current window.

_ blank - specifies a new window.

_ parent - specifies the parent of current frame.

_ top - specifies the top frame of current window.

DMC 1623

NOTES


Variables

To send the variables and the values to server, we have the following methods:

Get - appends the value of the variable to the end of URL.

Post - sends the variables in a separate HTTP header and it is used for long strings ofvariables.

Toggle High Quality:

Using this command we can maintain the quality of the movie. This action may affectthe movie, since they give the movie a high quality and it takes more time to download themovie due to the large file size.

Syntax:

Toggle high quality ( );

Example:

On (press)

{

toggle high quality ( );

}


1. What are the two modes of using the Actions panel?

2. What are the basic actions for navigation and interaction? Mention the attributesand explain with examples.

WEB GRAPHICS

NOTES


5.5 CREATING A FLASH BASIC PRELOADER

Normally before a browser can render a graphic, text, or other element to the screen,the entire file must be downloaded from the web, Thus if a slow connection exists somewherebetween the end user and the server, content loads very slowly because the file has to befully downloaded before it can be viewed. Flash files, however, are written sequentially;that is, frames 1 is written, and then frame 2, and so on. Therefore, as soon as the dataassociated with frame 1 is downloaded, it can be played, even if the remainder of the file isnot downloaded.

Streaming multimedia files are loaded such that their content begins to play before acomplete download. Yet, streaming multimedia files over the web will only play smoothly ifthe rate of playback is less than or equal to the rate of downloading. Any time the rate ofplayback is less than or equal to the rate of download, a noticeable pause may occur,because the multimedia asset must stop and wait for more data to load.

Flash movies always stream. The effectiveness of .swf streaming ultimately dependson the amount of data required for each frame. If large bitmaps or lengthy sounds arepresent, the data requirements for the frame become quite large and can negatively affectthe streaming process.

In these scenarios, preloaders provide a means of presenting something on-screenduring the time required for downloading. They can also be used to indicate the amount ofremaining download time. Preloaders are simply a set of frames in the beginning of anormal movie file that loops or plays while the reminder of the movie file is downloaded.Setting up a basic preloader requires three things

• Elements somewhere in the file that make a preloader necessary.

• A set of frames to loop while waiting for the content to load.

• An If Frame Is Loaded (ifFrameLoaded) action that is assigned to jump to acertain frame or label once a particular frame is loaded.

Follow the steps to create a preloader

1. Begin by opening a Flash and starting a new movie

2. In the movie, add a layer, named Actions/Label, to the time line. This layer will beused for the labels and actions you will add. Rename the other layer content.

3. Using the F5 function key (Insert frame), extend the blank frames of the two layersout to frame 10.

4. Right-Click in frame 10 of the ‘Content’ layer and select Add Keyframe.

5. One of the requirements for using a preloader is to have a need for a preloader.Thus, you will insert a bitmap graphic and a sound clip into frame 10. This should

DMC 1623

NOTES


provide enough file size to your movie to be able to see the preloader work on your local machine.

6. Import a sound file big enough in the format .wav or .aif . Also import a bitmapimage big enough. (Note that preloaders you create may be undetectable if youtest them from your local machine using the basic Test Movie option. But if youuse the ‘Bandwidth Profiler’ option with the ‘Show Streaming’ option you maysee the work of a preloader.)

7. When you inserted the bitmap image, it should have automatically been added toframe 10 of layer ‘Content’. Right-Click on frame 10 and select Panels>Soundfrom the context menu.

8. In the Sound panel, assign the music clip to the frame. Set the Sync drop-down ofthe music clip to Start, and the Loop field to 999.

9. Before you move on, add a label to frame 10 of the ‘Content’ layer. Right-Click inframe 10 and select Panels>Frame. Type ‘Start’ into the Label field in the Framepanel.

10. Right-Click in frame 1 of the Labels/Actions layer and select Panels>Frame fromthe context menu.

11. In the Frame panel, enter ‘Preloader’ into the Label field.

12. Insert a keyframe in frame 9 and in frame 10 of the Labels/Actions layer.

13. Right-Click in frame 9 and select Actions from the context menu.

14. Using the Actions panel, add a Go To action to the frame. Set the Label drop-down to the Preloader label. Make sure you select the Go To and Play checkbox.If you do not, the preloader will not work.

15. Now you must create the movie clip that will play while the content in the rest ofthe movie will be loading. Use Insert>New Symbol to create a new movie clipsymbol named ‘Loading’.

WEB GRAPHICS

NOTES


16. In the mew symbol, add some text that says ‘Loading’ that is of generous pointsize (20 points or larger).

17. Create a short animation in the symbol’s timeline. You can make the text flash onor off, or anything else you want to do while the content is loading. The movie clipwill be inserted so that it continually repeats while the preload function is occurring.Once you are finished, click on the ‘Scene 1’ link in the Edit Path to switch backto the main movie timeline.

18. In the main timeline, open the library and insert the Loading movie clip into frame1 of the ‘Content’ layer.

19. Right-Click on frame 1 of the ‘Content’ layer and select Actions from the contextmenu.

20. In the Actions panel, insert an ‘ifFrameLoaded’ action from the Actions group inthe Toolbox list. Enter 10 in the number field.

21. Insert a Go To action inside the ‘ifFrameLoaded’ action. Assign the Type drop-down list to Frame Label and the Frame drop-down to ‘Start’. Make sure the‘Go To’ and ‘Play’ checkbox is not selected.

22. Select ‘Test Movie’ from the control menu. Depending on the speed of yourcomputer, you may or may not see the ‘Loading’ movie clip.

DMC 1623

NOTES


23. To really see what the end user will detect, while still in ‘Test Movie’, select 28.8from the ‘Debug’ menu and ‘Bandwidth Profiler’ from the ‘View’ menu.

24. Select Show Streaming from the Control menu. Doing this will limit playback tothe data rate defined in the modem settings. Now you can see that the preloader isdoing its job.

5.5.1 Adding Preloader to an Existing Movie

You can add preloader to an existing movie. Assume you have readied a movie thathas all the media types say audio (big enough), image, animation graphic buttons etc.Assume you have layer by name ‘Preloader’ in the layers palette. Assume that it is justsecond from top with the top most layer being the ‘Labels/Actions’ layer.

1. Begin by creating some ‘space’ at the beginning of the time-line for the preloader.Click in frame 1 in the ‘Labels/Actions’ layer, hold the Shift key, and click in frame1 in layer 8. This selects the first frame in every layer.

2. Use Insert>Blank Keyframe (F7) to insert a blank keyframe in every layer.

3. Move the playhead to frame 1 and make sure no frame in any layer is selected.

WEB GRAPHICS

NOTES


4. Use Insert>Frame to stretch the existing frames out to frame 11.

5. Right-Click in frame 1 of the Labels/Actions layer, select Panels>Frame in thecontext menu, and add a label named Preloader.

6. Double click in frame 1 of the ‘Preloade’r layer and remove the label that wasadded by click-dragging operation.

7. Right-Click in frame 10 and add a blank keyframe in layer ‘Labels/Actions’.

8. Add a ‘Go To’ action to frame 10 in the ‘Lables/Actions’ layer that jumps back tothe ‘Preloader’ label. Make sure you select the ‘Go To’ and ‘Play’ checkbox.

9. Add the elements that will be displayed while the movie is waiting to be loadedfrom the web. Use Window>Library to open the current movie’s library.

10. With frame 1 of the ‘Preloader’ layer selected import or drag the ‘Preloader’movie clip in the library to the stage. Now you must set up the ‘ifFrameLoaded’action.

11. Right-Click in frame 1 of the ‘Preloader’ layer and select Actions from the contextmenu.

12. In the Actions panel, ad an ‘ifFrameLoaded’ action and enter 200 in the Numberfield.

13. Add a Go To action beneath the ‘ifFrameLoaded’ event handler and set it to go tolabel ‘Start’. Make sure the Go To and Play checkbox is selected in the Go Toaction.

14. Save your file and test the movie using ‘Bandwidth Profiler’.

DMC 1623

NOTES



1. What is a preloader? What are its advantages?

2. Explain the steps for creating a Preloader in Flash.

3. How would you add a preloader to an existing movie?

5.6 CREATING A SIMPLE FLASH WEB SITE

5.6.1 Example - 1

1. First, open new flash file. Set width and height to 800 and 600 respectively fromthe ‘movie properties’ dialog box (right click on the stage and select ‘movieproperties’) Frame rate should be 24.

2. Insert background picture. Here I have inserted a background picture as below(which is a JPEG image imported from the other drives.

3. Lock layer with background picture and add new layer.

4. On new layer, add text for links. Every link separately.

5. Convert all links to buttons. (F8)

6. Add new layer.

7. Draw black square and convert it to Movie Clip with “window” name. Also, setinstance name on “window” (An additional image has been imported just to fillpage)

WEB GRAPHICS

NOTES


8. Double click on black square to go in to Movie Clip “window”.

9. Select black square again and convert it again to Movie Clip by pressing F8

10. Select black square again and set alpha on 30% (Window>Panel>Effect)

11. Expand layer to frame 35 by pressing F6

12. On first frame transform square like this (i.e. select modify>transform>scale) i.e.shrink it height wise (zero width)

DMC 1623

NOTES


13. Set motion tween on layer

14. Add new layer and on 35 th frame add text and picture for link #1.

15. Add one more layer for actions. On 35 th frame create blank keyframe and inaction script window write stop(); script.

WEB GRAPHICS

NOTES


16. Select 1 st frame of action layer and name it to “link 01”.

17. Select all frames and layers on stage:

18. Copy all frames:

DMC 1623

NOTES


19. Select 36 th frame for all layers and do Paste:

20. On 36 th frame on action layer, change Frame name to “link 02”

21. On 70 th frame and second layer change content for 2 nd link:

WEB GRAPHICS

NOTES


22. Repeat steps 16. – 20. for other links (link 03, link 04 or how much links youwant). For 3 links at all you should have:

23. One more time repeat steps 16. – 20. but this time set Frame name (step 19) to“stop”

24. In “stop” section delete all from 2 nd layer (layer with content for pages)

DMC 1623

NOTES


25. Drag 106 th frame from layer where is background and drop it on last frame.

26. Make motion tween on stop section.

27. On 140 th frame on action layer add this code:

stop();

if (_root.link == “link01”) {

gotoAndPlay (“link01”);

}



}

WEB GRAPHICS

NOTES




}

28. Go back to root (click on outside area to return to the main screen) Select firstlink text: “HOME”

29. Add script in actionscript window:

on (release){

_root.window.gotoAndPlay(“stop”);

link = “link01”;

}

30. Do the same for all other links just change number of link (for 2 nd link islink=”link02";)

on (release){



}

DMC 1623

NOTES


on (release){



}

31. On root on 2 nd layer add just one line in actionscript window:

32. Press Ctrl+Enter to see the resultant movie.

5.6.2 Add Sound to Your Button

This flash tutorial will teach you how to add sound to a button. This tutorial is useful ifyou want to create a mouse over sound effect which can be used in flash websites,applications and games.

Adding sound to a button

Step 1

Create a new flash document.

Import your audio file into the library by selecting file > import > import to library thenselect your audio file and click ok.

WEB GRAPHICS

NOTES


Step 2

Create your button on the stage. I made a basic rectangle shape but you can makewhatever you wish.

Using the selection tool (v) select your button. Convert it into a symbol by pressingF8 then give your symbol an appropriate name and check the “button” button then clickok.

Step 3

Double click on your sound button and your timeline should look like below:

Now select the over state and create a new key frame by selecting F6.

Step 4

With the over state selected go to the bottom of screen and choose your audio filefrom the drop down menu.

Step 5

Test your movie Ctrl + enter

5.6.3 Creating a Simple Flash Web Site – Example 2

1. Open flash click new flash document.

2. Open the movie properties dialog box as shown below by right clicking on theflash stage..

DMC 1623

NOTES


3. Change the size of the canvas to 800, 600.

4. Click on the background button and change it to #333333.

5. After you have done this click the square tool.

6. The color of the square should be white so click on the paint bucket tool andchoose the color white. The stroke should also be off. This is what it looks like.The stroke tool is right on top of the paint bucket.

7. Drag and make a square any size we would change that manually in a moment.

8. Now change the width, height (change the width to 650, the height to 470) tochange this dimensions select the Info panel from Window>Panels. You have toclick on the square and with it selected you can start making these changes.

9. With the square still selected now make it into a symbol to do this press (F8) ascreen will come up what will ask you to name it. Name it “Background Symbol”.Make sure the movie clip button is clicked.

WEB GRAPHICS

NOTES


10. Make a new layer to do this click on the insert layer button.

11. Select the new layer and click on the square tool again and make another squarewith the stroke off and the color instead of white make it black. This time withdimensions. ( width: 632, height: 450)

12. Make the new square into a symbol (movie clip) by pressing (F8) and name it‘masked symbol’.

13. After you have made it into a symbol double click into the square this will take youinside the symbol and a new time line. This is just like the time line you were in butnow you are inside of a symbol. Make a new layer just like you did it before byclicking on the insert layer button.

DMC 1623

NOTES


14. The picture on top shows what it should look like.

15. Right click on “Layer 13 and then select “Mask”.

16. When you do this both layers are going to be locked. You can find a little locknext to them. Click on the bottom lock to take it off.

17. Select “Layer 23 . Find an image you like and now we are going to place in there.The way you do this is you go File/Import/Import to stage (choose a picture ofsize 800x600). Then a search window is going to come up and you find whereyour picture is and double click and it will be placed on the stage.

WEB GRAPHICS

NOTES


18. Now lock that layer back up by clicking where the lock was. And you shouldhave something that looks like this.

19. Now go tot the main time line. if you remember we were working inside a symbolso now get out of the symbol and go to the main timeline. A simple way to do thisis to select the link “scene 1”.

20. Now let’s make some buttons. Start by making a new layer and drag it all theway down so it becomes the bottom layer.

21. Make a square with the square tool.(background color #666666, width 130,height 50)

22. Make this square into a symbol by pressing F8 and call it “buttons”.

23. Select the square and copy and paste in the same place. To do this while with thesquare selected press (Ctrl + C) this will copy it and the press (Ctrl + Shift + V)and this will copy it in the same place now with it still selected change the position(choose a position as appropriate) such that it is at the bottom and neatly aligned.

24. Follow step 24 four more times but each time with a different x positioning so thatall the buttons are aligned with equal spacing between them. It should look somethinglike this.

25. Add some text to the buttons click on the text tool. Click on top of the first buttonand write “Home”.

26. Change the text color just like if you were changing the background color on asquare. Then click on top of the second button and type “Page-1”, on the thirdbutton type “ Page-2” on the fourth type “Page-3” and on the last button type“Page-4”.

27. Make a new layer on top of the buttons layer to do this select the buttons layer(layer 4) and then click insert layer and it will put a layer on top of it.

28. Here we are going to create a hit area for the buttons so you can actually click onthem. Click on the square tool again and create a square with the color whitemake this square about the same size of the buttons (width-130, height-50).

DMC 1623

NOTES


29. Make this square into a symbol but this time instead of making it a ‘movie clip’click on the ‘button’ selection.

30. Double click inside this symbol and it will look a little different than a movie clipsymbol. It says “Up”, “Over”, “Down”, and “Hit”.

31. There is a little black dot under the text “Up” right click it and drag it to ‘hit’position and now the little black dot should be under the text that says “Hit”

32. Go back to the main timeline by clicking on “Scene 1. And the box should lookblue

33. Copy and paste it 4 times and drag each one under on button until all of them haveone.

WEB GRAPHICS

NOTES


34. Now create a layer at the very top click on the square tool and take the stroke offand the background color black have this settings (width: 306, height: 430). positionsuch that it occupies the right half of the image.

35. Now select the square and do the following go to the top menu and click onModify/Shape/Soften fill edges.

36. A new screen pops up that has the options “distance”, and “number of steps”.Type 20 for both of these and make sure expand is clicked.

37. The next step is important so pay close attention. if you look where all the layersare to the right there are a bunch of numbers what you need to do is on the number30 at the top click and drag down to select all the layers and the right click andclick insert frame.

DMC 1623

NOTES


38. Create two more layers at the very top.

39. on the very top on the time line where the number 5, press (F6) do that at frames10,15, and 20.

40. Now on the little circle on the number one frame select it double click this willbring up the action script window. Here type the following “stop ();”

41. As you can now see a little circle there is a letter “a” this means that there is actionscript on that frame. Now do the same on layer 5, 10, 15, and 20 (as shownabove).

42. Ok now press (F6) again on the layers5, 10, 15, and 20 but this time on the layerright under (layer 6)

43. We are going to do something different this time we are going to name the littlecircles instead of inserting action script. To do this click on the first frame on thecircle with nothing on it and right click to select Panels>Frame, there enter “HOME”.

44. Now name all the other little circles this should be the names (PAGE-1, PAGE-2, PAGE-3, and PAGE-4).

45. Ok now on the layer under (layer 5) what you need to do is to Press (F6) also onframes 5, 10, 15, and 20. After this you will have a little black dot on each one ofthose.

WEB GRAPHICS

NOTES


46. On the first frame where the black DOT was type whatever you want as shownbelow (here I have typed vertical text “HOME”)

47. Now type something differently on frames 5, 10, 15 and 20. I have typed herevertical text PAGE-1 at frame 5 and so on PAGE-4 at frame 20.

48. After you have typed everything you wanted on the different squares now its timeto make it all work. What you need to do is to click on the blue square on top ofthe “HOME” button, right click on it and select the actions panel and type thefollowing.

on(press){

gotoAndStop(“HOME”);

}

This will make it that when you click on that button it will go to the frame that younamed home. Follow the same steps on every blue box but where the parenthesis is insteadof HOME type in the appropriate name such as (PAGE-1, PAGE-2, PAGE-3, PAGE-4)

50. Now you have finished this simple but very nice looking flash site. Save yourwork. and to see it at work press (Ctrl + Enter) to see the swf.

DMC 1623

NOTES



1. Discuss the steps to create a website using Flash?

2. How would you add sound to a button?

5.7 CREATING SIMPLE ANIMATIONS USING HTML/DHTML/JAVASCRIPT

Example - 1

The following example cycles between the colors used for the time mentioned in milleseconds.

<html>

<head>

<SCRIPT LANGUAGE= “javascript”>

setTimeout(“document.bgColor=’white’”, 1000)

setTimeout(“document.bgColor=’lightpink’”, 1500)

setTimeout(“document.bgColor = ‘pink’”, 2000)

setTimeout(“document.bgColor = ‘deeppink’”, 2500)

setTimeout(“document.bgColor = ‘red’”, 3000)

setTimeout(“document.bgColor = ‘tomato’”, 3500)

setTimeout(“document.bgColor = ‘darkred’”, 4000)

</SCRIPT>

</head>

</html>

Example - 2

The following example is a simple animation using two images. As the mouse is movedover the image it changes to a different image (here it is the same image where the secondimage is positioned forward)

<html>

<head>

WEB GRAPHICS

NOTES


<script language = JAVASCRIPT>

if (document.images)

{

leftArrow = new Image

rightArrow = new Image

leftArrow.src = “leftArrow.gif”

rightArrow.src = “rightArrow.gif”

}

</script>

<body>

<A HREF=” “ onMouseover = “document.Arrow.src=rightArrow.src” onMouseout =“document.Arrow.src=leftArrow.src”>

<IMG BORDER=”0" SRC=”leftArrow.gif” ALT=”Next Page!” NAME=”Arrow”WIDTH=”195" HEIGHT=”45"></a>

</body>

</html>

Example - 3

The following example is a simple animation involving forward movement.

This automatically retraces its path after a certain time.

<html>

<head>

<title>Animation with Dynamic HTML</title>

<script language=”javascript”>

var position=0;

function Move() {

position += 1;

if (position > 650) position = 0;

document.getElementById(“mouse”).style.left = position;

window.setTimeout(“Move();”,10);

DMC 1623

NOTES


}

</script>

</head>

<body onLoad=”Move();”>

<H1>Animation with Dynamic HTML</H1>

<HR>

<div ID=”mouse” STYLE=”position:absolute; left:0; top:100;

width:100; height:100; visibility:show”>

<img src=”mouse.gif” width=100 height=100 alt=”” border=”0">

</div>

</body>

</html>

Example - 4: The following example is a simple animation involving forward movement atevery click of a user.

<html>

<head>

<title>JavaScript Animation</title>

<script type=”text/javascript”>

<!—

var imgObj = null;

function init(){

imgObj = document.getElementById(‘myImage’);

imgObj.style.position= ‘relative’;

imgObj.style.left = ‘0px’;

}

function moveRight(){

imgObj.style.left = parseInt(imgObj.style.left) + 10 + ‘px’;

}

WEB GRAPHICS

NOTES


window.onload =init;

//—>

</script>

</head>

<body>

<form>

<img id=”myImage” src=”/images/html.gif” />

<p>Click button below to move the image to right</p>

<input type=”button” value=”Click Me” onclick=”moveRight();” />

</form>

</body>

</html>

Example - 5

The following example is a simple rollover animation. If you roll over the image itchanges into a new image and when you roll back it changes itself to the previous image.

<html>

<head>

<title>Rollover with a Mouse Events</title>


<!—

if(document.images){

var image1 = new Image(); // Preload an image

image1.src = “one.gif”;

var image2 = new Image(); // Preload second image

image2.src = “two.gif”;

}

//—>

</script>

</head>

<body>

<p>Move your mouse over the image to see the result</p>

<a href=”#” onMouseOver=”document.myImage.src=image2.src;”

onMouseOut=”document.myImage.src=image1.src;”>

<img name=”myImage” src=”one.gif” />

DMC 1623

NOTES


</a>

</body>

</html>

Example - 6

The following example is a simple scrolling text animation. The text scrolls inside atext box as soon as the page is loaded.

<html>

<head>

<title>A DHTML Scrolling Window</title>

<script language=”JavaScript”>

var pos=100;

function Scroll() {

if (!document.getElementById) return;

obj=document.getElementById(“thetext”);

pos -=1;

if (pos < 0-obj.offsetHeight+130) return;

obj.style.top=pos;

window.setTimeout(“Scroll();”,30);

}

</script>

</head>

<body onLoad=”Scroll();”>

<h1>Scrolling Window Example</h1>

<p>This example shows a scrolling window created in DHTML. The window

is actually a layer that shows a portion of a larger layer.</p>

<div id=”thewindow” style=”position:relative;width:180;height:150;

overflow:hidden; border-width:2px; border-style:solid; border-color:red”>

<div id=”thetext” style=”position:absolute;width:170;left:5;top:100">

<p>This is the first paragraph of the scrolling message. The message

is created with ordinary HTML.</p>

<p>Entries within the scrolling area can use any HTML tags. They can

contain <a href=”http://www.starlingtech.com/dhtml/”>Links</a>.</p>

WEB GRAPHICS

NOTES


<p>There’s no limit on the number of paragraphs that you can include

here. They don’t even need to be formatted as paragraphs.</p>

<ul><li>For example, you could format items using a bulleted list.</li></ul>

<p>The scrolling ends when the last part of the scrolling text

is on the screen. You’ve reached the end.</p>

<p><b>[<a href=”javascript:pos=100;Scroll();”>Start Over</a>]</b></p>

</div>

</div>

</body>

</html>

Example - 7

The following example is a simple animation involving VCR like functions (Play, Pause,Start) controlling a Shockwave animation.

<html>

<head>

<title>Using Embeded Object</title>


<!—

function play()

{

if (!document.demo.IsPlaying()){

document.demo.Play();

}

}

function stop()

{

if (document.demo.IsPlaying()){

DMC 1623

NOTES


document.demo.StopPlay();

}

}

function rewind()

if (document.demo.IsPlaying()){

document.demo.StopPlay();

}

document.demo.Rewind();

}

//—>

</script>

</head>

<body>

<embed id=”demo” name=”demo”

src=”intro.swf”

width=”318" height=”300" play=”false” loop=”false”>

</embed>

<form name=”form” id=”form” action=”#” method=”get”>

<input type=”button” value=”Start” onclick=”play();” />

<input type=”button” value=”Stop” onclick=”stop();” />

<input type=”button” value=”Rewind” onclick=”rewind();” />

</form>

</body>

</html>


1. How to create simple animations using Scripting languages like HTML/DHTML/JavaScript?

2. How would you create animations using JavaScript? Give Examples.

WEB GRAPHICS

NOTES


Summary

1. A symbol is a graphic, button, or movie clip that you create once and then canreuse throughout your movie or in other movies. Symbols are of three types; Graphicsymbols, Button symbols, Movie clip symbols.

2. An instance is a copy of a symbol located on the Stage or nested inside anothersymbol. An instance can be very different from its symbol in color, size, and function.Editing the symbol updates all of its instances. But editing an instance of a symbolupdates only that instance.

3. By using symbols that contain animation, you can create movies with a lot ofmovement while minimizing file size.

4. To create a new symbol with selected elements, Select an element or severalelements on the Stage and choose Insert > Convert to Symbol.

5. To make a button interactive in a movie, you place an instance of the button symbolon the Stage and assign actions to the instance. A button has states, UP, DOWN,OVER, HIT.

6. The Hit frame is not visible on the Stage, but it defines the area of the button thatresponds when clicked. Make sure that the graphic for the Hit frame is a solid arealarge enough to encompass all the graphic elements of the Up, Down, and Overframes.

7. Flash uses the ActionScript scripting language to add interactivity to a movie. Similarto JavaScript, ActionScript is an object-oriented programming language.

8. In Normal Mode you can write actions using parameter (argument) fields thatprompt you for the correct arguments. In Expert Mode you can write and editactions directly in a text box, much like writing script with a text editor.

9. In Normal Mode, you create actions by selecting actions from a list on the left sideof the panel, called the Toolbox list. The Toolbox list contains Basic Actions, Actions,Operators, Functions, Properties, and Objects categories.

10. In Expert Mode, you create actions by entering ActionScript into the text box onthe right side of the panel or by selecting actions from the Toolbox list on the left.You edit actions, enter parameters for actions, or delete actions directly in the textbox, much as you would create script in a text editor.

11. You can assign an action to a button or a movie clip to make an action executewhen the user clicks a button or rolls the pointer over it, or when the movie cliploads or reaches a certain frame. You assign the action to an instance of the buttonor movie clip; other instances of the symbol aren’t affected.

12. Preloaders are simply a set of frames in the beginning of a normal movie file thatloops or plays while the reminder of the movie file is downloaded.

DMC 1623

NOTES


NOTES

WEB GRAPHICS

NOTES


NOTES

DMC 1623

NOTES


NOTES

dmc 1623 web graphics

Documents

sample html page