You are on page 1of 22

Divine Word College of Legazpi

Adobe Flash Student Handout
STUDENT HANDOUTS

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 2

but usually it easily exceeds the 100 KB. 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. Click “Ok” +R 2 3 Divine Word College of Legazpi Page 3 . On the other hand. The second problem is the size of the movies and their download time. and in addition if it incorporates sounds it is obvious that the number drastically increases. Evidently it depends on the contents.Adobe Flash Student Handout what it is and are not afraid when it is offered to them. OPENING FLASH 1 1.. each time more people have this PLUGIN. a FLASH animation sizes much more. So far. Press Windows button to open Run window 2. That eliminates the problem of the downloading time. Whereas an HTML page can size about 10 KB on the average. the wide bandwidth connections each time become more numerous. 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. Type “flash” 3.

It presents you some common options (like Create new files. A B C 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 don’t want to see the start page next time you open flash Divine Word College of Legazpi Page 4 .Adobe Flash Student Handout EXPLORING FLASH THE START PAGE Also called as the WELCOME WINDOW. open existing files. or open the Flash help system) you can click before starting a flash project. templates. It first appears in the stage area when you first open Flash.

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

0 in the image). Scene…).. and the option Draw Bitmap allows to modify current graphics in vector maps (this theme will be studied further). to obtain other news from the Macromedia page or execute what we already have. the Timeline represents the succession of frames in the Time. Rewind. Control: From here you modify the properties of the movie reproduction Play. 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 Divine Word College of Legazpi Page 6 . Window: In addition to the classical options of distributing the windows.Adobe Flash Student Handout Modify: The option Transform permits one to modify the graphics existing in the movie. guided lections etc… Timeline The Timeline represents a simple mode of visualization. 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). Moreover. Optimize or of the same movie (Layer. going through tutorials. On the definition level. Help: From here we can access to all the help that Macromedia offers to us. 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. Text: Its contents affect the edition of text. Other options allows you to modify characteristics of the animation elements Smooth. the frame Speed (12.. this menu includes shortcuts to ALL the Panels. its duration and when it will appear in the movie. 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.. Test Movie .0 in the image) and the Time of the movie (0. from the current manual up to the Action Script.

These properties could be changed from this panel whenever you wish them to. Even so. The Stage has very important properties. but other times it is convenient to separate the objects in order that they do not interfere among them. Frame Rate: Or the number of frames per second that appear at the movie. 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. For this. Furthermore the use of many layers gives place to a good-ordered movie and of easy use (for example. 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. Divine Word College of Legazpi Page 7 . The Working Area The Working Area consists of numerous parts. Because of its importance we will dedicate an entire unit to it. A Layer could be defined as one independent movie of only one level. we will create as many layers as necessary. Dimensions: They fix the size of the movie.Adobe Flash Student Handout The concept of the Layer is basic to manage Flash efficiently. in order to access them. The smallest size is of 1 x 1 px (pixels) and the biggest one is of 2880 x 2880 px. Make Default: Allows to store the properties of the current document and to apply them to all the new created documents from this moment. That is to say. Ruler units: Unit used to measure the quantities. Frequently it could be interesting. For this fill the Title and Description fields. let's see them: The most important part is the Stage. we will draw and fix different elements of our movie. let's see a great characteristics of the layers. it is convenient to fix the sounds at one independent layer called "Sounds"). 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. due to the fact that they coincide with Document Properties.

Color Mixer Panel: Using this panel we'll create the colors that we like more. Divine Word College of Legazpi Page 8 . we'll name them and summarize the functions of most of them. will be in the "Actions" Panel).. It is very useful.. Info Panel: It shows the size and the coordinates of the selected objects. It's mission is to simplify and facilitate the commands use. scrolls etc. shrinks. It is very useful for exact alignments. Transform Panel: It scales. Color Swatches Panel: It allows us to select a color quickly and graphically. the selected objects Actions Panel: It is very helpful when you use Action Script and associate actions to our movie. The components are "intelligent" objects with characteristic properties and many utilities (calendars. Help Panel: Macromedia gives us help and accessible advises from this panel.Adobe Flash Student Handout The Panels The Panels are command sets grouped according their function (for example.. with the possibility of modification. rotates. Scene Panel: It modifies the attributes of the scenes that we use. Even so. Align Panel: It places the objects like we indicate to it.) Strings Panel: Flash 8 contributes multi-language base to our movie through this panel. all that makes references to the actions.. (Including our creations). All of them will be studied deeply during the course. 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 line can be modified just by placing the cursor near the line: above of the extremes for dragging them... Its handling is identical to the Oval Tool. Its main use is to select objects. size etc. It is fundamental. It shows us the properties of the object selected at this moment: border. Flash isn't a program of graphic design. the borders (with double click). and in any other part near the straight line to curve it. it allows selecting the borders of the objects. you must never forget about it. normally. It isn't desirable to mislead us... Brush Tool: Its functionality is equivalent to the pencil. background color. zones on our choice. Tools Bar. The Tools Bar contains all necesary Tools for the drawing. Moreover.. After the phase of "What do I want to create and how is it going to look". but its power in this field is almost as great as these programs. 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. but its stroke is much more thicker. Line Tool: It allows creating straight lines in a quick way. typography. We are going to see how use every drawing tool effectively. objects properties (if there are interpolations. they only differ in the objects they Pencil Tool: It allows drawing lines. Text Tool: next theme.Adobe Flash Student Handout Properties Panel: With no doubt it is the most used panel and the most important. the phase of graphic design comes up. line type. after being drawn you will be able to edit its shape as you like. the fillings (with only one click).). It creates a text in the place where we click. Basic Tools. coordinates. Click and drag to show up a straight line until the desired end point. Once created. Page 9 Divine Word College of Legazpi . Its properties will be shown in the The Oval Tool enables drawing circles or ellipses in a fast and simple way. The lines are created as in any program of 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 adequate use can save time of our work.. Realize what your imagination has produced on the paper (in this case on the paper of Flash). characters size. 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. Oval Tool: Rectangle Tool: create.

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.) in a simple way. Ink Bottle Tool: It is used to change quickly the color of a stroke. Many other programs of drawing don't allow to apply fillings if a border doesn’t limit the zone.. Subselection Tool: This Tool complements the Pen Tool. We can modify its thickness and stroke shape. It allows you to select Pen Tool: creates polygons (and moreover straight lines. Tools Bar. Its use consists in clicking on the places that we want to define as vertices of the polygons. changes the color of the boundary with one click in the Colors Mixer Panel. which is so popular in other programs. Nevertheless its function is to erase everything what "it draws". Many people find this tool to be complicated. the following images appear on the Options Panel : This is the Magic Wand Tool. It is applied to objects with borders. it does. indicate the anchor points. In order to create curves. By selecting this Tool. Paint Bucket Tool: It lets you apply fillings to the created objects. In counterpart.. since it can select any object in a free way (the Arrow Tool can only select objects or rectangular or square zones). we advice you to see the following animation: Divine Word College of Legazpi Page 10 . rectangles. as far as it lets us move or adjust the vertices that make up the objects created by the above mentioned tool. Eraser Tool: It works like the Brush Tool. the Lasso Tool can't select fillings nor objects (if we don’t make the selection by hand). Advanced Tools. and then drag the tangent on them. The third option you have is the following: polygon shapes. To see how it works. which limit curvature. It lets you make selections according to the objects color. Eyedroppers Tool: Its mission is to "Capture" colors to use them afterwards. Lasso Tool: Its function is complementary to the Arrow Tool. although it's one of the most powerful tools that Flash provides.Adobe Flash Student Handout It is usually useed for fills.

Linear Gradient: It is a special filling type. It also allows to introduce the code of the color according to the standard established by HTML. By doing this. The filling type that we'll apply to the created objects also can be determined. Select one of them. we click on the tab that is closer to the Paint Bucket Tool). It can shade from top to bottom or from one side to the other. Moreover. we press on the tab that is closer to the icon of the Pencil Tool and if we want to modify a filling. when we create a color with the Color Mixer Panel. just click on the tabs that are close to the icons of the Pen Tools or Paint Bucket. but the gradient shade performs a circular pattern. Color Swatches Panel The Color Swatches Panel allows to see the arranged colors in a quick and easy way. Radial Gradient: It is identical to the previous one. We can create differentes types of Fills Solid Fill: It consists in a filling formed by a single color.Adobe Flash Student Handout Color Mixer Panel: In order to select a color. Bitmap: It lets you put an image existing in the movie as filling (you can even import it in that precise moment). a Panel with many colors will appear. solid colors (only one color) as well as linear gradients or radial gradients. a color does a gradient until it converts into another one. (If we want to modify the color of a border. we can add it to our set of swatches by Adding Swatch (that Divine Word College of Legazpi Page 11 .

an object could be any image. Once the color is added. Its existence is also arbitrary. a drawing created by ourselves etc. it will seem that this object has no fill. for example. Divine Word College of Legazpi Page 12 . 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. we could work with it. it will be enough to select the border and delete it. So far it is the interior part of the object. it will be in our set of swatches. at the web page.. because we can create an object which interior color is transparent. which is open in the right top 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. which we create or import. When we create an object. we would consider everything that appears and is visible in the movie as an object. hence.. and we can quickly access to it each time while working in our movie.Adobe Flash Student Handout is in a menu. 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. Starting Independently of our working with animation. a button. although. depending on what is convenient for us. In general. The Objects. we will have to work with objects. in fact. the border is always created and its color will be indicated in the Outline Color (inside of the Color Mixer Panel). It could exist or not. at the catalogue for CDRoms or in any other place. it does exist but it's transparent. The Fill: The Fill is just the object without border.

We'll click one part of the stage and drag the arrow up to wrap the area with objects that we want to select. 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. rotate.Adobe Flash Student Handout Select In order to work with objects. change the color. in addition to the Arrow Tool. which are in a certain zone: We'll use for this the Selection Tool (Arrow). This way to select object allows us to choose quickly many objects... it is fundamental to know how to select the object part that we want to modify (move.. or a group: Click the Symbol in the text or in the group. a text. Moreover. 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. It allows us to select any zone of the object of any shape. pasting them. the selected areas can not be rectangular as in the Arrow Tool case. that is even more useful. If we want to include this object..). only the parts that are included in the wrapped area will be selected.. apart from allowing to select certain zones of the objects for cutting. We can observe that the selected object parts take an appearence with a texture to indicate that they are selected. Divine Word College of Legazpi Page 13 . Select the objects. we might only press the key SHIFT and select the part of the object that is lacking. On the contrary. 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 Fill and the Border: Double click the Fill. If this area cuts any object. we can use Lasso Tool.

Aligning Objects. the objects will take the reference form the group of objects they are at. 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). In order to align them precisely. it is enough to press the 1 and the 6 button one after another. Align Panel Now that we know how to select the objects or their parts.Adobe Flash Student Handout Select from the Timeline: If we select a certain frame from the Timeline. let's see how to align them to the Stage. It works this way: The Align Panel allows us to align the objects just as we indicate. we must emphasize the option To Stage.. It's useful if you want to modify quickly all the frame elements. The most usual selection is To Stage. all the objects from this frame are selected automatically. We can find this Panel in the Menu Window → Align. Flash provides us with the Align Panel.. if we want to align an object to the left bottom corner. The different options affect all the selected elements and they are frequently used to align selected objects to the certain places. Before considering the possibilities. This option allows us to indicate all the positions that must have each object at the stage If this option is not selected. to align the objects in the center of frame depending on the movies limits. and they will align themselves taking into account those ones. Divine Word College of Legazpi Page 14 . Select All: The most natural mode of selecting all consists in clicking the menu Edit → Select All. For example.

Current Color: Indicates the current color depending on the quantity of Red (R). more precisely (more mathematically) from another panel. we can also do this. we might use it. Space: It spaces the objects uniformly. For example.Adobe Flash Student Handout Distribute: It aligns the objects on the stage taking into account the imaginary axis that passes through their centers. both squares would have the frame width. when you click the first "Match Size" button. The X and the Y represent the axis of coordinates (The X is the horizontal axis and the Y the vertical axis). Object location: From here we control the location of the object on the stage. if we have 2 different squares and the option "To Stage" is not active. the Info Panel. The possibilities of this Panel are limited. If "To Stage" were active. Green (G). W: is the width H: is the height. the rest of objects will be the reference. Each one of the 2 squares will be situated on one of the movie edges (one on the top and another on the bottom). If the "To Stage" is active it will stretch the objects up to make them match the movies width and length. For example. the most narrow square will have the width of the biggest square. You can access to this Panel from the Menu Window → Info. so that the distribution become uniform. Divine Word College of Legazpi Page 15 . If it is not active. if we have 2 squares and we press the first left button. but if we are searching for precision or we don't trust Flash distribution. Match Size: It makes the object's sizes match. 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. Blue (B) and Alpha effect (A) that it has. The measures are also adapted to the movie size. Apart from controlling the object position from the Align Panel.

they are included in a library at the moment of creation that allows us using them on several occasions. we can have selected object (by clicking it) and see in the Information Panel its size and position. We can choose between Movie Clip. but when the mouse is moved the value of color will change and will not indicate the color of selected object.Adobe Flash Student Handout Its sign could be deceitful. acceding to the menu Insert → New Symbol or just by pressing Ctrl + F8 or F8. which we are going to create. In order to save time don't forget about this. because it indicates the color of the object when we touch it with the mouse. 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. how we'll see further. Cursor Position: It indicates the Cursor's position. 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. but the color of the object that the arrow is touching now. Once done it will appear a window as the one of the image. 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. 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. Button and Graphic. We open the dialog box of Symbol Properties. Divine Word College of Legazpi Page 16 . The procedure is the following: We select the object that we want to convert to a symbol. The only that remains is to select the type of symbol or behavior into which we convert our object. So far. We introduce the name of the symbol.

When run. 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. In Flash. This simulates changes in perspective. as are expanding liquid puddles and other similar effects. As with motion tweens. In Flash. Motion tweens also move two or more objects in a scene relative to each other. Flash generates a shape somewhere between the other two in each intermittent frame. drawing slight differences between each frame. shape tweens are accomplished by placing one shape in one animation frame and another shape in a subsequent end frame. Using this method. the differences between them create the illusion of change or motion. When the frames are then viewed in rapid sequence. creating the image of a smooth transformation between shapes. this is used to accomplish a number of effects. which creates the illusion that still images in the foreground are in motion. Divine Word College of Legazpi Page 17 . the animator draws a figure or scene one frame at a time. Melting ice cream is created using a shape tween. 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. creating the illusion of motion. the animation displays the object in a different section of the scene for each frame. Shape Tween  A shape tween changes the shape of an object over a series of frames. Motion tweens are also used to move background images. When the animation is played. shape tweens are used to animate opening and closing mouths or blinking eyes. camera angle and camera distance from the focal point of the scene. Notably.Adobe Flash Student Handout 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.

Step2: Position the object you want to animate on stage. Divine Word College of Legazpi Page 18 . select Flash Document under Create New menu.Adobe Flash Student Handout SAMPLE ANIMATIONS CREATING A FRAME-BY-FRAME ANIMATION Step 1: On the START PAGE.

Step 4: Insert a Keyframe. Step 6: Click and insert another keyframe in the next desired frame.Adobe Flash Student Handout Step 3: Click the next Frame in the timeline where you want to continue the animation. (Right click on the specified frame. Divine Word College of Legazpi Page 19 . then click Insert Keyframe. The shortcut key for inserting Keyframe is F6) Step 5: Change the object’s location or appearance (size or color) slightly to animate.

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. Step 2: Position the object you want to animate on the stage. CREATING A MOTION TWEEN ANIMATION Step 1: On the START PAGE.Adobe Flash Student Handout Step 7: Change the object slightly again. Step 3: In the timeline. Divine Word College of Legazpi Page 20 . click the last frame you want to include in the motion tween. select Flash Document under Create New menu.

select Flash Document under Create New menu. Step 5: Click and drag the object on which you want the motion tween to end.Adobe Flash Student Handout Step 4: Insert a keyframe in the last frame. Step 2: Position the object you want to animate on the stage. Step 7: Click Create Motion Tween CREATING A SHAPE TWEEN ANIMATION Step 1: On the START PAGE. Step 6: Right-click any in-between on the layer you want to motion tween. Divine Word College of Legazpi Page 21 .

Adobe Flash Student Handout Step 3: In the timeline. In the Properties window you will now see an option to tween. For example.) Overlap the previous object with the new one. select any frame from 2-14 using left-click. we’ll add a keyframe on frame 15. draw another object. we’ll draw a rectangle. Step 5: In the timeline window. It is currently set to none. From the Tween drop down selector choose Shape. add desired keyframe. (This time. Divine Word College of Legazpi Page 22 . Step 4: On the selected keyframe.