Hello and welcome to our community! Is this your first visit?
Results 1 to 3 of 3
  1. #1
    Junior Member Spineless Mike's Avatar
    Join Date
    Feb 2013

    Spineless Mike's Introduction To Flash [Tutorial]

    Adobe Flash is a professional, complicated program used to created buttons, banners, advertisements, and more commonly among the online forums, animation. This tutorial will guide you from the creation of your first animation, to the tools used to make it, shortcuts and tips provided by an expert flasher, and the export of your animation.
    Note that this tutorial does no go into tweening. Another tutorial may be written later explaining it and describing its use, but not today.

    This tutorial was written using Flash CS 5 as the base. But will generally carry into other flash versions.

    So what will you find in this tutorial? Let me show you.

    -Opening Flash
    -Creating your first project
    -Tools (Building up to drawing your figure)
    + Selection Tool
    + Subselection Tool
    + Free Transform Tool
    + 3d Rotation Tool
    + Lasso Tool
    + Pen Tool
    + Text Tool
    + Line Tool
    + Rectangle Tool / Oval Tool / Rectangle Primitive Tool / Oval Primitive Tool / Polystar Tool
    + Pencil Tool
    + Brush Tool / Spray Brush Tool
    + Deco Tool
    + Bone Tool / Bind Tool
    + Paint Bucket Tool / Ink Bottle Tool
    + Eyedropper Tool
    + Eraser Tool
    + Hand Tool
    + Zoom Tool

    -Brush Tool Attributes
    + Stroke Color
    + Fill Color
    + Black and White
    + Swap Colors

    +Drawing your background
    +Adding a Layer for your character

    -Drawing Your Stickman
    -The Timeline
    +Adding Frames
    >New Clean Frame
    >Duplicate Last Frame
    +Some layered drawing style
    +Navigating Frames
    +Playing the animation

    -The framerate
    -Exporting your animation
    -A list of helpful tips mentioned through the tutorial

    So I assume you have flash, and that’s why you’re reading this tutorial for animating. If you do not have flash, I suggest you either fork up 500 bucks or try to get it by a more disreputable means. But I will assume you've paid for your version and own it completely ^_^

    In assuming you already have flash, I will not go into how to install and register; you should already have this done. If you do not, go read the official documents on Adobe’s website. I will take you from this step.

    A. Opening Flash

    This should be no problem, but just in case, I will go through it. Go to your desktop, because in installation, a shortcut to Flash should have been placed on there. If you chose not to put a shortcut on the desktop, and you don’t know where the program is, you are a moron. A good place to start looking however is under My Computer>C:\>Program Files or My Computer>C:\>Program Files(x86)
    You’ll want to double click the Flash icon (Which should look like a red book with Fl written on it) A splashscreen should pop up saying that the program is loading, followed by the application itself, it should look similar to this:

    (Note that it may look differed as I have my tools set up how I prefer them)

    If you have not registered your version of Flash yet, a box may pop up prompting you to register or continue the free trial.

    There you go! Flash is open, the rest should be like a trip through hell with rocks in your shoes!

    B. Creating Your First Project

    So you’ve opened Flash. This is good, it shows you know how to click your mouse button, and without this valuable skill, your attempts at Flash would fall flat.
    So let’s create a project to start animating on!
    First, you’re gonna want to click on Flash Project

    Now this window should throw itself up in front of you:

    What you’re gonna do here is type in whatever you want to call your first project. For this, we’ll use Tutorial as the name.
    Then in the spot where it says Root Folder, you’re going to click the little folder icon next to it.

    Now, simply navigate in the new window to wherever you want to save your Flash Document. For now, I’m going to put it in My Documents under a folder called Tutorial.

    QUICK NOTE: When you make a new project, you might notice this:

    When making a new document, if you plan on Jointing with someone else (Where you start an animation and pass it on to someone else) be sure to ask them what version of flash they use as older versions of flash, such as Flash 8 (the most common animating flash version) do not support Actionscript 3.0. Instead, you'll want to set the Script: to Actionscript 2.0. But if you're not jointing, then you really don't have to worry about it, just keep it in mind.

    Now you can click Okay and Create Project
    This screen should now confront you.

    Great job! You’ve got a project up. You’re ready to start animating! On wait…no, you’re not. You’ve got to learn about the tools before you even try to touch the soft, malleable surface that is the canvas for your wildest dreams. But don’t worry, it shouldn’t take long to go over, especially if you stop reading here and go buck wild messing with everything.

    C. Tools!

    So you aren’t allowed to paint your imagination onto the page yet, you first have to dedicate hours to training with the tools of the trade, possibly after several months of brutal work, you might, MIGHT, be able to draw a stick man.

    Naw, just kidding, I’ll try to go over these as quickly and painlessly as I can, explain what they do, what their icons look like, and any other little tips concerning them.

    Some of these tools have a small arrow in the bottom right corner of their icon. This mean that there are more than just one tool inside of it. To select one of the hidden tools, select the tool, and then click it again after selecting it, a small bar should pop up next to it giving these hidden options, select the one you want to use.

    1. Selection Tool
    The Selection tool allows you to select connected parts of a layer and allows to you move them around. For instance, if you have two lines, you want one closer to the other, so you use the select tool, select one and move it over.

    2. Subselection Tool
    The Subselection tool allows you to select parts of a drawing and edit the curves on it. For example, if you have a squiggly line, and you want one curve sharper, you’d select the line with the Subselection Tool and use the curve points to edit it.

    3. Free Transform Tool
    Free Transformation Tool allows you to select a part of a drawing and rotate, shear, move, and change the size of the selected. For example, if you have a line that you’ve drawn to very well, but want it to be at a different angle, select the line and rotate it with the Free Transform Tool

    4. 3d Rotation Tool
    (Please ignore this tool for now)

    5. Lasso Tool
    The Lasso Tool allows you to select a part of a single shape. You can then use the Free Transform or Subselection Tools on it to edit it. For example, you’ve drawn the ground on an animation, and you want a part of it to pop up, if you try to use the other selection types, it selects the whole shape, but if you use the Lasso Tool, you can select only the part of the round you want before using the other tools to edit it.

    6. Pen Tool
    The Pen Tool allows you to create long, curving lines like so.
    c6.1 c6.2

    7. Text Tool
    The Text Tool allows you to place beautiful fonts into your animations or other work.
    c7.1 c7.2
    (More on editing fonts, font size, and font color later)

    8. Line Tool
    The Line Tool allows you to draw perfectly straight lines.

    9. Rectangle Tool / Oval Tool / Rectangle Primitive Tool / Oval Primitive Tool / Polystar Tool
    This tool (as I don’t feel like typing it out again) allows you to draw ovals, rectangles and polygons easily and perfectly. It also allows you to fill it with a different color that what its outline is. More on this later.

    10. Pencil Tool
    The Pencil Tool allows you to draw thin freehand lines.

    11. Brush Tool / Spray Brush Tool
    The Brush tool allows you to draw freehand lines of varying thickness and color. This is what we’ll use when drawing our stick men for the animation later.
    The Spray Brush Tool lays down a splatter of small dots, good for spray or blood.

    12 Deco Tool
    The Deco Tool fills the enclosed area with a selected decoration. More on this later.

    13. Bone Tool / Bind Tool
    (Please ignore this tool for now)

    14. Paint Bucket Tool / Ink Bottle Tool
    The Paint Bucket Tool fills an area of similar color with the new, selected color.
    The Ink Bottle Tool adds a thin border to an area of similar color. More on how to select the colors later.

    15. Eyedropper Tool
    The Eyedropper Tool changes your Fill Color to whatever color you click in the animation. More on colors later

    16. Eraser Tool
    The Eraser Tool allows you to erase undesirable parts of your drawings. More on this later.

    17. Hand Tool
    The Hand Tool lets you move your canvas around to get a better look at it. This is very useful when zoomed in. You can also use the sliding bars at the bottom and left side of the canvas to achieve similar effects.

    18. Zoom Tool
    Zoom tool allows you to zoom in on the canvas to draw in a more exact and consistent fashion
    (Note, the hotkeys for these are CTRL+ to zoom in and CTRL- to zoom out.) More on Zooming later.

    C.a The Brush Tool Attributes

    Before we go on to Colors, you should know how to change the diameter, shape, and pressure of the Brush Tool. When you click on the Brush Tool, a small bar should pop up under your toolbar:

    The first three icons in this toolbar will not be covered in this tutorial as they are not relevant to getting started and will be used for more advanced animations once you’re comfortable with the program.
    But the next three icons are of great importance.
    The first is to change the size of the brush. Click it for a list of brush sizes. The current brush size is marked with a little square bullet. I prefer to use the largest brush size available for my animations.

    The next icon is for the brush shape. Click it to see a list of shapes for drawing. The current brush shape is labeled with a square bullet.

    And the final Brush setting you need to know about applies to Drawing Tablet users. Click this final icon to apply pressure. That way, the thickness of the line you draw becomes thicker the harder you press on your tablet.

    Now you may move on to Colors! Yay…

    D. Colors

    So by now, you should have a general grasp of what the tools are and what they do…right?
    Anyways, we’re onto Colors now. When working with basic shapes and drawing you’ll really only need this small toolbar of color management.

    The first color, the one with the green in it with the pencil next to it is the Stroke Color. This is used for when drawing a shape such as a Polygon, the selected color is drawn around the object as a border as shown below.

    The Stroke Color is a purplish color, and you can see it borders the entire shape.
    The color on the inside of the shape though, is the Fill Color. This is the little square of color on the toolbar with the paint bucket next to it

    To change either of these colors, simply click on the small rectangle, a color pallete such as this should pop up:

    Now when messing with colors, you have to remember which ones you used on which characters, keeping track of colors can be easier if you use the eyedropper tool. You can also make gradient fills by clicking on the small gradients at the bottom of the color chart.

    Watch out when using the Pencil, Line, Brush, and Pen tools! The Pencil, Line, and Pen tools use the Stroke Color when drawing, while the Brush tool uses the Fill Color when drawing. Like shown below;
    note the two colors and the colors of the lines.

    E. Text

    So you think you’ve got a grasp on the tools, the colors and how they interact? If not, then go play with it, GET COMFORTABLE before continuing. And that is my advice to you sir (or ma’am)

    Now we’ll go over how to change text size, the font used, and the color of the text.
    So lest start by writing something down eh?
    [img]http://www.use.com/media/2012/0302/2251138/p_050.jpg[img] e1.

    As you can see, the text’s color is the same as the fill color. When you change the fill color with the text box selected, the color of the text changes.

    So now you want to change the font, the size, maybe use spellcheck? Well take a gander at the pic below.

    Wow! All of the tools you need under a single tab? Almost too good to be true; but it is.
    So now we’ll go through how to change your font!
    Just go up to our magical Text tab and go to Font. You’ll notive in this next pic, that I have Cerebro selected. It puts a nice little check next to it. A lot of the texts have little arrows next to them, these allow you to choose the Italic, Bold, Bold Italic etc…Just so long a the font supports it.

    Now let’s change the size of the text. Go back to our Text tab and go down to Size. This list of font sizes should pop up with a little dot next to the current size of your text.

    Now we’ll play with the Style. So go back to the Text Tab and go down to Style. Play around with selecting different parts of what you’ve written and change them to superscript, subscript, bold, italic, etc…

    Now that we’ve got that out of the way, it’s finally time to draw our background! The start of an actual animation! You’d better be frikkin’ excited.

    F. Layers

    In every good animation, there are a ton of layers, all with different bits and pieces of the animation scattered across them. Now, look for your layers…
    I hope you found, them, but if you did not, I’ll show you where your layers are.


    This is called the timeline. Your layers are off to the left of this where you see Layer 1. I’ll go into the Timeline a little later so as to not throw too much at you at a time.

    So for now, we’re going to make a new layer! To do this, just click the little sticky note looking icon in the bottom left of the layers area.
    You now have two layers. Layer 1 and Layer 2.

    So let’s rename layer 1 to Background. To do this, double click on the name of the layer and type in your new name then press Enter. Next, rename Layer 2 to Head.

    Now we’re gonna draw ourselves a background! Use the tools I’ve gone over to draw yourself a spiff background. Make new layers to color in lines, and have fun.
    I will not go in depth on drawing, but will show a background I’ve drawn up pretty quickly.

    I’ve used the line took combined with the paint fill tool to make a small stage for my stick men to battle on.

    G. Drawing Your Stickman!

    Finally! You get to draw your little man! Remember that layer we made labeled ‘Head’? Well, let’s take the Oval Tool and draw ourselves a stickman’s head. Hold the Shift key while dragging your mouse to make the head perfectly round.

    Now make a new layer and name it Body.

    On your new layer, draw your stick man’s body and his legs using the Brush tool. DO NOT DRAW HIS ARMS. One good technique to use when drawing your stickman, is to draw each bone in his body, for instance, you’d draw the upper half of his back in one stroke, the bottom half in the next, one thigh, one calf, one thigh, one calf. Like in the GIF below.

    (please note that you do not have to make a new layer for Arms, you can just draw it on the body layer with the legs. I do it mainly to be able to smooth them out without messing up a well drawn body)
    Now that we’ve got his body, we’ll make a name layer and name it Arms.

    Now use the same segment drawing technique as when you drew the body and legs to draw the arms.

    Boom! You have a stick figure! Now simply go through the layers and fill in any awkward dips or anything to smooth is out a bit. If you want to erase a part of the guy, keep in mind that the eraser will erase everything under it on all layers. To keep this from happening, lock the other layers by clicking the dots next to them under the lock symbol in the layers area. I just confused myself, just look at the pic below.
    That way I only erase what I want to.

    Now we’re ready to animate!

    H. The Timeline and Animating

    Before we get into actually animating anything, we’re going to need to make it so we can animate effectively and smoothly. We’ll need Onionskin. If you don’t know what onionskins are, it’s the shadow of the previous frame laid onto the current frame so you can draw more accurately. Look at the pic below for a more visual representation.

    Those shadows are onionskins of the two frames before the current one. To turn onionskins on, simply click the little button I’ve squared off in orange.
    To change how many frames back the onionskins go, simply drag this little thing back and forth. At its default, it shows two frames, and this is how I normally roll with it.
    (Note that this box will only show up when onionskins are on)

    Now a little explanation into keyframes, or just Frames as I will refer to them here. Think of each keyframe as a different image in a flipbook animation (when you take the little sticky note pad and draw a different thing on each one and then flip through it really fast to make it look like its moving). This will help you in your efforts to understand what they are.

    Now we’re ready to animate! For this tutorial I will just animate a ball. I won’t go into easing, spacing, physics, etc. in this tutorial, just how to get the basic animation out. You’ll have to read more specific tutorials for those skills.

    I have a ball.

    I want to make another frame on the timeline to move the ball across the screen. Well, I have two options.
    First Option: Press F6 to create a new frame with the current shape still there. I can then use the selection tool to move it across the screen.

    Second Option: Press F7 to create a new, blank keyframe, and then redraw the ball on the new frame.
    As you can see, they are very similar, though the first way of doing it made it much easier and faster to do.
    (Also, the second frame's ball is smaller than in the first. This is a downside of drawing a new frame)

    You’ll be using the F6 method to move the head of your stickman around. With this style of animating, you’ll move the head about, making new keyframes using the F6 key and then moving it with the Selection Tool. You’ll move it around, doing any actions like running, jumping, fighting, etc.
    Then you’ll go back to the first frame on your Body layer, and draw out the head’s body, then use the F7 key to create a new blank frame on that layer. You’ll redraw the body in a new position, following the head as it moves. Do this until you catch up to the head’s frames, then go back and do the same on the Arms layer. You’ve then animated your stick man. If you’re animating a long animation, you might want to break the movements into section, moving the head so far ahead before going back and working on his body, and then moving the head again.
    This method of animating is very time consuming and can be weird to get used to. But it frequently increases the quality of an animation.

    Now that you’ve got your rough animation done, you’ll have to go back and edit it. To navigate the frames, simply click on the frame you want to go to, and the canvas will show you that frame, easy enough right?

    But you’ll want to watch your animation before you edit it right? Well you can use the Play button under the timeline to do just this.

    I. The Framerate

    Wow, you’re animation really zoomed by didn’t it? Well, this is a deal with the framerate. A lot of advanced animators use a high framerate (How fast the animation plays), but as a novice, I personally prefer one around 15 FPS (Frames Per Second) To change your framerate, there’s a small number under the timeline colored blue ’24.00 FPS’. To change this, click on the number, and drag your mouse, the framerate will change. Play with the framerates until you’re happy with how fast your animation plays.

    J. Exporting a Finished Animation

    Now that you’ve got yourself a spiffy animation, I’m sure you want to upload it to the internet to show off, receive constructive criticisms, or just to have online. To export an animation, go to File>Export>Export Movie.

    This window should pop up with the name of whatever you named your project with a .swf at the end. Rename it if you like and press Save. TADAH! You’ve exported your animation.

    Now go to wherever you saved it and double click it. If it comes up with something like “Unknown File Type” or something, like so:

    You’ll want to select “Select a program from list of installed programs” and press okay.
    This should throw itself at you.

    Now select Firefox, or if you don’t use Firefox, find Internet Explorer, Chrome, or whatever you use as a browser. Make sure the box “Always use the selected program to open this kind of file” is checked and press okay. You can now watch your .swf animation in your browser. But good lord it’s huge and doesn’t stay within the confines of the canvas window…well, we’ll upload it to the net and that’ll be fixed.

    To upload your animation, you’ll want to find a .swf upload to upload it to…here are a few so that you don’t have to go out into the wild jungle that is google search.

    Now just go to one these sites, follow the instructions for uploading, and you’re done! Distribute the link to your animation as you see fit.

    K. Credits

    This tutorial was written by Mike Lewis. I’m a novice flash animator and thought that a tutorial on getting started would really benefit people who get flash to animate stick man battles and such, then have no clue what to do.

    The layered animating style was copied from Conor, a Veteran Level Flash animator from AP. Conor also answered a bunch of nooby questions of mine for this tutorial, so I thank him for not ripping my head off and being a huge help instead.
    Thanks also to him for getting me into Flash through encouragement and tough criticisms.

    Credits also to all of my friends on AP who’ve encouraged me and kept me writing and animating.

    I hope this tutorial has helped someone get started in Flash animating, and I hope to do more as I get better with the software.

    If you’d like to contact me, you can get ahold of Spineless Mike on AlternatePlatform.com forums or Spineless Mike on the DarkDemon.org forums.

    Spineless Mike

  2. #2
    The Little Frij
    Join Date
    Jul 2010

    Re: Spineless Mike's Introduction To Flash [Tutorial]

    That was an EXTREMELY good tutorial! I reckon it should be stickied.

  3. #3
    Junior Member Spineless Mike's Avatar
    Join Date
    Feb 2013

    Re: Spineless Mike's Introduction To Flash [Tutorial]

    Thank you very, very much


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts