Archive for the ‘Game’ category

Re-posting: Creating a quiz game using ActionScript

March 31st, 2010

Today we’ll be looking at how to make a button-based game. We’ll need to run in ActionScript 2. The exciting part is that these games will be able to be put into the teachers’ SmartBoard software. Imagine the school playing a game you created.

    Setting up the Project

  1. Open a new Flash document.
  2. Click on Layer 1, Frame 1. Add a stop(); action to stop the playhead.
  3. On a new line in the code, establish a variable to hold the score.
    The code so far:

    We set up the score variable here so we can change it as the user gets questions right.
  4. Create a new layer in frame 1.
  5. Create text as a title for your game (so the user isn’t staring at a white screen).
  6. Making a Button

  7. That’s great, but we need a way to get past this screen. We’ll need a button. Click on Insert->New Symbol and choose ‘Button’.
  8. Buttons have an Up, Over, Down, and Hit. Up is its natural state. Over is if some hovers a mouse over the button. Down is what it looks like when it gets clicked. Hit is the Hit Zone – if you want a bigger area to register if it’s been clicked on or not. Normally Hit is the size of a box around the button.
  9. Make a keyframe in each area to change the states of the buttons (what they look like). Notice that you can insert multiple layers.
  10. Drag that button onto the stage.
  11. The button is clickable, but it doesn’t know what else to do. With the button selected (blue highlight around it), open up the ActionScript for that button.
  12. Telling the Program to go to the Next Part

  13. Type on( . Remember from previous lessons that when we see the parentheses, it means the function is calling/looking for a variable. Most modern versions of Flash will try and guess which one you want. Select press. (When someone clicks the button, it goes. You could choose release and the user could click and hold and then go when the user releases the mouseclick.)
  14. Add a funky bracket ( { is called a brace, to be technical) to start your list of commands.
    The code should now be:
    on(press) {
  15. Start a new line to maintain style.
  16. Type in gotoAndPlay(2); Notice that the ‘A’ and the ‘P’ are capitalized. Also look at how the function calls a variable – the number ‘2’ – to tell the game to go to frame 2.
    The code now is:
    on(press) {
  17. If you run the program right now, when you click, it will go to frame 2 (or even just consider frame 1 the end of the movie if you haven’t added anything yet to frame 2) but then loop back to frame 1. We need to put a stop(); code in frame 2 just like we did for frame 1. You’ll need to insert a blank keyframe and then click on the ActionScript arrow.
  18. Once you’ve added the stop();, on a different layer create text with your question.
  19. Use the Same Button Multiple Times to Make Your Life Easier

  20. We need buttons for our answers. If we create one button in the Flash library, we can then drag it in multiple times and not have to re-do animations. Create that button.
  21. Drag the button from the library onto the stage. Create a text box next to the button that has an answer.
  22. Drag the button from the library again onto the stage for the second answer. Put a text box next to the button with an answer.
  23. Checking for the Wrong Answer

  24. Click on the button next to the wrong answer to select it (blue outline).
  25. Let’s add some code for the wrong answer. Let’s add a gotoAndPlay(3); to the button (with the on(press) and all that) to take the user to frame 3, which is where we’ll mock them for getting the wrong answer. (Mock them nicely and politely.)
  26. Make sure to add a stop(); code in frame 3 to avoid the jumping loop. You’ll need to insert a blank keyframe.
  27. Create your end of game screen. Be nice and include a button to take us back to frame 1.
  28. Checking for the Right Answer

  29. Let’s say the user got the question right. Go back to frame 2 and edit the ActionScript for the correct answer button.
  30. Send the user to the next question – frame 4 – with a gotoAndPlay(4); What’s different this time, though, is that we need to add to the score. On a new line in the ActionScript type in score = score + 10; We just took the score and added 10 points to it. (It will still complete the rest of your list of commands – but to keep it straight in the minds of the humans who may be reading over your code later, add to the score first and then put in the goto.
    The code should look like:
    score = score + 10;
  31. Displaying a Score

  32. On frame 2, create a new layer. Let’s label what the user is looking at. Create a text box somewhere on the screen that says ‘Score’. If it’s on it’s own layer and it’s own keyframe, it will constantly say ‘Score’ throughout the whole program.
  33. Now let’s show the actual score. Click on the tool to make a text box, but instead of creating a text box, just click where you want to show the score.
  34. In the Properties at the bottom of the work area, change it from Static to Dynamic text. Dynamic and Static are just like with characters in a story – dynamic changes, static stays the same.
  35. In that text’s Properties, there’s a place called ‘Var: ‘ with an input box next to it. Type in score. It will now show the value for score. Make sure that you don’t put this in frame 1, because frame 1 is where we initialize/set up the variable.
  36. Thoughts to Enhance the Game

  37. You can add to score whenever the user clicks on the right answer button. You can subtract from score when a user gets the wrong answer.
  38. You can add as many buttons as you like – you don’t just have to have two questions.
  39. Not all buttons need to be easily seen. You could say “Click on the duck” but have the Up be blank and have the Over show a duck. The user would have to roll around the screen to try and find the right button.
  40. You can create a variable called whichframe to control which frame a gotoAndPlay goes to. Instead of gotoAndPlay(4); it could be gotoAndPlay(whichframe);

Isometric Game: Going to the Next Frame

March 10th, 2010

We’ve got the countdown showing on the hero for our game. If you weren’t at Future Professionals when we did that, here’s the link.

Let’s check when the variable scarytimer gets to zero. When it does, we’ll have the Flash movie go to frame two.

Find the line of code in the onEnterFrame function where you decrease scarytimer.

Underneath it, check to see if it’s less than 0.
if(scarytimer<0){ gotoAndStop(2); scarytimer=0; }

The gotoAndStop means that we don't have to put a stop(); code in frame 2. It reduces the amount of typing you have to do.

Notice that I added a line to set scarytimer to 0. Instead of going into the negatives, it's now an ominous emptiness.

Now draw/type a message on the stage in frame 2 that lets the player know that time has run out.

That's if they lose. But what if they win?

Find the line that says
if([hero.y][hero.x] == 101){



On frame 3 create a message that lets them know they win. Make sure that frame 3 has a new keyframe so frame 2's message doesn't show up.

Isometric Game: Displaying the Timer

February 24th, 2010

If you have missed a couple of sessions, check here.

If you’ve been here the whole time, let’s continue.

  1. Open up the Flash file we’ve been working on.
  2. Edit your hero movieclip.
  3. Add a textbox above the hero’s head.
  4. Change the textbox from ‘Static’ to ‘Dynamic’.
  5. For the instance name, type scarytimer.
  6. For the Var:, type _root.scarytimer. (_root lets us know that the variable exists on the main level of the stage and not just privately with the movieclip).
  7. If you don’t want the timer text to be selectable by a mouse, make sure the ‘Ab’ button is not selected.

A variation on this would be to create a new tile with the timer on it and spread those tiles throughout your maze.

Your dynamic text settings should look something like this:

Continuing with the Maze Game in Flash: Beat the Clock!

February 10th, 2010

We’re going to add a simple timer to our maze game that we’ve been working on. (If you’ve missed a few sessions, start here.)

We want the timer to start at 1000 and count down to the player’s imminent doom.

To set up the initial value for the timer, let’s create a variable called scarytimer.
var scarytimer:Number=1000;

Put that code at the very top, outside of any functions. If a variable is defined in a function, other functions will see it as undefined. So, at the top of the AcionScript, type in:
var scarytimer:Number=1000;
right above where you see
var tiles:Object = new Object({width:52, height:26});

The player will start with 1000 loops to be able to get to tile101, tile101 being our special tile from last time.

Now we need the player’s doom.

In the onEnterFrame function, we need to subtract from scarytimer each time the game loops in a frame.

Way back in the olden days when I programmed stone tablets for pterodactyls, we would write scarytimer=scarytimer-1 to subtract gradually from the variable with each loop.

ActionScript has simplified it with the code:
The two minuses tell ActionScript to subtract one increment from the variable.

Put scarytimer--; right above where you see input();

Variables get tricky when trying to determine what value they have. Run a trace on the variable to have the computer tell you what value scarytimer has.


Now the code will decrease scarytimer and then spit out its value to you.

Run your file right now to make sure your variable works. If it doesn’t, everything else will get nasty quickly.

Warriors Adventure Game

February 10th, 2010

I have not read Erin Hunter’s Warriors series. I have yet to delve into the dark world of killer cats. It’s not that I’m against the series, considering how much I enjoy a good Brian Jacques killer mice novel.

While flipping through Hunter’s The Fourth Apprentice, I was looking for the adventure game that is included since I’m always a fan of games.

Picture my excitement when I found a hybrid of the Choose Your Own Adventure/Lone Wolf stories. There’s an adventure for a narrator to lead a group down a series of paths.

But then imagine my surprise when I saw a reference to stats and a character sheet. It’s not just a Choose Your Own Adventure, it’s more like a paper and pencil role-playing game. Very exciting. You don’t have to use someone else’s concept for a character – you can make your own. I’m a hug fan of these types of RPGs because of their storytelling aspects, so I applaud Erin Hunter for taking the series in this direction.

You can find out more about the adventure game by clicking here.

Continuing in Isometrics: A hero stepping on a tile

February 1st, 2010

We started with this great game engine and we edited the arrays to add walls at different locations on the map. This week we’re going to add a custom floor tile that:

  • Checks to see if the hero is standing on the tile.
  • If the hero is on the tile, sends the entire Flash timeline to the next frame.

First let’s make sure we know how to recognize the hero stepping on a tile.

  1. Open up your project file from last week. (Remember: the original file can be found here if you were gone.)
  2. Open up the project’s library.
  3. Right-click/CTRL+click on the ’tile100′ movie clip in the library. Choose ‘Duplicate’.
  4. Name it ’tile101′. Make sure to click the checkbox next to Linkage: Export for ActionScript.
  5. Double-click the ’tile101′ movie clip to edit it. Double-click the square and select a new color from the paintbucket for it.
  6. Click on Scene 1 to go back to the main timeline.
  7. Click on the frame with all the ActionScript in it. To edit the ActionScript, click on the arrow in the frame’s Properties window.
  8. Look for the code that reads:

    _root.onEnterFrame = function():Void
    input(); // Handle keyboard movement

    Let’s add a message that pops up, showing that the exit was stepped on. We’ll use the trace function for that:
    _root.onEnterFrame = function():Void
    input(); // Handle keyboard movement
    if([hero.y][hero.x] == 101) trace("Exit");


    A message should pop up in the debugger window with the word “Exit” showing up while you step on the tile.

    Now that we can tell if the tile is being stepped on, see if you can figure out how to send the hero to a new map.

Isometric Game Engine

January 26th, 2010

Isometric perspective is a way to use 2D images to create a 3D environment. Flash normally operates in 2D images; Chris Lindsey created a game engine in Flash to represent a 3D environment. The engine does require ActionScript 3, though, so it won’t run properly in ActionScript 2.

A game engine is not a game in itself- it is the power behind the game. Programmers will design an engine to run their video game and then license that engine to other game developers. Here’s a list of some of the current game engines out there.

Things to look at in this game engine:

  1. There are no movie clips on the stage to begin with. The code places the movie clips onto the stage when you test the movie/make the .SWF file.
  2. All of the code is in just one frame. You don’t have to search all over for it – this is really appreciated.
  3. There’s a giant array of numbers.
    This is your map. If it says ‘200’, that’s a wall piece that gets placed. If it says ‘100’, that’s a floor piece.

Save a copy of the .FLA file so you have the original and then one to work with. Try editing the ‘hero’ movie clip. Draw your artwork on a new layer inside the movie clip. You can then delete the original box image layer. To help you out, you can turn the box layer into an outline by clicking on the colored box on the layer (in this picture it’s yellow).

Once you get used to how the artwork is set up, try expanding the map by adding a new line of 100s and 200s in the ActionScript.

Click on the game to play it. Use the arrow keys to move your character around.

The .FLA file with all of the code can be found by clicking here.

Looking Glass Wars 3: Arch Enemy by Frank Beddor

January 21st, 2010

Frank Beddor was the first author that I hosted in my library, so the Looking Glass Wars has a bit of nostalgia for me. When I read Beddor’s books, I can hear his voice coming through (and when the narrative gets excited, I remember when he jumped on a desk and yelled to the kids).

Arch Enemy has the same fun from the other books. Hatter Madigan shows up (I’d be angry if he didn’t) complete with his Millinery arsenal. As in Seeing Redd, we witness more of the Hatter’s family life. This book definitely has an emphasis on developing the character of Homburg Molly. She’s the one to show up in England and interact with the Liddells and Charles Dodgson.

We get to see more of Dodgson’s day-to-day life. What makes it LGW, though, is when the assassin with razor blade fingerprints shows up to harass the Liddells.

You definitely need to read the first two books in order to understand Arch Enemy. It had been a couple of years since I did, so it took me some time to recall the plotline of the others. Beddor does a good job of re-describing characters but does not spend much time re-telling history.

If you’re a fan of the caterpillar oracle council, you get to see the whole rainbow discussing the fate of Wonderland. Part of the intrigue is trying to figure out the caterpillars’ motivation. Pay attention to them, though, because their part grows throughout the book.

For me the ending seemed kind of rushed. I was reading, thinking, “There’s ten pages left…how is this going to resolve?” I pictured Alyss and Dodge as in their teens but then some artwork inside the book makes Dodge look more Han Solo-ish. Also, there’s a marriage proposal brewing that came out of nowhere. Sure, it adds to the relationship with Alyss and Dodge, but it seemed kindof tacked on to me. I’d be interested to hear other people’s thoughts.

This is an enjoyable book and fans of the series won’t be disappointed. It says that it’s the conclusion of the trilogy, but Beddor left the world wide open for more exploration. Expect more Hatter comics and online games.

Spielberg Wants in on the 39 Clues

December 7th, 2008

Steven Spielberg is scheduled to direct the 39 Clues movie. I read the first one and enjoyed it, but this announcement came out over the summer. It shows just how much financial backing this series is getting if a movie is discussed even before students start reading it.

Cooper’s Road

May 21st, 2008

This is Cooper’s Road, a game made for his Advanced Computers final. Nice job!
Use the mouse to move around, avoiding the oncoming traffic.

Here’s the .swf file.