http://www.teacherclick.com/flash8/index.

htm

Unit 1. Introduction to FLASH 8 (I)

What is FLASH?
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 should I use FLASH 8?

The possibilities of Flash are extraordinary, each new version has outstripped the previous
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 more applications.
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 pages that
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 to sit
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

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 import video,
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 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.

Unit 1. Advanced. Javascript Examples

To proceed, we can see code of a web page example that is very simple and includes
Javascript code, the outcome, try yourself pushing the botton :

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript"> // Javascript Code

function Hello() {

alert("That is Flash!");

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE="button" NAME="Boton" VALUE="Press me" onClick="hello()">

</FORM>

</BODY>

</HTML>

Here you have the code in running order (you will be able to see it if your browser
supports Javascript)

Finally, another example, to have an idea about Javascript power, as you have already
seen that does not use neither to create web pages no animations... That is the code:
function Question() {

var answer = prompt("What is your name?", "");

if (answer)

alert("Enjoy the Flash Tutorial, " + answer);

And here you have it running

Unit 2. My first Flash Animation

Starting

One of the main characteristics of Flash 8 is its

simplicity, the straightforwardness in its use allows to
create animations in a effective and quick way.

Let's suppose you want to create an animation in

which a globe goes up and down. It may seem a job
for long hours, but it is not as bad. Let's see how easy
is to handle it with Flash.

Making the Animation

In this chapter we do not try to teach you how you can realize a Flash animation (you will
see it later), the objective is to understand how Flash creates animations and how it makes
our work easier.

At first glance, it seems logical to draw the globe at each moment, so that growing
number of moments makes the movement more real: the more drawn instants, the more
realistic movement. Nevertheless, with Flash it is sufficient to create only 3 frames: firstly
we will draw the globe at the initial instance (above all), secondly, we willl draw the globe
at the moment when it touches the ground and then the globe will come back to its inicial
position (actually you can create this frame by making a copy of the first one). So far as
we see now, most part of the work (drawing objects) is already done.

Now, the duration of each movement is determined by setting the time between the
moments when the globe is at the top and at the bottom, and finally Flash is pointed out to
create an animation of movement between those two frames. It is easy, isn't it?
Unit 3. The working environment (I)

Flash 8 Interface

Flash 8 counts with the most handy and intuitive environment or working interface. Moreover it has an
advantage because it is similar to other Macromedia programs (Dreamweaver, Freehand, Director), it makes
easier to assuming Flash, and faster its management and control. We will see this after opening Flash 8 for the
first time:

During the course we will work with the trial version of Flash 8. You can download this free version from
here.

In the image you can see the interface, we can see it just opening the Flash program. Flash will remember
your preferences and will open the program just as you left it last time when you used it.

There is a lack of some menus in this image. We will see all of them during this tutorial even if some of them
do not appear in the image above, that shows only the main parts of the Flash interface. Let's see them:
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

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 details

Commands: 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
Exercise. Unit 3. Create drawing guide. Grids

Objective.
Create a grid that will be visible in the background of frame (further it would not appear)
and that it will serve us as guide to draw objects precisely and exactly

Exercise step by step.

1 Click on the menu File.

2 Select the option New.

3 The new movie will appear. If you want to create the grid on a movie that is already
started, do not take the first 2 steps.
4 Select the option Grid of the
menu View.

5 A submenu like the one from

the figure will open.

6 Select the option Show Grid to

make it visible.
7 Select the option Edit Grid to adjust the dimensions of grid like you wish (size,
background color...)

8 Select the option Snapping Snap to Grid of menu View to snap the objects to the gid
lines.

Unit 3 . Basic Level. Zooms.

The Zoom efect consists in moving the "view" near ot further away from a fixed place.
In fact, you only make larger or smaller the object size, so that it seems that we've
approached or moved away from it.

It is very useful to see more precisely some of the points of an animation (mainly
graphics) and to be able to fix some parts that are not visible from a distant point of view.
By the way it turns out useful to see the animation from a distance to have a global vision
of it. Let's see how Flash works with Zooms.
Zoom Panel
You can access to all the Zooms funcions from the Menu View. In any
case, Flash includes a fast accessible submenu to these comands. Let's see
what they consist in

Show Frame: It shows the contents of the global current Frames. The
frame size is extended up to fill an entire Work Area. If there are objects
outside the Work Area, you will not see them.

Show All: It shows all the movie objects inside the Work Area, adapting
the frame size to the necessary space for them to fit in. In case that all the
objects are situated on the left frame side, the right one will not be visible.

As we can see, both of the selections are useful, but they have its
disadvantages. In order to give us a total freedom, Flash allows us to select
the Stage size.

25%, 50% ...: It shows the frame with the size that we put in % , where
100% is the referent size, its original size.

Unit 3 . Basic Level. Scenes

Scenes
A Scene is only a portion of the Timeline, including everything (layers, frames...).

Its main aim is to ORGANIZE the movie, so that the parts with no connection could be
one after another (following in the Timeline). This way, if we divide the movie in 3
scenes, we will get 3 timelines, 3 groups of layers and 3 groups of frames, that we will
see and edit apparently in 3 different movies.

We must not forget that in spite of being apparently 3 different movie, they have the
same Timeline and after the end of the first will begin the second and so on...

The Scenes can be added, deleted, edited...from the Menu Scene that you can access
from Window Other Panels Scene

Unit 3. Advanced Page. The Timeline -Frames-

A frame represents the content of the movie at one moment of time. So far, an
animation is nothing more as a succession of frames. You can control all these from the
Timeline, but not all the frames have the same behaviour and can be treated equally.
Let's see what types of frames we can find and its characteristics.

KeyFrame They are frames with specific contents that are created to
insert into the movie inexistent content. You can identify them by the
black point that is in the center or by the black vertical line.

In the example of the "globe" that bounced on the ground, there are 3
Keyframes. One is for every different position of the globe.

Normal Frame (Normal frame): These frames always follow the keyframes, they do
not represent new content and they are gray.
The ultimate frame of a sequence of normal frames is represented by a
white square on the gray background.

In the example, the frames from 2- 5 are normal frames, its content is
not new, it is the same as the frame 1. As we see, its objective is to extend
the length of a keyframe.

Frame Container: They are not exactly frames; they represent a place inside the
Timeline where you can insert one frame. By default, they fill the entire movie and Flash
will not take them into account during the publishing of the movie. In the previous
image, there are frames container all the frames starting from 12 (included). One from
every five frames container is gray, the rest is white.

Empty Frames: They are frames with no content and their color is white.
In the image, the frames from 6 to 11 (included) are empty frames. We
must not confuse them with the container frames, the last ones are
limited by the gray vertical lines (not the black ones). If you insert
something in these frames, they become Keyframes.

It is important to emphasize that Flash does not ignore these frames and
will just show a blank image. So far if we want that one object appear in
the frame 1 and after one more time in the frame 10. The frames from 2
to 9 might be empty frames because in this way the object will
"disappear" and will appear again.

Labeled Frame: It has at the top a red "flag" that indicates an

associated name. This name is set from the Panel Frame. If the length
of the frame is enough you can read the name (or label) that identifies the
Labeled Frame group of the frames.

Frame with associated Actions: At the top there is one "a" that
indicates an associated action. These frames are especially important,
because these actions are "hidden" at the beginning (in order to see them
 you must access the Actions Panel) they can change the behavior of the
Frames with movie. In the image, the action that existed in the frame 1 also affects the
Actions 2 and 3 frames (for being normal frames). The frame 4 has no actions and
the frame 5 does.
Animated Frames: There could be one of those two types:

1) Movement Animation Frames : They are characterized by a purple color and

represent the move (with or without effects) of one object that becomes an inicial or final
Keyframe. In order to represent this animation appears an arrow.

This image represents the example of the "globe". From the frame #1 we
will pass to the frame #6, (Flash would represent the movement between
both positions at the final movie) and from 6 to 11. Another movement.
Movement
Animation Frame.

2) Frames of Form Animation: They are characterized by a green color and represent a
change of objects form that passes from its first initial form to its final. In order to
represent this animation an arrow appears between the end forms.

This example is similar to the previous one, but represents the change of
the globe form. In the 1st frame it would have the original form, in the
5th frame the form of square (for example) and in the 11th another
different form.
Frame of Form
Animation.

In this final image almost all types of frames appear. Do you recognize
them?

Unit 4. Drawing and Working with Color (I)

Drawing 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 any program 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.

To practice the handling this Tool, we recommend to do the Exercise of

Creating Oval

To practice the handling this Tool, we recommend to do the Exercise of

Filling Color Oval

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. 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:

Unit 5. Working with Texts (I)

Starting

Flash provides everything that we might need to create an animation, and, hence, also all
that is related to the texts. However, Flash was conceived to create graphic animations, in
such a way that it will treat any text as if it were one more object, prepared to be animated
if that's what you want it for. That allows us to animate texts afterwards and to easily
create spectacular animations. Flash distinguishes among 3 types of text: static text or
normal; dynamic text; and input text (in order the user to introduce the date, for example),
it can also create text that supports HTML format, etc...

Text Properties
In order to write we have to click on the Text Tool and then on the point of the stage in which we want
to start writing.

To learn more about How to write texts visit our Advanced Page

The Properties Panel contains the main properties of all the objects that we'll use during our movie.
So if we select a text, we can see whatever we need to know about our text. If we have experience
using Flash 5, we'll notice that all the properties met before in the Character Panels and Paragraph,
are now grouped in the Properties Panel.

Properties Panel
Let's see inside out the Properties Panel:

Font: From here, as well as in the more common text editors, we can
select the preferable type of letter or "font".

Height: It determines the space between the characters. It is used when the useed typography
shows the letters together or to add specific effects to the text.

Text Orientation : It changes the orientation of the text from horizontal to vertical, as well as from
right to left.
Automatic adjustment between characters: The activation of this square causes that the
separation between characters is done automatically.

Position: It allows us to convert our text in subindices or in superindices (or leave it

normal).

URL: If you want the text linked to a web page, enter the
address here.

Destination: It determines where the URL will be loaded: in the same window of
the browser, in a new one...

Line Type: If the text is dynamic (otherwise it appears deactivated), this option
allows us to determine the type of lines (single line, multiple line or multiple line without adjusting).

Configuration: There are the classical options that allow to convert the text in Bold
(B), Cursive (I), or to change the text color and size.

Other Properties: Given the fact that Flash handles the texts as objects,
these also have width, height and coordinates. We can modify them.
A Paragraph is nothing more that a set of characters with common properties for all of
them. These paragraphs admit certain options that allow us to work with text blocks. The
Properties Panel provides us the following options to work with paragraphs (between
others).

Align Left: All the lines will begin as far as possible to the left (within the defined
text frame).

Center: The lines are distributed to the right and to the left from the middle
Paragraph point.

Align right: All the lines will begin as far as possible to the right (within the box of
defined text).

Justify: The text is widen if it is necessary in such a way that there cannot be spaces
in any of its limits.
 The rest of options allows us to determine the margins (left and right ones), the
indentations of paragraph and the interlineal space.

Unit 5. Advanced. Writing Texts

By clicking on the Text Tool in any part of the current frame, we'll see something like

this: This is the frame that outlines the text, it will NOT be seen in the final movie,
but serve us to place more easily the text and to move it or to change its size. Finally, the
circle, which is on the right top, means that the text frame will expand as we write. That
is, everything that we write, will be in the same line.

If we write in the frame created by default we'll see how the frame contents is extended.
In order to change the line, it would be necessary to press the Enter (Return) button.

On the other hand, if we want to delimit the space our text is going to take (that is rather
common) we'll drag the mouse cursor closer to the border of the text frame, and it will be
transformed in one or another symbol, depending on which border are we nearest.

If we get the cursor closer to the frame border, a small

arrow of 4 directions will be added to it as the figure
shows. This indicates that we can move the text:

If we drag the cursor closer to the circle, which is on

the right top corner, the cursor converts into an arrow
of widening, as the figure shows:

With the cursor converted into an arrow of widening, we can extend the limits of the
text frame, and in addition, the circle, which appears on the top right corner, is converted
into a square. This square tells that the limits of the text frame are fixed, and inserting
more text will result in a jump of line instead of widening the text frame. On introducing
text its contribution will be as:

If we would like (once the text frame is defined) to turn back to the previous mode, it is
enough to double click on the square that is on the right top corner of the text frame. This,
when done, will be converted into a circle and its contribution will be described at the
beginning of this page.

Unit 6. Working with Sounds (I)

Starting
Who would be able to see a mute movie? And a spectacular animation without sound?

Unill recently, the only sounds that we heard on the web pages were the famous "midis",
of scanty size and poor quality. In fact, there were only music instruments without voice,
whence its small size (and quality). Still, a creator of web pages always existed who
ventured to set a complex sound (.wav o .mp3) on his web page, unfortunately, its load
was so slow, that the majority of the visitors would leave the page without listening.

Nowadays, thanks to wide bandwith connections orientated to multimedia contents, set

sound on the web pages is a little bit easier. What does FLASH contribute?

Flash allows us to insert any sound that we want in our movies (.wav, .aiff y .mp3) in a
quick and easy way, as it is always capable to accelerate the download of the sound and
do it at the same time with our movie.

We can add simple effects to the movie (by the typical "click" on pressing button),
complex effects (background music) and even make the animation develop accompanied
by music (though for this last it would be necessary that the entire movie was downloaded
beforehand to avoid "blockage" during the developing the animation). Really, Flash
makes it easy for us again.

Importing Sounds
 If you had once intended to add a sound to your animation probably Flash would have
disappointed you a lot by not achieving it. This is due to the fact that it is not taken into
account that to be able to use an object in our movie: either we create it ourselves (how
we have done until now) or we get it in any other way, and then we insert it in our movie.

This last is called "Import" and it can be done with sound, graphics, and even with other
Flash movies. Hence, to import, you just notify Flash to add a determined file to our
movie for use it whenever you want. In fact, the file is added to our Library, that is the
Panel in which are all the objects that contribute in the movie (we'll see this Panel
further).

So then if we want to handle a sound in our movie, we have to import it beforehand.

Once it is imported, we'll be able to use it with total freedom.

To import a sound click on the menu File Import Import to Library.

The Import to Library dialog will open. There you will hace to select in Type All the
sound formats.

Browse your folders until you find the sound file you want to add. Then select it and press
Ok.

The sound will be ready to use, you could find it in the Library (menu Window
Library).

Sounds Properties
In Flash 8, as well as in Flash MX 2004, we can publish all referring to the sounds from the Properties Pane
we have all that is necessary to insert, modify and edit the sound that we terminate to import. If we have not
imported any sound, we will notice that we cannot select anything in this panel, it's enough to insert it in orde
changes.

In order to work with sounds, we have to click in a frame of our movie. After doing this, the Properties Pane
the following appearance:

Let's see the parts that this panel has.

Sound: In this tab the imported songs will be displayed. We have to select the song that we want to add to o
movie (in the next item we will see how to insert it).
Effect: From here we will be able to add some effect to our sound, as for example that the sound passes fro
left canal to the right one (this creates the sensation that the sound encircles you since you hear it from one pl
then from the other, although it's very far of the true surrounding sounds), that the volume increases progressi
etc... If we want to add complex sound effects, we might have to adequately handle the sound with some prog
created specifically for this aim before importing.

In the item "Editing Sounds" these effects will be treated in more details.

Sync: This option allows us to determine in what moment our sound will start acting; these are the options
have:

Event: It synchronizes our sound with a determined event. This is the option by default and causes tha
sound begins to reproduce when the frame, in which the sound is situated, passes through the movie. T
sound can also be synchronized with buttons and other types of symbols.
Start: Its operation is equivalent to the "Event", they differ in that if Start is selected and the same or
sound is reproduced once more, it makes this "over" of the current sound. It can be a very attractive ef
can add some "noise" into our movie.

Stop: It stops the selected sound.

Stream: This option synchronizes the sound with stream or the objects associated with it, therefore, if
loading of the movie is slow and the images do not flow adequately, the sound will be stopped to sync
with them. This effect can create the sensation that the movie is abruptly interrupted (it might be consi
as normal that an image is slow in loading, but the stopping sound, meanwhile reproducing, causes a v
negative reaction in whose are seeing our movie).
On the other hand, it is a very appropriate effect for some situations, for example, the effect of that a
personage speaks during a movie. In this situation, it's strongly recommended to synchronize the soun
the images.

Repeat: It specifies the number of times the sound is played. To play it indefinitely, calculate the possible t
the movie duration and the time of the sound, and then repeat it as many times as necessary (that is better than
99999 times).

For example: If your movie lasts 2 minutes (120 seconds) and your sound lasts 16 seconds, so far 120 / 16 = 7
times. You will have to write 8 times, since it is no sense to reproduce a sound 7 times and half.

We do not recommend insert sounds with the option Stream and at the same time Repeating, since on synchro
the sounds with the images, we would cause that the images (and the frames which them contain) will be also
duplicated, considerably increasing the size of the movie.

Unit 6. Basic Level. Sounds Formats

WAV Sounds
The sounds with extension WAV (.wav) are sounds with a very good quality, concretely, its quality is lower
an original sound by 13 times, this quantity is more than acceptable if we take into account that, for example,
sound of a telephonic call is worse than a original sound by 100 times, and a sound which we listen in radio (
worse than a original one by 24 times. Knowing this, we will understand that WAV could take a lot of space i
hard disc. (A song of 4 minutes occupies 50 MBytes in format WAV).

Is it necessary so high quality? Is it necessary that the sound would be completely pure? Evidently not, and be
of this others formats of audio appear. Others formats that without losing quality save space in the hard disc (
our Flash movies) and provide flexibility to these sounds.

The format of audio that have acquired major popularity is the format MP3. Let 's see why.

MP3 Sounds
The MP3 (.mp3) is a technology of compression of audio file. Its complete name is MPEG-1 Audio Layer
it appeared 15 years ago with the objective of reducing the enormous size that the audio files (for example, th
WAV) had until then.

MP3 succeeds in combining quality of sound with a size of small file, becoming an audio standard in Internet
key is in that an MP3 sound does not contain all the details of the audio, those which are not captables by the
ear, but exist in the original sounds. That's to say, if a detail of the sound cannot be audible by the human ear,
not delete it.

And that is indeed the case; the result is a practically identical sound (often completely identical, depending o
level of applied compression) to the original sound. Some very powerful methods of compression are applied
sound without needless information, and the final result is a file of MP3 audio, with a good quality and very r
size (then, the song of 4 minutes from the previous example occupies 3,9 Mbytes only), that allows us to save
nearly unlimited number of songs in our computer, in CDs or even work with them in Internet...

Unit 7. Working with Objects (I)

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
(see the next point)

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, as we've seen in the Drawing unit, and therefore, it will seem that this
object has no fill, although, in fact, it does exist but it's transparent. In order to draw Fills
(without borders) we can use such tools as the Paintbrush or the Paint Bucket

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.

NONE selected object Object with the selected BORDER Object with the selected FILL
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 of objects 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 select certain 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.

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.

Unit 8. Layers (I)

The Layers. Let's understand them

Everybody has seen sometimes how the sketchers of cartoons work. And all we've seen
how they place a semitransparent leaf with drawings on others and the superposition of all
composes the final drawing. Why do they not draw everything on a same leaf? Why do
they work with several levels and several drawings if they are going to finish all together?

The reasons are many, and these levels that use the sketchers, are equivalent to the
Layers, which Flash uses. Each layer is, therefore, a level in which we can draw, to insert
sounds, texts... with INDEPENDENCE from the rest of layers. It is necessary to take into
account that all the layers share the same Timeline and therefore, its different frames will
be reproduced simultaneously.
Let's clarify this with an
example:

Let's suppose that we

have 2 layers. In one
layer, the frames from
the 1 to the 10 contain
the drawing of soccer
goal. In the other layer,
the frames from the 1 to
the 5 contain the drawing
of a goalkeeper (they are
empty from 5 and
further).

Then, this movie will

initially display (during
the time that lasts the
first 5 frames) the goal
with the goalkeeper, to
show afterward (during
the frames from the 5 to
the 10) the goal without
goalkeeper.

In such a way the goal is

independent from the
goalkeeper, and we can
handle these objects
freely, since they do not
interfere among
themselves.
Another reason to separate the objects in layers is that Flash makes us place each
different animation in a layer. Otherwise, all the objects that are in this layer will compose
the animation. If we want that an object doesn't form part of an animation, we'll have to
delete it from the layer in which this animation is produced.

To proceed further with the example of the goalkeeper, its easy if we want to create a
motion of the goalkeeper towards a side, but if the goal were in the same layer that the
goalkeeper, then BOTH objects would move towards this side, with which it would be
impossible to have only the goalkeeper moved. The solution is to separate the objects in 2
layers, since we've already done.

In addition, the layers have other utilities, they allow us to order our movie rationally, and
they help us in the editing drawings (avoiding that they "are based" on only one, or
blocking the rest of layers so that we can only select the layer that is of interest).

Working with Layers

The standard View of a layer is the one
that shows the image. Let's see for what the
different buttons are used and how to use
them.

Insert Layers : As its name indicates, it

is used for Inserting layers in the present
scene. It inserts normal layers (in the
following point the different types from
layers will be seen).

Add Guide Layer : Insert a kind of

guide layer. It is discussed in detail the
following point.
Erase Layer : Erase the selected layer.

Change Name: To change Name: of a layer, it is enough to double click the current
name.

Layer Properties: If we double click the icon , we'll be able to access a panel with the
properties of the layer we've clicked. We'll be able to modify all the options that we've
previously commented and some more of lesser importance.
Here you can change different options about the layer, like its name or color. You can also
lock or hide it.

We will see further more the Type option. (See Guide and Mask options in previous
themes).

Unidad 9. Symbols (I)

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. We'll discuss
its characteristics and the differences among them in the next themes.

It will be enough to press OK to create our symbol.

To practice these operations, we advice you to do the Exercise of Creating Symbol.

The Libraries
 In Flash 8 we can find two types
of libraries, the common libraries
with examples, and custom
libraries associated to our created
movies. We have all of them to
our disposal to use the contained
symbols.

To access the common libraries

that Flash provides us, we have
just to go to the Menu Bar,
Window Common Libraries
and select one of them. There is
all the type of symbols: buttons,
clips or graphic.

To access the library of symbols

of the movie that we are creating
once more, we go to the Menu
Bar, Window Library. All the
symbols that we've created up to
the moment will appear in this
library.

We can verify how the new

symbol that we've created in the
previous exercise (Exercise of
Creating Symbol) has been added
to our library by accessing it as
we've just shown.
The symbols contents in the libraries are identified by
its name and by an icon that represents the type of
symbol:

Clip Button Graphics

To use a symbol of a library it is enough to select the symbol and drag it to any place of

the work area. Observe how we can do this.

Unit 10. Graphics (I)

What's a graphic?
 The Graphics are symbols that allow us to represent static objects and simple
animations.

In the case we use a graphic symbol to make an animation, we should take into account
that it will be bound to the timeline of the movie where it is. In other words, the animation
will be played always if the original movie also is reproduced. This causes that, in spite
of having its own timeline, it can't contain sounds, controls nor other graphic symbols.

So, as a rule we use the graphics for static images or when it's convenient that an
animation is played only if determined frame of the movie timeline is under way.

Apart of the cases which we've previously commented, where a graphics is not handy,
Flash provides us with another type of symbols as we'll see in next units.

Types of Graphics
The graphics can be:

a) Static: this graphic remains without changes. These

graphics are typical on the background and on the objects that
don't fulfill any special function. The size and consequently the THIS IS A STATIC
load time of static graphics will be generaly reduced, although GRAPHIC
it will always depend on the resolution, on its dimensions and
on the mode in which they are created.

b) Animated: this type of graphics varies its shape,

position and others properties with time. Since to make the
animation various graphics beyond the original one should be
THIS IS AN
used or certain actions that can modify the initial state should
ANIMATED GRAPHIC
be made, the size of animated graphics (for the same
dimensions and form of creation) will be much more bigger
than size of static one.

Because of this, although the animations provide our web

more spectacular and attractive appearance, there are two
inconveniences:

1) If it's about Bitmaps (now we'll see what it means)

the web can arrive at an excessively large size in the end.

2) Although it isn't about bitmaps, for example, if

there are typical Flash animations, which size isn't excessive,
the setting of many animations can make the visitor a little bit
"sick" of our site and therefore his attention from the really
important issue: its content.

(*) The previous types of graphics can be, in its turn, of two
types, according to the way in which they are created: Vector or
Bitmap Graphics. To understand better these two types of
graphics, have a look at our basic theme.
Creating graphics and testing its properties

As far as theoretical explanation of the properties of graphics is so confusing, we are

going to see in a practical way what we want to make clear. We are going to create a
graphic in Flash and test the properties that we've commented in the first paragraph of
the theme. For this, open a new Flash movie File New).

Now we have to create the object that we want to convert into a Graphic symbol. Let's

draw, for example, an oval in any place of the work area with the Oval tool , give it
a filling color, by selecting the background of the oval and apply a blue color to it with
the tool Fill color.

We've already created our object; we are going to convert it into a graphic symbol. Do
you remember this?

Select the object and go to Menu Insert Convert to Symbol and convert it to a
symbol as we've already seen and given it the name "Animated Graphic" and selecting
the Graphic Behavior

Since we've not yet seen the animations in details, we are going to make it in a way that
might not be the most appropriate, but it will be very suitable to us for this example.

For this select our graphic and press the right button of the mouse. A menu will be
opened, in which we'll select the option Edit to modify the graphic and access its
timeline. Verify that you are on the timeline of the graphics (there is a sequence just over
the stage that shows us in what level we are). On the lower image, it can be noticed that
we are on "Scene1 Animated Graphic" and, moreover we are INSIDE of the graphic
(and the timeline which we see is the one of the graphic, and not from the main movie).

Let's create now new keyframes by selecting one by one the frames number 2, 3 y 4 and
pressing F6 when we select them

Press on the frame 2 and change the background color for the oval as we did before.
Repeat this in the two following frames.

Your timeline would have this appearance:

Press where says Scene 1, which is just above the Stage and we'll turn back to the initial
level (Main Movie) and we'll be able to see our graphics "from the outside".

At last we already have our graphics completely animated. What do you think will
happen if we play the movie? Let's see it by pressing Control + Enter, the movie will
be displayed.

Do you like it? No, we don't at all. The oval continue being the same. But, why? The
answer is in the characteristics of the graphics that we had explicated: the timeline of the
graphics is bound to one of the movie.

In this case the timeline of the movie has only one frame, while the movie of the
graphics had 4 frames, therefore, we've not given time for the graphics to develop
its animation; it has reproduced only one frame, the first one.

How can we solve this?

It's very easy. That is enough to recall what we've commented. Close the window of the
Flash player, select the frame 5 of the main movie and press F6. Now we have 5
frames in the main movie.

Press again Control + Enter.

Yes, now the animation is seen.

Save this file, because we'll use it further.

Unit 10. Basic Level. Vector Graphics and Bitmaps.

How do represent graphics?

Probably you have seen multiple graphics with many different extensions: JPG, GIF,
FLA, SWF, FH7... The extensions indicate the file type or format in which the graphics
are saved.

There exist many programs in the market that allow us to display, to create and to
modify graphics, and each manufacturer decides to represent the graphics as it's more
convenient to him, or simply gives a certain extension to the graphics created with his
own program to restrict its use to programs of the same company.

In spite of all, the multiple formats, in which it's possible to find saved graphics, can be
classified in two basic types: vector graphics and bitmaps.

Difference between Vector Graphics and Bitmap

 Bitmaps and Vector Graphics are mainly differentiated in the size. Vector Graphics has an advant
takes much less disk space or in memory; and, therefore, it needs much less time to download it fro
page.

The explanation of this fact can be seen in the format in which they are created and represented:
The bitmaps or m
huge "data rectang
information about
which form the gra
corresponds to the
our screen.

At a glance we do
small size, but if w
can see them like
image).

The information st
characteristics of e
stored on pixels ar
graphics and its co

So, our PC proces

generates the ima
output device, indi
applied to each co

At a first glance pi
compose an imag
image, but they ar
extending the ima
Pixels not always have the same size and there is no reason to find the equal number of pixels i
The quality of an image depends on the number of pixels in which we divide an image (normally it's
the greater number of colors it can have.

Evidently, the higher the quality of the image, the more disc space it will take. As a result, it will be m
the graphics of higher quality and number of pixels.

Among the bitmap file formats the more common are: JPG, PCX, PNG, TIFF, GIF, BMP, ...

As we've seen, to generate a bitmap graphic, our PC must store and work with a great amount of
of maintainig the data of each pixel.
To represent a vector image it's assumed that the graphics are formed by a set of vectors or lines.

This is a great advantage, since a line, which would be composed by many pixels in the case of a b
image will o nly needed to store information on its starting and ending points, its direction and its len

In this way it also reduces any figure to a basic set of vectors, which is more complex. For example
simply keeping the information about its center and its radius, besides the outline color and the bac
greatly reduced size of this type graphics resides here.

How does Flash 8 work?

Although Flash 8 allows us to also work with bitmaps, it uses vector graphics to make its animations. This
animations of very high quality and dimensions, reducing significantly its load time in attempt to display them
addition, there is no need in complete downloading the Flash 8 files to display them. As soon as exists a mini
be shown while its downloading continues.

Unit 11. Movie Clips (I)

What is a Movie Clip?

A Movie Clip is a movie, like any of which we can have created until now in this
tutorial, but this one is included within another movie and at the same time it can contain
movies inserted in itself.

Like the other types of Flash symbols, movie clips have their own timeline.
Nevertheless, and unlike the Graphics (as we will see later), this timeline is not bound to
the timeline of the document that contains it, so that its execution is independent.

This type of symbols can contain any other type of symbol: graphic, clip or button, as
well as any object created in Flash, because a clip is actually a movie.

Another one of the Clip advantages we find when we make movies of great complexity
and size, is that it can be made up of many frames, this will allow us to have better vision
of how our animation is developed, and with a clearer and "cleaner" timeline.

The Clips are one of the tools that give greater power to Flash 8, allowing us to create
more complex movies and increasing the visual effects, since multiple and independent
movements, and connections between different document Clips can be created.

All those things that we couldn't do with a Graphic type symbol, we can do it with a
clip. Because of this, usually the clips are used for any type of animation due to its great
flexibility, leaving the graphics only for static images.

Verifying the Clips properties

As we've done with the graphics, let's see how
the clip timeline isn't bound to the timeline of the
document that includes it and at the same time we'll
see the difference between the clips and the Graphic
symbols that supposes to be one of the reasons for
the main use of the formers referring to the
animation creations.

For it we'll open a new Flash movie ( File

New ). Later we'll import any image or create one.
We convert it into Symbol (Insert New
Symbol...) and we select in Behavior "Movie Clip"

We drag it to the stage (if it's not already there) our

movie clip.

Now we have our Clip inserted in our new Flash

document. In other words, we have two movies,
each one with its timeline.

Now let's see that they are independent, following a

similar process to the one we use with the Graphic
type symbols.
Observe the timeline of the main movie and verify that it has only one frame.
 Let's publish the Clip that we inserted in the document (double click the plain) and
examine its timeline. Only one movie clip will appear. We can make something similar to
what we made with the graphics, if we are going to create a Movement Animation (that
will be seen in Unit 13). It'll look like this

As we see, the duration of the clip that we have inserted is much greater than the new
movie that contains it. If the first were a graphic we already have seen that if we tried to
play the movie nothing would happen. Let's see what happens if it is a Clip (this also is
valid if the animation was created like the graphics). (Control + Enter).

In this case we see the animation because at the moment at which the reproducer has
crossed the frame that contained the clip, this one has begun to play and, since its timeline
is independent, it has continued in reproducing although the main timeline has finished,
and it'll continue in doing it until its own timeline finishes.
Unit 11. Advanced. Another Movie Clips uses

We've already seen how to import and export clips from libraries coming from files .fla.
Now we'll see another way to import and to export Clips that allows us a larger flexibility
in the Flash use and in addition it provides us an effective interaction with other
programs that are complemented with Flash and that allow us to strength their
characteristics.

If we want to take the width of a movie, of which we don't have its file .fla, and to cause
that it behaves in our document as if it were a Movie Clip, it's not as simple as if we had
this source .fla, because while importing "the public" movie in swf format the animation
is imported frame by frame.

By this, if we import the file on the main movie we would find a great number of
consecutive keyframes among other things, it would spoil the appearance and the clarity
of our timeline, and would prevent us to treat the movie like a whole. This represents
some kind of security mechanism.

Importing frame by frame, the size of our file also increases and therefore its download
time, nevertheless usually this increasing isn't so important and it's possible that having
this movie and using it as Movie Clip would suit us.
In order to obtain this we must follow the following steps:

1) Create the symbol of Clip type that contains the movie. Acceding to the menu Insert
New Symbol...

Flash will place us within the Clip automatically as if we had published it by ourselves.

2) In this situation we'll go to the menu File Import Import to stage.

3) We select the swf type of file and look for the movie that we want to import.

4) We press OK and we already have the movie inserted in the Clip.

If we return to the main timeline we'll see our movie taking a simple frame and if we
execute the movie the effect will be the same that had the movie, which we imported.
This way we can already apply all the Clip properties to it.
As we see this movie "security mechanism" .swf isn't enough. If we create a movie and
we distribute it, but we want to prevent that somebody modifies and redistributes it, in
other words, to prevent that it's imported with Flash 8 by another user as we finished
doing, this offers us the opportunity to protect the movie that we've created.

For it, we can edit, as we will see further on, the way of exporting our movies (look at
the top image). So that to give an extra protection to our movies we must export the file
like swf and activate in Options, the option Protect from Importing and to introduce a
password. In this way this password will be asked to each one who tries to access our
movie. If he doesnt introduce this password, the movie will not be imported.
We can also export our clips and use them in programs like Swish, to take advantage of
the Flash capacity for the graphical animation and the Swish text animation dominion.
We can obtain this simply by exporting our clip like usual and giving to it always the
format Flash 8 swf.

The fact of being able to combine the utilities of several programs is vital and Flash is
specially good in this since it allows to interact of quite trustworthy way with treatment
of images programs, vectorial drawing programs, videoplayers, etc.

Unit 12. Buttons (I)

What's a Button?
The symbols of type Button contribute mostly in the interaction between Flash movies
and the user. In Flash, a button is just as any button of any computer environment; Web or
any other.

They are elements that have to be pressed by the user for triggering a serie of actions. It's
also usual to see how this type of elements responds when the mouse passes over them, or
they are clicked, for example.

Then, to obtain the mentioned interactive effects in other Web oriented languages we must
create relatively large programs. This is a quite big disadvantage since the use of buttons
is a very common practice in the Internet design. Nevertheless, in Flash it doesn't happen
so. Its interface is designed in an special way for the buttons creation, which allows us to
easily create all these effects.

Like to the other symbols of Flash 8, the buttons have their own timeline. It is
independent, but only four frames composes timeline, one for each possible state of the
button.

Up. The aspect of the button by default, in other words, when the mouse pointer is not
placed over it nor pressing it.

Over. Aspect of the button when we place the pointer over it.

Down. Appearance that we want our button to have while we are pressing it.

Active area (Hit). Here we must indicate the entire area in which we want our button to
respond. This is very important in the composition of buttons, as we will see further on.

It seems that the limitation of frames could imply a limitation in the great hit capacity and
utility of these symbols, but it isn't so.

The buttons can contain in its turn other symbols, like clips or graphics (also of Bitmap
type). The sum of the possibilities of all the symbols equips the buttons with great hit.

Creating a button

In the creation of a button we can consider two phases. First we are going to transform
an object into a symbol of button type and then we will see how to complete it internally,
which will help to us understand its structure better.
First of all well create the object that will represent the aspect of our button by designing
it with the tools that Flash 8 offers us.

We'll select the object and access to the menu Insert Convert to Symbol, we'll set the
behavior Button and well assign a name to our new symbol.

In this way we've already transformed the object so that it behave like a button. Now well
complete it internally.
To determine how the button must response to the mouse actions, well edit it by right
clicking our new button and selecting the option Edit.

When we have the button timeline in front (notice that it has the aspect shown
previously), well select each one of the frames (over, up, down and hit) and click F6 to
create a keyframe in each one of them.

Now we can modify the initial aspect of the button for each position and set the area of
the button action (Hit frame) in which we can just put down the same figure as the initial
one (in this case only the object form is important, not the colors or other options) or
draw with the Flash draw tools a new figure; our button "will be alluded" on this surface.

Here we can see a sample for creation of a oval shaped button. As result we obtain
the next button:

This one is a basic button, as well see it can become very complicated, but to start itll be
useful.

Once we've created the button, if we want to observe its different states without repeating
everything, we can do it by accessing to the Library panel of our movie and dragging the
button symbol. In order to see what we commented itll be enough to press the key
located to the right of the preview of the symbol.
Shapes in the Buttons
The buttons are symbols that can have large number of shapes. Although we usually
see buttons of rectangular, square and circular shape, which creation is immediate as we
saw in the previous point, there are also many other types of buttons, which we normally
see on multitude of Web pages, in spite of its seldom use.

There are also several common shapes of button, such as the beveled button or the pill
shape buttons. Since there exist many ways to obtain these effects, next you have an
exercise step by step that shows a way to obtain a rectangular button with a bevel.
Exercise Beveled Button.

Unit 13. Motion Animations (I)

The animation in Flash

Flash 8 is a program oriented mainly to the animation that is the aim of this unit.
However, to continue creating more and more complex animations, beyond all, it's needed
a lot of practice.

In this unit and the successive ones we'll show the basic techniques of animation in
Flash. Joining together all these techniques will be the one that will allow us to create the
most variated and showy animations.

In animation, Flash provides many facilities, obtain effects that require much
knowledge and storage space to be created in a very simple way, with no need of
excessive knowledge and taking very small disc space.

Although Flash provides better techniques, one can also create animations as a
animated GIF. Assigning to the movie the animations frame by frame. These are the most
basic animations and it is worth knowing them. For this it is worthwhile to visit our basic
theme:

Next we'll see the different types of animations that the creator of Flash movies will have
to take as initial guides. It is worth to highlight that we will be able to apply several of
these animations placing them in different layers. With this in hand we will obtain both
the most spectacular and useful effects.

It is very important to understand clearly a concept: one shouldnt create animations

in pages where it isnt necessary, nor create animations that distract the viewer's
attention from the really important issue, the message.
Tweening Motion (I)
It is the basic action of the animations in Flash. It allows us to move a Flash symbol
from one place of the stage to another, being necessary only two frames, which optimizes
a lot the movie performance.

It is important to emphasize that to correctly execute a tweening motion the involving

objects must be converted to symbol previously.

You should also be careful when making a tweening with two symbols that are in the
same layer, since the animation motor will group them as the only one and the result will
be unexpected. By this it is advisable to make sure two issues:

1. Separate in different layers the fixed objects and the ones that will be
animated.
2. Also put in different layers objects that are going to be animated with paths
or different shapes.

Let's proceed to the theme in question. A tweening motion, as we've said, is the
displacement of a symbol from one to another point of the stage. The fact that only two
frames are needed is because Flash, only with the starting point and end point, "knows"
the path in straight line and represents it (we'll see that also no rectilinear movements can
be made).

When we do the tweening correctly we will observe a sign like this in the timeline.

This indicates that the animation will change the position of the symbol of the frame 1
to the position of the same symbol in the frame 20, using exactly 20 frames. The number
of frames that are used in the tweening motion will indicate the substages of the
animation. The more substages you add, much more vivid will be the sensation of
"continuity" (lesser abrupt jumps) but simultaneously lesser its speed in the movement.

We can also change the speed of the motion in the movies by modifying its value in
the time bar, but this will not change what we have commented
previously.

The rate is expressed in Frames Per Second (pps) and it can be modified by double
clicking in the indicated place of the time bar. The larger value, the higher speed will be.
But to develop the animation as we want, enough frames are always to be set.
In the Unit 1 animation you could see how to make a motion interpolation.

Keep in mind that when you make a motion interpolation the start and final frame will
have to be different, in the contrary it will not represent any movement at all.

Look at the next images and observe where is the ball placed in each frame of the
animation:
Here you can see how to tween motion

If the object with which we want to motion is not converted to symbol well find
something like...

... and the animation will not work.

Also we can make the tweening in another way, without converting the object to
symbol previously, since Flash will automatically convert it to symbol if we dont do it,
giving the name "Animate" plus a number.

It is enough to right click on the frame that contains our object (in the timeline) and select
Creating Tweening Motion. Create a keyframe in another place of the timeline and the
tweening motion will be created automatically, and we will only have to modify this last
frame to produce the animation.

Perhaps this isnt most advisable in large movies, as we've already commented,
because of the large amount of symbols that can appear and confuse by many symbols
with similar names.

Flash also allows us to create animations with rectilinear trajectories in several phases,
with different directions. For it, once the tweening created, it is enough to select one of the
intermediate frames and create a new keyframe. If we move the symbol in that frame to
another place of the stage and play the animation, it will go first to this position and then
to the final position.

If we do this several times on various frames well obtain several consecutive

trajectories more.

In order to understand better this concept we recommend to do the Exercise

Processing Tweenings.

Tweening Motion (II)

We've just seen the motion tweening as a method to move a Flash symbols from one side to another of the
Nevertheless, we can take advantage of this program command to make animations in which our object incr
or decreases its size in a progressive way.

This is very simple with Flash 8; it is enough to modify the symbol instance in the last frame of the tweeni
motion, but this time changing the size.

We can apply both effects simultaneously, so that the change of size will occur while the object moves. Als
can do the change of size in several phases or sequences chained as in the common motion tweenings.

The following example incorporates these three characteristics of the Tweening Motion of Flash 8.

And the timeline what's left is something as simple as this:

Unit 13. Basic Level. Animations Frame by Frame

The Animation in Flash

An animation is nothing more than a sequence of frames reproduced at a so high speed
that the human eye isn't able to perceive the change from one image to another one.

Although the limit in which the human eye detects these changes on the monitor of a
computer goes up approximately to 18 frames per second, Flash places by default its lines
of 12 times to fps, due to that some monitors dont support well enough this frequency.

Flash 8 incorporates techniques that apparently dont use successive sequences of

frames, like the motion tweening. In these cases, we dont see frames "physically", or in
other words, if the animation takes 20 frames in the timeline, the fact that not all of them
are keyframes simply indicates an improvement in the storage capacity of Flash, because
it doesnt need to know how are the intermediate steps of the animation. If all frames were
keyframes, the size of the file would increase considerably.

This last one happens, for example with the animated GIFs, although being widespread
used in the Web world. They are not only made up of Bitmaps (weve already commented
about the larger size of these graphics), but each frame is a complete bitmap, which
increases significantly its space of storage in memory and disk.

Creating Frame by Frame animation

Although Flash incorporates superior techniques than these, it also allows "to
simulate" the way a GIF creates an animation, since sometimes the animation is
very sudden or the change isnt "automatically attainable with Flash or simply our
objective is to export the graphics created as this type of bitmap.

In order to create a frame by frame animation is enough to introduce the initial

appearance of the object in the first frame, make all those frames that are going to
take part in it to be keyframes, and modify them, progressively, one by one, since
a very great difference of one frame to the following would make an sudden hit to
whom visualizes it.

Once the animation is finished well have something like what we show in our
timeline:

We'll see the difference in sizes of the different animation techniques for the same
movie:

We have the following animation. The appearance will practically stay equal in all these
cases, but there is the possibility that by doing it frame to frame, small errors of
positioning in the trajectory are committed that Flash wouldnt commit:

And we have these three forms to create it with its corresponding sizes:

1) Motion Tweening: With the next timeline:

Size: 961 Bytes

2) Frame by Frame exported as Flash (SWF) movie: As we see the timeline has all
frames as keyframes:
 Size: 1 KByte

3) Frame by Frame exported Animated GIF: The timeline is the same as in the
previous case:

Size: 2 KByte

Although the differences would be observed better in more complex movies, in this
example we can see how the size is smaller using the technique of Flash 8 of Motion
Tweening, it is greater in the frame by frame animation and doubles for the case of an
animated GIF.

We've said that sometimes it 's inevitable to make a frame by frame animation. Here is
an example of this type.

Exercise. Unit 13. Connecting Tweening

Objective.

Creating a multidirectional movement connecting motion tweenings

Exercise step by step.

1 We create a Movie Clip.

2 We can also draw it and convert our draw into a Movie Clip.

3 We place the Clip at the right side of the work area.

4 We click with the right button on the unique frame existing at

this moment.

5 We select the option Create Motion Tween.

6 Let's got to the frame number 20 and press F6.

7 We see that the Animation of 20 frames of duration is created. In

the same frame (20) we displace the symbol to the right of the
stage.

Now, we have the basic interpolation, in which we have marked

only the initial and final position of the movement. If we leave this
so, the clip will move in a straight line.

We are going make it to arrive at its finish doing zigzag by a few

very simple actions, and using the already created interpolation.

Let's verify that the timeline is the following:

8 Right click on the frame 5.

Verify that the movie clip isn't already in the origin but rather "in
its way.

9 Displace our clip to upwards.

10 Now right click on the frame 10.

11 Displace our clip to the downwards.

Repeat these two last steps for the frames 15 and 20 and check
the movie.

As we can verify, the clip moves now in a straight line but also
in different directions.
Unit 14. Shape Tweening (I)

Shape Tweening
When what we want is not to change the position of an object on the stage, but rather its shape in a
progressive way (or both of them simultaneously), Flash provides us the technique of the Shape
Tweening, that consists, simply, in transforming the outline of the object created until it becomes just
like the outline of another different object.

Making a shape tweening is very similar to creating a motion tweening. Flash creates intermediary
frames in which the shape of the previous frame is slightly varied. We need only two keyframes. And as
we did in the previous unit, we'll place in the first frame the object with its original appearence, and in
the last frame its desired one.

This time, it is important to emphasize that in order to make the Shape Tweening to work properly,
the involved objects will have to be vector objects (not Flash symbols).

We must also take into account two points :

1. Separate in different layers the fixed objects and those that will be animated.
2. Place in different layers objects which are going to be transformed with different shapes,
since Flash will transform all vector objects from the first frame in those of the last frame
of the tweening.

If we made the shape tweening correctly the timeline will look like this:

We can consider the frame rate and the number of frames for the shape tweening and any animation
done with Flash in the same way as for the motion tweenings.

If there's some failure in the necessary parameters to execute the tweening correctly, for example, if
one of the objects in the layer is a symbol, something like this will be shown in the timeline:
 To create a shape tweening you should act as you did with the motion one. Once you have the start and
final frames select all the frames in between and open the Properties Panel.

There you should select the Shape option in the Tween list. And you'll be done.

Easy, isn't it?

We can observe how to make a shape tweening by pressing here.

At the
right we
can see
the
result of
the
previous
process.

We can also make shape tweenings in several phases in the same way as we did it in
the previous theme. In this way we can cause that a certain object transforms into another
one before taking its final form.

At the
right we
can see the
previous
example
but now it
is
previously
transformed
into a
triangle
before
taking the
square
shape.

We've obtained it just by right clicking the frame 10 and creating a keyframe (Insert
Keyframe). Then we must only delete the object that appears on the stage and draw a
triangle.

Transforming Texts
Due to the importance of the texts, it is essential to comment the change of shape to
text. Therefore we add one more possibility to make logotypes or showy presentations and
to transfer information in a spectacular way.

Lets remember that for making a shape tweening it is necessary that the object is of
vector type. This it isn't the case of texts that are based on fonts and are created on the
base of the ASCII table values and a letter type. In order to solve this problem, well
have to previously transform the text into a vector object, or in other words, as if we had
edited the outline of each letter with the tool pencil.
What are the possibilities of this text technique? There are
numerous, although it can lead to confusion if it hasnt
been made correctly. For example, we must provide
enough number of margin frames to make the transition
noticeable.

Also it is advised to give a time so that each shown letter

can be visualized and "understood" by someone who sees
the movie, because if we dont do it we run the risk that
the animation seems only a rotating pothook.

One of the possibilities is "to spell" a word as we see on

the left. We can verify that only changing the color of the
final object also results in a color transition. Observe that
when each letter is formed, we keep its image the enough
time like as it was previously indicated as necessary.
In this different example the transition of colors is noticed more clearly and, in addition, we
see transitions from shape to text.
When we create shape tweenings and we want to include text,
we should act in a special way because a text is not considered
as a drawing. So, in order to do this, you should select the frame
where the text is placed.

Then click on the menu Modify Break Apart to convert the

text into a group of points. Then you will be abe to create the
tween.

Tip: When you apply the Break Apart command on a whole

word observe that first the word is broken in letters. You should
perform this command again to convert the letters in points.

Here we show how to make an animation of this type.

Unit 15. Effects on Animations

Introduction
If the shape and motion tweenings don't seem enough to you, and you want to make
more complex animations, you can combine motion tweenings with the effects and
transformations of symbols.

Once understood all the techniques of this unit, we'll be ready to make all type of
animations in Flash. We'll only have to put a little bit of imagination because, as we've
seen and we'll see, the program will make our work enormously easier.
Effects on the Motion Tweening

In order to describe all the effects that we can apply on a motion tween previously created, with no
need to touch any symbol, we will be focused in the Properties Panel, when we select a Frame that
displays Motion-tweened animations, the attributes of the animation for modifying it will appear in this
Panel.

In the field <Frame Label > we can name the tweening that will help us to identify
it in the time bar. It will appear throughout all the frames that compose it.

Scale : This square, when activate, allows gradual increase/decrease of the initial
object size when its dimensions are different from those in the object in the final position
of the animation.
All the motion tweenings that we've done until now had this option activated although
we haven't indicated it specifically. By default, Flash activates it because it's the most usual.
Otherwise, we could find out an animation like the following one.

As we see Flash displaces the position, but the change of the size takes place abruptly in
the last frame.

Accelerate: This slider bar allows us to determine the acceleration of the first
animation section. We can choose values between -100 and 100. If the value of acceleration
is negative the symbol will be moved slowly and then the tween will be accelerated
progressively towards the end of animation. If this value is positive it will cause an opposite
effect.

We can, for example give the impression that an object, for example a car, starts, is
speeding up gradually (value -100) and later it's slowing down and reducing its speed until
the stop.

There exist many other applications like this one. In order to understand it better we
recommend you to make Exercise Accelerating Motion.

Rotate: This option is very interesting because it gives the possibility of applying a
rotation to the object in motion.

It presents us a submenu with four options:

None. With this we indicate to Flash to prevent rotation
of any symbol in motion.

Auto. By marking this option we rotate the object in that

direction, which requires the least motion. If it is expended
the same to do it on one side or on the other, or in other
words, when the initial and final image are in the same
position (as far as a rotation is concerned), the activation of
this option does not have any effect.
This option is the one that is marked by default and for this reason we haven't seen
until now an object rotating in our tweenings. In order to have obtained effect we must
have rotated the last image of the tweening.

Here we can see how apply this technique.

As we can verify, this result has been obtained in the shorter way, since the frame 6
has gradually passed from its previous position to the one, which the frame 1 occupied,
otherwise the frame 6 would have passed the 5, 4, 3, 2 and 1 previous positions being
the length of the motion much more larger.

Counterclockwise (before CCMR). It allows us to make the number of complete

rotations in the opposite direction of the watch needles, that we indicate in the right
square. In any case the final image will always suffer a rotation.
 In case that the final image had rotation, this would be
added to it.

Clockwise (before CMR). It makes the same that the

previous option but in the direction of the needles of the clock
(rightwards).

Let's see a right rotation example in a motion tweening.

We see the result on the right.

Orient to Layout: If we activate this box, when the tweening is by motion guide,
Flash will cause that the symbol is oriented by the guide, rotating to orient itself in the
same position that the line is.

In order to understand better this concept, lets remember the last animation of the
theme 13, in which the airplane made some kind of "looping". It turned out rather odd to
see the animation because the airplanes don't go reverse gear and, in this case and in many
others, it is not advisable that the objects move only on the stage leaving the symbol itself
motionless, as if it were levitating.

We'll solve this with this command, and the result would be this.

Synchronize (Sync): With this we avoid that the last graphical symbol loop,
included in our movie with an animation in its internal timeline, is reproduced, when the
number of frames, which occupies in the main line isnt frame multitude that the instance
contains.

Adjust: If we activate this option, the center of the instance (identified with a cross)
will be adjusted inevitably to the guide that we have marked in the corresponding layer.

In fact if we try to move the instance in the animation frame, Flash will place it on
the guide automatically.

Exercise. Unit 15. Motion Accelerating

Objective.

Understand the acceleration effect on a motion tweening.

Exercise step by step.

First we are going to create the tweening on which we'll apply the effect. We are going to
use a Movie Clip.

1 Import an already created Movie Clip or create it by yourself (you create a drawing and
convert it into Movie Clip).

2 Place it on the stage if it is not already there.

3 Right Click the frame that contains the movie clip

4 Select Create Motion tween of the emergent menu.

5 Select the frame 20 and press F6.

6 Move the Movie Clip of that frame at the right part of the work area.

7 Press Enter to see the animation without leaving the work evironment.

Now we have this:

8 Now right click the frame 1 and select Properties to open the frame Properties panel (if
it is not already open).

9 Introduce 100 in the square Ease, to speed up at the beginning and slow down
gradually.

Verify that the result is like this:

10 Introduce now -100 in the square Ease, to cause that it gradually increases its speed.

The result would be the following one:

Unit 16. Generating and Publishing Movies (I)

Considerations on the size of the movies

Before we try to publish our movie to show it to others, especially at a Web page where
the size of download is vital, we must consider the following aspects:

CONSIDERATIONS IN THE DRAWING:

Although the gradient are very showy, it also requires much more memory,
because of that we must avoid its excessive use as much as possible.

The pen tool takes more memory than the rest of the drawing tools, so we
might have to choose these last ones not as often as possible.

We've seen that the animation of lines is rather useful. But the use of lines that
defined by the user can cause that the size of the download increases. Therefore avoid the
discontinuous, dotted lines ...

Drawing curves with a minimal number of nodes.

CONSIDERATIONS IN THE ORGANIZATION:

Group the objects related with the command Modify Group.

If we've created an object that is going to appear several times, we'd have to
convert it to symbol, Flash will place it in the library and, whenever you want to show
the symbol make reference to an only position of memory.

We've already commented the greater size of the bitmaps. W e must decrease
the number of their appearances in our movie.

CONSIDERATIONES IN THE TEXTS:

We've been able to see that when we open the menu of letters type, the first
three letters are always "_ sans", "_ serif" and "_ typewriter". This isnt by chance. They
are placed there to take a minimum of memory by these fonts that's why their use is
recommended.

CONSIDERATIONS IN THE ANIMATION:

Use as often as we can the movement interpolations and the guides to reduce
the number of keyframes and the movie size.

Avoid the use of the interpolation by form or color change for animations,
when it is possible.

Apart of the optimization that we do, sometimes it is impossible to avoid increasing the
movie size. It is recommended then to make a preloader when the size of the movie
exceedes 80KB.

Preloading. Loading the entire Movie before its reproducing

Preloading is mainly used to induce the partial load of the movie, while its
reproducing; so when the movie is of a considerable size it doesn't cause it to seem to be
cropped.

Normally, preloading are made with showy effects to entertain the observer and present
the option to visit our Web. Usually they have some simple animations.

It can be much more complicated, but well make a simple one to understand well the
concept, and simple way to do it.

We will start as we already had finished our movie. If we want to know its size we can
go to File Publish Settings select the Flash tab, and check the box Generate Size
Report . If we press the button Publish, a text file will appear in our directory where the
size of our movie is explained in details.
Now we'll insert a new scene (Insert
Scene). It will have to be executed first.
In order to make sure of this we go to
Window Other Panels Scene and in
the window that appears we drag the scene
to the top. In our example we have called it
"Preloader" and have supposed that the Scene
with the movie is called "Movie" (logically). It
will have to be something similar to which the
image shows.

In the just created scene we'll insert

another layer, in such a way that we have
left two layers that we will call, "Action" and
"Load".

We'll create a simple animation in

the layer "Load". For example, a the title
that tells "Loading..."; you can always apply
the preferable animation to it, that isn't very
difficult.
In the layer "Action" well design the preloader "heart". Lets make that the animation of our
load scene is executed repeatedly, until the scene that contains the main movie has been
loaded. For it we will open the panel of Actions.

Let's select the last frame and introduce the action gotoAndPlay(), place the cursor within the
parenthesis and introduce the scene and the frame where it will have to go after executing this
action. In our case we want to go to the frame 1 of the scene "Movie", so we will write the
following: gotoAndPlay("Movie", 1);

Now we select the frame before the last one, here we will prevent arriving to the last frame
when the movie hasnt been loaded completely yet. In order to do this, we chose the action
_framesloaded (loaded frames) and the action _totalframes (total frames) and we indicate in
the actions panel what we want to do.

It would be something like "When the number of loaded frames is greater or equal to the total
number of frames, then we start to play the movie" (although it is theoretically impossible that
total number the loaded frames is greater than the total number of frames, we will include this
condition just in case Flash internally enters frames in a different way). We could write
something similar to what the image shows:
Having this, we cause that the text "load appears in the template and while its
animation plays, we'll be verifying periodically if the main movie is loaded entirely,
if it isn't we'll continue showing the text "load" until the verification that we do in
the last frame indicates that our movie has been loaded. Then, we'll leave the
preload animation junping to the last frame, that contains the action, which will
take to us to play the movie.

And that's all that we have to do to create a preloader (although certainly it can be
made more sophisticated), so that the visitors already will not flee from our Web.

Distributing swf-like file to an autonomous player

In order to be able to distribute movies created in Flash, there are necessary two
actions: to create a SWF file and propose the installation of the Flash Player for someone
who wants to visualize it.

Flash provides several options and functionalities for the creation of a SWF. These
options can be seen in the panel of Publish Settings, to which we can accessin the menu
File Publish Settings (Flash Tab).
Let 's see these
options:

Version: If we want
to publish our movie
so that it is seen with
previous versions of
Flash, we must select
here the desirable
version.

Load Order: Here

we indicate the order
in which we want the
document to be
loaded.

If we select Bottom
up the content of the
inferior layer will be
loaded firstly (from the
layer 1 until the last
layer that we have in
the document).

By the opposite, if
we select Top down
first the content of the
superior layer will be
loaded (from the last
layer that we have in
the document until the
first layer).

This command is
important due to the
fact that the Flash
property is
reproducing the movie
as far as the objects are
loaded. Thus, we are
interested that some
objects appear before
others.

ActionScript
Version: The use of
ActionScript 2 will
allow us to use the
new features relative
to objects, classes etc...
If our movie uses only
simple actions we can
leave in this tab the
option ActionScript
1.0

Generate size
Report: We've used
this option in the
previous section. If we
activate it, a text file
with a detailed relation
of the document size
will be created.

Protect from
Import: Activating
this checkbox we'll
obtain that when
another user (or we)
wants to import it we
cant or must introduce
a password if some has
been chosen.
Omit trace actions: The trace actions are used to verify the correct operation of the
movie during the creation of this (during the tests).

Debugging Permitted: It allows that file SWF can be debugged. It also demands the
introduction of a password since a permission of the creator is necessary to Import the file
and debug it.

Compress movie: Compress the movie as much as possible.

JPEG Quality: If we haven't indicated a concrete compression in the bitmap properties

panel, here we can determine its compression degree, that will determine the space token
in memory by this type of images. The greater compression, the lesser space in memory
that the image will take, but its quality also will be smaller.

Establish Audio Stream or Audio Event: This option allows us to access to the Panel
"Sound Settings" from where we can set characteristics for each type of sounds.

Override sound settings: Having this the selected compression levels for each sound
file of our document will be overrided.

To understand better this concept we recommend to you to do the Exercise Publish SWF

Ejercicio. Unidad 16. Publish SWF

Objective.

Learning to publish a Flash movie as an independent SWF file, is just learning to set
the publish options .

Exercise step by step.

We'll start from an already created document. Let's choose one that contains Bitmaps of
JPG type.

1 We access to the menu File Open and we open the file in question .

2 We open the library of the document by Window Library.

We'll reduce the quality of the bitmaps.

3 We select each JPG file at our disposal by right clicking them, and chose the option
Properties.

4 Let's go to the menu File Publish Settings to open to the window Publish Settings.

5 Open the tab Formats and deselect the HTML tab, because we are not going to use the
movie via Web.

6 Open the tab Flash.

7 In the first option Load Order, we plan to remain the default value: from Bottom to
Up, so that it loads the first layers.

8 In the sliding bar JPEG Quality we set value 0 to reduce the quality to the minimum
value.

We plan to protect it from being imported

9 We mark the chekckox Protect from Import and we introduce in the field Password
the password that we want.

10 We press Publish.

11 Access to the Flash directory where SWF file has been exported and execute it.

Verify that the quality of the images is not good.

12 Now we open the menu File Import and select the file that we finished publishing.

Verify that it requests the key for us to be able to do it.

Now we have a movie that will not be imported and whose space in memory is smaller
due to the smaller size of its bitmaps

Unit 17. Introduction to ActionScript 2 (I)

What is the ActionScript?

The ActionScript is the programming language that Macromedia Flash has used from
the very beginning, and that Flash 8 uses too. In general, we can say that the ActionScript
will allow us to make everything what we propose with Flash 8, since it gives absolute
control over everything related to a Flash movie, absolutely everything.

However, in these two themes we are only going to see a small introduction to
ActionScript that will serve to set the bases that will allow us to begin working with
ActionScript. Teachinfg programming with ActionScript would require another complete
tutorial. Refining the understanding of this language is up to the reader. We recommend to
follow the wonderful Help included in Flash 8.

All that belongs to this chapter makes reference to 2nd version of ActionScript, the latest
version of this programming language presented by Macromedia and later incorporated in
Flash MX 2004.

General characteristics of the ActionScript

As we've already commented, the ActionScript is the programming language

typical for Flash, like Lingo is for Macromedia Director, for example. The ActionScript is
based on the ECMAscript specification ECMA-262, as other languages like Javascript.

The ActionScript is, as its name indicates, a scripting language, this means that
to obtain results the creation of a complete program will not be necessary, normally the
application of ActionScript fragments code to the existing objects in our movies allow us
to achieve our objectives.

The ActionScript is a programming language oriented to objects (OO), and

therefore has similarities with languages such as the used in Visual Microsoft BASIC,
Borland Delphi, etc... although, evidently, it does not have the power of a language purely
OO derived from C or Pascal like the previous ones, each version approaches more to a
language of this type. The version 2.0 recently released in Flash MX 2004 is more
powerful and "is more OO" that its previous version 1.0

The ActionScript is very similar to the Javascript; if you know Javascript, the
syntax and the style of ActionScript will seem imediately familiar to you. You can find the
differences between both languages in the help that accompanies Flash.

In most cases, it will not be necessary "to program" indeed, Flash places at our
disposal an impressive collection of "functions" (we'll understand soon functions as
ActionScript code that makes a certain function) already implemented that do what we
looked for. It will be enough to place them in the suitable place.

We are going to see many of these functions in this tutorial, but before we recommend to
assimilate well certain concepts related to programming. For it, take look our basic theme
.

The Actions Panel

In Flash, the Actions Panel is used to program scripts with ActionScript. It means, that everything
what we introduce in this Panel will be reflected later in our movie. We must know clearly from the
beginning that the Actions Panel can make reference to Frames or objects, so that introduced
ActionScript code will affect only to what is refered in the Panel. For example, in the below image, it is
possible to distinguish that the Actions Panel refers to Frame 1 of the Layer 1.
The Actions Panel is divided in 2 parts, on the left we have a help facilitated by Flash that gives us
access fastly and very comfortably to all the actions, objects, properties etc... that Flash has predefined.
These elements are divided in folders, that contain more folders classifying effectively everything what
Flash places at our disposal. To insert them in our script it will be enough to double click the chosen
element.

Later we'll see in detail the different elements from this Panel.

On the right side we have the space to place our script, here will appear what we are inserting. It also
includes utility tools, like the search of words, the possibility of inserting break points, the tool to
Review Syntax and the Flash help for ActionScript.
The Actions Panel of Flash 8, in contrast to the one Flash MX 2004 one, has two
edition modes, so it has much more in common with the Expert Mode of Flash MX
and its Wizard Mode.

This freedom type is total in the Expert mode and therefore, it is also the possibility of
commenting errors to ensure that our script is correct, while entering Expert Mode an icon
will appear as: When pressing it Flash reviews our code looking for possible errors,
indicating us, in its case, the line that presents the error and in what it consists.

It is a common error to waste hours looking why our movie is not working correctly while
the reason is that a syntax error disabling all the code existing in a frame, that acts like if
there were no CODE in it. Lets keep in mind this and review the code conscientiously.
The uso of the Assist mode is much more simple. To use it press the Script Assist button and select the
commands in the left that you want to include. Their options will be displayed on the right and you only
will have to fill them in order of the command to work propperly.

Even though it is recommendable to check the code so we get used to it and then will be a matter of time
you could write your own code without the assistant.

Unit 17. Basic Level. Initial concepts of Programming

Introduction to the Programming with

ActionScript
We've catalogued this theme as "basic", but the suitable word would be "necessary".
Although the objective of this theme is not teaching programming, we can't overpass
certain concepts related to it; they must be known to be able to understand the
ActionScript. Then, we are going to explain some fundamental concepts, necessary to
approach the programming by ActionScript.

Script: Code written in any programming language that implements a certain task. For
example, to go to the next frame when pressing a Flash button, the necessary ActionScript
code is a script.

Variable: We are going to explain the interpretation of the variable term in

programming by a simple example.

If we have the expression: x = 3;

We have that x is a variable that takes the value 3. It is called variable because it can
change its value at any moment during the execution of our Flash movie. All the data,
which are normally handled are variables (except some constants, for example, the
number 3). So, in this way, a name is a variable (of a string of characters type), a last
name would be also a variable, as well as the address, the telephone etc...

Expression/Sentences: Set of operators, constants, variables or actions. They cause a

determined result or a certain action and ALWAYS must be ended by ';' (point and
comma).

Function: A function is a portion of code that has a certain name and that does a
concrete operation. For example, the following definition of function:

function IncreasesX(x) {

x = x + 1;

In this function we take the variable value "x" and add "1" to its value. If we want to
execute it in some place of our movie, it would be enough to write:
"IncreasesX(variable)".

The definition of the function (that is the code shown above) must be written BEFORE
calling it.

Action: Flash calls Action to the built-in functions that do not need predefinition to be
used. Therefore it is enough to write the call to the function. These actions will be used
mostly because they are extremely easy in use and very powerful. The actions appear in
the Panel Actions and they can be inserted in our code by a simple click of mouse.

For example "gotoAndPlay(3)" is an action that causes that Flash starts executing the
frame 3.

Now that we are familiar with the function definition, we'll also have to understand, that
Flash has defined somewhere the function "gotoAndPlay" (as we have done previously
with the function "IncreasesX") and written a code that causes the commented effect.
Luckily all this has not to worry us, Flash is in charge of everything. It is enough to know
the actions and how to use them.

Parameter: A parameter is a variable that is an input or an output for an action or a

function. See an example to clarify this definition:

We have the following definition of function:

function Sum5(p_input, p_output) {

p_output = p_input + 5;

Let's imagine that we have a variable x that it is equal to 7 and another variable y that we
want to be equal 7 + 5. We would execute the function "Sum5" in the following way:
Sum5(x, y). We are going to see what exactly makes the function with the parameters x
and y.

When executing "Sum5(x, y)", Flash searches for the function definition that are called
Sum5, it will immediately find the definition that we've written above, (that must be
written in some part of our movie BEFORE the execution of "Sum5(x, y)"). When it is
done, Flash verifies that the executed function COINCIDES with the head of the
definition; this head includes the name of the function and all that comes with the
parenthesis. In our case, the head would be "Sum5(p_input, p_output)"

The NAME of the function and the number of parameters MUST coincide, these ones will
be variables or values separated by comas.

As we have 2 parameters in each side, everything coincides and is passed to execute the
function. The executed function will be "Sum(x, y)", and so its execution will be:

function Sum5(x, y) {

y = x + 5;

After executing this function, y will take value of x plus 5. That is just what we wanted.

The variable 'x' has acted as an input parameter, because it contributes a data to the
function, the value ' y starts being passed into the function, but it is an output parameter
because of being modified INSIDE the function and then returned back.

Object Oriented Programming (OOP): ActionScript is an OO language; this means

that the information is organized in groups designed as classes. When we want to use a
class in our movie, we use an instance of it, named OBJECT. The objects, and thus, the
classes have Properties (characteristics) and Methods (behaviors). Let's give 2 examples
to clarify this:

- The Person object has:

- Properties: Name, age, height...

- Behaviors: speak, run, jump...

- the Movie Clip object has:

- Properties: color, width, height...

- Behaviors: gotoAndPlay, Stop, Play, LoadMovie...

Obviously the first object is just didactic; the second object is an object of Flash, and
probably the most important...

We can find the objects also in the Actions Panel, its use is easy. Let's see an example:

We have the object Clip1, that is an instance of the MovieClip Class and so far, it has the
same Properties and Methods.

- Clip1._height = 20;

With the previous line, we are saying to Flash that the object Clip1 has a height of 20
(Flash will immediately modify it in the movie). The syntax of Flash establishes that the
separator "._" must exist, it is not worth describing why. It will be always, thus we'd better
remember it.

- Clip1.Play();

This action will implement the Play method, which belongs to MovieClips, and causes the
timeline start from the Clip1. You must notice that here the separator is not "._" but "."

We already know the Flash 8 "basic" concepts. If we think about that, we can modify
the height of a movie object with only 1 line IN RUNTIME MODE (and not while we
created it as up to now).

We will be able to give more live to our animations and to obtain a total interactivity with
the user. We will be able to obtain to a complete multimedia movie!
The knowledge and understanding of these concepts are not a requirement to start
programming with ActionScript, an intuitive programming is a very common practice in
this type of languages.

In this tutorial we recommend to know what is being made at each moment and what
every item means; the results will constantly justify the initial effort during our learning in
ActionScript, with clear understanding all the above and some work, we will soon become
expert programmers and then the intuition will stop being useful...

Unit 18. ActionScript Examples (I)

Examples of use of the ActionScript code

We are going to show the most characteristic uses of code ActionScript in the different objects existing in
understand it better and why not: well save much effort having many of the already prepared codes here to u
guarantee that they actually work). Well show the code and next, its explanation.

ActionScript Code in BUTTONS

The Buttons (Button object for Flash 8) are always very helpful when we want
our movie to interact with the user.

All the codes shown in this section MUST be inserted inside of the Button's type
object (Button) which we are working with. For it, we'll select this button and later
we will open the Actions Panel, making sure that this does reference to our
button.

Let's see some of them:

on (release) { Example of the
started from a m
gotoAndPlay(15); action stop() pla
We've placed th
} the Frame 15".

This action causes that when releasing a button we go directly to the Frame number 15 of
our movie.

The first line indicates to Flash that releasing the button" will do what is between the keys
"{...}".
This code is characteristic of the buttons and allows us to control the pressing. Depending
on what we place between the parenthesis, the action associated to the button will take
place in one or another moment. In this case, we have written, "release" that means that the
action will take place, after pressing our button and releasing it.

The second line is the action that will be taken place. In this case the Flash reading head
will move to the frame 15.
on (release) {

getURL("http://www.teacherclick.com", "_blank");

This action causes that by releasing a button a new Web page opens in o
displays the page www.teacherclick.com .

The first line has the same function that in the previous case

The second line is the call to the Web browser itself. The parameters ind
want to show and the window mode that the Web page will contain. In t
window of the present one will be opened.
on (release) {

r1._width=350;

This action causes that by releasing a button the object properties are modified.

The first line has the same function that in the previous case

In the second line we can see the property ._width (width), soon this call is going to access to this property.
We see that there is an operating assignation (=); we are going to assign a determined width to an object.

So by releasing the button we are going to modify the width of the object r1, that will be of 350 px.

ActionScript Code in MOVIE CLIPS

The Movie Clips (MovieClip object) are movies inside of movies. They can
have AS code within themselves (like the buttons), although usually some other
external code (located in frames) makes reference to them. To make the code
contained in movie clips valid, these must have some clip-associated event (Load,
KeyDown etc) that determines when this code will be executed (when loading the
clip itself, when pressing some key...)

Let's see some of these codes:

loadMovieNum("teacherClick.swf", 0);

This AS code located inside of a frame causes that our Flash movie looks for a
movie called "teacherClick.swf" IN THE ROOT FOLDER and loads it in the level
0, that is to say, in the same level that the current movie.

The root folder is the folder containing the main movie (the movie that has this
code).

loadMovieNum("myphoto.jpeg", 0);

This code allows us to load in a frame an image existing in our root folder with
extension JPEG in a dynamic way.

If we had the image in a folder called "Images" inside of our root directory, we
could accede to it in the following way:

loadMovieNum("Images/myphoto.jpeg", 0);

The image must be in format JPEG, the format JPG wouldn't respond to this current
call.
The following action must be included inside of a button, because it'll happen We have a movie with d
when clicking on it (in this way the example is more practical)
There are the button an
on (release) { clip (r1) in the first fram
timeline an animation, i
r1.gotoAndPlay(2); what happens if it is ac

} We aren't concerned ab
frame because the acti
This action causes that by releasing a button we go to the frame 2 of a certain take us up to there. The
Movie clip. The frame of the main movie WILL NOT VARY. movie is INDEPENDEN

The first line is commented previously

The second line is the action that will be taken place. Flash looks for an object
called r1 of movieclip type and moves its reading head up to the frame 2. The
reading head of the main movie is completely INDEPENDENT of the movieclip
reading head and it will not be altered.