tutor flash part 1

http://www.teacherclick.com/flash8/graficos/entornomx2004.jpgThe 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… 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 In order to know more about the Timeline and the different types of frames that exist visit our Advanced Page 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"). We will see the advantages and disadvantages of using layers in the Unit 8. 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. In order to practice these operations, we advise you to do Exercise Change Properties of the Movie 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. In order to know more about the Zooms visit our Basic Page 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 Design passes through many phases when designing web page or an animation. After the phase of "What do I want to create and how is it going to look", normally, the phase of graphic design comes up. Realize what your imagination has produced on the paper (in this case on the paper of Flash). It isn't desirable to mislead us, Flash isn't a program of graphic design, but its power in this field is almost as great as these programs. We are going to see how use every drawing tool effectively. Tools Bar. Basic Tools. The Tools Bar contains all necesary Tools for the drawing. Let's see which of them are the most important and how they are used: Selection (arrow) Tool : It is the most used tool among all. Its main use is to select objects, it allows selecting the borders of the objects, the fillings (with only one click), the borders (with double click), zones on our choice... Moreover, its adequate use can save time of our work. Line Tool: It allows creating straight lines in a quick way. The lines are created as in any program of drawing. Click and drag to show up a straight line until the desired end point. Once created, the line can be modified just by placing the cursor near the line: above of the extremes for dragging them, and in any other part near the straight line to curve it. Text Tool: It creates a text in the place where we click. Its properties will be shown in the next theme. Oval Tool: The Oval Tool enables drawing circles or ellipses in a fast and simple way. To practice the handling this Tool, we recommend to do the Exercise of Creating Oval To practice the handling this Tool, we recommend to do the Exercise of Filling Color Oval Rectangle Tool: Its handling is identical to the Oval Tool, they only differ in the objects they create. Pencil Tool: It allows drawing lines, after being drawn you will be able to edit its shape as you like. The color applied by this Tool can be modified from the Color Mixer Panel or from the subpanel Colors that is in the Tool Bar. Brush Tool: Its functionality is equivalent to the pencil, but its stroke is much more thicker. It is usually useed for fills. We can modify its thickness and stroke shape. Paint Bucket Tool: It lets you apply fillings to the created objects. Many other programs of drawing don't allow to apply fillings if a border doesn’t 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 don’t make the selection by hand). By selecting this Tool, the following images appear on the Options Panel : This is the Magic Wand Tool, which is so popular in other programs. It lets you make selections according to the objects color. The third option you have is the following: It allows you to select polygon shapes. Pen Tool: creates polygons (and moreover straight lines, rectangles...) in a simple way. Many people find this tool to be complicated, although it's one of the most powerful tools that Flash provides. Its use consists in clicking on the places that we want to define as vertices of the polygons. In order to create curves, indicate the anchor points, which limit curvature, and then drag the tangent on them. Subselection Tool: This Tool complements the Pen Tool, as far as it lets us move or adjust the vertices that make up the objects created by the above mentioned tool. Ink Bottle Tool: It is used to change quickly the color of a stroke. It is applied to objects with borders, changes the color of the boundary with one click in the Colors Mixer Panel. 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. 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). To learn how to create a transparent (or semi-transparent) color, do the Exercise Create Transparent Color 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. Flash provides everything that we might need to create an animation, and, hence, also all that is related to the texts. However, Flash was conceived to create graphic animations, in such a way that it will treat any text as if it were one more object, prepared to be animated if that's what you want it for. That allows us to animate texts afterwards and to easily create spectacular animations. Flash distinguishes among 3 types of text: static text or normal; dynamic text; and input text (in order the user to introduce the date, for example), it can also create text that supports HTML format, etc... Text Properties In order to write we have to click on the Text Tool and then on the point of the stage in which we want to start writing. To learn more about How to write texts visit our Advanced Page The Properties Panel contains the main properties of all the objects that we'll use during our movie. So if we select a text, we can see whatever we need to know about our text. If we have experience using Flash 5, we'll notice that all the properties met before in the Character Panels and Paragraph, are now grouped in the Properties Panel. Properties Panel Let's see inside out the Properties Panel: Font: From here, as well as in the more common text editors, we can select the preferable type of letter or "font". Height: It determines the space between the characters. It is used when the useed typography shows the letters together or to add specific effects to the text. Text Orientation : It changes the orientation of the text from horizontal to vertical, as well as from right to left. Automatic adjustment between characters: The activation of this square causes that the separation between characters is done automatically. Position: It allows us to convert our text in subindices or in superindices (or leave it normal). URL: If you want the text linked to a web page, enter the address here. Destination: It determines where the URL will be loaded: in the same window of the browser, in a new one... Line Type: If the text is dynamic (otherwise it appears deactivated), this option allows us to determine the type of lines (single line, multiple line or multiple line without adjusting). Configuration: There are the classical options that allow to convert the text in Bold (B), Cursive (I), or to change the text color and size. Other Properties: Given the fact that Flash handles the texts as objects, these also have width, height and coordinates. We can modify them. A Paragraph is nothing more that a set of characters with common properties for all of them. These paragraphs admit certain options that allow us to work with text blocks. The Properties Panel provides us the following options to work with paragraphs (between others). Align Left: All the lines will begin as far as possible to the left (within the defined text frame). Center: The lines are distributed to the right and to the left from the middle Paragraph point. Align right: All the lines will begin as far as possible to the right (within the box of defined text). Justify: The text is widen if it is necessary in such a way that there cannot be spaces in any of its limits. The rest of options allows us to determine the margins (left and right ones), the indentations of paragraph and the interlineal space. Unit 5. Working with Texts (II) Types of Texts How we've already commented, Flash distinguishes between different types of texts and handles them specifically according to the type. All the types of texts correspond to the properties commented in the previous items, and they differ just in the Text Type. We can modify the text type from the Properties Panel by nothing more than clicking on the tab "Text Type": Static Text The Static Text is characterized by not presenting any change during the animation. It is important that we do not confuse the word "static" with text not moving. What we would like to say is that the contents of the text frame does not change. The text can be animated (rotated, changed of color...) and still be static. In this way, a text frame in which "Learn Flash 8 " is written during all the movie is static, although you can apply to it the above mentioned text changes: position, shape, color... However, if we go on and write "With this Tutorial” in the same text box, this text box is NOT static. At this point, we strongly recommend doing the course exercises. The static texts have only 2 extra properties: Use Device Fonts: This option let the movie Flash to use the Fonts installed by the user who watches the movie on his computer. If this user has the fonts that we used in the movie, one will see it exactly as we want to show, but if someone does not have them, Flash will use the most similar ones. This often causes that the final result (that the user sees) does not fit in the desired output, because of that it is usually convenient to maintain this option without selecting, though this entails a greater size of the final movie. Selectable: With this option activated the user can select the texts that are in the movie (copy them...) Activate this option, if you find it is convenient. Dynamic Text The Dynamic Text, in contrast to the static one, can change its contents (besides of being animated as the later). Its use is rather more complex than the Static, since every frame of Dynamic text can be a variable, which is modified by ActionScript. Programming can modify the values and properties of this type of texts. A common use is to represent texts introduced by Input Text (see following item). They have many properties, accessible from the Properties Panel, it is possible to set the number of lines that they going to take, to introduce HTML text, to add easily a border to the text or the one to give name to the variable that represents the Dynamic text. Input Text The Input Text basically has the same properties as the Dynamic Text, and some others of the kind of a data type introduction text oriented to the user, as for example the maximal number of lines that can be introduced the field or if we want that what is written appears as asterisks (for the passwords). Obviously this type of text will be reflected in our movie as a text frame WITHOUT contents, since the user has to introduce it. How we've mentioned before, this type of text can be combined with the Dynamic Text. In this (advanced) animation you can see how: And that is the final result: To learn how to change the text type, we advice you to do Exercise Changing text type Flash lets create text animations so interactive as those that can be created with images (we've already seen how easy it is to convert a text in a link to another web page). Even so, create animations with texts, can end in many hours of work and great patience. The results are incredible, but in these cases it could be reasonable to use some programs designed for this objective. Among others the Swish, the FlaX or the MiX-Fx make stand out, you will be able to create astonishing text effects in few minutes, although you will not be able neither to enjoy the Flash 8 environment nor to use the rest of tools disposed by it. You can test your knowledge making the: