flash handout 2012

7/31/2019 Flash Handout 2012

1/22

Divine Word College of Legazpi

Adobe

Flash

Student

Handout

STUDENT

HANDOUTS


2/22

Adobe Flash Student Handout

Divine Word College of Legazpi Page 2

GETTING STARTED

WHAT IS FLASH?

Flash is a multimedia graphics program specially for use on the Web

Flash enables you to create interactive "movies" on the Web

Flash uses vector graphics, which means that the graphics can be scaled to any size without losing

clarity/quality

Flash does not require programming skills and is easy to learn

ADVANTAGES OF FLASH 8

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 preestablished 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 objects setting 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 vectorial object.

Improvements in video importing: To ease the working with video formats, Flash 8 provides high-

quality new independent codec, completely skinnable.

Metadata Compatibility: Include your SWF files in searching engines defining a title, description

and/or keywords.

Mobile devices Emulator: Preview your Flash Lite compatible mobile devices movies oriented with the

new emulator Flash 8 includes.

ActionScript Wizard: The ActionScript Wizard has come cack. Was deprecated in the last version, but

now it has been retrieved and improved. Now ActionScript is at your reach.

The Eternal DealThe first problem is the compatibility with FLASH. Along with some browsers that do not

support javascript or cannot see contents of DHTML (or including CSS), in order to see, FLASH

has to have an special PLUGIN of Macromedia. A PLUGIN is an special program that let's your

browser identify the FLASH movies, download and visualize them correctly. This PLUGIN is free.

Fortunately, each time more browsers have incorporated it and each time more people know


3/22



what it is and are not afraid when it is offered to them. So far, each time more people have this

PLUGIN.

The second problem is the size of the movies and their download time. Whereas an HTML

page can size about 10 KB on the average, a FLASH animation sizes much more. Evidently it

depends on the contents, but usually it easily exceeds the 100 KB, and in addition if itincorporates sounds it is obvious that the number drastically increases. So the time that it takes

to make the Flash contents visible is still greater and not all the visitors are ready to wait ... they

just go to another page.

On the other hand, the wide bandwidth connections each time become more numerous. That

eliminates the problem of the downloading time. But the day when all the people are

connected to the high-speed internet is still far away so the debate will continue being open for

a long time.

OPENING FLASH

1. Press Windows button + R

to open Run window

2. Type flash

3. ClickOk

1

2

3


4/22



EXPLORING FLASH

THE START PAGE

Also called as the WELCOME WINDOW. It first appears in the stage area when you firstopen Flash. It presents you some common options (like Create new files, open existing files, templates,

or open the Flash help system) you can click before starting a flash project.

A Lists down recent projects

B Choose different flash document types

C You can also create flash files from a template

DCheck this box if you dont want to see the start page next time you open flash

B C

D


5/22



FLASH WORKSPACE

Also called as FLASH WORK ENVIRONMENT.

Menu Bar

The Menu Bar is aimed to

make easier the access to different program features. It is similar to any other web or graphic

designer program, although it has some particularities. Let's see the main Submenus you can

access to:

File:It allows creating, opening and saving archives Import has exceptional power; it inserts

to the current movie nearly all types of archives (sounds, videos, images and even Flash movies)

or the Publication Settings option from which you can modify the characteristics of the

publications. It also enables to configure the printing pages, print them, etc

Edit: It is a classic menu that allows you to Cut, Copy, Paste objects or as well images or

frames; it also allows you to customize some of the most common options of the program.

View: Apart from, typical Zooms, it allows you to move the frames and scenes. It also includes

the possibility to create a grid and some guides. These ones can be selected from submenu Grid

and Guides from where you can configure its options.

Insert: It permits you to insert objects into the movie, as well as new frames, layers, actions,

scenes


6/22



Modify: The option Transform permits one to modify the graphics existing in the movie, and

the option Draw Bitmap allows to modify current graphics in vector maps (this theme will be

studied further). Other options allows you to modify characteristics of the animation elements

Smooth, Optimize or of the same movie (Layer, Scene).

Text: Its contents affect the edition of text. It will be further handled in more detailsCommands: Allows administrating the Commands (group of saved sentences that allows to

emulate what user can introduce to the edition environment) that we had saved in our

animation, to obtain other news from the Macromedia page or execute what we already have.

Control: From here you modify the properties of the movie reproduction Play, Rewind, Test

Movie ....

Window: In addition to the classical options of distributing the windows, this menu includes

shortcuts to ALL the Panels.

Help: From here we can access to all the help that Macromedia offers to us, from the current

manual up to the Action Script, going through tutorials, guided lections etc

Timeline

The Timeline represents a simple mode of visualization. It consists of two parts:

1) The Frames that are limited by vertical lines (forming rectangles)

2) The Numbers of frames that allow us to know the assigned number of each frame, its

duration and when it will appear in the movie.

Moreover, there are some tools on the bottom to work with Onion paper and its information

about the Number of current frame (1 in the image), the frame Speed (12.0 in the image) and

the Time of the movie (0.0 in the image).

On the definition level, the Timeline represents the succession of frames in the Time. The Flash moviewill not be only the frames that appear on the Timeline one after another in the order established by

the same Timeline

The Layers


7/22



The concept of the Layer is basic to manage Flash efficiently. Because of its importance we

will dedicate an entire unit to it. Even so, let's see a great characteristics of the layers.

A Layer could be defined as one independent movie of only one level. That is to say, one layer

contains its own Timeline (with endless frames)

The objects that are at one Layer share a frame and due to this fact they can "get mixed up"

among themselves. Frequently it could be interesting, but other times it is convenient to

separate the objects in order that they do not interfere among them. For this, we will create as

many layers as necessary. Furthermore the use of many layers gives place to a good-ordered

movie and of easy use (for example, it is convenient to fix the sounds at one independent layercalled "Sounds").

The Working Area

The Working Area consists of numerous parts, let's see them:

The most important part is the Stage, we will draw and fix different elements of our movie.

The Stage has very important properties, due to the fact that they coincide with Document

Properties, in order to access them, right-click on anywhere on the Stage with no objects and

then on Document Properties:

Add metadata to your files so they can be indexed in the search engines. For this fill the Titleand Description fields.

Dimensions: They fix the size of the movie. The smallest size is of 1 x 1 px (pixels) and the

biggest one is of 2880 x 2880 px.

Match: It causes the coincidence of the movie with the selected size

Background Color: The color selected here will be the one of the entire movie.

Frame Rate: Or the number of frames per second that appear at the movie.

Ruler units: Unit used to measure the quantities.

Make Default: Allows to store the properties of the current document and to apply them to all

the new created documents from this moment. These properties could be changed from this

panel whenever you wish them to.


8/22



The Panels

The Panels are command sets grouped according their function (for example, all that makes

references to the actions, will be in the "Actions" Panel). It's mission is to simplify and facilitate

the commands use.

All of them will be studied deeply during the course. Even so, we'll name them and summarize

the functions of most of them.

Align Panel: It places the objects like we indicate to it. It is very useful.

Color Mixer Panel: Using this panel we'll create the colors that we like more.

Color Swatches Panel: It allows us to select a color quickly and graphically. (Including our

creations).

Info Panel: It shows the size and the coordinates of the selected objects, with the possibility of

modification. It is very useful for exact alignments.

Scene Panel: It modifies the attributes of the scenes that we use.

Transform Panel: It scales, shrinks, rotates... the selected objects

Actions Panel: It is very helpful when you use Action Script and associate actions to our movie.

Behaviors Panel: They allow one to assign to certain objects a series of characteristics

(behaviors) that later could be stored to be applied to other objects fastly and efficiently.

Components Panel: It allows us to access to the already constructed and ready to be used

Components that Flash provides. The components are "intelligent" objects with characteristic

properties and many utilities (calendars, scrolls etc...)

Strings Panel: Flash 8 contributes multi-language base to our movie through this panel.

Help Panel: Macromedia gives us help and accessible advises from this panel.


9/22



Properties Panel: With no doubt it is the most used panel and the most important. It shows us

the properties of the object selected at this moment: border, background color, line type,

characters size, typography, objects properties (if there are interpolations...), coordinates, size

etc... It is fundamental, you must never forget about it.

Movies Explorer Panel: It allows us to access to all the movie contents easily and quicklyDrawing in Flash 8

Design passes through many phases when designing web page or an animation. After the phase

of "What do I want to create and how is it going to look", normally, the phase of graphic design

comes up. Realize what your imagination has produced on the paper (in this case on the paper

of Flash).

It isn't desirable to mislead us, Flash isn't a program of graphic design, but its power in this field

is almost as great as these programs. We are going to see how use every drawing tool

effectively.

Tools Bar. Basic Tools.

The Tools Bar contains all necesary Tools for the drawing. Let's see which of them are the

most important and how they are used:

Selection (arrow) Tool : It is the most used tool among all. Its main use is to select objects,

it allows selecting the borders of the objects, the fillings (with only one click), the borders (with

double click), zones on our choice... Moreover, its adequate use can save time of our work.

Line Tool: It allows creating straight lines in a quick way. The lines are created as in anyprogram of drawing. Click and drag to show up a straight line until the desired end point. Once

created, the line can be modified just by placing the cursor near the line: above of the extremes

for dragging them, and in any other part near the straight line to curve it.

Text Tool: It creates a text in the place where we click. Its properties will be shown in the

next theme.

Oval Tool: The Oval Tool enables drawing circles or ellipses in a fast and simple way.

Rectangle Tool: Its handling is identical to the Oval Tool, they only differ in the objects they

create.

Pencil Tool: It allows drawing lines, after being drawn you will be able to edit its shape as

you like. The color applied by this Tool can be modified from the Color Mixer Panel or from the

subpanel Colors that is in the Tool Bar.

Brush Tool: Its functionality is equivalent to the pencil, but its stroke is much more thicker.


10/22



It is usually useed for fills. We can modify its thickness and stroke shape.

Paint Bucket Tool: It lets you apply fillings to the created objects. Many other programs of

drawing don't allow to apply fillings if a border doesnt limit the zone, it does. The color applied

by this Tool can be modified from the Colors Mixer Panel or from the subpanel Colors that are

in the Tool Bar.

Eraser Tool: It works like the Brush Tool. Nevertheless its function is to erase everything

what "it draws".

Tools Bar. Advanced Tools.

Lasso Tool: Its function is complementary to the Arrow Tool, since it can select any object

in a free way (the Arrow Tool can only select objects or rectangular or square zones). In

counterpart, the Lasso Tool can't select fillings nor objects (if we dont make the selection by

hand).

By selecting this Tool, the following images appear on the Options Panel : This is the

Magic Wand Tool, which is so popular in other programs. It lets you make selections according

to the objects color. The third option you have is the following: It allows you to select

polygon shapes.

Pen Tool: creates polygons (and moreover straight lines, rectangles...) in a simple way.

Many people find this tool to be complicated, although it's one of the most powerful tools that

Flash provides. Its use consists in clicking on the places that we want to define as vertices of

the polygons. In order to create curves, indicate the anchor points, which limit curvature, and

then drag the tangent on them.

Subselection Tool: This Tool complements the Pen Tool, as far as it lets us move or adjust

the vertices that make up the objects created by the above mentioned tool.

Ink Bottle Tool: It is used to change quickly the color of a stroke. It is applied to objects

with borders, changes the color of the boundary with one click in the Colors Mixer Panel.

Eyedroppers Tool: Its mission is to "Capture" colors to use them afterwards. To see how it

works, we advice you to see the following animation:


11/22



Color Mixer Panel:

In order to select a color, just click on the tabs that are close to the icons of the Pen Tools or

Paint Bucket. (If we want to modify the color of a border, we press on the tab that is closer to

the icon of the Pencil Tool and if we want to modify a filling, we click on the tab that is closer to

the Paint Bucket Tool). By doing this, a Panel with many colors will appear. Select one of them.

It also allows to introduce the code of the color according to the standard established by HTML.

The filling type that we'll apply to the created objects also can be determined.

We can create differentes types of Fills

Solid Fill: It consists in a filling formed by a single color.

Linear Gradient: It is a special filling type, a color does a gradient until it converts into another

one. It can shade from top to bottom or from one side to the other.

Radial Gradient: It is identical to the previous one, but the gradient shade performs a circular

pattern.Bitmap: It lets you put an image existing in the movie as filling (you can even import it in that

precise moment).

Color Swatches Panel

The Color Swatches Panel allows to see the arranged colors in a quick and easy way, solid

colors (only one color) as well as linear gradients or radial gradients. Moreover, when we create

a color with the Color Mixer Panel, we can add it to our set of swatches by Adding Swatch (that


12/22



is in a menu, which is open in the right top of the Color Mixer Panel). Once the color is added, it

will be in our set of swatches, and we can quickly access to it each time while working in our

movie.

Every movie has its own set of swatches and each time we open it we can use the swatches we

had the last time we worked in the movie.

The Objects. Starting

Independently of our working with animation, at the web page, at the catalogue for CDRoms

or in any other place, we will have to work with objects. In general, we would consider

everything that appears and is visible in the movie as an object, hence, we could work with it;

for example, an object could be any image, which we create or import, a button, a drawing

created by ourselves etc...

The objects that are considered in this way have 2 fundamental parts:

The Border: It consists in one thin line that separates the object from the exterior part of the

stage.

It could exist or not, depending on what is convenient for us. When we create an object, the

border is always created and its color will be indicated in the Outline Color (inside of the

Color Mixer Panel).

If we want to draw and create Borders we must use the Pencil Tool, Line or Pen and if we

want our drawing without border, it will be enough to select the border and delete it.

The Fill: The Fill is just the object without border. So far it is the interior part of the object. Its

existence is also arbitrary, because we can create an object which interior color is transparent, it

will seem that this object has no fill, although, in fact, it does exist but it's transparent.


13/22



Select

In order to work with objects, it is fundamental to know how to select the object part that we

want to modify (move, rotate, change the color...). We can observe that the selected object parts

take an appearence with a texture to indicate that they are selected.

Let's see how we can select different object parts:

Select a Fill or a Border: It is enough to click Border and Fill once.

Select the Fill and the Border: Double click the Fill.

Select all the borders (or lines) of the same color that are in contact: Double click one of the

lines that have the color you want to select

Select a Symbol, a text, or a group: Click the Symbol in the text or in the group. This types ofobjects will show the blue colored border (by default) after being selected

Select Various elements: We'll keep pressed SHIFT while selecting the objects that we want.

Select the objects, which are in a certain zone: We'll use for this the Selection Tool (Arrow).

We'll click one part of the stage and drag the arrow up to wrap the area with objects that we want

to select. If this area cuts any object, only the parts that are included in the wrapped area will be

selected. If we want to include this object, we might only press the key SHIFT and select the

part of the object that is lacking.

This way to select object allows us to choose quickly many objects, apart from allowing to selectcertain zones of the objects for cutting, pasting them....

Moreover, in addition to the Arrow Tool, we can use Lasso Tool, that is even more useful. It

allows us to select any zone of the object of any shape. On the contrary, the selected areas can

not be rectangular as in the Arrow Tool case.


14/22



Select from the Timeline: If we select a certain frame from the Timeline, all the objects from

this frame are selected automatically. It's useful if you want to modify quickly all the frame

elements.

Select All: The most natural mode of selecting all consists in clicking the menu Edit Select

All.

Aligning Objects. Align Panel

Now that we know how to select the objects or their parts, let's see how to align them to the

Stage.

In order to align them precisely, Flash provides us with the Align Panel. We can find this Panel

in the Menu Window Align. It works this way:

The Align Panel allows us to align the objects just as we indicate. Before considering the

possibilities, we must emphasize the option To Stage. This option allows us to indicate all the

positions that must have each object at the stage

If this option is not selected, the objects will take the reference form the group of objects they are

at, and they will align themselves taking into account those ones. The most usual selection is To

Stage, to align the objects in the center of frame depending on the movies limits...

Let's learn in details the Align Panel and its possibilities

Align: It aligns the objects in a determined frame position (if Stage is

selected). The different options affect all the selected elements and they are frequently used to

align selected objects to the certain places. For example, if we want to align an object to the left

bottom corner, it is enough to press the 1 and the 6 button one after another.


15/22



Distribute: It aligns the objects on the stage taking into account the

imaginary axis that passes through their centers, so that the distribution become uniform. For

example, if we have 2 squares and we press the first left button. Each one of the 2 squares will be

situated on one of the movie edges (one on the top and another on the bottom).

Match Size: It makes the object's sizes match. If the "To Stage" is active it will

stretch the objects up to make them match the movies width and length. If it is not active, the rest

of objects will be the reference. For example, if we have 2 different squares and the option "To

Stage" is not active, when you click the first "Match Size" button, the most narrow square will

have the width of the biggest square. If "To Stage" were active, both squares would have the

frame width.

Space: It spaces the objects uniformly.

Apart from controlling the object position from the Align Panel, we can also do this, more

precisely (more mathematically) from another panel, the Info Panel.

You can access to this Panel from the MenuWindow Info. The possibilities of this Panel are

limited, but if we are searching for precision or we don't trust Flash distribution, we might use it.

Object Sizes: Here we will introduce a number that represents the size of our object in the

dimensions selected in the Document Properties dialog box. W: is the width H: is the height.

Object location: From here we control the location of the object on the stage. The X and

the Y represent the axis of coordinates (The X is the horizontal axis and the Y the vertical axis).

The measures are also adapted to the movie size.

Current Color: Indicates the current color depending on the quantity ofRed (R), Green (G),

Blue (B) and Alpha effect (A) that it has.


16/22



Its sign could be deceitful, because it indicates the color of the object when we touch it with the

mouse. So far, we can have selected object (by clicking it) and see in the Information Panel its

size and position, but when the mouse is moved the value of color will change and will not

indicate the color of selected object, but the color of the object that the arrow is touching now. In

order to save time don't forget about this.

Cursor Position: It indicates the Cursor's position. It's usefull if we want something to occur

in the movie after crossing with the determinated cursor position or to align object parts in

specified places.

What are the symbols?

The Symbols come from objects that we've created using the tools that Flash 8 provides us.

When transforming these objects into symbols, they are included in a library at the moment of

creation that allows us using them on several occasions, either in the same or another movie.

How to create a symbol

Creating new symbol is one of the most used actions in Flash since it's one of the first steps

to create an animation, how we'll see further.

The procedure is the following:

We select the object that we want to convert to a symbol. We open the dialog box of Symbol

Properties, acceding to the menu Insert New Symbol or just by pressing Ctrl + F8 or F8.

Once done it will appear a window as the one of the image. We introduce the name of the

symbol, which we are going to create.

This is at the beginning and while we have few symbols it is not very important, but further it

will be helpful for referring to the object.

The only that remains is to select the type of symbol or behavior into which we convert our

object. We can choose between Movie Clip, Button and Graphic.


17/22



Types of Animations in Flash

Frame-By-Frame Animation

Frame-by-frame animation is the way cartoons have been animated since the early days

of animation. Using this method, the animator draws a figure or scene one frame at a

time, drawing slight differences between each frame. When the frames are then viewed in

rapid sequence, the differences between them create the illusion of change or motion. In

Flash, animators impose frame by frame animations over still images or other types of

animation to avoid redrawing an entire scene for every animation frame.

Motion Tween

Motion tweens transport a still object across a scene. In Flash, an object is animated this

way by selecting its start position and first animation frame as well as its end position and

last animation frame within the program. When run, the animation displays the object in adifferent section of the scene for each frame, creating the illusion of motion. Motion

tweens are also used to move background images, which creates the illusion that still

images in the foreground are in motion. Motion tweens also move two or more objects in

a scene relative to each other. This simulates changes in perspective, camera angle and

camera distance from the focal point of the scene.

Shape Tween

A shape tween changes the shape of an object over a series of frames. In Flash, this is

used to accomplish a number of effects. Notably, shape tweens are used to animate

opening and closing mouths or blinking eyes. Melting ice cream is created using a shapetween, as are expanding liquid puddles and other similar effects. As with motion tweens,

shape tweens are accomplished by placing one shape in one animation frame and another

shape in a subsequent end frame. When the animation is played, Flash generates a shape

somewhere between the other two in each intermittent frame, creating the image of a

smooth transformation between shapes.


18/22



SAMPLE ANIMATIONS

CREATING A FRAME-BY-FRAME ANIMATION

Step 1: On the START PAGE, select Flash Document under Create New menu.

Step2: Position the object you want to animate on stage.


19/22



Step 3: Click the next Frame in the timeline where you want to continue the animation.

Step 4: Insert a Keyframe. (Right click on the specified frame, then click Insert Keyframe. The shortcut key for

inserting Keyframe is F6)

Step 5: Change the objects location or appearance (size or color) slightly to animate.

Step 6: Click and insert another keyframe in the next desired frame.


20/22



Step 7: Change the object slightly again.

Step 8: Repeat steps 6 and 7 until you have created your desired keyframes in the Timeline and the object is in

position of your desired location at the stage.

CREATING A MOTION TWEEN ANIMATION


Step 2: Position the object you want to animate on the stage.

Step 3: In the timeline, click the last frame you want to include in the motion tween.


21/22



Step 4: Insert a keyframe in the last frame.

Step 5: Click and drag the object on which you want the motion tween to end.

Step 6: Right-click any in-between on the layer you want to motion tween.

Step 7: Click Create Motion Tween

CREATING A SHAPE TWEEN ANIMATION


Step 2: Position the object you want to animate on the stage.


22/22



Step 3: In the timeline, add desired keyframe. For example, well add a keyframe on frame 15.

Step 4: On the selected keyframe, draw another object. (This time, well draw a rectangle.) Overlap the previous

object with the new one.

Step 5: In the timeline window, select any frame from 2-14 using left-click. In the Properties window you will now see

an option to tween. It is currently set to none. From the Tween drop down selector choose Shape.

flash handout 2012

Documents