Flash Game Creation for Beginners

Page 1

Flash Game Creation for Beginners

©2012 mkelly/robert morris university

example and fla downloads:: http://www.onestopdesktop.com/examples2.html advanced version of this tutorial: Understanding Flash External Scripts

1) select the blank keyframe in frame 1, on the Actions layer. hit the option/alt key plus F9 to open the Actions panel. 2) type in:

since our movie has more than one frame…

3) select the rectangle tool box on the stage.

and draw a box over

4) look inside the Actions panel for : locate:

in the text

. click on it and

click on the arrow to open it:

5) double click on the

click on OK.

… this will appear:


you can also create movieClips by hitting F8. movieClip symbols require instance names so that Flash code can talk to them (object oriented programming). you can also add them yourself in the Properties panel. this script magically appears inside your Action now:

Flash has added an EventListener (in this case, it's causing the movieClip to listen out for a mouse click). other event listeners that can be added might include:

we're also going to see a Timer Event listener before we finish this game. the above are the most often used event listeners. it also adds this commented out text:

the /* before and */ after cause Flash to ignore the grayed out text. you can delete or keep it as a reminder of what Flash has generously provided for you… so now we have a game that provides instructions and gives us a start button. for this game, we’ll force them to get all the answers correct to win (it’s supposed to be educational) so include that in the instructions...


6) guess what we first need to type in the Actionscript panel in the next frame:

did you type

?

7) the next thing we need to do is give our players a challenge: a good old fashioned countdown timer... there's also a Code Snippet that covers this for us: inside look for this script appears:

and double-click on it.

this one also comes with helpful comments. to summarize: you can change the 10 to whatever value you prefer. btw, the 1000 refers to how many milliseconds it counts down by. 2000 milliseconds - or two seconds - would be twice as slow. notice we have two var's here. var is short for variable. a variable is a container of information of one kind or another. it can contain Numbers or text (Strings) or Booleans (true/false values), or Timers or even more complex information. just remember that variables can contain all sorts of information.

usually, variables go first. mostly because you get errors if you try to do something with a variable (such as add an Event Listener to it like above) and you haven't already defined the variable with its name and info


type (and sometimes, such as in the case of the number 10 above defines it with an initial value for the Number). if you hit ⌘ and Return right now to test your movie, you can click on the here to start the game, and you should see an Output window appear that will show you the countdown‌10, 9, 8, etc. let's give them a break: //instead of 10... if you get an error, double-click on it and see where it goes and what Flash has to say about correcting it. 8) add the following script:

this means that when we mouse over these objects, we'll get the index finger button indicator. 9) add the following script:

so each object will listen out for the mouse to be pressed down over it and will then be forced to perform a function (a series of commands/changes) we will soon define. you can name your functions anything as long as they don't come up blue which means it's a word Flash has on reserve for itself. beginDragItems is what we'll call this one... it's not required to capitalize the D and the O in drag objects, but it's a convention that most Flash programmers use for any compound word to use upper case letters for every word but the first one.


note that you can't have spaces between the words!!! 10) next, we'll use a "targetNode" method to tell each movieclip that it has a match out there somewhere - in this case, the movieclips on the left side that go with them (bee, flower, etc.) with "_target" added to their instance names (for example, brain_target); we could have used _anything" instead of _target as long as it matches what we type in below. note also that "targetNode" is not a blue Flash word so it could have also have been called anything. it's a made-up movieClip method name that we will define later in the beginDragItems function‌

11) before we start defining these functions, we need a few more variables in place above the initial variables at the beginning of our code.


12) if you test the game now, you'll get an error because we haven't defined the beginDragItems function. so let's do that next:

note that we also added a new EventListener at the end called "touchItems." it will test to see if objects have touched their correct target objects. so now we have to define that function.


13)


14) finally, we need to alter and expand on the TimerEvent‌


15) the win, lose and startOver frames would require the following scripts: win frame:

lose frame:

note the 2 added to playAgain above. if not, a Duplicate Function Error will stop the movie before it even starts...


startOver frame:

16) do a final test. look at the examples again. if you want to know a more advanced way to create this game, read the second article in this game creating series: Undertanding Flash External Scripts. so make your own matching game, why don’t you?


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.