flash theory1

8/3/2019 Flash Theory1

1/36

FlashFlash is a tool for creating interactive and media rich application.

Flash has functioned primarily as an authoring application for web developers,

enabling the creation of high-impact, fully interactive web sites.

Flash can be used for the web, for kiosks, for presentations, and CD-ROMs, amongother things.

Flash 8 is a powerful tool created by Macromedia that has overcome the best

expectations of its creators.

Macromedia Flash was originally created in an effort to realize colorful animations for

the web as well as to create animated GIFs.

Designers, web professionals and amateurs have selected Flash 8 by many reasons.Further we will see why Flash 8 is interesting.

Why Use Flash?

Flash is one of the best multimedia formats on the internet today for several reasons. Firstly, theFlash plugin (required to view the animations) is installed on nearly every computer connected tothe internet. All the major browsers come with it installed by default and, for those who don't haveit, the download is very small. Secondly, Flash is a 'vector based' program, which means theanimations and graphics created by it have much smaller file sizes than a video or streamingmedia version of the same animation would be. You can also include sound, graphics anddynamically created information in your animation.

Flash provides a versatile and easy way for webmasters to create animations for their users.

The possibilities of Flash are extraordinary, each new version has outstripped theprevious one, and the present Flash 8 is not an exception. Although its common usage

is to create animations (during this tutorial we will see how easy it is) it has far moreapplications. They are so numerous that all web designers should learn how to use

Flash.

Flash has been made up in order to fix the great lack in the Internet: that is, Dynamism.

This dynamism does not imply only animations but rather interactive animations, which

allow users to see the web as something attractive, not static (unlike most of the pagesthat are made by the use of the HTML language). With Flash we can easily and quickly

create animations of all types.

It is easy to learn how to handle Flash, it has a friendly environment that invites us tosit down and spend hours making whatever our imagination suggests, but that is not

sufficient to be preferred by professional designers. Then what is it?

From Flash MX 2004 to Flash 8


2/36

There are companies that improve their products just by the economic necessity. When

it happens, users promptly notice this by the few improvements in the newer version.That is not the case of Flash 8, which continues considerably improving the new

versions of its products following the Macromedia tradition.

If we thought that Flash 8 MX was already insuperable, do not miss the improvements

that Flash 8 provides. These improvements consist in: easy handling, higher graphic

potency and integration with programs of image edition, in having ability to importvideo, possibility to emulate your mobile devices video oriented, and for the begginers,

the ActionScript wizard has come back. Let us analyze these advantages in more

details:

Attractive Designs: Flash 8 allows the using of visual effects that will ease the

creation of animations, presentations and forms more attractive and professional.

Moreover, it supplies a new set of tools that will help you doing this easily and faster,such us filters and blend modes, added in this version.

Font Optimization: It also includes some readability options for small sized fonts,what makes our texts more comfortable to read. Also you can edit this optimization,

allowing you to select the configuration pre established for dynamic and static texts.

Consolidated Libraries: Now you can search any object existent in our movies

faster, browsing our open libraries from a single panel.

More powerful animation: Flash 8 allows much more control of the interpolations

setting a new edition mode form which you will edit the velocity the rotation, shape,

color and movement are applied.

More powerful graphics: Avoid the unnecessary representation of vectorial objectssetting an object as a bitmap. Although the object is converted to a bitmap, the vectorial

data remains the same, so, in every moment, you can convert it again to a vectorialobject.

Improvements in video importing: To ease the working with video formats, Flash8 provides high-quality new independent codec, completely skinnable.

Metadata Compatibility: Include your SWF files in searching engines defining atitle, description and/or keywords.

Mobile devices Emulator: Preview your Flash Lite compatible mobile devicesmovies oriented with the new emulator Flash 8 includes.

ActionScript Wizard: The ActionScript Wizard has come cake. Was deprecated in

the last version, but now it has been retrieved and improved. Now ActionScript is atyour reach.


3/36

Digital Image Types: Vectors and BitmapsThere are two digital image types: bitmaps and vectors. Bitmap images are the

most common type of image file outside the professional print world. Bitmap filesmap out or plot the image on a pixel-by-pixel basis. Computer displays are made up

of a collection of individual points or dots, called pixels, organized in columns androws (similar to a table or a grid) where each cell represents each pixel in the

image. The bitmap image file basically plots each pixel, such as pixel 300 wide by250 high is red. Pixel 301 wide by 250 high is also red. Pixel 302 wide by 250 highis yellow and so on. Because bandwidth is a major concern when developing web

sites, keeping the size of images to a minimum is very important. The main benefit

of bitmap images is photographic color, tone, and texture is accurately produced.

If you were to plot a bitmap on a grid, each pixel is detailed. Essentially, this is what

your computer does when it displays bitmaps.

BitmapPixel by Pixel Approximation

(Reduced Scale)

Vector images do not plot images on a pixel-by-pixel basis. Instead, vector files

contain a description of the image expressed mathematically. Essentially, the filetells the computer about the image and the computer draws it. For instance, the

image of a circle in vector format, written in plain English, might look something likethis:

Circle (200px)

Fill Color: Gradient

Gradient Type: Radial

Colors: White, Black

Line Color: None

One of the benefits of vector images is file size, particularly relative to the file size ofbitmap images. The same circle as a bitmap file, at a resolution of 320x200, might

look something like this in English:

Row 1

Pixel 1x1 is white

Pixel 2x1 is white


4/36

Pixel 3x1 is white

Pixel 4x1 is white, etc. until we reach Pixel 320x1

Row 2

Pixel 1x2 is white

Pixel 2x2 is white, etc.

Describing the circle (and the color surrounding it) on a pixel-by-pixel basis is a

much more lengthy process than telling the computer to draw the circle itself.

Another major benefit of vector graphics is scalability. Because the computer

effectively draws the image for us, vector graphics are also scalable, meaning the

size of the image can be increased or decreased without degradation. Because thefile is an equation, placing different numbers into the equation results in the

computer rendering the image correctly, but if you only modify the scale, the file sizeremains the same.

Scaling vectors results in perfectly rendered images. The image on the left is theball in its original size. The image on the right is the same ball with an increase in

scale. The file size is the same.

Bitmaps can be scaled, but an increase in scale degrades the image because the

computer does not have enough information to create the new image. The computermerely takes the existing pixel information and translates one pixel into multiple

pixels. For example, if we scale a 45x45 image to 90x90, each individual pixel in theimage in its original state becomes four (4) pixels in its scaled state. This results in

jagged edges that appear fuzzy on screen.


5/36

Doubling the size of the bitmap causes the computer to replace each original pixelwith four. As a result, the image becomes fuzzy or jagged. The file size also

increases.

Internet Image StandardsIn addition to two types of digital images (bitmaps and vectors), there are also a

variety of bitmap and vector file types. Bitmap files, at the most basic level, are justas described - a map or plot of each individual pixel. However, image files can (and

often do) contain other information - depending on their use. For instance, theauthor or creator of the image might be included, as well as the date and copyright

information. In addition, because bitmaps tend to be large, various methods ofcompression or methods to reduce file size have been developed.

To designate extra information and compression methods, different file types havebeen developed. File types designate a particular variety of bitmap or vector.

Windows and Unix operating systems identify the file type by adding a periodfollowed by three letters to the end of the filename, as in circle.gif or circle.jpg.

This is called a file extension. On the Macintosh, file extensions are not used todesignate file types. A file designating the file type and the application that created

it is attached to the image file instead. However, Web servers and browsers also usefile type extensions, so its advisable that Macintosh users do the same for image

and Flash files generated for the web.

Web browsers currently support three image file types. They are .gif, or Graphics

Interchange Format (GIF), .jpg or Joint Photographic Experts Group (JPEG), and .pngor Portable Network Graphics (PNG). Each of these formats is a bitmap file.

Currently, browsers do not support the display of vector-based images.

Flash can import a variety of bitmap and vector formats. Importing external image

files is covered later in the book.

Plug-ins: Extending the Capability of Web Browsers

If web browsers do not display vector images, how are Flash movies displayed in abrowser? Because the Internet is in a state of continual and rapid evolution,


6/36

browsers have the capability to extend features through the use of Plug-ins. Plug-insare extensions to web browsers that permit them to display various types of media

unsupported by the browsers. Media such as Flash, Shockwave (Director andAuthorware movies), QuickTime, RealPlayer, and many others are not supported

natively. As a result, users need the appropriate Plug-in to view these media. Toget a Plug-in, users must download and install it on their computer. Furthermore,

the major browsers use a different Plug-in system, which requires users to downloada separate Plug-in for each browser.

In addition, with each update or new release of Flash and other Internet technology,users need the latest version of the Plug-in. Both Navigator and Explorer are

packaged with a Flash Plug-in, but the version may vary with each release. To useFlash effectively, with all the benefits of its compact file size and advanced animation

and interactivity, users must have the appropriate Plug-in. Flash movies can beconverted to QuickTime movies, animated GIFs, image maps, and so on, some of

which dont require a Plug-in. However, converting Flash to other media greatlylimits its functionality. As a result, we dont recommend relying on or using any of

the worry-free playback options available in Flash.

Not everyone is willing to download and install Plug-ins. As a result, if youre using

Flash for the web, its recommended that in addition to a Flash site, you also developa standard web site that everyone can view. If your web site is exclusively Flash

based, those without the Plug-in will not be able to view it. Creating a conventional,alternative web site ensures everyone can view your site. Using Flash outside of the

web is less of an issue, because you can create a standalone projector to displayyour Flash movies. Standalone projectors are covered later in the book.

The Flash Environment

This chapter details the Flash workspace. Tools, menus, Panels, the Timeline, the

Stage, and Preferences are summarized.

The Flash Workspace

The Flash workspace consists of five main components: the Menu, the Toolbox, the


7/36

Timeline, the Stage and the Panel and property inspector window.

The Menu

The Menu contains controls for common functions such as opening and saving files,as well as specific functions, such as copying and pasting, calling up specific windows

or panels, and controlling the Flash environment. As you progress through eachlesson, the Menus and Menu Items are detailed.

The ToolboxThe Toolbox contains a collection of tools for creating, selecting, and manipulating

content in the Timeline and on the Stage. The Toolbox is divided into four parts:Tools, View, Colors, and Options.


8/36

The Toolbox functions by selecting a tool, and whenappropriate, using the Viewtools to manipulate the Stage

and the Colors tools to select colors for the shape(s) youare drawing. Some of the tools have additional options

that appear in the Options section. For example, when theArrowTool is selected, sets of options (Snap, Smooth,

Straighten, Rotate, Scale) appear in the Options section.

TheArrow

Tool

The Options for the Arrow Tool

Other options for tools are available in the Panels. For


9/36

example, if you select the PencilTool, which is used todraw outlines, called strokes, in Flash, you can select the

thickness of and the style of the stroke with the StrokePanel.

Pencil

Tool

Stroke settings in the Stroke Panel.

Selecting a stroke style.

Selecting a stroke thickness.

An irregular stroke style at a thickness of 4

is created by using the Stroke Panel.


10/36

The TimelineThe Timeline organizes and controls a document's content over time in layers and frames. Likefilms, Flash documents divide lengths of time into frames. Layers are like multiple film stripsstacked on top of one another, each containing a different image that appears on the Stage. The

major components of the Timeline are layers, frames, and the playhead.

Layers in a document are listed in a column on the left side of the Timeline. Frames contained in

each layer appear in a row to the right of the layer name. The Timeline header at the top of theTimeline indicates frame numbers. The playhead indicates the current frame displayed on the

Stage.

The Timeline status display at the bottom of the Timeline indicates the selected frame number, the

current frame rate, and the elapsed time to the current frame.

Note: When an animation is played, the actual frame rate is displayed; this may differ from thedocument frame rate if the computer can't display the animation quickly enough.

The Stage

The Stage is the area that you place content on and create interactive interfaces and

animation. The gray area surrounding the Stage is called the Work Area, whereyou can also place content and animate it. However, users viewing your site onlysee the Stage. They cannot see content you place in the Work Area. In production,

the Work Area is used when you need content to come from off-stage onto the

Stage, and from on the Stage to off-stage. Think of a stage production, traditionallyactors enter and exit the stage from the left or right, hence the term exit, stage

right. However, though this area in Flash is called the Stage, it might be better to

think of it as a motion picture cameras lens, as you produce your movies, and as amotion picture screen as you view them. In film, elements can enter the frame from

any one of four sides.


11/36

PanelsPanels helps us to view,organize and change element in a

document.Panels contain controls for the most commonlyused functions in Flash. As you learn Flash, youll find that

you can manipulate the content you create in many ways.Panels make the properties for modifying content you

develop quickly available, so that you can make changesrapidly. By default, there are four Panel sets, each

containing a collection of multiple Panels in each set.

The default Panel Set

To select a different Panel in the Panel set, {Click} the Panel Tab to activate it. Forexample, by default the Info Panel is displayed in the first Panel set; if you {Click}

the Stroke Tab, the Stroke Panel is displayed.


12/36

{Clicking} the Stroke Tab enables the Stroke Panel in this Panel set.

The function of each Panel is explained as you progress through the book and use

each of Flashs tools to create content.

Property Inspector

It contain properties related to the selected object.The properties the property

inspector contain depends upon what type of object selected.

Flash Fundamentals: The Drawing ToolsYou use Flashs Drawing tools to create image content for your movies. In this

chapter, we detail each of the Drawing Tools and how you create image content or

objects on the Stage. We recommend you follow along and try each of the tools tounderstand how they operate.

OBJECTIVES

Upon completing this section, you should be able to:

1. Understand the concept of Shapes in Flash

2. Understand the concept of the Shape State3. Understand the difference between Outlines and Fill4. Use each of Flashs Drawing Tools

Shapes in FlashIn Flash, images are referred to as shapes. Shapes you create or import can exist invarious states. Each state affects the behavior of the shape and how you are able to

modify it. The lowest state of a shape created in Flash is the Shape state. The


13/36

Drawing tools only function with shapes that are in the Shape state. Later, you canchange the state of the images to the Grouped state or the Symbol state.

Grouping images and converting them to Symbols is covered in a later chapter.

Shape FundamentalsBefore we begin to explore the Drawing tools, its

important to understand the fundamental logic behindshapes in Flash. Flash approaches shapes from two

primary elements: strokes and fills. Each image canconsist of a stroke (an outline) and/or a fill. Flashs

Drawing tools are divided into tools that create or modifystrokes, and tools that create or modify fills.

A circular shape made up of both a strokeand a fill.

The stroke and the fill of the shape

separated. Now there are two shapes.

The Line Tool (N)Use the Line Tool to create straight lines (also referred to as strokes). {Click} the

Line tool in the Toolboxto activate it. To draw lines, {Click}, hold, and drag themouse pointer on the Stage. As you drag the mouse, a line extends from the point

you {Clicked}. The line isnt actually drawn on the Stage until you {Release} themouse button. To constrain the angle of the lines you draw to increments of 45

degrees, press and hold the [SHIFT] key as you draw the line.

The Line Tool consists of the following options: Stroke Color, Stroke Style, and

Stroke Thickness.

Stroke ColorYou can select the Stroke Color from two places, the Colors section of the Toolboxor the Stroke Panel.


14/36

Colors (Stroke and Fill) in the Toolbox

The Stroke Color in the Stroke Panel

{Click} either Color Swatch to select a color. When you {Click} the Color Swatch the

standard Color Palette appears.

The Color Palette consists of 228 swatches. The swatches contain the standard websafe palette of 216 colors. There are 228 swatches in Flashs Color Palette because

12 colors are duplicated for quick selection. {Click} the color you desire. Note that

the hex value appears at the top of the Color Palette as you pass the cursor (aneyedropper) over each color. The Color Palette is covered in depth in a later

chapter.

Stroke StyleThe default stroke style is solid, meaning a solid line will

be drawn. To select alternative stroke styles, {Click} theStroke Style drop-down menu and select from seven

preset styles.


15/36

To create your own style, {Click} the Custom from the

Panel Menu. To access the Panel Menu, {Click} the triangle

at the top of the Panel. Custom is the only item available tothe Stroke Panel.

Stroke ThicknessTo set the thickness of the stroke, input the thickness into the Stroke Thickness fieldor {Click} the slider arrow to enable the Slider. As you drag the slider up and down

the thickness of the line changes in real time in the Preview Box.


16/36

The range ofStroke Thickness is 0.1 to 10.

Experiment with the Line Tool. Try out different stroke color, style, and thicknesssettings. When youre finished experimenting, select Edit/Select All from the

Menu and press the [DELETE] key to clear the Stage.

The Pen Tool (P)Use the Pen Toolto create precise curved or straight lines. The pen tool draws lines

that include editable points. Editable points allow you to change the properties ofthe line after youve drawn it. If you have never used a vector drawing applicationsuch as Macromedias Freehand or Adobes Illustrator, using the Pen Tool and point

editing may seem a little awkward. Dont worry. It may take some time to get usedto it, but once youve mastered it, youll find the PenToolvery useful.

Drawing Straight LinesTo draw a straight line, select the desired stroke color, style, and thickness. On theStage, {Click} and {Release} the mouse-button to create a point. Next, move the

mouse to the place where you wish to create the second point and {Click} and{Release} the mouse button. A straight line, referred to as a segment, is drawn

from one point to another. You can continue to {Click} and {Release} to create

more points in the line if you wish. When youve completed drawing the line,{Double-Click} the Pen Toolon the last point youve drawn. At this point you can

draw another line with the Pen Tool. To view the line, select any of the other tools inthe Toolbox.


17/36

Points only appear when the line youve created with the Pen Toolis selected. Bydefault, as you create a line with the Pen Tool, the line is selected. To view the line,as it will appear on the Stage, select another Tool in the Toolbox. The line is

deselected.

A deselected line.

The line appears just like a regular line when deselected. You cannot see the points.Keep in mind, that you are not limited to drawing a single segment in a line you

create with the Pen Tool; you also make lines with multiple segments.

A line with multiple segments.

The great advantage of visible points is quick modifications can be performed. To

select a point, you need to use the Subselect Tool . You can {Click}, hold, and

drag a point with the Subselect Toolto move points around and extend segments.By default, selected points are hollow.

The line is modified by using the Subselect Tool

Drawing Curved LinesIn addition to drawing straight lines, you can also draw precise curved lines with the


18/36

Pen Tool. Points along curved lines have an additional control tools called tangents,or tangent handles. Getting used to tangents, and using them, does take some

practice. To begin, select the line color, style, and thickness you desire. With thePen Toolselected, on the Stage, {Click}, hold, and drag the mouse button to create

a curved point. Youll notice two tangent handles extend from the point youve justcreated.

A point with tangents is created.

{Release} the mouse button and move to the next place where you wish to establish

a point. Again, {Click}, hold, and drag to establish the next point and the tangentsfor the next point. As you drag, youll notice that the curve of the segment increases

relative to the length of the tangents. {Release} to create the point. You can editthe point and its tangents later with the Subselect Tool.

A curved line is created.

To modify the line, use the Subselect Toolto select a point. When the point isactive, you can use the Subselect Toolto {Click}, hold, and drag on the tangent

handles to modify the curve. As you do so youll see both the original curve and thecurve modification you are performing. The modification is performed when you

{Release} the mouse button.


19/36

Pen Tool PreferencesYou can modify the way the Pen Toolbehaves by changing the default preferences.

To do so, select Edit/Preferences. {Click} the Editing tab. At the top is the PenTool section. There are three options: Show Pen Preview,Show Solid Points, and

Show Precise Cursors.

Show Pen PreviewCheck this option to enable a preview of the line you are creating before you {Click}

to create the next point.

Show Solid Points

This option is checked by default. When checked, it causes unselected points toappear solid and selected points to appear hollow. If you uncheck this option, the

reverse is true. Unselected points appear hollow, and selected points appear solid.

Show Precise Cursors

Check this option to change the Pen Toolicon from displaying over the Stage to across hair.

Experiment with the Pen Tool. Try out different stroke color, style, and thicknesssettings. Try creating both straight and curved lines. Use the Subselect Toolto

manipulate points and tangents. When youre finished experimenting, selectEdit/Select All from the Menu and press the [DELETE] key to clear the Stage

The Oval Tool (O)Use the Oval Tool to create circular shapes. {Click} the Oval Tool in the Toolbar to

activate it. To create an oval (or circular shape), {Click}, hold, and drag the mousepointer on the Stage. As you drag the mouse pointer, the circular shape is created.

The circular shape isnt actually drawn on the Stage until you {Release} the mousebutton. To constrain the circular shape to a perfect circle, press and hold the

[SHIFT] button as you draw.

Oval shapes can consist of outlines and fills. Before you create the shape, youshould specify the outline properties and the fill properties. Keep in mind that yourshape does not have to have both an outline and a fill. You can have both, or only

one. To specify the outline properties use the Stroke Paneljust as you do whencreating lines with the Line Toolor the Pen Tool. You can specify line color, style,

and thickness.


20/36

No Color (Outline)If you do not wish your shape to have an outline, you can

{Click} the No Color swatch located on the Toolboxor

in the Stroke Color Palette. In the Toolbox, make sure theStroke Colorsection is selected and {Click} the No Color

swatch. The current stroke color is replaced by the No

Colorswatch.

Oval shape with an outline. Oval shape without an

outline.

In the Stroke Panel, {Click} the color swatch selector and {Click} the No Color

swatch at the top of the Color Palette. Youll notice that the Preview Boxindicates nocolor by a grid pattern.

No Color (Fill)You may want a circular shape, but with only an outline.

To make a circular shape without a fill, you can {Click} the No Color swatch located on theToolboxor select

None from the Fill PanelsFill Type drop-down menu.In the Toolbox, make sure the Fill Colorsection is selected

and {Click} the No Colorswatch. The current fill color isreplaced by the No Colorswatch.


21/36

Oval shape with an outline andfill.

Oval shape without a fill.

In the Fill Panel, select None from the Fill Type drop-downmenu.

In addition to None and Solid, Linear Gradient, Radial Gradient,

and Bitmap are also fill color options. Gradients are gradualshifts from at least one color to another color, or one color to

transparency. The effect is similar to the way the sky shifts from

dark blue to a lighter blue as you look toward the horizon. Linear

gradients shift from one color to at least another in a straightline, whereas radial gradients shift from one color to at least

another in a circular pattern.

The Rectangle Tool (R)

Use the Rectangle Tool to create rectangular shapes. {Click} theRectangle Tool in the Toolbox to activate it. To create a

rectangle, {Click}, hold, and drag the mouse pointer on theStage. As you drag the mouse pointer, the rectangular shape is

created. The rectangular shape isnt actually drawn on the Stageuntil you {Release} the mouse button. To constrain the

rectangular shape to create a square, press and hold the [SHIFT]button as you draw the rectangular shape.

Rectangular shapes can consist of outlines and fills. Before youcreate the shape, you should specify the outline properties and

the fill properties. Keep in mind that your shape does not haveto have both an outline and a fill. You can have both, or only

one. Select stroke and fill colors just as you do with the OvalTool (see above).

Round Rectangle Radius


22/36

The Rectangle Toolhas one option, Round Rectangle Radius. To

round the corners of a rectangular shape, {Click} the RoundRectangle Radius modifier. The Rectangle Settings dialog-box

pops up.

Input a value into the Corner Radius: field. Higher valuesincrease the curvature applied to the corners of the rectangle.

A rectangular shape with a corner

radius of 20 points.

The setting remains until you change it. If you want to create

straight edged rectangular shapes after having created roundededges, youll have to {Click} the Round Rectangle Radius

modifier and input a value of zero.

Experiment with the Rectangle Tool. Try out different stroke

color, style, and thickness settings as well as fill colors - both

solid and gradient. Try out the Round Rectangle Radiusmodifier, inputting different values and see the effect they have.

When youre finished experimenting, select Edit/Select All from

the Menu and press the [DELETE] key to clear the Stage.

The Pencil Tool (Y)Use the Pencil Tool to draw freehand outlines (lines that arentnecessarily straight). {Click} the Pencil Tool in the Toolbox to

activate it. To draw a line, {Click}, hold, and drag the mousepointer on the Stage. As you drag the mouse pointer, the line is

created. {Release} the mouse button to finish drawing the line.

The Pencil Tool is an outline tool. You can set the stroke color,

style, and thickness with the standard controls detailed in theLine Tool (see above).

Pencil ModeThe Pencil Tool includes one option, the Pencil Mode that assistsyou as you draw your line, straightening or smoothing it out


23/36

automatically. There are three modes: Straighten, Smooth, andInk.

The Pencil Mode Options.

StraightenSelect Straighten to have Flash make the lines you drawstraight. Depending on how you draw the line, Flash will

do its best to straighten each part. However, it does notcreate straight lines like the Line Tool.

The line at the left was drawn in InkMode (no assistance). The line at theright was drawn in Straighten Mode.Notice how Flash has automatically

straightened each part of the line.

SmoothSelect Smooth to have Flash smooth out the lines you

draw. Depending on how you draw the line, Flash will doits best to smooth each part.

The line at the left was draw in Ink Mode (no assistance). The line atthe right was drawn in Smooth Mode.

Notice how Flash has automatically made the line very smooth.

InkSelect Ink to turn off drawing assistance from Flash. Theline you draw will be unaffected by Flash. Note, however,

that as you draw the line, the line you draw may look veryrough until you {Release} the mouse button, at which

point the true representation of the line occurs. It mayappear that Flash is smoothing the line, but this is not the

case.


24/36

Drawing in Ink Mode The line in Ink Modebefore {Releasing} after {Releasing}

the mouse button. the mouse button.

The Brush Tool (B)Use the Brush Tool to draw or paint fills. {Click} the Brush Toolin the Toolbox to activate it. To paint a brush stroke, {Click},

hold, and drag the mouse pointer on the Stage. As you drag the

mouse pointer the stroke is created. {Release} the mousebutton to finish painting the stroke.

The Brush Tool is a fill tool, so you should select a fill color, orgradient fill before you use it from the either the Colors Panel,

the Fill Panel, or the Swatches Panel. In addition, the Brush Toolhas a number of options, Brush Mode, Brush Size, and Brush

Shape.

Brush ModeSelect from five Brush Modes to affect how your brush strokes

behave in Flash. Modes include Paint Normal, Paint Fills, PaintBehind, Paint Selection, and Paint Inside.

Paint NormalSelect Paint Normal mode to make your brush strokespaint over everything, without constraint. You can paint

over any other shape on the Stage, whether its an outline,


25/36

fill, or both.

A shape of a face. The shape painted over inPaint Normal mode.

Paint FillsSelect Paint Fills to have the Brush paint only fills. It willnot paint over outlines, even though you can pass over the

outlines while you make your paint strokes.

Paint BehindSelect Paint Behind mode to limit the Brush to paint only

behind existing shapes on the Stage. You are free to paintover the shapes, but when you {Release} the mouse

button, only the area behind the shapes is painted.


26/36

With Paint Behind mode enabled, you can paint over shapes on the Stage.

The fill color is automatically placed behind existing shapes when you{Release} the mouse button. In this case, the lips were painted over, but the

color remains. Only the area behind the lips is painted.

Paint SelectionSelect Paint Selection mode to limit the Brush to paint only

selected areas. Selections have not been covered yet.Basically, selections are areas of a shape you isolate from

the rest of the shape by using one of Flashs selectiontools. We cover selection tools in a later chapter. You

make selections to affect changes to only the selectedarea. If you have an area of a shape selected, and you are

using the Paint Selection mode of the Brush tool, only theselection is painted.

Part of the hair has beenisolated by a selection.

With Paint Selection modeenabled,

only the selected area is painted.

Paint InsideSelect Paint Inside mode to limit the Brush to painting only


27/36

the areas inside of outlines. You must begin to paintwithin the outline. Even if you paint outside of the outline,

having begun inside the shape, only the inside part of theshape is painted. The outline and the areas outside of the

outline are not affected.

With Paint Inside mode enabled, only the inside of a shape is painted, even

though you can paint outside of the lines.

Paint NormalSelect Paint Normal mode to make your brush strokes

paint over everything, without constraint. You can paint

over any other shape on the Stage, whether its an outline,fill, or both.

A shape of a face. The shape painted over inPaint Normal mode.

Paint Fills


28/36

Select Paint Fills to have the Brush paint only fills. It willnot paint over outlines, even though you can pass over the

outlines while you make your paint strokes.

Paint BehindSelect Paint Behind mode to limit the Brush to paint onlybehind existing shapes on the Stage. You are free to paint

over the shapes, but when you {Release} the mousebutton, only the area behind the shapes is painted.

With Paint Behind mode enabled, you can paint over shapes on the Stage.The fill color is automatically placed behind existing shapes when you{Release} the mouse button. In this case, the lips were painted over, but the

color remains. Only the area behind the lips is painted.

Paint SelectionSelect Paint Selection mode to limit the Brush to paint only

selected areas. Selections have not been covered yet.

Basically, selections are areas of a shape you isolate fromthe rest of the shape by using one of Flashs selection

tools. We cover selection tools in a later chapter. You


29/36

make selections to affect changes to only the selectedarea. If you have an area of a shape selected, and you are

using the Paint Selection mode of the Brush tool, only theselection is painted.

Part of the hair has beenisolated by a selection.

With Paint Selection modeenabled,

only the selected area is painted.

Paint InsideSelect Paint Inside mode to limit the Brush to painting only

the areas inside of outlines. You must begin to paint within

the outline. Even if you paint outside of the outline, havingbegun inside the shape, only the inside part of the shape is

painted. The outline and the areas outside of the outlineare not affected.

With Paint Inside mode enabled, only the inside of a shape is painted, eventhough you can paint outside of the lines.


30/36

The Ink Bottle Tool (S)The Ink Bottle Tool modifies existing lines or adds lines toshapes without lines. To modify an existing line, select a

stroke color, thickness, and style, then {Click} on anexisting line or the fill of shape with a line. The line

changes to the current settings you have selected. To adda line to an existing shape that does not have a line, select

a stroke color, thickness, and style, then {Click} on theShape.

This face is composed offills and outlines.

The fill is given a thick solid outline,while the line style is changed from

solid to striped.

Experiment with the Ink Bottle Tool. Try out differentstroke colors, stroke thickness, and stroke styles. Add lines

to shapes without lines and modify existing lines. Whenyoure finished experimenting, select Edit/Select All from

the Menu and press the [DELETE] key to clear the Stage.

The Paint Bucket Tool (K)The Paint Bucket Tool modifies existing fills or adds fills to

shapes without fills. To modify an existing fill, select a fill

color (solid or gradient) and {Click} on the fill. To add a fillto an existing shape made only of an outline, select a fillcolor (solid or gradient) and {Click} inside the outline of

the shape.


31/36

The hair color is black and the lips red.Both shapes are made of fills.

With a single {Click} of the PaintBucket Tool, the hair color is changed

to yellow (blonde), and the lips to blue.

There is no color in the face. With a single {Click} of the PaintBucket Tool, the face is filled with a

linear gradient. The Paint Bucket Toolfills the area inside of the outline which

defines the face.

Paint Bucket Tool options include Gap Size, Lock Fill, andTransform Fill.

The Dropper Tool (I)Use the Dropper Tool to sample colors from existing

shapes by {Clicking} on a fill or outline. You might wantto sample a color to replicate the exact color for another

shape. When you sample an outline, the outline colorswatches for all the outline tools change to the sampled

color. Likewise, when you sample a fill, the fill colorswatches for all the fill tools change to the sampled color.

To make both the outline and fill color identical, hold the[SHIFT] key when sampling a color.


32/36

The Dropper Tool does not have any options.

Experiment with the Dropper Tool. Create shapes with

different colored outlines and fills. Use the Dropper Toolto sample colors. Cycle through each tool to see how the

color swatches for outlines and fills are automaticallychanged to the color youve just sampled. When youre

finished experimenting, select Edit/Select All from theMenu and press the [DELETE] key to clear the Stage.

The Eraser Tool (E)Use the Eraser Tool to erase shapes or parts of shapes on the Stage. To erase a

shape (or part of a shape), {Click}, hold, and drag the mouse pointer over theshape.

Eraser Tool options include Eraser Mode, Faucet, and Eraser Shape.

Eraser ModeSelect from five Erase Modes to affect how the Eraser behaves in Flash. Modes

include Erase Normal, Erase Fills, Erase Lines, Erase Selected Fills, and Erase Inside.The Eraser Mode controls work precisely like those of the Brush Mode controls (see

above).

Erase Normal

Select Erase Normal mode to make the Eraser Tool erase everything, withoutconstraint. You can erase any shape on the Stage, whether its an outline, a fill, orboth.

Erase FillsSelect Erase Fills to only erase fills. Outlines will not be erased, even if you passover outlines with the Eraser Tool.

Erase LinesSelect Erase Lines to erase outlines only. Fills will not be erased, even if you passover Fills with the Eraser Tool.

Erase Selected FillsSelect Erase Selected Fills to erase selections you have made. Fills and outlines will

not be erased, even if you pass over them.

Erase InsideSelect Erase Inside to only erase areas within an outline. You must begin to erase

within the outline. Even if you erase outside of the outline, having begun inside the


33/36

shape, only the inside part of the shape is erased. The outline and any shapesoutside the area of the outline are not affected.

Faucet

The Faucet acts as quick eraser. With a single {Click}, an entire fill or outline iserased instantly.

The Zoom Tool (M, Z)Use the Zoom Tool to zoom in to and out of areas on the Stage. There are two

methods you can use. By default, the Zoom Tool will have a positive sign in thelens. This indicates that zooming in (or increasing magnification) is enabled. Simply

{Click} on the Stage and the Magnifier Tool will increase magnification in steps of200%, 400%, 800%, 1600%, 2000%. To decrease magnification, or to zoom out,

simply press and hold the [ALT] key as you {Click} on the Stage. The Magnifier Tool

will have a negative sign in the lens.

The Hand Tool (H, SPACEBAR)Use the Hand Tool to move the Stage around within the

Flash environment. At some point, during production, youmay have zoomed in or magnified a particular area of the

Stage to modify a shape. You can use the Hand Tool tomove the Stage around in the magnified view instead of

the scroll bars. Simply select the Hand Tool (or press the[SPACEBAR]) and {Click}, hold, and drag the Stage.

{Release} the mouse button when youve moved theStage area to the desired location. The Hand Tool does

not move shapes, only the Stage.

At this magnification level we can only see the left side of the face. Ifwe need to edit the right side, we can use the Hand Toolto move the

Stage to that part of the face.


34/36

Using the Hand Toolthe visible area of the Stage is shifted tothe right. Now we can edit the right side of the face.

The Hand Tool does not have any options.

ANIMATING WITH FLASH

What is animation?

Animation is the rapid display of a sequences of images in order to create an illusion of

movement.

In flash there are two types of animation

1. Tweened Animation

2. Frame-By-Frame Animation

1. Tweened Animation:-

There are two kinds of tweened animation:

(A)Motion Tweened

(B) Shape Tweened

2. Frame-By-Frame Animation


35/36

i. Create a vector/plain text using any of the

drawing tools in Flash, say a text with

'Animation' typed as shown in the example andbreak it using Break Apart (Ctrl + B) to separate

the alphabets as shown below:

Fig: Showing Text after Break Apart

ii. In Frame-by-Frame animation we create theobject for each frame so as to produce an

animation sequence.

iii. Insert Keyframe (F6) and move the alphabets so

as to produce an animation sequence.iv. Repeat the above step as far as desired to create

Frame-by-Frame animation as shown in the

example.v. Save your work and test the Movie (Ctrl +

Enter). That's it you have created an animation

using Frame-by-Frame animation.

Fig: Timeline of Frame-by-Frame Animation


36/36

flash theory1

Documents