INTRODUCTION TO FLASH SOFTWARE

FLASH
Flash is a vector drawing and animation creation software. It also allows for the development of applications.
interactives. Initially appeared under the name FutureSplash Animator, bought by Macromedia and renamed Flash in 1997.
N See the files [Link], [Link], bio_logo.swf in the examples folder

BITMAP VERSUS VECTOR

Avec Flash le dessin se fait en mode vectoriel par opposition au mode bitmap. Il permet également d'importer et de manipuler
bitmap graphics created in other applications. The following table summarizes the differences between vector images
bitmap images.
N See the file [Link] in the examples folder

Bitmap (pixel by pixel) Vectorial

Nature Matrix of points (pixels) where each point Mathematical formula describing the shape,
has a specific color attribute color, spatial location
Magnification effect Change with the enlargement No modification (exact traces)
staircase effect (case of oblique lines)
Retouch Requires the modification of all points Modification is done all at once
that compose an element
Use of layers no yes
Text It's difficult to write small while remaining visible. Readable even when reduced
Weight elevated weak
Conversion vectorial. Possible with software of Bitmap. Still possible but
tracking but more complex and disappointing we lose finesse and precision
Impression This is a screenshot, it uses the definition. Drawing composed in memory, it uses the
from the screen. definition of the printer
Realism Important (see [Link]) Average
Formats BMP, GIF, JPG, TIF, TGA, PNG, PCT WMF, CGM, DRW, CDR, DXF, EPS, AI
Software Paintshop, Photoshop…. Illustrator, FreeHand…

WORKSPACE

Startup
start the Flash software
- inFile > New
Scene: space in which the animation actors (background, character, sound...) are located
Scenario: organize and control the content of layers and images of an animation over time.
It includes the time rule (timeline).

Modification of the workspace

In the menu bar: Edit > Animation
bit rate or cadence: 12 frames per second (for the web)
- dimensions : L:550 X H:400 pixels (19,3 X 14,04 cm) la taille varie de 18 X 18 jusqu'à 2880 X 2880.
- background, select a color of your choice
Display or not the grid and set the spacing and color of the grid.
- adjust according to: allows to adapt the size of the scene to the print area or to the content.

Introduction to Flash 4 Mostafa Kriat. September 2000

THE WORKING TOOLS
Icons and keyboard shortcuts
Hovering the mouse over the icons provides help in the form of a yellow bubble.

ëThe icons on the toolbar all have options that appear at the bottom of the bar (see circle).
Undo (ctrl+Z) Cut (ctrl+X) Copy (ctrl+C) Paste (ctrl+V) Paste in place (ctrl+shift+V)
Grouper (ctrl+G) Convertir en symbole (F8) Insérer image clé (F6) Insérer image clé vide(F7) Test the animation (ctrl+enter)

THE OVERLAYS
These are stackable layers similar to transparent sheets.
They can include actors, but also guides or masks. Two rules must be followed:
create a layer for each animated object
a single layer must not contain a static object and an animated object

Layer manipulation
In the exo folder, open the file [Link]
Rename the three layers to circle, rectangle, and text.
display the text layer
unlock the rectangle layer
disable the circle outline display

ëLocking allows you to display the content of a layer at all times.

by making it inaccessible for writing.

THE TEXT WITH FLASH

Unlike HTML, the choice of fonts with Flash is not limited to the inevitable Georgia and Verdana. In fact, Flash
export the text into a set of outlines independent of the fonts installed on the client machine.

Creation of text objects

open a new file
rename layer 1 to title
select the text tool
In the options, choose the color, the font, and the size.
Type a text of your choice.
save the file under trial1 in your working folder

Text object manipulation

The text object can be moved, resized, rotated like any shape.
Select the text with the arrow
resize the text
- pivoter le texte

ëTo achieve an inclination and not a rotation, you must grasp the central handle.
Text vectorization
After vectorization, the text is no longer editable unless we use the undo command.
vectorize the text previously created by the command Modify>separate
Change the color of a letter with the fill bucket
apply an outline of another color with the inkwell

Introduction to Flash 4 Mostafa Kriat. September 2000

THE DRAWING WITH FLASH
Before drawing and painting, it is important to note that:
When two shapes are superimposed, the part that is underneath is replaced by the one that comes above.
Paints of the same color mix together.
The paintings of different colors remain distinct.

ëPour éviter de modifier des formes et des lignes par inadvertance, regroupez-les ou utilisez des calques pour les séparer.
Shapes with circle and rectangle
draw a blue circle with the circle tool and remove its outline
draw a red rectangle without an outline next to the circle according to the model shown
Choose the eyedropper tool and apply it to the circle

- without changing the tool, click on the rectangle (the eyedropper turns into a fill bucket)
modify the shape to obtain an equivalent drawing to this one

ëTo distort the circle and the rectangle

select the arrow tool
Drag the mouse closer to the shape to be modified until a curve appears. or from an angle
While holding down the mouse button, drag the mouse in a given direction.
save the file as bat

ëTo create a new corner point from a curve, you need to press the control key.
Shapes with lines and curves
draw a cloud with the brush tool
smooth its outline with the smoothing modifier
color the cloud gray
save the file as denuage

Color game
The default Flash palette is the web palette of 216 colors. The other colors are
also available by clicking on the color window button at the top of the palette.
exercise
take back the cloud file
apply a gray color to the cloud with an alpha layer of 60%.
Redesign the bat and create red eyes with a radial gradient.

IMPORTATION OF GRAPHIC ELEMENTS

Flash allows importing graphic elements created in other applications.
images bitmap, images vectorielles et des séquences animées

Retraction of a bitmap image

open a new file
- in file > import
- point to the exo folder and select the image [Link]
select the image and click modify > trace bitmap
re-run the operation with a color threshold of 30
Redo the same work with the image [Link]

EXPORTATION OF GRAPHIC ELEMENTS

Publication of images
In the exo folder, open the file [Link]
define the publication settings in file > publication settings
Check all output format options gif, jpg and png...
view images with image software
open the html file
open the executable and quicktime movie (requires version 4)

Introduction to Flash 4 Mostafa Kriat. September 2000

ANIMATION WITH FLASH
Animation or the impression of animation is produced by displaying a sequence of images at a given rate.
There are two methods to create animations:
frame-by-frame animation: in the manner of a cartoon. It has the advantage of controlling the content of each
image, but it has a major drawback: its weight. In practice, this type of animation is used when objects do not
cannot be generated from the same symbol. Examples: animating a 3D object, a silhouette...
N See the file woman_walking.swf in the examples folder
animation by interpolation
L'interpolation permet de créer une animation à partir de deux images clés: une image clé de départ et une image clé de fin.
Between these two images, the software calculates the intermediate images by interpolating from these two images.
Flash allows two types of interpolation: motion interpolation and shape interpolation.

1- Motion interpolation

The ball that rolls

open a new file
In a layer, draw a rounded rectangle without contours at the bottom exceeding the bounds of the scene.
Place the cursor on image 50 of the time base and click:
Insert > a key image (F6)
on another layer draw a ball with a red gradient
- déplacer la balle à gauche et hors de la scène
Place the cursor on image 50 of the ball's timeline. and
click: Insert > a key image (F6)
bring the ball to the right and off the stage
in key image 1 of the ball click:
Insert > Create motion interpolation
test the animation by clicking: control > test the animation

The realistic ball

Now we will create a realistic trajectory for the ball.
place the cursor on the ball layer and click: Insert > move guide
a new layer is inserted named ball guide
draw a guide using the outline of the slope
ëThe ball must be centered on the guide at the start and at the end of the animation.
- améliorer l'animation en jouant sur la rotation de la balle et les mouvements
of acceleration and deceleration

Zoom on a rotating text that lightens up

In a new file and in key image 1
type a text (e.g. hello)
convert the text into symbols
insert a second keyframe at 30
On key image 1, reduce the text and apply an alpha layer at 0% in the occurrence properties.
apply motion interpolation

2- Shape interpolation
This type of interpolation allows the creation of 'morphing' sequences. Just like for motion interpolation, it is necessary to
a starting keyframe and an ending keyframe, but unlike this one, these objects must not be paths
grouped or occurrences of symbols.

Morphing simple: from the red square to the blue circle

Open a new file
draw a red square in key image 1
draw a blue circle in keyframe 20
Activate the image properties dialog by double-clicking on key image 1.
in the interpolation tab choose: shape.
- test the animation by clicking: control > test the animation (Ctrl + enter)

VMorphing with shape reference

create a similar animation transitioning from the red triangle to a green square.
Abnormal and unpredictable deformations are observed.
To eliminate them, you need to use shape markers by using the command:
Modifier > Transformer > Add shape guides (Ctrl+H)
Place markers on the triangle according to the image on the side.
- place markers on the square according to the image on the side

Introduction to Flash 4 Mostafa Kriat. September 2000

THE SYMBOLS AND THE SYMBOL LIBRARY
To manipulate an object with Flash, it is preferable to make it a symbol. The symbol remains the easiest way to
manipulating objects and several options are only possible with a symbol. A symbol is a graphic (image, a
button, animation, sound) reusable. When a symbol is placed on the stage, an occurrence (instance) of it is created.
symbol. The use of symbols is essential to produce:
small-sized files and therefore usable on the web
simple animations to modify as it is enough to make changes in the symbols for Flash
updates all their occurrences.
The symbols are recorded and organized in the library. Also note the existence of a libraries menu.
containing buttons, graphics and sounds provided with the software.

Creation and modification of a graphic symbol

draw a water molecule
Select the molecule, then choose Insert > Convert to Symbol (F8).
In the Symbol Properties dialog box, specify water as the symbol name, check graphic, and then validate.
chooseWindow > Library to open the library window. You notice that the water symbol that you
you have created appears in the list.
duplicate the symbol several times in the scene by changing the size and rotation.

ë If we compare the files obtained with and without symbols, the size ratio is
4 times weaker in the case of using symbols.

Modification of a graphic symbol

Right-click on any occurrence.
in the floating menu select modify
A new scene appears with the water molecule
apply a different color to the oxygen atom
return to the main scene by clicking on scene 1
What do we notice?

Creation of an animated symbol (movie-clip)

From the previous file, copy an instance of a water molecule and paste it.
in a new file
Right-click on the occurrence
In the floating menu, select properties.
check animation clip and validate
then modify the symbol to obtain a rotating water molecule.
Use the knowledge gained on motion interpolation.

Addition of buttons
Take back the animation of the rolling ball
We want to associate two buttons with it, a stop and a play, allowing control of the animation.
copy the button of your choice in the library menu > buttons
place the buttons on a distinct click
Right-click on the button and select occurrence properties > actions
on the + tab and select play
do the same thing for the second button with the stop action
test your animation.

N See the file [Link] and its source file [Link] in the examples folder.

Introduction to Flash 4 Mostafa Kriat. September 2000

INTERACTIVE ANIMATIONS
An interactive animation involves user participation through the keyboard, mouse, or both.
The creation of interactive animations requires the definition of actions (Appendix 1) that can be associated:
either to buttons (see the animation of the rolling ball) triggered by the user.
either to an image and sent directly to the reading head through the time base. These actions are
triggered when the reading head reaches an image and allow for passive control of the animation.
The actions are defined in the Actions tab of the Properties dialog for a button or an image.
Actions can consist of one or more instructions or correspond to a series of instructions with loops and
conditions.

Buttons in action
Creation of a button
draw a circle and convert it into a button symbol (F8) and check Button in Behavior
Right-clicking the new icon allows access to the Edit menu
We access a new scene nested within the main one;
change the appearance of the button in the four states
check the button's operation by testing the animation.

ëIn this new scene, it is necessary to define the appearance of the button featuring four states:
Skin: represents the normal appearance of the button when the pointer is not over it.
Hover: represents the appearance of the button when the pointer is over it.
Pressed: represents the appearance of the button at the moment of the click.
-Click: defines the sensitive area that reacts to the mouse. This area is invisible in the animation.

Adding a sound to a button

First, you need to choose a sound from the library or import it from another folder using the command:
File > Import
In the libraries menu > sound, choose a sound (you can test them with the play button)
Select the created button (you can also access it through the library window)
chooseModify to access the scene symbol
add a sound layer to the scenario
In this layer named sound, create a keyframe corresponding to the lowered state.
position the cursor on this image
drag the sound from the library to the stage
return to the main scene and test the animation.

2- Images in action
Il s'agit d'affecter une action à une image-clé de la base temporelle pour que l'animation exécute une opération lorsqu'elle
reach this image. Image actions must be placed in a separate block.

Preloading loop
Analyze the animation terror. In the examples folder.

INTRODUCTION TO ACTION PROGRAMMING

So far we have seen the construction of simple actions associated with buttons or images, this last paragraph
I addressed the programming of actions under Flash.

Modification of a movie clip's property (Get Property, Set Property)

Examine the animation [Link] and its source file [Link]
The fish undergoes a rotation of 10 pixels with each mouse click. The button has been programmed as follows:
Set Property ("/p", Rotation) = GetProperty ("/p",_rotation)+10
set property: allows you to modify a property of the occurrence
get property: allows to retrieve the concerned property
- "/p" désigne le nom de l'occurence

Using a variable (Set Variable)

Examine the animation [Link] and its source file [Link]

Introduction to Flash 4 Mostafa Kriat. September 2000

MOUSE EVENTS
The insertion of a button action generates a mouse event that is used as a trigger for the action.
The Flash software has a series of additional events to replace the default 'click' event.
To modify the mouse events, you need to highlight setOn().

Press: the action occurs if you press

with the mouse

Release the action if you press with the

mouse and then you release (standard click)

Release outside: the action occurs when

you release outside of the button

Roll Over: the action occurs when the pointer

hover over the button (very sensitive attention)

- Roll Out: l'action se produit quand le pointeur quitte

the button.

Hover: the action occurs when the mouse button is pressed over the button, it leaves
then return above the button.

- Dragging away: the action occurs when the mouse button is pressed and moves over the button and the
quits.

Touch: the action occurs when the specified keyboard key is pressed.

N see the file mouse_event.swf in the examples folder

THE ACTIONS
The instructions that can be associated with images or buttons:

Instruction actions Settings

Go to and stop allows direct access to a - Scene: refers to a destination scene
image or a specific scene in a - Image: specifies an image in a scene
animation. control: Go To and Play
allows you to upload a document from - URL: refers to the address (absolute or relative)
from a specific URL in a document window
Get URL particular - Window: refers to the window where the
must be loaded
Variables: determine whether to use GET or
POST to send the forms
allows executing animations - Action: determines whether to load a
additional without closing the Flash animation, unload an animation
Load Movie Player you charger of the variables.
URL: refers to the (absolute or relative) address
the swf file
Location: specifies a level or a
target. The main animation has the
level 0. The animations are then "
stacked in the upper levels
(1,2…)
allows you to take control of a clip - Target: indicates the scenario that needs to be
different animation or another controlled.
Tell Target animation. It allows you to create
nested objects, dropdown menus,
switches..
Allows checking if the content of a - Scene: refers to a target scene
specific image is available. It - Image: specifies an image in a scene
If Frame Allows you to create a sequence of
Loaded preloading (loading in progress,
patience !

allows to move an animation clip - Start drag action: starts the

Drag movie clip while the animation is in progress. you clip of animation
execution

Introduction to Flash 4 Mostafa Kriat. September 2000

PUBLICATION AND INTEGRATION OF ANIMATIONS IN A WEBSITE
Unlike standard web media, text and image, the shockwave, derived from a flash animation, does not
part of the formats recognized by default by all browsers (Except for the latest versions of IE). As a result, reading
animations require a Shockwave Flash module (plug-in) designed and distributed for free by Macromedia. The
The latest versions of Quicktime and Real Player support animations in Flash format (.swf).
The Shockwave module manages the loading of the animation and its display in continuous streaming; this means that the
The browser starts playing the animation before it is completely loaded on the client side.
In addition to the Flash Player format, you can export static or animated images from Flash in various formats: GIF,
JPEG, PNG, BMP, PICT, QuickTime, and AVI.

1- Optimization of animations before publication

In order to reduce the download time, it is necessary to optimize the animation by following the instructions:
Use symbols for any element appearing more than once
Whenever possible, use interpolated animations.
Avoid dashed lines, dotted lines, or unjustified lines.
Use different layers to differentiate between animated elements and static elements.
Limit the number of fonts and font styles
MP3 is the smallest audio format, use it as much as possible.
Avoid animating bitmaps; use them as static elements or backgrounds.
Group the items as much as possible
Use gradients sparingly

2- Exportation and publication

To publish a Flash animation, there are two commands accessible via the File menu. The Export command
the animation and the Publish command.

VExportation
Export the animation [Link] in the formats of your choice using the command File > Export Animation
The formats obtained by the export command.
Animation Sequence of images
Gif Sequence (.gif)
Shockwave (.swf) Adobe Illustrator (.ai)
QuickTime (.mov) JPG sequence (.jpg)
Window AVI (.avi) BMP sequence (.bmp)
Animated Gif Sequence (.gif) PNG sequence (.png)
FutureSplash Reader (.spl) WMF sequence (.wmf, PC)
PICT Sequence (Mac)

ë PNG is the only multi-platform bitmap format that supports transparency (such as Alpha Channel).

Publication
Before publishing, we must specify the types of files to publish via the Publishing Settings command in the File menu.
By default, only two options are checked: the Flash format (.swf) and the supported Html page.
- publish the animation [Link] in html, Quicktime (.mov), Windows projector (.exe), Mac projector (.hqx).

ëThe Quicktime format is only obtained if you have version 4 of the software.
3- Test the loading of the animation
Test
Before uploading the animation to the web, it is recommended to test the download speed using the tester.
bande passante.
- choose Control > Test the scene or Control > Test the animation
Select a speed the modem speed to test: 14.4 Kbps, 28.8 Kbps or 56 Kbps
Choose Display > Bandwidth Tester to view the download performance graph.

REFERENCES
Flash 4.0 version help
- Macromedia Flash 4. Mathieu Lavant. Collection L'expert de Sybex. 1999
- Flash 3 (Flash 4). Osman Eyrolles Multimedia. 1998 and 2000
- [Link](fr)
- [Link]/[Link] (fr)
- [Link]/flashtv/(fr)
- [Link](fr)
- [Link](Ang).
- [Link](Ang)
- [Link](Ang)

Introduction to Flash 4 Mostafa Kriat. September 2000