Archive for the ‘Future Professionals’ category

Code Snippets in Flash CS5

January 16th, 2013

Sometimes you use a piece of code so much that you just wish that you could hit a button and insert that code. In Flash CS5, Adobe has included code snippets that can be re-used to speed up your programming. To view the snippets, choose Window->Code Snippets.

Let’s make the world’s simplest game!
To test it out, create a movie clip symbol and put it on the stage. With the symbol selected on the stage, open up the code snippets and select Animation->Move with Keyboard Arrows. Flash will ask you if you want it to make the symbol an instance.

Yes. Yes, you do.

Test the movie and run it. Move the symbol instance with your keyboard arrows. Take it one step further and edit the action layer in the timeline to adjust variables like speed.

Check out the Event Handlers->Key Pressed Event for some extra fun.

Javascript: Finding the difference

February 8th, 2012

image

Here is the answer to today’s Future Professionals challenge.

Thomas Suarez speaks at TEDxManhattan

November 16th, 2011

It’s impressive enough to speak at a TED event. It’s even more impressive when you’re in 6th grade.

ScriptTD – An Open Source Tower Defense Game Engine

November 8th, 2011

Coding4Fun has put up the source code for a tower defense game on Codeplex. With it, you can make a game for a Windows phone and even put it up on the Zune marketplace. If you can make an image in Paint, you can make your own game. What makes the project so cool, though, is that they put up all of the code. Everything can be adjusted.

Download the source code here.

HTML: Day 1 – Simple text formatting and inserting a picture

October 5th, 2011

Objective: We will be creating an HTML file with basic code and then previewing it in a web browser.

HTML code used in this lesson:

<strong> bolds text
<em> italicizes text (“em” is short for “emphasis”)
<p> shows where a paragraph starts and ends
<br> starts a new line
<img src> brings in a picture
<a href> creates a link

The HTML file we’ll create is going to be extremely basic. Later we’ll add information that meets the standards of the World Wide Web Consortium (W3C) and is coded better.

1. Open up a text editor like Text Edit or Notepad.
2. Save it as sample.html. If you don’t put the .html as the file extension, it may not load properly in the browser.
3. In your new text file, type:

This is the sample file. How exciting.

4. Let’s make that “exciting” really exciting. We can make the word “exciting” bold by adding the <strong> tag around it.

This is the sample file. How <strong>exciting</strong>.

<strong> lets the browser know that what follows will be bold. </strong> lets the browser know where to stop. If you leave off the </strong>, the rest of the page will be one big, bold mess.
5. Preview the HTML file in your browser. Open up Safari/Firefox/Chrome/Opera/Whatever . Choose File->Open and then select your HTML file. Check to make sure “exciting” is bold.
6. Now let’s add emphasis to the word “this” using the <em> tag.

<em>This</em> is the sample file. How <strong>exciting</strong>.

Notice how, just like with <strong>, you need to close out <em> with </em> or else it never ends.
7. We’re going to insert a picture, but I don’t want it to be on the same line as the text. Mark the text that we have as a paragraph by adding the <p> tag to the text.

<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>

You can also use the <br> code to start a new line, but when we get into CSS, using the <p> will allow you to do cooler stuff with the paragraph.
8. Insert a photo using the <img src> code. After the src part, you’ll be telling the browser where the file is stored online. For the sample, we’ll use an image from my site that’s found at http://briangriggs.com/wp-content/uploads/tech.jpg.

<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>
<img src=”http://briangriggs.com/wp-content/uploads/tech.jpg”>

Pay attention to the equals sign and the quotation marks. Whatever’s inside the “” is the direct address for the image. = tells the browser that what’s coming next is the source (src) of the image.
9. Save the HTML file and run it in your browser to check if the HTML file is working.
10. The last thing we’ll go over in this lesson is the <a href> tag. <a href> stands for “anchor hypertext reference”. Anchors are placeholders within a document. <a href> lets the browser know that a reference, a link, is coming.

Make the word “sample” a link to briangriggs.com by adding the <a href> tag.

<p><em>This</em> is the <a href=”http://briangriggs.com”>sample</a> file. How <strong>exciting</strong>.</p>
<img src=”http://briangriggs.com/wp-content/uploads/tech.jpg”>

Like with the <img src> tag, we use the =”” to point to a location. Just like the <strong> and <em> tags, we close it out or else the rest of the document will be a link.
11. Save it and run sample.html in your browser.

Working with variables in Scratch to make a score

November 17th, 2010

My demo game for today in Scratch involves checking to see if a button is pressed, changing a variable and a costume if it’s pressed, and then checking if the required score has been met.

The variable is boot to the head. *

When the green flag is clicked to start the game, we reset boot to the head and the costume to give the player a fresh start.

Next, we check to see if the spacebar has been pressed. If it has, we change boot to the head by one and do a mini-animation of a cat with a boot to the head. I put a wait command in there so the user’s eye can actually see the costume change.

We use an “if…” statement (found in the Control section) and use an operator (the green section) to see if boot to the head equals 10, our designated end of the game. If the player has 10 boot to the heads (boots to the head?), we reward them with a positive message of encouragement and then cruelly reset the score.

This is my demo, but I know that you’ll need variables to keep track of info in your games for the competition. Use the same techniques for your own variables.


Notice the big red X. The “if…” statement won’t work if it’s not connected to the rounded top of “When space key pressed”.

Your code should look like this for the demo:

*In no way does Mr. Griggs endorse giving walking cats a boot to the head.

Switching Backgrounds/Levels in Scratch

November 10th, 2010

For the STEM video game challenge, we’re using Scratch to make our games.

One of the things you usually need in a video game is the ability to change what the background looks like. First, you’ll need to create the backgrounds in Scratch:

I’ve created two backgrounds using the built-in paint editor. They’re very intricate backgrounds named “background1″ and “background2″. You can name yours differently, just remember what you called them.


These scripts:

  1. Reset the background to background1 at the start.
  2. Broadcast either a Go to 1 or Go to 2, depending on what key is pressed.
  3. The script checks what’s broadcast and changes the level’s appearance.

Obama’s STEM Video Game Challenge

September 20th, 2010

This past week President Obama announced the STEM Video Game Challenge to encourage students to pursue math and science through engaging activities. The contest will be accepting submissions from October 12 to January 5. The entries can either be a game design on paper or a playable game. There is a $50,000 prize pool for students and it provides some great opportunities for careers in video game design.

Future Professionals, this is what we’re going to tackle first. Check out Scratch from MIT. It’s like an intro program to Flash and actually has some pretty decent scripting. (It’s free, too, which is always nice.)

Here’s how the judges will be determining the winners:

Submissions will be judged on a combination of fun and balanced gameplay, creative vision and incorporation of Science TEchnology and Math (STEM) concepts in game design and play experience.

Click here for a game that took me ten minutes to create. In no way does it meet the STEM requirements but it does illustrate a tiny bit of what Scratch does (that would take me much longer to do in Flash ActionScript.)

Try and get the face to the flower. Click on the green flag to get the party started. Arrow keys move the smiley.

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:
    stop();
    score=0;

    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) {
    gotoAndPlay(2);
    }
  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:
    on(press){
    gotoAndPlay(4);
    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.
scarytimer--;

Underneath it, check to see if it’s less than 0.
scarytimer--;
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(canvas.map[hero.y][hero.x] == 101){
trace("Exit");
}

Change:
trace("Exit");

to
gotoAndStop(3);
scarytimer=1000;

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.