BMG 203

COMPUTER ANIMATION:
INTRODUCTION TO FLASH

. The draft instructional material is being made

available “as received” from authors. The editing
and various other quality checks are under progress.
The uses are advised to consult Study Centers for
any missing content, updates and instructions
according to syllabi of course.
UNIT 1 INTRODUCTION TO FLASH
Program Name: B.sc (MGA)
Written by: Srajan
Structure:
1.0 Introduction
1.1 Unit Objectives
1.2 Introduction to Adobe Flash CS6
1.2.1 New Features of Flash CS6
1.3 Using the Flash Interface
1.4 Creating a New Document
1.5 Changing Movie Properties
1.6 Flash Panels
1.7 Using the Movie Explorer
1.8 Summary
1.9 Key Terms
1.10 Questions and Exercises
1.11 Further Reading.

1.0 INTRODUCTION
Flash is multimedia software that allows you to create highly rich
media content, i.e., a product that is a combination of audio, video, animation,
vector or raster graphics etc. Its final rendered file format is .SWF, which
stands for ‘Shockwave Flash’. A Flash Player is required to run .SWF files.
Flash Player is actually an application that is used to display content saved with
.SWF extension. This player is automatically installed while installing Flash
and can also be downloaded from the official web site of Adobe.
Flash was launched in 1996 by Macromedia and had become popular
due to its ease of use and the variety of features it offered pertaining to adding
audio, video, creation of animations etc. Currently, it is being developed by
Adobe Systems.
Action Script is one of the most important features of Flash that allows
the creation of applications. Due to this, Flash can be used to create
presentations, animations, interactive exercises, applications, games, graphics
for web etc. You can create a complete web site by using Flash. While vector
graphics can be created in Flash, raster graphics can be imported. These aspects
will be discussed in detail in this unit along with other topics like creating a
new document, changing movie properties, motion tweening, masking, features
of Flash CS6 and so on.

Introduction to Flash 1
 1.1 UNIT OBJECTIVES:
After studying this unit you will be able to:
• Understand Flash CS6
• Discuss the new features of Flash CS6
• Understand the use of Flash interface
• Create Flash panels
• Identify the changes in movie properties
• Discuss the different elements of Flash panel

1.2 INTRODUCTION TO FLASH CS6

The latest version of Flash supports a host of new features that has further
enhanced the usability and utility of the software. The new features that have
been added to Flash CS6 are Mobile Content Simulation for AIR, Toolkit for
createJS, Export Sprite Sheets, Direct Mode Publishing and so on. Along with
these, two very important features of the latest version are High Efficiency
SWF Compression and Export PNG Sequence. Web integration has also been
made easier and more convenient in this version. Keeping ion consideration the
extent of media applications nowadays, the MP3 or FLV players are
summarized by Media playback components that may be placed in an SWF,
data components and data binding APIS, the project panel, v2UI components
and transition class libraries. These features have helped Flash to provide
greater productivity, more media and publishing output, greater variety of rich
multimedia applications, etc.

1.2.1 New Features of Flash CS6

In addition to the old features of Flash, Adobe has introduced various new
features in Flash CS6. They are as follows:
1. Mobile Content Simulation for AIR
The new Mobile content simulator allows you to simulate Hardware
keys, accelerometer, Multi-touch and Geo-location.
2. Choose network interface for remote debugging for AIR
When you publish an AIR app to an Android or iOS device, you can
choose the network interface to use for remote debugging. Flash CS6 will
package the IP address of the selected network interface into the debug
mode mobile application.
3. Toolkit for Create JS
The Adobe Flash Professional Toolkit for create JS is an extension that
enables designers and animators to create assets for HTML5 projects using
the open source CreateJS JavaScript libraries. The extension supports most
of the core animation and illustration capabilities of Flash including
vectors, bitmaps, classic tweens, sound and JavaScript timeline scripting.

Introduction to Flash
4. Export sprite sheets.
You can now export a sprite sheet by selecting a symbol in the Library or
on stage. A sprite sheet is a single graphic image file that contains all the
graphic elements used in the selected symbol. The elements are arranged in the
tiled format in the file.
5. High efficiency SWF compression
For SWFs that target flash player 11 or later, a new compression algorithm,
LZMA is available. The new compression can be up to 40% more efficient,
particularly for files that contain a lot of ActionScript or vector graphics.
6. Direct mode publishing
A new window mode called Direct is available which enables hardware
accelerated content using stage 3D.
7. Support for Direct render mode in AIR plugins
This feature brings Flash Player’s Direct mode rendering support for
StageVideo/Stage3D to AIR Applications. Direct mode can be set for AIR for
Desktop, AIR for iOS and AIR for Android.
8. Debug iOS through Wi-Fi
You can now debug AIR applications on iOS through Wi-Fi, including
breakpoints, step-in and step-out, variable watcher and trace.
9. Support for captive runtime for AIR
The Publish Settings dialogue for AIR now has an option for embedding
the AIR runtime into the application package. An application with the runtime
embedded can run on any desktop, Android, or iOS device without the shared
AIR runtime installed.
10. Native extensions for AIR
You can incorporate native extensions into the AIR application you
develop in Flash. By using native extensions, your applications can access all
of the features of your target platform, even if the runtime itself doesn’t have
built-in support for them.
11. Export PNG sequence
Use this feature to generate image files that flash or other applications can
use to generate content. PNG sequences are often used in gaming applications.
This feature allows you to export a sequence of PNG files from a Library item
or individual movie clips, graphic symbols and buttons on the stage.

CHECK YOUR PROGRESS

1. What is Flash used for?
2. Which are the two very important features of Flash CS6?
3. What is a sprite sheet?
4. What is the benefit of embedding the AIR runtime into the
application package?
5. What is LZMA and how is it useful?

Introduction to Flash 3
 1.3USING THE FLASH INTERFACE
This section will explain the Flash interface in detail.

Fig. 1.1 The Flash Interface

The Flash interface is divided into five main elements. They can be described
as follows:

1. Stage

Fig. 1.2 The First Element of Flash Interface ‘Stage’

Stage is the part of interface where all the elements created in Flash are
displayed. Stage is divided into two areas-white and grey. White area is the
main work area where all the elements are created. The elements that are
created outside the white area, i.e. in the grey area are not displayed.
2. Timeline

Fig. 1.3 The Second Element of Flash Interface ‘Timeline’

Introduction to Flash
The timeline controls and shows all the elements of the project over a span of
time. Frames and layers are used to organize the work. Key frames of the Flash
document are created in the timeline to handle the visibility of the document’s
content and an object’s animations, like movement of the object from one
position to another etc.
Timeline is one of the most important options of Flash. The various
aspects of the timeline are as follows:
• Status bar

Fig. 1.3(a) The Status Bar

In order to create a movie, number of frames per second (FPS) are used. The
status bar provides information about the frame rate, the current or selected
frame number and the elapsed time to the current frame.
In the screen shot as shown above, the ‘onion skin’ option has been
used to position and edit frame-by-frame animation.
• Layer Controls

Fig. 1.3(b) The Layer Controls

Layers are very important functions in Flash as they help the contents to be
separated so that one can edit the content with considerable ease. Layers help
in organizing the object as created in flash. They help in editing the objects on
one layer without affecting the objects on another layer. Layers are part of the
main timeline window.

Introduction to Flash 5
• Information bar

• Play Head
The play head option tells you about the frames that are currently being
displayed on the Stage. This is similar to the option of cuurent frame number in
the status bar.
• Frame View

Fig. 1.3(d) The ‘Frame View’

The ‘Frame View’ helps the user to control the appearance of the timeline. For
example, if someone wants that the timeline should appear as short, then he/she
can make it short, etc.
• Key Frame
Each key frame is important while doing animation. Anything created in Flash
creates a key frame in the timeline. For example, consider an object that is
animated to move from right to left. In this animation, there are two key frames
involved and both are equally important. While in one key frame, the object
will be in right position, in the other it will be in left position.

Introduction to Flash
3. Property Inspector

Fig. 1.4 The ‘Property Inspector

The property inspector displays and allows the commonly used attributes of the
current selection to be changed in a single panel. As a property inspector makes
changes in the same panel, there is no need to open multiple panels to make
changes.
The options in the property inspector panel changes according to the object as
selected.
The screen shot of the property inspector panel as given above shows the
property of the document. For example, if a graphic symbol is selected then it
will show properties of graphics and if text is selected then it will show the
properties of the text.
To view the property inspector, go to ‘Windows’ and select ‘Properties’ from
the drop down menu. The short cut for accessing property inspector is
CTRL+F3.

Fig. 1.5 Selecting the Property Inspector

Introduction to Flash 7
 4. Tools

Fig. 1.6 The Toolbar used in Flash

The tools as listed in the basic tool bar are used to create elements or to edit the
elements like colour or changing the colous of elements, transforming the
elements, etc.

5. Panels

Introduction to Flash
Fig. 1.7 The panels and their uses
Panels are the windows that contain the tools and information that the user
needs while working on his/her project files. Each of the panel is used to view
and change the operations performed.

CHECK YOUR PROGRESS

6. Name the five main elements of Flash Interface.
7. Which option is used to position and edit a frame in frame animation?
8. What is the use of an information bar?
9. Which option of the timeline displays the current frame number of the screen?
10. State the importance of the property inspector in Flash.
11. What is the shot cut for the property inspector?
12. Explain the primary difference between the white stage area and grey stage
area.
13. What is frame rate?
14. Why are layers used in Flash?
15. What is the importance of a key frame?

1.4 CREATING A NEW DOCUMENT

Introduction to Flash 9
There are various options for creating a new document. The most common
method of creating a new document is selecting the new document option
through the ‘Start’ page. A second method is to access the ‘File’ option and
then select ‘New’ from the drop down list.

Fig. 1.8 Creating a New Document

After clicking on ‘New’, a pop up window opens; select the document that
needs to be opened and then click on OK button.

Fig. 1.9 A new Document Opened in Flash

1.5CHANGING MOVIE PROPERTIES

Introduction to Flash 1
Movie properties contain the basic information about a movie/document.
Configuring the movie properties is the first step in Flash. One can change the
movie properties any time. The movie properties panel can be opened through
the property inspector.

Fig. 1.10 Opening the Property Inspector

Clicking on the size button will open the Movie Property Panel.

Fig. 1.11 The Movie Property Panel

The screenshot given above shows the Movie Property Panel. The various
options in the above panel are as follows:
• Dimensions:It
provides the width and height of the document.
• Ruler Units:
Ruler units are linked with the dimensions column. At default, the
width and height of an object is measured in pixels but one can change
it to other units like inches, centimeters etc. by using the ruler
units’scoloumn.

Introduction to Flash 11
 • Match: The
match column has three options-printer, content and default. The printer
option has default frame size. The content option changes the frame
size of the movie as per the object size as created in Flash. The default
option has the default frame size; one can change size and make it the
default size by clicking on the ‘Make Default’ button (at the bottom of
the document property panel).
• Background
Colour: The background colour option provides the background colour
of the movie.
• Frame Rate:
Frame Rate provides the speed of the movie like 24 FPS (frames per
second).
• Auto-Save:
With this option, Flash automatically saves the file after the specified
time.

CHECK YOUR PROGRESS

16. Which option is used for changing movie properties?
17. Explain the different options in match columns.
18. What are the two ways in which a new document can be created in Flash?
19. List the options available in the movie property panel.

1.6 FLASH PANELS

Flash panels help to organize, enhance, or edit elements in Flash. There are
aNumber of such Flash panels and all panels’ help to enhance or edit elements.
All the flash panels can be enabled or viewed by clicking on ‘Windows’ and
then selecting the respective panel.
Some of the important Flash panels discussed in this section are as Follows:
1. Action panel
An action panel is used to write or edit code.It can be used to write code for an
object or a frame.Selecting a frame, button or a movie clip makes the Action
Script panel active.
To view the action panel, go to ‘Windows’, click on ‘Action’.

Introduction to Flash 1
Fig.1.12 The Action Panel

3. Color mixer panel

Fig.1.13 The color Panel

The color mixer is used to change stroke, fill color of the objects and to
create new colors.This is also used to create solid colors, gradient colors(multi-
color) and even bitmap images. The default color channel is RGB but one can
change it to HSB according to requirement.
To view the color mixer panel, go to ‘Windows’, then click on ‘Color’
from the drop down menu.
The following are the various options available in the color mixer panel:
1. Stroke color:This option is used to color the strokes of the objects.
2.Fill color:This option is used to fill color in the
fill area of the objects.There are four types of fill
color options.These are as follows:
(a) Solid : It is used to fill in a flat solid color.
(b) Linear: Linear color means that it follows a
linear path.
(c) Radial: Radial color means that it follows a
circular path.both are used for multicolor
(gradients) purposes.
(d) Bitmap:It is used to insert an image in the fill
area instead of color.

Introduction to Flash 13
 3.Color swatches panel

Fig.1.14 The Color Swatches Panel on Windows

Color swatches panel is also known as ‘library of
colors’.It is a very helpful panel because one can
directly pick colors from it.It has around 216 web
colors.In this, one can also save created
colors.Both solid and multi colors can be saved
in this panel.
To view the color swatches panel, go to
‘Windows’, click on ‘Swatches’ .The shortcut for
viewing color swatches is Ctrl+F9.
4. Align Panel

Fig.1.15 Align Panel

The align panel aligns the selected object along the axis either
horizontally or vertically. The selected object enclosed in the
bounding boxes determines whether the object is aligned vertically
along the right edge, in the center, left edge, horizontally or bottom
edge.
Using the align panel, you will be able to distribute the selected
objects so that their centers or edges are evenly spaced. You can
resize the selected objects so that the horizontal or vertical
dimensions of all objects match those of the largest selected object.
You can also align the selected object to the ‘Stage’. You can apply
one or more align options to selected objects.
To view the align panel, go to ‘Windows’, & then select ‘Align’. The shortcut
for viewing the align panel is Ctrl+K.

Introduction to Flash 1
 5. Info Panel

Fig.1.16 The Info Panel

The info panel displays the size & the location of the instance.
Location, here, refers to the recitation point; its red(R), green(G),
blue(B), and alpha(A) values(if the instance has a solid fill); & the
location of the pointer. The info panel also displays the X & Y
coordinates of the symbol’s registration point at the symbols upper left
corner.
To view the info panel, go to ‘Windows’, click on ‘Info’. The shortcut
for viewing the info panel is Ctrl+I.
6. Transform Panel

Fig.1.17 Transform Panel

The transform panel is used to transform graphic object, as well as
groups, text, blocks, & instances. Depending on the type of element
you select, you are freely able to transform, rotate, skew, scale or
distort the element. You can change or add to the selection during a
transformation operation. You can able to the ‘constrain’ button at
the time of transformation, if you want to transform both the width
& height into an equal ratio.
To view the transform panel, go to ‘Windows’, click on
‘Transform’. The shortcut for viewing the Transform panel is
Ctrl+T.
7. Library panel

Introduction to Flash 15
 Fig.1.18 Library Panel
The Library in a Flash document stores media asset that you can
create or import for use. The Library stores and imports files such
as video files, sound clips, bitmaps, and imported vector artwork as
well as symbols. A symbol is a graphic, button, or movie clip that
can be created once and reused multiple times. You can also create
font symbols.
The library panel displays a scroll list with the names of all the
items in the library,which lets you view and organize these elements
as you work.An icon next to an item in the library panel indicates
the item’s file types.You can open the library of any Flash
document while working in Flash.
To view the library panel go to ‘Windows’ and then click on
‘Library’.The shortcut for viewing the library panel is Ctrl+L.
8. Behaviors Panel

Fig 1.19:The Behaviors Panel on Flash

Behaviors are pre-written Action scripts that you add to an
object to control that object. Behaviors let you add the power,
control and flexibility of Action Script coding to your documents
without having you create movie clips and video and sound files.
To view the Behaviors Panel, go to ‘Windows’, and then select
‘Behaviors’. The shortcut for viewing the Behaviors Panel is
Shift+F3.

Introduction to Flash 1
 9. Components panel

Fig 1.20: The Components panel on Flash

The option of Components gives you access to the user interface
components.
To view the Components panel, go to ‘Windows’, and then
select ‘Components’. The shortcut for viewing the components
panel is Ctrl+F7.
10. Accessibility panel

Fig.1.21 The Accessibility Panel

The accessibility panel shows the two fields-‘name’ and
‘description’.The ‘name’ field is used for shorter text equivalents
and the ‘description’ is used for longer ones.To view the
accessibility panel,go to’windows’, click on ‘Other Panels’, and
then select‘Accessibility’. The shortcut for viewing the accessibility
panel is Alt+F2.
11. History panel

Introduction to Flash 17
 Fig.1.22 The History Panel
The history panel keeps track of the all actions that are performed
while working. You can go back to the previous action any time
you want by selecting the ‘Action’ option in the history panel.
To view the history panel, go to ‘ Windows’, click on ‘Other
Panels’, and then select ‘History’. The shortcut for viewing the
history panel is Ctrl+F10.

Fig1.23 The process of viewing History panel

12. Scenes panel

Fig.1.24 The Scene Panel

The scenes panel is used to organize the document thematically. he
scenes panel displays a list of all the scenes in the movie. You can
add, delete, duplicate or rename scenes in this panel.Apart from
this,it also allows shuffling between scenes.
To view the scenes panel,go to ‘Windows’, click on ‘ Other ,
Panels’ and then select ‘Scenes’. The shortcut for viewing the
scenes panel is Shift+F2.

Introduction to Flash 1
 Fig.1.25 The process of viewing Scenes Panel

CHECK YOUR PROGRESS

20. What is the function of the action panel?
21. Write the shortcut for color mixer.
22. Differentiate between linear and radial colors.
23. Why is color swatch panel known as ‘library of colors’?
24. What kind of colors can be created using color swatch panel?
25. List the various fill color options.
26. What is the function of align panel?
27. Which panel is used to import files in flash?
28. Which panel helps to go back to the previous selected action?
29. What is the function of scene display?
30. What is a symbol?

1.7 USING THE MOVIE EXPLORER

The movie explorer shows the list of elements currently being used the creation
of a movie. It can be scenes, symbols (graphics,buttons,movie clips),
actionscript, sound,videos,etc.The movie explorer keeps track of all the
activities. Basically, the movie explorer organizes the content of the movie and
arranges it in a tree format(hierarchical tree).It helps save searching time as one
can directly modify the content by selecting it through the movie explorer are
as follows:

Introduction to Flash 19
 1. One can directly change or edit the text by selecting it from the movie
explorer without searching it in the movie.
2. It allows renaming of symbols(graphics,buttons,movie clips).One can
even edit them by7 double clicking on the particular symbols
To view the movie explorer panel, go to ‘Windows’ and then select ‘Movie
Explorer’.Clicking on the movie explorer will open its panel.

Fig.1.26 The process of viewing movie explorer in Flash

Fig.1.27 The Movie Explorer Panel

The screenshot above shows how a movie explorer panel looks like. You
can see that the movie explorer keeps a track of all t5he options and shows it in
a hierarchical tree structure. In the subsequent paragraphs, you will study about
the various options in the movie explorer panel.
1. Show option

Fig.1.28(a) The ‘Show Option’ in the Movie Explorer

The buttons shown in the above screenshot have been described as follows:
A: Show text option enables you to view all the text that is there in the
document.
B: Show movie clips, buttons and graphics option enables you to view
movie clips, graphics and buttons that are there in the document.

Introduction to Flash 2
 C: Show action script option enables you to view all action script codes
that are there in the document.
D: Showvideo, sound and bitmap option enables you to view all videos,
sounds and bitmap that are there in the document.
E: Shows frames and layers option enables you to view all frames and
layer texts that are there in the document.
F: Customize item enables you to select which element is to be shown or
which is not to be shown. For example, if you want to hide text elements, you
can disable it.
2. Find

Fig.1.28(b) The ‘Find Option’ in the Movie Explorer

The find option allows you to search for elements by its name. The searched
option is displayed on the display area.
3. Display area

Fig.1.28(c) The ‘Display Area’ in the Movie Explorer

The main function of the display area is to display the elements in a tree
structure. The shortcut for viewing movie explorer is ALT+F3.

CHECK YOUR PROGRESS

31. Discuss the elements of the show option?
32. What is the main feature of the find option?
33. What is the use of the display area in movie explorer?
34. Explain the concept of movie explorer in brief.
35. Name the various buttons as included in the show option.

1.8 SUMMARY
• Flash can make your website a lot minutes interesting. You learned
that macromedia Flash MX2004 is the version which has
ActionScript 2.0,Behaviour,extensibility layer or JSAPI or test
support and timeless effects

Introduction to Flash 21
 • The enhanced user-friendly features of the version of Flash like
Action Script 2.0 is better than the earlier version (ASI) and it is
more error-free. The aliased text is used to make the small font size
text crisp and readable, spell checking panel helps in creating error-
free content in Flash, and so on.
• The timeline effect is a very interesting tool that saves time as it
allows adding animation or transition to the object easily and
quickly by making a few series of selection
• The Flash interface explained its five major elements-the ‘stage’
interface wherein the ‘stage’ is divided into white and grey areas,
‘timeline’ ‘controls’ ,’frames and layers’ , ‘frame rate’ which
provides information on the current or selected frame number and
the elapsed time to the current frame, the “information bar’ ,the
‘play head’ option , and the ‘frame view option ‘.
• Each key frame is important while doing animation. Anything
created in Flash creates a key frames in the timeline
• The property inspector displays and allows changing all the
commonly used attributes of the current selection in one panel. As a
property inspector makes changes in the same panel, there is no
need to open multiple panels to make changes
• ‘Panels’ are windows that contain the tools and information that the
user needs while working on the project files. Each of the panels is
used to view and change things while working on any flash
document.
• Movie properties contain the basic information about the
movie/document. Configuring movie properties in the first step in
Flash. You can change the movie properties anytime. The movie
properties panel can be opened through the property inspector.
• An action panel is used to write or edit code for an object or a
frame. Selecting a frame, button or a movie clip will make the
Action Script panel active
• The color mixer is used to change stroke, fill color of the objects
and to create new colors. This is also used to create solid colors,
gradient colours and bitmap images. Some of the option Supported
by the colour mixer are stroke colour ,fill colour ,solid ,linier ,radial
, and bitmap.
• The Color swatches panel is also known as ‘library of colors’. It is
one of the highly used panels as it allows you to directly pick colors
from it
• The align panel aligns the selected object along the axis either
horizontally or vertically.
• Using the align panel, you will be able to distribute the selected
objects so that their centers or edges are evenly spaced. You can
resize the selected objects so that the horizontal or vertical
dimensions of all objects match those of the largest selected object.
• The transform panel is used to transform graphic object, as well as
groups, text, blocks, & instances. Depending on the type of element
you select, you are freely able to transform, rotate, skew, scale or
distort the element.

Introduction to Flash 2
 • The library panel displays a scroll list with the names of all the
items in the library,which lets you view and organize these
elements as you work.
• You also learned that behavior are pre-writtenActionScript that you
add to an object to control that object .Behavior let you add the
power, control, and flexibility of ActionScript coding to your
document without having to create the Action Script code.
• The option of Components gives you access to the user interface
components.
• The history panel keeps a track of the all actions that are performed
while working on Flash. It enables the user to go back to the
previous action by selecting the action option in the history panel.
• Similarly, the scene panel can be used to organize the documents
thematically. The scenes panel displays a list of all the scenes in the
movie. You can add, delete, duplicate or rename scenes in this
panel. Apart from this, it also allows shuffling between scenes.
• The movie explorer saves time by arranging the content of the
movie in tree structure. The movie explorer shows the list of
elements currently used in the creation of the movie.

1.9 KEY TERMS

• Bitmap:A type of memory organization or image file formats used to
store digital images.
• Embedded: Surrounded tightly or firmly; enveloped or enclosed.
• Encapsulate: Express in a brief summary; epitomize.
• Interactive: Relating to a program that responds to user activity.
• Application: The act of putting something to a special use or purpose
in a game or program
• Positioning: The arrangement of the image or element at any particular
point on the screen.
• Pixel: The basic unit of the composition of an image on a television
screen, computer monitor, or similar display.
• Skew: Take an oblique course or direction.
• Thematic: The state of, or pertaining to a theme.
• Hierarchy:It is arrangement of items (objects, name, values,
categories)in which the items are represented as being ‘above’, ‘below,
‘or ‘at the same level’.
• Behavior: An option for adding interactivity to a Flash file without
writing any code.
• Timeline: Controls and shows all elements of the project over a span of
time.
• Property Inspector: Displays and allows the commonly used attributes
of the current selection to be changed in a single panel.
• History panel:Keeps track of the all action that are performed while
working.

1.10 QUESTION AND EXERCISES

Introduction to Flash 23
Short-Answer Questions
1. Briefly explain
the main elements of the Flash interface
2. What is a
timeline? List its advantages.
3. Why are key
frames used in Flash?
4. Define Flash
panels.
5. What is the
major advantage of history panel?
6. Explain the
various options that a movie explorer offers in Flash.
Long-Answer Questions
1. Discuss the new
features of Flash CS6 in detail.
2. Explain the
concept of movie explorer.
3. How can movie
properties be changed in Flash?
4. Explain the step
involved in creating a new document.
5. Explain the
various types of Flash panels.
6. What are the
functions of a color swatch panel?
7. Explain the
various panels in the Flash interface.
8. Describe the
functioning of library panel.

1.11 FURTHER READING

Reinhardt, Robert and Snow Dowd. 2006. Adobe Flash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004. Adobe Flash CS6. New Delhi: Dorling Kindersley (India)
Pvt. Ltd.

UNIT 2 CRATING GRAPHICS IN FLASH

Program Name: B.sc (MGA)
Written by: Srajan
Structure:
2.0 Introduction

Introduction to Flash 2
 2.1 Unit Objectives
2.2 Creating Graphics
2.2.1 Line Tool (N)
2.2.2 Pen Tool (O)
2.2.3 Oval Tool (O)
2.2.4 Rectangle and PolyStar Tool ®
2.2.5 Pencil Tool (Y)
2.2.6 Brush Tool (B)
2.2.7 Misc Tool
2.3 Using Color Effectively
2.4 Layering Flash Elements
2.5 Masking Content
2.6 Organizing Content in Flash
2.7 Reusing Graphics as Symbols
2.8 Summary
2.9 Key Terms
2.10 Questions and Exercises
2.11 Further Reading.

2.0 INTRODUCTION
Technology has simplified our lives to a great extent. Earlier, artists
used to draw sketches of cartoon characters and now the same task is
performed with the help of computers. Computers provide greater efficiency
and also help in saving time.
Flash is generally used for creating graphics. The tools available in
Flash have enabled users to create graphics with ease. The combination of
these different options creates graphics of different shapes, sizes and colors.
Flash not only helps in creating static graphics but also increating
movies. Planning and organizing the content in the movie is the most critical
aspect in effectively designing a flash movie. While writing scripts, each Flash
movie can consist of hundreds of graphics, movie clips, components, and other
elements, each of which may need to be referred to, in order to control the
timeline.
Flash can also be used to create symbols. Each symbol is a separate
instance, and instances of buttons and movie clip symbols can be named thus
allowing the user to refer to them in their scripts. In this unit, you will learn
about creating graphics, masking content, organizing content, and reusing
graphics as symbols.

Introduction to Flash 25
 2.1 UNIT OBJECTIVES
• After going through this unit, you will be able to:
• Understand how to create graphics in Flash
• Make effective use of colors
• Understand the aspect of layering in Flash
• Understand how to mask content
• Describe how to organize content in Flash

2.2 CREATING GRAPHICS

As discussed in the previous unit, there are two types of graphics, i.e.,
vector and raster graphics where the resolution can be scaled to a larger size
without affecting their quality are called vector graphics. These are
independent graphics. Flash helps to create vector graphics and so while
creating graphics or objects you should keep in mind that a vector graphic is
being created. Vector graphics are high quality graphics because these use
geometrical primitives such as points, curves, shapes, lines, and polygons.
These geometrical primitives are, in turn, based on mathematical equations.
Flash uses various tools to create graphics or objects(see fig. C2). The tools
used for creating graphics are as follows:
1. Line tool
2. Pen tool
3. Oval tool
4. Rectangle
5. Polestar tool
6. Pencil tool
7. Brush tool
The above design tools can be grouped into two categories:
1. Geometric shapes: Line, oval, rectangle, and polestar
2. Freehand strokes: Pencil and brush
Each of the tools as stated above has been discussed in the subsequent
paragraphs.

2.2.1 Line Tool (N)

Introduction to Flash 2
 Fig. 2.1The ToolBar Showing Line Tool used for Creating Graphics in
Flash
The line tool (N) is used to create objects with straight lines. A line tool
creates a perfectly straight line. For creating a line, you have to simply click
from where you want to start and then drag it to the end position before
releasing the mouse. To create an absolutely straight vertical or horizontal line
you just need to press the shift button while drawing the line.
There is only one option in line tool, ‘Snap toObjects’.Since the snap two
objects option is used in various tools, it will be explained under a separate
topic.
There are various lines,styles that can be used and this option is show in the
property inspector panel. After selecting the line tool, property inspector shows
it properties.Apart from lines style,property inspector also shows the stroke
hides and the colour of the stroke.

Fig2.2 The property of a line tool.

The above screenshot shows the properties of the line too. The tools have been
described as follows:
1. Stroke color: This property is used to give color to the stroke of the
object.

Introduction to Flash 27
2. Stroke height:This property is used to increase the thickness of the line
or stroke.
3. Stroke style: There are various types of stroke styles that can be used.
This stroke styles re as follows:

Fig 2.3 The different stroke styles on the line tool

(a) Hairline: The hairline line style provides a consist line thickness
that does not vary at different zoom levels. This is the best line style
to choose from if you need to create an artwork that you want to
scale without loosing the original line width.
(b) Solid: The solid line style helps to draw smooth and broken lines.
(c) Dashed: The dashed line style helps to draw solid lines with
regularly spaced gaps .
(d) Dotted: The dotted line style helps to draw a raw of circles with
evenly spaced gap.
(e) Ragged: The ragged line style helps to draw a ragged line with
various gaps between uneven strokes.
(f) Stippled: The stippled line style helps to create a line from a series
of small irregular patches.
(g) Hatched: The hatched line style creates a textured line.
4. Custom stroke style: Custom stroke style has a pop up that contains all
the options of a stroke like its thickness and stroke style. It also has the
option of editing the stroke style.

Fig 2.4 The custom stroke style pop up in flash.

Introduction to Flash 2
2.2.2 Pen Tool (P)

Fig 2.5 The pen tool in flash.

The pen tool(p) is used to create precise path that define straight and
curved line. This tool adjusts the straight or curved line. This means that
adjustment of angle , choosing the length of the straight line and the slope
of the curve segments is enable throughout the pen tool option.
There are three optional settings that can be used to control the appearances
of pen tool pointer, appearance of selected anchor points, and previous of
the line as create. This setting is available in the pen section of the drawing
preferences panning. In order to access this options, go to ‘edit’, click on
‘preferences’ , and then select ‘drawing’ to open the drawing preferences
panel.

Fig 2.6 The drawing preferences panel on flash.

The three optional settings to control the appearance of the pen tool pointer
are as follows:
1. Show pen preview: The show pen preview option is used to preview
the next line segment. By selecting this option ,you can preview the
next line segment before you make the complete line.
2. Show solid points: The show solid point option displays the select
point as solid and deselect as hollow. Ifthis option is not selected, then

Introduction to Flash 29
 the selected anchor points are displayed as solid and the deselected
anchor pints are displayed as hollow.
3. Show precise cursor: The show precise cursor option change the pen
tool cursor from the default pen tool icon to a precise cross hair cursor.
This option helps in making the selection of points is here, especially
when some detail adjustment on a line is to be made.

The following steps need to be performed to create straight lines using

the pen tool (see Figure 2.7)
1. Select the pen tool from the tool bar.
2. Post selection, Position the pointer on the stage from where the straight
line is to start; click to create the starting or first anchor point.
3. Click again to define the end point and create the first segment of the
straight line. Use the shift key with the pen tool to constrain lines in
multiples of 45.
4. Click successively to create multiple straight lines.

Fig. 2.7 Creating a straight line using Pen Tool

Any one of the following steps can be used for completing the path of
an open or a closed shape:
1. To complete an open path, double-click on the last point, or press the
Ctrl or Alt key and click on the last point or click anywhere away from
the path.
2. To close a path, position the Pen Tool over the first anchor point. A
small circle appears next to the pen tip when it is positioned correctly
and then click on the first anchor point to automatically close the path.
The following steps need to be performed to create curved lines using the
pen tool (see Figure 2.8):
1. Select the pen tool from the tool bar.
2. Post selection; position the pointer on the stage from where the curved
line is to start its creation. Successively, click to create the starting or
first anchor point.
3. Click again to define the end point, hold down the mouse button. While
holding the mouse button, you will notice that the pen tip changes to an
arrowhead.
4. When the pen tip changes to an arrowhead, drag it in the direction
where you want the curve segment to be drawn. Use the shift key while
dragging it to constrain the curved line to multiples of 450.
5. The length and direction of the drag determines the shape of the curved
segment.

Introduction to Flash 3
6. To create the next segment of the curve, position the pointer where you
want the next segment to be endedand drag it away from the curve.
Both straight lines and curved lines can be modified or edited by
adjusting their anchor points.

Fig 2.8Creating a curved Line Using the Pen Tool

There are various pen states in Flash CS6 (see Figure 2.9). The pen tool
is used to display various pen states that indicate the pen functions
under various circumstances. These pen states are as follows:
1. A small(x) is displayed in the pen tool when it is simply over the
state.
2. An (o) is displayed in the pen tool which indicates that this is an
end point. You have to click on this point to connect a continuation
to this path or, when making a closed shape, to close the path.
3. A minus (-) is displayed in thepen tool when it is over a corner
point. It indicates that clicking on this will delete the corner point.
4. A plus(+) is displayed in the pen tool when it is over a path (a line
between two points). It indicates that clicking on this will add a
point to the path.
5. A carat(^) is displayed in the pen tool when it is over an existing
point. It indicates that clicking on this will turn a point into a corner
point.
6. To change the pen tool into a sub select tool, press on the ctrl key.
The pen tool will then work like a sub select tool.

Fig. 2.9 Various States of the Pen Tool

The pen tool has some properties which are shown in the property
inspector panel after the tool has been selected.

Fig.2.10The Properties of a Pen Tool

Introduction to Flash 31
 The above screenshot shows the various properties of the pen tool.
The properties of the pen tool are as follows:
1. Stroke color: It is used to give color to the strokes.
2. Stroke height: It is used to increase the thickness of a line
or stroke.
3. Stroke styles: It comprises various styles of strokes that can
be used.
4. Custom stroke style: Custom stroke style has a pop up,
which contains diverse types of strokes.
5. Fill color: It is used to add color into the fill area of an
object.

CHECK YOUR PROGRESS

6. What are the two main types of graphics?
7. List the tools that are used in flash to create graphics.
8. What are the two categories in which the design tools can be grouped?
9. What is the use of the line tool?
10. List the various line styles.
1.3USING THE FLASH INTERFACE
11. How can straight lines and curved lines be modified or edited?
This
12. What is the sectionofwill
function the explain the Flash interface in detail.
line tool?
13. How done one create a line?
14. Which tool is used to create precise paths?
15. Name the three option of the pen tool?

2.2.3 Oval Tool (O)

The oval tool (O) is used to create a perfectly smooth oval. To create an oval,
you need to simply click and then dreg the mouse diagonally from one corner of the
oval to the other. Vertical dragging will create a taller oval and horizontal dragging will
create a wider oval (see Figure2.11). The oval tool creates filled shapes with outlines
(strokes). To create a perfect circle, hold down the shift button while dragging and
before releasing the mouse.
The oval tool has only one option, ‘Snap to Object’. Since ‘snap to object’ is
used in case of various others tools, the topic will be discussed separately, later in the
unit.
The properties of the oval tool are shown in the property inspector after the
tool has been selected.

Introduction to Flash 3
 Fig 2.11 The Tool Bar Menu Showing the Oval Two Option; the Tall and
Wide Oval

Fig 2.12The Properties of the OVAL tool in flash

The above screen-shot shows the properties of the oval tool. The properties
have been discussed as follows:
1. Stroke color: It is used to give color to the strokes.
2. Stroke height: It is used to increase the thickness of the line or stroke.
3. Stroke style: It comprises various styles of strokes that can be used.
4. Custom stroke style: Custom stroke style has a pop up which contains
diverse types of strokes.
5. Fill color: It is used to add color into the fill area of an object.

The Rectangle tool and polystar tool are a part of the same button in the
same button in the tool bar. One can toggle between the tools as per
requirement. The functions of both the the tools are different from each
other. The rectangle tool is shown selected by default.
Both the rectangle and polystar tool have the same shortcut,i.e.R.

Introduction to Flash 33
 Rectangle tool (R)

Fig. 2.14The Rectangle Tool Displayed on the Tool Bar

The rectangle tool(R) is used to create a perfect rectangle. A perfect
rectangle is one in which all four sides are parallel, regardless of the
length or width of the shape. For creating a rectangle you need to click to
create a starting point and then drag the mouse towords opposite corner of
the shape. The rectangle tool creates filled shapes with outline (strokes).
To create a perfect square holds down the shift button while dragging and
before releasing the mouse.
The rectangle tool has two options as follows:
1. Snap to objects: Since’snap to object’s is used for various tools, the
topic will be explain later.
2. Set corner radius: To give roundness to the corners of rectangles and
square, the set corners radius option is used. The radius is set to 0 by
default and the maximum radius is set to 999pt.
To adjust the corner radius while creating a rectangle shape, used the up
()arrow key to decrease the radius and used the ( )arrow key to increase
the radius, while dragging and before releasing the mouse.
The properties of the rectangle tool are displayed in the properties after
the tool is selected.

Fig.2.15. Straight rectangle and Rounded rectangle

Introduction to Flash 3
Fig.2.16.The properties of a rectangle Tool
The above image shows the properties of the rectangle tool. The properties of
the rectangle tool are as follows:
1. Stroke color: It is used to give color to the strokes.
2. Stroke height: It is used to increase the thickness of the line or stroke.
3. Stroke style: It comprises various styles of strokes that can be used.
4. Custom stroke style: Custom stroke style has a pop up which contains
diverse types of strokes.
5. Fill color: It is used to add color in the fill area of an object.

Fig 2.17The PolyStar tool Displayed on the Tool bar on Flash; Using the
PolyStar Tool to create an oval and a star

The polystar tool (R) is used to create polygones or stars ( see Figure
2.17) . In the property inspector panel, the option for selecting a polygon
or star appears with other properties of the polystar tool when it is active.
You can set the number of sides of a star or polygon while choosing the
polygon or star.
The number of sides that a polystar tool can define for shapes is from 3 to
32 and the tool can also define the depth for the star points.
The polystar tool has only one option and that is ‘Snap to Objects’. The
polystar tool has some properties which are shown in property inspector
after the tool is selected.

Introduction to Flash 35
 Fig.2.18The properties of the Polystar tool.

The above screenshot shows the properties of the polystar tool. The
properties have been discussed as follows:
1. Stroke color: It is used to give color to the strokes.
2. Stroke height: It is used to increase the thickness of the line or stroke.
3. Stroke styles: It comprises various styles of strokes that can be used.
4. Custom stroke style: Custom stroke style has a pop up, which
contains diverse types of strokes.
5. Fill color: It is used to add color into the fill color area of an object.
Polygon/Star options are used to choose which shape is to be created, i.e.,
either a polygon or a star. Apart from selecting the shape, it also provides
the option of adding the number of sides and the star point size.

Fig 2.19 The Polygon Option on Tool Settings

2.2.5 Pencil Tool (Y)

Fig 2.20The Pencil Tool Option on Tool Bar in Flash

The pencil tool( R) is used to create lines and shapes in the same
way as a real pencil is used to draw a line. However, a real pencil
cannot creare a straight line or a smooth curve but this feature

Introduction to Flash 3
 helps in creating free form shapes. Straight lines and smooth
curves can be easily created by using the Flash pencil tool.
The pencil tool has the option of drawing mode or pencil mode.
By default it sets the pencil tool on the drawing mode. The pencil
mode provides three options that control the way a line is created.
These three options are as follows:
1. Straighten: This optionhelps in drawing straight lines and also
provides for the conversion of circles, rectangles, ovals, and
squares approximations into these common geometric shapes.
2. Smooth: Curved lines that are smooth in nature can be drawn
using this tool.
3. Ink: This option is used todraw freehand lines and as a result,
the lines drawn are not smooth or straight in nature.
The properties of the pencil tool are shown in property
inspector after the tool is selected.

Fig. 2.21The properties of the pencil tool on flash

The above screen shot shown the properties of the pencil tool.
The properties of the pencil tool are as follows:
1. Stroke Color :It is used to give color to the Stroke.
2. Stroke Height : It is used to increase the thickness of the
line or the stroke.
3. Stroke Styles :It is Comprises various styles of strokes
that can be used.
4. Customs Stroke Style : Custom stroke style has a pop up,
which contains diverse types of stokes
2.2.6 Brush Tool (B)

Fig. 2.22The tool bar showing the brush tool option

Introduction to Flash 37
 The brush tool is used to create smooth or tapered marks and to fill
enclosed areas. Just like the drawing strokes in painting, the brush
tool is used to give a similar effect. It is used to create special
effects, including calligraphic effects.
The brush tool provides various options which give precise
controlover the type of marks that it makes. These options are as
follows:
1. Brush Mode

When precise control is required over the stage wherein the fill is
to be applied, the option of brush tool is used. The brush tool has
five painting options that are used for creating a wide range of
effects. These options are as follows:
(a) Paint normal : Using this option, you can apply brush strokes
over lines and fills on the same layer.
(b) Paint fills : Using this option , you can apply brush strokes
over fills and empty areas and leave all the lines and fills
unaffected.
(c) Paint selection : Using this option, you can apply rush strokes
in the selected fills, i.s., only the area of the object that is
selected will be affected.
(d) Paint inside: Using this option, you cab apply brush strokes
to a singular fill area where the brush stroke was first initiated.
This works like a smart coloring book that never allows you to
paint outside the line. In the ‘paint behind’ option, if you start
painting in an empty area, the fill does not affect any of the
existing filled areas.
2 Lock fill toggle
The lock fill toggle button is used to control filling in the Flash areas
with gradient color and bitmaps. When you select this button, it
enables all the areas to be painted with the same gradient or bitmap to
appear as a part of a single, continuous, filled shape. It locks the angle,
size, and point of origin of the current fill to remain constant
throughout any number of selected shapes.
3. Brush size

Fig. 2.24The Various Brush Sizes Available on the Brush Tool

Introduction to Flash 3
 The brush shape option has a drop down menu that shows brush tips
in a variety of sizes. You can use this button to create various objects
use in the brush tool.
4. Brush shape

Fig.2.25. The various brush shapes available on brush tool

The brush shape option has a drop down menu that shows various brush shapes
that are best on the circle,ellipse, square, rectangle and line shapes. You can use
this button to create various objects use in the brush tool.
The properties of brush tool are shown in the property inspector after the tool is
selected, I.e., the feel color option.The feel olor option is used to feel in color or
change color in the feel area of the object create.
2.2.7 Misc.Tools
A clear understanding of each of the tools makes the creation of graphics very
easy .Apart from these tools, there are some other tools which are very useful while
creating graphics. These are as follows:

Fig.2.26.The Selection, Subselection, Transform and Eraser Tools shown on the

Tool Bar on flash
1. Selection tool
2. Subselection tool
3. Transformation tool
4. Eraser tool
The tools stated above have been described in detail in the subsequent
paragraphs.

Introduction to Flash 39
 Selection tool (A)

Fig.2.27. The Selection Tool Option on the Tool Bar on Flash

The selection tool is used for selection purpose, i.e., to select and move an
object on the stage. It is also used to reshape objects. In order to reshape objects,
the selection tool is used to pull on the line or its end points, curves, or corners.
In case you need to select the object or a particular part of theobject then you
need to click on the area of the object that you want to select. You will need to
double-click on the object to select the whole object, i.e., both fill and stroke. For
selecting more than one object, you will have to drag a marquee around them.
There selection tool offers three options as follows:
1. Snap to objects: This topic will be discussed in detail later in the unit.
2. Smooth and straighten: The smooth and straighten option is basically used
to smoothen or straighten the lines. The sooth and straighten option reduces
the number of bumps and variations in a shape or lines by reducing the
number of points.

Fig.2.28. The sub selection tool bar option on the tool bar
The subselection tool, like the selection toolis used to select and move the
object on the stage. The pen tool is a companion tool of the subselect tool. You
can use the sub select tool option for modifying and adjusting the paths.
While moving the subselection tool over a line or point, the cursor displays any
one of the following two states( seeFigure2.29):
1. When a small filled square is displayed over a line, it means that the whole
shape or line as selected can be moved.
2. When a small hollow square is displayed over a line, it means that a
particular point can be selected and moved to change the shape of the line.

Introduction to Flash 4
 Fig.2.29Two states of the Subselection Tool

Transform tool (Q)

Fig. 2.30 The Transform Tool on the Tool Bar on Flash

The transform tool is used to freely transform objects, groups, instances, or

text blocks. Using this tool you can move, rotate, scale, skew, and distort
objects.
In order to select the object for transformation, you need to select the object
or drag the mouse towards the object for selection. Click on the free
transform tool and then use the handles on the bounding box to click and
drag to apply the transformation.

Eraser tool (E)

Fig.2.31The Eraser tool on the tool Bar

The eraser tool (E) is used to erase or remove strokes and fills. You need to
drag the cursor for the purpose of erasing. While dragging, it will remove
the particular area of shape that you want to erase. Double clicking on the
eraser tool button in the toolbar will quickly erase everything on the stage.
The eraser tool provides the following options:

Introduction to Flash 41
 1. Eraser mode menu

Fig. 2.32The Various options shown on the Eraser mode Menu

The eraser mode menu shows various eraser modes that can be used for
erasing. The eraser mode options are similar to the brush mode options.
The difference is that instead of creating a shape, it erases it. The eraser
mode options are as follows:
(a) Erase normal: This helps to erase strokes and fills on the same
layer.
(b) Erase fills: This helps to erase only fills; strokes are not affected.
(c) Erase lines: This helps to erase only strokes; fills are not affected.
(d) Erase selected fills: This helps to erase only the currently selected
fills and does not affect strokes, selected or not. You have to select
the fills that you want to erase before using the eraser tool in this
mode.
(e) Erase inside : This helps to erase only the fill portion on which the
eraser stroke hs been strted. Nothing gets ersead in case you begin
erasing from an empty point. The eraser tool does not ffect the
strokes in this mode.
2. Faucet toggle
The faucet toggle option is used to erase field areas instantly. To erase
the selected area in one go ,the user, after select the faucet option, clicks
on any fill area to erase that particular fill area.
3. Eraser shape

Fig 2.33 Various Shapes Shown on the Eraser Option

The eraser option comes in various shapes like circle,rectangle,etc.
Snap to Object

Fig 2.34 The ‘Snap To Objects’ Option in Flash

The snap to object option is available for many of the tools discussed above.It is an
option that makes the object being drawn or move on screen to snap to or align with
other objects on the stage. Moving objects are likely to ‘Snap’, or jump to the edge

Introduction to Flash 4
of the nearest object, moving along the vertex points. Turning of this option will
allow the shapes to be dragged more freely.
The ‘Snap to Object’option is one of the option of various tools like the line
tool,oval tool ,etc.
Snapping of object is indicated by the ‘O’ icon,i.e.the ‘O’ icon appears when the
object is moving and is close or overlapping with the other object.Such a situation
will indicate that releasing the mouse at that point will snap the object.

Fig 2.35The ‘Snapping of Object’ Shown in Flash

CHECK YOUR PROGRESS

11.Why do we use the lock fill toggle option?
12.Which tool is used to reshape objects?
13.Name the three options provided by the eraser tool.
14.What is faucet toggle?
15.What is the difference between erase mode and brush mode?
16.Explain the option of ‘Snap to object’.
17.Why is the oval tool used?How can a circle be drawn using the oval tool ?
18.How can a straight rectangle be converted into a rounded rectangle?
19.Why is the polystar tool used?
20.What are the various modes of the brush tool?
21.List the uses of the transform tool.
22.What is the primary difference between the brush mode options and the
eraser mode options?

3.3 USING COLOUR EFFECTIVITY

Colors give life to any object; they are very powerful and create strong
feelings. Colors also give the objects as visual punch, an element of
surprise, and a touch of humor which makes the distinct from the rest.
The best way of using colors effectively is to understand colors,
how people perceive it, and how the computer display shows it.
There are three simple terms used to describe a color. These are,
‘hue’, ‘brightness’ (or ‘lightness’), and ‘saturation’. Hue relates to the

Introduction to Flash 43
 perceived light. It refers to the familiar names of colors like red,
green, or blue. Brightness refers to the luminance or intensity of light
and saturation refers to the purity or amount of white light that
appears to be mixed with a color.
While using Flash, it is very easy to fill color or to create new
color and apply it to the object (see Figure C3). There are various in
flash that are used to color objects. These options are as follows:
1. Color swatches
2. Color mixer
Color swatches

Fig. 2.36The Color Swathes panel in Flash

The color swatches panel enables you to directly pick the requisite
color from it. We can say that it is a library of colors. It consists of approximately
216 web color. In this panel, one can also save self-created colors. While working
in Flash, it is the most commonly used source for the selection of colors.
To view the color swatches panel, go to ‘Windows’and select‘Color Swatches’.
The shortcut for viewing color swatches is Ctrl+F9.

Fig 2.37 The Process of Opening the Color Swatches Panel

It is only the main color swatches panel that provides control over loading or
modifying specific palettes. Here, both the tools panel and the property inspector
provide the quick pop up menu to access whatever colors have been currently
loaded.
Therefore, there are two options from which you can access color swatches.
These are:
1. The main color swatches panel.
2. The tool bar and property inspector (quick pop up menu).

Introduction to Flash 4
 There is a difference between the main color panel and quick pop up menu.
In the main color panel, the swatches provide the following options:

Fig.2.38The Pop up menu on the Color Swatches Panel Showing Options

1. Duplicate swatch: It is used to duplicate a selected swatch.

2. Delete swatch: It is used to delete the selected swatch.
3. Add colors: It is used to add other sets of colors. After clicking on this
option, the import color swatch menu opens which is a simple dialogue
box that is used to locate, select, and import the color sets. The add
color option enables you to retain the current color set and append the
imported color set at the bottom of the panel.
4. Replace color: It is usedto replace the current color set with another color
set. Like in case of the add color option, the import color swatch menu is also
opened.
5. Load default colors: It is used to clear the current color set and replace it
with the default color set, i.e., the web 216 swatch palette.
6. Save colors: It saves the current color set. It opens the export color swatch
menu which is used to save the color set in the specified location in the hand disk.
7. Save as default: It is used to save the current color set as default.
8. Clear colors: it is used to remove the entire color set that is currently loaded
in the color swatches and it leaves only black and white color swatches and a
greyscale gradient.
9.Web 2016: It is used to load the web safe color palette. This is the default
color palette in flash.
10. Sort by color: This option is used to organize the palette on the basis of hue
rather than by mathematical number and can visually be a more logical way to find
colors in the current set.
The quick pop up menu does not have the options as Listed above but displays
the following options:

Introduction to Flash 45
Fig 2.39 The Hexadecimal Value Field and Launch Color Mixer Options
1. Hexadecimal value Field: Every color has some code or value, for
example, the value for black color is 1000000. This value is shown in the
hexadecimal value field.
2. Launch color mixer:This menu launches a color mixer panel where one
can create their own color. Apart from this, there are some default color
swatches. The newly created color can also be saved in the menu for future
use.

To color both the stroke and fill, we use the color swatches option. The only
difference is that for fill color, there is an option of adding multi
colors(gradient) to it, whereas for stroke color, there is no such option as the
stroke accepts only solid colors.
All the drawing tools that are used for creating graphics or objects in Flash
like the brush tool, pen tool, etc., have the option of adding fill or stroke
color or b0th. The option of drawing tools appears in the property inspector
after the particular tool has been selected.
Apart from the drawing tool, there are other tools for adding fill and stroke
color to the tool bar. These options are as follows:

Fig 2.40 The stroke and Fill Color Options

1. Stroke color
2. Fill color
Clicking on any of these options, the menu will open a quick pop up
color menu for selecting the requisite color.

Introduction to Flash 4
 Color mixer

Fig. 2.41 The Color Mixer Option

The color mixer is used to change the stroke and to fill color into
objects. It also helps to create new colors. One can create solid colors,
gradient colors(multi colors) and can also use bitmap images. The
default color channel is RGB but one can change it to HSB, according
to the requirement.
To view the color mixer panel, go to‘Windows’, select ‘Color’. The
shortcut for viewing movie explorer is Shift+F9
The most important option in the color swatches is the color mixer. In
the color swatches panel, there are default color sets. The color mixer
has the power to modify those colors and add variation to it.
There are various options in the color mixer. These have been described
as follows:
1. Stroke color: It is used to color the strokes of the objects.
2. Fill color: It is used to color the fill area of the object. There are four
types of fill coloroptions. These are:
(a) Solid: It is used to give a flat, solid color.
(b) Linear and radial: Both are used to give multicolor (gradients).
Linear color means that it follows the linear path and radial color
means that it follows a circular path.
(c) Bitmap: It is used to insert an image in the fill area instead of
color.
(d) Default color(black and white): It is used to change the stroke
and color of the default color, i.e., black and white.
(e) Swap color: It swaps the color between strokes and fills.
The toolbar has both the default color(black and white) and the
swap color.
‘Color mixer’ and ‘color swatches’ are not the only options for
selecting colors. There are some other tools also which are used
for the selection of the requisite colors. These are as follows:

Introduction to Flash 47
 Fig.2.43 The paint Bucket, Ink Bottle, Eye Dropper and Tools

1. Paint bucket tool and ink bottle tool: This tool helps to fill
color into the object. To add color to the fill and stroke of the
object, you need to select the fill area or stroke of the object
and select the color using the stroke color or fill color tool or
by using the color mixer option.
Another way to fill color in an object is to select color and
then use the paint bucket tool to add color to the fill area and
the ink bottle tool to add in the stroke.
2. Eye dropper tool: This tool helps to select color from an
object. It can be a stroke color or a fill color.

CHECK YOUR PROGRESS

23. Name the options in Flash that are used to give colors to the objects.
24. How many colors are there in a web color?
25. What is the major difference between the main color panel and the quick
pop up menu?
26. What is the function of the paint bucket and ink bottle tools?
27. Name four types of fill colors.
28. Describe the three main aspects of colors.
29. Differentiate between color swatches and color mixer.
30. Define the following:
Hexadecimal value field
Launch color mixer
31. What is the difference between linear color and radial color?
32. Briefly explain the usage of the fill transform tool.

Introduction to Flash 4
 2.4 LAYERING FLASH ELEMENTS

Fig 2.45 A Screenshot Showing ‘Layer 1’ in Flash

In Flash, layers play a very important role. Layering is a technique by which all
the content is separated and thus can be edited with ease (see Figure C4)
Layers are like floors and each floor does different work. The artwork in the
document is organized with the help of layers. You can draw and edit objects
on one layer without affecting objects on another layer. When there is nothing
on a layer, you can see through it to the layers below. Layers are a part of the
main timeline window.
There are various options provided by layers. These options are as follows:

Fig. 2.46 Different Options Provided by Layers in Flash

1. Insert layer
The insert layer option is used to add more layers to organize the
artwork, animation, and other elements in a document. There is only
one layer in a new Flash document. The memory of a computer limits
the number of layers that can be created in a new document. Layers do
not increase the size of a published. SWF file.Only the objects you
place into the layers add to the file size.
2. Create folder
The ‘create folder’ option is used to organize, manage layers, and
position layers in them. This option helps to expand or collapse the
layer folders in the timeline without affecting the display on the stage.
The use of separate layers or folders for sound files, action script, frame
labels, and frame comments is available in the create folder option.
This aids in finding these items quickly when there is a need to edit
them. The folders can contain both layers and other folders, allowing
the user to organize layers in the same way as the various files are
organized in a computer.

Introduction to Flash 49
 3. Delete
The delete option is used to delete a layer and its content.
4. Show/hide
layer
The show/hide layer is used to show or hide the content from the stage.
A red x next to the name of a layer or folder in the timeline indicates
that it is hidden.
When the file is published, any of the layers that were previously
hidden in the Flash document are preserved and are made visible in the
.SWF file.
5. Lock/unlock
layers
The lock/unlock option is used to lock/unlock layers. When the layer is
locked, the objects on that particular layer will be locked, which in turn
means that these cannot be moved or edited. This option is very useful
where there is lot of content on the stage. So, if a specific object is to be
moved then the other objects that are in different layers are locked.
6. Outline view
The outline view displays all the objects on a layer as colored outlines.
This helps in distinguishing the layer an object belongs to. There are
different outline colors for every layer. The outline color for layers can
be changed as well.
7. Layer name
By default, the new layers are named by the order in which they are
created, i.e., Layer 1, Layer 2, and so on. But for renaming thr layer,
you need to double-click on the layer name, type the name, and press
‘enter’.
You can even rearrange layers and folders in the timeline to organize
the document as per your requirement. Apart from the preceding
options, you can edit the layer options by double-clicking or right-
clicking on the layer and then going to the properties option.

CHECK YOUR PROGRESS

33. State the Importance of layers in Flash.
34. Explain the use of ‘create folders’ option?
35. In what order are new layers named in Flash?
36. What is a motion guide layer?

2.5 MASKING CONTENT

Layers have several layers nested beneath them. Masking is a technique that is
used to define the visible area of a layer. You can mask multiple layers beneath
a single mask layer by using the technique of ‘masking’.
A masked item can be of any shape. It can be a filled shape, an object, an
instance of a graphic symbol, or a movie clip. In a mask layer, bitmaps,

Introduction to Flash 5
gradients, transparency, colors, and line styles are ignored. Masking defines its
area is displayed as opaque.
A mask can be animated or static. There is one limitation to masking though;
you can apply a mask to the content which is in the same mask layer and not in
the other layer, i.e., in simple words, a mask layer can contain only one masked
item.
The process of creating a mask layer is as follows:
1. Select or create
a layer that has several layers nested beneath it in the visible area.
2. By using the
insert layer option, create a new layer above it.
3. It should be
noted that mask layer always masks the layer that is immediately below
it, so make sure that you create the mask layer in the proper place.
4. Place a filled
shape, text or an instance of a symbol on the mask layer.
5. Right-click on
the mask layer and select mask from the context menu.
6. The mask layer
icon will appear that indicates that the layer has been converted into a
mask layer. After the layer has been masked, you will notice that the
layer immediately below it is linked to the mask layer, and that its
contents appear through the filled area on the mask. The name of the
masked layer is indented.
7. The mask layer
is locked to display the mask effect in Flash.

Fig. 2.47 The Process of Masking Layers in Flash

For adding more layers inside the mask layer, you nedd to select the layer and
drag the layer below the mask layer. It will automatically become a part of the
mask layer.
To delink the layers from the mask layer, select the layer that needs to be
dilinked and drag the particular layer above the mask layer.
The following steps ar adopted to animated a filled shape type object, or a
graphics symbol instance in a mask layer:
1. Select the mask
layer and unlock it.

Introduction to Flash 51
 2. After unlocking
the mask layer, you will come across any of the following scenarios:
• If the object is a
filled shape instance, apply shape tweening to the object.
• If the mask
object is a type object or graphics symbol instance, apply motion
tweening to the object.
3. When the
animation is complete, you will have to lock the mask layer again.

Original Image Selecting the areas Masked Image

Which is to be shown

Fig. 2.48The Process of Animating a Filled Shape Type Object or a

Graphic Symbol Instance in a Mask Layer

CHECK YOUR PROGRESS

37. What is the limitation of using the technique of masking?
38. Explain the steps involved in animating a filled shape type object, or a graphics
symbol.

2.6 ORGANIZING CONTENT IN FLASH

Planning and organizing the content in a Flash movie is one of the most
critical aspects of effectively designing a Flash movie. While writing
scripts, each Flash movie can consist of hundreds of graphics, movie clips,
components, and other elements, each of which are required to control the
timeline.
Flash makes it easy to keep this content organized by using a document
library which can be shared among different Flash documents. Flash also
enables the library assets to be reused over and over again, and to be
update3d so that Flash automatically that significantly reduces the amount
of time you spend on its development.
The ‘Library’ is the storehouse for all the reusable elements. The elements
can be symbols, movie clips, buttons, videos, sounds. Etc.
To open the library panel, go to ‘Windows’ and click on ‘Libraries’. The
shortcut for opening the library panel is Ctrl+L.

Introduction to Flash 5
 Fig2.49:The Process of Opening ‘Library’ in Flash
At times you can open libraries for several documents by opening
the particular document that contains the library that you want to
use and then displaying that library. Drag and drop library objects
can be dragged and dropped from one to another by using the option
of keeping several libraries open. A library item from one document
can directly dragged onto the stage of another document. Flash also
includes some sample libraries that contain buttons, graphics, and
sounds.
To open one of these buttons, you will to open the ‘Windows’ menu
and select ‘Common Libraries’.
The saved sample libraries and permanent libraries appear in the
common libraries submenu.

Fig :2.50The Submenu ‘Common Libraries’ Showing all the saved Sample
Libraries and Permanent Libraries

There are various options under the library option in the menu that help in
organizing content in Flash. These options are as follows:
1. New symbol:This option is used to name and choose properties for a
symbol. You can also select this option to launch the ‘create new
symbol’ dialogue box. Click on OK to open the edit mode and place or

Introduction to Flash 53
 crate graphics on the symbol timeline. When a new symbol is created ,
it is stored at the root of the ‘Library sort’ window. You can drag it
inside any of the existing library folders.
2. New folder:This command is used to create a new folder. This option
helps in organizing the items in the library in folders. You can change
the name by double-clicking on this option; although by default, it is
named ‘new folder’.
3. New font: This option is used for creating a new font. Upon selection,
this option will open a ‘font symbol properties’ dialogue box.
4. New video: This option creates a new empty video object in the
library.
5. This option is used to rename the currently selected item in the library.
Double-clicking on the selected item is another way of renaming the
selected item.
6. Move to new folder: This option is used to open the ‘ new folder’
dialogue box. Clicking on ok automatically inserts the new folder in the
library window. The currently selected item in the library will be then
stored in the new folder. Dragging the non-selected items into the
folders is another way of moving the selected items to a folders.
7. Duplicate and delete: The ’duplicate’ option is used to create a copy
of an item and the ‘delete’ option is used to delete an item.
8. Edit: The ‘d\edit’ option is used to access the selected object in its edit
mode. Another option is to double-click on the object which, in turn,
takes the selected object to the edit mode.
9. Edit with: Most of the imported assets like sounds, bitmaps, etc., will
have the ‘edit with’ command available to jump to the external
applications installed.
10. Properties: This command opens the related properties dialogue box
for the particular symbol type. The properties dialogue box is a central
control that enables you to rename an element,. Access edit mode, or
access the linkage dialogue box from one location.
11. Linkage: This command is used to invoke the linkage option dialogue
box. Linkage means that you can assign an identifier string to a movie
clip symbol, a font symbol, a sound , or a video object so that it can be
accessed using the Action Script.
12. Select unused items: This option is used to find items stored in the
library that have not been used in the Project.
13. Play or stop: This option is used to preview an asset in the library
preview window. But this is applicable only if the selected asset has a
timeline or is otherwise playable for the sound. It the assets is currently
playing, then the option of play automatically changes to ‘stop’.
14. Expand folder/collapse folder: This option is used to toggle the
currently selected folder in the library window to open or close.
15. Expand all folder/ collapse all folder: This option is used to toggle
all folders and sub folders in the library window to open or close.

CHECK YOUR PROGRESS

Introduction to Flash 5
 39. List the features related to planning and organizing content
in Flash.
40. List the various options of the library option in Flash.
41. Define linkage.

2.7 REUSING GRAPHICS AS SYMBOLS

Flash converts graphics and buttons in the library symbols when objects
are added to the stage. These instances of the symbol are placed on the
stage. Each symbol is a separate instance, and instance of button and
movie clip symbols can be named so that you can refer to them in your
scripts. In addition, whenever you modify a symbol, Flash updates all the
instance of the symbol on the stage.
The are three types of symbols as follows:
1. Graphic symbol: Graphic symbols are used mainly for static images.
Flash ignores any sound or action inside a graphic symbol. An
allocated frame on the main timeline is required for each frame to be
visible within the symbol. This happens as a graphic symbol does not
play independent of the main timeline. For example, if in a graphic
symbol there are 400 frames of animation and if in the main timeline
there are 200 frames, then Flash will display only 200 frames.
2. Movie clip symbol: Movie clip are basically movies within a movie.
They run independent of the main timeline, i.e., a movie clip is not
dependent on how many number of frames there are in the main
timeline, as a movie clip can continue to play even if the main timeline
is stopped. Thus, they need only one frame on the main timeline.
Movie clips can contain actions, other symbols, and sounds and can
also be placed inside other symbols.
3. Button symbol: Button symbols are used for creating interactive
buttons. The timeline allotted to the button symbols is limited to four
frames which are referred to as ‘states’. These states are directly
related to the user interaction and are labeled as up, over, down, and
hit. Each of these button states can be defined along with graphics,
symbols, and sounds. After you create a button symbol, you can assign
actions to the buttons. Like movie clips, button symbols also ewquire
only one frame in the main timeline.
The Convert to symbol panel
The ‘convert to symbol’ panel is used for converting an object into a
symbol. The ‘convert to symbol’ panel gives the symbol name and tells
Flash whether it is a movie clip, a button, or a graphic.

Introduction to Flash 55
 Fig. 2.51 The ‘Convert to Symbol’ Panel
To open the ‘convert to symbol’ panel, you have to do one of the
following things:
1. Select the object and press F8. It will open the ‘convert to symbol’
panel.
2. Another way is go to ‘Modify’and then click on Convert to
Symbol’.
3. Lastly, you can select the object and drag it from the stage to the
library panel.
For editing the symbol, double- click on the object in the stage or
open the library panel, search for the name of the object that needs
to be edited and double-click on it.
After double- clicking on the respective object, it will open the
‘edit mode’ for the respective object. If you want to exit the ‘edit
mode’, either double-click on the stage or click the scene link over
the timeline to exit.

Fig. 2.52 The Process of Editing a Symbol

CHECK YOUR PROGRESS

42. What is the main feature of the ‘convert to symbol’ panel?
43. How do you edit a symbol in ‘edit mode’?
44. What are the three types of symbols?

2.8 SUMMARY
• Flash is used to create graphics. You can use a variety of tools like
the line, pen, oval, rectangle and polyester, pencil, and brush is

Introduction to Flash 5
 Flash to create graphics and objects. Design tool are grouped into
two categories-geometric shapes which include line, oval, rectangle
and polyester and freehand stocks which include the pencil and
brush tools.
• Apart from the tools that are used regularly, there are certain other
tools that might not be very common, but are definitely very useful-
like that selection tool, sub selection tool, transforms tool, and
eraser tool.
• Colours can be effectively used to create graphics in Flash, with its
option of color swatch and color mixer, makes it very easy to fill
color or create new colors and apply them to an object.
• The color swatches panel enables you to directly pick a color from
it. We can say that it is a library of colors. It has around 216 web
colors. In this panel, you can also save the colors that you create on
your own it is the most commonly used sources for selecting color
in flash.
• The color mixer option is used to change strokes and fill color in
objects. It also helps in the creation of new color. You can create
solid colors gradient and color (multi colors) and can also use
bitmap images
• Layers are very important in flash. It is a way by which all the
content is separated and edited. The artwork in the document is
organized with the help of layers. You can draw and edit objects on
one layer without affecting the other objects on another layer.
Layers are the part of the main timeline window.
• Masking is a technique that is used to define the visible area of the
layer. You can mask multiple layers as masked layers beneath a
single mask layer with the use of masking.
• The mask items can have different shapes. These can be a filled
shape, a type object, an instance of a graphic symbol, or a movie
clip. In a mask layer, bitmaps, gradients, transparency, colors and
the line styles are ignored in flash. Masking defines its area in two
ways: a filled area is displayed as completely transparent and a non-
filled area is displayed as opaque.
• Planning and organizing content in a movie is one of the most
critical aspects to effectively design a Flash movie. While writing
scripts, each Flash movie can consist of hundreds of graphics,
movie clips, components, and other elements, each of which control
the timeline.
• The document library element in Flash makes it easy to keep this
content organized which can be shared among different Flash
documents. Flash enables the library assets to be reused over and
over again, and to be updated as well so that Flash automatically
updates all the instances of the object in the movie.
• Library is the storehouse of all the reusable elements in Flash. The
elements can be symbols, movie clips, buttons, videos, sound, etc.
Flash converts graphics and buttons in the library to symbols when
objects are added to the stage. These instances of the symbols are
placed on the stage. Each symbol is a separate instance, and

Introduction to Flash 57
 instances of button and movie clip symbols can be named so that
you can refer to them in your script. In addition, whenever you
modify a symbol, Flash updates all the instances of the symbol on
the stage.
• The three common type of symbol supported in Flash are the
graphic symbol, movie clip symbols and the button symbol.

2.9 KEY TERMS

• Arrowhead: it is the point of an arrow or a shape resembling such a
point.
• Toggle: this implies that there are only two possible settings and
that you are switching from the current setting to the other setting.
• Tapered: A figure that becomes gradually narrower or thinner
towards one end.
• Snap to object option: An option that makes that object being
drawn or moved on screen to snap to or align with other objects on
the stage.
• Color swatches panel: A panel that enable you to directly pick that
requisite color from it. It is also known as a library of color.
• Layering: A technique by which all the content in Flash is
separated and can thus be edited with ease.
• Making: A technique that is used to define the visible area of a
layer.
• Library: The library element in Flash is the storehouse for all the
reusable elements like symbols, movie clips, buttons, videos,
sounds, etc.

2.10 QUESTIONS AND EXERCISES

Short-Answer Questions
1. Differentiate between vector graphics and raster graphics
2. Which factor makes vector graphics relatively higher in quality as
compared to other graphics?
3. List that steps that need to be followed to complete the path of an
open or a closed shape.
4. Write a short note on the properties of the pen tool.
5. List the three options generated by the pencil tool.
6. How do the brush size and brush shape affect the object to be
created?
7. Differentiate between the selection tool and the sub-selection tool.
8. Write a short note on the ‘snap to object’ option.
9. Write short notes on:
• Color swatches
• Color mixer
Long-Answer Questions

Introduction to Flash 5
 1. Explain the tools that are used for creating graphics in Flash.
2. Explain the two options that are used in Flash to fill color into
objects.
3. Describe the various eraser mode options.
4. List the various options of the layer element in Flash.
5. Differentiate between a guide layer and motion guide layer.

2.11 FURTHER READING

Reinhardt, Robert and Snow Dowd. 2006. Adobe Flash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004.Adobe Flash CS6. New Delhi: Dorling Kindersley (India)
Pvt. Ltd.

UNIT 3USING TEXT EFFECTIVELY IN

FLASH
Program Name: B.sc (MGA)
Written by: Srajan
Structure:
3.0 Introduction
3.1 Unit Objectives
3.2 Using Text Effectively
3.3 Using the Text Tool
3.31 Static Text
3.4 Anti-Aliasing Text
3.5 Embedded Fonts versus Device Fonts
3.6 Using Components in Flash
3.7 Building Forms in Flash
3.8 Summary
3.9 Key Terms
3.10Questions and Exercises
3.11Further Reading.

3.0 INTRODUCTION

Introduction to Flash 59
 Text is an important component of websites. It is, in fact, as important
as graphics. You will learn the basics of using text in Flash in this unit. Flash
has several tools the enables a user to use text in the Flash documents
effectively.
Three types of text are used in Flash. These are :
• Static text: Static text is used in titles and labels.
• Dynamic text: Dynamic text is used for displaying text that
changes dynamically during runtime.
• Input text: Input text is used for user activity, for example,
getting the user name and password in the Flash form.
In all the three types of text you can toggle various options for font size,
font style, color, character width, height, maximum characters, character
spacing, justification, drop shadow, blur and glow. Flash allows you to produce
multiple text effects that are not possible in HTML or CSS. It also features the
option of embedding uninstalled text font. This unit will outline the usage of
the text tool to this effect, the use of anti-aliasing text, the use of component if
Flash, and also the process of building forms in Flash.

3.1 UNIT OBJECTIVES:

After going through this unit, you will be able to:
• Understand the basics of text in Flash
• Discuss the text tools used in Flash
• Differentiate between embedded and device fonts
• Discuss the multiple options as it text type
• Define and describe the used of anti-aliasing text
• Understand the used of component in Flash
• Describe how forms are built in Flash

3.2 USING TEXT EFFECTIVELY

Text is an essential part of any presentation; hence, its effective utilization
is very important. The text that appears in the title of a slide is its subject and
that which appears in the body of a slide introduces and explains the main idea.
Therefore, the design and format of a text is extremely important since it can
evoke a wide variety of feelings from the reader and can even define how it is
to be understood.
Flash provides various tools and options that allow us to change the design
and display of the text according to our preference. We will discuss all these
options in the topics that follow.

3.3 USING THE TEXT TOOL

Introduction to Flash 6
 The Text tool(T) allows you to creae three different kinds of texts
according to your requirement. These are as follows:
12. Static text: It refers to the simple, unchanging text that appears in movies.
For example, labels, titles, and descriptive text.
13. Dynamics text: Dynamic txt is used to display text content that is
generated during runtime from a live data source, or text that is updated
dynamically.
14. Input text: input text is used in text fields wherein the user is required to
enter text on his accord. An input text field can be assigned to a variable
that may store the user’s entry.
Text fields that can be modified during runtime like the dynamic and input
text fields are also known as editable text fields.
By default, the text that is first created in Flash is static text. This can,
however be changed by selecting a different text type in the property
inspector. The subsequent textis automatically assigned to the most recently
selected type style.

Fig.3.1 The Default Text Setting on the Property Inspector of the Text Tool
The process of creating text is the same irrespective of the type of text you
want to create. The process can be described as follows:
1. Select the text tool from the toolbar.
2. Define and select the desired setting (font, size, weight, alignment, and
color in the property inspector.

Introduction to Flash 61
 Fig.3.2 A Screenshot Showing the Static Text Forms on the Property
Inspector Option
3. Position the cursor on the stage and proceed to type the text.

Fig.3.3 The ‘Stage’ with Typed text

To edit the text, double-click inside the text box. Flash automatically
switches from selection tool to text tool.

Fig.3.4 The Process of Editing the Text with the Text Tool
The precedingscreenshot shows what the text looks like when it is in
editable mode.
Each type of text, whether static, dynamic, or input its own properties
which can checked in the property inspector. You will notice that some options
are common to all properties. This section will discuss the properties of each
type of text in detail.
3.3.1 Static Text
Static text is the simple, unchanging text that appears in mocies such as
form labels, titles, and descriptive text.
Although the term static text sounds limiting, this box actually offers
the maximum design options and a large variety of colors or alpha levels.
Static tetxt boxes can be scaled, rotated, flopped or skewed. You can also
animate or layer the graphic elements with the help of static text. There
are two ways of creating static text. These are as follows:
1. Labels text: Click on the stage to enter the text on one of the extending
lines and start typing. To control the width of a line in label text, you can
either enter hard returns with the ‘enter’ or ‘return’ key, our you can
convert the label text into block text. To convert label text into clock text,
drag the round corner handle at the corner of the box to the width that you
require. The round corner handle will change into a square handle to
indicate that the box is now constrained and cannot be expanded.
2. Block text: Click on the stage and drag the box to a width of your choice.
This will define the area of the text. When you start typing in the box, the
text will get auto wrapped simultaneously. To change the width of the
box, double-click on it to invoke the square corner handle. Click and drag
the square corner handle to set a new width. This way, you can change the
width of your block text whenever required. To convert block text into
label text, double-click on the square corner handle. It changes into a
round handle. This indicates that the box can now be extended instead of
being constrained.

Introduction to Flash 6
 Lable Text Block Text

Fig.3.5 A Screenshot with Label and Block Texts

To create horizontal text (text with a left-to-right) or a static vertical
text (text with either a right-to-left or left-to-right flow), the static text file is
used

Fig. 3.6 The Horizontal and Vertical Text File

New text created in Flash has a horizontal orientation by default. However, it is
possible to change the default orientation to vertical and change other options
related to it as well. For making vertical orientation the default orientation, go
to ‘Edit’, click on ‘Preferences’, and then select ‘Editing’.

Fig.3.7 The Process of Changing the Text

Orientation to ‘Vertical’ Default Setting
As discussed, each type of text, whether
static, dynamic or input, has its own set of properties
that are displayed in the property inspector.

Introduction to Flash 63
 Fig.3.8 The Properties of Static Text Outlined on
the Property Inspector
1. Text type option

Fig. 3.9 The Text Type Option on the Property Inspector

The text type option allows you to select the type
of text that you want to create, i.e., static, input, or
dynamic

2.Character spacing

Fig.3.10The Character Spacing Option on the Property Inspector

The character spacing option allows you to change the spacing or tracking
between individual letters. The default setting of 0 denotes the built-in tracking
and kerning of the font. Any setting between +1to +60 adds space between the
characters and – to -60 decreases spaces between the characters. To change the
character spacing, you need to first select the text. Use CTRL+ALT+ arrow
keys (right and left) to increase or decrease the spacing between characters
respectively./
The character spacing option is available only for static text. Dynamic
and input texts do not support this option.

Introduction to Flash 6
 Fig.3.11 The Text Tool Displaying the Font Name
When the text tool is active, the name of the current font is displayed. To
change the font, click on the arrow button to invoke the scrolling menu for the
available fonts. Choose a different font from the scrolling menu by clicking on
the desired font.
However, to change the font of an existing text in the document window, first
select the text, and then choose a different font from the scrolling menu. While
selecting a particular font type from the property inspector menu, the currently
highlighted font can e previewed in the display.
The font assigned to the existing text can also be changed by selecting the font
option from the from text menu. The advantage of this method is that the list is
easier to scan. However, this option does not give a visual preview of the fonts.
4. Character position
The character position property offers three options, normal, superscript and
subscript. As the name suggests, normal is the default option that aligns the
text to the baseline. Superscript sets a horizontal line above the baseline and a
vertical line to the right of the base line. Subscript sets a horizontal line below
the baseline and a vertical line to the left of the base line.

5.Font size

Fig.3.13 The Text Tool Displaying the Font Size of Text

This option allows you to increase or decrease the font size of the text. When
the text tool is active, the current font size is displayed in the entry field. To
change the font size, type a specific point size number in the field or use the
point slider the select the new font size.
6. Text color

Fig.3.14The Text Tool Displaying the Text Color Options

Introduction to Flash 65
This option is used to modify or give color to the text. Click on the text color
option to open the color swatches that allows you to select the color for the text

7. Bold and Italic style

Fig. 3.15 The Bold and Italic Styles Displayed by the Text Tool
8. Orientation of text menu

Fig.3.16 The Pop up Menu Showing Direction of Text

This pop up menu is used to select the direction of flow of the text. The
default option is horizontal flow, which orients the text from left to right along
a horizontal baseline. In addition to the horizontal option, there are two more
options-the vertical left to right option and vertical right to left option. As the
names suggest, these vertical options orient the text in columns that progress
from left to right or right to left respectively.
9. Alignment of text
These four icons help in aligning the text as per your requirement. There are
four options in this, left, center, right, and justify. Before entering the text,
select any one of these options to predetermine the alignment. The text you will
type will be aligned accordingly. At the time of editing, however, the
alignment affects only the currently selected text.
Both the vertical and horizontal alignments have the same options these
are, however, displayed a little differently from each other in the property
inspector.

Fig. 3.17 The Four Icons for Aligning the Text

10. Paragraph format options
The paragraph format option allows you to open the paragraph formatting
menu. There are different formatting options for vertical and horizontal
orientation. These formatting options have been discussed here as follows :

(a) Horizontal text paragraph format options

Introduction to Flash 6
Fig.3.18 The Horizontal Text Paragraph Format Options

(i)Indent: The indent option is used in the first line of the paragraph and is
relative to the right margin. By default, this setting described and measured in
pixels.

(ii) Line spacing: This option is used to adjust the space between the lines of a
text. Although you can select a setting for each individual character in the line,
the largest character in a column will always determine the spacing for that
line. By default, line spacing is described in points.

(iii) Left margin: The left margin option used to define the space between the
text and the left border of the text box. By default, this space is described in
pixels.

(iv) Right margin: The right margin option is used to define the space
between the text and the right border of the text. By default, this space is also
described in pixels.

(b)Vertical text paragraph options

Fig. 3.19The Vertical Text Paragraph Format Options

(i)Indent: The indent, in case of a vertical paragraph, is used to adjust the
space between the top border of the text box and the first character in the
column of the text. By default, this setting is described in pixels.
(ii) column spacing: As the name suggests, this options allows you to adjust
the space between columns of the text. It is, by default, described in points.
Although you can select a setting for each individual character in the line, the
largest character in a column will always determine the line spacing for that
line.
(iii) Top Margin: This options is used to adjust the space between the text and
the top border of the text box. By default, the top margin is described in pixels.
(iv) Bottom Margin: This option is used to adjust the space between the text
and the lower border of the text box. By default, the bottom margin is
described in pixels.
11. Width and height of text

Fig.3.20The Width and Height of the Text Tool

As the name suggests, this box displays the width and height of the text. It
also allows you to edit the width and height by changing their values in the
box.
12. Position of text

Introduction to Flash 67
 Fig. 3.21 The Position of Text in the Text Tool
As the name suggests, this box displays the X and Y positions of the text.
These position can be changed by changing their values in the X and Y
position box.
13. URL Link

Fig.3.22 The URL Link Displayed in the Text Tool

The URL link allows the concerned text to be hyper linked. The process of
hyper-linking involves the selection of that text or individual word that you
want to hyperlink. The second step is to type the link for the text in the URL
link box. The text link is then identified with a dotted line. The dotted line does
not appear in the published file.

14. Auto kern

Fig. 3.23 The ‘Auto Kern’ Option Displayed in the Text Tool
Automatic kerning evens out the space between letters forms. It is activated
if the font includes built-in kerning information.
15. Use device font
The Flash. SWF file has no option of device font in the file as it is not
embedded in the software. A Flash player uses the font on the local computer
that most closely resembles the device font.
Using device fonts has two advantages. These are as follows:
(a) Smaller font:
The use of smaller font enables you to have somewhat smaller SWF
files since the device font information is not embedded.
(b) Legible font:
The font is sharper and more legible than exported font outlines,
especially in case of smaller point sizes (below 10 points).
The disadvantage, however, is that in case your system does not have an
installed font corresponding to the device font, the text may look different.
Therefore, device fonts are always a good choice for large blocks of text
such as scrolling texts. These can be used only with static text device fonts.
16. Alias text
This topic has been discussed under a separate section called ‘Anti-aliasing
text’.
17. Rotate text

Introduction to Flash 6
The rotate text option allows you to flip the characters of vertical text so
that they are turned sideways. However, this option is available only if the
selected text has vertical orientation. For example, if you create horizontal
text and then rotate it by 90 degrees, the output that is obtained can easily
be achieved by creating a vertical text and clicking on the rotate button.
18. Target options

Fig. 3.25 The Target Options Displayed on the Text Tool Property
Inspector
Target options are used to select the destination for the link. Hence these
options are available only after a link has been entered in the URL link
field. The options of target are the same as those of a HTML.

Editable text field

Both the dynamic and input text fields are called editable text fields
because they can be modified during runtime. Dynamic text is used to hold
text content that is generated at runtime form a live data source, or text that
is to be updated dynamically. Input text is a text field in which a user enters
text. An input text field can also be assigned a variable to store the user’s
entry.
For dynamic or input text blocks that can be extended, a round handle
appears on the lower right-hand corner of the text block.
For dynamic or input texts with a defined height and width, a square handle
appears on the lower right-hand corner of the text block.

Fig.3.27 The Defined Dynamic or Input Text with a Square Handle

Properties of editable text fields

Introduction to Flash 69
 Fig.3.28 The Properties of the Dynamic Text Option on the Property
Inspector
Each type of text, whether static, dynamic or input, has its own options that
are displayed in the property inspector. Most of these options are common
between the dynamic and input text fields.
Since most of the options related to the dynamic and input text fields are
also shared by the static text fields.
These features are listed as follows:
1. Instance name
2. Render text as
HTML
3. Variable
4. Character
embedding options
5. Line type
6. Selectable
7. Show border

CHECK YOUR PROGRESS

1. List the three basic types of text.
2. What is an editable text field?
3. How can static text be created in Flash?
4. What do you understand by the term auto kern?
5. Which option is used for bringing clarity to text?
6. List the two editable text fields.
7. List the advantages of using device fonts.
8. Explain the importance of the character spacing option.
9. Describe how the font type of any currently selected text can be change.
10. Differentiate between subscript and superscript.
11. What is the default unit of describing line spacing?
12. List the two ways in which static text can be created.
13. What is the default orientation of new text created in Flash?
14. Explain the importance of text in a Flash presentation.

3.4 ANTI-ALIASING TEXT

Fig.3.29 The Icon for Ati-Aliasing Text on the Text Tool

Anti-aliasing is one of the options under text properties. This option is used to
make the text more legible. By default, any text created in the stage is anti-
aliased. Anti-aliased text has a smooth appearance when the font size is big,
but at smaller font sizes, it can sometimes seem blurred and difficult to read.
The alias text option allows you to make the outline of the letter smooth and
sharp and hence more legible.

Introduction to Flash 7
3.5 EMBEDDED FONTS VERSUS DEVICE FONTS
There are two kinds of fonts that are used in the playback of Flash movies—
embedded font and device font.
By default, the finished file includes the font information that is embedded in
Flash. That font information is then used to create the new text. For dynamic
and input text fields, however, the procedure of creating the font is different.
The name of the selected font is store in Flash. The Flash player then searches
for that font on the user’s computer. If the user does not have that particular
font installed on his computer, the Flash player will be unable to find it. To
embed/install the font in the dynamic and input text fields, click on the
character button in the property inspector and specify the range of characters
that you want to embed.
However, not all fonts can be embedded. When the text uses a font that is not
installed on the computer, and one that cannot be embedded, the user will not
see the same font as the original one, to check whether the font your have
chosen is embedded is Flash, open the view menu and select the preview mode
option, followed by anti-alias text. If that font is not embedded in Flash, the
text will have jagged edges.
When working on static text, you can also make use of device fonts that re not
embedded in the file. Conversely, when a device font is used, the Flash player
installs a similar font on the user’s computer too.
To use device font, select the text tool or the text on the stage. Next, use the
check box of the device font to check the device font option.

3.6 USING COMPONENTS IN FLASH

Components are used for adding functionality to the applications of Flash.
These are essentially compiled movie clips written in Action Script. A
component can provide any functionality that its creator can imagine. It can be
a simple user interface control such as a radio button or a check box, or it can
contain content such as a scroll pane.
Components allow you to build complex applications even if you do not have
advanced knowledge of scripting. Components simplify the functionality of
Flash application as the use components involves the simple step of dragging
the particular component form the component panel. Otherwise you would
have created labels, scroll bars, check boxes to improve the functionality of
your applications. While using these in Flash, you can also set predefined
parameters for each of them. Each component has its own properties, and
Action Script methods, and allows you to set and add options at runtime.

Introduction to Flash 71
Fig. 3.30 TheComponents Panel in Flash
All the components are located in the components panel. To view the
components panel, go to ‘Windows’, click on ‘Components’.
The shortcut for viewing the component panel is Ctrl+F7.
Adding a component to a stage
The process of adding a component to a stage is as follows:
1. Open the
component panel to view the components.
2. Select the
component that needs to be added.
3. There are two
ways of adding component to the stage. These are as follows:
(a) Double-click on
the component to be added (it will be automatically added to the
center of the stage.)
(b) Drag the
particular component to the stage.
Once a component has been added to a document, you can view and modify its
parameters and properties in the property inspector or in the component
inspector panel. Also, when you add a component to the stage, Flash adds a
compiled clip symbol to the library.

Fig. 3.31The Library Panel with Two Compiled Clip Symbols

Introduction to Flash 7
Dragging the component icon from the library to the stage enables you to add
more instances of the component.
Once a component has been added to a document, you can view and modify its
parameters are property inspector or in the component inspector panel.
Property inspector

Fig. 3.32 The Property Inspector Panel

The property inspector panel displays the properties and parameters of the
selected tool. The parameters of that tool are displayed in the parameter option
which is next to the properties button.
Component inspector

Fig. 3.33 The Component Inspector Panel

The component inspector display the parameters of the selected component. To
view the component panel, go to ‘Window’and then select ‘Component
Inspector’. The shortcut for viewing the components panel is Alt+F7.
The component inspector panel in Flash CS6 had only one option of
parameters. Flash CS6 however, has two more option—bindings and schema.
These two options bring to the table the more advanced data features of the
components of Flash CS6.
Component in Flash

Introduction to Flash 73
Fig. 3.35 The Three Types of Components in Flash
There are three types of components in Flash. These are as follows:
1. Media
components: Media components are used to stream media into an
application. Media playback is an example of a media component.
2. UI
Components: UI controls are used to interact with an application.
Radio buttons, check boxes, and text input components are examples of
UI controls.
3. Video
Components: Video components are used to control video features like
Play, Forward, Pause, Mute etc.
The proceeding components have been discussed in depth in the subsequent
paragraphs.
Media components

Fig.3.37 The Media Components Menu on the Components Panel

The various media components are as follows:
1. Media
controller: The media controller component is used to control the
streaming of media playback in an application. It enables the user to
connect to a Flash Video (FLV) or an MP3 file.
2. Media
display:The media display component is used to display streaming play
video feature is also enabled in the media diplay component.
3. Media
playback:The media playback component allows the user to play, stop,

Introduction to Flash 7
 rewind, and fast forward through a movie. It is a combination of the
media display and media controller compomets.

UI components

Fig.3.38 The UI Components Drop Down Menu on the Components Panel

The various UI options are as follows:
1. Accordion: An
accordion is a set of vertical overlapping views with buttons along the
top that allow the user to switch views.
2. Alert: An alert
is a window that presents the user with a question and has buttons to
capture their response. An alert in a Flash movie can be posted in the
same way as and alert in a Web browser.
3. Button: A
buttons component allows the user to create a button. Comprising a
label an icon. The interaction with the button is very similar to that with
an HTML button.
4. Check box: A
check box allows the user to crate a box that asks questions with
boolleananswers such as ‘true/false’.
5. Combo box: A
combo box is used to select an option from a scrolling list of options. It
has an editable text field at the top of the list tha allows users to accept
an option from the scrolling list.
6. Data grid: A
data grid is used to display and manipulate multiple columns of data.
7. Data chooser:
A data chooser is used or choose dates from a calendar.
8. Data field: A
data field is a non-editable text field with a calendar icon. When you
click anywhere inside the bounding box of the component, a date
chooser component is displayed.

Introduction to Flash 75
9. Label: A label
is a single-line text field displayed in the dialogue box which is non-
editable.
10. List: A list is
used to select one or more options from a scrolling register. It is similar
to a combo box.
11. Loader: A
loader is an empty component into which an. SWF or a JPG can be
loaded.
12. Menu: A menu
is used to select a command from a list. The menu component is very
similar to a standard menu that you find in many desktop applications.
It is particularly useful to create a Flash application that has a ‘desktop’
feel to it.
13. Menu bar: A
menu bar is a horizontal bar of options. It allows the menus to act as a
group so that you can handle keyboard and mouse input.
14. Numeric
stepper: A numeric stepper comprised two clickable up an down
arrows that allow the user to raise and lower the value of a setting.
15. Progress bar:
This bar displays the progress of a process, usually while loading. The
progress bar is a pre-loader too that you can use to load external. SEF,
MP3, and other files into you Flash movie.
16. Radio button:
A radio button is used to display a group of items from which only one
can be selected. For instance, this buttons will allow you to choose just
one color from a radio button group of five color.
17. Scroll pane: A
scroll pane is used to display movies, bitmaps, and. SWF files in a
limited area, using automatic scroll bars.
18. Text area: A
text area is an optionally editable, multiline text field. It is very similar
to a dynamic text field.
19. Text input:
This is an optionally editable, single-line text input field. It is very
similar to an input text field.
20. Tree: A
window displays the content as selected to use. It has a title bar,
caption, border, and a close button.

CHECK YOUR PROGRESS

15. Why are
components used in Flash?
16. Which panel
allows you to view and modify the components added to a document?
17. Name the three
types of components

Introduction to Flash 7
18. Define anti-
aliasing text. What is the advantage of using anti-aliasing text?

Introduction to Flash 77
Introduction to Flash 7
Introduction to Flash 79
Introduction to Flash 8
Introduction to Flash 81
Introduction to Flash 8
Introduction to Flash 83
Introduction to Flash 8
 3.7 BUILDING FORMS IN FLASH
Flash allows users to create easy-to-use, professional-looking, complex
forms that can collect user data from websites.
The process of designing forms in Flash is similar to that of HTML, in
perspective of the interface. However, there is one differences in Flash, the
form fields can be selected and moved onto the stage from the components
panel.
In HTML, the form sends the value from the user to a server-side script
that processes the data and communicated a response back to the sending
application. The Flash forms also work in the same way, though you have
to add Action Script to format the data . The value has to be entered in a
way that will be understandable to the server-side script.
UI Components have various options that are of great help for creating
forms in Flash. This section will discuss how this is done. We will use the
text input component to collect the name, the combo box component to
select an option, the radio button component to select one option out of
several, the text area component to enter comments, and the buttons
components.

Fig. 3.39 A Form Created in Flash

To create the above from, you need to perform the following steps:
1. Drag the text input component form the components panel and drop it
on the right hand side of the first label, ‘Name’.

Fig. 3.40 This Process of Creating or Form in

Flash, the First Text Input is ‘Name’

In the property inspector, type the instance name ‘name’.

Fig.3.41 The Property Inspector Showing the Typed Input ‘Name’.

There are three fields that need to be set according to the user’s
requirement. You can set these to be editable/non-editable, to use a

Introduction to Flash 85
 password mask, and to display default text ( by typing into the text field
on the parameters tab).
2. Drag the radio button component from the components panel and drop
it on the stage to create the next field.

Fig. 3.42 The Second Text Input is ‘Sex’.

Since this field contains two options (male or female), drag two radio
buttons from the components panel.

Fig 3.43:The Property Inspector Displaying the Parameter Tab

The other tab in the property inspector is that of parameter. This includes a
group name field that is used to name the radio group of the button. Enter the
same group name for each instance of the radio button.
The radio buttons also represent the related choices. Since there are many
choices of which only one will be selected by the user, these choices are
assigned to a group. In the radio buttons, you can have both labels, and their
corresponding values. Labels are what the user sees, and values are what the
form transmits. For each radio button instance, enter the data and label in the
property inspector.
By default, the color for the radio component is black. It can be changed
only by scripting.
3. Drag the combo box component from the components panel to the stage
to create the country field.

Fig 3.44:The Country Field Showing in the Combo box Display

The menu in the combo box displays several choices form which the user can
select any one. Each choice displayed in the menu has a corresponding value
that is passed from the form to the server. These values and their corresponding
menu text (called labels) are added to the component by double-clicking on the
data field in the parameters tab of the property inspector.

Introduction to Flash 8
 Fig 3.45:The Property Inspector Displaying the parameters Tab
Clicking on the data field will open the values pop up.

Fig. 3.46 The ‘Values’ Pop up in the Data Field

To add a value in the data field, click on the plus sign. The values
that are visible to the user the ones that are actually transmitted to
the server. For this reason, numerical values are seen to be the most
efficient.
To add another value, click on the plus sign again. In the
screenshot, we have added five values, each representing a scene in
a movie. To confirm these values, click on OK.
To add labels for the values ( the text that you will actually see in
the combo box), double-click the labels field on the parameters tab
of the property inspector.

Fig.3.47 The ‘Values’ Pop up with Labels Added

The label field, like the data field has a value has a value pop up that opens
when you click on it. Type in the values and then click on OK. The value of
both the data and labels will appear inside the brackets in the appropriate filds
in the property inspector.
4. To create the feedback field, drag and drop the text area component
form the component panel to the stage.

Fig.3.48. Creating the Feedback Field

The default parameters on the property inspector are left untouched.

Introduction to Flash 87
Fig.3.49 The Property Inspector Panel with no Changes in the Default
Parameters.
5. Drag and drop the button component from the components panel to the
stage.

Fig. 3.50.Label on the Parameters Tab Changed to ‘Submit’

6. Changes the label on the parameters tab in the property inspector, to ‘
Submit’.

Fig.3.51 TheProperty Inspector Panel with the Filled in

Parameters Tab
Now, the form is complete. You can see a sample of a form crated in Flash in
Figure C5.

3.8 SUMMARY
• Text is an indispensable part of any presentation. Hence, it is as
important as the graphics in the presentation. You learned the basics of
text and how it can be used effectively.
• Flash provides various tools and options that allow us to change the
design and display of the text according to our preference.
• The text tool (T) allows you to create three different kinds of text
according to your requirement. These are static text, dynamic text, and
input text. You learned the process of creating text in Flash.
• To edit the text, you have to double-click inside the text box. Flash
automatically switches from the selection tool to text tool.

• There are two kinds of font used in the play back of Flash movies,
embedded font and device font.
• You studied that the in case of dynamic and input text field, the
procedure of creating font is different. The name of the selected font
stored in Flash. The Flash player searches for that font on the user’s
computer. If the user does not have that particular font installed on his
computer, the Flash player will be unable to find it.
• While working on static text, you can also make use of device fonts that
are not embedded in the file. Conversely, when a device font is used, the
Flash player installs a similar font the user’s computer too.

Introduction to Flash 8
 • The functions of components in Flash are very important. Components
are used for adding functionality to the applications of Flash. These are,
essentially , compiled movie clips written in Action Script. It can be a
simple user interface control, such as a radio button or a check box, or it
can contain content, such as a scroll pane.
• Components allow you to build complex applications even if you do not
have advanced knowledge of scripting. Components simplify the
functionality of Flash applications as the use of components involves
simple steps of dragging the component form the component panel.
• The property inspector panel displays the properties and parameters of
the selected tool. The parameters of that tool are displayed in the
parameter option, which is next to the properties button.
• Similarly, the component inspector displays the parameters of the
selected component.
• The component inspector panel Flash CS6 has only one option, i.e.,
parameters, Flash CS6, however, has two option-bindings and schema.
• There are three types of components, namely, data components, media
components, UI components. The options under each of these
components were outlined in detail in the unit.
• Flash allows the user to create easy-to-use, professional-looking,
complex forms that can collect user data from websites.
• The process of designing
form in Flash is similar to that of HTML from the perspective of
interface. However, there is one difference; in Flash, form fields can be
selected and moved onto the stage from the components panel.

3.9 KEY TERMS

• HTML: HTML
standsfor Hyper Text Markup Language that is the predominant
Markup language for web pages. HTML is the encoding scheme used to
create and format a web document.
• Superscript text: This
text sets the horizontal line above the baseline and vertical line to the
right of the baseline.
• Subscript text:This text
sets the horizontal line below the baseline and vertical line to the base
of the baseline.
• Static text: Static text is
used I titles and labels.
• Dynamic text:Dynamic
text is used for displaying text that changes dynamically during
runtime.
• Input text:Input text is
used for user activity, for example, getting the user name and password
in the Flash form.
• Horizontal text:It is text
that has a left-to-right flow.
• Vertical text:It is text
that has either right-to-left or a left-to-right flow.
• Normal text:It is the
default option that aligns the text to the baseline.

Introduction to Flash 89
 • Automatic kerning:It
even out the space between letters forms. It is activated if the fond
includes built-in kerning information.
• Anti-aliasing text: This
option is used to make the text more legible. Anti-aliasing text has a
smooth appearance when the font size is big, but at smaller font sizes, it
can sometimes seem blurred and difficult to read.
• Components:These are
used for adding functionality to the applications of Flash. They are
essentially compiled movie clips written in Action Script.
• Property inspector
panel:It displays the properties and parameters of the selected tool.
• Component inspector:It
displays the parameters of the selected component.

3.10 QUESTIONS AND EXERCISES

Short-Answer Questions
1. Outline the process of creating text using the text tool.
2. Write a short note on horizontal and vertical paragraph options.
3. What are the features of dynamic and input text fields?
4. What is anti-alias text?
5. What are editable test fields?
6. What is the difference between building forms in Flash and HTML?
Long-Answer Questions
1. Explain in detail the three types of text tools.
2. Explain the multiple options of each type of text.
3. Describe the ways of creating static text.
4. Explain in detail the components used in Flash.
5. Discuss the properties of static text in detail.
6. Explain the properties of dynamic text.
7. Differentiate between embedded fonts and device fonts.
8. Explain the process of building forms in Flash.

3.11 FURTHER READING

Reinhardt, Robert and Snow Dowd. 2006. AdobeFlash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004.AdobeFlash CS6. New Delhi: Dorling Kindersley (India)
Pvt. Ltd.

UNIT 4FLASH ANIMATION

Program Name: B.sc (MGA)

Introduction to Flash 9
 Written by: Srajan
Structure:
3.0 Introduction
3.1 Unit Objectives
3.2 Introduction to Flash Animation
3.3 Tweened Animation
4.3.1 Creatin Motion Tweens
4.3.2 Creating Shape Tweens
4.4 Creating Frame-by-Frame Animtion
4.5 Using Motion guide Layers
4.6 Adding timeline Effects
4.7 Summery
4.8 Key Terms
4.9 Questions ad Exercises
4.10 Further Reading

4.0 INTRODUCTION
The cartons in comics are displayed through different images. The
sequences of the images define a particular story. Earlier, all this used to be
done manually. Today, a single image is animated to show the movement in
the object (symbol and shape) through the use of Flash . In this unit, you will
study about the three main kinds of animation methods-tweened animation,
frame-by frame animations, motion guide layers, and adding timeline effects to
animations.

4.1 UNIT OBJECTIVES:

After going through this unit, you will be able to:
• Define flash animation
• Discuss the different methods of animation
• Explain in detail the process of animation using this method

4.2 INTRODUCTION TO FLASH ANIMATION

Flash is not only used to create rich internet applications but is also to create
animations. Animation is a technique. In case there is any change in position or
appearance of an object, then it is called animation. Animation can be of any

Introduction to Flash 91
type. It can refer to the simple movement of an object from one place to
another, or it can be simple fade in and fade out of an object. Animation creates
the change in the contents of successive frames over a period of time in flash
The major function of Flash is to bring movement to images.
This concept of animation in Flash is similar to that of drawing cartoons on
paper and then shuffling them to create movement in the images as drawn. The
frames that are used in Flash represent those very pieces of paper. The timeline
of flash displays the frames consecutively and as the play head moves down
the frames, the object, as on screen, appears to move. A very vital aspect of
flash is that minute variations do not have to be made to the graphic to make it
look moving. To this effect, flash used the technique of tweening, i.e. it takes
two graphics and plots the steps as required to gradually moving from the first
to the second.
But where complex animation is to be done, for example, changing facial
expressions, it is advisable to plot the variations manually for each frame.
Where simpler animations are concerned, Flash fills in for the middle frames
morphs an object’s shape over the course of several frames, and also plots
movement for the object effects that are pre-designed animation effects that
can be added to the objects on the stage. Figure c6 illustrates the use of Flash
MX in animation.
In Flash , there are three basic methods of animation as follows:
1. Tweened animation
When Flash creates animations by interpolating the contents of the frames in
between the contents of the starts and end points of an animation, it is known
as a tweened animation. There are two kind of tweening in Flash –shape
tweening and motion tweening.
2. Frame-by-frame animation
When the individual content of each of any number of successive kay frames is
changed manually, the animation thus created is called frame-by-frame
animation.
3.Timeline effects
Timeline effects enables the usage of automated animation and visual effects to
apply to shapes or symbols.

CHECK YOUR PROGRESS

1. WhatisFlashanimation?
2. List the three basic methods of animation.
3. Briefly explainthe following:
(a) Tweened animation

Introduction to Flash 9
 (b) Frame-by-Frameanimation
(c) Timeline
4. Explain the concept of tweening.
5. How does flash help in creating motion in images?
6. What are the three types of tweening?

4.3 TWEENED ANIMATION

The most powerful feature of Flash animation is the tweened animation
function. Tweened animation can be used when you are creating a character
animation or a motion graphic or simple button effect. This tool in Flash makes
it possible for a user to create a smooth animation in relatively less time.
Changes in size ,shape,colour, position, and rotation are possible in tweened
animation. The size of the files is also reduced as you do not have to include
unique information concerning each frame in the animation. Another important
role of tweened animation is that for modifying the animation, one needs to
modify only the beginning key frame and ending key frame of animation.
As discussed in the preceding paragraph, there are three types of
tweended animation. These are as follows:
1.Motion tweening
2. Shape tweening
3. Classic Tweening
A coloured fill and a continuous arrow represents these two tweens in the
Flash timelines between the start key frame and end key frame of the
animation. Green fill with an arrow represents the shape tween and blue fill
with an arrow represents the motion tween. There can also be an incomplete
tween that is either because the wrong tween has been applied or because
information on one of the defining key frames is missing. In case of an
incomplete tween, the continuous arrow is replaced with a dashed line.

Fig .4.1A Screenshot of the Motion, Shape, Classic and Incomplete Tween
in Flash
15. Creating Motion Tweens
For animationgroups, symbols, and editable text you can make use of
motion tweening. It can also be used to scale, skew or rotate items as well
as change the colour and transparency of a symbol and much more.
The process of creating a motion tween is as follows:
1. The first step is to select the layer and frame where you want the
animation to star.
2. Then the object on which motion tween animation is to be used is
imported or drawn.

Introduction to Flash 93
 3. After the second step, select the ‘start key’ frame from where the
animation is to be started.
4. To create motion tween, right click on the start frame and select “create
motion tween”.
5. Flash will automatically create the end frame depending on the frame
rate you have selected.
6. If you have selected 25 fps as the frame rate, flash will select frame
number 25 as the end frame.
7. The length of animation can be increased by dragging the end frame to
the desired frame.

Fig:4.3 the timeline Panel Displaying the Method of Selecting Motion

Tween
7.To preview the animation you need to render the file.
After the animation has been created successfully, a blue fill with a continuous
arrow in the time line on that specific layer appears.
These are various options for motion tween that are displayed in the property
inspector. You select the first key frame or select the frames between the ‘start
And end key’ frame. These options are very useful and add more control to the
animation. These options are as follows:

Fig:4.5 Various Option Displayed on the Property Inspector for Motion Tween
1. Ease: This is very interesting option of Flash. The ease option controls
the rate or speed of animation. Within ease, there is an option of ‘Ease
In’ where in you can slowly star the animation and progressively
increase the speed moving the ease slider down. The value field will
show negative value for Ease In. IN the ‘Ease Out’ option, the
animation starts fast and progressively reduces speed by moving the
ease slider up. The value field will show positive value for Ease Out.
2. Rotate: Rotate animation to the objects enabled through the rotate
option. Select the rotation type from the drop down menu and then type
the number of rotations in the value field. The drop down options of
rotate are as follows:

Introduction to Flash 9
 a) Automatic rotation: It is used to rotate the object in the
object in the direction that requires the least amount of
motion.
b) Clockwise(cw) and Counter clockwise(ccw):These are
used to rotate the object in the indicated direction. You need
to define the value field in both the cases for the number of
rotations. For example, if the value is 2, then the object will
be rotated two times.

3. Orient to path :In case of the orient to path option, the object follows a
particular path. The object is forced to orient its movement to that path
after this option is switched on.
4. Sync: for synchronizing key frames, the sync option is used. The
replaced symbols in the first key frame are automatically updated in the
remaining key frames after selecting this option. Hence, you need to
replace the entire symbol in both the start and end key frame in case the
option is not on.
5. Snap: This option is used to snap the animated object into alignment
with a motion guide. A motion guide is used when there is a need for
animating an object around a specific path.
4.3.2 Creating Shape Tweens
Shape tweens are used for morphing shapes i.e.morphi8ng of one object
into another. This option is similar to motion tween. Turning a star into a
circle, or animating lines by tweening from a dot to a finished line are a few
examples of creating shape tweens. Flash can only shape tween primitive
shapes, i.e., shape tween cannot be used in groups or symbols or text.
The process of creating a shape tween is as follows:
1.First select the layer sand frame where you want the animation to start.
2. In the next step, the objects in which you want the shape tween
animation to be used are drawn or imported.
3. After the object has been imported, you need to select the start key frame
from where the animation is to be started.
4. The fourth step is to select the end key frame where the animation will
end.
5. In the last and first key frame, you need to make the modification to the
object that needs to be animated.
6. Select the beginning key frame i.e., the start key frame and then open the
property inspector and select shape tween from the tween menu.
7. To preview the animation, render the file.
A green fill with a continuous arrow in the timeline on that specific layer
indicates that the motion tween animation has been created successfully.
Like motion tween, shape tween also has some options that are
displayed in the property inspector panel. In order to select any of these

Introduction to Flash 95
options, you need to select the first key frame or select the frames between the
start and end key frame. These options are as follows:

Fig. 4.6 The Property Inspector Displaying the ‘shape Tween’ Option
1. Ease: The ease option controls the rate or speed of the animation.
2. Blend :the blend option in the motion tween has two options of menu
Distributive and Angular. To create smoother interpolated shapes,
distributive blending is used, whereas, to create interpolated shaped that
preserve corners and straight lines, we use angular blending , For
example, to create objects with the end pont of the object as of corners
and lines, you nedd to select angular blending; otherwise the
distributive blending can be used.

CHECK YOUR PROGHRESS

7.What do you mean by tweened animation? Name its two types.
8.What is the process to create motion tween?
9.Explain the different added options in the motion tween?
10. What is the process to create shape tween?
11. Explain the different add3edoptions in the shape tween?
12. What are the major functions of tweened animation?
13. List the used of motion tweening
14. What are the three methods of applying motion tween to an object?
15. List and explain in brief the two types of rotations

4.4 CREATING FRAME-BY-FRAME ANIMATIONS

As explained previously, frame-by-frame animation means changing or
creating an object in each and every key frame. Frame-by-frame animation is
the most basic form of animation.

Introduction to Flash 9
 Fig:4.7 A Screenshot Displaying Frame-by-frame Animation on the Flash
Timeline
This type of animation is time-consuming and larger in size than tweening;
frame-by-frame animation can be used in creating the same way as tweened
animations. Frame-by-frame animation can be used in creating a walk cycle
each key frame object needs to be modified or edited. In case of creating facial
expressions, we us Frame-by-frame animation for 2D animations.
The process of creating a Frame-by-frame animation is as follows:
1 First, select the layer and frame where you want the animation to start.
2 in the next step, the object for the sequence in the first key frame is drawn
or imported.
3. The third step is to select the next key frame and either carry forward
from the objects or create new objects.
4. Until the animation is complete, you can continue to add frames and edit
the objects or create new objects.
5. To preview the animation, render the file.
See figure 4.7 to understand how aFrame-by-frame animation is done.

CHECK YOUR PROGRESS

17. What do you mean by Frame-by-frame animation?
18. Explain the steps for Frame-by-frame animation?

4.5 ADDING TIMELINE EFFECTS

In the timeline, we have built-in animation that can be applied to the object
to be animated. The objects can be text, movie clips, or button symbols. By
default, most timeline effects are rendered as graphic symbols on the
timeline, but if they are applied to a movie clip symbol, they inherit the
behavior.
Timeline effects can be applied by simply selecting an item on the stage
and click on ‘Add Filter’ button in the filter section of the property
inspector. The nested symbol is rendered on the stage and frames on the
timeline hold the finished effects or the animation. Usage of timeline
effects saves a lot of time.

Fig. 4.12 The ‘Add filter’OptionDisplayed in the Property inspector

Introduction to Flash 97
 The process of adding a time line effect is as follows:
1. Select an object (text or a symbol) on the stage.
2. In the second step, you need to apply the effects. So click on ‘add
filter’ button in filter section in the property inspector. The different
categories of effects can be blur, glow, etc.
3. Taking the example of blur effect, the effect will appear. To see the
results,you need to modify the settings and preview the effect on the
stage.
4. The final step is to check the output by rendering the file.

CHECK YOUR PROGRESS

21. What is timeline effect? Name its various options
22. Explain how to add the timeline effect.
23.List the types ofavailable effects.
24. Why is the effects option used in flash animation?

4.7 SUMMARY
• Animation can be done manually as well as automatically. Flash software
enables us to animate the symbols and shapes using different options
• Inflash you do not need to create minute variations for a moving graphic in
animation. The software takes two graphics and plots the steps required to
gradually move from the first to the second. This is called ‘tweening’.
• For simpler animations, in addition to filling in the middle frames, flash can
also morph an object’s shape over the course of several frame, and plot a
course of movement across the stage based on lines or curves that you
draw. Flash has the feature of adding pre-designed animation effects to
objects on the stage by using the bui9lst-in-timeline effects option.
• The three basic methods of animation is Flash are tweened animation,
frame-by-frame animation and the timeline effects.
• There are three types of twinning-motion twinning -shape twinning and
classic twinning. A coloured fill and a continuous arrow represents these
two types of tweens in the Flash timeline between the start key frame and
end key frame of the animation. Green fill with an arrow represents the
shape tween and blue fill with an arrow represents the motion tween.
• A key frame is simply a frame used to hold objects that represent changes
in the animation or action that control the movie.
• Shape tweens are used for morphing of shapes, i.e. morphing of an object
into another. This option is similar to that of motion tween. Turning a star
into a circle, or animation lines by tweening from a dot to a finished line
are a few examples of creating shape tweens.
• In the timeline, you can use text, graphics or button symbols as objects.
Timeline effects can be used by simply selecting an item on the stage and
apply filter effects. The various types of timeline effects and the process of
implementing a timeline effect are also important parts of animation.

4.8. KEY TERMS

Introduction to Flash 9
 • Motion: A change in the location of a body.
• Fade: to become dim, as light, or lose brightness of illumination.
• Animation: This refers to any change in position or appearance, of an
object.
• Tweening: A technique in which Flash takes tow graphics and plots the
steps required to gradually move from the first to the second graphic.
• Tweenedanimation : It is when Flash creates animations by
interpolating the contents of the frames in between the contents of the
stasrt and end points of an animation.
• Frames-by-frame animation: An animation in which athe individual
content of each of any numver of successive key frames is changed
manually.
• Key frame: A frame that is used to hold objects that represent changes
in the animation or actions that control, the movie.

4.9 QUESTINS AND EXERCISES

Short-Answer Questions
1. Explain the procedure of creating a motion tween.
2. What are the various types of basic animations?
3. Explain the various aspects of motion tweening with respect to
the propertyInspector panel.
4. Explain the process of creating a shape tween.
5. Describe the process of adding a timeline effect.

LONG-Answer Questions
1. Explain the three methods of animation in detail.
2. What are timeline effects? Explain in detail the various
types of timeline effects.
3. What is a motion tween? List and explain various types of
motion tween and also explain the process of using motion
tween in an animation.
4.10 FURTHER READING
Reinhardt, Robert and Snow Dowd. 2006. Adobe Flash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004. Adobe Flash CS6. New Delhi: Dorling Kindersley (India)
Pvt. Ltd.

UNIT 5UNDERSTANDING MOVIE CLIPS

Program Name: B.sc (MGA)
Written by: Srajan
Structure:
5.0 Introduction

Introduction to Flash 99
 5.1 Unit Objectives
5.2 Using Nested Symbols
5.3 Using Movie Clip Events
5.4 Summary
5.5 Key Terms
5.6 Questions and Exercises
5.7 Further Reading

5.0 INTRODUCTION
Macromedia Flash has changed the way animation is done. The new
features available in Flash have sped up the process of animation, movie
making, etc. As a result, the production time has been considerably reduced.
The complex effects, ease of modification and reused action technique are
available in Flash by very simple animation.
In Flash, each symbol created can be used almost like a miniature scene
that can contain other symbols and animation. There can be several animations
within a single frame. So, if you have a symbol on the stage that has simple
animation on it and it contains another symbol that is animated, which contains
yet another symbol that is animated, the result on the stage can be quite
complex.
In this case, it is easy to lose track of what is being animated and when.
Hence, good organization is requested. It is important to understand how each
of the symbol type and key framing methods work. In this unit, you will learn
how nested symbols are used to create robot animation. You will also learn
about using movie clip events.

5.1 UNIT OBJECTIVES:

After going through this unit, you will be able to:
• Understand the concept of nested symbols in flash
• Understand the use of nested symbols
• Describe the use of movie clip events.

5.2 USING NESTED SUMBOLS

Nested symbols can be defined as one symbol enclosed inside the other.
Like an animation on the main timeline, a movie clip can contain symbols like
buttons, graphics and even other movie clips.
The two movie clips are named ‘child’ and ‘parent’. The one embedded
or nested inside the other is called the ‘child’ of the movie clip or document
and the mainmovie clip is called the ‘parent’ movie clip. The root timeline for
each level is the parent of all the movie clips on its level, and because it is the
topmost timeline, it has no parent.

Introduction to Flash 10
 There is a link between nested symbols. Hence, the relationship
between the nested movie clips are sequential. The modification made to the
parent movie clip affect another the child. For example, any change made to
the child timeline that is nested inside another timeline can affect or change the
parent timeline too. For example, if tiger is child of jungle and you make a
change in the_xscale property of jungle, then the scale of tiger also changes.

Fig. 5.1 Timeline Displaying the Parent and Child Movie Clips

You can use timeline to send messages to each other with the help of
Action Script. For example, an action on the last frame of one movie clip can
tell another movie clip to play. Target path is used to specify the location of the
timeline in order to control timeline by the use of Action Script option.
An instance name is used for sending messages between each of the
movie clips. Hence, while working with nested symbol, the instance name of
movie clips play an important role.

Fig. 5.2 The Property Inspector Option Showing Name of a Movie

Clips

For example, consider a nested movie clip where there is one parent
movie clip and one child movie clip. The instance name od a parent movie clip
is abc_mc and the child movie clip is xyz_mc.
If the user want to jump in to a certain key frame of a child movie clip
from the main timeline, then in the action panel, the first main movie clip
(parent) instance name will come and then the instance name of the child
movie clip and then finally the frame.
Thus, the code will be abc_mc.xyz_mc.gotoandStop(frame no).
In the latter frame, parent stands for the abc clip and child for the xyz
clip.

Introduction to Flash 101

 Fig. 5.3 A frame Displaying Coded Parent and Clip Movie Clips in
Flash

CHECK YOUR PROGRESS

1. Define nested symbol and give examples.
2. State the importance of an instance name in movie clip.
3. Define child node and parent node.
4. What is a target path?

5.3 USING MOVIE CLIP EVENTS

An event is a software or hardware occurrence that requires a response
from a Macromedia Flash application. For example, an event such as a mouse
click or a key press is called a user event; these are called events because these
are responses to actions. Here, an event is said to have occurred as result of
direct user interaction. While in a system event, the action is not a response to a
particular action, rather it is automatically generated. For example, an event
that is generated automatically by Flash Player such as the initial appearance of
a movie clip on the stage, is called a system event because it isn’t generated
directly by the user.
Movie clips can respond to user events, such as mouse clicks and key
presses, as well as system-level events, such as the initial loading of a movie
clip on the stage. In the Action Script, movie clip events can be handled in two
ways- through event handler methods and through onClipEvent() and on()
event handler. For example, you can add an on (release) event to a movie clip
instance to trigger an action when the user clicks the movie clip; or, you can
add an onClipEvent(load) event to trigger an action when that movie clip loads.
You have to attach the movie clip instances to the event handler as you
can’t use them to target a movie clip from elsewhere in the movie.
You can make use of the dot syntax to refer to a large number of
methods and properties. Not only this, the method can also be used to work on
event likeon Load, onUnload and onMouseDown. For example, the code given
below can be placed anywhere in the movie as long as correct path to the
movie clip instance is used.
Myfile_mc._alpha = 50; or myfile_mc.gotoAndPlay (5)
The behaviors panel already contains some of these codes from where
you can directly add them. The procedure is quite simple. Open the behavior

Introduction to Flash 10
panel and click on the add button and go to movie clip options. After you have
selected the movie clip option, you will find bring forward, bring to front,
duplicate movie clip, load graphic, etc. option.

Fig. 5.4 The Behaviors Panel Displaying Various Movie Clips Option
To attach an event handler, you need to double-click on the movie clip
instance on the stage to bring it in focus, and then enter the code in the actions
panel. The code is attached to the movie clip, which is reflected through the
title of the actions panel.
These event or movie clip event can be added in both the buttons and
movie clips.
Let take an example where we will use the button symbol to jump to the
specific key frame of movie clip symbol. Following are the step involved in
creating such a button:
1. Create two objects; one for the movie clip and one for the button. Give
the movie clip an instance name, for example, let us take the instance
name anim_mc.
2. Now select the button ‘open behaviors’ panel.
3. In the behaviors panel, click on the add or plus button to add a
behaviors.
4. After clicking on the add button, a menu will appear, select the movie
clip option and then select the ‘Goto and Stop at’ frame or label option.

Fig. 5.5 The Behaviors Panel Displaying ‘Goto and Stop at frame or
label selected’

5. Clicking on it will open its dialogue box with several options.

Introduction to Flash 103

 Fig. 5.6The ‘Goto and Stop at frame or Label’ Showing Target Movie
Clip to be Jumped

6. Select the target movie clip instance and enter the frame number or
label name you want to jump the movie clip to and after the selection,
click on OK. For example, in the above image we had selected
anim_mc movie clip (instance name of movie clip) and wanted to jump
to the second frame of the movie clip.
7. The behavior now appears in the behaviors panel.

Fig. 5.7 The Behaviors Panel Displaying Release of the Movie Clip

8. To check what code is written for these, select the button and open the
action panel.

Fig. 5.8 The Action Panel Displaying the Codes for the Movie Clips

After rendering the file, the output will show two objects in the
stage; one button and the other a movie clip. Clicking on the button will
jump the movie clip its second frame.

Introduction to Flash 10
 CHECK YOUR PROGRESS
5. What do you mean by movie clip event?
6. Which option helps you to jump to the desire frame of a movie
clip?
7. How is a system event different from a user event?
8. What are the two ways in which movie clip events can be
handled in the Action Script?
9. Define event

5.4 SUMMARY
• The creation of movie clip in Flash requires an understanding of the
concept of nesting.
• In nested symbols, one symbol is enclosed inside the other. Like an
animation on the main timeline, a movie clip can contain symbols
like buttons, graphics and even other movie clips.
• The two movie clips are named as ‘child’ and ‘parent’. The one
embedded or nested inside the other is called the ‘child’ of the
movie clip or document and the main movie clip is called the
‘parent’ movie clip.
• A link exists between nested symbols. The relationship between the
nested movie clips are sequential. This implies that the
modifications made to the parent timeline will affect the child.
However, the converse is not true.
• Buttons can be used in movie clip to move to a specific frame for
editing.
• An event is a software or hardware occurrence that requires a
response from a Macromedia Flash application.
• Movie clips can respond to user event such as mouse clicks and key
presses, as well as system-level event such as the initial loading of a
movie clip on the stage. In the Action Script, movie clip events can
be handled by either of the two ways, through event handler
methods and through onClipEvent() and on() event handler.
• The behaviors panel already contains some of these codes from
where you can directly add them.
• In order to attach an event handler you need to double-click on the
movie clip instance on the stage to bring it in focus, and then enter
the code in the actions panel. The code is attached to the movie clip,
and is reflected through the title of the actions panel.
• These events or movie clip events can be added in both the buttons
and movie clip.

Introduction to Flash 105

 5.5 KEY TERMS
• Nested:Placing one element inside another. In
programming terms, you may nest one object inside another object,
inside another so on and so forth.
• Timeline: Organizes and control a movie’s
content over time in layer and frames.
• Main movie: The base timeline of the document.
• Symbols: A symbol is graphic, button, or movie
clip that you create in Flash and can reuse throughout your movie
or in other movies. Any symbol that is created in Flash is added as
an entry in the library automatically. Every symbol contains a
unique timeline and stage along with layers. A symbol is created
and subsequently chosen in accordance with the usage to be made
in the movie.
• Movie clips: These are used to create reusable
pieces of animation that play independently of the main movie’s
timeline. They may contain interactive elements.
• Button:These are used to create interactive
buttons that respond to user input.
• Graphics: These are used for static images or
reusable pieces of animation that are tied to the timeline of the main
movie. Interactive controls and sounds do not work with a graphic
symbol.

5.6 QUESTION AND EXERCISES

Short-Answer Questions
7. Explain the
relationship between nested movie clips with a relevant example.
8. What are
events? Explain the two types of events.
Long-Answer Questions
9. Explain how
button symbols can be used to jump to specific key frames.
10. Explain the
procedure of adding preset codes from the behavior panel.

5.7 FURTHER READING

Reinhardt, Robert and Snow Dowd.2006. Macromedia Flash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004. Macromedia Flash CS6. New Delhi: Dorling Kindersley
(India) Pvt. Ltd.

UNIT 6 ADDING SOUND AND VIDEO

Introduction to Flash 10
 Program Name: B.sc (MGA)
Written by: Srajan
Structure:
6.0 Introduction
6.1 Unit Objectives
6.2 Importing Sound
6.3 UsingBehaviors to Load Sound
6.4 Adding Videos
6.5 Using the Flash Media Components
6.6 Summary
6.7 Key Terms
6.8 Questions and Exercises
6.9 Further Reading

6.0 INTRODUCTION
Apart from graphics and movie clips, you can also import sound files into
Flash. It is a simple process and is quite fast too.
Today, we also have web applications that synchronize video with
animation,textand graphics without having to program the same within
minutes. A suite of new streaming media tools provided in Macromedia Flash
MX 2004 Professional helps in programing sound and video files in Flash.
There is also the behaviors option in Macromedia Flash MX 2004 that
helps in connecting the media components to each other and other applications.
In this unit,you will learn how to add sound files to a web page.You will
also learn in detail how it is possible to manipulate the timeline of a video file
while it is being inserted into same Flash movie clip. You can also add the
pause, play, fast forward and fast rewind buttons just like any other regular
play head.
Subsequently, you will also learn how a video is added to Flash. The use of
the media component will also be discussed in detail in this unit..

6.1 UNIT OBJECTIVES:

After going through this unit, you will be able to:
• Understand the how to import sound files to Flash
• Identify the steps to import sound files
• Identify the step to add videos
• Discuss the use of Flash media components

6.2 IMPORTING SOUND

Introduction to Flash 107

 Flash has the capability of importing sound files. Flash, we can drag
buttons,graphics and movie clips, sound files onto the stage as objects. There
are three types of sound files,.avi,.wav, and .mp3That Flash MX 2004 supports.
In Flash, buttons, soundfiles, graphics, and movie clips are stored in the library.
When a sound begins to play, you can use tools like the property
inspector,timeline, and Action Script to control and add effects to it like fading
in and out along with other features like the time when the sound should stop,
how it must loop,etc.
Flash supports the following sound file formats:
1. MP3 (Windows and Macintosh)
2. WAV (Windows only)
3. AIFF (Macintosh only)
If you have QuickTime4 or later installed on your system then Flash can
also import these additional sound file formats as follows:
1. AIFF (Windows and Macintosh)
2. Sound Designer 2(Macintosh only)
3. Sound Only QuickTime Movies (Windows and Macintosh)
4. Sun AU (Windows and Macintosh)
5. System 7 Sounds (Macintosh only)
6. WAV (Windows and Macintosh)
In order to import a file to Flash, it is necessary that the respective file
formats is supported on your system .Otherwise, Flash displays a warning
message indicating that the operation cannot be completed or that the file is
corrupt.
The process of importing a sound file to Flash is as follows:
1. Click on ‘File’, click on ‘Import’, andselect ‘Import to Library’.

Fig. 6.1 A Screenshot showing the process of importing sound file to Flash
2. Before you click on the ‘open’ option in the import to library dialogue
box, navigate to and select the sound file that you want to import.
After the file is imported to the Flash Document, it is stored in the Flash
library with its filename intact. A waveform appears in the library preview
when you select and click on the sound file. To listen to the sound file,
click on the ‘play’ button above the wave form and test the sound.

Introduction to Flash 10
Fig. 6.2 A Screenshot showing the Second Method of Importing a Sound
File into Flash
You can also import sound file to Flash by dragging the sound file from the
specific path to the stage or the timeline window or library panel in Flash. It
will automatically import the sound file to flash.
There are three ways of adding sound to Flash document. These are as follows:
1. Adding sound to the timeline
2. Lading sound from the library
3. Loading sound from outside
Adding sound to the timeline
1. In case the file has not been imported to the Flash document, the first
step is to import the sound file to the library.
2. The second step is to create a layer for the sound
3. These third step is to move to the sound layer and select the key frame
from there. The sound file will begin to play then key frame form there
4. Finally, select the new sound layer and drag the sound from the library
panel onto the stage. The sound will be added to current layer. You will
notice the sound waves appear in the current layer of the
timeline.However,the sound will not appear as an object on the stage.

Fig. 6.3 The Method of Adding Sound to the timeline

Another method of adding sound to the timeline is as follows:

1. In the timeline,initially select first frame that contains the sound file and
the open the property inspector panel.
2. In theproperty inspector panel, select the sound file from the sound
popup menu

Introduction to Flash 109

 Fig. 6.4TheProperty inspector Panel Showing the Sound Pop Up
Menu Selected

3. After selecting this option, you will add it to that particular layer of
timeline.
Let us look at the other properties of sound that appear in the property
inspector upon selection of the frame that contain sound.

Fig. 6.5TheProperty inspector Panel Showing Properties of Sound

Files.

Upon selection of the sound option the other two options in this respect are
as follows:
1. Effects menu
The property inspector has several features to affect a frame in Flash.The
screenshot that follows displays the properties to this effect. The sound is
displayed in the sound menu for that frame. If you select the effects menu, the
list of effects will appear like left channel, rightchannel, fadein, fade
out,etc.The effects have been explained in detail as follows:

Introduction to Flash 11
 Fig. 6.6TheProperty inspector Panel Showing Features of the Effect
Menu.

(a) None: The ‘none’ effect applies no effect to the sound file. You can
select this option to remove the previously effects

(b) Left/Right Channel:The left/right channel plays the sound in the left
or right channel only.
(c) Fade left to right/Fade right: The fade left to right/fade right to left
shifts the sound from one channel to the other.
(d) Fade in: This option gradually increases the volume of the sound over
its duration. This effect manages the gradual increase in sound.
(e) Fade out: The fade out effect gradually decreases the volume of the
sound over its duration. This effect manages the gradual decreases in
sound.
(f) Custom:The custom effect lets you create custom in and out points of
sound using the edit envelope option.
(g) Edit:The edit button on the right is used for editing the sound
manually, Both the Edit button and custom button open and edit
envelope dialogue box

Fig. 6.7A screenshot of the Edit Menu used for Editing the Sound
Manually
You can also manually adjust the sound effects. In order to select an effect to
apply to the sound, the edit envelope dialogue box is selected. There are three
options in the top panel the left channel, the bottom panel, and the right
panel.You need to click and drag on the envelope handles-the white squares –
to adjust the amplitude. You can add the envelope handle by clicking anywhere
on the line that joins the existing handles.

Introduction to Flash 111

For editing sound using the edit envelope option, you need to perform the
following steps:
a. The time in and time out option is used in the sound to change the start
and end points of a sound. You have to drag the time in and time out
controls as in the edit envelope option.

Fig. 6.8A screenshot of the ‘Time in’ and ‘Time Out’ options in the
Edit Envelope Options

b. Drag the envelope handles to change levels in the sound envelope at

different points in the sound. Envelope lines show the volume of the
sound as it plays. To create additional envelope handles (up to eight
totals), click on the envelope lines. To remove an envelope handle, drag
it out of the window.

Fig. 6.9A screenshot of the Process of changing Level of sound.

c. Click on the zoom in or out buttons to display more or less of the sound
in the window.
d. Click on the seconds and frames buttons to switch the time units
between seconds and frames
e. Click on the play button to listen to the edited sound.

Introduction to Flash 11
 2. Sync menu

Fig. 6.10The Sync Menu in the Timeline

The Synchronization of sound with the movies is very important.
Tosynchronize sound with the movie, you have to select the sync menu;
depending on how you want to play in the timeline. You can select different
sync options in different frames. The option in the sync menu applies only to
the currently selected frame.
The four sync options are as follows:
1. Event, as default, synchronizes the sound with an event. In the default
action, the sound begins to play from the time it enters the frame in the
timeline, and continues to play, independently of the timeline. If the
sound is longer, it continues to play even after the play head has
stopped. This can create some problems with large sound
files.Sometimes, at the time of loading the sound, the movie may pause
at the start frame of the sound or the event frame. In the animation, the
sound will begin to play again, on top of the previous instance. This
will happen once the sound has stopped playing and loops back to the
beginning while the sound is still playing. Therefore, we use the start
sync option for sounds that span across a number of frames.
2. Selecting the start button causes the sound to begin playing when the
movie loads.
3. Selecting the stop button prevents the sound from automatically playing
when the movie loads. This option is similar to adding a stop() action
to an object. It helps you to control the sound automatically. Use this
option when you want the sound to wait for an event such as a button
click, before playing.
4. Stream keeps the sound in sync with the animation. The length of the
sound is determined by the number of frames in the animation.

The sound can be played repeatedly by setting a repeat value in the

menu next to the sync menu. You can select the option of ‘repeat’ to
loop the sound a specified number of times, or the loop option to loop
the sound continuously. In case of looping, you increase the span of the
sound, allowing it to play through the entire length of an animation. At
the same time, looping also keeps the file size down.
While importing audio, the greatest drawback is that you have to see
that the frame length and length of the audio should be the same;
otherwise there will be no synchronizationThus, the number of frames
in the timeline and the length of the audio should be equal, otherwise
the audio will play only till the point where the number of frames end.

Introduction to Flash 113

Loading sound from library
There is difference between loading sound from the library and adding sound
in the timeline. For loading sound, you can use any of the following methods:
1. In the library panel, locate the sound andthen click properties. Select
Action Script tab from the property menu. Linkage will help you to
export sound to the Action Script so that it can be called using action
scripting.

Fig. 6.11 The Process of Loading sound from the library.

Upon selection of the linkage option, the linkage properties dialogue
box opens. You can enter a new identifier or go with the default one
that is based on the sound’s file name. The identifier name used in the
Flash document is ‘sound’

Fig. 6.12 A Screenshot showing the linkage properties Dialogue box

The export for Action Script checkbox is selected after you have specified the
identifier name. Now you can load the sound file in the Flash Document
2. Sound has to be loaded at some definite location.Hence,in the timeline,
select the key frame where sound is to be loaded and open the Action
Script panel

Fig. 6.13 The Action script Panel in the Timeline with Loaded Sound file

Introduction to Flash 11
 3. In the Action Script panel, enter and check the following information:
• My sound is the new sounds object that we have created.
• The code attach sound is the code which is used to attach sound.
• ‘Sound1’ is the identifier name given to the sound in linkage.
Loading sound from outside
Loading sound from outside mean loading sound from a specific path
1. In the timeline, select the key frame where sound is to be loaded and
open the action script panel
2. In the Action Script panel, enter and check the following information.

Fig. 6.14 The Process of Loading Sound from a Specific path

• My
sound is the new sound object that we have created.
• The
code load sound is the code which is used to load sound
• The path
given for the folder where the sound is to be called is ‘assets/audio….’.

CHECK YOUR PROGRESS

1. What are the three different sound file formats supported by Flash?
2. How do you synchronize sound with the movie?
3. Explain in brief the process of importing a sound file into Flash.
4. What are the three ways in which a sound file can be added to a
Flash document?
5. What is the function of the identifier?
6. List the four types of the Sync options.
7. Describe the use of the edit envelope option.
8. List the effects that can be added to a sound.

6.3 USING BEHAVIORS TO LOAD SOUND

Behaviors are also used to load sound in Flash. Thereare several pre-built script
in behaviors that save the user from coding,etc.These are used for controlling
sound objects in a movie, inclusive of actions like play sound, stopsound, and
stop all sounds. But in order to use the pre-built script for play sound behavior,

Introduction to Flash 115

you need to load the sound using the load sound option from library or the load
streaming MP3 file behaviors.
For loading sounds using behaviors, you need to perform the following steps
1. In the library panel, locate the sound and then click properties. Select
Action Script tab from the property menu. Linkage will help you to
export sound for the Action Script

Fig. 6.15 A screenshot showing the process of Loading Sound using

Behaviors to the library

2. After selecting linkage, click on it to open the linkage properties

dialogue box .The Default identifier will appears in the identifier
column. You can enter a new identifier or keep the default one, which
is based on the sound’s file name. The identifier name used in Flash
documents is ‘sound’

Fig. 6.16 The linkage Properties Dialogue box showing the Linkage
Menu.

3. After specifying the identifier name, select the export for Action Script
checkbox and Click on OK
4. Post selecting the export for Action scriptoption, sound can be loaded
into the Flash panel.
5. In the timeline, select the key frame where sound is to be loaded and I
then open the behaviors panel.
6. After the behavior panel opens, click on the add button. The menu bar
will drop down and drop the menu, select sound and then load sound
from the library.

Introduction to Flash 11
 Fig. 6.17 A screenshot Showing the Drop Down Menu on the ‘Sound’
Option of the behavior Panel

7. The linkage identifier is entered into the ‘load sound from library’
dialogue box. A name is given to the instance as this behavior creates
an instance of the sound. It is typed into the identifier field

Fig. 6.18 The ‘Load Sound from Library ‘Dialogue Box showing the
Linkage ID of the Sound File

8. To automatically allow the sound to start playing when the movie loads
(otherwise, unchecked it), the ‘play this sound when loaded’ option has
to be kept checked.
9. Click on Ok.The behavior now appears in the behavior panel.

Fig. 6.19 The Behavior Panel Showing the sound File selected for
Playing Sound Along with the Movie

10. Select the key frame where the behavior is to be added and open the
Action Script panel to see the code

Introduction to Flash 117

 Fig. 6.20 The Action Script Panel Showing the Codes of the Sound
Files.

6.4 ADDING VIDEOS

Flash also allows videos to be edited and added to a Flash document.

Figure C is an example of special video effect. Before you import video to
Flash, consider what video quality you need, which video formats you want to
use with the FLA file, and how you want it to be downloaded. The size of the
SWF file that you publish increases when you import a video into FLA file.
The video starts downloading by default, irrespective of its use to the user. You
can also stream the video from an external Flash video(FLV) file on your
server.
Embedded video clips cannot be imported in a variety of file formats if you
have Quicktime4 or later/versions (Windows or Macintosh) or DirectX 7 or
later versions (Windows only) installed on your system. The different file
formats include MOV (QuickTime movie), AVI (Audio Video Interleaved
file), and MPG/MPEG (Motion Picture Experts Group file).You can import
linked video clips in the MOV format.
Flash documents with embedded video clips can be published as .SWF
files. Flash documents with linked video clip must be published in QuickTime
format.
The following video file formats are supported by Flash for importing
embedded video clips if QuickTime4 is installed (Windows and MAcintosh):
1. Audio Video Interleaved (AVI)
2. Digital Video (DV)
3. Motion Picture Experts Group (MPEG or MPG)
4. Quick Time Movie (MOV)
The following video file formats are supported for importing embedded
video if DirectX 7 or later installed (Windows only);
1. Audio video Interleaved (AVI)
2. Motion Picture Experts Group (MPEG or MPG)
3. Windows Media File (WMV or ASF)

Introduction to Flash 11
 Multimedia file have to be compressed and decompressed while importing
and exporting them to Flash. By default, Flash imports and exports video using
the Sorenson Spark codec. A codec is a compression/decompression algorithm
that is used to control compression and decompression of multimedia files
during import and export.
Sometimes while importing a file, Flash displays a warning message
indicating that the operation cannot be completed as the particular file formats
is not supported by the system. In some case, Flash may be able to import the
video but not the audio in a file.For example, audio is not supported for the
MPG/MPEG files as imported with Quicktime4.In such cases, you can import
the video without sound. However, Flash will display a warning message
indicating that the audio portion of the file cannot be imported.
The process of importing a video file is as follows:
1. Click on ‘File’, click on ‘Import’, and then select ‘Import video’.

Fig. 6.21 The Process of Importing a Video File in Flash

2. In the import dialogue box, move the cursor to the video file. And click
on the open option
3. Clicking on the Video import wizard option. The video import wizard
option provides a streamlined for importing video to a Flash document.
The wizard lets you choose wheatear to import a video clip as an
embedded or a linked file. The process of importing videos using the
wizard involves three steps:
a. Selecting video file in video import wizard (First step)
b. Embedding file (Second step)
c. Finishing video import (Third step)

Fig. 6.22 The Video Import Wizard Showing the Process of Importing
Videos(First step)

Introduction to Flash 119

 4. QuickTime is the first step of the wizard. The Window displays the
option as to whether you want to link or embed the video. The embeded
video option is recommended option. Upon selection of embed the
video option, click on next to jump to the next step

Fig. 6.23The Video Import Wizard Showing the Process of Importing

Videos(Second Step)
5. Editing is the Second step of the wizard. This involves two option as
follows:
a. Import the Entire Video: This option selects the entire video
to be added. Clicking on the next button will show you the third
step, i.e., encoding
b. Edit the video first: This option allows you to edit the video
and also select the edited video for the purpose of addition
.Selecting this option and subsequently clicking on the next
button will take you to the editing window.
Select the second option, i.e. Edit the video first option and then
click on the next button.
6. The Screenshot that follows shows the window that appears after you
select the ‘edit video’ option. Using this option, you can select the in
and out points for a clip, Create multiple clips from one imported clip,
and select other editingoptions. This option of editing a video at the
time of importing it is especially useful in case of raw footage.

Fig. 6.24 The Video Import Wizard Completing the Process of Importing
a Video (Third Step)

Introduction to Flash 12
 7. After completing the last step, click on the ‘finish’ option to import the
video. The video will then appear in the library.

Fig. 6.30 A screenshot Showing the Library Option with an Encoded Video
Clip File in it.
In case the video clip is imported to the stage than the library, a warning
message will appear on screen. A warning message will also appear on screen
if the number of frames of the video clip exceeds the number in the current
timeline. In case you click on the ‘yes’ option, you will be able to insert the
required number of frames. If you select the ‘No’ option, the video frames will
appear outside the current timeline and will not be displayed in the movie.
The video can be added to the stage from the library by being dragged like
any other object. A warning message appears if the video exceed the current
number of frames in the timeline.

CHECK YOUR PROGRESS

9. Discuss the importance of behaviors in importing sound file.
10. What are the two options available in editing?
11. List the various types of file formats of embedded video clips that
are supported by Flash
12. What are the video clip formats supported by Flash for embedded
video clips in the following scenarios:
• When QuickTime4 is installed
• When Direct X 7 is installed
13. What is codec?
14. Explain in brief the process of importing videos using the video
import wizard.

Introduction to Flash 121

 6.5 USING THE FLASH MEDIA
COMPONENTS
In order to add a movie or an mp3 to a pre-configure playback window,
you can use media components. These are a part of component panel. The
media componentsuite consists of three components, media display, media
controller, and then media playback. The media components supported only
FLV videos, i.e. , it will add only those videos which are in the FLV format.
The components have been described in detail as follow:
1. The first component is the media display component that adds media to
FlashDocument is as simple as dragging the component to the stage and
configuring in the document inspector. In addition to setting the
parameters action. There is no visual representation of the media
display component during playback; only the video clip is visible.
2. The Second component is the media controller component that adds
interactivity. It provides user interface control that let the user interact
with streamingmedia. Thecontroller features the play, pause, and
rewind option and a volume control. It also includes play bars that
show how much of the media has been loaded and how much has been
played. To navigate to the different parts of the video, the paly head
slider can be dragged forwards and backward on the play bar.
Usingbehaviors or Action Script, you can easily link this document to
the media display component to show streaming video and provide user
control.
3. The third component is the media playback component that provides
the easiest and quickest way to add video and a controller t your Flash
documents. Both the features of media display and media controller are
combined into a single component .Hence, it is an
integratedcomponent. The media display and media controller
component instances are automatically linked to each other for
playback control.

The following is an example that illustrates how to add a media

playback component:
1. The first step is to export a video from the library to an external
FLV file, right-click on the embedded video and selects the
properties option from the shortcut menu. Once the embedded video
properties dialogue box opens, click on the exportbutton. In the
export FLV dialogue box, navigate to the folder and save the file.
2. The second step after creating FLV file is to select the key frame
and open the component panel and drag the media playback
component onto the stage.
3. In the third step, the settings need to be defined. In the property
inspector panel, you need to enter a name for the component
instance and then open the component inspector panel to define the
setting of the media playback component.
4. In the fourth step, select the FLV to play your Flash movie.

Introduction to Flash 12
 5. In the URL field, if the movie is at the same location as your Flash
document. You need to enter the location of the movie such as
‘movie.flv’.To stream a movie from a website, enter the file’s
URL…
The play bar is used to define the length of the video. In the play bar,
you need to enter the videos length into the video length field. Check
milliseconds in the play bar to use milliseconds. Uncheck this box to
use the frames per second field.
To customize how the control should appear and function, set the
option to automatically play or any other option.
For testing the movie and rendering the file, you need to move your
mouse over the bottom of the playback window in the rendered file.
When you will move your mouse, the controls will appear, letting you
play,pause,stop and adjust the volume.

5.4 SUMMARY
• The process of importing a sound file to Flash and also the process
of adding sound to the timeline
• The various effects included under the effects menu.
• The edit envelope option that is used editing sound files.
• The synchronization of sound with the movie is very important. To
synchronize sound with the movie, you have to select the sync
menu. Depending on how you want the sound to play in the
timeline, you can select different sync option in different frames.
• The process of loading sound from the library
• Videos can be imported by coding as well as by behaviors,
Behaviors save the user from coding, etc..,as the behaviors panel,
have several pre-built script for controlling the sound objects in a
movie
• The use of Flash media component to add a movie or an mp3 to
pre-configured playback window and the three components, media
display, media controller, and media playback were also discussed
briefly.

5.5 KEY TERMS

• Synchronization:The timekeeping which
requires the coordination of events to operate a system in unison
• Encoding: The process of transforming
information from one format into another. A content format is a
specific encoding format for converting a specific type of data to
information.
• Streaming media: Multimedia that are
constantly received by, and normally presented to, an end-user
while being delivered by a streaming provider.

Introduction to Flash 123

 • Scroll pane: To display a component that is
large or one whose size can be changed dynamically, when screen
real estate is limited.
• FLA file: An FLA file is a Flash source file that
contains all the animation and graphics.
• Codec: A codec is a compression
/decompression algorithm that is used to control compression and
decompression of multimedia files during import and export.

5.6 QUESTION AND EXERCISES

Short-Answer Questions
9. How can one
synchronize sound with the movie in Flash?
10. Define Spark
codec.
11. Explain the four
types of sync options
12. What is the
difference between loading sound from the library and adding sound
to the timeline?
13. How can sound
be edited using the edit envelope option?
14. Name the
options displayed in the effects menu.
15. What is the
main function of the sync menu?
16. What is
compression profile?
Long-Answer Questions
11. Explain in detail
the different ways of adding a sound file to Flash.
12. Explain how a
sound file can be loaded from the library.
13. How can sound
be added to the timeline?
14. What is Flash
media component? Discuss its various types in detail
15. Explain the
process of importing videos using the video import wizard option.
16. Explain in detail
the process of importing a sound file and video into Flash.

6.9 FURTHER READING

Reinhardt, Robert and Snow Dowd. 2006. Adobe Flash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004.Adobe Flash CS6. New Delhi: Dorling Kindersley (India)
Pvt. Ltd.

Introduction to Flash 12
UNIT 7 PUBLISHING FLASH MOVIES
Program Name: B.sc (MGA)
Written by: Srajan
Structure:
7.0.Introduction
7.1 Unit Objectives
7.2 Publishing Flash movies
7.2.1 Publishing Flash Movies for Web Use
7.2.2 Publishing Flash Movies for CD-ROMs
7.3 Flash and HTML
7.4 Evaluating Download Performance
7.5 Summary
7.6 Key Terms
7.7 Questions and Exercises
7.8 Further Reading.

7.0 INTRODUCTION
Publishing Flash animation and making it work on a server is the most
widely done activity among flash users. There is no point in being able to
create great flash movies if you cannot publish the movie on the web and resize
the movie to its correct dimensions.
In this unit you will learn about the group of files that are created as a
part of the publishing process and goes through the steps that you need to know
in order to get your Flash movie onto a web page or into other formats.
You will also learn to detect the Flash player and publish your Flash
movie on the Internet. Flash movies are contained in HTML pages. Flash will
help you make the necessary HTML pages when publishing. The unit will also
explain the process of evaluating download performance.

7.1 OBJECTIVES:
After going through this unit, you will be able to:
• Understand the concept of publishing Flash movies
• Describe how to publish movies for web use
• Describe how to publish movies for CD-ROMS
• Understand how to use Flash objects in HTML pages
• Understand the process of evaluating download performance

Introduction to Flash 125

 7.2 PUBLISHING FLASH MOVIES
After the graphic has been created in the Flash movie, the movie needs to
be delivered. A few common delivery media are the web, a CD-ROM (or pen
drive), or a Quick Time Flash movie.
The publish settings command is used to publish Flash document. In the
publish setting command, you need to select the publish file formats and file
format settings. By using the publish command, the Flash document is
published. The publishing configuration is saved with the document in the
publish settings box. The publish profile can be created or renamed in order to
have established publish settings.
Various files are generated depending on the options you specify in the
publish settings dialogue box. These files are as follows:
1. The .SWF file of Flash
2. Alternate images in a variety of formats, (GIF,JPEG,PNG and Quick
Time) get generated automatically when a Flash player is not available.
3. Another file is the supporting HTML document(s) required to show the
SWF content(or an alternate image in a browser and control browser
settings.
4. There HTML files are generated(if you keep the default ,’detect flash
version’ ,selected),the detection file ,content file, and the alternate file
5. Quick Time videos from flash content (EXE, HQX or MOV files) and
projector file stands for Windows and Macintosh.
In order to open the publishing settings dialogue box, go to ‘file’ and then
select ‘Publishing Settings.
In case no object is selected, then property inspector shows the publish
button. Clicking on this button will open the publishing setting dialogue box.
Alternatively, you can use the shortcut for opening the property inspector
which is Ctrl+Shift+F12.

Fig. 7.1 The Property Inspector Dialogue Box Showing the Publish
Settings Window

Introduction to Flash 12
The above screenshot shows the publish settings window in the property
inspector dialogue box. The first tab of the dialogue box, Formats, lets you
select the medium for which you are publishing.
After you select an option as per the requirement, the other related tabs in the
dialogue box become available. For example, if you select Quick Time, the
Quick Time tab appears which lets you enter the playback settings for a Quick
Time flash movie.
For example, in the preceeding screenshot, we selected Flash and HTML
and after the selection, the respective tabs were shown. Click on the tab to see
its options.
The folder option next to each of the selected formats helps to change the
location where your files will be saved. This opens a destination dialogue,
which you can use to navigate to the folder where you want to keep your final
files.
Finally, after the option is selected, click on the ‘publish’ button to
export the final files. Otherwise, click on OK to save your settings and return to
the Flash document.

7.2.1Publishing Flash Movies for Web Use

The first two options, Flash and HTML needs to be selected for publishing
a file for web use. After you select HTML, Flash produces the. SWF file that
will be displayed in the HTML pages. The HTML pages already contain the
code needed to display the movie.

HTML settings
HTML is the language in which most web pages are written. You must
have noticed in your simple web pages that there is always an option of
HTML mode to the document. The HTML tab of the publish settings
dialogue box has a number of settings that control the way the Flash
movies is shown.
After you select the HTML tab, various options appear as follows:

Fig. 7.2 A Screenshot of the Publish SettingsShowing the Various

Options under the HTML Tab

Introduction to Flash 127

 1. Templates: The HTML tab lets you specify an HTML templates to
use with your Flash movie. There are a number of tags within the
templates, specific for different uses and different types of Flash
content. These are as follows:

Fig. 7.3A Screenshot of the Templates under the HTML Tab on Publish
Settings
a. Flash for Pocket PC 2003:This tag creates an HTML page that can
display a Flash movie in Pocket Internet Explorer (IE), as well as in
the desktop versions of IE and Netscape. You need to keep in mind
that the users of pocket PC are still limited to the Flash Player 6
version.
b. Flash HTTPS: The templates of HTML and Flash Only are nearly
identical. The only difference with Flash HTTPS templates is that
the download locations for the ActiveX control and plug-in page
use ‘https;//’ instead of ‘http;//’. If you are loading your Flash
movie(.swf file) from a secure URL and page, it is recommended
that any and all URLs as well. A secure URL always starts with
‘https;//’.
c. Flash only: It creates a basic HTML page with the tags that embed
the Flash movie. It doesn’t include any plug-in detection as in the
case of Flash HTTPS.
d. Flash with AICC tracking: This tag is used in case the movies are
created using components from the Learning Interactions Library
and that need to comply with the AICC training guidelines.
e. Flash with FSCommand: This tag enables you to communicate
with Java Script in your HTML pages. Hence, it should be selected
if you have included the fscommand() action in your movie.
f. Flash with named anchors: This tag should be selected if you
have included named anchors in your main timeline.
g. Flash with SCORM tracking: This tag enables compatibility with
SCORM training guidelines. This option can also be used for
movies that are created using components from the Learning
Interactions Library.
h. Image Map: It creates an image map from a frame in the Flash
document.
i. Quick Time: It creates an HTML page with the tags needed to
display Quick Time Flash movies. Quick Time Files are supported
by different Flash versions. If you are publishing a Quick Time
Flash movie, you should decide which quick Time players are most
likely to be in use and then, on the Flash tab, select the version of
Flash that those players support.
2. Delete Flash version:As we have seen above, various files need
Flash version support. Therefore, the option of detect Flash is used

Introduction to Flash 12
 to add version detection to the Flash content. Select the check box
and click on the settings button to open the version detection
dialogue box. The detect Flash version creates a flash detection.swf
movie along with several HTML files to direct the users to the
appropriate content on the site.
The screenshot that follows stands for the version detection
settings. The version settings box includes the following options:

Fig. 7.4The Version Detection Settings Dialogue Box in Flash

a. Flash version: The selected Flash player version is displayed in

this option of the version menu of the flash tab.
b. Major and minor revision: The major and minor revision option
controls the major and minor version revision number you want to
acquire.
c. Detection file (first target file): This option helps to automatically
generate the Flash detection .swf file. You need to type the HTML
document that will contain the detection file.This page will be
thefirst page accessed by the user. If the user has a Flash player
installed, irrespective of the version, the page will load the Flash
detection .swf and check the parameters that are specified in this
dialogue box. The user is then redirected to the alternate file
document in case there is no Flash player version.
d. Content file: This option specifies the name of the HTML
document displaying the actual Flash movie that is being currently
published.
e. Alternate file:This option specifies the name of the HTML
document that is displayed to the users who donot have the version
of the Flash player you specified, or to those users who do not have
any version of the flash player installed.

3. Dimensions:This setting controls the width and height of the Flash

movie. Only the viewability of Flash if affected by this option.The
dimension settings do not change the original flash movie.
However, this simply create the area through which the Flash movie
is viewed on the web. There are three options under the dimensions
settings. These are as follows:
a. Match movie: This option will keep the same width and height
that is specified in the document properties dialogue box.
b. Pixels: This option changes the viewing size (in pixel units) of
the Flash movie window. By selecting this option, you can enter
new values in the width and height text fields.
c. Percent: This option is used to scale the movie to the size of
the browser window. Using a value of 100 per cent on both, the
width and height will expand the Flash movie to fit the entire
browser window. It is one of the most popular options within
Flash movies.

Introduction to Flash 129

 4. Play back: These options control how the Flash movie plays when
it is downloaded to the browser. The options included therein are as
follows:
a. Paused at staff: This option helps to pause the movie at starting
when it is downloaded to the browser. The default setting of this
browser is “off”.
b. Loop: This option helps to repeat the Flash movie infinite
number of times. The default setting for this option is”on”.
c. Display menu: This option helps to control the user access to
the shortcut menu via a right a click anywhere within the movie
area while viewing the Flash movie in the Flash player. If this
option is selected, then the user can use the shortcut and if the
option is not selected then the user cannot use the shortcut.
d. Device font: This option helps to replace fonts that are not
installed on the player’s system with anti-aliased fonts. This
option is applies only to the flash movies played in the windows
version of the Flash player.
5. Quality: This menu determines the flash artwork if a movie is to be
rendered. It is ideal to play all Flash movies at a high Quantity
setting. The options for this settings are as follows:
a. Low: This setting is used to force the flash player to turn off
anti-aliasing completely.
b. Auto low: This setting depends on the playback speed. It starts
on a low quality mode but switches to high quality if the
computer’s processors can handle the playback speed.
c. Auto high: This setting, like auto low, depends on the playback
speed. However it is the opposite of auto low. The flash player
starts playing the movie at a high quality mode but if the
processor cannot handle the playback demands, it switches to
auto low mode.
d. Medium: This setting produces anti-aliased graphics. It
smoothens the edges but does not smoothen the bitmap images.
Upon using this option, the graphics will appear slightly better
than those in low quality but not as smooth as in the case of high
quality.
e. High: This setting is selected by default. After selecting this
option, the Flash player dedicates the computer’s processes to
render graphics. All vector graphics are anti-aliased and bitmap
images are smooth unless these are contained within the
animation sequence such as in the case of motion tweens.
f. Best: As in the high quality option, this option helps with the
addition of smoothening of all bitmaps, regardless of whether
these are in motion tweens.
6. Window mode: The window mode settings work only with any
version of the FlashActiveX control on internet Explorer for
Windows or Mac. The options for this settings are as follows:
a. Window: This rectangular window on the web page is the
standard layer interface, in which the Flash movie plays
normally.

Introduction to Flash 13
 b. Opaque windowless: This option enables to have an opaque
background to the Flash movie.
c. Transparent windowless: This option enables you to set “no
background” for the Flash movie.
7. HTML alignment: Similar to the align attribute of the <img> tag
in an HTML document, HTML alignment is used with the align
attribute of the Flash movie. The options for settings are as follows:
a. Default: This option is set by default. It left justifies the Flash
movie in the browser window. In case the browser window is
smaller than a Flash movie that uses a pixel or matches the
movie dimension setting, the Flash movie will be cropped.
b. Left, right, top and bottom: These options are used to align
the Flash movie along the left, right, top, or bottom edge of the
browser window, respectively.
8. Scale:This setting works in continuation with the dimension setting.
This option helps to determine how the Flash movie gets displayed
on the HTML page. It may modify the Flash movie to fit the area as
prescribed by the dimensions settings. The options for scale settings
are as follows:
a. Default (show all): Without distorting the original aspect ratio
of the Flash movie, this option helps to fit the entire Flash
movie into the area defined by the dimension settings. However,
borders may appear on two sides of the Flash movie.
b. No border: Without leaving borders, this option forces the
Flash movie to fill the area as defined by the dimensions
settings.The aspect ratio of the Flash movie is not distorted or
stretched.
c. Exact fit: This option stretches a Flash movie to fill the entire
area defined by the dimensions setting.
d. No scale: This option prevents the Flash movie from scaling
beyond its original size as defined in the document properties
dialogue box.
9. Flash alignment: This setting defines the appearance of the Flash
file on the HTML page. This setting is used to adjust the alignment
of the Flash movie in the HTML page. This setting has the
following options:
a. Horizontal: The left, center and right options determine
whether the Flash movie is horizontally aligned to the left,
centre or right of the dimensions area.
b. Vertical: The top, center and bottom options determine whether
the Flash movie is vertically aligned to the top, center or bottom
of the dimensions area.

Flash settings
The .SWF format is the primary and default publishing format
of Flash documents in the Flash movie. Only Flash movie
retains full support for Flash actions and animations. In order to
control the way a Flash movie is shown, the Flash tab of the
publish settings dialogue box has a number of settings.

Introduction to Flash 131

 Fig 7.5 the Publish Settings Dialogue Box with its Different
Settings
16. Version: This drop down menu provides all the versions of the Flash
player that are there. Option publishes the movie in any of the Flash
player versions.
17. Load order: This option determines how the Flash player will draw
the first frame of the Flash movie as it is downloaded to the plug-in or
player. The bottom up is by default where the layers load in an
ascending order; the lowest layer displays first, then the second
lowest, and so on. This continues until all of the layers for the first
frame have been displayed. When the top down option is chosen, the
layers load in descending order; the top-most layer displays first, the
layer underneath it and so on. Only the display of the first frame of a
Flash movie is affected. If the content of the first frame is
downloaded or streamed quickly, you probably will not notice the
load order effect.
18. Action Script version: This setting is used to control how the action
Script is compiled in a Flash movie (.swf file). You can choose
Action Script 1.0 or Action Script 2.0. However, by default, Action
Script 2.0 is selected. Also, Action Script 2.0 is the preferable setting
for flash.
19. Options: The options as included under this area are as follows:
a. Generate size report: When this option is selected, the publish
command exports a size report for a Flash movie as a text (.txt)file
on windows or a text edit file on the Mac. You can view this
document separately in a text editor application such as Notepad,
etc.
b. Protect from import: When this option is checked, the .SWF file
cannot be imported. It safeguards your Flash movies on the
internet.
c. Omit trace actions: When this option is checked, Flash removes
any ( ) actions used in the Action Script code of your Flash
documents. For debugging proposes, the trace ( ) actions will
open the output panel in the test movie mode. In general,if you
use the trace ( ) actions and you want to omit them from the final
Flash movie—they cannot be viewed from the standard versiuon
of the Flash player anyway.
d. Debugging permitted: When this option is checked, you can
access the debugger panel from within the debug movie
environment, or from a web browser that uses the Flash player
plug-in or ActiveX control.

Introduction to Flash 13
 e. Compress movie: This option is use to only compress the Flash
player 6 or Flash player 7 movie. When this option is checked, the
size of the text or action script-heavy Flash movie is greatly
reduced. However, you may see little or no size difference in
other Flash elements such as art work and sounds. Compression
cannot be used on Flash 5 or earlier movies.
20. Password: This option is activated after you select the debugging
permitted option. Post selection, you can enter a password to access a
debugger panel. Since you can debug movies over a live internet
connection, incase you want to debug a remote Flash movie you
should always enter a password. Flash will prompt you for a
password even if the debugging permitted option is left unchecked
while accessing the debugger panel remotely. Simply press the ’enter’
key when this prompt appears if you leave this field blank.
21. JPEG quality: This slider and text field option specifies the level of
JPEG compression applied to a bitmapped art work in the Flash
movie. The value ranges between 0 to 100. Less compression is
applied to higher values so that more information of the original
bitmap can by preserved where as more compression is applied to
lower values and hence less information is preserved. The value
entered here is applicable to all bitmaps that enable the document
default quality option to be used which can be assessed in the bitmap
properties dialogue box foe each bitmap in the documents library
panel. Unlike the audio setting, there is no ‘override’ option to
disregard the settings in the library.
22. Audio stream: This option is used to display the current audio
compression scheme for streaming audio. To control the compression
as applies to sounds, you have to click the ‘set’ button that uses the
stream sync setting in the sound area of the property inspector (when
a sound key frame has focus). Like the JPEG quality option dicussed
previously, this compression value is applied to stream sounds that
use the default compression in the export settings section of each
audio files sound properties dialogue box in the documents library.
23. Audio event: This setting behave exactly the same way as the audio
stream option, except that this compression setting is applicable to the
default compression enabled event sounds. Figure C9 shows a You
Tube web page that has been designed in Flash.

CHECK
CHECK YOUR
YOUR PROGRESS
PROGRESS
1. List the various media used
1. List the various media used for for the delivery of a Flash
the delivery movie.
of a Flash movie.
2. What is the isuse
2. What theofuse
theofpublish setting
the publish command?
setting command?
3. List
3. the
List Flash
the Flashfiles files
generated
generatedwhile using
while the thepublish
using publish setting
setting
command.
command.
4. What are theare
4. What twotheoptions of publishing
two options a Flash
of publishing file? file?
a Flash
5. List
5. the
Listtabs
the require to display
tabs require a Flash
to display movie
a Flash in aninhtml
movie pagepage
an html in
publish setting.
in publish setting.
6. List
6. the
Listsettings in theinFlash
the settings tab under
the Flash the publish
tab under setting.
the publish setting.
7. What
7. What is the command used to publish a Flashto movie
is the command used to publish a Flash movie the web.to the
8. List the
web.tags that are included in an HTML template.
8. List the tags that are included in an HTML template.
9. What is playback? What are the various options included
under it?
Introduction to Flash 133
 7.2.2 Publishing Flash movies for CD-ROMs

The projector formats listed in the publish settings dialogue box

are used for standalone movies created for CD-ROMs (see fig.
C10).These files are compiled as executable files or exe files.
These Flash movie files require a projector to play them however,
you can run these files even without the necessary plug-ins. In
addition, you can include a simple auto fun file created in a text
editor to automatically run the executable file when the CD is
loaded into the drive

Fig.7.6 The Publish Settings Format with the Windows Projector

Tabs selected

The process of creating a standalone movie for CD-ROMs is as

follows:
1. Go to the file menu and select the publish settings option from
the menu. The publish settings dialogue box will appear.
2. Select windows projector(exe) or Macintosh projector, or both
in the left hand column.
3. To save the file, use the folder buttons to specify the directory
where you want to save the file(s).
4. Click on the publish button.
Clicking on the publish button will create the executable file
(*.exe).

7.3FLASH AND HTML

The publish settings option is the simplest way of adding Flash tool and
HTML document. You can create your own HTML pages and insert Flash
movies manually. For adding Flash tool HTML manually, you need two tags,
the object and embed tags. You need to include both these tags in Html
documents, as each tag is specific to a browser and the browser will read the
appropriate one. The two tags are used for different purposes. The object tag is
used for Internet explorer on windows and the embed tag is used for Netscape
on Windows and Mac, and for Internet Explorer or Mac.

Introduction to Flash 13
 Fig 7.7 A screenshot showing the Coding Process by which Flash is
added in HTML
The above screenshot shows the coding by which Flash is added in
HTML, using the object and embed code. There are various parameters that are
to be considered for adding Flash. These parameters are as follows:
1. Object tag:The object tag is the opening tag. All other codes or
tags are return inside this tag. We can say that the object tag is the
parent tag and other tags are child tags.
2. Class ID: An identification code is required to add Flash to
HTML. The class ID is the unique ActiveX Identification code. If
you insert the <object> tag manually in a text editor, Make sure to
copy this lengthy ID string accurately.
3. Code base: It is used to specify the location of the ActiveX control
installer file as a URL. If the user does not have ActiveX control
installed in his /her system then internet explorer automatically
downloads the control from this URL.

There is a portion of a URL, #version=5,0,0,0, indicating that the

specific version of the Flash player is to be used or any other higher
version. For example, in the example coated here, Flash player file
is to be used or above like flash player 6, etc.

The various aspects of code base are as follows:

(a) Width and height attributes: These attributes control the
width and height of the movie in the web page. You can also
specify these dimensions in terms of per cent by adding the
percentage(%).
(b) ID attribute: The ID attribute assigns a unique identifier to
the movie. This identifier is used to control the movie by
using java script or VB script.
(c) Align attribute: The movie is aligned in the web page with
the help of the align attribute, either to the left or to the
right, top or bottom. It may also be aligned in the middle.
4. Allowscript Access: Allow script access controls how the flash
movie can access JAVA script or VB script functions in the web
page using fscommand( ) or get URL( ). It is the First set of the
<param> tag. Its values can be same Domain, always, and never. By
default, the value is same domain. It allows the flash movie to
access the scripts on the page only if the web page and the movie
reside in the same domain.

Introduction to Flash 135

 5. Movie: These parameters determine which flash movie file is
loaded into the edge the value attribute specifies the file name of the
flash movie.
6. Play (optional): After the flash movie is downloaded, this optional
parameter tells the flash player whether it should start playing the
movie or not the value is true or false. The flash movie loads in a
pause state if it is false and the flash movie starts playing as soon as
it starts to stream into the browser if it is true.
7. Loop (optional): When a movie reaches the fast frame, this
optional parameter tells the flash player whether the main time line
should repeat the movie or not. The value may be true or false. If
the value is false, then the flash movie will not be repeated and if it
is true the flash movie will be put in a loop.
8. Menu: When the user right clicks on the movie, this setting
determines whether or not the flash player includes the shortcut
menu. The value may be true or false. If the value is false then the
shortcut menu will not be shown on the movie and if it is true then
the shortcut menu will be shown.
9. Quality: The art work in the movie is rendered by quality the
values are determined whether they are low, auto-low, high or best.
Maximum flash movies use the high value on the web. This forces
the flash player to render elements for using anti-aliasing.
10. Scale (optional): These optional parameters determine the scale of
a movie which is based on the width and height properties. The
movie fits within width and height boundaries by default and shows
all values without distorting the original aspect ratio. There are
other values too like no border, exact fit, and no scale.
11. Align: These parameters control the alignment of the movie within
the space allocated to the viewing area of the movie in the browser
window.
The value in this perspective can be as follows:
(a) l: Left edge, centered vertically
(b) r: Right edge, centered vertically
(c) t: top edge, centered horizontally
(d) b: Bottom edge
(e) lt: Left and top edge
(f) rt: Right and top edge
(g) lb: Left and bottom edge
(h) rb: Right and bottom edge
12. Device font: These parameters control how fonts appear in
windows browsers though the control is unpredictable and the
setting is not used very often. The default setting is false. In case it
is true, the embedded text is displayed using system fonts.
13. BG colour:These parameters override the movie background colour
set during authoring. The value is a hexadecimal code for the
colour.

Introduction to Flash 13
 Fig. 7.8Ascreenshot Showing the Coding Process for Background
Colour

There is similarity in the properties and parameters of the embed tag

to the features of the object tag. An exception is the swLiveConnect
character which is specific to Netscape’s Liveconnect feature. This
value is false unless the fscommand ( ) action is not included in the
flash movie. The name of the movie is specified in the artibute
followed by swLiveConnect to identify in the JavaScript.

CHECK YOUR PROGRESS

10. What are the steps to create a standalone movie for CD-ROMs?
11. Explain the object tag and embed tag in an HTML document.
12. How are flash movies published for CD-ROMs?
13. What are the parameters for adding of flash movies to HTML?

7.4EVALUATING DOWNLOAD PERFORMANCE

To evaluate the download performance of a flash movie, the bandwidth profiler
option is used. To access the bandwidth profiler option, you need to first test
the movie by pressing ctrl + Enter (or Cmd + Return on a Mac). In the new
window, open the view menu and select bandwidth profiler. The shortcut for
opening bandwidth profiler is Ctrl + B.

Fig. 7.8 A screenshot of the Bandwidth Profiler with itsvarious Sections

Introduction to Flash 137

The left side of the profiler displays three sections, movie, settings, and state.
These options have been explained as follows:
1. Movie indicates
the dimensions, frame rate, size(in KB and bytes), duration and preload
(in terms of number of frames and seconds).
2. The settings
area displays the currently selected connection speed (which can be
accessed by going to ‘view’ and then selecting the download settings
menu).
3. State shows the
current frame that is being played and its byte requirements as well as
the percentage of the movie that has been loaded.
The timeline header and graph is shown in the large right section of the
profiler.
There is a red line that appears beneath the timeline header that shows if the
given frame will stream in real time in accordance with the current modern
speed as specified in the control menu. If a bar or a frame appears to lok
taller than the red line then it means that the frame will take longer to load.
So, the movie will have to wait till it loads. Also, if the movie reaches a
frame before it has been completely downloaded then the movie will pause
for the frame to be downloaded. When the whole movie has been loaded
you will notice a frame at the end of the timeline, after all the bars end,
where the play head will reach when all the frames have been loaded into
the browser.
When the bandwidth profiler is enabled, two other commands are
available in the view menu, streaming graph (Ctrl + G) and frame graph
(Ctrl + F).
Streaming graph

Fig. 7.10 A screenshot showing the bandwidth profiler in streaming graph

By default in flash, the bandwidth profiler opens in streaming graph. This
shows how the flash movie flows into a browser. When a movie streams
into the browser , the movie frames are displayed in the bars, alternately in
dark and light grey.
Frame-by-frame graph

Introduction to Flash 13
.
Fig. 7.11A screenshot showing the Third Frame on the Bandwidth Profiler
Each frame is laid side by side under the timeline header by the bandwidth
profiler in availability of second mode. The frame by frame graph enables you
to detect more easily which frames are contributing to streaming delays even
though the streaming graph enables you to see the real time performance of a
flash movie. For any given connection speed, the frame block goes beyond the
red line of the graph and then the flash player halts playback until the entire
frame downloads.
You can also simulate downloading the movie into a browser window by
selecting simulate download from the view menu. When you simulate
downloading the movie the state information on the left side of the window
tracks how much of the movie has been loaded.

CHECK YOUR PROGRESS

14. Explain the
three sections of a bandwidth profiler.
15. What is the use
of Streaming graph?
16. Why is a
bandwidth profiler required?

7.5SUMMARY
• Flash files can
be published on the web as well as on the HTML page. The delivery
media for this can be the web, a CD-ROM(or floppy disk), or a quick
time flash movie. Publish setting command is used to publish a flash
document .
• The flash player
can generate various files depending on the options you specify in the
publish setting dialogue box
• For using a
flash movie for web use, you need to select flash or HTML for
publishing a file for web use.
• The HTML tab
of the publish settings dialogue box has a number of settings that

Introduction to Flash 139

 controls the way a flash movie is shown and can be used to adjust the
alignment of the movie in the HTML page.
• The .SWF
format is the primary and default publishing format of flash documents
in the flash movie.
• The projector
formats in the publish setting dialogue box is used for the standalone
movie as created for CD-ROM. Clicking on the publish button creates
an executable file(*.exe).
• The publish
setting option is the simplest way of adding flash in HTML. You can
create your own HTML pages and insert flash movies manually. For
adding flash into HTML manually, you need two tags, object and
embed tags. You need to include both these tags in HTML document as
each tag is specific to a browser and the browsers will read the
appropriate one.
• The two tags are
used for the different purposes the object tag is used for internet
explorer on windows and the embed tag is used for Netscape on
windows and Mac, and for internet explorer on Mac.
• There are
various parameters that are passed for adding flash. These parameters
are object tag, class ID, code base, movie, play(optional), loop
(optional), menu and so on. There are similarities in the properties and
the parameters of the embed tag to the feathers of the object tag. The
exception is the swLiveConnet character which is specifictoNetscapes
live connect feather. This value is false unless the fscommand( ) action
is not included in the flash movie.
• To evaluate
download a performance for any connection speed, falsh bandwidth profiler
is used and to access the bandwidth profiler , you need to first test the
movie by pressing Ctrl+ Enter or Cmd +return on a Mac. Also the left side
of the profiler displays three sections –movie, setting and state.

7.6 KEY TERMS

• Graphic interchange format :A bitmap image format. The format
supports upto 8 bits per pixel, allowing a single image to reference
a palet of upto 256 distinct colourschoosen from a 24 bits RGB
colour space.
• HQX file: A Macintosh BinHex 4 compressed archive file.
• MOV file: A Quicktime media container format. It can store audio
and video data.
• JPEG(joint photographic Experts group): A commonly used
method of compression for photographic image. The degree of
compression can be adjusted, allowing a selectable tradeoff
between storage size and image quality. JPEG compression is used
in a number of image file formats.

Introduction to Flash 14
 • Publish setting command: A command that is used to publish a
flash document to the web. In the publish setting command, You
need to select the publish file formats and file format settings.
• HTML: Hyper text Markup language, a web designing language in
which most of the web pages are written.
• Object tag: A tag for adding flash to HTML manually. The object
tag is used for internet explorer on windows.
• Embed tag: A tag for adding flash to HTML manually. It is used
for Netscape on windows and Mac, and for internet explorer on
Mac.

7.7 QUESTION AND EXERCISES

Short answer Questions
1. What are the various options in the ‘delete flash version’ option?
2. Briefly describe the process for creating a standalone movie for a CD-
ROM.
3. List the various types of files that are generated by the options in the
publish settings dialogue box.
4. What are HTML templates ? List the various types of templates.
5. What are the options under the dimension settings option?
6. What is the default setting of a flash movie on the web with respect to
quality?
7. What are the various options included under codebase?
8. Differentiate between play option and loop option.
9. Write shortnotes on the following:
• Streamline graph
• Frame-by-frame graph
Long-Answer Questions
1. Explain the function of a display menu.
2. Explain in detail the various options that appear in
the HTML tab publish settings.
3. Write in a note explaining in detail the HTML
setting and the various option therein.
4. How is the object and embed tag used to publish a
Flash movie to the Web
5. Discuss the parameters that need to be considered
for adding Flash movies to an HTML page.
6. What are two types of settings to be considered for
publishing a Flash file to the Web? Explain in
detail.

7.8 FURTHER READING

Curtis, Hillman. 2002. Flash Web Design (The V5 Remix): The Art of
Motion Graphics. Techmedia Computer Books.

Introduction to Flash 141

 Keating, Jodi.2002. Inside Flash.Techmedia Computer Books.
Reinhardt, Robert and Snow Dowd. 2006. Flash CS6 Bible.
New Delhi: Wiley India.
Sanders. 2004. Adobe Flash CS6. New Delhi: Dorling Kindersley (India)
PVt.Ltd.

UNIT 8 NAVIGATING A MOVIE IN FLASH

Program Name: B.sc (MGA)
Written by: Srajan
Structure:
8.0 Introduction
8.1 Unit Objective
8.2 Creating Buttons
8.3 Adding Behaviors to Buttons
8.4 Creating Movie Clips
8.5 Dividing Files into Multiple SWF Files
8.6 Summary
8.7 Key Terms
8.8 Questions and Exercises
8.9 Further Reading

8.0 INTRODUCTION
In flash, a symbol is required to animate an object and the most
frequently used symbol is a movie clip. These symbols are used for creating a
tweened animation.
Other than it being required for animation, a movie clip also has other
properties that have become considerably useful to Flash users. These clips
have their own multilayer timeline that operates independent of the normal
Flash movie timeline. Movie clips are independent little movies that can be
inserted into the main Flash movie. Not only this, movie clips can hold
animations, buttons, sounds, and interactivity.
Buttons are a special type of symbol that contains four frames. Each
frame of a button symbol represents a different ‘state’ of the button. These four
states define how the button is to behave differently on screen when the mouse
is rolled over it or when the user clicks on the button. In this unit, you will

Introduction to Flash 14
study how to create a basic button, in addition to adding behaviors to buttons,
creating movie clips and dividing files into multiple SWF.

8.1 UNIT OBJECTIVES

After going through this unit, you will be able to:
• Understand the concept of creating buttons in Flash
• Understand how to create a movie clip in Flash.
• Describe the loading of multiple SWF files to a single SWF file.

8.2 CREATING BUTTONS

The element of interactivity in a movie can be ensured with the use of
buttons which is a type of symbol used in flash. Buttons provide you with the
essential ability to navigate a movie and perform other actions. Various
activities like loading external movies, stopping sound, etc., can be performed
easily with the help of buttons.
Buttons are actually four-frame interactive movie clips, i. e., button
symbols have a timeline limited to four frames. Each frame of a button symbol
represents a different ‘state’ for the button.
As discussed above, in these frames, the three possible states of a
button-up, down and over-are displayed in the first three frames and the fourth
frames defines the active area of the button. Timeline, however, simply reacts
to the pointer movements and actions by jumping to the appropriate frame.
The process of creating a button is as follows:
1. An object desired to be created in a stage can be normal text or a
simple rectangle or an image, etc.
2. After creating the object, open the ‘convert to symbol’ panel, which
is used to create a symbol. To open the ‘convert to symbol’ panel,
you can follow any of the following steps:
a. Select the object and press F8, It will open the ‘convert to
symbol’ panel.
b. Right-click on the graphics (or the group, if you have added
text) and, from the shortcut menu, select ‘convert to symbol’.
c. You can also go to ‘Modify’ click on ‘Convert to symbol’.
d. One more way is to select the object and drag it from the stage
to the library panel.

Fig. 8.1 The Convert to Symbol Panel used for Creating a Button

Introduction to Flash 143

 3. After opening the ‘Convert to symbol’ panel, you need to perform
the following:
a. Name the button symbol
b. Select the button option from the list.
c. After selecting button option, click on OK.
The button gets created after you click on OK, and it is displayed in the
stage and also shown in the library.
You need to double-click on the object in the stage or double-click on
the object from the library in case of editing the object as created.

Fig. 8.2The Timeline Showing the Process of Editing

Visually, a button behaves the way the mouse is rolled over it or on the
click of the button by the user. When the object is ready to be edited, it will
take you to the editing mode. In the editable mode, the timeline shows the four
states of the button. These are as follows:
a. Up: Any element placed in the up key frame will be associated with
the button as it appears on the stage when it is present but not
activated by any mouse interaction.
b. Over:Any element placed in the over key frame will be associated
with the button when the mouse rolls over it on the stage, but as
soon as the mouse rolls off the button it will revert to its up state.
c. Down:Any element placed in the down key frame will be
associated with the button only when the mouse is over it and
clicked and held down. As soon as the mouse is released, the button
will revert to its over state.
d. Hit: The hit key frame is actually never visible on the stage, but
instead defines the area of the button that is sensitive to the mouse.
Whenever the shape present on this frame, it will be considered as a
part of the button’s hit area.
An instance of the button symbol on the stage is used to assign actions to
the instance and to make a button interactive. While doing so, the actions to the
instance of the button in the document are placed and assigned; however, these
are not assigned to the frames in the button’s timeline.

CHECK YOUR PROGRESS

5. What is button? How do buttons provide an element of
interactivity to a movie clip?
6. Name the different ‘states’ of buttons?
7. What are the functions of the various frames of a button?
8. What do the four frames of a button represent?
Introduction to Flash 14
9. What are the various ways in which the ‘convert to symbol
panel’ can be opened?
 8.3 ADDING BEHAVIORS TO BUTTON
As discussed in the previous unit, behaviors are prewritten Action
Script scripts that you add to an object. With the use of behaviors, you can add
power, control, and flexibility of Action Script coding to your document
without having to create the Action Script code. Behaviors are used to control
movie clip and video and sound files.
All the different type of behaviors are stored in the behavior panel. For
viewing the behavior panel, go to Window, and then select Behaviors. The
shortcut for viewing the behavior panel is Shift+F3.

Fig. 8.3The Behavior Panel Display on Window

The process of adding behavior to a button is as follows:
1. First, you have to make sure that you are in the main timeline and not in
the edit mode. Select the button after confirming the position.
2. After selecting the behavior pane, click on the ‘add behavior’ button to
open a menu of behavior.

Fig. 8.5 A Screenshot Showing the Behavior Panel Menu

3. In the ‘add behavior’ panel, you can open a vast list of prewriting action
script or commands. Subsequently, you can select any behavior you
want to add to the button. For example, to add a webpage link
command to a button, select ‘Web’, and then click on ‘Go to Webpage’.

Introduction to Flash 145

 Fig. 8.6 A Screenshot Showing the Process of Adding a Webpage
Link to a Button or the Behavior Panel
4. Using this behavior, you can open the ‘go to URL’ pop up. After
selecting the ‘go to URL’ from the drop down menu, type the URL or
webpage link in the URL and specify the target for ex self or parent,
etc., and click on OK.

Fig. 8.7 The ‘Go URL’ Pop us Opened on the Behavior Panel
5. The behavior appears in the behavior panel.

Fig. 8.8 The Behavior Panel Showing the Selected Behavior

6. Clicking on the event column will enable you to open a menu of
various mouse events. This button will enable you to change the mouse
event.

Fig. 8.9 The Event Column Showing its Drop Down Menu the
Behavior Panel
7. The screenshot shown below is of the Action Script Flash inserted
when you add behaviors to the button. Select the button on the stage
and open the actions panel:

Introduction to Flash 14
 Fig. 8.10 A Screenshot Showing a Code Attached to the Button
Instance
The proceeding screenshot shows the code attached to the button
instance. This code is for moving to a particular link. This particular code is
very simple; it tells Flash to go to the particular link.
The coding involved in behaviors is quite easy in Flash. You can write
the code manually for the button in the Action Script panel, without using
behavior. You have to just select the button, open the Action script and start
writing the code.
For testing how the above behavior will work, click on the button.

CHECK YOUR PROGRESS

6. What do you mean by behaviors?
7. How is coding done in behaviors?
8. How are behaviors more advantageous over Action Script codes?

8.4 CREATING MOVIE CLIPS

Movie clips are small part small part of the movie, or you say these are movies
within a movie, each movie clip is independent of the main timeline, i.e., a
movie clip is not dependent on the number of frames that are in the main
timeline as a movie clip can continue to play event if the main timeline is
stopped.
However, individual movie clips have only one frame on the main
timeline. These can contain actions, other symbols and sounds. Movie clips are
similar to button and graphic symbols in their functioning. They can be rotated,
resized or skewed on the stage.
A movie clip symbol is analogous in many ways to a document within a
document. Several movie clips when added together create a nested movie clip,
i.e., you can add movie clips within other movie clips and buttons to create
nested movie clips, and then reference the instance name in Action Script.

Creating a movie clip

Introduction to Flash 147

The process of creating a movie clip or button or graphic symbol is the same. It
has already been discussed in Section 8.2 of this unit.
To convert the animation created in the main timeline to a movie clip,
you need to perform the following:
1. On the timeline, first select all the frames and layers you want to
include in the movie clip and subfrequently click and drag each one.
2. After selecting the frames and layers, either copy or cut frames. For
doing this, you need to perform the following steps:
i. Right click on the timeline and select the cut frames option.
ii. You can also select the copy frames option by going to ‘Edit’,
click on ‘Timeline’, and then select ‘Cut/Copy Frames’.
3. To create a blank movie clip, open the new symbol panel which is
used to create blank symbol. You have to go to ‘Insert’ and then
click on ‘New Symbol’ to create a blank symbol. The shortcut for
this is Shift+F8.

Fig. 8.11 The Process of Converting an Animation

4. It looks similar to the ‘convert to symbol panel’ and has the same
option.
a) Name the movie clip symbol.
b) Select the movie clip option from this list.
c) After selecting button option, click on OK.
5. After clicking on OK, the blank movie clip gets created.
6. To paste the frames and layers in the movie clip timeline, right-click
and select paste frames. Another option is to go to ‘Edit’, click on
‘Timeline’, and then select ‘Paste frames’.
7. Pasting frames will add the frames and layers inside the movie clip
timeline.

Similar to buttons, you can also add interactivity to the movie clip. The
process of adding interactivity to a movie clip is the same as that of adding to a
button, whether one is adding interactivity through using behaviors or by
writing it in the Action Script panel.

CHECK YOUR PROGRESS

9. What is a movie clip?
10. What is the process of creating a movie clip?
11. What is the factor of similarity between movie clip and other
buttons and graphic symbols?
12. What is a nested movie clip?

Introduction to Flash 14
8.5 DIVIDING FILES INTO MULTIPLE SWF FILES
Multiple SWF files can be loaded into a single SWF file in Flash. The loading
option calls the files from the specific path. So instead of creating a huge single
SWF, one can divide it into multiple SWF files and call it into a single file.
This feature helps in reducing the size of the frame.
The process of calling an SWF file into another SWF file is as follows:
1. To divide these files, you need to create a key frame in the timeline.
Next, you need to open the Action Script panel.
2. After you have opened the Action Script panel, locate the load
movie action in the browser/network group. Next, double-click on
the action frame to add it to the script panel. Alternatively, you can
type loadMovie() directly into the script panel too.

Fig. 8.12 The Process of Calling one SWF File into Another
3. there are three parameters in the loadMovie() action—URL, target,
and method. Only the first two are required to load the movie. URL
is the location of the external SWF file you are inserting and target
refers to the object into which you want to load the external file.
4. To check whether the movie is loaded or not, render or publish the
file.
Flash also allows movie clips to be exported from the library to create
individual SWF file. For exporting flash movie clips, you need to
perform the following steps:
1. Locate the movie clip in the library.
2. Right-click on the movie clip and click on Export SWF

Introduction to Flash 149

 Fig. 8.13 A Screenshot Showing the Process of Exporting Flash
Movie Clips
3. After clicking on Export SWF, it will open the export file
pop up which is used to navigate to the folder where the file
is to be saved.

Fig. 8.14 The Process of Showing Flash Files after Exporting

4. After selecting the path, click on the ‘save’ button. It will

save the file in that specific folder.

CHECK YOUR PROGRESS

13. What is the process of dividing a file into multiple SWF files?
14. How do you export a movie clip from the library?

8.6 SUMMARY
• Movie clips are a fundamental part of Flash movies. Movie clips can
help you to manage your content within the movie and also allow
several different elements to play at staggered times.
• You learned that buttons provide you with the essential ability to
navigate a movie and perform other actions. You can use these objects

Introduction to Flash 15
 for performing various activities like loading external movies, stopping
sounds, etc.
• You understood that buttons are actually four-frame interactive movie
clips, i.e., button symbols have a timeline limited to four frames. Each
frame of a button symbol represents a different ‘state’ for the button.
• The labeling of these states is on the basis of the four directions and
user interaction. Hence they are labeled as up, over, down, and hit.
Each of these button states can be defined with graphics, symbols and
sounds.
• The unit described that when creating a button, remember to create an
object. An object desired for creation in a stage can be normal text or a
simple rectangle or an image, etc. After creating an object, open the
convert to symbol panel, which is used to create a symbol.
• Behaviors are prewritten action script scripts that you add to an object
to control that object. With the use of behaviors you can add the power,
control, and flexibility of an Action Script coding to your document
without having to create the Action Script code.
• Movie clips are small part of the movie, or you can say they are movies
within a movie. Each movie clip is independent of the main timeline.
• Several movie clip when added together create nested movie clips, i.e.,
you can add movie clips within other movie clips and buttons to create
nested movie clips.
• An animation can be converted into a movie clip.
• Adding interactivity in the movie clip is an important procedure. The
procedure for adding interactivity to movie clip is the same as that of a
button or a graphic symbol.
• The navigation creation on a Flash movie, the use of movie clip events
and the process of importing sounds and video, are important aspects of
navigating a movie in Flash etc. A huge single SWF file can be divided
into multiple SWF files and later be called a single file.
• Multiple SWF files can be loaded into a single SWF file in Flash. The
loading option calls the files from the specific path. So instead of
creating a huge single SWF file, one can divide it into multiple SWF
files and call it in the single single. This features helps in reducing the
size of a frame.

8.7 KEY TERMS

• Nested movie clips: Creation of a movie clip inside another movie clip.
Each movie clip has its own timeline and can function independently.
• SWF: A file format. Earlier SWF used to stand for ‘Small Web
Format’ which was later changed to ‘Shockwave Flash’ by
Macromedia, and then again changed back to ‘Small Web Format’.
• Buttons: A type of symbol used in Flash. Buttons provide the essential
ability to navigate a movie and perform other actions.
• Behaviors: Prewriting Action Script scripts that you add to an object to
control that object.

Introduction to Flash 151

 • Movie clips: These are a small part of the movie, or simply movies
with a movie.

8.8 QUESTIONS AND EXERCISES

Short-Answer Questions
1. Write a brief note on the four states of a button symbol.
2. Explain in brief the process of creating a button.
3. How can interactivity be added to a Flash movie?
4. Explain in brief the four states of a button.
5. Why are behaviors added to buttons?
6. Differentiate between a movie clip and a nested movie clip.
Long-Answer Questions
1. Explain in detail the four frames of a button.
2. Describe the process of converting an animation into a movie clip.
3. Describe the process of adding behavior to a button.
4. How does calling in multiple SWF files to a single SWF file help in
reducing the frame size?

8.9 FURTHER READING

Reinhardt, Robert and Snow Dowd. 2006. Adobe Flash CS6 Bible.
New Delhi: Wiley India.
Sanders 2004.Adobe Flash CS6. New Delhi: Dorling Kindersley (India)
Pvt. Ltd.

Introduction to Flash 15
Introduction to Flash 153