Monday, October 11, 2010

Ponged pt.3

The plan for today: We are going to create our ball, start the class for our game Engine.

- Create a folder where you are going to keep your game, The .Fla file and all your class files have to reside in that folder so the copiler can find them. After we start our first class I will show you how to direct Flash to the
folder you have choosen.

- Now that you have your project folder, we are going to create our ball.


- Create a circle with a Width of 12 and a height of 12. Remember you can create any circle and manually enter these numbers. Make the fill color white and the outline color anything you think looks good. My settings (remember position is irrelevant at the moment)




- Now that we have created all the visual elements we need for our game, we are going to start our first class! All actual code is going to be written in courier font and be highlighted in grey as such:



package {

import flash.display.*;

public class Engine extends MovieClip {

public function Main() {

}
}
}


- As always all a copy of all files that we work on can be found at the end of this post, but I highly recommend that you type them all out for yourself so you understand them.

- Lets start our code for our Engine.as class. If you remember from yesterday this is our main class and the one that flash will load from when our game is started. We want to start a new ActionScript file. Press (Ctrl+N) to bring up the new file type menu and select ActionScript:



- Once selected a new tab will open. This is where we write our ActionScript.

package {
import flash.display.*;
public class Engine extends MovieClip {
public function Main() {
}
}
}

- The above is the bare minimum for our game class. Now to explain what our code does:

package {

This is where we tell Flash to look for all the associated classes. Right now we have it blank, but if we were using a lot of classes for a really complex game we would package them all together. an example of package reference:

package com.gaming.ponged {

Don't worry about what this means, for now the only thing you need to know is that ALL class files start with the word package followed by an open curly brace {

our next line:

import flash.display.*;

Tells the compiler to import all the files in the flash.display class group. These are part of the default classes that flash has available to use. There are a bunch of pre-constructed classes we can import to increase functionality of our projects. Again, don't let this overwhelm or scare you. All you need to know is that import is a flash keyword telling the compiler to include any listed classes in our file. All games will import flash.display.*; it has to. The ; signifies the end of a single instruction. Think of it like the period at the end of a sentence. It tells the compiler to move on to the next instruction.

Our next line:

public class Engine extends MovieClip {

public - is a keyword telling the compiler that other classes can reference variables and methods in this class. All main classes for our games have to be public.

class - another keyword. This indicates that the that everything between the following {} braces is the actual code to execute. 

Engine - is the name of our class.

extends - is a keyword that means our class inherits all the code and functionality of the class name that follows, in this case MovieClip.

MovieClip - is the class that all main classes of our various games HAVE to extend.


All games will have the following form for the document class constructor:

public class <insert class name> extends MovieClip {

our next line:

public function Engine() {

Again we have the public keyword, we know this. Next:

function - this keyword tells flash that everything between the next {} are done together whenever the function is called. Don't worry to much about calling a function right now. For now all you really need to now is that a function is just a group of related instructions and or variables. It can be anything you want to be done together. The next word is our function name Engine(). The () always follows a function name. Don't worry about why at the moment. 

The reason the function name is Engine is cause this is the name of our class, which is our main class. The class that is called by the compiler when our game is run. 

The:

    }
   }
  }




close our function, class and package in order. Every open brace { needs to be closed by a }. when finished it should look like:






The words in blue are ActionScript keywords and are automatically highlighted in blue by the compiler.

Save your file as Engine. Make sure to save it in your PONGED folder. Now we will tell the compiler where to find all our class files for this game. Click on the PONGED tab beside your Engine tab. Now click on the [edit] button beside profile:


Then hit the [settings...] button:



Then set you source path to the location of the folder you keep your game and classes in.






Perfect! We have created our first class file and pointed the compiler to our project folder. Join me tomorrow and we will start filling in our classes. Maybe make our ball bounce... 

12 comments:

  1. Nice post, I usually get lost in Flash tutorials, but you've explained it well

    ReplyDelete
  2. I'm showing this to my game designing/coding friend. Thanks! :D

    ReplyDelete
  3. This is brilliant. Thank you.

    ReplyDelete
  4. Always good to have more tutorials out there.

    ReplyDelete
  5. Loved the post. I have been coding in flash for almost a year now wish I had a good guide like this when I first started. I will definitely be following for more tutorials

    ReplyDelete
  6. I really should get back into flash, I miss making fun little stuff like this.

    ReplyDelete
  7. nice one !!! I was looking some tuts for action script and this one is very useful !! :)
    hope to see some more ! :)

    ReplyDelete
  8. Gonna try this with my friend who is currently in an A.I. mayor.
    Check my new blog please, I just started =)

    ReplyDelete