stupidlikeafox's Blogs

Heya, Fox here. This tutorial is a basic introduction to a few simple bits and pieces of code in flash - aimed at the utter n00b. If you have flash and have no idea how to use it - and would like to, this is intended for you. This is also my first crack at writing a tutorial, so if you try it out let me know how you went and if you found this helpful. That way I can learn from this experience and write better tutorials in the future. But anyway, let's proceed.

Project: My first Flash Game: A point and click abomination.

Technical stuff:

stop();
frame labels and gotoAndStop()
an introduction to buttons

Description: We'll make a simple ugly game by placing different images onto frames of the main timeline, and use invisible buttons to move between different frames.

Note: This code is written for AS2.0. I can't be bothered learning AS3.0 just yet lol.

------------

Step 1: Let's begin!
Open Flash and create a new file (File -> New), and select "Flash File (Actionscript 2.0)". Once your blank doc*ment is open, make four layers in your "Timeline" window by selecting the "Insert Layer" button (see below). Double-click the name of each label to rename them "actions", "labels", "buttons" and "images". It should look like the image below.



Step 2: My first line of code!
Click the Keyframe on the "actions" layer to select it, and open your "Actions" window. We will be placing a line of code onto the keyFrame. Click inside your actions window, and type the following code:

stop();

When a movie plays, the "stop();" will halt it from going any further, and await any further instruction. By default any timeline will play through, so adding this code will prevent that. Congratulations, you've written your first line of code! (presumeably :P)



At this point let's save the file as "game1.fla"

Step 3: Design your game!

For the purposes of this tutorial (and my laziness) I'm going to keep my example VERY simple. You can go as hard out as you want - but for my game I will only have two rooms. The first room will have a window to the west, a *closed* chest to the south, a picture frame to the east and a *open* door to the north. Through the door is another room. This room has a chair to the west, a painting to the north, a locked door to the east, and the door leading to the first room to the south.

(At this stage please note that I will be using this example in following tutorials and building upon it - at the same time introducing you to new bits and pieces of code.)

Step 3: Building your game!
Since I have two rooms, I will need 8 different keyFrames (at simplest, 4 per room). Create 8 keyFrames on the "labels" layer by selecting the eight frames, right-clicking, and selecting "Convert to keyFrames".



Each keyFrame will have a label which relates to their position and the direction they are facing in your game. For my example, these will be:

Room1_north
Room1_east
Room1_south
Room1_west
Room2_north
Room2_east
Room2_south
Room2_west

To label each frame, select the frame, then in the "Properties" window, enter the respective name. (See below)



Once all frames are correctly labelled, convert the required amount of keyFrames on the "images" layer and add your images! For example, on the Room1_north keyFrame, I will draw a door, Room1_west a window, etc!


_{^K, my rooms are ugly. I'M LAZY!}

Step 5: Buttons!
Open your "Library" window and click the "New Symbol" button.



In the box that appears, name your new symbol "invisible_button", select the "button" type, and hit "OK" to make your new button.

You will now be inside the button. Buttons have different states such as up, over and down - but we will only need the "hit" state. Select the frame under "Hit" and create a keyFrame there. Now on the stage, draw a box. That's it! You have just made an invisible button. We will be placing instances of this button on the stage, and giving it some code!



Return to the main timeline by pressing the "Scene 1" button. On the "buttons" layer, create a keyFrame for each frame used (like you did for step 3). Select the first keyFrame.

Click and drag an instance of the invisible button from the "Library" window, and drag it onto the stage. The button should look like the one below.



Place this button on the top-left corner of the stage, and make it the full height of the stage. This button will be used to turn the character 90 degrees anti-clockwise. Select the button then open and select your "Actions" window. Enter the following button code:

on(release){
gotoAndStop('Room1_west');
}

Here, I used "Room1_west" because I start at "Room1_north", then turn 90 Degrees anti-clockwise and now the character will be facing west. The code on(release) is a button function that is activated when a user clicks then releases a button. The code gotoAndStop() moves the playhead to a specific frame and stops there. It could be either frame numbers or labels, but for this example we are going to the frame "Room1_west" and stopping there. Yay, you just wrote some more code - and what's better... We can now test it!



Step 6: Test your movie!
Press Ctrl+Enter to test your movie (or select Control -> Test Movie). If it has worked correctly so far, you should be able to click where you placed your invisible movie - which then changes the image displayed to the image on the frame you told it to go to and stop on! If so, we're on the right track!

_{If not, something is wrong. Here are some common mistakes.
gotoAndStop(Room1_west) - frame labels need to be in quotes.
gotoAndStop('room1_West') - frame labels are case sensitive.
If these are fine, check your target frame's label. Are you sure you spelt it right? (Don't worry if it's still bung, ask any q's in the comments below or pm me :P)}

Now add a button to turn right. Do the exact same thing you did for the left button, only place it on the right and change the gotoAndStop target label from 'Room1_west' to 'Room1_east'. Repeat in the center if you want to be able to walk forward (in my case I want to go to he next room) and you have completed your first frame!



Save. :P

Go to the second frame on the main time line (my label here is "Room1_east") and add left and right buttons like you did for the first frame. Because your user is currently facing "east" (well, in my case they are :P), the left button needs to call "gotoAndStop('room1_north');" and the right calls "gotoAndStop('room1_south');"

At this stage you should get it right? Each frame has the character at a certain position, facing a certain direction - so what do you need me for? Place buttons where they should, and tell the playhead to go to and stop wherever you want. You know how!

Here's my end swf. And here's my end working file. It's pretty ugly, I won't lie to ya. But the fundamentals are there.

Any q's just let me know!