Flash Tutorial: The Basics
Flash Tutorial Part 1: The Basics.
Intro
Alrighty this is my first tutorial EVER written, so if it aint all that good, then don't blame me. This tutorial is about the basics of flash. So it's gonna start from the very basics and I¡¦m gonna think that you know nothing about flash. Don¡¦t expect to be creating award winning animations from this tutorial, all you should get from this is the basics. So here goes...
Edit: Updated this tutorial for Flash MX
What is Flash?
Flash is a platform that allows people to publish interactive, or non-interactive, content to either cd-rom or most commonly, the web. There are many other mediums you can use and publish flash files (swf) to, but these are just the most common. It is an extremely easy to use application, and you can publish extremely good content.
Flash, like many other authoring programs has a built in scripting language. This language is called Action Script and is very similar to JavaScript. Once you know the basic syntax of Action script, then you'll be able to start making terrific, interactive movies.
The flash version I am writing this tutorial for is Flash MX. So make sure you got that version.
That's enough abOuT flash, now I wanna leARn flash.
So now your ready to start learning and can't wait to get stuck into flash eh? Well here goes. Open up flash and what do you see? A lot of sections of the screen are split up, and you see some toolbars here and there. Well to start off, I¡¦m going to show you how to close all these ¡¥toolbars/boxes¡¦ (they are called panels). Click window (on the same sections as file, edit menus). A whole lot of options will pop down, and some where near the bottom, you¡¦ll see panel sets, save panel set, and close all panels. Panel sets just gives you a short cut to making your flash authoring environment look the way you want it to. There should be some default panel layouts. Save panel set is well, an option to save the panel layout you currently have. (The flash version I¡¦m working in at the moment, version 6.0 has some bugs with the panel layouts. So don¡¦t get too worried if your panel sets keep stuffing up and you don¡¦t know what the heck is going on.) Anyway click on Close all panels. Hurray! The interface looks at bit cleaner. Now here¡¦s a short rundown on what these toolbars/sections do.
You should see a menu bar at the top, (file, edit, etc.) the toolbar on the left (cursor tool, paint bucket, etc.), a timeline to the top, and the main working area in the middle. All of these speak for themselves. The area that you will always be using is the main work area or the stage. It is in the middle and shows you what your viewer will see (most of the time). The timeline is well, the timeline. It is used for animating things in flash and placing actions on specific frames. (More on that later¡K) Something new to flash MX, and new to all the other MX products is the properties panel. I love this thing! In older versions, information would be scattered on different panels, but the properties panel shows you the main and most used ¡¥properties¡¦ when making flash files. To open that panel, go to window „³ properties (or just press Ctrl+F3)
So to start off, you¡¦re gonna make a circle that becomes bigger, and then shrinks back to its normal size. Firstly on the left of your screen, you should see a little button, with a circle/oval in the middle. If you can't find this button then just hover your mouse over a button for a while, until you can see something like ¡¥use oval tool etc¡K¡¦ Click on this button and now click on the stage (your main working area, the white space by default) and drag. Whola! You should see a circle on the screen and as you click and drag the pointer what happens? The circle gets bigger! Easy isn't it? Alright now you can let go of the mouse. You will see there is an outline color and a fill color. You can change these colors by changing the colors in the two small boxes underneath the tools on the left. Experiment and change some colors! That¡¦s what we'll call the 'original' size of the circle. Next we will animate it.
See the timeline near the top? If you look to the left of the timeline, you should see layers (layer 1 in this case). Layer 1 should be selected. If you want to change the layer name then you can do so by double clicking the layer name in the timeline. A box appears and just type ¡¥cool¡¦ into the text field. There, now you've got a kick ass circle on your stage, and that circle is on the layer with the 'cool' name. Are you following it so far? On the timeline you should see little boxes or vertical rectangles. Each of these represents a frame. Click on frame 20. If for some reason you can¡¦t find frame 20, it would be under the number 20. See the numbers at the top of the timeline? Now click the frame that is in frame 20. It should now be a shaded color, meaning it¡¦s selected. Does that mean you¡¦ve got an animation (nearly) that will run for 20 frames? No it doesn¡¦t. This is because you've selected frame 20, but haven't actually put a frame at frame 20. Get me? Moving on, right click on the 'cool' layer at frame 20. A pop up menu should appear. Look for the words ¡¥insert frame¡¦ (the first thing you can click) or you can just press F5 on your keyboard, while frame area 20 is selected. Fun! Now if you can remember how to, go back to frame 1 (for the smart ones, see the little numbers on top of the timeline? Now look for number 1. Yes it's the one furthest to the left! Now click on it and your on frame 1.) Now right click on frame 1 on of the 'cool' layer, and you should see 'create motion tween' (yes the first one in the menu.). Click this and you should see that frame 1 to frame 20 is all a purplish color with dashed lines. This mean¡¦s there is a motion tween (i.e. coming animation) but it is not completed or has not got a final frame.
Note: motion tween is basically a shortcut to creating animation or, motion. What you do is tell flash were the motion starts, then tell flash were the motion ends, and flash works out all the frames in the middle.
So you see the frames are purple? Now click on frame 20 again, right click and choose 'insert key frame'. You should see that frame 20 now has a little black circle in its frame...just like frame 1! And there is now an arrow in the purple frames, indicating that the motion is complete! You should also see the outline of a blue box around your circle. This means it is a symbol. (Don¡¦t worry about that just yet) Now you have your animation¡Kbut nothing moves. That¡¦s because the 2 key frames look exactly the same. You want the circle to get bigger right? Just make sure your on frame 20. Now select the circle on your stage. (If you don't know how to do this...duh...then just select the pointer tool, click and drag around the circle, and wola, you should have the circle selected. This means the outline of the blue box around it) Now Right-Click on the circle „³ scale. You should see a square box around the circle now, with little boxes in each corner. Click and hold one of these edges, and pull it out. Wow, now the box is getting bigger isn't it? If you want the box to stay in the same ratio, just hold down the shift key while pulling at one of the edges. When you've done this and made the circle bigger, go back to frame 1. Now hit enter on the keyboard, and it should run through your timeline. As you should be able to see, the circle gets bigger, until it reaches the size you made it in key frame 20. OoOo since your moving pretty fast through this (=/) go to key frame 20 again. Select the circle and click and drag it somewhere on the screen. That moves the circle to a different place! Wow... Now if you let go and go back to frame 1 and hit enter, you'll see that the circle grows bigger AND moves to a different place too! Amazing! But the motion is pretty rough and crappy at the moment, so we will change the FPS (frames per second). The normal for television is 15 frames per second I think, so we¡¦ll make it a bit smother and bump it up to 25 FPS. Do this by clicking anywhere on the stage with the pointer tool. (White empty area.) Now look at the properties panel, and you should see size: (a button with the current size of the movie). Click on this button and a dialogue box appears. From here you can change the dimensions of you file, background color, frame rate and other things. We¡¦re only interested in the frame rate so select the box and type in 25 and click OK. Now go back to frame 1 and press enter. It looks a bit smoother yea? (the normal frame rate is use is 30 FPS.) If you think you want the circle to grow bigger and move in a longer amount of time, then select frame 20, click it again and hold down. Now drag it along the timeline to the frame you want. Well done there's your first flash movie. So you want to publish this...thing and show all your friends? Well make sure you've saved it somewhere on your hard drive. (File--save as „³ whatever.fla) If you want to publish it now, you need to go to file „³ publish! Easy yea? But where is the file you say? Well just go to the directory you saved your original file to, and there should have a swf file in there somewhere, using the same name as your original file ('whatever' in this case).
For those who wanna go a bit further, like changing the color of our circle, read on.
It¡¦s very simple. When you¡¦ve finished changing the size of the circle, click out onto the empty stage, and then click back on the circle. The properties panel should have an option like color: (a button/dropdown menu). Click the dropdown menu and select ¡¥tint¡¦. Now over to the left of ¡¥tint¡¦, there should be some new options. The little box with color in it is obviously the color you want to choose. Click the box and pick a color. Don¡¦t worry about the other options yet, although I would recommend you experiment with them.
Going over what we learnt here: the basics of flash. What the timeline, stage and tools can do. How to go to different frames, how to add key frames and how to use simple motion tweening. Fun wasn't it? Now for the so called smart ones out there who think this is too basic, let me tell you something. Motion tweening is one of the most important (if not the most important) tool/aspect for animating in flash. Then of course there's action script which opens up a whole new dimension of flash, but that will come later.
Outro
So did you like my tutorial? A bit too basic? Please send me comments. Hehehe. If you picked up the real basics of flash from this tutorial, and can work out how to apply them to a bit more complicated effects, then I¡¦ve done my job.
Last words for this basic tut. I never planned to make this tut incredibly descriptive or anything. You see, I believe in this statement regularly used online: RTFM. For those who don't know what it stands for, Read the ****ing Manual. And that basically means, don't expect to be spoon fed the answers. Do some research, learn the basics, put some time and effort in, and experiment. I believe that's the best way to learn.
:D
morfius
[email protected]
