Introduction to Flash Animation

07Jul06

Overview

This tutorial will give a quick and easy, and hopefully fun intro to Flash animation with the new Flash Professional 8. It is for someone who has not even touched the surface of Flash.

Terms to Know

Frame – All I really want you to know for this tutorial is what a “frame” is (which we’ll work with later). It is a single rectangle in your timeline, which we will also work with later, and it contains a single “step” in your animation. Come back to this part later, and you will probably understand what I mean better.

Intro

Welcome, to the awesomely fun world of animation! You are about to take your first step into this exciting multimedia adventure using the new Flash 8 Professional Edition from Macromedia (now owned by Adobe). But first, their are some ground rules we have to go over.

First of all, what is the history of Flash? Is it new? What can I do with it?

Well, Flash was acquired by Macromedia in 1996, designed to create and deploy (through the common “Flash Player”) rich interactive animations for the world wide web. Before Macromedia aquired this software, it was known as FutureSplash, created by the FutureWave company. Even before Flash, there were animated GIF files (which of course still exist). These files are much less interactive and are usually less eye appealing. However, GIF files are still an important part of the world wide web and for that you should not only think about Flash. Anyway, the newest version of Flash which we will be working with in this tutorial is called Flash 8 (in two versions “basic” and “professional”) which was released quite recently – August (the eighth month) 8, 2005 at 8:00 A.M. – cute, eh?

You can do A LOT with Flash. I know this sounds familiar, but the only limit to Flash is your imagination (within the boundaries of the basis of the program, of course). Have of ever seen annoying, but somehow addicting interactive advertisements on websites? How about addicting website games? Or maybe you’ve seen a fancy swirly logo on a website? You were likely viewing a Flash animation through the Flash Player, created by someone in the Flash IDE (integrated development environment) and later published into its viewable and deployable SWF format. But anyway, enough of this boring stuff! Let’s get started.

Installation

For this tutorial, you are required to have Flash 8 Professional. If you do not have it, you can obtain a free 30 day trial from Adobe at https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en%5Fus&product=flashpro. When the trial period runs out, and you decide that Flash is something you’re really interested in, you can buy it for $699 (professional edition, more robust) or $399 (basic edition, more stripped down). I will not go over the steps of installation since it’s pretty straight forward.

The Design Environment

When you have it installed, run Flash 8. When it is done loading, you will be confronted with a start-up screen. Choose “Flash Document” (under the “Create New” column) and you will soon be inside of the design environment. On the left side of the screen, you will see your Toolbox. This is familiar to almost every designing program (even microsoft paint!). You can draw circles, squares, move stuff around, resize shapes, and do all kinds of things with the toolbox. At the very top of the screen, you will notice something slightly intriguing – The Timeline. This is where the main action goes on in Flash. You can add frames, layers, and do much much more in the timeline. More on this later. On the right hand side of the screen, you will notice a few panels. At this level of your Flash career, don’t worry about these panels. We will not be working with them in this tutorial. At the bottom of your screen is a panel with a few tabs including “properties” “filers” and “parameters.” Just as its name implies, the properties tab will contain various properties of your project, shapes, and tweens (which we’ll get into later). The filters tab allows you to add cool things such as drop shadows, blurs, and glows to your text and shapes. If you have ever worked with Adobe Photoshop, the Flash filters are similar. The parameters tab contains advanced information for components, which we will not get into in this tutorial. You may also notice an “actions” panel — This is where more advanced coding known as actionscript goes on for your projects. This tutorial will barely scrape the surface of actionscript, but you should check into it more on your own if you have an interest in Flash, or even programming. Finally is the center of your screen, the big blank white square. This is known as the stage. Here is where you can add shapes, various other things, and edit the graphics of your animation. Whatever goes on the stage is what displays in your final published animation.

Tweening

In the old days of animation, in order to make something look like it was moving, an illustrator or animator would have to draw a bunch of different pictures, each one similar to the previous, but changed in just a small way, similar to how a flip book works. This was known as in-betweening (because they had to draw all of the frames in-between the start and end point of the animation), but it was later shortened to tweening. Thankfully, in flash you do not have to draw all of these in-between pictures. You more or less only have to draw the starting point of your moving object, and the ending point. The rest is done for you! So lets make a circle move across the stage in Flash now.

First, select the “oval” tool from your toolbox (or press the “O” key on your keyboard). Draw a small circle on the stage – If you want it to be perfect cirlce, hold down shift while dragging across. Now re select the black cursor from the top of your toolbox, and highlight the circle you just drew. You will notice a lot of little white dots over the circle. These dots tell you that your circle is a raw shape. This means that you can only use Flash’s “shape”
tween on it, which twists shapes around and stuff. To use the “motion” tween, press F8 on your
keyboard while the cirlce is highlighted to convert your circle to a symbol. Choose the movie clip radio button, and in the name textbox, type “circle_mc” (_mc for movie clip) and click OK. You will now notice that your circle no longer has a bunch of white dots on it. Instead, it has a light blue border around it, telling you that it is a symbol (in this case a movie clip symbol). This means that you can now use the motion tween on your object. Now we will use the timeline. Right click the small rectangle under “10” (which stands for frame 10) and select “Insert Keyframe” from the pop up menu. Your cirlce will now appear on every frame from 1 to 10. At frame 10, click and drag your circle to a different point on the stage. Finally, click any frame between 1 to 10, and in your properties panel, select “Motion” from the dropdown list next to the text “Tween:” You will notice that the frames from 1 to 10 are highlighted purple in your timeline with an arrow across them. This symbolizes a successful motion tween. If the arrow is broken appart in a dashed line, chances are you didn’t convert the circle to a symbol. Hold down control and press enter on your keyboard to test your movie. You will notice that the circle moves from the first point you drew to the second point — and you didnt have to draw any of the frames in between! You’ve probably noticed by now that your animation loops over and over. We are
going to add some simple actionscript to stop this looping behavior. Double click on frame 10 in
your timeline and hit F9 on your keyboard to bring up the actions panel. First, make sure that the “Script Assist” button is not pushed in. Next, in your actions panel, type:

stop();

This statement tells your animation to stop playing when it gets to frame 10. Notice the semi-colon at the end of the stop statement. This, like in many other languages such as Java and C++ tells the computer that it is at the end of a line of code. Close your actions panel by hitting F9 again. Congratulations, you have successfully typed your first actionscript code Notice that in frame 10 of your timeline, a little “a” has appeared. This tells you that there is actionscript in that frame. Test your animation again by holding down control + enter and notice that the circle no longer loops. Congratulations once again, you have successfully created your first Flash animation. Although it is not much, I hope that it intrigues you to continue this path down animation.

Final Project

Now lets create something a little bit more interesting. Hold down control and press n on your keyboard and click ok to create a new flash document. In frame 1, draw a large circle on your stage. This time, since we will be working with a shape tween rather than a motion tween, we will not convert the circle to a symbol. Next, at frame 15 in your timeline, right click, and select “Insert Keyframe” or simply hit F6 on your keyboard while frame 15 is selected. Now, at frame 15, delete the circle. Select the text tool from your toolbox, and use it to write “Hello World” on the stage. Go up to the black cursor in your toolbox, make sure your text is selected, and hit control + b on your keyboard two times in a row. This will convert your text to a raw shape (notice the white dots again). Finally, select any frame between 1 and 15, and in your properties panel, change the tween to “Shape.” You should notice that frames 1 to 15 in your timeline are highlighted green with an arrow. Again, if the arrow is broken in a dashed line, chances are you forgot to break the text into a raw shape. Click anywhere on the blank part of the stage to display your project properties panel. At the top-right side of the panel where it says “Frame rate:” change the textbox to 20 (right now it should be at 12 by default). This is how many frames your animation will go through in one second, and in this case, 20 f.p.s. (frames per second) will make our animation run more smoothly than 12. Hit control + enter on your keyboard, and be mesmorized as your circle quickly re-shapes and twists itself into the text “Hello World”🙂 I’ll let you try to add a stop action on your own to test your knowledge. Now you have a feel for both the motion and shape tween, which are two fundamental parts of almost every animation.

Publishing Your Animation

If you would like to create a SWF file to give to your family and friends, or even post on the internet, go to the File menu, and select “Publish Settings.” By default, Flash, and HTML should be checked. If you have not yet saved your Flash project, click the little folder next to the Flash and HTML textboxes, and save your files in an easy to remember place such as your desktop. Click the “Publish” button and your files are now deployable anywhere with the Flash Player (which is a lot of computers). Go to the place where you published your files, and double click the HTML version. A webpage will be displayed with your animation. You may want to view the source to see exactly how it displays your animation, so that you can do it on your own personal sites (such as myspace or whatever). Please note that the swf file type cannot be edited in Flash (unless you get one of those fancy swf decompilers), so you still have to save your project as an editable FLA file by going to File and Save As.

Congratulations, you have successfully finished my tutorial.

If you would like to learn more about Flash Animation, go to learnflash.com where you can sign up for a free newsletter in which every week or so, the guy sends out a fun and easy video tutorial of a “Flash tip or trick.”



7 Responses to “Introduction to Flash Animation”

  1. Wonderfully written story.

    Severely,

    F.C., JR.

  2. 2 slp

    thank you, thank you! i began with an introductory book, wasted many “early” hours, and finally feel a little bit like I know wht i’m doing!

  3. 3 beck: age 15 :P

    would u suggest any good websites that can help me make a basic platform game besides kuripa.com and newgrounds.com?

  4. Shit website,yeah,shit hot man !!!!!!!!!!

  5. What’s up it’s me, I am also visiting this site
    on a regular basis, this web site is truly good and the visitors are truly sharing good thoughts.

  6. 6 Nathan Adler

    Need solutions to problems related to hacking of any sort ? Look no further . Add up patkins09 on kik or contact him via mail at cyberian414@outlook.com for enquiries .


  1. 1 cool computer chair

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: