Flash Christmas Basics.docx

1、Flash Christmas BasicsGetting StartedMacromedia Flash MX is a multimedia tool like no other. It has the capability for creating interactive multimedia, containing sound, graphics, movie clips, buttons, and more. Before you will be able to create high quality projects, it is important to understand t

2、he basics of drawing in Flash. In this session, we will draw various items in Flash using a premade Flash exercise with guide layers. These guide layers do not show in the finished movie, so all of your original work will be contained in the finished published movie, not the instructions you see on

3、your screen along the way. Lets get started!Parts of the WindowThe interface for Flash resembles a number of different programs. If you have worked with Macromedia products, you will notice much resemblance in the way the workspace is organized. Other elements are common to various graphic programs,

4、 such as a timeline (similar to timelines in video editing programs), layers on the timeline (similar to layers in programs such as PhotoShop), and drawing tools (similar to many drawing programs). Timeline with 3 LayersZoomWork AreaStageOpen Your First FileLaunch Flash and open the file Flash Drawi

5、ng Starter.fla (FLA is the format Flash working files are saved in). A screen similar to the previous page will appear. You can change the way the screen looks by dragging toolbars around the screen or pressing on the gray bars of different panels. If you are looking for missing panels, they can be

6、found under the Window menu. You can also access panel sets under this menu (or save your own!).TIP #1: When working in Flash, it is a good idea to draw different objects on different layers. Then, lock the layer until you need to use it again. Drawing objects on top of each other on the same layer

7、can result in missing parts if the objects are moved again.Scene 1: Pencil ToolThe Pencil tool is a freehand drawing tool. Flash allows you to specify whether you want your freehand drawing to be straightened, smoothed, or left as is. The line style, weight, and color can be changed in the Propertie

8、s Inspector. For most people, the pencil tool is not very useful for drawing much; basically, it is best used to enhance a drawing (add wrinkles, etc.). YOUR TURN: Try to draw a candy cane shape using the pencil tool. Experiment with the various settingsstraighten, smooth, and ink. Then, change the

9、stroke (line) style and color using the Property Inspector.Scene 2: Pen Tool (and Line and Paint Bucket tool)After completing the previous exercise, you might be frustrated with drawing in Flash, but thats what the next few exercises will help you with! This time, we will try to create a candy cane

10、again, but well use the pen tool.The Pen tool creates lines and curves, but it does so by creating points (nodes/dots) that allow for more precise editing. Then, the Arrow tool (black arrow) and Subselection tool (white arrow) can be used to make changes. Moving the arrow near a point or line in you

11、r drawing will allow you to curve the line or change its position. YOUR TURN: Try to draw a candy cane shape using the pen tool. Use the guide provided in the tutorial as an example Modify using the black Arrow tool. Then, add lines for the stripes using the Line tool and fill in the stripes using t

12、he Paint Bucket tool. TIP #2: Flash creates vector objects when you draw from within the program. These objects are lower in file size than traditional bitmap graphics and do not distort when resized. Objects drawn in Flash may contain a stroke and/or a fill. A stroke is the outline of an object, or

13、 border; a fill is the inside of the object. These two things are separate from one another, so it is important to select both parts when moving the graphic around.Scene 3: Shapes Bow (drawing with Shapes)Drawing with shapes is pretty straightforward. Click the Oval or Rectangle tool, and then click

14、 and drag to create your shape. To draw perfect circles or squares, hold down the Shift key while dragging to create the shape. You can create a shape with no fill in the middle by either selecting the fill and deleting it afterward or by selecting “no color” before drawing the object. When using th

15、e Rectangle tool, you can set the options to round the rectangle instead of having pointed corners. YOUR TURN: Try to draw a bow using five ovals and two rectangles. Follow the guide on your tutorial. Delete the fills in the center and any unneeded lines, and then modify using the Arrow tool. Scene

16、4: Shapes Ornament (drawing with Shapes and using gradients)Gradient fills can be applied inside of shapes using the Color Mixer panel. Where it says “Solid,” select the drop down arrow and choose either linear or radial gradient. A bar appears showing the two colors that make up the gradient at the

17、 left and the right. Drag the pointers to change the amount of each color in the gradient. Select a color square to change it, or shift-click between them to add other colors.Once the fill has been applied, the fill transform tool can be used to change the direction and placement. YOUR TURN: Draw an

18、 ornament using a rectangle and a circle; add a gradient fill. Then, use the line tool to add stripes or otherwise decorate the ornament. Then, try to create an angel using the pattern shown on the tutorialtwo squares, one circle, one oval, and one rectangle. Use the Arrow tool to modify the shape,

19、delete unneeded lines, and color as you desire. Add any extra effects (with the pencil tool).Scene 5: Pen Tree (drawing a Christmas tree with the pen tool and adding it to the Library)Grids are helpful when drawing to line up objects and lines. When drawing the Christmas tree, change the grid (View,

20、 Grid, Edit Grid) to 50 px by 50 px or some other unit that you feel comfortable with. YOUR TURN: Create the tree points using the pen tool in the order indicated in the diagram on your tutorial. Use a black stroke and green fill.Once this tree half is drawn, double click the tree to select both the

21、 stroke and fill and then copy that section. Paste the next section and then flip it and place them side by side (to flipModify, Transform, Flip Horizontal). You might want to align the Y value in the Property Inspector so that you are sure the tree matches up perfectly (but hey, whos seen a perfect

22、 tree?).Be sure your tree has the correct colors and then delete the line dividing the tree halves. Choose the Free Transform Tool and select the entire tree. Stretch it so the tree is taller (but not much wider). Use the Arrow Tool and point to the gap indicated in the diagram. Your arrow should ch

23、ange to a curvy line. Drag so that you round out the edges of your tree. Then, use the rectangle tool to create the stump and fill as you desire. Next, convert the tree to a symbol so it will be stored in the library (F8create this as a movie symbol). Once something is an official symbol, any perman

24、ent changes you wish to make to the object should be made in symbol editing mode. More on that.soon.Make Lots o Symbols!Return to your previous scenes and convert your earlier created objects to graphic symbols (select entire object carefully with arrow or lasso, F8). Be sure to give each object a n

25、ame. As they are converted to symbols, they will be stored in the library. You can view the library by pressing F11.Scene 6: Shape TweenTweening is a process of automatically filling in the gaps of a sequence in an animation. Flash creates the frames “in between” two keyframes to “morph” one thing i

26、nto another. There are two types of tweeningshape and motion. This exercise will focus specifically on shape tweening. In order to shape tween something, it must be broken apart (Ctrl-B) and cannot be a symbol. TIP #3: Keyframes are represented on the timeline by a filled in circle (if they have som

27、ething in them) or an unfilled circle if they are blank, but ready to be drawn in. Frames are just gray. If you want to change something in an animation, you must insert a keyframe; if you insert a frame and make a change, all previous frames will also change. Right click on a frame on the timeline

28、to insert keyframe, blank keyframe, or frame as needed.To tween something, the object must be on its own layer. Fortunately, if you accidentally place something on a layer with it, you can easily cut the object and “paste in place” on a different layer. Remember, always lock layers when you are not

29、using them.YOUR TURN: So that we can use this again, we are going to create a new symbol and draw the tween there. With the grid on (50x50) draw a circle with no stroke that occupies one of the squares. Insert a keyframe at 20; click in frame 20 and make the circle change. Well use a neat effect tha

30、t makes a glow by selecting the circle, clicking Modify, Shape, Soften Fill Edges. Set to 20 px, 15 steps, and expand. Then, click somewhere between keyframe 1 and 20 and set the tween in the Properties Inspector to SHAPE. Exit symbol editing and the new symbol should be in your library. What Shape

31、Tweening Can DoWhat Shape Tweening Cant Do Tween the shape of an object Tween the color of an object Tween the position of an object on the Stage Tween the transformation (scale, rotation, skew) of an object Tween text that has been broken apart (Ctrl-B) Tween gradients Tween grouped objects Tween s

32、ymbols Tween text that has not been broken apart*From Macromedia Flash H*O*TScene 7: Motion TweenMotion tweening works very much like shape tweening, only distortion is much less likely. This is because motion tweens require symbols. Before you can motion tween something, you must convert it to a symbol. Then, after inserting a keyframe later on the timeline, you can change the symbol. You cannot replace one symbol with another and do a motion tween. You can change the properties (color, transparency-a