Flash Tutorial


Published on

Published in: Technology
  • Be the first to comment

Flash Tutorial

  1. 1. YISHUN SECONDARY SCHOOL  We Seek, We Strive, We Soar Macromedia Flash  Tutorial  Contents:  1.  What is Macromedia Flash  2.  Tools Panel  3.  Interface  4.  Motion Tween  5.  Tweening Simultaneous motion and scaling  6.  Fading with Alpha  7.  Changing object color mid tween  8.  Motion Guide  9.  Shape Tween  10.  Text to text tweening  11.  Mask & Masking  1 
  2. 2. What is Macromedia Flash  Flash is an authoring tool that designers and developers use to create presentations, applications,  and other content that enables user interaction. Flash projects can include simple animations,  video content, complex presentations, applications, and everything in between. In general,  individual pieces of content made with Flash are called applications, even though they might only  be a basic animation. You can make media­rich Flash applications by including pictures, sound,  video, and special effects.  Interface  This is how Flash looks like when you launch it.  v  You have to create a New Document to start 2D Animtion.  v  There is two ways to create New Document:  ­  Click on File – New  ­  or Click at Flash Document  (This is how Flash looks like after you launch it) 2 
  3. 3. The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change  the view of the Stage.  Tools panel The Timeline organizes and controls a document's content over time in layers and frames.  Frames Like films, Flash documents divide lengths of time into Frames.  Layer is like multiple film strips stacked on top of one another, each containing a different image  that appears on the Stage.  The major components of the Timeline are layers, frames, and the Playhead.  Playhead  Layer  Frames  3 
  4. 4. The Stage is the rectangular area where you place graphic content, including vector art, text  boxes, buttons, imported bitmap graphics or video clips, and so on when creating Flash  documents. The Stage in the Flash authoring environment represents the rectangular space in  Macromedia Flash Player or in a web browser window where your Flash document appears  during playback. You can zoom in and out to change the view of the Stage as you work.  The Stage The Property inspector simplifies document creation by making it easy to access the  most commonly used attributes of the current selection, either on the Stage or in the Timeline.  You can make changes to the object or document attributes in the Property inspector without  accessing the menus or panels that also control these attributes.  Depending on what is currently selected, the Property inspector displays information and  settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When  two or more different types of objects are selected, the Property inspector displays the total  number of objects selected.  4 
  5. 5. Motion Tweening  Motion tweening, put simply, is moving an object from point A on the stage to point B on the stage.  Simple movement with motion tweening:  v  In a fresh Document, draw a square on stage,  select the fill and the outline together, and  convert them into a symbol with the name  square. Place the square symbol on the left  Square  hand side of the stage.  Symbol  v  In the time line, insert a keyframe at frame 30 .  v  In the new keyframe (click on the frame in  the timeline if its not currently selected),  move the square symbol to the far right­hand  side of the stage.  keyframe at  frame 30  v  Now go back to the timeline and click on any  Frame between 1 and 29.  v  On the Property Inspector, select Motion from  the Tween drop­down menu  Tween drop­down menu  v  Test the move and watch the object move from left to the right.  Tweening simultaneous motion and scaling  v  On the same stage, click on frame 1 on the timeline.  v  Select the free Transform tool and click on the Scale  button in the Tools panel options (or right­click on the  square and choose Scale)  Transform tool (The selected object will now have a dotted box around it with  eight scaling selection handles)  5 
  6. 6. v  Grab the lower right­hand corner handle and use it to scale the object down to about half  of its original size.  v  Now click on frame 30 on the timeline, where the motion­tweened square is located at the  right side of the stage. This time scale the square up by about a half, using the bottom  left handle to do the scaling.  v  Test the movie, and you’ll see the square gradually grow larger from frame 1 to 30 as it  passes across the stage.  Fading with alpha  v  On the same stage, click on frame 15, and insert new keyframes.  Keyframe 15  v  Click on frame 15, select the symbol, and open the color drop­down menu in the Property  inspector.  (There are different effects that you can apply to your symbol)  Color drop­down menu  v  Select Alpha from the drop­down menu, and then set  the Alpha slider to 0%. This setting will render the symbol  instance totally transparent in the keyframe at frame 15.  Alpha slider to 0% v  When you test your movie you’ll see the object fade in and  out.  6 
  7. 7. Changing object color mid­tween  Let’s take a look at how to change the color of an object during a motion tween.  In this exercise, we move an object (text) across the stage and change its color as it moves.  v  In a new document, start by creating text. Select Text tool in the Tools Panel. This will  open the Text tool properties in the Property inspector.  (This options displayed are similar to those in a Word processing program) v  Select the text on the stage and convert it into symbol. Remember, only symbols are  group objects can be motion­tweened.  v  Create three more keyframe at frames 10, 20, and 30.  v  At keyframe 10, select the symbol and open the Color drop­down menu in the Property  inspector.  v  Select Tint from the color drop­down menu and change the tint amount to 100%. Then,  using the color selection palette, change the color.  v  Repeat this procedure at keyframe 20, and at keyframe 30.  Now your text should have different color on each keyframe.  v  Add motion tweens to the timeline between frames 1 and 10,  10 and 20, and 20 and 30.  v  If you test the movie you’ll see it change color in jumps.  v  Now you could try clicking on each of the keyframes in  succession and dragging each particular instance to a  different position on the stage.  7 
  8. 8. Motion Guide  Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles.  v  Create a graphic symbol and Name the layer as "graphic"  "graphic"  Layer  Symbol  v  Right click on the "graphic" label and select "Add Motion Guide" from the pop­up window.  v  A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along  with the guide icon.  "Guide: graphic" Layer "graphic"  Layer  Symbol  v  Draw the path for your symbol in this new layer using pencil or line tool.  For example: I drew a circle for my car.  v  Select frame 50 of guide layer and press "F5" to insert frames.  v  Now go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path.  While dragging, you will see a bubble on the symbol. That bubble should go right below  the path. Something like the one shown below.  v  Now go to "Frame 50" of "graphic" layer and press  F6 to insert a new keyframe.  v  Now drag your symbol to other end of your path. Again,  the bubble should go right below the path.  v  Select any frame between 1 to 50 of your "graphic" layer. Right click and select "motion  tween" from the pop­up menu.  8 
  9. 9. Shape Tweening  §  Shape Tweening morphing shapes into something new, rich and strange, either standing  still or moving.  §  Morphing text into shapes and vice­versa.  §  Using shape hints to overwrite Flash’s default shape tweening behavior.  Squaring the circle  v  Create a new movie, and draw a circle and fill in frame 1.  v  Click on frame 15, and insert a blank keyframe.  Empty Keyframe 15  Empty Stage v  Your stage is empty on keyframe 15, using a rectangle tool; draw a square with a  different color on other side of the stage.  v  Highlight keyframe 1 to 15, On the Property Inspector, select Shape from the Tween  drop­down menu.  v  Now if you test your movie you’ll see the circle morph into square while moving  across the stage.  9 
  10. 10. Text to text tweening  This animation starts off with one word and uses shape tweening to change it into a different word.  v  Create a new movie, and in frame 1, use the Text tool in conjunction with the Property  inspector to type This is my first, on the left side of the stage.  v  Now select frame 30 and create a new keyframe and type text to text tween on the  below right side of the stage.  v  Use the Arrow tool to select keyframe 1, and use the  Modify – Break Apart menu to first break the  text into separate letters  (Text is the only thing that needs to be broken apart twice)  v  Select Modify – Break Apart again to break them into graphics. Make sure you have  each text box and letters selected before you this.  v  Do the same thing to the other text; remember to break the text apart twice.  v  Click the between the two keyframes on the timeline, and use the Property inspector to  create a shape tween.  v  Now if you preview your movie you’ll see the first words morph into the second while  moving across the stage. 10 
  11. 11. Mask & Masking  Masks are a powerful feature in Flash that allows you to selectively show and hide content.  v  Create a new movie; by default you will have a layer in your timeline window. Insert one more  layer, totally you need two layers to mask an object.  v  Rename the top layer to "Mask" and the layer below that to "background".  v v v v v v v v  Import your picture to the "background" layer.  v  Using Oval tool from your tool box, draw a  circle without it's border in your "Mask" layer.  Figure 8.4  Figure 8.3  v  Drag the circle to one end of your picture.  Figure 8.5 v  Now go to” frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.  v  Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that  your background image is available all through your mask.  v  Select "frame 40" of your "Mask" layer that is your new keyframe, keeping the playhead  on "frame 40" of "Mask" layer, drag the circle to other end of your picture.  v  Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your  "Mask" layer, select Shape tween in your properties window.  v  Right click on the "Mask" layer (the area where you named the layer not where the frames exist)  and select Mask.  v  Your Mask is all ready. Press Ctrl+Enter to view your Mask.  End  11