Flash MX 2004 Professional : Beginners Flash Tutorial (released).

[Ganondorf]

Since no one was joining my site anyway I decided to release this to the public in a new thread. All I'm asking is that you post a reply about the tutorial. Thanks.

Ok, here it is!



Note: I am working with Flash MX 2004 Professional. This tutorial is geared towards MX. I think any version will be fine, though.

Ok, welcome to the beginners Flash tutorial! This tutorial is going to cover the following:

Making objects
Working with the property inspector
Motion Tweens & easing

And also everything in between! Ok, lets get started, because you must be saying "start already...." by now.

Ok, open up Flash. You should get a screen like this:



This is the opening screen. It comes up when you start Flash and is extremely useful. On the right you will see your recently opened files (you'll probably have none like the picture if your just starting). We want to create something new, so just take a look at the Create New column and click the Flash Document button.



You'll now have a screen like this:


[Sorry for cutting off some of the picture, it was too large.]

The white part is your work area. Your tools are on the side to the left and there may be some extra panels on the right side. You'll want the properties inspector open for this tutorial. You can open it in the Windows menu.

There are two color types in Flash. A stroke color and a fill color. A stroke is a line, and it acts differently then a fill. That won't be covered in this tutorial.

Lets take a look at the stroke and fill colors.



When you draw a circle now, the stroke around the circle will be black and the fill will be white. Change the colors to your liking by simply clicking on the box. It will pull down and show a selection of colors. Notice while the pallette is opened your mouse turns into a little eyedropper. You may move your mouse anywhere in the Flash application and click, and you'll automatically pick up the color! Sweet. Choose two different colors for the stroke and fill, they can be whatever you want.

Next thing we have to do is make a circle and convert it to a symbol, because motion tweens only work with symbols. Before I do any further explaining, lets make the circle. Select the circle tool and click-drag a circle on the stage.

Important tip: By holding shift while your dragging the circle out, it will stay in proportion.



Next, double click on the stroke of the circle. See how it looks bolder and it has kind of a dotted pattern now? That means it is selected. With it selected, take a look at the properties inspector.



You'll see it has changed to accomodate whatever is being selected. The properties inspector controls sizes, colors, options, and is very important. Since my stroke is a little hard to see, I'm going to make it bigger.



Notice how as soon as you let go the stroke gets updated. You can deselect the stroke by selecting the black arrow tool (Selection tool) again and clicking anywhere where there is not an object. Next we want to convert this shape to a symbol. Selection tool still selected, draw a box around the entire circle.


[Mouse in first picture represented by black oval]

You will now have the entire circle selected. Hotkeys in Flash are extremely helpful/important, so you should start learning them as fast as you can. The hotkey for making a new symbol is F8. You will use it a lot in your Flash-making. When you press F8, a box like this will appear:



There are three types of symbols, though they won't be covered here (sorry). We will choose the graphic type. Name your symbol "circle." When your done, it'll look like this:



All a symbol is is a container for "stuff." Now that the circle is a symbol, you can double click to get inside the container, and double click anywhere to go back out of the container. Additionally you can access the symbol from your library (if its not opened open it from the Window menu.)

Ok, time for the animation part. Before we jump right in let me explain the timeline to you. This may seem a bit confusing but with a little practice its very easy. Take a look at this diagram I made:



I hope that explains any questions you might have about the timeline. Ok, now for the last part! Making the tween. Right click on frame 20 of the timeline. Select "Insert keyframe." All the frames in between your new keyframe and the first frame will be automatically filled in.



Ok, make sure your on frame 20 by clicking on it, then move the circle anywhere on stage by clicking and dragging it. After your done moving it, go back to frame one. See how on this frame the circle is where it was before you moved it? You'll find its there for all frames before the keyframe. Select frame one, and look at the properties inspector. See how it changed to the properties of the frame? Where it says "Tween:" select "Motion tween."



Notice how on the timeline how frame one starts an arrow that moves all the way to the next keyframe. Select frame one again and press the enter key. You'll see a little preview of your animation. If you did it correctly, the circle will move from where you put it first to where you moved it. Cool, huh?

Experiment with easing and rotation (though you may want to make a square for rotational tweens, you won't be able to see it on a circle.) Just mess around with the properties for frame one and check out your results. You can preview them like a little movie if you press CTRL+Enter or go to the Control menu and hit Test Movie.

Good luck with your further Flash. I hope this helped!

My source code for reference: Source.fla
My output: Source.swf

Please posts comments and questions on this tutorial! Thanks for reading!

[Otaku]

I joined your site...:( lol.

[kds]

Thanks vash.

[Pharnax]

Wow i actually read it all, and it helped me. Thx Vash. Could you make more of these tutorials? you're great at it!

[Turin]

thanks vash.