E-Content of

INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 10.2 Interactive Tools

Topic : 10.2.6 Flash

Flash

• Flash Player is multimedia software that allows user to view interactive

content and applications on the web.

• Flash player software is used for creating vector graphics, animation,

games and rich internet applications (RIAs) that can be viewed, played
and executed.

• Flash is frequently used to add, streamed, video or audio players,

advertisement and interactive multimedia content to web pages,
although usage of Flash on websites is declining.

• Flash manipulates vector and raster graphics to provide animation of

text, drawings and still images.

• It allows bidirectional streaming of audio, video and it can capture user

input via mouse, keyboard, microphone and camera.

• Flash applications and animations can be programmed using the object-

oriented language called Action Script.

• Flash professional is the most popular authoring tool for creating the
Flash content, which also allows automation via the JavaScript Flash
language (JSFL).

• Flash player makes the Flash content accessible on various computer

systems, devices and is available free of charge for common web
browsers under a few of the major operating systems, some smart
phones and tablets and a few other electronic devices using Flash Lite.

• There are many options in Flash player some of them are

 Creating graphics

Page | 23
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
 Working with layers

 Adding motions, sound and text

Page | 24
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 10.2 Interactive Tools

Topic : 10.2.6A Working With Flash

Working with Flash

Getting Started

• To begin, open Flash Professional 8. User will be presented with the

screen as shown in the following figure.

FIG 10.4 : Flash opening page

• Click Flash Document. The screen will appear like this.

Page | 25
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.5: Empty Flash First Page

• The upper left corner of the screen displays the Tools palette, which
contains tools that user can use to create or modify graphics and text.

• User can select a tool by clicking on it. Tool modifiers for the selected
tool display below the Tools palette. User can use modifiers to set tool
options.

• The Timeline appears in the upper portion of the screen. User can use
the Timeline to lay out the sequence of their move.

• The Stage displays in the center of the screen. User can create their
movie on the Stage.
The Grid

• While creating graphics, the grid is often helpful. To turn on the grid

 Choose view → Grid → Edit Grid from the menu. The Grid dialog box
opens.

Page | 26
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.6: The Grid Dialog box

 Click the Color box and select gray to have the grid lines display in
gray

 Choose Show Grid to cause the grid to display.

 Choose Snap to Grid to cause the edges of your graphic to align with
the grid lines.

 Set the Horizontal field to 20px to separate horizontal lines by 20

pixels.

 Set the Vertical field to 20px to separate vertical lines by 20 pixels.

 Set the Snap Accuracy to Normal.

 Click OK.
The Property Inspector

• In the Property inspector, user can set the attributes of objects as their
need. User will use the Property inspector frequently when working in
Flash Professional 8. To open the Property inspector:

 Choose Window → Properties → Properties from the menu. The

Property inspector appears at the bottom of the screen.

Page | 27
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.7: Collapse Icon

• The Property inspector is one of the panel found in Flash.

• When user is not working in a panel, they can collapse the panel.

• To collapse the Property inspector, click the Collapse icon. To open the
Property inspector again, click the Expand icon.

Page | 28
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 10.2 Interactive Tools

Topic : 10.2.6B Tools in Flash Player

Tools in Flash Player

• The Oval Tool
 The Oval tool is used to draw an ellipse. That will turn the ellipse into
a symbol.

 To draw the ellipse

 Choose the Oval tool. There are two color boxes on the Modifier
panel.

 These color boxes are used to set the stroke and fill colors. The
stroke color outlines their drawing. The fill color fills the center of
their drawing.

FIG 10.8: The Oval Tools

 Click the Stroke Color box and then click the color black to choose
black as their stroke color.

 Click the Fill Color box and then click the color navy to choose
navy as their fill color.

Page | 29
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
• User can also set the thickness of the stroke line in the Property
inspector. To set the thickness of the stroke line.

 If the Property inspector is not open, choose Window →

Properties → Properties from the menu. The Property inspector
appears at the bottom of the screen.

FIG 10.9: Property Inspector

 Choose Solid from the drop-down menu to select the type of line
that will outline their drawing.

 Type 3 in the Stroke Height field to set the line thickness.

 Click on the Stage and drag diagonally to draw the ellipse.

FIG 10.10 : Oval Shape

• The Pencil Tool

• The Pencil tool is to draw freehand shapes. To use pencil tool

 Choose View → Grid → Edit Grid from the menu.

 Deselect Snap to Grid.

 Click OK.

 Choose the Pencil tool.

Page | 30
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.11: Pencil Tool

 Click the Stroke color box and choose brown as the stroke color.

 Click the Fill color box and choose brown as the fill color.

 On the Modifier panel, if Object Drawing is selected, deselect

Object Drawing.

 On the Modifier panel, choose the Smooth option. This option

rounds the corners of their drawing.

FIG 10.12: Smooth option in Pencil tool

 For example, to draw the tree trunk. Make sure the starting point
and the ending point connect.

Page | 31
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.13: Example figure

 Choose the Paint Bucket tool. User can use the Paint Bucket tool
to fill enclosed areas with color.

FIG 10.14: Paint Bucket Tool

 Click inside the trunk to fill the trunk with color.

FIG 10.15: Example figure with color

Page | 32
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 10.2 Interactive Tools

Topic : 10.2.6C Grouping

Grouping

• Grouping option is used to group two objects. User can also turn that
grouped object into a symbol.

 For example, choose the selection tool.

 Use the Selection tool to create a rectangle around the tree. This
selects the tree.

 Choose Modify → Group from the menu to make the treetop and the
tree trunk a single object.

 Choose Modify → Convert to Symbol from the menu. The Symbol

Properties box will open.

 Type Tree in the Name field.

 Choose Graphic as the Behavior type.

 Click OK. The tree now appears in the Library.

 Press the Delete key to remove the tree from the Stage.

Page | 33
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.16: Complete Image after Grouping

Page | 34
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 10.2 Interactive Tools

Topic : 10.2.6D Layering

Layering

• Layer is like a transparent sheet on which user can paints on it.

• User can see through each layer to the layers under it until they add
color. User can also add layers, delete layers, and change the position
of layers.

• Each layer is independent of all other layers. The layer that user are
currently working on is called the active layer. They can view layer
information on the Timeline.

• To renaming a Layer

 Click the layer to rename.

FIG 10.17: Renaming a layer

 Choose Modify → Timeline → Layer Properties from the menu. The

Layer Properties dialog box opens.

 Type layer name in the name field.

 Click OK.

• To add new layers

 For example, to create a new layer for the sky.

Page | 35
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
 Choose Insert → Timeline → Layer from the menu to create a new
layer above the active layer.

 Choose Modify → Timeline → Layer Properties from the menu.

The Layer Properties dialog box opens.

 Type Sky in the Name field.

 Click OK.

 To create the Sky

 Make sure Sky is the active layer. When a layer is active, it is

highlighted and there is a pencil icon on the layer. User can click
on the layer name to make a layer active.

 Move to the Library panel. If the Library panel is not open, choose
Window → Library from the menu to open the Library.

 Click the icon next to Sky and drag a copy of Sky onto the Stage.

FIG 10.18: To add new layer

Page | 36
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 10.19: After adding new layer as sky

Page | 37