Adobe Flash Student Handout

GETTING STARTED
WHAT IS FLASH?
Flash is a multimedia graphics program specially for use on the Web Flash enables you to create interactive "movies" on the Web Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality Flash does not require programming skills and is easy to learn

ADVANTAGES OF FLASH 8
Attractive Designs: Flash 8 allows the using of visual effects that will ease the creation of animations, presentations and forms more attractive and professional. Moreover, it supplies a new set of tools that will help you doing this easily and faster, such us filters and blend modes, added in this version. Font Optimization: It also includes some readability options for small sized fonts, what makes our texts more comfortable to read. Also you can edit this optimization, allowing you to select the configuration preestablished for dynamic and static texts. Consolidated Libraries: Now you can search any object existent in our movies faster, browsing our open libraries from a single panel. More powerful animation: Flash 8 allows much more control of the interpolations setting a new edition mode form which you will edit the velocity the rotation, shape, color and movement are applied. More powerful graphics: Avoid the unnecessary representation of vectorial objects setting an object as a bitmap. Although the object is converted to a bitmap, the vectorial data remains the same, so, in every moment, you can convert it again to a vectorial object. Improvements in video importing: To ease the working with video formats, Flash 8 provides highquality new independent codec, completely skinnable. Metadata Compatibility: Include your SWF files in searching engines defining a title, description and/or keywords. Mobile devices Emulator: Preview your Flash Lite compatible mobile devices movies oriented with the new emulator Flash 8 includes. ActionScript Wizard: The ActionScript Wizard has come cack. Was deprecated in the last version, but now it has been retrieved and improved. Now ActionScript is at your reach.

The Eternal Deal

The first problem is the compatibility with FLASH. Along with some browsers that do not support javascript or cannot see contents of DHTML (or including CSS), in order to see, FLASH has to have an special PLUGIN of Macromedia. A PLUGIN is an special program that let's your browser identify the FLASH movies, download and visualize them correctly. This PLUGIN is free. Fortunately, each time more browsers have incorporated it and each time more people know
Divine Word College of Legazpi Page 1

what it is and are not afraid when it is offered to them. So far, each time more people have this PLUGIN. The second problem is the size of the movies and their download time. Whereas an HTML page can size about 10 KB on the average, a FLASH animation sizes much more. Evidently it depends on the contents, but usually it easily exceeds the 100 KB, and in addition if it incorporates sounds it is obvious that the number drastically increases. So the time that it takes to make the Flash contents visible is still greater and not all the visitors are ready to wait ... they just go to another page. On the other hand, the wide bandwidth connections each time become more numerous. That eliminates the problem of the downloading time. But the day when all the people are connected to the high-speed internet is still far away so the debate will continue being open for a long time.

OPENING FLASH

1 1. Press Windows button to open Run window 2. Type flash 3. Click Ok +R

2 3

EXPLORING FLASH
THE START PAGE
Also called as the WELCOME WINDOW. It first appears in the stage area when you first open Flash. It presents you some common options (like Create new files, open existing files, templates, or open the Flash help system) you can click before starting a flash project.

D
A Lists down recent projects B Choose different flash document types C You can also create flash files from a template D Check this box if you dont want to see the start page next time you open flash

FLASH WORKSPACE
Also called as FLASH WORK ENVIRONMENT.

Menu Bar The Menu Bar is aimed to make easier the access to different program features. It is similar to any other web or graphic designer program, although it has some particularities. Let's see the main Submenus you can access to: File: It allows creating, opening and saving archives Import has exceptional power; it inserts to the current movie nearly all types of archives (sounds, videos, images and even Flash movies) or the Publication Settings option from which you can modify the characteristics of the publications. It also enables to configure the printing pages, print them, etc Edit: It is a classic menu that allows you to Cut, Copy, Paste objects or as well images or frames; it also allows you to customize some of the most common options of the program. View: Apart from, typical Zooms, it allows you to move the frames and scenes. It also includes the possibility to create a grid and some guides. These ones can be selected from submenu Grid and Guides from where you can configure its options. Insert: It permits you to insert objects into the movie, as well as new frames, layers, actions, scenes

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 Timeline

The Timeline represents a simple mode of visualization. It consists of two parts: 1) The Frames that are limited by vertical lines (forming rectangles) 2) The Numbers of frames that allow us to know the assigned number of each frame, its duration and when it will appear in the movie. Moreover, there are some tools on the bottom to work with Onion paper and its information about the Number of current frame (1 in the image), the frame Speed (12.0 in the image) and the Time of the movie (0.0 in the image).
On the definition level, the Timeline represents the succession of frames in the Time. The Flash movie will not be only the frames that appear on the Timeline one after another in the order established by the same Timeline

The Layers

The concept of the Layer is basic to manage Flash efficiently. Because of its importance we will dedicate an entire unit to it. Even so, let's see a great characteristics of the layers. A Layer could be defined as one independent movie of only one level. That is to say, one layer contains its own Timeline (with endless frames) The objects that are at one Layer share a frame and due to this fact they can "get mixed up" among themselves. Frequently it could be interesting, but other times it is convenient to separate the objects in order that they do not interfere among them. For this, we will create as many layers as necessary. Furthermore the use of many layers gives place to a good-ordered movie and of easy use (for example, it is convenient to fix the sounds at one independent layer called "Sounds"). The Working Area The Working Area consists of numerous parts, let's see them: The most important part is the Stage, we will draw and fix different elements of our movie. The Stage has very important properties, due to the fact that they coincide with Document Properties, in order to access them, right-click on anywhere on the Stage with no objects and then on Document Properties: Add metadata to your files so they can be indexed in the search engines. For this fill the Title and Description fields. Dimensions: They fix the size of the movie. The smallest size is of 1 x 1 px (pixels) and the biggest one is of 2880 x 2880 px. Match: It causes the coincidence of the movie with the selected size Background Color: The color selected here will be the one of the entire movie. Frame Rate: Or the number of frames per second that appear at the movie. Ruler units: Unit used to measure the quantities. Make Default: Allows to store the properties of the current document and to apply them to all the new created documents from this moment. These properties could be changed from this panel whenever you wish them to.

The Panels The Panels are command sets grouped according their function (for example, all that makes references to the actions, will be in the "Actions" Panel). It's mission is to simplify and facilitate the commands use. All of them will be studied deeply during the course. Even so, we'll name them and summarize the functions of most of them. Align Panel: It places the objects like we indicate to it. It is very useful. Color Mixer Panel: Using this panel we'll create the colors that we like more. Color Swatches Panel: It allows us to select a color quickly and graphically. (Including our creations). Info Panel: It shows the size and the coordinates of the selected objects, with the possibility of modification. It is very useful for exact alignments. Scene Panel: It modifies the attributes of the scenes that we use. Transform Panel: It scales, shrinks, rotates... the selected objects Actions Panel: It is very helpful when you use Action Script and associate actions to our movie. Behaviors Panel: They allow one to assign to certain objects a series of characteristics (behaviors) that later could be stored to be applied to other objects fastly and efficiently. Components Panel: It allows us to access to the already constructed and ready to be used Components that Flash provides. The components are "intelligent" objects with characteristic properties and many utilities (calendars, scrolls etc...) Strings Panel: Flash 8 contributes multi-language base to our movie through this panel. Help Panel: Macromedia gives us help and accessible advises from this panel.

Properties Panel: With no doubt it is the most used panel and the most important. It shows us the properties of the object selected at this moment: border, background color, line type, characters size, typography, objects properties (if there are interpolations...), coordinates, size etc... It is fundamental, you must never forget about it. Movies Explorer Panel: It allows us to access to all the movie contents easily and quickly 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: next theme. Oval Tool: Rectangle Tool: create. It creates a text in the place where we click. Its properties will be shown in the

The Oval Tool enables drawing circles or ellipses in a fast and simple way. Its handling is identical to the Oval Tool, they only differ in the objects they

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: polygon shapes. It allows you to select

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:

Color Mixer Panel:

In order to select a color, just click on the tabs that are close to the icons of the Pen Tools or Paint Bucket. (If we want to modify the color of a border, we press on the tab that is closer to the icon of the Pencil Tool and if we want to modify a filling, we click on the tab that is closer to the Paint Bucket Tool). By doing this, a Panel with many colors will appear. Select one of them. It also allows to introduce the code of the color according to the standard established by HTML. The filling type that we'll apply to the created objects also can be determined. We can create differentes types of Fills Solid Fill: It consists in a filling formed by a single color. Linear Gradient: It is a special filling type, a color does a gradient until it converts into another one. It can shade from top to bottom or from one side to the other. Radial Gradient: It is identical to the previous one, but the gradient shade performs a circular pattern. Bitmap: It lets you put an image existing in the movie as filling (you can even import it in that precise moment).
Color Swatches Panel

The Color Swatches Panel allows to see the arranged colors in a quick and easy way, solid colors (only one color) as well as linear gradients or radial gradients. Moreover, when we create a color with the Color Mixer Panel, we can add it to our set of swatches by Adding Swatch (that is in a menu, which is open in the right top of the Color Mixer Panel). Once the color is added, it

will be in our set of swatches, and we can quickly access to it each time while working in our movie. Every movie has its own set of swatches and each time we open it we can use the swatches we had the last time we worked in the movie. The Objects. Starting Independently of our working with animation, at the web page, at the catalogue for CDRoms or in any other place, we will have to work with objects. In general, we would consider everything that appears and is visible in the movie as an object, hence, we could work with it; for example, an object could be any image, which we create or import, a button, a drawing created by ourselves etc... The objects that are considered in this way have 2 fundamental parts: The Border: It consists in one thin line that separates the object from the exterior part of the stage. It could exist or not, depending on what is convenient for us. When we create an object, the border is always created and its color will be indicated in the Outline Color (inside of the Color Mixer Panel). If we want to draw and create Borders we must use the Pencil Tool, Line or Pen and if we want our drawing without border, it will be enough to select the border and delete it. The Fill: The Fill is just the object without border. So far it is the interior part of the object. Its existence is also arbitrary, because we can create an object which interior color is transparent, it will seem that this object has no fill, although, in fact, it does exist but it's transparent.

Select

In order to work with objects, it is fundamental to know how to select the object part that we want to modify (move, rotate, change the color...). We can observe that the selected object parts take an appearence with a texture to indicate that they are selected.

Let's see how we can select different object parts: Select a Fill or a Border: It is enough to click Border and Fill once. Select the Fill and the Border: Double click the Fill. Select all the borders (or lines) of the same color that are in contact: Double click one of the lines that have the color you want to select Select a Symbol, a text, or a group: Click the Symbol in the text or in the group. This types 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. Aligning Objects. Align Panel Now that we know how to select the objects or their parts, let's see how to align them to the Stage. In order to align them precisely, Flash provides us with the Align Panel. We can find this Panel in the Menu Window Align. It works this way:

The Align Panel allows us to align the objects just as we indicate. Before considering the possibilities, we must emphasize the option To Stage. This option allows us to indicate all the positions that must have each object at the stage

If this option is not selected, the objects will take the reference form the group of objects they are at, and they will align themselves taking into account those ones. The most usual selection is To Stage, to align the objects in the center of frame depending on the movies limits... Let's learn in details the Align Panel and its possibilities Align: It aligns the objects in a determined frame position (if Stage is selected). The different options affect all the selected elements and they are frequently used to align selected objects to the certain places. For example, if we want to align an object to the left bottom corner, it is enough to press the 1 and the 6 button one after another.

Distribute: It aligns the objects on the stage taking into account the imaginary axis that passes through their centers, so that the distribution become uniform. For example, if we have 2 squares and we press the first left button. Each one of the 2 squares will be situated on one of the movie edges (one on the top and another on the bottom).

Match Size: It makes the object's sizes match. If the "To Stage" is active it will stretch the objects up to make them match the movies width and length. If it is not active, the rest of objects will be the reference. For example, if we have 2 different squares and the option "To Stage" is not active, when you click the first "Match Size" button, the most narrow square will have the width of the biggest square. If "To Stage" were active, both squares would have the frame width.

Space:

It spaces the objects uniformly.

Apart from controlling the object position from the Align Panel, we can also do this, more precisely (more mathematically) from another panel, the Info Panel. You can access to this Panel from the Menu Window Info. The possibilities of this Panel are limited, but if we are searching for precision or we don't trust Flash distribution, we might use it.

Object Sizes: Here we will introduce a number that represents the size of our object in the dimensions selected in the Document Properties dialog box. W: is the width H: is the height. Object location: From here we control the location of the object on the stage. The X and the Y represent the axis of coordinates (The X is the horizontal axis and the Y the vertical axis). The measures are also adapted to the movie size. Current Color: Indicates the current color depending on the quantity of Red (R), Green (G), Blue (B) and Alpha effect (A) that it has.

Its sign could be deceitful, because it indicates the color of the object when we touch it with the mouse. So far, we can have selected object (by clicking it) and see in the Information Panel its size and position, but when the mouse is moved the value of color will change and will not indicate the color of selected object, but the color of the object that the arrow is touching now. In order to save time don't forget about this. Cursor Position: It indicates the Cursor's position. It's usefull if we want something to occur in the movie after crossing with the determinated cursor position or to align object parts in specified places. What are the symbols? The Symbols come from objects that we've created using the tools that Flash 8 provides us. When transforming these objects into symbols, they are included in a library at the moment of creation that allows us using them on several occasions, either in the same or another movie.

How to create a symbol Creating new symbol is one of the most used actions in Flash since it's one of the first steps to create an animation, how we'll see further. The procedure is the following: We select the object that we want to convert to a symbol. We open the dialog box of Symbol Properties, acceding to the menu Insert New Symbol or just by pressing Ctrl + F8 or F8.

Once done it will appear a window as the one of the image. We introduce the name of the symbol, which we are going to create. This is at the beginning and while we have few symbols it is not very important, but further it will be helpful for referring to the object. The only that remains is to select the type of symbol or behavior into which we convert our object. We can choose between Movie Clip, Button and Graphic.

Types of Animations in Flash

Frame-By-Frame Animation

Frame-by-frame animation is the way cartoons have been animated since the early days of animation. Using this method, the animator draws a figure or scene one frame at a time, drawing slight differences between each frame. When the frames are then viewed in rapid sequence, the differences between them create the illusion of change or motion. In Flash, animators impose frame by frame animations over still images or other types of animation to avoid redrawing an entire scene for every animation frame.

Motion Tween

Motion tweens transport a still object across a scene. In Flash, an object is animated this way by selecting its start position and first animation frame as well as its end position and last animation frame within the program. When run, the animation displays the object in a different section of the scene for each frame, creating the illusion of motion. Motion tweens are also used to move background images, which creates the illusion that still images in the foreground are in motion. Motion tweens also move two or more objects in a scene relative to each other. This simulates changes in perspective, camera angle and camera distance from the focal point of the scene.

Shape Tween

A shape tween changes the shape of an object over a series of frames. In Flash, this is used to accomplish a number of effects. Notably, shape tweens are used to animate opening and closing mouths or blinking eyes. Melting ice cream is created using a shape tween, as are expanding liquid puddles and other similar effects. As with motion tweens, shape tweens are accomplished by placing one shape in one animation frame and another shape in a subsequent end frame. When the animation is played, Flash generates a shape somewhere between the other two in each intermittent frame, creating the image of a smooth transformation between shapes.

SAMPLE ANIMATIONS
CREATING A FRAME-BY-FRAME ANIMATION
Step 1: On the START PAGE, select Flash Document under Create New menu.

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

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

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

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

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

Step 7: Change the object slightly again.

Step 8: Repeat steps 6 and 7 until you have created your desired keyframes in the Timeline and the object is in position of your desired location at the stage.

CREATING A MOTION TWEEN ANIMATION

Step 1: On the START PAGE, select Flash Document under Create New menu. Step 2: Position the object you want to animate on the stage.

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

Step 4: Insert a keyframe in the last frame.

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

Step 6: Right-click any in-between on the layer you want to motion tween. Step 7: Click Create Motion Tween

CREATING A SHAPE TWEEN ANIMATION

Step 1: On the START PAGE, select Flash Document under Create New menu. Step 2: Position the object you want to animate on the stage.

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

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

Step 5: In the timeline window, select any frame from 2-14 using left-click. In the Properties window you will now see
an option to tween. It is currently set to none. From the Tween drop down selector choose Shape.