Macromedia Flash 8 Tutorial

[Fierce Deity]

Just what the title says. I will be teaching the basics of flash 8, along with maybe Icococlast. I will teach what all the tools do, and some basic action scripting. If you know flash, and feel we are leaving something out, or just want to add something, feel free to post a tutorial for your section in here. No spamming please. If it isn't about flash, leave, or I'll have CM delete your post.

I will be posting part by part lessons shortly, with images to go along with them.

Patience 4m t3h R0ckz0rzz!

*ahem*

Patience is a virtue. That's what I meant.

EDIT: Okay, here are some animations I made. A lot of them have Canvas Issues, because when I was beginning, I didn't realize that if you drew stuff off of the canvas, it wouldn't show up later in the final product. I will but CI next to ones with Canvas Issues. None of them have loading bars, as I'm still perfecting that.

My First Flash Animation (http://i70.photobucket.com/albums/i110/lilbill0005/SwordFightv.swf) CI
This one is simple. Click on the guy to kill him when it says to. Don't click on yourself ;)

George (http://i70.photobucket.com/albums/i110/lilbill0005/George.swf) CI
Kill George in like 8 different ways. Canavas issues though, as some of the stuff goes off the screen.

Fight (http://i70.photobucket.com/albums/i110/lilbill0005/fight.swf)
I found a beavis and butthead sound track and made animation for it.

Dilerium Tremens (http://i70.photobucket.com/albums/i110/lilbill0005/dileriumtremens.swf) CI
This was an animation I made to make fun of our previous alcoholic roommate. I am very proud of my fluid effects.

Sugar Bear 2 (http://i70.photobucket.com/albums/i110/lilbill0005/SugarBear2.swf)
This makes fun of the old roommate's dog. It was a pomeranian as fat as sin.

Zoloft (http://i70.photobucket.com/albums/i110/lilbill0005/Zoloft.swf)
EDIT: For anyone lucky enough to check here, I have finished my Zoloft animation. It rocks.

Spinning Letters (http://i70.photobucket.com/albums/i110/lilbill0005/SpinningLetters.swf)
Click on the letters to stop them. Hit 1-7 non-numpad to start them again. I was just testing these attributes.

Sand Mouse (http://i70.photobucket.com/albums/i110/lilbill0005/SandMouse.swf) CI
I modeled this dude after the dude from Ratchet and Clank 1. I was trying to mae them move. Press down and left on the arrows to get into the screen. Used w, a, s, and d too move player two up and right. Fire Player One's weapon with numpad 0 I think, and hold numpad decimal while moving to move player one faster. I think player 2's equivalents are g and h. Anyhow, They can't hurt each other, I haven't figure dthat out yet, and they can move as far out of the screen as you want, so be careful. Many bugs. But still, a cool thing. Valuable teaching dealie.

[Kurt]

I voted No. I'm a cheap ***hole when it comes to buying applications. Or possibly I'm a cheap douchebag. Anyway, why did you delete my multitude of witty posts? :confused:

[pizzaman]

Deleted for copywrite reasons.

[pizzaman]

Actually no, I wouldn't buy it. I would rather download it. It's much easier that way.

[Fierce Deity]

I will make up a bunch of tutorials and images to go along with them when I wake up, so when I come online, I can just upload a buttload of stuff, adn you guys will learn from it, if all goes according to plan.

[cherko]

I've got flash 8, it's cool. I'm not good with it yet though, so I can't help you with your tutorial.
I gotta show you my first animation sometime. It's a noob's work, definitively, but most people I've shown it to finds it kinda funny. It's a guy getting hit by a bomb and blown to pieces, over and over again...

[Iconoclast]

Dude, I have 500 dollars. Unless 500 equals 650, I can't afford Flash 8. WAY too expensive.

[chaos master]

Dude, I have 500 dollars. Unless 500 equals 650, I can't afford Flash 8. WAY too expensive.
It's too expensive, right? Riiiiiiiiight?

[Iconoclast]

Well, what do U think I just said?? [/Kameo Imitation]

[Crazed Dragon]

if it weren't for it having a high prices i would own it right now...

[Fierce Deity]

Hey, I finished the first tutorial, it is really really simple. I just have to upload the pictures and such. I am at a friends house, I went out unexpectedly today. I will probably upload it sometime tomorrow.

[Fierce Deity]

Sorry for taking so long with this, I haven't been home for a few days. I am back now, and I will continue to be an active member of CoolROM.com!

Okay, now I will begin my tutorial on Flash 8. If you have Flash MX, you can probably follow along with this tutorial too, as MX is mostly the same. The options ar ejust in some different menus, and it 8 is a bit more convenient. On to the Flash tutorial.

Assuming you have it, find a shortcut for it, and make one on your desktop if you desire. When Flash 8 opens, you will have the choices of opening a previous file, or creating a new one. You can open one later if you really want to, but I'd rather you just click "Flash Document" under "Create New", so as to avoid confusion.

http://i70.photobucket.com/albums/i110/lilbill0005/image1.jpg

After creating a flash document, the very first thing you should do, is to save your document, by clicking File>Save As. Then pick a name for it, and save it somewhere where you know where it is. I am not going to explain that part any further or provide pictures, as it should be obvious. Now, look around your document and get a feel for Flash. You have your "Tools" panel on the left, which contains most of the tools you will use to create images and desired effects. The white area in the center is your canvas. The canvas is where you will make your creation. Anything you draw outside of the canvas will not be shown in your final movie, although you might see it when you export. You can edit the size of it in the properties panel at the bottom if you don't have anything to selected.

http://i70.photobucket.com/albums/i110/lilbill0005/image2.jpg

At the top, you will see the timeline. The timeline controls what will happen and when. If you find where "20" is on the timeline, this marks 20 frames, and you can see which frame is fram 20, because it is higlighted in grey. Directly below frame 20, but still in the timeline is your fps. That is frames per second. I have mine set to 24, because that is the same rate that most movies use, although the default fps will be set at 12. Frames per second means the amount of those rectangles in the timeline that it will show in one second. I recommend you change your frame rate to match mine. Click Modify>Document, or just hold Ctrl and press J.

http://i70.photobucket.com/albums/i110/lilbill0005/image3.jpg

Here, you can modify the title of your document, the background color, your fram rate, you canvas size, and your ruler unit. Leave the ruler unit on pixels. Change your frame rate to 24. Leave your background color as white. Leave your dimensions 550 px by 400 px, as this is the default. Have Match under Default. This will try to mak ethe canvas size match what you select. Leave it under default, or it will try to match what you have in your document, which can cause problems. Now that you have your setting, you can either click okay to apply these settings to this document, or you can hit make default, which will make these settings the default that it starts out with, for all future documents. When you have decided what you will do, eithe rhit make default or don't then click okay.

Now we can begin animating. You may want to take some time now to mess around with the tools, and get to know them a little better. They are your friends.

There are three mains types of animation. Motion Tweening, Shape Tweening, and Frame by frame. First, we will go over shape tweening, as it can be the simplest.

You will notice, if you look in your timeline, that there is one frame already made for you in your timeline. It is white, meaning it is blank, and it has a circle in it, meaning it is a blank key frame. Click your rectangle tool or hit R on your keyboard to get your rectangle tool ready. Notice that the properties panel at the bottoms changes, because you now are able to edit the properties of something new.

http://i70.photobucket.com/albums/i110/lilbill0005/image4.jpg

For now, we will only mess with the colors of your rectangle. The upper square in my picture with the red slash through it is my line color. The red slash means that when I make a rectangle with the tool, it will have no line. That is what we want to do for now. You can pick a line color if you really want to though. Next, under that, is the fill color. This is what the inside of the rectangle will be colored. I have mine set to white right now, but lets change that to blue. Now, go to your canvas click abd hold the mouse, and then drag it down and to the right to make a rectangle. If you want a perfect square, hold shift while doing so. Now, we have a rectangle. If you select it, it will fill with little white dots. This denotes that it is selected.

http://i70.photobucket.com/albums/i110/lilbill0005/image5.jpg

If you have an outline on it, and want to select the entire thing, click your black arrow and either higlight the entire thing as you would in paint, or double-click the center of the fill and it will select the fill and the line for you. Anyways, you have a rectangle now. We are now going to go to frame 48 and then right click the frame and a menu will come up. Then we will select "Create Blank Keyframe".

http://i70.photobucket.com/albums/i110/lilbill0005/image6.jpg

This will create a new area to draw something in. Your canvas will now be blank, as you are in a new frame. Let's try a circle. Your Oval tool can be found by clicking it (it is to the left of the square) or by pressing "O". Then, in the properties panel, select the fill for the circle as red, and the outline as none. Anyhow, draw a circle. Same basic procedure as the rectnagle tool. Click and drag to make one, or hold shift while doing so to make it a perfect circle. By the way, while anything is selected, you can change it's size in the left side of the properties panel.

http://i70.photobucket.com/albums/i110/lilbill0005/image7.jpg

Now, you should have a blue rectangle in frame 1, and a red circle in frame 48. Go back to frame 1 by clicking it once in your timeline. Then, at the bottom, in the property inspector, under tween, click the dropdown box and change it to "Shape".

http://i70.photobucket.com/albums/i110/lilbill0005/image8.jpg

Now, the space between frame 1 and frame 48 should have turned green. This lets you know that it is a shape tween.

http://i70.photobucket.com/albums/i110/lilbill0005/image9.jpg

Now, you can view your final movie by holding Ctrl and pressing enter. This will export your movie and open it up in the flash player. Now, if you wanted to upload you movie to a site, go to where you save dthe movie. There will be two files. There will be one with a red flash logo with the file extension ".FLA". This is the file that you will open if you want to edit your flash dosument. There is a also a grey flash logo file with the extension ".SWF" This is your final, exported movie. This will change every time tou edit your .FLA na dfold Ctrl and press enter. To show that SWF, you just upload it to somewhere like photobucket and provide a link so people can see the finished download.

Now, get a bit more aquainted with the flash tools, and try to figure out what they all do. I should be coming up with another lesson shortly. Maybe tomorrow. Anyhow, post anything you don't understand. My next lesson is going to be going a bit faster, and I am going to assume you knwo what most of the tools do, so if you don't know what they do, just ask, and I guess I can explain them, but I want to do it quickly. This part of the tutorial babied you all a bit. :D

Here, you will find links for what your .SWF (http://i70.photobucket.com/albums/i110/lilbill0005/Example1.swf) movie should have looked like, and an .FLA (http://filexoom.com/files/4609/Example%201.fla) of it in case you are lost.

[Kurt]

This looks awesome, but I'm way too tired to read it (and too hot as well). I'll print it and read it tomorrow. I'm sorry, I'm just tired as crap, otherwise I would have been the first to read it. Pictures hurt my eyes right now... *dizzy*

I'll read the first paragraph or so right now, though.

[Fierce Deity]

Anyone who can look at my first post, I finished my zoloft animation, so I have a new link there.

[Crazed Dragon]

did you ever find away to give us the flash program

how i what to use it so badly!!!

[Kurt]

Just download it in a torrent, easy as pie and not even illegal. Just select "30 day trial" instead of trying to use a fake serial number.

[Fierce Deity]

I will have another tutorial part in a few days or so. Maybe sooner.

[G0ldenEye]

nice explaination but in to lazy to read it

[Fierce Deity]

I am working on a second part to this tutorial that is a bit faster paced. I take it none of you have read this yet, lol....

[pizzaman]

I am working on a second part to this tutorial that is a bit faster paced. I take it none of you have read this yet, lol....
Sorry, but I'll get to it. I'm just too busy with work... and going to the movies. I don't even know if I'll be on tomarrow.

[Fierce Deity]

I don't have enough RAM to run Flash and Firefox at the same time, so I will start another tutorial tomorrow, after I have to give the modem back.

[pizzaman]

Well for all you folks who want to know. I just got my Macromedia thing for my 2-month away birthday. It was quite cheap too. :D

I'll take a look into this tutorial later, FD.

[chaos master]

Well for all you folks who want to know. I just got my Macromedia thing for my 2-month away birthday. It was quite cheap too. :D

I'll take a look into this tutorial later, FD.
Really? How much did it cost?

[pizzaman]

Really? How much did it cost?
Ten bucks at a yard sale. Why you doubting me? Well it was actually around 700 bucks, but I saved up REAL hard! :D

[Fierce Deity]

I will update soon. I had to move and such. I am still moving, but I now have permanant internet access. So, I will make on ein the next week or so....

[chaos master]

Ten bucks at a yard sale. Why you doubting me? Well it was actually around 700 bucks, but I saved up REAL hard! :D
...what? ten bucks at a yard sale=700 bucks saved up bucks? I don't understand...

Anyhow, I look forward to see what FD has in store for us.

[pizzaman]

...what? ten bucks at a yard sale=700 bucks saved up bucks? I don't understand...

Anyhow, I look forward to see what FD has in store for us.
Never Freakin Mind! :mad2:

FD, can you make a game this is sort of like "Defend your Castle" with this program?

[harger]

i Voted no,because i can't getit anyways,i couldn't buy it without a credit card:) i don't even have A credit card

[chaos master]

Never Freakin Mind! :mad2:

FD, can you make a game this is sort of like "Defend your Castle" with this program?
Sure, you can do most anything with Flash, except some things. I like the "Defend Your Castle" type game, what with its RPG and action elements, but not if it is too easy or too hard. I have seen many different "Defend Your Castle" Flash games on the net.

[pizzaman]

Sure, you can do most anything with Flash, except some things. I like the "Defend Your Castle" type game, what with its RPG and action elements, but not if it is too easy or too hard. I have seen many different "Defend Your Castle" Flash games on the net.
They used flash to make it right?

Lol, I got to lvl 18 max, I keep getting killed by those freakin giants( I use the albinoblacksheep one ). The only way to kill them is to use magic, or if one of your archers hits them. :(

[chaos master]

They used flash to make it right?

Lol, I got to lvl 18 max, I keep getting killed by those freakin giants( I use the albinoblacksheep one ). The only way to kill them is to use magic, or if one of your archers hits them. :(
I found one that was too easy. I eventually had hundreds of people working for me, and I could have gone on forever, as the hardest levels were too easy.

Yes, they made it with flash, but it is probably possible to make it with java or shockwave, as well.

[DXgeneration8]

i tried making a flash movie, and i dont think i did *that* bad for my first time... and yes, this is strange. my first movie (http://i18.photobucket.com/albums/b105/DXgeneration8/suicidemessage.swf)

[StoremBringah]

Thank you so much! Man, i've been dying to learn how to use flash, and now somebody can help me! Thanks alot, i'm really looking foward to this, and will be gladly patient.