EDU: A Beginners Guide to Flash

Discussion in 'OT Technology' started by Jadix, Apr 7, 2006.

  1. Jadix

    Jadix The Nice Guy

    Joined:
    Jan 19, 2006
    Messages:
    7,877
    Likes Received:
    0
    Download the .doc here:
    http://www.gamergrid.net/downloads/FlashHelperSheet.doc


    Flash Help Sheet

    by Jared Seeders


    Section 1:

    Goal-
    To have a good understanding of how the timeline works and how to use all of the tools. To be able to make frame-by-frame animations.

    -Document-

    -Document Properties

    -Dimensions
    -Frames per second
    -Background Color

    In the top menu, go to Modify -> Document for the options window for these document properties.


    -Timeline-

    The timeline is a representation of time in your project. When you run your project, it will start out at your first frame, and move at a set speed along the timeline. As it goes along it displays whatever is on the current frame it is on. The default speed is 12 frames per second, so 12 times a second your project will update the screen with the next 12 frames of your movie. When your movie runs out of defined frames to display, it starts back at the beginning and will continue to loop. Each frame is called a “keyframe”. A keyframe is a frame that you have defined as existing and want to be displayed in your project.

    -Keyframes

    -How to make one

    Right click on the frame in the timeline that you want, and select insert keyframe or insert blank keyframe. If you choose insert keyframe it will extend whatever was in the last frame on that layer to that frame. So if you have a box in frame 2, and no frames after it, then you insert a keyframe on frame 10, all the frames in between 2 and 10 (including 10) will have copies of that same box in them. If you choose a blank keyframe, then frame 10 will be left blank and all the others will be filled.

    -How to move them

    Click once on the frame you want to move, so that the box is selected. Then click and drag the frame to the desired location.

    -How to use them efficiently and effectively

    Use F6 as a shortcut to insert a new keyframe. Use F7 as a shortcut to insert a new blank keyframe. Keep your keyframes organized and labeled. To label a keyframe, use the properties window when a keyframe is selected. This is useful for referencing specific frames from an actionscript script.

    -Layers

    -How layers work

    Layers are like stacks of transparent sheets of paper. On each layer, you can place whatever you like: shapes, symbols, text, whatever. The top layers will overlap whatever is beneath them, so whatever is on the lower layers will appear behind whatever is in the layers above.



    -Why use layers?

    Layers make organizing your project pretty easy. You should keep each individual object on its own layer (to a degree). An example would be if you want to animate a sun sinking below an ocean, have the sun be on a lower level than the ocean, then animate the sun to head down towards the ocean and it will go behind it automatically.

    -Naming Layers and why that’s important

    To name a layer, double click on its current name. Additionally, you can right click and select properties from the pop up menu. Naming your layers makes life easier. When you have a large project it can be confusing to remember what is on each layer, and you will find yourself constantly clicking on the layers to figure out what is where. Its also hard to remember how your project was organized when you come back to it a few months after last working on it (like a website or something).

    -How to add/delete layers

    All the control for your timeline layers are on the left side of the timeline. Click on the + icon to add a layer, and select a layer and click on the trash can to delete it.

    -Hiding/Locking layers

    There is a small “eye” icon and a “lock” icon just above the list of your layers. Next to each layer name are dots aligned beneath each icon. Click on these dots will perform the corresponding function. When a layer is hidden, none of its contents are editable or visible. When a layer is locked, its contents are visible, but you can not edit them. This is useful when you have a lot going on at once.







    -Colors-

    -Fill Color

    Your main color selecting method is the two swatches in your tools toolbar. Next to the swatches are a pen and a paint bucket. The paint bucket is your fill color. When you use the brush, the shape tools, or the fill tool, this is the color that will be used.

    -Stroke Color

    The swatch next to the pen is your stroke color. This is the color that will be used for outlines, the pen tool, the line tool, or the pencil tool.



    -Tools-

    -Selection/Subselection

    There are two selection tools. They are the black and white arrows found at the top of the tools toolbar. The black one will select anything that is inside your selection box (when you click and drag), the white one will only select the vector points of your shapes and ignores symbols.

    -Lasso

    The lasso is used to make non-regular selections. It ignores symbols.

    -Lines/Ovals/Rectangles

    -Dragging shapes and the effects of overlapping shapes

    Use your selection tool and click once on a shape to select it. Notice the mesh “dotted” area is what you currently have selected. If you click on the “fill” of the shape (the area that fills the inside of the shape) you will select the fill but not the outline. If you click on the outline of a shape, you will only select the outline, and not the fill. Try it out to see the difference.

    -Difference between Stroke and Fill

    All shapes in Flash have a stroke and a fill. The fill is the main body of the shape, and is only an area of color. A stroke is the outline of the shape, and acts totally different than the fill. The stroke is not an area, it’s a line. It only has one dimension.

    Use the properties window to change the properties of strokes and fills that are selected.





    -Pen

    A great pen tutorial can be found at this address:

    http://www.echoecho.com/flashdrawing10.htm

    -Text
    -How to change the font

    Select the text tool, and use the Properties window edit your text how want.


    -Difference between Static/Input/Dynamic text

    On the left side of the text properties window there is a dropdown menu that lets you choose between Static Text, Input Text, and Dynamic Text. Static text is just plain text that doesn’t change when you run the movie in any way. Input text makes the text box you create editable by you and the user of your project. Dynamic text can be assigned a variable named that can be used in your actionscripting. This text will change automatically as your project tells it to.

    -Pencil/Brush

    The pencil and brush tools use the stroke and fill colors respectively. Select one of the tools and use the options menu (found at the bottom of the tools toolbar) and the properties window to set your desired preferences. A brush will paint a fill shape, and a pencil will draw a stroke.

    -Free Transform

    Use the transform tool to transform your shapes and symbols. Use the options menu (found at the bottom of the tools toolbar) to choose between scaling, distorting, enveloping, or rotating and skewing.

    -Fill Transform

    The fill transform tool only works with gradient fills. You can scale and rotate the colors of your filled shapes, without changing the shapes themselves.

    -Ink Bottle/Paint Bucket

    The paintbucket will change the color whatever fill you click on to your current fill color. The ink bottle does the same but to strokes.

    -Eye Dropper

    The eyedropper will set your selected swatch (stroke or fill) to whatever color you click on.


    -Eraser

    Works just like the brush tool, except it erases whatever you go over. Does not work with symbols.

    -Zoom/Hand

    Very useful for moving about your project.


    Section 2:

    Goal:
    To understand the function of all types of symbols, including movie clips and buttons. To be able to use the library to organize your symbols.

    -Library-

    The library contains all the symbols you have created. It is essential to keep all of your symbols organized using folders. You can create a folder by clicking on the Add Folder icon at the bottom of the library window. Just click and drag symbols on top of a folder to put them in that folder.

    -Movie Clips-

    -Creating

    To create a movie clip, use Insert -> New Symbol and select “movie clip” and give it a name. Hit OK. You now have a brand new stage, with its own timeline and properties, totally separate from your main stage. After creating a movie clip, you can simply drag it from your library to your main stage to create an “instance” (or copy) of the movie clip. You can add as many instances as you want to the stage, or even other movie clips. You can have movie clips within movie clips for as many levels as you want. A good example of the power movie clips give you would be creating a forest. To make a forest you would create a movie clip named “tree”. You would draw an animate the tree within that movie clip. Then on your main stage, you would copy, say, 200 instances of that tree around the stage. Later on you decide you don’t like the design of your tree, so now all you have to do is edit your tree movie clip, and ALL of the instances you created on your main stage will update themselves automatically.

    -Manipulating

    To edit a movie clip, find it in your library and double click on it. Your main stage will change into the movie clip’s stage. You can edit it just as you would your main stage. All instances of your movie clip, no matter where they are, will update themselves.

    -Using Effectively

    Use movie clips for any object you create. They are the most powerful tools Flash has to offer. There is nothing you can’t do in flash with movie clips. For example if you want a shape tween morph effect (like an explosion), just make the shape tween in a movie clip’s timeline, and then you can add that effect anywhere you want simply by making another instance of that movie clip.



    -Buttons-

    A great tutorial explaining buttons better than I can here can be found at:

    http://www.echoecho.com/flashbuttons.htm


    Section 3:

    Goal-
    To understand the difference between a shape tween and a motion tween, and how to use them effectively and efficiently. Also to know how to make graphic symbols and add them to the main stage.

    -Shape Tween-

    -First shape tween

    A shape tween is an animation that occurs over a set amount of frames. You only need two frames to create a shape tween, the first one and the last one. The rest of the frames are generated automatically by Flash. A shape tween will change the state of the first frame into the state of the last frame no matter what. If you have a blue circle on frame 1, and a red square on frame 10, a shape tween will “morph” the blue circle into the red square including all the shapes in between and all the colors in between.
    Create a blue circle on frame 1, and a red square on frame 10. Select frame 1 and choose Shape Tween from the dropdown menu in the Properties window. Press Enter to preview the animation.

    -When a shape tween won’t work

    If you have any symbols or groups in the same layer and frame as your shape tween, it will not work.

    -Hints

    If you have a complicated shape that isn’t morphing how you want it to, you can add hints to control the morph. A great tutorial for how to do this can be found at:

    http://www.flashkit.com/tutorials/Getting_Started/Shape_Hi-Eddie_Ca-39/index.php

    -Easing
    Select the first frame of your shape tween, and then find the easing slider in the properties window. Experiment to get a feel for how this works, but basically it allows you to accelerate or decelerate your shape’s tween.
    -Graphics and Groups-

    -Groups

    Groups are useful for organizing your shapes without worrying about them overlapping and deleting each other. Select the shapes or symbols you want to group together (you can group any combination of anything), and press CTRL-G. The objects are now grouped. If you click on one of them, they will all be selected. To break apart a group, select it and press CTRL-B. You can also make groups of groups of groups of groups. A good example would be a face. You could group the lips to form the mouth. Then group the eyelids and eyeballs to form the eyes. Then group them all together to form the face. Then group the face with the head and hair. Then group the head with the rest of the body, etc. Double clicking on an object will “enter” that object’s group and edit them as if they weren’t grouped. This is how you can move up and down through your groups to edit only what you need to edit without affecting everything else.

    -Graphics

    Graphics act almost identically to groups. The only time I personally use graphics is to represent imported bitmaps. You can import pictures or photos and bitmaps, and then drag them into a Graphic symbol.


    -Motion Tween-

    -First motion tween

    Motion tweens work exactly as shape tweens do, except you can ONLY use motion tweens on symbols (MovieClips, Graphics, or Buttons). You can only motion tween one symbol per layer at a time. Motion tween can’t morph one symbol into another; instead you use the same symbol on both the first and last frames. You would use a motion tween to transform the symbol over time (position, scaling, opacity, whatever).

    -Properties

    Use the properties window to set your preferences for the motion tween (you must select the first frame of the tween). You can use it to make your symbol rotate a specific amount of times over the course of the tween. The easing is there just as it is in the shape tween properties.

    -Motion Guide Layers

    Guide layers allow you to control how a symbol moves as it is being motion tweened. You simply just draw the path you would like the symbol to take, and it follows automatically. The following address has a good tutorial explaining the process.

    http://www.webwasp.co.uk/tutorials/a03-motion/

    Some more helpful links:

    http://shg.ic.ucsb.edu/software/view_title/?software_title=Flash
    http://shg.ic.ucsb.edu/software/view_title/?software_title=Flash%20%20Pro
     
  2. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    haven't had an EDU in a while. Nice :hsugh:
     
  3. D1G1T4L

    D1G1T4L Active Member

    Joined:
    May 4, 2001
    Messages:
    16,489
    Likes Received:
    0
    Location:
    Bay Area
    http links dont work!
    copy + paste for the lose
     
  4. the br0k3r

    the br0k3r New Member

    Joined:
    Jul 28, 2006
    Messages:
    7
    Likes Received:
    0
  5. happyrobots

    happyrobots Ü

    Joined:
    Aug 27, 2005
    Messages:
    1,184
    Likes Received:
    0
    Location:
    Phx
    :cool: I gotta learn myself a little flash.
     
  6. crazybenf

    crazybenf Active Member

    Joined:
    Nov 14, 2001
    Messages:
    15,578
    Likes Received:
    3
    Awesome. Going to play some later tonight... :cool:
     
  7. Tk

    Tk Well-Known Member

    Joined:
    Dec 23, 2001
    Messages:
    23,086
    Likes Received:
    285
    Location:
    nw iowa
    thanks man.... ive always wanted to get into this, just no time.... im FINALLY going to mess around with some right now.
     

Share This Page