Introduction to FLASH 8

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.

 HTML is ideal for creating static websites where text and images are placed at fixed positions. But it doesnt really support dynamic sites, where text, images, and animations are moving around on the screen.

 An animated GIF is actually many images saved in one. When the animated GIF is loaded onto a page, the browser simply loops the images. While animated GIFs can be used for animations, they do not support interactively. In Flash , you can control the animations. For example, you can make the animation stop and wait for the user to click a button.

 A final obvious difference is that GIF images are limited to a 256 color palette. So Compared to animated GIFs, the advantages of Flash are that:
Flash movies load much faster Flash movies allow interactivity. Flash movie can use more than 256 colors.

advantages
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 back. Was deprecated in the last version, but now it has been retrieved and improved. Now ActionScript is at your reach.

The working 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

Exercise. 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. 2. 3. 4. 5. 6. 7 8 Click on the menu File. Select the option New. 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. Select the option Grid of the menu View. A submenu like the one from the figure will open. Select the option Show Grid to make it visible. Select the option Edit Grid to adjust the dimensions of grid like you wish (size, background color...) Select the option Snapping Snap to Grid of menu View to snap the objects to the grid lines.

Timeline
The Timeline represents a simple mode of visualization. It consists of two parts:
1) 2) The Frames that are limited by vertical lines (forming rectangles) 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.

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

Layer
The concept of the Layer is basic to manage Flash efficiently. Because of its importance we will dedicate an entire unit to it.

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").

layers
Layers are described as the way to organize your movie. The way to make your movie look intricate, while still being easy to create. It is very easy to actually create new layers and configure them.

Layer properties
The following are layer properties:
Layer name How to show/hide a layer Locking a layer Adding layers Deleting layers

Layer name
You can see the layer box that is located on the interface in Macromedia Flash. Yhe red box surrounding Layer1 is where the name of the layer is contained. By default, Flash will name the first layer, Layer1 and will add sequential numbers to each layer added. For example; Layer1, then Layer3, and so on.

Hiding/showing a layer
The purpose of this button is to hide or show a layer. This is helpful when compiling many layers to keep from getting distracted by background or foreground conteny. When the eye is highlighted, the layer will be hidden and vice versa.

Lock layer
Locking a layer is another great way to practice good layer management. When dealing with numerous layers, a user may accidentally forget what layer he/she is on when editing a portion of the movie. This is counter acted by using the lock funtion. In the graphic to the right, the lockbutton reprs

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

STAGE

The stage is the large white rectangle where you add every piece of content to be viewed in your movie.

 There are some important steps to remember about your stage:

Any content outside of the stage will not be visible when viewing the movie. The default stage color of white is the initial background for your movie, unless changed. The stag color can be changed by going to Modify Movie Background color.

 A view of the stage can be seen below.

Defining document size

Creating a new document
To create a new document using File ->New

Modification of a document
To modify the document using Modify->Document Redefine the size of the stage. Change the background color Give it a title and a short description.

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

Exercise. Change the Movies Properties Aim. Practice how you can change some of the main movies attributes. Exercise step by step. 1. Click with the right button on the movie background. 2. Select Document Properties. 3. In Rules Unities select Centimeters. 4. Next, select Dimensions and write in the fields Width 22.46 and in Height 16.84 . 5. Press Accept and watch how the size changes. These measures are equal to the standard 640 x 480 px

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. If you still do not know what are the Scenes, we explain it to you in our basic theme 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

Basic Level. 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

Exercise. Open Panels Objective. Open the Panels of Colors and select one. Exercise step by step . 1. Press on the menu Window.

2. 3. 4.

Select the option Color Swatches, if there were a tick besides the Panel name that would mean that it is already open. Otherwise, click on it. Now select the green of this panel, you can see that if you put near the arrow it will turn into eyedropper tool (that should be used to select a color). From this point onwards all that we draw will be color green (we can use this mechanism to change the filling or the color of line).

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.

Basic Tools.
The Tools Bar contains all neccesary 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.

Basic Tools.
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.

Exercise. Creating an Oval

Objective. Creating an Oval with the measures and a desired form Exercise step by step. 1. Click on the Oval Tool in the Tools Bar.
2. Place the cursor on the Stage (within the current frame). 3. Click and drag the mouse to the final place. You'll see that the movement of your mouse causes the creation of an oval (figure 1). When having the desired form of oval, release the mouse. The result will be similar to one in

figure 2

Exercise. Applying Color to an Oval Objective.

Applying color to an oval to its interior as well as to its exterior

Exercise step by step.

1. We start creating Oval with the Oval Tool in the Tools Bar. 2. Click inside of the Oval or on its border. The color we will modify will depend on the zone we click. 3. You'll get something similar to the figure 1 or 2. 4. Once it is done, we click on the Colors Panel, which is inside of the Tools Bar. And we select the color that we like.

We select the Oval Interior

We select the boundary of the Oval Interior

Tools Bar. Advanced Tools.

Lasso Tool:
We can pick the movie display window and place it at desired location. It is especially helpful with movies whose dimensions are large and extend beyond the display.

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.

Lasso Tool
Is a free selection tool that lets you draw your own selection outlines instead of clicking by shape or using default dragged square selection outlines created by Arrow Tool. With the Lasso Tool you can click and then drag to draw any shape selection that you want; if release the mouse, the shape will automatically close itself by connecting the open ends with a line

 We can use one of the three option at the bottom of the toolbar to help refine your selection . The options available for the Lasso Tool are
Magic Wand :you click in a single area to select all values of pixels matching those in that area. Magic Wand Options : sets the controls for Magic Wand mode, such as Threshold and how smooth the selection edges will be. Polygon Mode : you draw your own custom shape much like the default mode, but instead of being freeform, the shape is draw in the form of interconnected straight lines that you created by clicking from point to point.

 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, line width ,and style of lines or shape outlines. Using this Ink Bottle Tool ,rather than selecting individual lines and objects makes it easier to change the stroke attributes of multiple objects at one time. (ie.) 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.

Drawing and Working with Color (II)

Tools Bar. Options
Some Tools have special options that eases and strengthens their use. In order to access these utilities, sometimes it is not enough to click on the corresponding Tool. The way to access to this Submenus consists in clicking on the line or on the drawn object. Then a submenu will appear (or it will highlight if it is already present) as: Adjusting Objects : It is used to make objects to "fit" with others, i.e. if it is possible, to intersect its borders, then objects seem to be "grouped". Smoothening: It softens the straight segments in less rigid lines. Straightening: It does the inverse work. It converts the rounded segments in more straight ones.

The Views or Zooms

The Zoom Tool is used to approach or move away the object view, allowing to include more or less zone of the Work Area. Every time we click in the Zoom Tool we duplicate the percentage indicated in the Zooms Panel. Zooms Panel: It is a set of direct accesses to the View's submenus. They are very useful and help to accelerate the work when they are used correctly.

Basic Level. Zooms.

The Zoom effect consists in moving the "view" near to 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 functions from the Menu View. In any case, Flash includes a fast accessible submenu to these commands. 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.

Color Mixer Panel:

The Color Mixer Panel as its name indicates is used to create our own colors and to select colors that we like. 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).

Exercise. Creating a transparent color Objective. Create an object, which color is transparent, in such a way as to see the objects that are behind Exercise step by step.
1. Create a rectangle with the Rectangle Tool. 2. The filling Color of the created rectangle will be the color selected at this moment in the Color Mixer Panel. For example, blue. 3. Once it is created, we select the filling of the Rectangle and modify the value Alpha. For example, we set a value of 45%. 4. If we place another image behind of our rectangle (in another layer), we can see how the effect of the transparency over our filling reveals.
Blue Rectangle Now it is with Transparency

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.

ARROW and SUBSELECTION TOOL

ARROW TOOL
is for selecting lines and fills, individual objects, or groups of objects. Three option are available.
Snap to objects Smooth (which will smooth the curves of a selected shape/line for one iteration) Straighten (which will straighten the outlines of a selected shape/line for one iteration)

 Sub selection tool

is used for drawing and editing shapes of the objects when we select a shape, line, or fill with Sub selection Tool, it allows you to see and edit the paths that make them up, including the individual vector points and their handles. we can select one or more vector point and by dragging the handles about, adjust the curves to either side of the point to change your shape.

Eraser Tool
The Eraser tool works similar to a classic eraser. Simply select the tool and drag on the stage to erase things. Double click Eraser Tool : Erase All You can double click the Erase tool to delete everything on the stage.

 In the options listed at the bottom of the toolbox, you can specify the Eraser Mode: Erase Normal erases strokes and fills on the same layer. Erase Fills- erases only fills; strokes are not affected. Erase

 In order to modify the color of the Oval Filling we've to select a color clicking on the box of the "Paint Bucket Tool". If we want to modify the border, click on the Panel besides the "Pen".