Tuesday, October 2, 2007

Getting Started

First, I'd like to thank (and plug) the http://www.actionscript.org/forums/ which I wholeheartedly encourage you to join and participate on, and http://www.emanueleferonato.com/ since Emanuele's blogs kick butt.

Creating Our Hero

I’m going to assume you already Flash installed. If not, you’ll probably wanna go skim your installation documentation. This is a bit embarrassing, but when I first opened Flash, I was given the options of Create [a] New ‘Flash File’, ‘ActionScript File’, ‘Flash Project’… Ummm… I didn’t know which one to pick. I dinked around, trying to figure it out. Finally I read some tutorials and downloaded their source files (.fla) only to delete everything out and save the blank one as my own. …then I figured out I just choose ‘Flash File’, and since most of the tutorials I find (this one included) are still using ActionScript 2.0, that’s the one I pick too (yep, follllow the crowd)

So, now you’ve got a blank workspace –probably with a size of 550 x 400. One layer, and one frame. If you pressed Ctrl + Enter to test the movie, you’d see a lovely scene full of nothingness.

Quite beautiful in a minimalist sort of way.

We're going to make a little ship, or ball... my ship looks like a ball, and for that matter is gonna bounce like one too!

Go up to the menu bar, and click View > Grid > Edit Grid (or Press Ctrl + Alt + G) If it's not selected, click Show grid. Click Snap to Grid (or Press Ctrl + Shift + ' later), and change the grid width and height to 20 px x 20 px.

Click Modify > Document (Ctrl+J). You'll see the dimensions of your project, by default 550px x 400px. In this window, change the Frame rate to 40 fps.

Click OK, then select the Oval tool in your tools palette (or Press 'O'). Also in the tools palette, pick a fill color for your ship. Pick a color, any color! I'm gonna go with #FF6600 - the color formerly known as orange. I like having a nice, thick border on my images, you can do this too. In the properties inspector (by default down at the bottom), you can choose the thickness of the border, change that to 3.

Now we get to create something!

Hold shift while you click and drag your mouse to make a 2 x 2 square circle (40px x 40px ...did I just direct you to create a square circle??). Wow, impressive ship you have there, huh?

Now we want to add something so we'll know which way the ship is facing. Undo Snap to grid (ctrl+shift+'), change your fill color to something else, and create an oval shape on the left side of the ship.

Does your mouse keep jumping around when you're trying to make an oval? Press Ctrl+Shift+/ to take off Snapping to Objects and try again.

Use the selection tool now (V), and highlight the entire ship by clicking and dragging a box around it. Now on the menu bar, click Modify > Convert to Symbol (F8), and name it ship. Remember that Flash is case-sensitive (i.e. ship is not the same as Ship or shiP or sHIp or Battlestar-Galactica) Make sure the 'Type' is Movie Clip, and click the box that says 'Export for ActionScript'


Not too terribly exciting, but at least it's efficient. You won't see this one crashing too many systems!

With your ship still selected, press Delete. It's okay! We've added it to our library (there's a panel on the right side of the screen) where we can grab an instance of it at any time.
Giving Our Hero Some Action

Now we've got a blank workspace again, that's okay. We'll add our ship back in using ActionScript!
Press F9 (Window > Actions on the Menu Bar)

Actionscript Code:





More to come....

No comments:

Post a Comment