0% found this document useful (0 votes)
175 views

Introduction To Multimedia 3 PDF

Uploaded by

Eddi Isaza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
175 views

Introduction To Multimedia 3 PDF

Uploaded by

Eddi Isaza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 100

188 Introduction to Multimedia

29. Tweening, is the process of generating intermediate frames between two images to give the
appearance that the first image evolves smoothly into the second image.
30. The term ‘Computer Animation’ categories 2D (two dimensional) and 3D (three dimensional)
animation.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

MULTIPLE CHOICE QUESTIONS

1. Full form of PAL is:


(a) project active line (b) program alternating line (c) phase alternating line
(d) none of the above.
2. S-video uses:
(a) Two wires (b) Three wires (c) One wire
(d) None of the above
3. Which of the following is not a television signal format?
(a) SECAM (b) HDTV (c) MPEG
(d) PAL.
4. Which image file type is best for photo-realistic images?
(a) Laser (b) Bitmap (c) Vector
(d) All of the above.
5. AVI stands for:
(a) Audio Video Interface (b) Audio Visual Interface (c) Audio Video Interleave
(d) None of the above.
6. MPEG stands for:
(a) motion picture environment group.
(b) multipurpose element grid.
(c) moving picture experts group.
(d) None of the above.
7. In a video camera, CCD stands for:
(a) colour coding data (b) charge coupled device (c) carbon crystal digitizer
(d) none of the above.
8. Which format is used in digital cameras?
(a) MPEG2 (b) MPEG4 (c) MPEG1
(d) SWF.

TRUE/FALSE QUESTIONS
Copyright 2015. Laxmi Publications Pvt Ltd.

1. Four broadcast and video standards and recording formats commonly in use around the world
are: NTSC, PAL, SECAM and HDTV.
2. Although SECAM is a 625-line, 50 Hz system, it differs greatly from both the NTSC and the PAL
colour systems in its basic technology and broadcast method.
3. A digital video architecture is made up of a format for encoding and playing back video files by a
computer and includes a player that can recognize and play files created for that format.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Video and Animation 189

4. Use the Export command to bring files—for example, still images or audio you’ve downloaded—
that are already on your hard drive into your Adobe Premiere Pro project.
5. Auto-play DVDs work best for short movies, or movies that you want to play continuously in a
loop playback mode.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6. MPEG-1 is a standard for lossy compression of video and not audio.


7. B-frame stands for bidirectional-frame. They may also be known as backwards-predicted frames
or B-pictures.
8. MPEG-4 is a patented collection of methods defining compression of audio and visual (AV)
digital data.
9. Animation is the process of making an object appear to move by rapidly displaying a series of
pictures of it, each one in it is slightly in different position; a techniques used in producing
Computer-generated movies.
10. The term ‘Computer Animation’ categories only 2D (two dimensional) animation.

MATCHING COLUMNS

Match the matter in Column A with the matter in Column B.


Column A Column B
A. MPEG-4 1. The process of smoothly interpolating between
two different images
B. MPEG-1 2. phase alternating line
C. MPEG-2 3. TV broadcasting standard
D. MPEG 4. efficient method of object oriented content
based storage and retrieval of multimedia content
E. Morphing 5. designed for DVD applications
F. PAL 6. compressed format
G. NTSC 7. designed for CD-ROM based

FILL IN THE BLANKS WITH APPROPRIATE WORDS

a. .avi b. MPEG-4 c. MPEG decoder d. MPEG2


e. MPEG-1 f. optical g. bit rate h. MPEG-2
1. MPEG-1 uses fixed ____________.
2. __________ is the compression format used to create video CDs.
3. DVD is ____________ disc storage media format.
4. Viewing a MPEG video on a micro computer requires a ____________.
Copyright 2015. Laxmi Publications Pvt Ltd.

5. ___________ uses variable bit rate encoding which means that different scenes can play back at
different rates.
6. __________ is the standard movie/video format for windows.
7. __________ video compression is used to deliver high quality picture in DVD movies.
8. ________ is used for both straming and downloadable web content.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
190 Introduction to Multimedia

DESCRIPTIVE TYPE QUESTIONS

1. Describe the basics of video.


2. How does video works?
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

3. Describe the following broadcasting video standards:


NTSC PAL SECAM
HDTV Digital video Analog video
4. Describe the following video recording and tape formats:
Ampex VERA U-matic
Betamax Betacam Video 2000
Compact Video Cassette Camcoder Video 8
5. How would you capture, digitize and import the various video files?
6. How would you create DVDs?
7. What is video compression?
8. What is MPEG-1?
9. Describe the followings:
I-frames P-frames B-frames
D-frames
10. What do you know of the following:
MPEG-2 MPEG-4 MPEG-7
MPEG-21
11. What do you understand by animation? How are they created?
12. Describe the following:
Keyframes Tweening
13. What is cel animation
14. What do you understand by Computer Animation?
15. Describe Morphing.

ANSWERS TO OBJECTIVE TYPE QUESTIONS

Multiple Choice Questions


1. c 2. a 3. c 4. b
5. c 6. c 7. b 8. c
True False Questions
1. T 2. T 3. T 4. F
5. T 6. F 7. T 8. T
9. T 10. F
Copyright 2015. Laxmi Publications Pvt Ltd.

Matching Columns
A. 4 B. 7 C. 5 D. 6
E. 1 F. 2 G.. 3
Fill in the Blanks with appropriate words
1. g 2. e 3. f 4. c
5. h 6. a 7. d 8. b

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Chapter
Multimedia Authoring
6
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.1 MULTIMEDIA AUTHORING BASICS


For developing a multimedia project, you have to assemble few things. Among them the
main is software, which is authoring tool. These tools are software packages with standard
user interface elements that are used to produce contents for web publishing. They provide
an integrated environment for binding together content and functions of your project, and
typically includes everything needed to create, edit and import specific types of data,
assemble raw data into playback sequence and provide a structured method or language
for responding to the user input.

6.2 SOME AUTHORING TOOLS


Each of the software for building multimedia projects contains one or more authoring
systems, the tools for creating and editing multimedia elements and the tools for
housekeeping taks such as capturing images from the screen, translating file formats and
moving files among computers.
The basic requirements for the authoring tools are:
• Tools for creating and editing
• Modeling and Animation tools
• Image and editing tools
• Optical character recognition software
• Sound editing programs
• Animation, video and digital movies
6.2.1 Tools for Creating and Editing
Tools are very important for creating crafted bitmap images. Software like CorelDRAW
and Photoshop have such tools. Some software applications combine both drawing and
painting capabilities, but many authoring systems import only bit mapped images.
Copyright 2015. Laxmi Publications Pvt Ltd.

6.2.2 Modeling and Animation Tools


Software for these are: Auto Desk’s 3D Studio Max, Macromedia’s Extreme 3D, etc. There
are also specialized applications for creating and animating 3-D text like Fontographer,
Type-Designer, Font Manager, Making Pretty Text, Font Chameleon.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
192 Introduction to Multimedia

6.2.3 Image and Editing Tools


Image editing applications are specialized and powerful tools for enhancing the existing
bitmapped images. These applications also provide tools for painting and drawing that can
be used to create images from scratch as well as images digitized from scanners, video
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

frame grabbers, digital cameras, clip art files, or original artwork files created with a painting
or a drawing package.
6.2.4 Optical Character Recognition Software
OCR is the software which turns bit-mapped characters into electronically recognizable
ASCII text. The software breaks the bitmap image into chunks according to whether it
contain text or graphics by examining the texture and density areas of the bitmap and by
detecting edges.
6.2.5 Sound Editing Programs
Using editing software, you can make our own sound effects and install them as system
beeps that indicate an error warning or special activity. Both MAC and Windows systems
provide system sounds, which are available as soon as we install the operating system.
For digital waveform sounds, Windows ships with the Sound Recorder program that
provides some ruimentary features for sound editing; most soundboards for PC’s include
editing software such as Creative Lab’s Wave Studio.
6.2.6 Animation, Video and Digital Movies
Most authoring tools adopt either frame or object oriented approach to animation, but rarely
both. Movie-making tools such as Quick Time from MAC and Microsoft Video for Windows,
also known as Audio Video Interleaved (AVI), technology can be used to create, edit and
present digitized motion video segments in a small window.
6.2.7 Types of Authoring Tools
Authoring software provides an integrated environment for binding together the content
and the functions in the multimedia project. Authoring systems should have the ability to
create, edit, and import specific types of data, assemble raw data into playback sequence
or a cue sheet; and should provide a structured meith or language for responding to user
input. The various authoring tools are categorized into the followings:
6.2.7.1 Card or page based authoring tools
Here the multimedia elements are organized in the form of books having pages. Every
page of the book may contain many media elements including sounds, video and
Copyright 2015. Laxmi Publications Pvt Ltd.

animations. As the user or consumer proceeds with the project, the pages progress in
sequence, as determined by the user interaction.
6.2.7.2 Icon based Authoring Tools
Here the multimedia elements are organized in the form of a structure or flow chart. These
icons include menu choice, graphic images, sounds and computations. We can also edit

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 193

the structure by rearranging and fine-tuning the icons and their properties. The authoring
tools in this category are Authorware Professional, Icon Author and Quest, both from
Windows.
6.2.7.3 Time based Authoring Tools
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

These tools arrange the project in a such a way that all the elements are active using a
time line. This time line is defined by the user himself. The speed at which these transitions
occur, can also be accurately controlled. These tools take the help of a software time which
is a typical clock that starts at the beginning of the project and graduates minute after
minute.
6.2.7.4 Object Oriented Authoring Tools
Here the multimedia elements are arranged in a hierarchical order with parent and child
relationships. Objects take care of themselves, i.e., given a message they do their thing
without external procedures and programming. Object oriented tools are particularly useful
for games that contain many components with many characteristics and for simulating
real life situations, events and constituent properties.

6.3 MICROMEDIA DIRECTOR


The Director is a software used to create Movies. It is similar to Flash, about which you
read in the last chapter. The Director’s user interface is designed around a movie metaphor.
Each project you create can be thought of as a movie, with a cast of characters, a score,
a stage where the action takes place, and a director (you, the author). Each media element
that appears in your movie (sound, video, images, text, buttons, and so on) can be thought
of as a member of the movie’s cast. In Director, the Cast window is where you view the
list of media elements that appear in your movie. As with a real movie, each Director
movie has a score. However, the score of a Director movie contains more than just music.
The Score window in Director contains information about when and where each of the
cast members appears on the Stage. The Score describes the action that happens in the
movie.
The action in a Director movie takes place in a window called the Stage. To create a Director
movie, you add cast members (media elements) to the Cast window by creating them in
Director or importing them. Next, you place them on the Stage as sprites. A sprite is simply
a copy of a cast member that appears on the Stage. Then you refine the actions of the
sprites by editing them on the Stage or in the Score.
6.3.1 Score Editor
Copyright 2015. Laxmi Publications Pvt Ltd.

Like the Stage, the Score provides a view of your movie. The Stage provides a graphical
view, while the Score provides a view of the movie’s timeline. The Stage displays the point
in time that is selected within the Score. The Score organizes and controls a movie’s
content over time in rows called channels. The Score includes many Sprite channels for
the movie’s sprites. Sprite channels are numbered and control when sprites appear in the
movie. Additionally, the Score includes effects channels that control the movie’s tempo,

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
194 Introduction to Multimedia

sound, colour palettes, transitions, and scripted


behaviours.
The Score displays channels in the order shown
in the figure next. Only the Sprite channels are
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

displayed by default.
6.3.1.1 Effects and sprite channels in the Score
While the rows of the Score contain channels,
the columns of the Score contain frames. A
frame in a movie represents a single point in
time, which is similar in theory to a frame in a
celluloid film. Frame numbers are listed above
the columns in the Score.
A red vertical line, called the playhead, moves
across the frames in the Score to indicate which
point in time is currently displayed on the Stage.
You can also click any frame in the Score to
move the playhead to that frame, and you can

Score

Stage
Copyright 2015. Laxmi Publications Pvt Ltd.

Cast

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 195

move the playhead to that frame, and you can drag the playhead backward or forward
through frames.
6.3.2 Cast Editor
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

The Cast window contains the cast members of your movie. You can use the Cast window
to create or import new cast members, to view existing cast members, and to control the
properties of each cast member.
As you work in Director, you can expect to use two types of cast members:
• Cast members can be the media elements of your movie, such as sounds, text,
graphics, animation, and video. These cast members are placed on the Stage as
sprites.
• Some cast members may
appear in the Score but not on
the Stage. These cast members
include scripts, palettes, fonts,
and transitions, which you can
use in the effects channels on
the Score.
In the Cast window, you can create or
import new cast members to appear
as sprites on the Stage. Creating a
Director movie consists largely of
defining sprites’ properties, where they
a p p e a r, w h e n t h e y a p p e a r i n t h e
movie, and how they behave. Different
sprites can be created from a single
cast member. Each sprite can have its
own values for different properties, and most changes to these properties do not affect
the cast member. Most changes to a cast member, however, will change the sprites created
from that cast member. A typical cast window is shown here.
6.3.2.1 The Cast window filled with cast members
To create a new cast member:
1. If the Cast window is not already displayed, select Window > Cast.
2. On the Tool palette, select a text, drawing, or control button.
Copyright 2015. Laxmi Publications Pvt Ltd.

3. Click the Stage to place the new cast member.


4. The cast member now appears in the Cast window.
To import a cast member from an existing media file:
1. If the Cast window is not already in thumbnail view, click the Cast View Style button.
2. In thumbnail view in the Cast window, right-click an empty cast member, and select
Import.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
196 Introduction to Multimedia

3. Navigate to a media file, select the file, and click the Import button.
4. The cast member now appears in the Cast window.
6.3.3 Toolbars
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

One of the more useful Director tools is the toolbar, which presents icon shortcuts to
common functions and operations. The following table gives a quick summary of the icon
shortcuts in the Director toolbar, as they appear from left to right.
Table of Director Toolbar

Icon Tool Function

New Movie Opens a new movie

New Cast Opens a new cast library

Open Opens an existing movie or cast library

Import Imports media

Save Saves the movie or cast library

Save All Saves the movie and all the Cast windows

Publish Saves the current movie as a Shockwave Movie and


creates the HTML page

Undo Undoes the last action

Cut Cuts the selected object and places it on the Clipboard

Copy Copies the selected object and places it on the Clipboard


Copyright 2015. Laxmi Publications Pvt Ltd.

Paste Pastes the object on the Clipboard into the selected space

Find Cast Member Lets you locate a specific cast member quickly

Exchange Cast Swaps the cast member on the Stage for the selected
Members one.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 197

Rewind Moves to the first frame of the movie

Stop Stops the movie if it is currently playing


All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Play Plays the movie if it is currently stopped

Stage Opens the Stage

Cast Window Opens the Cast window

Score Window Opens the Score window

Property inspector Opens the Property inspector window

Library palette Opens the Library palette

Paint Window Opens the Paint window

Vector Shape Opens the vector shape window

Text window Opens the text window

Shockwave 3D Opens the Shockwave 3D window

Behaviour inspector Opens the Behaviour inspector

Script window Opens the currently selected script, or opens a new script
if one is not selected

Message window Opens the Message window


Copyright 2015. Laxmi Publications Pvt Ltd.

6.3.4 Library Palette


A library palette is a palette which contains Director’s built-in behaviours. A Library palette
can also store custom cast libraries. You can add anything to the Library palette that can
be contained in Cast window. This can be very useful for any commonly used artwork, as
well as for behaviours that you do not want to be edited accidentally.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
198 Introduction to Multimedia

To add your own elements to the Library palette, create a new, unlinked
Cast window that contains behaviours and graphics, save it, and then
drag the Cast file into the folder called LIBS, which is found in the
Director application folder.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.3.5 Inspector
You use inspectors to view and modify the attributes of text cast
members, sprites, and behaviours (scripts). There are four types of
inspectors in Director, each performs a specific task:
6.3.5.1 Property Inspector
Use the Property inspector to display the current properties of any
selected element, including the Stage, as well as the active movie. You
can adjust any available properties of nearly every element in your
movie by using this window.
6.3.5.2 Behaviour Inspector
Use the Behaviour inspector to create new behaviours (scripts) and
modify existing ones.
6.3.5.3 Text Inspector
Use the Test Inspector to format text and add hypertext links.
6.3.5.4 Memory Inspector
The Memory Inspector displays the amount of memory (RAM) that is being used by the
Director application and the element contained in the movie.
6.3.6 Menu Bar
Director uses a fairly complicated set of menus, submenus, and related dialog boxes, in
an arrangement that is consistent with Macromedia’s user-interface guidelines across the
product line. The idea, of course, is that someone familiar with other Macromedia products,
like Flash, can adapt to Director fairly quickly.
Menu name Functions handled
File Opening, saving and printing of files. Creating projectors (run-time
versions of your movies), Shockwave movies and Java applets, Setting
preferences, previewing in a browser, and terminating the program.
Edit Clipboard operations (cut, copy, paste) and various kinds of selection.
Copyright 2015. Laxmi Publications Pvt Ltd.

Searching and replacing text. Launching external resource editors.


View Offers various ways of looking at the Score (the window that controls
where animation sprites are placed). Also controls onion-skinning in the
Paint window.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 199

Insert Insertion and deletion of keyframes and animation frames into the Score.
Serves as an alternate way of inserting media cast members into the
Cast window (the library of resources that Director uses).
Modify Changing properties for the movie, individual cast members (resources),
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

sprites, and the Score. Also provides a means of editing text in a text
field, modifying scripts (interpreted code that is attached to sprites or
other interface elements and that executes when designated events
occur), rearranging the order of cast members on the Stage, and
converting cast members to different bit depths.
Control Playback of Director, moving from frame to frame, setting volume,
handling sprite recording, debugging features, and recompiling scripts.
Xtras Gives information and access to Xtras (Director plug-ins) and graphic
filter Xtras. Protecting and updating older versions of Director movies,
and importing PowerPoint files.
Window Calls up any control windows used in Director, such as the Score, the
Cast window, the Bitmap editor, the Library palette, Text Inspectors, and
others.
Help Accesses Director Help, which provides a detailed help and indexing
system for all sorts of Director and scripting problems. Also calls up Help
tutorials. Accesses registration information and links to Macromedia’s
Web site.
6.3.7 Cast Libraries
Represents a single cast library within a movie. A movie can consist of one or more cast
libraries. A cast library can consist of one or more cast members, which represent media
in a movie, such as sounds, text, graphics, and other movies.
You can link cast libraries to a movie by choosing Modify, Movie and then Casts. Having a
linked file of any sort means that
the information about that file is
kept in a separate file rather
than within the Director movie
itself. For example, if you linked
a bitmap image, every time
Director started up it would load
that image from the disk, rather
Copyright 2015. Laxmi Publications Pvt Ltd.

than from its own internal


resources. This approach has
the advantage of making it
easier to work with dynamic
files, or pictures that change on

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
200 Introduction to Multimedia

a regular basis. The disadvantage comes from the location of the file; the picture (or other
resource) is not already contained in the movie, so it has to be processed into a Director
cast member. Depending on the size and type of the image, this process can involve an
appreciable wait.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.3.8 Painting Techniques


Director uses its graphics editor, the Paint window, for most of its painting requirements.
Creating successive frames of an animation is relatively easy to do with the Paint window
and it offers several unique tools, such as onion skinning and registration points, to help
you.
You can open the Paint window at any time within Director by choosing Window, Paint. If
no cast member was selected, then the Paint window automatically creates a fresh canvas
on which to paint. If you dis-select a cast member before opening the Paint window, it will
open with that cast member at the ready. Unless your images use an external editor, you
can also double-click a bitmap cast member to open it up in the Paint window.
The various brushes and other tools used in the Paint window are likely to be familiar to
anyone who has used another paint program. They are represented by the double vertical
column of buttons in the Tools palette located on the left side of the Paint window.
The following table shows all the Paint Window Tools.

Icon Tool name Paint Operations

Lasso Free-form selection tool. Used to select irregularly shaped


areas. Also can be set to Shrink in order to exclude
background colours.

Marquee Rectangular selection tool. This is the required selection


mode for most special effects. Can be set to Shrink, in
order to exclude background colours.

Registration Point Determines the registration point of the graphic when


drawn on the Stage. Double-click this button to set the
registration point to the center of the graphic.

Eraser Paints the graphic with the selected background colour.


Double clicking the button erases the whole screen.
Copyright 2015. Laxmi Publications Pvt Ltd.

Hand Used to move the graphic around. Especially useful with


the Magnifying Glass tool.

Magnifying Glass Doubles the current magnification of the image, up to eight

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 201

times. If the shift key is held down, clicking the image while
this tool is active zooms back out, in increments of 50
percent, to the original size of the image.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Eyedropper Sets the foreground colour to the colour under the


Eyedropper’s tip.

Paint Bucket Fills all contignous pixels of the same colour and pattern
with the foreground colour and pattern.

Text Places text into the graphic. This text can only be edited
while the insertion point is active; after that, it becomes
part of the graphic.

Pencil Draws a line 1 pixel wide. If any colour but the foreground
colour is selected, the line is drawn in the foreground
colour; otherwise, the background colour is used.

Air Brush Creates a random pattern of dots of varying sizes. Can


be used for texturing effects, but does not work as well
as airbrushes in other programs.
Paint Brush Paints the graphic with the foreground colour, using the
selected ink. By clicking and holding down the mouse
button, you can select an alternate brush.

Arc Draws an arc, using the currently selected line width to


draw the curve. Click and drag to establish the starting
tangent, and then drag to the end point.

Line Draws a line. Click to establish the line, and then drag to
pull it to its full length. Constrain the line horizontally,
vertically, or to a 45-degree angle by pressing the Shift key
while drawing the line.

Filled Rectangle Paints a filled rectangle, using the current foreground


colour and pattern. If a non-zero line width is selected, the
rectangle will have a border of that width.
Copyright 2015. Laxmi Publications Pvt Ltd.

Rectangle Paints a hollow rectangle, using the current foreground


colour and line width.

Filled Ellipse Paints a filled oval, using the current foreground colour. If
a non-zero line width is selected, the oval will have a border
of that width.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
202 Introduction to Multimedia

Ellipse Paints a hollow oval, using the current foreground colour


and line width.

Filled polygon Paints a filled polygon, using the current foreground colour,
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

pattern, and line-width. Click once at each vertex of the


polygon, and then double-click to complete the shape.

Polygon Paints a hollow polygon, using the current foreground


colour and line width. Click at each vertex of the polygon,
and then double click to complete the shape.

Foreground/ Allows selection of the foreground and background colours.


The foreground is the top-left colour chip; the background
is the bottom-right colour chip. Clicking either colour chip
opens the Colour palette of colour choices.

Gradient Colours Sets the start and destination colours of a gradient.

Pattern Selects the pattern fill to be used with the Tool palette’s
filled shapes. Foreground and background colours of the
pattern are selected in the Foreground/ Background
Colour Selector.

Line Weight Selector Selects the line weight to be used by the Tool palette’s
various drawing tools. Choose from No Line, One Pixel
Line, Two Pixel Line and Three Pixel Line.

6.3.9 Importing Images


Importing lets you create cast members from external media. You can either import data
into a Director movie file or create a link to the external file and re-import the file each
time the movie opens. Linked files let you display dynamic media from the Internet, such
as sports scores, sounds, and weather pictures, which makes downloading movies faster.
Director can import cast members from almost every popular media file format.
Copyright 2015. Laxmi Publications Pvt Ltd.

You can import files by using the Import dialog box, dragging files from the desktop to a
Cast window, or by using Lingo or JavaScript syntax.
6.3.9.1 To import cast members and specify import options
1. In Thumbnail view, select an empty position in a cast.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 203

If no cast position is selected, Director places the new cast member in the first
available position in the current cast in Thumbnail view. In List view, Director places
the new cast member at the end of the list.
2. Select File > Import.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

3. To import a file from the Internet, click Internet and enter a URL in the Find URL text
box.
4. To import local files, select the type of media to import from the Files of Type
(Windows) or the Show (Macintosh) pop-up menu.
All the files in the current directory appear unless you make a selection.
5. To select a file or files to import, do one of the following:
• Double-click a file.
• Select one or more files, and click Add.
• Click Add All.
You can switch folders and import files from different folders at the same time.
6. From the Media pop-up menu at the bottom of the dialog box, select an option to
specify how to treat imported media:
Standard Import imports all selected files, storing them inside the movie file but not
updating them when changes are made to the source material. If you select the
option to import from the Internet in step 3, Director retrieves the file immediately
from the Internet if a connection is available.
All digital video files like DVD, Windows Media, QuickTime, RealMedia, and so on,
are linked automatically to the original external file (see the next option, Link to External
File), even if you select Standard Import.
Link to External File creates a link to the selected files and imports the data each
time the movie runs. If you choose to import from a URL via the Internet, the media
is dynamically updated. For more information, see About linking to files.
Text and RTF files are always imported and stored inside the movie file (see the
previous option, Standard Import), even if you select Link to External File.
Include Original Data for Editing preserves the original data in the movie file for use
with an external editor.
Copyright 2015. Laxmi Publications Pvt Ltd.

When this option is selected, Director keeps a copy of the original cast member
data and sends the original to the external editor when you edit the cast member.
This option preserves all the editor’s capabilities. For example, if you specify
Photoshop to edit PICT images, Director maintains all the Photoshop object data.
• Import PICT File as PICT prevents PICT files from being converted to bitmaps.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
204 Introduction to Multimedia

7. When you finish selecting the files, click Import.


If you’ve imported a bitmap with a colour depth or colour palette that differs from
the current movie, the Image Options dialog box appears, so you can enter additional
information.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.3.9.2 To import files by dragging:


1. In the Explorer (Windows) or on the system desktop (Macintosh), select a file or
files to import.
2. Drag the files from the desktop to the desired position in the Cast window Thumbnail
view or to the Cast window List view.
If you drag the files to List view, the imported files are added at the bottom of the
list.
6.3.9.3 To import files with Lingo or JavaScript syntax:
• Use the ImportFileInto method to import a file. Set the file Name cast member
property to assign a new file to a linked cast member. For more information about
this property, see the Scripting Reference topics in the Director Help Panel.
6.3.10 Working with Stage
The Stage is the part of a movie that your users will see. You use the Stage to determine
where media elements, or cast members, should appear onscreen. When you determine
where you want the cast member to appear, you place a copy of that cast member, called
a sprite, on the Stage.
During authoring, you can define the properties of the Stage, such as its size and colour.
For example, as you work on your movie, you can make the Stage either larger or smaller
than its original size. You can also scale the coordinates for the sprites on the Stage, so
that they continue to fill the entire screen. Guides, grids, and Align and Tweak windows
are available to align sprites on the Stage.
6.3.10.1 Placing Flash content on the Stage
Lingo or JavaScript syntax can set whether Flash content appears at the front of the Stage
and whether specific areas of Flash content and the Stage overlap.
• To determine whether Flash content plays in front of all other layers on the Stage
and whether ink effects work, set the directToStage property.
• To determine which Stage coordinate coincides with a specified coordinate in Flash
Copyright 2015. Laxmi Publications Pvt Ltd.

content, use the flashToStage method.


• To determine which Flash content coordinate coincides with a specified coordinate
on the Director Stage, use the stageToFlash method.
• To improve performance for a Director movie that uses static (not animated) Flash
content, set the static property.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 205

• To control whether the Flash content graphics are visible, set the imageEnabled
property.
• To control whether the Flash content plays sounds, set the sound property.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

• To control whether Director uses anti-aliasing to render Flash content, set the quality
property.
6.3.11 Sprites and Score
A sprite is an object that controls when, where, and how cast members appear in a
Macromedia Director MX 2004 movie. Multiple sprites can use the same cast member.
You can also switch cast members assigned to a sprite as the movie plays. You use the
Stage to control where a sprite appears, and you use the Score to control when it appears
in your movie.
Sprites appear on the Stage layered according to the channel in which they are assigned
in the Score. Sprites in higher-numbered channels appear in front of sprites in lower-
numbered channels. A movie can include as many as 1000 sprite channels. Use the Movie
tab of the Property inspector to control the number of channels.
Sprite properties include the sprite’s size and location, the cast member assigned to the
sprite, the sprite’s name, and the frames in which the sprite occurs. Different properties
can alter the appearance of a sprite. You can rotate, skew, flip, and change the colour of
sprites without affecting cast members. You can change sprite properties with the Property
inspector or Lingo or JavaScript syntax.
You can also give each sprite a unique name. You can assign a name by using the Property
inspector, and then view the sprite by name in the Score and on the Stage. Assigning a
name lets you refer to the sprite by that name in Lingo or JavaScript syntax and not just
by the channel number that it occupies. You can move a sprite to a different channel and
not worry about changing scripts. Editing scores and code scripts is much easier when
you refer to a sprite by its name.
In Lingo or JavaScript syntax, some properties are available only for certain types of sprites.
Such properties typically are characteristics that are related to the specific sprite type.
For example, Lingo or JavaScript syntax has several digital video properties that determine
the contents of tracks in digital video sprites.
6.3.11.1 Changing when a sprite appears on the Stage
A sprite controls where and when media appears on the Stage. You can change when a
sprite appears on the Stage by moving the sprite to different frames in the Score and by
Copyright 2015. Laxmi Publications Pvt Ltd.

changing the number of frames the sprite spans. You can either drag sprites to new frames
or copy and paste them. Copying and pasting is easier when moving sprites more than
one screen width in the Score. You can also copy and paste to move sprites from one
movie to another.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
206 Introduction to Multimedia

When you copy a sprite from one movie to another, save the source movie first.
6.3.11.2 Moving a sprite in the Score
To change when a sprite appears on the Stage:
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

1. Select Window > Score to display the Score.


2. Select a sprite or sprites.
3. Drag the sprite to a different frame.
To move a sprite without spreading it over additional
f r a m e s , h o l d d o w n t h e Spa c e b a r a n d d r a g . T h i s
technique is also useful for moving any sprite that
consists mostly (or entirely) of keyframes.
To copy or move sprites between frames:
1. Select a sprite or sprites.
2. Select Edit > Cut Sprites or Edit > Copy Sprites.
3. Position the pointer where you want to paste the sprite, and select Edit > Paste
Sprites.
If the pasting will overwrite existing sprites, select one of the following Paste options
in the Paste Options dialog box:
Overwrite Existing Sprites replaces the sprites with the content of the Clipboard.
Truncate Sprites Being Pasted pastes the Clipboard contents in the space
available without replacing existing sprites.
Insert Blank Frames to Make Room adds new frames for the contents of the
Clipboard.
6.3.12 Using Text
You have several options
f o r c r e a t i n g Te x t c a s t
members. Each method
of adding text to your
movie has advantages
that recommend it for a
specific application. You
Copyright 2015. Laxmi Publications Pvt Ltd.

can:
1. Add text directly to
the Stage.
2. Enter text in the
Text window.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 207

3. Import text created in other applications.


The Text tool in Director’s Tool palette enables you to add text directly on the Stage, in the
location you choose. The Text-tool method of creating text is ideal when you need small
amounts of text, such as a title that is precisely positioned on the Stage. When you create
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

text using this method, you must edit the text attributes by using the Text inspector.
When you need larger blocks of text, importing the text or using the Text window is a better
choice. The Text window, like most word processors, enables you to format text as you
create it, including applying size, style, and alignment attributes to the text. Text created in
the Text window can be edited any time to change the attributes, the formatting, or the
text itself. You can edit text either on the Stage or in the Text editing window.
6.3.12.1 Using Text Window
The Text window enables you to create and format blocks of text. It contains features for
formatting text as well as for applying text attributes. Although not suitable for large,
multipage documents such as books, the Text window works well for creating blocks of
text to use in your movies. You might require a couple of paragraphs, for example, to
describe your product or services. You can edit a Text cast member at any time during
the development of your movie, even while it is running. In addition to the format of the
text itself, you can specify text properties that tell Director how you want to display your
text. Creating a Text cast member in the Text window is a simple matter of opening the
Text window and entering the text you want to use.
6.3.13 Using Sound
Sounds can take a movie from the mundane to the spectacular. They can inform, guide,
and stimulate the interest of the user. Understanding the basics of Director’s use of sound
provides the foundation you need for using sounds creatively and efficiently in your movies.
Two key issues should be behind every audio decision you make when working with
Director and sounds:
• The needs of your audience: A sound should enhance the movie while balancing
the needs and resources of the user.
• File size: Sound files can be huge, requiring significant resources to store and play
them. Therefore, the idea is to choose and edit sounds carefully, to balance creativity
and file size.
6.3.13.1 Importing internal and linked sounds
Copyright 2015. Laxmi Publications Pvt Ltd.

Director handles sounds as either internal or linked. You can determine whether a sound
is internal or linked when you import it. Each type of sound has advantages for different
situations.
Director stores all the sound data for an internal sound cast member in a movie or cast
file and loads the sound completely into RAM before playing it. After an internal sound is

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
208 Introduction to Multimedia

loaded, it plays very quickly. This makes internal sound best for short sounds, such as
beeps or clicks, that recur frequently in your movie. For the same reason, making a large
sound file an internal sound is not a good choice because the sound might use too much
memory.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Director does not store sound data in a linked sound cast member. Instead, it keeps a
reference to a sound file’s location and imports the sound data each time the sound begins
playing. Because the sound is never entirely loaded into RAM, the movie uses memory
more efficiently.
Also, Director streams many sounds, which means it begins playing the sound while the
rest of the sound continues to load from its source, whether on disk or over the Internet.
This can dramatically improve the downloading performance of large sounds. Linked
sounds are best for longer sounds such as voice-overs or non-repeating music.
Director can stream the following sounds:
• QuickTime, Shockwave Audio, and MP3 sounds that are linked from a URL.
• QuickTime, Shockwave Audio, MP3, AIFF, and WAV sounds that are linked to a local
file.
Director imports AIFF and WAV sounds (both compressed and uncompressed), AU,
Shockwave Audio, and MP3. For best results, use sounds that have 8- or 16-bit depth
and a sampling rate of 44.1, 22.050, or 11.025 kHz.
6.3.13.2 To import a sound
1. Select File > Import.
2. Select sound files to import.
3. To determine whether the imported sounds are internal or linked, select a Media
option:
Standard Import makes all the selected sounds internal sound cast members.
Link to External File makes all the selected sounds linked.
Include Original Data for Editing lets you edit original sound files in Director.
4. Click Import dialog box.
6.3.14 Using Digital Video
Digital video is simply the result of capturing, storing, transmitting, and displaying a rapid
Copyright 2015. Laxmi Publications Pvt Ltd.

succession of digitized images on a computer. The why of digital video is perhaps as


important as the what. Digital video provides a superior means of transmitting images and
sounds of real-world events and animations in your Director movies. The result, of course,
is that the impact of your movies on your audience increases.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 209

Director uses several video formats, AVI (Video for Windows), Windows Media, DVD
content, RealMedia, and QuickTime. AVI and Windows Media movies can be imported into
Director only from the Windows platform.
6.3.14.1 Playing digital video direct-to-Stage
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Director can play digital video using a feature called direct-to-Stage. Direct-to-stage lets
video drivers installed on the computer completely control the video playback.
The direct-to-Stage feature cannot be used with DVD or RealMedia digital video because
DVD is always direct-to-stage and RealMedia is always non-direct-to-stage.
Direct-to-stage often provides the best performance from a digital video, but it has two
disadvantages:
• The digital video always appears in front of all other sprites on the Stage, no matter
which channel contains the sprite.
• Ink effects do not work, so it is difficult to conceal the video’s bounding rectangle
with Background Transparent ink.
When direct-to-Stage is off, Director layers a digital video on the Stage exactly the same
as other sprites, and Background Transparent ink works normally. (Matte ink does not work
for digital video sprites.)
6.3.14.2 To set direct-to-Stage options
1. Select a digital video cast member or sprite.
2. Click the QuickTime or Windows Media tab in the Property inspector.
3. Select or deselect Direct-to-Stage (DTS).
4. If the cast member or sprite is a QuickTime video, select one of the following Playback
options:
Sync to Soundtrack makes the digital video skip frames (if necessary) to keep up
with its soundtrack. The digital video might also take less time to play.
Play Every Frame makes every frame of the digital video appear but does not play
the soundtrack because the video cannot play the soundtrack asynchronously while
the video portion plays frame by frame. Depending on the data rate of the digital
video, the sprite might play more smoothly with this option selected, but this is not
a certainty. In addition, playing every frame might cause the digital video to take more
time to play.
Copyright 2015. Laxmi Publications Pvt Ltd.

5. If the sprite or cast member is a QuickTime video, select Controls to display a


controller bar below the movie to let the user to start, stop, and step through the
movie.
6.3.15 Creating Behaviour
Without any scripting or programming experience, you can use the Behaviour inspector

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
210 Introduction to Multimedia

to create and modify Behaviours to perform basic actions. To create Behaviours with more
complex structures, you must understand scripting in Lingo or JavaScript syntax. Using
the Behaviour inspector is a good way to learn Lingo or JavaScript syntax. You can examine
the scripts created by the Behaviour inspector to see how basic functions are assembled.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

To view the associated script, select any Behaviour and click the Script button.
Most Behaviours detect an event and then perform one or more actions in response. The
Behaviour inspector lists the most common events and actions used in Behaviours. For
experienced programmers, the Behaviour inspector also provides a shortcut for writing
simple scripts.
To always edit Behaviours in the Script window instead of the Behaviour inspector, select
Edit > Preferences > Editors. In the Editors Preferences dialog box, select Behaviours
from the list and then click Edit. In the Select Editor box, select Script Window. (If you are
using a Macintosh OS X operating system, select the Director menu, instead of the Edit
menu, to access Preferences.)
To create or modify a Behaviour:
Do one of the following:
• To create a new Behaviour, click the Behaviours pop-up menu, select New
Behaviour, and enter a name for the new Behaviour.
The Behaviour appears in the currently selected Cast window in the first empty
position. Select an empty cast position first if you want the Behaviour to appear in
a different place.
• To modify a Behaviour, select it in the Behaviour inspector.
Click the arrow in the lower left of the Behaviour inspector to expand the editing
pane.
The editing pane shows the events and actions in the current Behaviour. If you are creating
a new Behaviour, no events or actions appear.
• To add a new event or action group to the Behaviour, select an event from the Events
pop-up menu and then select actions for the event from the Actions pop-up menu.
You can choose as many actions as you need for a single event.
• To change an existing event or action group, select an event from the list and then
add or remove actions in the Actions list.
Copyright 2015. Laxmi Publications Pvt Ltd.

• To delete an event or action group, select the event and press Delete.
• To change the sequence of actions in an event or action group, select an event from
the Events list, select an action from the Actions list, and then click the up and down
arrows above the Actions list to change the order of actions.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 211

• To lock the current selection so that nothing changes in the Behaviour inspector
when new sprites are selected, click the Lock Selection button in the lower left of
the expanded Behaviour inspector.
If you are familiar with Lingo or JavaScript syntax, you can also edit a Behaviour’s script
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

directly.
6.3.16 Using Behaviour Inspector
The Behaviour Inspector provides a means for you to view and edit existing predefined
Behaviours and to create new ones in a cast. You cannot modify or delete Behaviours in
the Library palette, but you can view, edit, delete, or create a Behaviour in the Cast window.
The Behaviour Inspector, provides easy access to information about the Behaviour, including
Behaviour’s name, type, script, description, the names and values of any parameters
(properties) associated with the Behaviour, and the span of frames to which the Behaviour
is applied. You can open the Behaviour Inspector by choosing Window, Behaviour Inspector.
The Behaviour Inspector is built on a series of panes that can be collapsed or expaned
as needed. In its default state, these panes are hidden. You click the two triangles on the
left side of the Inspector to expand or collapse the panes.
6.3.17 Basics of Lingo
Both Lingo and JavaScript syntax use some terms that are specific to each language, in
addition to some terms that are shared between each language.
Important scripting terms are listed here in alphabetical order. These terms are used
throughout the Director Scripting Reference, so it will help to understand these terms before
moving forward.
• Constants are elements whose values do not change. For example, in Lingo,
constants such as TAB, EMPTY, and RETURN always have the same values, and
cannot be modified. In JavaScript syntax, constants such as Math.PI and
Number.MAX_VALUE always have the same values, and cannot be modified. You
can also create your own custom constants in JavaScript syntax by using the
keyword const.
• Events are actions that occur while a movie is playing. Events occur when a movie
stops, a sprite starts, the playhead enters a frame, the user types at the keyboard,
and so on. All events in Director are predefined, and always have the same meaning.
• Expressions are any part of a statement that produces a value. For example, 2 + 2
Copyright 2015. Laxmi Publications Pvt Ltd.

is an expression.
• Functions refer to either top-level functions or specific types of JavaScript syntax
code.
A top-level function instructs a movie to do something while the movie is playing or
returns a value, but it is not called from any specific object. For example, you would

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
212 Introduction to Multimedia

call the top-level list() function by using the syntax list(). Like a function, a method
also instructs a movie to do something while the movie is playing or returns a value,
but it is always called from an object.
A function is used in JavaScript syntax to represent an event handler, a custom
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

object, a custom method, and so on. The use of JavaScript functions in these cases
is described in the applicable topics later in this reference.
• Handlers, or event handlers, are sets of statements within a script that run in
response to a specific event and subsequent message. When an event occurs,
Director generates and sends a corresponding message to scripts, and a
corresponding handler runs in response to the message. The names of handlers
are always the same as the events and messages they respond to.
Although in JavaScript syntax an event is actually handled by a function, the term
handler is used generically throughout this reference to refer to both Lingo handlers
and JavaScript syntax functions that handle events.
• Keywords are reserved words that have a special meaning. For example, in Lingo,
the keyword end indicates the end of a handler. In JavaScript syntax, the keyword
var indicates that the term following it is a variable.
• Lists (Lingo) or Arrays (JavaScript syntax) are ordered sets of values used to track
and update an array of data, such as a series of names or the values assigned to
a set of variables. A simple example is a list of numbers such as [1, 4, 2].
• Messages are notices that Director sends to scripts when specific events occur in
a movie. For example, when the playhead enters a specific frame, the enterFrame
event occurs and Director sends an enterFrame message. If a script contains an
enterFrame handler, the statements within that handler will run, because the handler
received the enterFrame message. If no scripts contain a handler for a message,
the message is ignored in script.
• Methods are terms that either instruct a movie to do something while the movie is
playing or return a value, and are called from an object. For example, you would
call the insertFrame() method from the Movie object, using the syntax
_movie.insertFrame(). Although similar in functionality to top-level functions, methods
are always called from an object, and top-level functions are not.
• Operators are terms that calculate a new value from one or more values. For
example, the addition (+) operator adds two or more values together to produce a
new value.
Copyright 2015. Laxmi Publications Pvt Ltd.

• Parameters are placeholders that let you pass values to scripts. Parameters only
apply to methods and event handlers, and not to properties. They are required by
some methods and optional for others.
For example, the Movie object’s go() method sends the playhead to specific frame,

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 213

and optionally specifies the name of the movie that frame is in. To perform this task,
the go() method requires at least one parameter, and allows for a second parameter.
The first required parameter specifies what frame to send the playhead to, and the
second optional parameter specifies what movie the frame is in. Because the first
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

parameter is required, a script error will result if it is not present when the go()
method is called. Because the second parameter is optional, the method will perform
its task even if the parameter is not present.
• Properties are attributes that define an object. For example, a sprite in a movie has
specific attributes, such as how wide it is, how tall it is, its background colour, and
so on. To access the values of these three specific attributes, you would use the
Sprite object’s width, height, and backColour properties.
• Statements are valid instructions that Director can execute. All scripts are made up
of sets of statements. The following Lingo is a single complete statement.
_movie.go(“Author”)
• Variables are elements used to store and update values. Variables must start with
a letter, an underscore (_), or the dollar sign ($). Subsequent characters in a variable
name can also be digits (0-9). To assign values to variables or change the values
of many properties, you use the equal (=) operator.

6.4 FLASH
Flash is the most popular program for creating animations not only for Windows based
programs but for Internet. Lots of web sites are using Flash tools to create animations to
enhance the looks of the site. It is a vector graphics file format (extension .swf) developed
by Macromedia to enable designers to add animation and interactivity to multimedia Web
pages. Flash files can be played back with a downloadable Shockwave plug-in or a Java
program. The file format has been released by Macromedia as an open standard for the
Internet.
6.4.1 Starting Flash CS3
Since Flash CS3 is a windows based program, it can be started by using the Start button
and then clicking at the Programs and Adobe Design Premium CS3 submenu. This leads
to the submenu of Adobe Design Premium CS3. From here you click at Adobe Flash CS3
Professional to start the program.
Once the software starts, it gives rise to an opening screen which is shown next. It asks
Copyright 2015. Laxmi Publications Pvt Ltd.

you what step you want to perform. Click at that to start. Clicking at New Document will
give rise to a blank page, which is shown on next to next page.
Primarly there is Timeline window. The items on this window can be described as next.
Title bar: This bar has the title.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
214 Introduction to Multimedia
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 215
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Active Layer Toggle: To make a layer active, either click the layerbar, or select a frame
or group of frames.
Show/Hide Layer Toggle: Click the dot beneath the eyeball icon to hide the contents of
this layer from view on the stage. When the layer is hidden, a red X appears over the dot.
To return the layer to visibility, click the X.
Lock/Unlock Layer Toggle: This toggle locks or unlocks the layer to either prevent or
enable further editing.
Layer Colour Toggle: This toggles the coloured layer outlines on or off. When on, the
dot changes into a small square outline of the same colour as the outlines for the layer.
Playhead or Current Frame Indicator: The Playhead indicates the current Frame. Drag
it along the Timeline to move from one area of the Timeline to another.
Timeline Header: The Timeline Header is the ruler that measures the time of the timeline:
each tick is one frame.
Frame View Options Button: This button accesses the Frame View Options opp-up
Copyright 2015. Laxmi Publications Pvt Ltd.

menu that affords many options for the manner in which both the Timeline Header and
the Frames are displayed.
Insert Layer: This is used to insert a new layer above the currently active layer.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
216 Introduction to Multimedia

Action Layer Toggle


Title Bar
Show/hide
Layer Toggle
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Lock/Unlock Layer Toggle


Timeline Header
Layer Colour Toggle

Frame Rate
Elapsed Time

Delete Current Frame


Modify Onion Markers
New Folder Edit Multiple Frames

New Layer Onion Skin Outlines


Onion Skin
Create Frame
Add Motion Guide: Motion guide layers let you draw paths along which tweened
instances, groups, or text blocks can be animated. You can link multiple layers to a motion
guide layer to have multiple objects follow the same path. A normal layer that is linked to
a motion guide layer becomes a guided layer.
Insert Layer Folder: Adds a new folder in the layers.
Delete Layer: This button deletes the currently active layer.
Centre Frame: It is used to shift the Timeline so that the current frame is centered in
the visible area of the Timeline.
Onion Skin: This feature enables you to see several frames of animation simultaneously.
Copyright 2015. Laxmi Publications Pvt Ltd.

Onion Skin Outlines: This enables you to see only the outlines of several frames of
animation simultaneously.
Edit Multiple Frames: Click this button to make each frame between the Onion skin
Markers editable.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 217

Modify Onion Markers: Click the button to evoke the Modify Onion Markers pop-up. In
addition to manual adjustments, these options are used to control the behaviour and range
of Onion Skinning.
Current Frame: This indicates the number of the current Frame. It is very useful when
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

working with small Frame sizes, which can be specified from the Frame View Options.
Frame Rate Indicator: This displays the Frame Rate of the Movie as it plays.
Elapsed Time: This indicates the total movie time, measured in seconds, that would
elapse from frame 1 to the current frame—provided that the movie is played back at the
specified frames per second.
Before we going any further and see what is there on the screen of Flash CS3, let us first
understand what is there under the various menu bars, starting with File menu.
6.4.2 File Menu
Various options of the menu are:
New: This command generates a new document.
Open: Use this command to open an existing Flash compatible file
from the Open dialog box which it opens. The various files which can
be opened are: .fla (flash movie), .spa (futuresplash movie), .ssk
(smart sketch drawing), and .swf (flash player movie).
Browse: This command allows you to browse through the various
files and then select the one you want to open.
Open from Site: This command allows you to select file from the
web site.
Open Recent: This command allows you to select one of the
recently opened files.
Close: This command would close any open movie.
Close All: This command would close all the open movies.
Save: This command will save the current movie.
Save and Compact: This command would not only save the file
for you but also make it compact for better handling.
Save As: This command will allow you to save the current movie
Copyright 2015. Laxmi Publications Pvt Ltd.

under a new name.


Save As Template: This command will allows you to save your
animation in the form of a template.
Save All: This command would save all the open files.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
218 Introduction to Multimedia

Revert: This command will lead you to the previously saved version of the file.
Import: This command allows you to import files of various other formats. Among the
accepted format are: .emf (Enhanced Metafile), .wmf (Windows Metafile), .wav (Sound
files), .eps or .ai (Adobe Illustrator), .swf or .spl (Flash Player), .dxf (AutoCAD DXF), .bmp
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

or .dib (Bitmap), .jpg (JPEG Image), .gif (GIF Image), .png (PNG Image). Among the various
options under this are: Import to Stage, Import to Library, and Open External Library.
Export: This command will allow the current movie to a new file with a new format. The
formats in which it can be saved are: .swf (Flash Player), .swt (Geneartor Template), .spl
(FutureSplash Player), .avi (Windows AVI), .mov (Quick/Time), .gif (Animated GIF), .wav
(WAV audio), .emf (EMF Sequence), .wmf (WMF sequence), .eps (EPS 3.0 Sequence),
.ai(Adobe Illustrator Sequence), .dxf(AutoCAD DXF), .bmp(Bitmap), .jpg(JPEG Sequence)
and .png (PNG Sequence). Among the various options under this command are: Emport
Image and Export Movie.
Publish Setting: This command allows you to publish the settings of the current file.
Publish Preview: This command lists all the file types currently available which include
HTML, Flash, GIF, etc.
Publish: This command will allow Flash to create the new files whereever the Flash movie
was last saved.
Page Setup: This command will allow you to set margins, paper size, and different options
of the layout.
Print: Use this command to print the current movie frame on the printer.
Send: This command allows you to send e-mail messages from Flash CS3.
Edit Sites: This allows you to edit the files from the site.
Exit: This allows you to exit from Flash CS3.
6.4.3 Edit Menu
Various options of the menu are:
Undo: This command allows you to undo the last command given by you.
Redo: If you suddenly realize that the command which you have undone, you can redo
it.
Cut: This command allows the selected item to be cut and made available at clipboard
Copyright 2015. Laxmi Publications Pvt Ltd.

for later use.


Copy: This command allows the selected item to be copied and made available at
clipboard for later use.
Paste in Center: This command allows the item from clipboard to be pasted in the center
of the frame.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 219

Paste in Place: This command is very similar to Paste, except


that it pastes item precisely in the same place from which it was
copied.
Paste Special: This command pastes from the clipboard in a
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

required format specified by you. The dialog box has the following
options:
Source: This is readout displays the local path to the source
of the item that is on the clipboard.
Paste: Click button.
Paste link: Another click button.
As: This field may have several choices depending upon the
nature of the item and also on which button has been activated
above.
Result: It indicates the result of the selected combination of
the Paste/Paste Link and As options.
Display as Icon: This check box is enabled when any
combination of these options permits the selected item to be
pasted as icon.
Change Icon: This button is evoked when Display as Icon is
enabled. Click to open the Change Icon dialog box.
Clear: This command clears the clipboard of all its contents.
Duplicate: This command is used to duplicate a selected item.
Select All: It selects all the selectable items on the desktop.
Deselect All: This command does the reverse of the above.
Find and Replace: This command finds the required text and allows it to be replaced
with other.
Find Next: This command finds the next occurrence of the required text.
Timeline: It is a set of commands which are shown here.
Cut Frames: Cuts the frame and keeps it in memory for pasting it somewhere else.
Copy Frames: Copies the frame but keeps the original intact.
Copyright 2015. Laxmi Publications Pvt Ltd.

Paste Frames: Pastes the frames from the memory.


Clear Frames: Clears the frame..
Remove Frames: Removes the selected frames.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
220 Introduction to Multimedia

Select All Frames: Selects all the frames.


Edit Symbols: Select an instance of a symbol and choose this command to edit in
symbol-editing mode.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Edit Selected: This command is only enabled if a group or symbol is selected on the
stage.
Edit in Place: When you edit a symbol, Flash updates all the instances of that symbol
in the movie. Flash provides three ways for you to edit symbols. You can edit the symbol
in context with the other objects on the Stage using the Edit in Place command. Other
objects are dimmed to distinguish them from the symbol you are editing. The name of the
symbol you are editing is displayed in an information bar at the top of the Stage, to the
right of to the current scene name.
Edit All: When editing a group, Edit All is used to go back to editing the normal Flash
scene.
Preference: As you can see from the dialog box on the next page, there are 5 panels.
Let us see what each one of them has.
General: This has the following options.
On launch: For On Launch options, select an option to specify which document Flash
opens when you start the application. Select Show Start Page to display the Start Page.
Select New Document to open a new, blank document. Select Last Documents Open to
open the documents that were open when you last quit Flash. Select No Document to
start Flash without opening a document.
Undo: For Undo, enter a value from 2 to 300 to set the number of undo/redo levels.
Undo levels require memory; the more undo levels you use, the more system memory is
consumed. The default is 100. Next select Document- or Object-level undo. Document-
level undo maintains a single list of all your actions for the entire Flash document. Object-
level undo maintains separate lists of your actions for each object in your Flash document.
Object-level undo gives you greater flexibility, since you can undo an action on one object
without having to also undo actions on other objects that may have been modified more
recently than the target object.
Printing: For Printing Options, select Disable PostScript if you want to disable
PostScript output when printing to a PostScript printer. By default, this option is deselected.
Select this option if you have problems printing to a PostScript printer, but keep in mind
that this will slow down printing.
Copyright 2015. Laxmi Publications Pvt Ltd.

Test Movie: For Test Movie Options, select Open Test Movie in Tabs to have Flash
open a new document tab in the application window when you select Control > Test Movie.
The default is to open the test movie in its own window.
Selection: For Selection Options, select or deselect Shift Select to control how Flash
handles selection of multiple elements. When Shift Select is off, clicking additional elements

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 221

adds them to the current selection. When Shift Select is on, clicking additional elements
deselects other elements unless you hold down Shift. Select Show Tooltips to display
tooltips when the pointer pauses over a control. Deselect this option if you don’t want to
see the tooltips. Select Contact Sensitive to have objects become selected when any part
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

of them is included in the marquee rectangle when dragging with the Selection or Lasso
tools. The default is that objects are only selected when the tool’s marquee rectangle
completely surrounds the object.
Timeline: For Timeline Options, select Span Based Selection to use span-based
selection in the Timeline, rather than the default frame-based selection. Select Named
Anchor on Scenes to have Flash make the first frame of each scene in a document a
named anchor. Named anchors let you use the Forward and Back buttons in a browser
to jump from scene to scene in a Flash application.
Highlight Color: For Highlight Color, select a color from the panel, or select Use Layer
Color to use the current layer’s outline color. For Project, select Close Files with Project
to have all files in a project close when the project file is closed. Select Save Files on
Test or Publish Project to have each file in a project saved whenever the project is tested
or published.
ActionScript: This has the following options.
Editing Options: Choose whether you want automatic indentation, code hints, etc.,
from here.
Automatic indentation: When automatic indentation is turned on, the text you type
after an opening parenthesis [(] or opening curly brace ({) is automatically indented
according to the Tab Size setting in ActionScript preferences. For more information, see
Formatting code.
Tab size: It specifies the number of characters a new line is offset by when automatic
indentation is turned on.
Code hints: It enables code hinting in the Script pane. For more information about
using code hinting, see About code hinting in Flash.
Delay: It specifies the delay (in seconds) before code hints are displayed.
Font: It specifies the font used in the Script pane.
Use dynamic font mapping: It checks to ensure that the selected font family has
the necessary glyphs to render each character. If not, Flash substitutes a font family that
contains the necessary characters.
Copyright 2015. Laxmi Publications Pvt Ltd.

Encoding: It specifies the character encoding used when opening, saving, importing,
and exporting ActionScript files.
Reload modified files: It lets you select when to see warnings about whether a script
file is modified, moved, or deleted. Select between Always, Never, or Prompt.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
222 Introduction to Multimedia

• Always No warning is displayed when a change is detected, and the file is automatically
reloaded.
• Never No warning is displayed when a change is detected, and the file remains in
the current state.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

• Prompt (Default) Warning is displayed when a change is detected, and you can
choose whether or not to reload the file.
When building applications that involve external script files, this feature helps you avoid
overwriting a script that a team member has modified since you opened the application,
or publishing the application with older versions of scripts. The warnings let you
automatically close a script, and reopen the newer, modified version.
Syntax colors: It specifies the colors for code coloring in your scripts. With code
coloring enabled, you can select the colors to be displayed in the Script pane.
Language: It opens the ActionScript Settings dialog box.
AutoFormat: This has the options shown above and can be tried by clicking at each
one one of them to see the result in the preview.
Clipboard: This has the following options.
Colour Depth: Choose none if you are only pasting back into Flash. If you want to
copy bitmaps to the clipboard, choose a bitmap format.
Resolution: Choose the resolution at which you want to capture bitmaps.
Size Limit: If your computer has limited memory, choose None, else use this box to
limit the use of RAM that will be gobbled up by bitmaps on the clipboard.
Smooth: It is antialiasing, which means that the edges of shapes and lines will be
dithered to look smooth on the screen.
Gradients: This drop-down menu controls the quality of gradient fills that are created
when copying to the Windows clipboard.
FreeHand Text: Select and maintain text as blocks to keep text editable in a pasted
FreeHand file.
Drawing: This has the following options.
Pen Tool: Choose the options for tool from here.
Other options are:
Copyright 2015. Laxmi Publications Pvt Ltd.

Connect curves, Smooth curves, Recognize lines, Recognize shapes and Click
accuracy.
Text: This has the following options.
Font Mapping Default: To select a font to use when substituting missing fonts in
documents you open in Flash.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 223

Vertical text: For Vertical Text options, select Default Text Orientation to make the
default orientation of text vertical, which is useful for some Asian language fonts. By default,
this option is deselected. Select Right to Left Text Flow to reverse the default text display
direction. This option is deselected by default. Select No Kerning to turn off kerning for
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

vertical text. This option is deselected by default but is useful to improve spacing for some
fonts that use kerning tables.
Input Method: For Input Method, select the appropriate language.
Warnings: This has the following options, as shown in the figure below. You can choose
them all to work normally in Flash CS3.
PSD File Importer: This has the following options, as shown in the figure below.
AI File Importer: This has the following options, as shown in the figure below.
Customize Tools Panel: Using this command you can customize your tools.
Font Mapping: This command is used for mapping the font which may be missing.
Keyboard Shortcuts: This command shows you the various keyboard shortcuts.
6.4.4 View Menu
Various options of the menu are:
Go to: This command opens as submenu which has the options like First, Previous,
Next and Last scenes. Select the one you want to see.
Zoom In: This command allows you to zoom in.
Zoom Out: This command allows you to zoom out.
Magnification: This command allows you to choose the various
options of magnification of your screen ranging from 25% to 800%,
Show Frame and Show All.
Preview Mode: This command has the following options:
Outlines: This command allows user to see all the shapes as
outlines, mainly used for reshaping graphics.
Fast: This command is used to speed up the display on the screen.
Anti-Alias: This command dithers the edges of the shapes and lines
so that they look smoother on the screen. It also slows down the
display.
Copyright 2015. Laxmi Publications Pvt Ltd.

A n t i - A l i a s Te x t : This command also toggles with the Fast


command. It smoothers the edges of text only and works best with large font sizes.
Full: This command is used to see the full preview on the screen.
Pasteboard: This command can make the light-grey area that surrounds the Stage

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
224 Introduction to Multimedia

visible.
Rulers: This command shows/hides the Rulers on or off the screen.
Grid: This command shows/hides the Drawing Grid on or off the screen. The option of
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Edit Grid is also there.


Guides: This command allows you to work on guides, like Show guides, Lock guides,
Snap to guides and Edit guides.
Snapping: This command has the following options:
Snap Align: This command allows you to snap/unsnap the aligment of the object.
Snap to Grid: This command toggles to put Snap to Grid on or off.
Snap to Guides: This command toggles to put Snap to Guides on or off.
Snap to Pixels: This command toggles to put Snap to pixels on or off.
Snap to Objects: This command toggles between Snap to objects on or off.
Edit Snapping: This command allows you to edit the snap option of the object.
Hide Edges: This shows/hides edges on the screen.
Show Shape Hints: This command makes Shape hints visible/invisible from the screen.
Show Tab Order: This command makes Shape hints visible/invisible from the screen.
6.4.5 Insert Menu
Various options of the menu are:
New Symbol: This command is used to create a new symbol and work in Symbol editing
mode.
Timeline: This command allows you to insert the following items:
Layer: This command creates a new layer directly above the active
layer.
Layer Folder: This command adds a layer folder above the selected
layer.
Motion Guide: This command adds a Motion Guide layer above the
selected layer.
Frame: This command inserts a new frame at any selected point on the Timeline.
Copyright 2015. Laxmi Publications Pvt Ltd.

Keyframe: This command converts a selected frame into a Keyframe.


Blank Keyframe: This command inserts a new Keyframe at a selected point on the
Timeline.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 225

Create Motion Tween: This command is one step in the process of creating a tweened
animation.
Timeline Effects: This command inserts various timeline effects as Assistants, Effects
and Transform/Transition. Each one of them have options too.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Scene: This command inserts a new, empty Scene immediately following the currently
active Scene.
6.4.6 Modify Menu
Various options of the menu are:
Document: It gives rise to Document Properties dialog box, which
is used to change: Frame Rate, Frame Dimensions, Grid spacing
and Colour.
Dimensions: This establishes the Dimensions of the Movie, in
pixel units.
Match Printer: This matches the Movie Dimensions to the
currently selected printer’s maximum printable dimensions.
Match Contents: This button adjusts the Movie Dimensions to
include all active objects, from left-hand corner to the lower right-hand
corner of the entire movie.
Background Colour: This is used to choose a new background
colour.
Frame Rate: This is used to change the Frame rate.
Ruler Units: This pull down menu specifies units for the movie.
Make Default: Click this button and your settings will become the default for all
subsequent movies created.
Convert to Symbol: It converts a selected item on stage into a new symbol and evoke
the Symbol Properties dialog box.
Break Apart: It works with merged and object drawings, movie clips, buttons, graphic
symbols, and even imported bitmaps. Because you can ungroup graphics easily to make
them editable, the Break Apart command is generally used only for text and bitmaps.
Bitmap: This command has two options:
Copyright 2015. Laxmi Publications Pvt Ltd.

Swap Bitmap: This command is used to swap an imported bitmap with another in
the document.
Trace Bitmap: This command is used to convert an imported bitmap into a vector
graphic with editable, discrete areas of colour.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
226 Introduction to Multimedia

Symbol: This command has two options:


Swap Symbol: You can assign a different symbol to an instance to display a different
instance on the Stage and preserve all the original instance properties, such as color effects
or button actions.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Duplicate Symbol: Duplicating a symbol lets you use an existing symbol as a starting
point for creating a new symbol.
Shape: This command has following options:
Smooth: Using this you can smooth existing curved segments.
Straighten: Using this you can reshape lines and shape outlines by straightening them.
Optimize: Another way to smooth curves is to optimize them. This refines curved lines
and fill outlines by reducing the number of curves used to define these elements. Optimizing
curves also reduces the size of the Flash movie and the exported Flash Player movie.
Convert lines to fills: You can modify shapes by converting lines to fills, expanding
the shape of a filled object, or softening the edges of a filled shape by modifying the curves
of the shape.
Expand Fill/Soften: Expand Shape and Soften Edges work.
Filled Edges: Best on small shapes that do not contain many small details. Applying
Soften Edges to shapes with extensive detail can increase the file size of a Flash Player
movie.
Add Shape Hint: Using this command you can add hints to the shape.
Remove All Hints: Using this command you can remove the hints added to the shape.
Combine Objects: You can use the Combine Object commands to create new shapes
by combining or altering existing objects. In some cases, the stacking order of selected
objects determines how the operation works. The Combine Objects commands are:
Union: The Union command lets you join to shapes two or more shapes into a single
shape.
Intersect: The Intersect command lets you create an object from the intersection of
two or more objects.
Punch: The Punch command lets you remove portions of a selected object as defined
by the overlapping portions of another selected object arranged in front of it.
Crop: The Crop command lets you use the shape of one object to crop another object.
Copyright 2015. Laxmi Publications Pvt Ltd.

The front or topmost object defines the shape of the cropped area.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 227

Timeline: It has the following commands under it:


Distribute to Layers: To distribute objects to layers, you select the objects in one or
more layers and choose this command.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Layer Properties: Using this command you can see the properties of various layers.
Reverse Frames: This is used to reverse the animation squence.
Synchronize Symbols: This command is used to recalculate the number of frames.
Convert to Keyframes: To distribute objects to layers, you select the objects in one
or more layers and choose this command.
Clear Keyframe: This command changes a Keyframe back into a simple Frame,
whereupon the contents of the former Keyframe will be replaced with copies of the
Keyframe immediately previous in the Timeline.
Convert to Blank Keyframes: To distribute objects to layers, you select the objects
in one or more layers and choose this command.
Timeline Effects: Flash includes prebuilt Timeline effects that let you create complex
animations with a minimal number of steps. You can apply Timeline effects to the following
objects: Text, Graphics, including shapes, groups, and graphic symbols, Bitmap images
and Button symbols.
Transform: Use this to access the Transform pop-up, home to the following commands:
Free Tranform, Distort, Envelope, Scale, Rotate and Skew, Rotate 900 CW, Rotate 900
CCW, Flip Vertical, Flip Horizontal and Remove Transform.
Arrange: Use this to open the arrange submenu. The various options are:
Bring to Front: This moves the symbol to the absolute front of the stack.
Bring Forward: This moves the symbol one step forward in the stack.
Send Backward: This moves the symbol one step backward in the stack.
Send to Back: This moves the symbol way back of the stack.
Lock: Use this to lock the symbol in its current position in the stack.
Unlock all: Use this to release the symbol from it’s locked status in the stack.
Align: This command can be used to align objects in various positions like, Left, Horizontal
Center, Right, Top, Vertical Center, Bottom, Distrubute Widths, Distribute Heights, Make
Same Width, Make Same Height, and To Stage.
Copyright 2015. Laxmi Publications Pvt Ltd.

Group: This command groups the various selected items to one group.
Ungroup: This command is reverse of the above command, ungroups the grouped
objects.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
228 Introduction to Multimedia

6.4.7 Text Menu


Various options of the menu are:
Font: It shows all the fonts available in the windows directory which
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

can be chosen according to your requirement.


Size: It shows the various sizes to choose from ranging from 8 to 120.
Style: Use this to set the style like Plain, Bold, Italics, Superscript or
Subscript.
Align: You can set the alignment of the text in all possible 4 alignments
like Left, Right, Centre or Justify.
Letter Spacing: You can set the space between the characters from here.
Scrollable: You can use the scroll and maxscroll properties of the TextField object to
control vertical scrolling and the hscroll and maxhscroll properties to control horizontal
scrolling in a text block. The scroll and hscroll properties contain a number that specifies
the topmost visible line in a text block; you can read and write these properties.
Check Spelling: You can check the spelling of your text by using this command.
Spelling Setup: You can set the spelling options from here.
6.4.8 Commands Menu
Various options of the menu are:
Manage Saved Commands: You can get the saved
commands from here.
Get More Commands: You can get more commands from
the Interenet using this command.
Run Commands: It allows you to run the commands.
Copy Motion as XML: You can copy the motion as XML.
Export Motion XML: You can export the motion as XML.
Import Motion XML: You can import the motion as XML.
6.4.9 Control Menu
Various options of the menu are:
Copyright 2015. Laxmi Publications Pvt Ltd.

Play: It plays the movie.


Rewind: It returns the movie back to frame one.
Go To End: It takes you to the end of the movie.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 229

Step Forward One Frame: It command is used to step


the movie one frame forward.
Step Backward One Frame: This command is used to
step the movie one frame backwards.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Te s t M o v i e : This command utilizes the settings


established in the Publish Settings dialog box to export the
current movie and instantly play it within a new Flash Player
window.
Debug Movie: This command allows you to debug the
faults in your movie.
Test Scene: This command tests the current scene only,
whereas Test Movie runs the whole movie.
Test Project: This command tests the project.
Delete ASO Files: During compilation, Flash sometimes
creates files with .aso extensions in the /aso subdirectory
of the default global classpath directory. The .aso extension
stands for ActionScript object (ASO). For each ActionScript
2.0 file that is implicitly or explicitly imported and successfully
compiled, Flash generates an ASO file. The file contains the bytecode that’s produced
from the associated ActionScript (AS) file. Therefore, these files contain the compiled form
(the bytecode) of a class file. If you experience problems in which Flash appears to be
compiling older versions of a file you have edited, delete the ASO files and then recompile.
If you plan to delete ASO files, delete them when Flash is not performing other operations,
such as checking syntax or exporting SWFs.
Delete ASO Files and Test Movie: This command deletes both aso and text movie files.
Loop Playback: It enables looping with all subsequent implementations of the Play, Test
Movie, and Test Scene commands.
Play All Scenes: This command overrides the default single scene playback and enables
all scenes to be played with subsequent implementations of the Play, Test Movie, and Test
Scene commands.
Enable Simple Frame Actions: Use this only during tests and playback within Flash.
Enable Simple Buttons: This command toggles whether buttons are enabled.
Copyright 2015. Laxmi Publications Pvt Ltd.

Enable Live Preview: The Live Preview feature lets you view components on the Stage
as they will appear in the published movie.
Mute Sounds: This command is a toggle that turns sound on or off.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
230 Introduction to Multimedia

6.4.10 Windows Menu


This menu has several commands that are used to control and
arrange the display of multiple movies.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Duplicate Window: This command opens the currently active


movie in a new window.
Toolbars: This command opens the options of selecting various
toolbars like Main, Controller and Edit bar.
Timeline: This command opens the Timeline pallette.
Tools: This command opens the Tools pallette.
Properties: This command opens the Properties Option palette.
Library: Libraries opened from the Libraries menu function like the
Library that’s accessed with Windows, Library.
Common Library : You can use the sample common libraries
included with Flash to add buttons or sounds to your documents.
You can also create custom common libraries, which you can then
use with any documents that you create.
Actions: You can assign an action to a button or a movie clip to
make an action execute when the user clicks a button or rolls the
pointer over it, or when the movie clip loads or reaches a certain
frame. You assign the action to an instance of the button or movie
clip; other instances of the symbol aren’t affected.
Behaviours: It allows you to have the Behaviours pallette on the
screen.
Debugger: It allows you to degbug your movie.
Movie Explorer: The Movie Explorer helps you arrange, locate, and
edit media. With its hierarchical tree structure, the Movie Explorer
provides information about the organization and flow of a document.
Output: This command opens the Output window, which shows precise file-size reports
on every scene, symbol, text and so on.
Align: This command opens the Align option pallete.
Color Mixer: This command opens the Color Mixer palette.
Copyright 2015. Laxmi Publications Pvt Ltd.

Color Swatch: This command opens the Color Swatch palette.


Info: This command opens the Info palette on the screen.
Transform: This command opens the Transform palette.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 231

Components: It opens the Components control panel on the screen.


Component Inspector: It opens the Component Inspector control panel on the screen.
Other Panels: This command has the following options:
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Accessability: You can see the accessability of your document from here.
History: You can see the history of your document from here.
Scene: This command shows the scene dialog box.
Screens: This command shows the screens dialog box.
Strings: This opens the Strings pallette for you.
Workspace Layout: It has the options of setting it to Default, Save Current or Manage.
Hide Panels: It hides all the open panels.
Cascade: This command opens all windows so that they overlap in a cascade descending
from the top left to the bottom right.
Tiles: You can open two tiles of the same document using this command.
6.4.11 Help Menu
This menu has the various options shown here.
Flash Help: Opens the Help for you to ask the system
what you want to know.
Getting Started with Flash: Helps you in working in
Flash.
Flash LiveDocs: You can download live documents of
Flash.
What's New in Flash CS3: Tells you what is new in the
new version of Flash.
Flash Exchange: Clicking at this takes you to the web
site of Adobe.
Flash Help: The following set of commands help you
in reaching Adobe and getting the required information
from the developer of the software. These commands
are: Flash Support Center, Flash Developer Center, Flash
Copyright 2015. Laxmi Publications Pvt Ltd.

Documentation Resource Center, Adobe Online Forums,


and Adobe Training.
Try Flash Professional CS3: This command allows you to try the advanced version of
the software known as Flash Professional CS3.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
232 Introduction to Multimedia

About Flash Basic: Displays the copyright page of the software.

6.5 UNDERSTANDING TOOLS OF FLASH CS3


Like any other software, Flash CS3 has its own set of tools, which are very important to
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

understand before you use them. The toolbar is shown here:


Most of these tools have multiple dimensions, i.e., some of them have more tools under
them. Let us start with Arrow Tool.

Selection Tool Subselect Tool

Free Transform Tool Lasso Tool

Pen Tool Text Tool

Line Tool Rectangle Tool


Pencil Tool Brush Tool

Ink Bottle Tool Paint Bucket Tool


Eye Dropper Tool Eraser Tool
Hand Tool Magnifier Tool
Stroke Tool

Fill Colour Swap Colour and No Colour


Black and White Straighten
Snap to Objects

Smooth

6.5.1 Selection Tool


The Selection tool lets you select entire objects by clicking an object or dragging to enclose
the object within a rectangular selection marquee.
Copyright 2015. Laxmi Publications Pvt Ltd.

To select a stroke, fill, group, instance, or text block


Select the Arrow tool and click the object.
To select connected lines
Select the Arrow tool and double-click one of the lines.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 233

Snap to Objects

Smooth Straighten
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

To select a filled shape and its stroked outline


Select the Arrow tool and double-click the fill.
To select objects within a rectangular area
Select the Arrow tool and drag a marquee around the object or objects that you want
to select. Instances, groups, and type blocks must be completely enclosed to be selected.
6.5.2 The Subselection Tool
It is used to select more than one items.
6.5.3 The Free Transform Tool
You can use the Free Transform tool to freely transform objects, groups, instances, or
text blocks. You can perform individual transformations or combine several transformations,
such as moving, rotating, scaling, skewing, and distortion.
To transform freely:
1. Select a graphic object, instance, group, or text block on the Stage.
2. Click the Free Transform tool.
Moving the pointer over and around the selection changes the pointer to indicate
which transformation function is available.
3. Drag the handles to transform the selection, as follows:
To move the selection, position the pointer over the object within the bounding box,
and drag the object to a new position. Do not drag the transformation point. To set
the center of rotation or scaling, drag the transformation point to a new location.
To rotate the selection, position the pointer just outside a corner handle and drag.
The selection rotates around the transformation point.
Shift-drag to rotate in 45° increments.
Alt-drag to rotate around the opposite corner.
Copyright 2015. Laxmi Publications Pvt Ltd.

To scale the selection, drag a corner handle diagonally to scale in two dimensions.
Drag a corner handle or a side handle horizontally or vertically to scale in the
respective direction only. Shift-drag to resize proportionally.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
234 Introduction to Multimedia

To skew the selection, position the pointer on the outline between the transformation
handles and drag.
To distort shapes, press Control and drag a corner handle or a side handle. Shift-
Control-drag a corner handle to taper the object—to move the selected corner and
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

the adjoining corner equal distances from their origins.


The Free Transform tool cannot transform symbols, bitmaps, video objects, sounds,
gradients, object groups, or text. If a multiple selection contains any of these, only
the shape objects are distorted. To transform text, first convert the characters to
shape objects.
4. To end the transformation, click outside the selected object, instance, or text block.
This has the following options as shown.
Rotate and Skew: Rotating an object turns it around its transformation point. The
transformation point is aligned with the registration point, which defaults to the center of
the object, but you can move
the point by dragging it.
When you rotate an object by
dragging, you can also skew Rotate and Scale
and scale the object in the Skew
same operation. When you
rotate an object using the Distort Envelope
Transform panel, you can
scale the object in the same
operation.
Scale: This button is used to initate scaling of a selected line, shape, group, symbol,
button, object, or other item. When the Scale button is clicked, the item is put into scale
mode, and handles appear for scaling of the time.
Distort: When you apply a Distort transformation to a selected object, dragging a corner
handle or an edge handle on the bounding box moves the corner or edge and realigns the
adjoining edges. Shift-dragging a corner point tapers the object—that is, it moves that corner
and the adjoining corner an equal distance and opposite direction from each other. The
adjoining corner is the corner opposite the direction you drag. Control-dragging a middle
point on an edge moves the entire edge freely.
Envelope: The Envelope modifier lets you warp and distort objects. An envelope is a
bounding box that contains one or more objects. Changes made to an envelope’s shape
Copyright 2015. Laxmi Publications Pvt Ltd.

affect the shape of the objects contained within the envelope. You edit the shape of an
envelope by adjusting its points and tangent handles.
6.5.4 The Lasso Tool
It is used to group-select odd or irregular shaped areas of your drawing. After the areas

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 235

are selected, they can be moved, scaled, rotated, or reshaped as a single unit. The Lasso
tool can also be used to split shapes or select portions of a line or shape.
To select objects by drawing a straight-edged selection area
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

1. Select the Lasso tool and select the Polygon Mode modifier in the Options section
of the toolbox.
2. Click to set the starting point.
3. Position the pointer where you want the first line to end, and click. Continue setting
end points for additional line segments.
4. To close the selection area, double-click.
To select objects by drawing both freehand and straight-edged selection areas
1. Select the Lasso tool and deselect the Polygon Mode modifier.
2. To draw a freehand segment, drag on the Stage.
3. To draw a straight-edged segment, hold down Alt-click (Windows) or Option-click
(Macintosh) to set start and end points. You can continue switching between drawing
freehand and straight-edged segments.
4. To close the selection area, do one of the following:
If you are drawing a freehand segment, release the mouse button.
If you are drawing a straight-edged segment, double-click.
This tool has 3 options: Polygon Mode, Magic Wand and the Magic Wand properties.
Polygon Mode: Here selection points are created by a mouse click, causing a straight
selection line to extend between mouse clicks. Double click to complete the selection.
Magic Wand Modifier: It is used to select ranges of a similar colour in a bitmap that
has been broken apart. After you select areas of the bitmap, you can change their fill colour
or delete them.
Magic Wand Properties: This has 2 settings: Threshold and Smoothing.
Threshold Setting: This defines the breadth of adjacent colour values that the Magic
Wand Modifier will include in a selection. The higher the setting, the broader the selection
of adjacent colours, and conversely, a smaller number results in the Magic Wand, making
a narrower selection of adjacent colours.
Copyright 2015. Laxmi Publications Pvt Ltd.

Magic Wand Magic Wand Properties

Polygon Mode

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
236 Introduction to Multimedia

Smoothing Setting: This determines to


what degree the edge of the selection should
be smoothed.
6.5.5 The Pen Tool
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

When you draw with the Pen tool, you click to


create points on straight line segments, and
click and drag to create points on curved line
segments.
You can adjust straight and curved line segments by adjusting points on the line. You can
convert curves to straight lines and the reverse.
You can also display points on lines that you create with other Flash drawing tools, such
as the Pencil, Brush, Line, Oval, or Rectangle tool, to adjust those lines.
6.5.6 The Text Tool
To place text blocks on the Stage, you use the Text tool. You can place type on a single
line that expands as you type or in a fixed-width block that wraps words automatically.
Flash displays a round handle at the upper right corner of text blocks that extend, and a
square handle for text blocks with a defined width.
6.5.7 The Line Tool
Drawing with the Line tool creates a perfectly straight line that extends from the starting
point to the end point.
6.5.8 The Rectangle Tool
You can use the Rectangle tool to easily
create a rectangle shape.
To draw a straight line, oval, or rectangle
1. Select the Line, Oval, or Rectangle tool.
2. Select Window > Properties and select stroke and fill attributes in the Property
inspector. You cannot set fill attributes for the Line tool.
3. For the Rectangle tool, specify rounded corners by clicking the Round Rectangle
modifier and entering a corner radius value. A value of zero creates square corners.
4. Drag on the Stage. If you are using the Rectangle tool, press the Up and Down Arrow
Copyright 2015. Laxmi Publications Pvt Ltd.

keys while dragging to adjust the radius of rounded corners.


For the Oval and Rectangle tools, Shift-drag to constrain the shapes to circles and
squares.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 237

For the Line tool, Shift-drag to constrain lines to multiples of 45°.


6.5.9 The Pencil Tool
It is used to draw lines and shapes. This tool has a option in the form
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

of Pencil Mode.
Pencil Mode pop-up menu has 3 options as shown here. These help
in processing of the lines as they are drawn. Two are Straighten and
Smooth. The third one is freehand ink mode which turns off all other
line processing.
Straighten: Drawing with this option processes your drawings while taking into account
line and shape recognition.
Smooth: Drawing with this option reduces the zeal with which Flash automatically
processes your drawings.
Ink: Drawing with this option turns off all Flash processing.
6.5.10 The Brush Tool
It is used to paint with brush-like strokes
and to fill enclosed areas with colours.
Brush Mode
The fills can be solid colours, gradients,
or fills derived from bitmaps. Brush Size
This tool can have either 4 options Brush Shapes
depending upon the type of pressure
sensitive tablet you are using. These are: Lock Fill
Pressure Modifier, which only appears if
your a pressure sensitive tablet attached to your computer; Brush size and Brush shapes.
Brush Mode Modifier: This is a drop-down menu with 5 modes for applying strokes:
Paint Normal, Paint Fills, Paint Behind, Paint Selection, and Paint Inside. Let us see what
each of them does.
Paint Normal: It applies brush strokes over the top of any lines or fills. In this mode,
a black scrawl covers all elements: background, outline, fill, and drawn lines.
Paint Fills: This mode applies brush strokes to replace any
fills, but leaves lines untouched. In Paint Fills mode, a similar
black scrawl covers both the grey fill and the background.
Copyright 2015. Laxmi Publications Pvt Ltd.

Paint Behind: This mode applies brush strokes only to blank


areas and leaves all fills, lines, and other items untouched.
Paint Selection: This mode applies brush strokes only to
selected fills.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
238 Introduction to Multimedia

Paint Inside: This mode applies brush strokes only to the fill area
where the brush stroke was first initiated. It never paints over lines.
Brush Size Tool: This is a drop-down menu with a range of ten preset
available brush sizes. Although the sizes are shown as circles, the
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

diameter size applies to all brush shapes. In the case of an oblong


brush, the diameter size refers to the broadest span of the brush. You
can combine brush sizes and shapes for a wide variety of custom brush
tips.
Brush Shape Tool: This is a simple pop-up menu with 9 possible
brush shapes, based on circle, ellipse, square, rectangle, and line
shapes. The oval, rectangle, and line shapes are available in several
angles.
Brush Lock Fill Tool: This is a toggle button that controls how Flash
handles areas filled with gradient colour. Once this button is pressed,
all subsequent areas that are painted with the same gradient will appear
to be part of a single, continuous filled shape. This modifier locks
the angle, size, and point of origin of the current gradient so that
it remains constant throughout the scene.
Gap Size
6.5.11 The Ink Bottle Tool
It is used to change the colour, style, and thickness of existing
lines. It is most often used in conjunction with the Dropper tool.

6.5.12 The Paint Bucket Tool Lock Fill


It is used to fill enclosed areas with colour, gradients or bitmap
fills. When the Paint Bucket tool is active, three modifier appear in the modifier tray. The
button modifiers are the Lock Fill and Transform Fill. The pop-up menu is the Gap Size
Modifiers.
Paint Bucket Gap Size: This modifier pop-up offers four settings that control how the
Paint Bucket tool will treat gaps when filling. These settings are Don’t Close Gaps, Close
Small Gaps, Close Medium Gaps and Close Large Gaps. If gaps are too large, you may
have to close them manually.
Paint Bucket Lock Fill: It is the same button as the Brush
Lock Fill Modifier. With this you can handle the fill gradient
Copyright 2015. Laxmi Publications Pvt Ltd.

colours. It locks he angle, size, and point of origin of the


current gradient so that it remains constant throughout.
6.5.13 The Eye Dropper Tool
It is used to acquire the colour and style information from

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 239

existing pencil lines, brush strokes, and fills. The Eye Dropper tool has no modifiers, but
then it does not need modifiers.
With the shift key pressed when the Dropper tool is over a line, fill, or brush stroke, the
cursor changes to an inverted U shape. In this mode, use of Dropper tool changes the
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

attributes for all editing tools in Flash to match the attributes of the area clicked.
6.5.14 The Eraser Tool
Where there are drawing tools, can eraser be long behind. It must be there.
To quickly delete everything on the Stage
Double-click the Eraser tool.
To remove stroke segments or filled areas
1. Select the Eraser tool and then click the Faucet modifier.
2. Click the stroke segment or filled area that you want to delete.
To erase by dragging
1. Select the Eraser tool.
2. Click the Eraser Mode modifier and choose an erasing mode:
• Erase Normal erases strokes and fills on the same layer.
• Erase Fills erases only fills; strokes are not affected.
• Erase Lines erases only strokes; fills are not affected.
• Erase Selected Fills erases only the currently selected fills and does not affect
strokes, selected or not. (Select the fills you want to erase before using the Eraser
tool in this mode.)
• Erase Inside erases only the fill on which you begin the eraser stroke. If you begin
erasing from an empty point, nothing will be erased. Strokes are unaffected by the
eraser in this mode.
3. Click the Eraser Shape modifier and choose an eraser shape and size. Make sure
that the Faucet modifier is not selected.
4. Drag on the Stage.
When the eraser tool is active, 3 modifiers appear in the modifier tray. Two of these
modifiers, the Eraser Mode Modifier and the Eraser Shape Modifier, are pop-ups. The third
Copyright 2015. Laxmi Publications Pvt Ltd.

modifier, the Faucet button, is used to clear enclosed areas of fill.


Erase Mode Modifier: This modifier both controls and limits what and how the Eraser
tool erases. The Erase Mode Modifier has 5 options:
Erase Normal: In this mode the Eraser tool functions like a normal eraser. It erases
all lines and fills that it passes over, as long as they are on the active layer.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
240 Introduction to Multimedia

Erase Fills: In this mode the


Eraser tool becomes a specialty Erase Faucet button
eraser, erasing only fills and Mode
leaving lines only and leaving fills Modifier
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

unaffected.
Erase
Erase Lines: In this mode the
Shape
Eraser tool changes specialties,
Modifier
i.e., it works by erasing lines only
and leaving fills unaffected.
Erase Selected Fills: In this mode the Eraser tool becomes even more specialized
and only erases fills that are currently selected, leaving unselected fills and all lines
unaffected.
Erase Inside: In this mode the Eraser tool only erases the area of fill on which you
initiate erasing. This is much like the erase Selected Fills
mode, with the exception that the selection is accomplished
with the initial erasure. In this mode, the eraser leaves all other
fills and all lines unaffected.
Erase Shape Modifier: This modifier defines both the size and
shape or the eraser. It is a simple drop-down menu with 10
brushes available in 2 shapes, circular and square. These are
arrayed in two banks of 5 sizes each, ranging from small to
large.
6.5.15 The Hand Tool
When you are zoomed in close on the screen, you can easily navigate the Flash workspace
contents by using the Hand Tool. This tool is used by clicking and dragging, while holding
the mouse, in the direction you want to move the screen.
6.5.16 The Magnifier Tool
This tool is similar to various zoom tools you see in other programs. It has
two options: Zoom in and Zoom out. Zoom in brings you closer into the
drawing so that you can view it at a greater level of magnification, while
Zoom out pulls you away from the drawing by showing it at a lesser level
of magnification. Each level of Zoom in brings you in twice as close while each level of
Zoom out pulls you away in increments of one half.
Copyright 2015. Laxmi Publications Pvt Ltd.

To view the entire Stage on the screen, or to view just a particular area of your
drawing at high magnification, you can change the magnification level. The maximum
magnification depends on the resolution of your monitor and the document size.
To Magnify or Reduce your view of the Stage, do one of the following
• To zoom in on a certain element, select the Zoom tool and click the element. To

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 241

switch the Zoom tool between zooming in or out, use the Enlarge or Reduce
modifiers or Alt-click.
• To zoom in on a specific area of your drawing, drag a rectangular selection marquee
with the Zoom tool. Flash sets the magnification level so that the specified rectangle
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

fills the window.


• To zoom in on or out of the entire Stage, choose View > Zoom In or View > Zoom
Out.
• To zoom in or out by a specified percentage, choose View > Magnification and select
a percentage from the submenu, or select a percentage from the Zoom control at
the lower left corner of the application window.
• To display the contents of the current frame, choose View > Magnification > Show
All, or choose Show All from the Zoom control at the lower left corner of the application
window. If the scene is empty, the entire Stage is displayed.
• To display the entire Stage, choose View > Magnification > Show Frame or choose
Show Frame from the Zoom control at the lower left corner of the application window.
• To display the work area surrounding the Stage, choose View > Work Area. The
work area is shown in light gray. Use the Work Area command to view elements in
a scene that are partly or completely outside of the Stage. For example, to have a
bird fly into a frame, you would initially position the bird outside of the Stage in the
work area.
6.5.17 The Fill Tool
You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the
fill.
To adjust a gradient or bitmap fill with the Fill Transform tool
1. Select the Fill Transform tool.
2. Click an area filled with a gradient or bitmap fill.
When you select a gradient or bitmap fill for editing, its center point appears, and
its bounding box is displayed with editing handles. When the pointer is over any one
of these handles, it changes to indicate the function of the handle.
Press Shift to constrain the direction of a linear gradient fill to multiples of 45°.
3. Reshape the gradient or fill in any of the following ways:
Copyright 2015. Laxmi Publications Pvt Ltd.

• To reposition the center point of the gradient or bitmap fill, drag the center point.
• To change the width of the gradient or bitmap fill, drag the square handle on the
side of the bounding box. (This option resizes only the fill, not the object containing
the fill.)

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
242 Introduction to Multimedia

• To change the height of the gradient or bitmap fill, drag the square handle at the
bottom of the bounding box.
• To rotate the gradient or bitmap fill, drag the circular rotation handle at the corner.
You can also drag the lowest handle on the bounding circle of a circular gradient or
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

fill.
• To scale a linear gradient or a fill, drag the square handle at the center of the
bounding box.
• To change the radius of a circular gradient, drag the middle circular handle on the
bounding circle.
• To skew or slant a fill within a shape, drag one of the circular handles on the top or
right side of the bounding box.
• To tile a bitmap inside a shape, scale the fill.
• To see all of the handles when working with large fills or fills close to the edge of
the Stage, choose View > Work Area.

6.6 DRAWING OBJECTS IN FLASH


Using the various drawing tools you can draw the various objects on the screen.
6.6.1 Drawing Lines
Line tool allows you to draw various lines on the screen.
Follow the following steps to draw line.
1. Click at line tool.
2. Move the mouse pointer over the Stage area until the pointer changes from Arrow
to Plus.
3. Drag to draw a line of your desired length.
4. Release the mouse button.
5. The line appears as required by you.
6.6.2 Drawing Free Form Line
Follow the following steps to draw a free form line.
1. Click at pencil tool.
Copyright 2015. Laxmi Publications Pvt Ltd.

2. Click at Pencil mode tool.


3. Select the freeform line from the options.
4. Drag your cursor on the Stage to draw the line.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 243
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

5. Release the mouse button.


6. The line appears to your specifications, as shown next.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
244 Introduction to Multimedia

6.6.3 Formatting the Line


Using the various readymade formats available in Flash you can change the shape of the
line according to your needs.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Follow the following steps to format the line.


1. Click at Arrow tool.
2. Click the line segment you want to format.
3. Get the Properties dialog box on the screen.
4. From the dialog box, click the line sub-menu.
5. From the various lines visible, select the one which you want.
6. Click the weight of the line, a slider appears.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 245

7. From the slider choose the thickness you want.


8. Change the colour of the line if needed.
6.6.4 Drawing a Custom Line
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Using the various readymade readymade styles of lines available in the software you can
draw a line of your needs.
Follow the following steps to create a line.
1. Click at Pencil or Line tool.
2. Click Windows menu.
3. Click Properties.
4. Click at Custom.
5. The stroke dialog box appears.

6. Click at the thickness of the line you want.


7. Click at Type of line you want.
8. With each type you get the option, like in this case of Dashed, you get the Dash
spacing, which has been defined as 6.
9. If you want you can make the corners sharp.
Copyright 2015. Laxmi Publications Pvt Ltd.

10. Click Ok.


11. Draw your custom line on Stage.
12. The line appears as per your needs, as shown next.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
246 Introduction to Multimedia
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.6.5 Drawing Curves with the Pen Tool


Using the pen tool too you can draw curves.
Follow the following steps to create curves.
1. Click at Pen tool.
2. Move the cursor pointer over the Stage area until the pointer changes from Arrow to
Pen.
Copyright 2015. Laxmi Publications Pvt Ltd.

3. Begin dragging to start the curve.


4. A curve bar appears.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 247
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

5. You can rotate the curve bar by dragging tool to achieve the bend and line length
Copyright 2015. Laxmi Publications Pvt Ltd.

you want for the curve.


6. Start dragging and release the mouse button when you have drawn the curve you
want.
7. You can add more curves to an existing curved line as long as the Pen tool is still
active. Simply drag another line segment.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
248 Introduction to Multimedia

8. Flash automatically attaches the second line segment to the first curved line.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.6.6 Drawing Oval Shape


Follow the following steps to draw an oval shape.
1. Click at Oval tool.
2. Move the cursor over the Stage area
until Arrow changes to Plus.
3. You can draw a shape without a fill by
changing the fill colour to white.
4. Drag to draw the shape you want.
5. Release the mouse button.
6. T h e s h a p e a p p e a r s a s p e r y o u r
needs.
6.6.7 Drawing Rectangle Shape
Follow the following steps to draw an oval
shape.
Copyright 2015. Laxmi Publications Pvt Ltd.

1. Click at Rectangle tool.


2. Click fill colour and hold down the
mouse button.
3. The fill colour palette appears.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 249

4. Move over a fill colour and release the mouse button or when the pointer changes
from Arrow to Dropper.
5. Drag to draw the shape.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6. Release the mouse button.


7. The shape appears as per your needs.

6.6.8 Drawing Rectangle with Rounded Corners


Follow the following steps to drawing rectangle with rounded corners.
1. Click at Rectangle tool.
2. Click Rectangle setting button in the Options area of the toolbar.
3. The Rectangle Settings dialog box appears.
4. Type a corner radius setting.
Copyright 2015. Laxmi Publications Pvt Ltd.

5. Click Ok.
6. Draw a rectangle shape with rounded corners. To draw regular corners again, enter
0 as the radius setting.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
250 Introduction to Multimedia

6.6.9 Drawing with Brush Tool


Follow the following steps to draw an object with Brush tool.
1. Click at Brush tool.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

2. Click down arrow to select the brush size.


3. Now select the brush shape too.
4. After selecting a brush size and shape, move your cursor over the Stage.
5. The mouse pointer displays the brush size and shape you selected.
6. Drag to begin drawing.
7. A shape appears according to your needs, as shown below.

6.6.10 Filling Shapes with Paint Bucket Tool


Follow the following steps to fill the shape with Paint bucket tool.
1. Click at Paint Bucket tool.
Copyright 2015. Laxmi Publications Pvt Ltd.

2. Click fill colour and hold down the mouse button.


3. The fill colour pallet opens.
4. Select a colour.
5. Click the shape you want to fill.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 251

Before and After the fill with Paint


All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Bucket

6. The colour fills the shape.


6.6.11 Filling Shapes with Gradient Fill
Follow the following steps to fill the shape with gradient colour fill.
1. Click at Paint Bucket tool.
2. Click fill colour and hold down the mouse button.
3. The fill colour pallet opens.
4. Select a gradient colour given at the bottom of the colour pallet.
5. Click the shape you want to fill.
6. The gradient colour fills the shape.
There are various types of gradients available in Flash. There are fills which fill the colour
from Left to Right, Top to Bottom, Middle to Outer Edges or even Outer edges to Middle.
These are 2 colours or more than 2 colours. Two options are shown next.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
252 Introduction to Multimedia
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

6.7 CREATING ANIMATIONS IN FLASH


Animation involves lots of steps. An animation in fact is running the various scenes together.
So for running an animation, you must know how many scenes are there, how much time
each has to take, and so. In this chapter, you will read about all this.
6.7.1 Setting Speed and Dimensions of the Document
Follow the following steps to set the properties of the movie.
1. Click at Modify.

2. Click Document.
3. The Document Properties dialog box appears.
4. Type the number of frames per second you want the movie to play in the Frame
Rate text box.
5. Type a width value in the Width text box.
6. Type a height value in the Height text box.
Copyright 2015. Laxmi Publications Pvt Ltd.

7. Click Ok.
8. The new dimensions are adjusted.
6.7.2 Adding Frames
Follow the following steps to set frames for the movie.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 253

6.7.2.1 Adding a Regular Frame


1. Click an empty frame on the
Timeline where you want to
insert a new frame.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

2. Click Insert menu.


3. Click at Timeline and then
Frame.
4. A new frame is added.
6.7.2.2 Adding a Keyframe
1. Click an empty frame or a
regular frame on the timeline
where you want to place a
new keyframe.
2. Click Insert menu.
3. Click at Timeline and then
Keyframe.
4. A new keyframe is added.
6.7.2.3 Adding a Blank Keyframe
1. Click a frame on the Timeline where you want to insert a blank keyframe.
2. Click Insert menu.
3. Click Timeline and then Blank Keyframe.
4. A new blank keyframe is added.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
254 Introduction to Multimedia

6.7.2.4 Adding Multiple Frames


1. Select two or more frames by clicking them.
2. To select multiple frames, click the first frame in the range, press the Shift key and
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

click the last frame in the range.


3. Click Insert menu.
4. Click Frame to insert regular frames, or click Blank Keyframe to make the new
frames all keyframes.
5. Flash inserts the same number of new frames and lengthens the movie.

6.7.2.5 Deleting a Keyframe


1. Click the frame, or range of frames, you want to delete.
2. To delete a range of frames, select the range first.
3. Click Insert menu.
4. Click Remove Frames.
5. The required frame/frames are deleted.
6.7.2.6 Removing Keyframe Status
1. To convert a keyframe to a regular frame, first click on the keyframe you want to
Copyright 2015. Laxmi Publications Pvt Ltd.

change.
2. Click Insert menu.
3. Click Clear Keyframes.
4. The required frame/frames are converted.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 255

6.7.3 Creating Animation Frame by Frame


Follow the following steps to create a movie frame by frame.
6.7.3.1 Add Content to the First Frame
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

1. Click the first frame in the layer you want to frame.


2. Place the object you want to animate or just insert an image from the clipart.
3. Click the next frame in the Timeline.
4. Add a keyframe. Flash inserts a keyframe that duplicates the previous frame's
contents.

5. Change the object slightly. I have changed it to 900 to the right, as can be seen in
next figure.
6. Repeat the steps 4 and 5. This time the image will turn face down, as shown next.
7. Now again repeat the same steps, making the figure turn to 2700 so that now it faces
to the left, as shown on next page.
8. This way you can change the angle to a smaller degree and make more frames if
you want to have real fun.
9. Click at first keyframe in the layer and press Enter.
Copyright 2015. Laxmi Publications Pvt Ltd.

10. You animation will be shown on the screen.


6.7.3.2 Onion-skinning an Animation
1. Click a frame.
2. Click Onion icon at the bottom of the Flash Timeline.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
256 Introduction to Multimedia
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.
Copyright 2015. Laxmi Publications Pvt Ltd.

3. Flash displays dimmed images from the surrounding frames and places onion-skin
markers at the top of the Timeline.
4. To turn off onion-skinning, you can click the onion icon again.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 257
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.
Copyright 2015. Laxmi Publications Pvt Ltd.

6.7.3.3 Onion-skinning Outlines


1. Click a frame.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
258 Introduction to Multimedia

2. Click Onion skin outline


icon at the bottom of the
Flash Timeline.
3. Flash displays outlines
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

of the images from the


surrounding frames and
places onion-skin
markers at the top of the
Timeline.
4. To make the content of
the onion-skin frames
editable, click onion-skin
outline marker.
6.7.3.4 Changing the Marker
Display
1. To c h a n g e h o w t h e
onion-skin markers
appear on the Timeline,
click at Modify Onion
Markers icon.
2. T h e Modify menu
appears with options for
changing the marker
display.
3. Click the marker setting
you want to apply.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 259

6.7.3.5 Previewing your Animation


1. Click Control menu.
2. Click Test Movie.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

3. Flash exports your movie to the Flash Player and plays the animation.
6.7.3.6 Adjusting the Animation Speed
1. Click the keyframe you want to add frames to.
2. Click Insert menu.
3. Click Frame. Flash adds a frame after the keyframe.
4. Because adding just one regular frame is not always enough, repeat steps 2 and 3
above to add a few more frames to the sequence.
5. To test the animation, click the first frame in the Timeline and press Enter.
6.7.4 Selecting Frames
You can select one or more frames for various purposes.
6.7.4.1 Select a Single Frame
1. Click the frame you want to select.
2. Flash highlights the frame in the Timeline.
3. If you have difficulty selecting a regular frame between two keyframes, press and
hold Ctrl, then click the frame you want to select.
6.7.4.2 Selecting Multiple Frames
1. Click the first frame in the range of frames you want to select.
2. Press and hold Shift and click the last frame in the range.
3. Flash selects all the frames in-between.
4. To select multiple frames between two keyframes, click anywhere between the two
keyframes.
6.7.4.3 Modify Frame Properties
1. Click the frame you want to modify.
2. Click Modify menu.
Copyright 2015. Laxmi Publications Pvt Ltd.

3. Click Frame.
4. The Frame panel opens.
5. You can type a label for the frame, if desired. The label appears in the Timeline.
6. You can use the other panel tabs to make changes to the frame object.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
260 Introduction to Multimedia

7. Click at X to close the panel.


6.7.4.4 Move a Frame
1. Click the frame to select it.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

2. Flash highlights the frame in the Timeline.


3. Click and drag the frame to a new location in the Timeline. The pointer changes to
Hand.
4. Drop the frame in place. The frame moves.
6.7.4.5 Copy a Frame
1. Click the frame to select it.
2. Flash highlights the frame in the Timeline.
3. Click Edit menu.
4. Click Copy Frames.
5. Click a frame where you want to place the copy.
6. Click Edit.
7. Click Paste Frames. The frame is pasted at the require location.
6.7.4.6 Select a Single Frame
1. Click the frame you want to select.
2. Flash highlights the frame in the Timeline.
3. If you have difficulty selecting a regular frame between two keyframes, press and
hold Ctrl, then click the frame you want to select.

LET US REVISE

1. Director is a software to create movies.


2. Stage is the window where all the action takes place.
3. Score provides the movie’s timeline.
4. The Cast Window contains the cast members of your movie.
Copyright 2015. Laxmi Publications Pvt Ltd.

5. In the Cast window, you can create or import new cast members to appear as sprites on the
Stage.
6. Toolbar presents icon shortcuts to common functions and operations.
7. A library palette is a palette which contains Director’s built-in behaviours.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 261

8. There are four types of inspectors in Director, each performs a specific task.
9. The main menus in Director are: File, Edit, View, Insert, Modify, Control, Xtras, Window and
Help.
10. A movie can consist of one or more cast libraries.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

11. Director uses its graphics editor, the Paint window, for most of its painting requirements.
12. Importing lets you create cast members from external media.
13. You use the Stage to determine where media elements, or cast members, should appear onscreen.
14. A sprite is an object that controls when, where, and how cast members appear in a Macromedia
Director MX 2004 movie.
15. The Text tool in Director’s Tool palette enables you to add text directly on the Stage.
16. The Text window, enables you to create and format blocks of text.
17. Sound can inform, guide, and stimulate the interest of the user.
18. Digital video is simply the result of capturing, storing, transmitting, and displaying a rapid
succession of digitized images on a computer.
19. Director can play digital video using a feature called direct-to-Stage.
20. You can use the Behaviour inspector to create and modify behaviours to perform basic actions.
21. Flash is the most popular program for creating animations not only for Windows based programs
but also for Internet.
22. The Selection tool lets you select entire objects by clicking an object or dragging to enclose the
object within a rectangular selection marquee.
23. You can use the Free Transform tool to freely transform objects, groups, instances, or text
blocks.
24. The Lasso tool can also be used to split shapes or select portions of a line or shape.
25. When you draw with the Pen tool, you click to create points on straight line segments, and click
and drag to create points on curved line segments.
26. To place text blocks on the Stage, you use the Text tool.
27. Drawing with the Line tool creates a perfectly straight line that extends from the starting point to
the end point.
28. Pencil tool is used to draw lines and shapes.
29. The Brush Tool is used to paint with brush-like strokes and to fill enclosed areas with colours.
The fills can be solid colours, gradients, or fills derived from bitmaps.
30. The Ink Bottle Tool is used to change the colour, style, and thickness of existing lines.
31. The Paint Bucket Tool is used to fill enclosed areas with colour, gradients or bitmap fills.
32. The eye dropper tool is used to acquire the colour and style information from existing pencil
lines, brush strokes, and fills.
33. When you are zoomed in close on the screen, you can easily navigate the Flash workspace
contents by using the Hand Tool.
Copyright 2015. Laxmi Publications Pvt Ltd.

34. Line tool allows you to draw various lines on the screen.
35. Using the pen tool too you can draw curves.
36. An animation in fact is running the various scenes together.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
262 Introduction to Multimedia

MULTIPLE CHOICE QUESTIONS

1. Sound cannot be incorporated in the movie.


(a) Yes (b) No.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

2. Cast library of a movie can be changed.


(a) True (b) False.
3. You can create Digital video using Director.
(a) Yes (b) No.
4. Stage is the place where all the action takes place.
(a) True (b) False.
5. Text window is used for typing small text.
(a) True (b) False.
6. A scripting language is considered
(a) a subset of HTML (b) a form of BASIC (c) a very high level language
(d) a very low level language
7. How can you use text in a shape tweening
(a) Text cannot be used in a shape tweening
(b) make sure that text is broken tweening
(c) make sure the text is broken apart
(d) None of the above.
8. A media steam can be
(a) On demand (b) live (c) both (a) and (b)
(d) None of the above.
9. The biggest obstacles in the use of animation on the web
(a) bandwidth limitations (b) difference in platforms (c) browser support
(d) All of the above.
10. With multimedia authoring software you can make
(a) video productions and animations
(b) games and interactive web sites
(c) demo disks and guided tours
(d) all of the above.
11. Director software is used to create
(a) animations
(b) multimedia presentations
(c) interactive multimedia applications
Copyright 2015. Laxmi Publications Pvt Ltd.

(d) all of the above.


12. Elements are organized as pages of a book or a stack of cards in an ____________ authoring
system.
(a) Card based (b) Icon based (c) Time based

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 263

13. A broadcasting service transmitted via the Internet.


(a) Web radio (b) Internet radio (c) Web or Internet radio
(d) None of these.
14. Page based authoring system contains media object(s)
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

(a) buttons (b) text fields (c) graphic objects


(d) all of the above
15. Streaming media is a media that is consumed ________ while it is being delivered.
(a) read (b) heard (c) viewed
(d) all of the above.

TRUE/FALSE QUESTIONS

1. Score provides the movie’s timeline.


2. Toolbar does not present icon shortcuts to common functions and operations.
3. The main menus in Director are: File, Edit, View, Insert, Modify, Control, Xtras, Window and
Help.
4. Importing lets you create cast members from external media
5. The Text tool in Director’s Tool palette enables you to add text directly on the Stage.
6. Digital video is simply the result of capturing, storing, transmitting, and displaying a rapid
succession of digitized images on a computer.
7. Flash is the most popular program for creating animations not only for Windows based programs
but for Internet.
8. The Lasso tool cannot be used to split shapes or select portions of a line or shape.
9. Drawing with the Line tool creates a perfectly straight line that extends from the starting point to
the end point.
10. The Ink Bottle Tool is not used to change the colour, style, and thickness of existing lines.
11. When you are zoomed in close on the screen, you can easily navigate the Flash workspace
contents by using the Hand Tool.
12. An animation in fact is running the various scenes together.

MATCHING COLUMNS

Match the matter in Column A with the matter in Column B.


Column A Column B
A. Mask layer 1. .avi
B. Program used to create full, multimedia 2. The final stage of multimedia project
Copyright 2015. Laxmi Publications Pvt Ltd.

productions, such as simulations and tutorials production


C. Tranporting real time voice and video over 3. script editor for debugging the user code
telecommunication services

D. A motion picture compression system 4. encapsulated postscript

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
264 Introduction to Multimedia

E. Multimedia authoring 5. GIF


F. Lingo 6. two or more
G. EPS 7. layer used to create an extra effect in Flash
H. The standard movie/video format for windows 8. authoring software
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

I. A compressed bitmap file tominimize the file size 9. video conferencing


J. Frame necessary to create animation 10. MPEG

FILL IN THE BLANKS WITH APPROPRIATE WORDS

a. timebased b. timeline c. icon based d. object


e. JPEG f. Shockwave format g. virtual reality h. viewed
i. Colour lookup table j. cast k. Lingo l. end
1. The __________ is a multimedia database containing still images, sound files, text, palattes,
quickdraw shapes, programming scripts, etc.
2. In a multimedia authoring systems, multimedia elements and events are often treated as _________
that live in a hierarchical order of parent and child relationships.
3. Elements and events are organized along a timeline in _________ authoring system.
4. Multimedia elements and interaction events are organized as onjects in a structural framework or
process in an ____________ authoring system.
5. ________ is one of the file formats used by macromedia flash to save animation sequence.
6. The GIF format uses a _________ to store the colour values of pixels.
7. __________ is look and feel of virtual objects in virtual domain.
8. For still pictures, the file format is _____________ and for motion pictures the file format is
MPEG.
9. With time-based tools elements and events are organized along a ________.
10. Card-based tools are best used with elements that can be _____________ individualy like the
pages of a book.
11. Time based tools are best to use when you have a message with a beginning and __________.
12. Director utilizes ___________ a full featured object oriented scripting language, to enable
interactivity and programme control.

DESCRIPTIVE TYPE QUESTIONS


1. What is there on Director’s interface?
2. What does the Score Editor do?
3. What is Cast Editor?
4. Describe the various tools available under Toolbar in Director.
Copyright 2015. Laxmi Publications Pvt Ltd.

5. What does Library palette contain?


6. What are Inspectors?
7. Describe the various commands available under the menu.
8. Which are the painting tools available in Director.
9. How would you import images to the Stage in Director?

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Multimedia Authoring 265

10. What are Sprites?


11. How would you use the Text window?
12. What is Digital Video?
13. What are Behaviours?
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

14. Write a short note on Lingo.


15. What is the Cast window?
16. Describe what all is available under the following menus of Flash.
File menu Edit menu
View menu Insert menu
Modify menu Text menu
Control menu Windows menu
Help menu
17. What does the following tools do?
Arrow Tool The Subselection Tool
The Line Tool The Lasso Tool
The Pen Tool The Text Tool
The Oval Tool The Rectangle Tool
The Pencil Tool The Brush Tool
The Free Transform Tool The Fill Transform Tool
The Ink Bottle Tool The Paint Bucket Tool
The Dropper Tool The Eraser Tool
The Hand Tool The Magnifier Tool
18. How would you draw with various lines?
19. How would you customize a line?
20. How would you draw curves with the Pen tool?
21. How would you draw an oval shape?
22. How would you draw a rectangle shape?
23. How is brush tool used?
24. How is paint bucket tool used?
25. How would you set speed and dimensions of a movie?
26. How would you add various frames?
27. Describe the process of creating an animation frame by frame?
28. How would you select frames?
29. How would you modify frame properties?
30. How would you move, copy, select a frame?
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
266 Introduction to Multimedia

ANSWERS TO OBJECTIVE TYPE QUESTIONS

Multiple Choice Questions


All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

1. b 2. b 3. b 4. a
5. b 6. c 7. b 8. c
9. d 10. d 11. d 12. a
13. c 14. d 15. d
True False Questions
1. T 2. F 3. T 4. T
5. T 6. T 7. T 8. F
9. T 10. F 11. T 12. T
Matching Columns
A. 7 B. 8 C. 9 D. 10
E. 2 F. 3 G.. 4 H. 1
I. 5 J. 6
Fill in the Blanks with appropriate words
1. j 2. d 3. a 4. c
5. f 6. i 7. g 8. e
9. b 10. h 11. l 12. k
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
Chapter
HTML Basics
7
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

7.1 DOCUMENT OVERVIEW


HTML stands for Hypertext Markup Language. This is text oriented language used for writing
programs to create web sites. There is no need for compiling or doing anything else as
you would do in any other programming language. However, there are few things which
you have to take care of as you do in your text related documents. You can have Headings,
Paragraphs, Bulleted text, etc. You can even have tables too. However, there is no fix page
layout as such. HTML does not support it. You can have the text in Bold, Italics, etc. But,
each one of the above set of text has to be tagged accordingly, e.g., Heading, for the text
to be taken as headings. In fact Markup means this only. But, remember the file has to
be text and not a word processing document. A simple ASCII text file.
As said earlier, HTML is used to create web sites. Since we now know that the text files
are created using HTML but how are these so-called text files going to be used. These
text files are used with programs called HTML browsers, take these HTML files and create
web sites.
Follow the following steps to create a new web page:
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
268 Introduction to Multimedia

1. Open a text editor or word processor.


2. Choose file> New to create a new, blank document.
3. Type the following text to create the HTML content as shown next:
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Use<BR>for line breaks.

4. Choose File>Save As.


5. In the dialog box that appears, choose Text Document for the type.
6. Give the document the .htm or .html extension.
7. Choose the folder in which to save the Web page.
8. Click Save.
Remember
You must save the file in the Text Document format. Without this your file will have problem.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 269

7.1.1 Looking at Your Page in a Browser


Once you have created a page, you may want to see how it looks like in a browser. In
fact, since you do not know which browser the actual user will be using, it’s a good idea
to look at the page in several browsers.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Follow these steps to look at your page in a browser:


1. Open your browser software (Netscape Communicator, Microsoft Internet Explorer,
etc.)
2. Choose File > Open, Open File, or Open Page (just not Open Location), depending
on the browser.
3. In the dialog box that appears find the Web page that you want as it will appear
when you actually publish it on the server.

Remember
If your Web pages does not appear in the Open dialog box, make sure that you have saved
it as Text Only and given it the .htm or html extension.
You don’t have to close the document in the text editor before you view it with a browser.
This makes editing much faster. You can switch to the editor, make your changes, and
then back to the browser and click Reload to view the changes. It is not necessary to
Copyright 2015. Laxmi Publications Pvt Ltd.

publish your pages on the server before you view them. Publishing them on the server
does not change them in any way (it only moves them to a new location).
7.1.2 Home Page Designating
Home page is the page which is shown on the screen, when the site is opened. The most
common home page name is index.html but this varies from server to server.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
270 Introduction to Multimedia
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

To designate one page as the home page:


1. Create the home page as described above.
2. Name the file index.html (or whatever the default home page name is for your server).
3. Place the home page in the principal directory that contains your Website.
Remember
Your home page should have links to all the other information available at your Web site.
Your home page should be a table of contents to your site, not just the first page.
If you want your users to be able to reach the other pages in your site, make your home
page clean, neat, and fast.
See the home page of Naukri.com, which is self explanatory.
Copyright 2015. Laxmi Publications Pvt Ltd.

7.1.3 Starting Your Web Page


When you want to see your page in the browser, the browser needs information right away
about the kind of document it is, and how it should be displayed. You should begin every
Web page with the !DOCTYPE and HTML tags.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 271
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Follow these steps to start your Web page:


1. Type <!DOCTYPE HTML PUBLIC “-// W3C//DTD HTML at the top of your Web page,
as shown on the next page.
2. Type the version of HTML you’re using, in this case 4.0. If you are using lots of fonts
and colours, use the word Transitional with 4.0. If the pages have lots of frames,
use HTML 4.0 Frameset.
3. Type //EN”> <HTML>.
4. Now your text file is ready. Save it under a name.
5. Start your browser and open this particular file.
6. See that there is a blank web page since you have not given any substance to your
page. This is what we will do in the next step.
Remember
While you can get away without either the !DOCTYPE or HTML tags, you should always
Copyright 2015. Laxmi Publications Pvt Ltd.

include both to ensure that your page is correctly recognized, regardless of the browser
used.
Create a template with the !DOCTYPE and HTML tags already typed in as a starting point
for all your pages.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
272 Introduction to Multimedia

7.2 HEADER ELEMENTS


Nothing is complete without a head and a body. Look at yourself and you know what I am
talking about. Similarly in HTML too we have Head and Body as the two main sections.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

The Head section provides information about the URL of your Web page as well as its
relationship with the other pages at your site. The only element in the HEAD section that

is visible to the user is the title of the Web page. The BODY of your HTML document
contains the bulk of your Web page, including all the text, graphics, and formatting.
Copyright 2015. Laxmi Publications Pvt Ltd.

Follow the following steps to create the Head section:


1. Directly after the initial !DOCTYPE and HTML type <HEAD>.
2. Create the HEAD section, including the TITLE.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 273

3. Type </HEAD>.
Follow these steps to create the BODY:
1. After the final </HEAD> tag and before anything else, type <BODY>.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

2. Create the contents of your Web page.


3. Type </BODY>.
7.2.1 Creating a Title
Each page must have a title. A title should be short and descriptive. In some browsers,
the title appears in the title bar of the window; in others, the title is centered at the top of
the screen. The title is used in search indexes as well as in browsers’ history lists and
bookmarks.
Copyright 2015. Laxmi Publications Pvt Ltd.

Follow the following steps to create a title:


1. Place the cursor between the opening and closing HEAD tags, as shown on the
next page.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
274 Introduction to Multimedia

2. Type <TITLE>.
3. Enter the title of your web page.
4. Type </TITLE>.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Remember
There must be only one TITLE tag in each HTML document. A title cannot contain any
Copyright 2015. Laxmi Publications Pvt Ltd.

formatting, images, or links to other pages. Don’t use colons or backslashes in your titles.
These symbols cannot be used by some operating systems for file names. It’s good idea
to use a common element to begin each page’s title.
For example, you could begin each page with My Page: followed by the specific area
described on that page.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 275

7.3 SECTION HEADINGS


Various type of headings can be placed in the text. Maximum of 6 headings are allowed.
But, you can use only 3 at a time. Each one of the heading is numbered from 1 onward.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

Obviously you cannot repeat the numbers.


Let us try to create a heading.
1. In the BODY section of your HTML document, type (Hn where n is a number from
1 to 6, depending on the level of header that you want to create). Here I have used
it as H1.
2. Type the contents of the header, in this case I have typed it as “Information
Technology Class X”.
3. Type </Hn> where n is the same number used in step 1, in this case H1.
4. The result of this typing and result in browser are both shown next.

7.4 BLOCK HEADINGS


For every new paragraph in HTML you must use the p tag, as was mentioned in the earlier
paragraph. The following example shows how it is done:
1. After the heading line, press Enter to reach the next line in Word Pad.
2. Type <p> to start the new paragaph.
3. Type the text which you want to put in the paragraph. I have typed here KHANNA
PUBLISHING PVT. LTD.
4. Close the paragraph by using the tag </p>.
5. The text in Word Pad and its effect in the browser are shown next.

7.5 LISTS
HTML support 3 type of lists: Unordered lists, Ordered lists and Definition lists. Ordered
lists are numbered in some fashion, while Unordered lists are bulleted. Definition lists
consist of a term followed by its definition.
Both ordered and unordered lists require start and end tags as well as the use of a special
element to indicate where each list item begins (the <LI> tag). Unordered lists can be
preceded by one of several bullet styles: a closed circle, an open circle, or a square.
Copyright 2015. Laxmi Publications Pvt Ltd.

The tags for an unordered list are <UL> and </UL>. Ordered lists can be preceded by
Arabic numerals, uppercase or lowercase Roman numerals, or uppercase or lowercase
alphanumeric characters. The tags for an ordered list are <OL> and </OL>. Definition
lists require a start tag (<DL>) and end tag (</DL>) and two special elements: one for
definition terms (the <DT> tag) and one for definitions (the <DD>) tag.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
276 Introduction to Multimedia

In addition to these three types of lists, HTML also allows two other types of lists that are
much less commonly used: Directory lists (which use the <DIR> tag) and Menu lists (the
<MENU> tag). However, these two types of lists are not very popular.
7.5.1 Unordered Lists
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

As said earlier, this list uses the <UL> and </UL> tags. The only element that can be
contained inside the <UL> and </UL> tags is a list item, signified with the list item element.
The list item element uses the <LI> tag (and optionally the </LI> tag) and contains the
actual content of your lists. Both <UL> and <LI> have the same set of attributes:
TYPE=”CIRCLE”
TYPE=”DISC”
TYPE=”SQUARE”
The CIRCLE attribute value is used for a hollow bullet, the DISC type creates a solid bullet,
and the SQUARE value renderes a solid block. The default appearance for a list is with a
disc. You can use an optional </LI> end tag at the end of each list item, however, the
</UL> end tag is always required at
the end of the unordered list.
Eventhough both the <UL> tag and
t he < LI > t ag c an t ak e t he T Y P E
attribute, it’s much more common to
use the attribute with the <UL> tag so
that the entire list takes on the
appearance you desire. For example,
here is some HTML that generates
two separate lists:
<TITLE>Menu Card</TITLE>
<BODY>
<p><Breakfast>
<UL>
<LI>Eggs
<LI>Milk
<LI>Apples
Copyright 2015. Laxmi Publications Pvt Ltd.

<LI>Coffee
</UL>
<p>Dinner

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 277

<UL TYPE=”SQUARE”>
<LI>Soup
<LI>Salad
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

<LI TYPE=”CIRCLE”> Chicken


<LI TYPE=”DISC”>Rice
<LI TYPE=”CIRCLE”>Dessert
</UL>
See the result of this in the browser
next.
One important aspect of lists is that
you can nest one list inside another
to create a sublist. The default
appearance of the sublists will vary
from the main list, with the first
sublist using circle bullets and the
next nested list, using squares. For
example:
<UL>
<LI>Microsoft
<UL>
<LI>Windows
<LI>Office
<UL>
<LI>Microsoft Word
<LI>Microsoft Excel
</UL>
<LI>Internet Explorer
</UL>
<LI>Adobe
Copyright 2015. Laxmi Publications Pvt Ltd.

<UL>
<LI>PageMaker
<UL>

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
278 Introduction to Multimedia

<LI>Version 7.0
</UL>
</UL>
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

<LI>CorelDRAW
<UL>
<LI>CorelDRAW 11
<UL>
<LI>CorelTRACE
</UL>
</UL>
</UL>
The list would be displayed with the sublists indented beneath the main list, much like we
have shown in the source code for readability. There are a total of seven lists here. Each
<UL> tag begins a new list. The main list (Microsoft, Adobe, and CorelDRAW) has six
sublists — two per bulleted point. The above figure shows the same.
7.5.2 Creating Ordered Lists
The ordered list element’s <OL> and </OL> tags are used to create ordered lists. Like
unordered lists, ordered list must contain list item elements (with the <LI> tag) to contain
your list’s text. In fact, ordered lists are identical in behaviour to unordered lists, except
they use numbers instead of bullets and you can use an attribute to start numbering at a
number other than one.
Here are the attributes you can use with the <OL> tag:
TYPE=”1” (Arabic numbers)
TYPE=”a” (lowercase alphanumeric)
TYPE=”A” (uppercase alphanumeric)
TYPE=”i” (lowercase Roman numbers)
TYPE=”I” (uppercase Roman numbers)
Copyright 2015. Laxmi Publications Pvt Ltd.

START=”X” (Arabic numbers)


The Type attribute allows you to specify the numbering system you want to use. Arabic
numbers are the default. In addition, when you are using ordered lists, the <LI> tag can
use the VALUE attribute to make a particular list item have a certain number.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 279

The value attribute is shown here:


<OL>
<LI>Milk
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

<LI>Bread
<LI>Ham
<LI VALUE=”10”>Coffee
<LI>Fruit
</OL>
In a browser the order of this list would
appear as follows:
1. Milk
2. Bread
3. Ham
10. Dark Chocolate
11. Fruit
7.5.3 Definition Lists
The definition list element uses the <DL> start tag and the </DL> end tag to create a
definition list. This list is rendered without bullets. The <DT> tag is used for definition terms
(that is, the name or title of the item you
are defining). The <DD> tag is used for
the definitions themselves. For example,
<DL>
<DT>Microsoft Excel
<DD>A spreadsheet program
<DT>Microsoft Word
<DD>A word processing program
</DL>
Copyright 2015. Laxmi Publications Pvt Ltd.

Here is how this would look in the


browser.
7.5.4 Using Directory and Menu Lists
There are two other types of lists defined in HTML: Directory lists and Menus. However,
these two types of lists are rarely used, and Navigator and Internet Explorer treat them
identically to the way they treat unordered lists.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
280 Introduction to Multimedia

The directory list element is signified by the <DIR> and </DIR> tags. This element was
intended to be used for directory lists of short items (some sources recommend 20 or
fewer characters so they can be listed in columns 24 characters wide). Here is a quick
example of a directory list:
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

<DIR>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</DIR>
Similarly the <MENU> and </MENU> tags make up the menu element, which is used for
the menu lists. Menus can appear with different spacing results in different browsers, but
Navigator and Internet Explorer don’t display menu lists any differently than unordered lists.
Here is a quick sample menu:
<MENU>
<LI>Milk
<LI>Butter
<LI>Bread
</MENU>
For both directory and menu lists, the only item that should be contained is a list-item
element (the <LI> tag).

7.6 UNIFORM RESOURCE LOCATORS


Full form of URL is Uniform Resource Locator. It is the location of a web site or called the
domain name of the site. It is like the telephone number of the person. For better
understanding, let us see what the domain name means.
7.6.1 Understanding Domain Names
As we know, there is nobody who controls the Internet. Then you might wonder as to who
allots the name to the users. An addressing system was designed by the Internet
Engineering Task Force (IETF). This addressing scheme assigns names and numbers
to identify the computers on the Internet. These names are called domain names and
Copyright 2015. Laxmi Publications Pvt Ltd.

numbers are called IP addresses.


Every computer system on the Internet has both a domain name and an IP address. This
address contains four sets of numbers separated by periods or dots. Each set of numbers
can have the values ranging from 1 to 255, The numbers between the dots is called an
octet. An IP address is organized from left to right where the leftmost represents the largest

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 281
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
282 Introduction to Multimedia

network organization and


the rightmost octet
describes the actual
network connection. These
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

combined parts are always


unique for the given host.
This scheme has been
proved good but the
numbers become difficult
to manage and to quite an
extent impossible to
remember. A method for
recognition of computers
by names was therefore
devised. A smaller network
making up the Internet, and
having many computers or
even smaller networks
within it, is called a domain. This domain may represent either a type of organization or a
geographical location. Smaller networks and computers forming part of the domain may
be further split up into sub-domains.
For example, my network connection has the following codes:
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 283

nda.vsnl.net.in
These codes signify the following:
nda A code given by VSNL, denoting their computer name.
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

vsnl Organization code of the service provider, in this case VSNL.


net Network provider
in Country code, i.e., India.
Various other options for Network providers are:
com A company or commercial organization
Example, microsoft.com
net Network resources or Internet Service provider
Example, internic.net
mil Available to United States Government agencies, including the US military
Example, army.mil
org Organization, like Non-profit Government Organizations (NGOs), Religious
bodies, etc.
Example, osho.org
gov Government organizations
Example, pmo.gov
edu Educational institutions, colleges, schools, etc.
Example, du.edu
to This is relatively new alternative to the .com extensions. It can be used for
virtually any purpose.
Example, toinfo.to
Some other options for countries are (there are many more) :
au Australia
uk United Kingdom
usa United States of America
fr France
ca Canada
Copyright 2015. Laxmi Publications Pvt Ltd.

7.7 IMAGES
HTML supports all kind of graphic images. They can be logos or photographs. Graphics
once inserted are displayed on the site page. Follow the following steps to insert an image
on a page:

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
284 Introduction to Multimedia
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

1. Place the cursor where you want the image to appear.


2. Type <IMG SRC= “image.ext” where image.ext indicates the location of the image
file on the server.
Copyright 2015. Laxmi Publications Pvt Ltd.

3. In the example I have typed this after the <HEAD> line. Since I would be using
GLOBE.JPG in the text, I have used its location.
4. If desired, type BRODER = n, where n is the thickness of the border in pixels. I
have not used any.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 285
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

5. Type the final >.


6. See the result, how it looks in the browser on the next page. Also note the text how
it is typed in the word pad.
Copyright 2015. Laxmi Publications Pvt Ltd.

Remember
You can add graphics with extensions like, GIF, JPEG, PNG, or any other kind of images
that the browser recognizes. Don’t expect your visitors to the site to wait for more than 30
seconds to load and view your page.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
286 Introduction to Multimedia

So get the smaller images, create miniatures of large images and let visitors choose to
view the larger images only if desired.
7.7.1 Specifying Size for Fast Viewing
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

As mentioned above your image should be small so that it can be loaded fast. If you specify
the image’s dimensions, the browser can fill in the text around the image as the image
loads, so that your visitors can read the page without having to wait for the images. Follow
the following steps to specify the size of your image:
1. Open the image in Photoshop, or other image editing program.
2. Choose Image > Image Size.
3. Choose pixels for the unit of measure in both the Width and Height pop-up menus.
4. Write down the values shown in the Width and Height text boxes. In this case the
width is 150 and height is 185 pixels.
5. In your HTML document where you wish the image to appear, type <IMG SRC =
"image.location", where image.location is the location of the image on the server.
This is done as was done in the previous case.
6. Type WIDTH=x HEIGHT=y, using the values you jotted down in step 4 to specify
the values for x and y (the width and height of your image) in pixels. In this case
width would be 150 and height to be 185.
7. Add other image attributes as described and then type the final >.
8. See how the figure looks like on the next page. I have deliberately used width as
100 and height as 145, since if I had used the same options, you would not have
noticed the difference in the picture. Text is also given there.
Copyright 2015. Laxmi Publications Pvt Ltd.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds
HTML Basics 287
All rights reserved. May not be reproduced in any form without permission from the publisher, except fair uses permitted under U.S. or applicable copyright law.

7.7.2 Wrapping Text around Images


It is not that you would always have the image covering the full width of the screen. You
can use the ALIGN attribute (with the left and right variables only) to wrap text around an
image.
1. Type <IMG SRC = "image.location” as was done earlier.
2. Either type ALIGN=left to align the image to the left of the screen while the text flows
to the right or type ALIGN= right to align the image to the right edge of the screen
while the text flows on the left side of the image.
Copyright 2015. Laxmi Publications Pvt Ltd.

3. Add other image attributes, as described in other parts of this chapter, if desired.
4. Type the final >.
5. See the result in the browser, as shown next alongwith the HTML text.

EBSCO Publishing : eBook Collection (EBSCOhost) - printed on 11/1/2019 8:21 AM via UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD
AN: 1223953 ; Bangia, Ramesh.; Introduction to Multimedia
Account: ns145102.main.eds

You might also like