Learning Flash Ok, so we want to learn about flash. Let me warn you, this is major spinning propeller time. Make sure the thinking caps are on. This is probably the toughest handout I have had to create based on the fact you need to know so many different components of flash in the beginning. I will mention where you might need to jump in the handout to learn a new term that I am talking about. What do I want to accomplish in this handout? I would like to show you the basic draw philosophy of Flash. Flash handles its draw tools different than photoshop or even illustrator. I will also go over the main Flash environment, layers, sounds, libraries, animation and publishing your Flash document. The Flash layout How Drawing Works in Flash For now, lets forget that flash is even a web animation program. Lets concentrate on its drawing capabilities. As mentioned earlier, Flash handles graphics differently then most graphic based software. Flash uses Vector Based Imaging. Meaning, once an item is drawn it can be deleted, modified, merged and changes on a section by section basis. Hopefully the following examples will show you Vector Based Imaging. This is a simple circle. I used the circle tool in flash to make it. I have now used the pointer tool to select the outline. Note how the outline is the only thing selected. I would have to drag select or double click to select the entire image. Now when I click in the middle, only the center area is selected. I would have to drag select or double click to select the entire image. I have gone back and selected only the outline of the circle. When I drag, only the outline is moved. Once the outline of the circle has been moved, you will notice the center is now two different sections because the darker blue has made two segments of the lighter blue. You will notice the same concept described above happens to the outline of the circle as well. When I drag the outline of the circle now, only the part that was segmented by the lighter blue. Remember, at any time you can select multiple items by either double clicking or click dragging. What happens when you start moving around with like colors? Well, here we go. I have now moved the red square over the red circle. You will now notice the two items become one. The Tools of Flash The drawing tools of Flash are just what you would expect with paint brushes, paint buckets, etc. However, most of the tools offer special features unique in Flash. I will overview each of the tools. The Pointer tool. This is used to select items for moving, changing, etc. You can also drag select to select multiple items. Special tools (left to right) Snap to objects: Can move an item near another item and it will snap to it. Smooth: Will smooth selected lines Unsmooth: Will unsmooth selected lines Scale: Will change the size of the item Rotate: Will rotate item. The Lasso Tool. This tool is pretty typical. You can use it to select an area Special tools (left to right) Magic Wand: Will select a grouping of the same color. Magic Wand Properties: Can change properties. Polygon Mode: Go from a round lasso to a line based one. The Line tool. Has no special features. The Circle tool. Has no special features. The Square Tool. Special tools Rounded Corners The Pencil Tool. Special tools (A pop up modifier) Straight, Smooth and Ink The Paint Brush Special tools (From top to bottom) Fill Features Pen Shape Pen Width Paint Bucket Special tools Can choose whether to have it fill past an open line or not. Ink Bottle Will fill either the inside of an object or the outline of the object depending on where you place the bottle icon. The example below (with wrong icon due to screen shot) shows the ink bottle being used to add an outline. Text and Flash Text works just like you would expect it to in Flash. There is a Text Panel that allows you to change the text attributes. The neatest thing you can do with text is you can use the Modify Menu and Select Break Apart. This will allow you to take each individual letter move them and even modify them. Importing Images You can import Vector and Non Vector Based images into Flash. Simply go into the File Menu and Select Import. You can then use the Pointer Tool to modify the image. Getting Started with Animation Now lets get started with basic animation. We will have to go over many things before we can talk about the entire animation process. How Animation Works Flash uses layers and frames to handle animation. You can see layers to the left. Layers can be added by clicking the add layer button . Layers are viewed from top to bottom, so an item on layer 2 directly behind an item in the same location on layer one may not be seen. Frames are seen to the right. To produce animation, you would select different frames and move the items around on their layers. You would continue this on various layers to create your animation. I will be showing you two animation examples later. Symbols and Libraries For items to be properly animation, they need to be symbols. Symbols are objects, buttons and movie clips. If you make a circle in flash, it is not a symbol, it is a Vector Based Images You need to convert Vector Based Images to symbols in order to animate them. Images imported are automatically symbols. In the example above, I have selected a circle I have made in Flash. I use the Insert Menu and Select Convert To Symbol. The dialog box appears below. Select either a Movie Clip (Quicktime for example) Button or Graphic. The item will be placed in the library once it has been converted into a symbol. The library is a storage for all of the symbols used in your Flash document. This is the library window. I got this window by going to the Window menu and selecting Library. This library command contains all of the symbols I am currently using in my flash document. There are two other Library commands. Also in the Window menu there is a Common Libraries command which will display some basic libraries that are included in Flash. The other Library command is in the File Menu. Open As Library will open a flash document in a library window. Perfect if you would like to mooch graphics from another Flash document. Beware that if you delete a document, you delete the items out of its library as well. If you made a great looking graphic, keep the file until you place the graphic it into another document and hence into another library.   Time to Animate! We will make two types of Animations a frame by frame animation and a tween animation. Before we make an animation, lets talk about frames again. Frames will be the key factor in making our animation. There are three types of frames, blank, keyframe and frame. A blank frame is just that, a frame with nothing in it. A keyframe is a frame where a particular action is going to happen, like something will move, etc. A frame by frame animation is accomplished by making an object a symbol, lets say a ball. Lets say I want this ball to bounce. I would add the ball to frame one. I would then click on another frame. I would then go into the Insert Menu and select Insert Keyframe. I would then move the ball slightly on the new keyframe. I would keep adding keyframes and moving the ball slightly to create animation. A tween animation is accomplished by inserting two keyframes. You would move the item you want to animate into different locations on each keyframe. You would then go into the Insert Menu and select Create Motion Tween. Flash will figure out what it needs to do to make your animation happen. To Make a Rotate Tween To Make a Fading Tween Another Variation on the Fading Tween. Changing Color Tween Making a Motion Path Tween Working With Text To Make a Shape Tween Importing and Using Music Flash can import almost any music format. It is important however to have Quicktime 4 or later installed. Any music imported will be automatically stored in the sites Library. To add music to your site (I will show you how to add sound to a button later) Making a Button 1. Use graphic tools, etc. to make a button (like the example above) 2. Select the entire button graphic and convert it to a symbol. When you convert it to a symbol, make sure you select Button. The new button will be added to your library. Adding Mouse Actions to Your Button Adding Sound to your Button Adding a Button Action Publishing Your Work You need to save your work twice. Once as a Flash file (so you can edit it more later, and another as a .swf (flash plugin) 1. To Save it in Flash, simply go to the File Menu and select Save. 2. To save your Flash for the web, go to the File Menu and select Publish. You can keep the defaults selected and simply click Publish. Inserting Flash into your Website Because there are so many web products, it would be tough to go over all of them in this handout. Flash is a plugin, so, look for an insert plugin command within your web software. You can also select the .html option when you publish your flash document. When this option is checked, it will give you a .html page with the necessary code to display the Flash document.
		Home | Appointment Calendar | Web Development | Conference Presenting Software Training | Contact Information | Search Copyright 2004 lesliefisher.com part of Fisher Technologies, Inc.