Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1305195 Posts in 58290 Topics- by 49372 Members - Latest Member: filbs111

July 21, 2017, 12:41:55 pm

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTutorialsLearn to code flash games for $0! An introductory tutorial to actionscript 3.0
Pages: [1] 2 3 4
Print
Author Topic: Learn to code flash games for $0! An introductory tutorial to actionscript 3.0  (Read 41808 times)
Cagey
Level 1
*



View Profile WWW Email
« on: August 20, 2008, 03:42:23 am »

Konichiwa Tiggers,

I've been meaning to write an intro to programming for this site for a loong time, and I've finally started (Yes, started, there will hopefully be at least a couple more useful tutorials following this). I've tried to account for minimal programming experience, but if you are already a bit of a coder and interested in learning actionscript feel free to skimread. If you are experienced take a look at the last file to get a brief overview of the basic Actionscript 3.0 features.

This tutorial is an intro to some programming standards, using Actionscript 3.0 for flash. It costs nothing and won't take too long so give it a go. Sorry in advance if it's not all that captivating... I'm more of a coder than a writer.

If you are going to give this a shot, try to read through it and test bits of code in FlashDevelop as you go. It's the best way to learn. Attatched is an example of what could be your final product.

Required Downloads
FlashDevelop - Get the latest release (<4MB) Unfortunately it's Windows only for the time being, but it's well worth it.
Debug Flash Player
Flex 3 SDK - Most recent stable build preferable (~100MB)

If you dont have Java then get that, but its most likely already installed. Make sure to install this before FlashDevelop.

Setting up
  • Extract Flex SDK to somewhere on your harddrive (C:\flex_sdk_3 is a good location)
  • Install FlashDevelop (just double click FlashDevelop-3.0.0-BetaX.exe and follow the instructions)
  • Put the debug flash player in your Flex SDK directory
  • Open up FlashDevelop
  • Go to Tools->Program Settings->AS3Context->Flex SDK Location and point it to your FlexSDK install. If you extracted FlexSDK to flex_sdk_3 this should already be done

Lets get started
Now we can get started! Create a new project by going Project->New Project and clicking Empty Project under Actionscript 3. Today we'll be making a basic painting application to get you familiar with working with flash, so name the project Painter. Click Create directory for your project to put all the Painter files in one folder, and then hit OK.

You should see Painter (AS3) has appeared on the right in the Project tab. Right click Painter (AS3) and click Add...->New Class and name it Main.as. That should produce a nice empty template for our project. A quick explanation of the terms:
package – A of grouping code, so it can be reused later in other projects. Don't worry about this too much, just make sure its there.
public – This is something that isn't really useful until you use properly use classes. Until then, just accept that it makes the class visible to the outside world.
class – Classes are a type of structure of code that mean you can reuse the code more easily. It's especially useful for when you want to have many of one type of thing (Such as in games. How convenient :D). Again, i'll go in to further detail next time.
Main– our class name.
function– In this case the function is our class contructor. That is, it creates Main. We'll go into more detail of functions soon.

To check everything is working smoothly lets run something. The following code shows some basic features of Actionscript 3. Every time I give you some code, run it and try to understand why what happens happens. In order to run the code there are a few things you need to do first:
  • Right click Main.as in the project tab and click Always Compile. This designates Main.as as the primary Actionscript file when you have multiple files.
  • Name the output file by right clicking Painter (AS3) in the project tab and clicking properties. There you must give the output SWF a name, and you can also change the background colour or dimensions of the SWF.
  • Save (Press Ctrl+s)
  • Build and Run – The little blue arrow, or Ctrl+Enter
  • If it doesnt work, and provides an error that ends with a '?', copy C:\Program Files\Java\jre1.6.0_07\bin\msvcr71.dll to your System32 folder.
  • At the moment it shouldn't provide any output to you. Navagate to the folder with your SWF file, right click it, and Open With. Chose to always open it with the debug flash player we downloaded. That way, we'll see all output from the SWF.

Code:
package 
{
import flash.display.Sprite; // Sprite is one of the basic flash classes
// we need to import it

public class Main extends Sprite // This means Main is a derivative of Sprite
/* your main class (in our case, its called Main)
* must extend DisplayObject. Sprite is far more useful than
* DisplayObject but luckily Sprite extends DisplayObject.
*/
{
public function Main() // This is a special type of function that we will go in to soon
{
trace(1+2); // simple arithmatic
trace(10+11); // not so simple arithmatic
yell("i'm angry!"); // this is calling the function yell

// traces are used for debugging and cannot be seen unless you have debug flash player. They are very useful when coding complex projects

var word1:String = "hello"; // creating a variable called word1 and giving it data
var word2:String; // creating a variable called word2
word2 = "tigs"; // giving word2 data
trace(word1 + " " + word2);

var values:Array = new Array( 3 );
// Here we have what is called a class constructor
// Array is a class (hover over it to see its details)
// so to create one you say someVariable = new ClassName();
// you can also say var values:Array = {10, "woopdawoop", 5.6};
values[0] = 10;
values[1] = "woopdawoop";
values[2] = 5.6;

for ( var i:int = 0; i < 3; i++ ) // i++ is the same as i = i+1 or i += 1
{
trace( "values[" + i + "] is " + values[i] );
}

var j:int = 5;
var isTrue:Boolean = true;

while ( isTrue ) // you could just have while j < 0 instead of the isTrue business
{
trace( j + "!" );
j--;
if ( j <= 0 ) isTrue = false;
}
trace("Go!");
}

public function yell( s:String ):void //This function returns nothing so we set its return type to void
// but it takes an argument of type String
{
trace( s.toUpperCase() + "!!!" ); // this line prints out the argument string in upper case
// and adds some exclamation marks
}

public function square( number:Number ):Number //This function returns a number
// and takes one argument, of type Number
{
return number*number;
}
}
}

Datatypes and Functions Overview
int– Positive and negative integers. Eg -10, 3, 42
Number – Numbers with decimal places eg 3.141, -1123.0
String – A word in quotation marks. \n is a newline, \t is tab.
Boolean – Either true or false.
Array – Stores a fixed number of variables. The variables can be of any type.
function - Functions take any number of arguements and may either return nothing (void) or a single object of a datatype.


Hopefully none of this went over your head. If it did, don't hesistate to ask questions.

Now you know some of the basic syntax and features of Actionscript 3, let's do something more fun. In order to teach you some of the fundamental concepts of game programming, we'll write a program with some of the features of MS Paint.

Code:
package 
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;

public class Main extends Sprite
{
public var colour:int = 0xFF0000; // this is hexadecimal notation for RGB value of red
// 0x denotes hexadecimal, which is then converted to decimal for storage in colour
public var brushRadius:int = 1;

public function Main()
{
var title:TextField;
title = new TextField();
title.text = "Welcome to Painter!";
title.x = 10;
title.y = 10;
addChild(title);

stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownListener );
graphics.lineStyle( 0, colour );
}

public function mouseDownListener( e:MouseEvent ):void
{
graphics.drawCircle( mouseX, mouseY, brushRadius );
}
}
}

Thanks to Adobe's descriptive function naming this code should be pretty easy to understand, but there may be a few things that seem confusing. Firstly, graphics is an element of Sprite that allows us to draw stuff on the screen. In FlashDevelop, hover your mouse over lineStyle and you'll see what it does, and what the arguments mean.

The most significant things here are addChild() and event listeners. In this case, when you call addChild(title) it is adding title to the Main class's objects. Since Main is by default “added” and drawn to the screen, title is also drawn to the screen. You could create another subtitle Textfield, and call title.addChild(subTitle), so subTitle would only be drawn when title was drawn. Another handy thing about that, is the x and y coordinates of subTitle become relative to that of title, rather than to the stage.

Speaking of stage... the stage in flash is the screen on to which stuff is drawn. stage.stageWidth and stage.stageHeight provide you with the width and height of the stage. Most significantly, in order to capture mouse clicks for the whole screen you need to add an EventListener to the screen. Event listeners are added to display objects (like the stage, or our title) and they capture user input or other events. Here we're adding a eventListener to the stage to listen for mouse clicks, and upon “hearing” a mouse click, it will call the function mouseDownListener (which is required to have an argument for the event type).

Code:
package 
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class Main extends Sprite
{
public var colour:int = 0xFF0000;
public var brushRadius:int = 3;
public var mouseIsDown:Boolean = false;

public function Main()
{
var title:TextField;
title = new TextField();
title.text = "Welcome to Painter!";
title.x = 10;
title.y = 10;
addChild(title);

stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownListener );
stage.addEventListener( MouseEvent.MOUSE_UP, mouseUpListener );
graphics.lineStyle( 1, colour );

var clock:Timer = new Timer( 1000 / 30 );
clock.addEventListener( TimerEvent.TIMER, update );
clock.start();
}

public function update( e:TimerEvent ):void
{
if ( mouseIsDown ) {
graphics.beginFill( colour ); // this makes the circle solid
graphics.drawCircle( mouseX, mouseY, brushRadius );
graphics.endFill();
}
}

public function mouseDownListener( e:MouseEvent ):void
{
mouseIsDown = true;
}

public function mouseUpListener( e:MouseEvent ):void
{
mouseIsDown = false;
}
}
}

If you've run the above block of code, you will have realised it doesn't too very much. In order to allow for dragging we need to constantly be drawing while the mouse button is down. To do this we'll create a timer. At the end of the Main function create a variable clock of type Timer (pressing tab while typing Timer should automatically insert import flash.utils.Timer; up the top). To give clock a value, we need to create an instance of the timer class, so call the Timer class constructor by typing = new Timer( 1000 / 30 ); 1000 / 30 will mean 30 frames per second which is a reasonable framerate (as it is expecting milliseconds). While the program is nice and simple 30 is pretty low, but for complex flash games 30 FPS is about right.

Now that we have a timer, we need to add an event listener to it so we know when its ticking. This time we have to import TimerEvent, so duplicate the line import flash.events.MouseEvent; and change MouseEvent to TimerEvent. Now add an event listener to clock to listen for TimerEvent, and call a function update, when it ticks.

Next we have to write update, or else the timer would be calling a function that doesnt exist. Create a new function called update, with one argument (it doesnt matter what its called, but the general standard is to call it e) of type TimerEvent. The return type should be void. Now copy and paste drawCircle line from mouseDownListener, and put it in update. If you want you can run the program now and it will constantly draw.

In order to only draw when the mouse button is down, we need to not only listen for mouse_down events but also mouse_up events. Duplicate the mouseDownListener function and listener, and instead make it a mouseUpListener. Remember, it should be listening for MOUSE_UP. Now we want to add another variable so we know when the mouse is down. In the same area that colour and brushRadius are defined, create a new variable mouseIsDown of type boolean. Now mouseDownListener should set mouseIsDown to true, and the up listener should set it to false. This allows us to put an if statement in our update function to control when we draw.

You will have noticed by now, that the drawing doesnt work very well. Try using Adobe LiveDocs and the help avaliable to you in FlashDevelop to change the drawing method from circles to lines. A good way to do it is to draw a line from the last mouse position to the current mouse position. Also, try to add the ability to change colours using either buttons or keyboard input.

Hopefully you found this useful and not too boring! If you have any questions please feel free to ask. There may have been some things you felt I skimmed over but hopefully nothing too significant, and if there is something you don't understand, LiveDocs is your friend!

Coming up next, classes, importing images and a half decent game. Happy coding!

For anyone interested, here is my final code (It's not spectacular, but it displays a good number of basic AS3 concepts).

Code:
package 
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class Main extends Sprite
{
public var colour:int = 0xFF0000;
public var brushRadius:int = 1;
public var mouseIsDown:Boolean = false;
public var colourButtons:Shape;
public var colours:Array;

public function Main()
{
var title:TextField;
title = new TextField();
title.text = "Welcome to Painter!";
title.x = 10;
title.y = 10;
addChild(title);

colours = [ 0x000000, 0xFFFFFF, 0xFF0000, 0x00FF00, 0x0000FF ];

colourButtons = new Shape();
colourButtons.x = 20;
colourButtons.y = stage.stageHeight - 50;

for (var i:int = 0; i < 5; i++)
{
colourButtons.graphics.lineStyle( 1, 0x000000 );
colourButtons.graphics.beginFill( colours[i] );
colourButtons.graphics.drawRect( i * 20, 0, 20, 20 );
colourButtons.graphics.endFill();
}
addChild( colourButtons );

stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownListener );
stage.addEventListener( MouseEvent.MOUSE_UP, mouseUpListener );
graphics.lineStyle( 3, colour );

var clock:Timer = new Timer( 1000 / 30 );
clock.addEventListener( TimerEvent.TIMER, update );
clock.start();
}

public function update( e:TimerEvent ):void
{
if ( mouseIsDown )
{
graphics.lineTo( mouseX, mouseY );
}
}

public function isOverColourButtons( x:int, y:int ):Boolean
{
if ( x < colourButtons.x ) return false;
if ( x > colourButtons.x + colourButtons.width ) return false;
if ( y < colourButtons.y ) return false;
if ( y > colourButtons.y + colourButtons.height ) return false;
return true;
}

public function clickColourButtons( buttonNumber:int ):void
{
colour = colours[buttonNumber];
}

public function mouseDownListener( e:MouseEvent ):void
{
if ( isOverColourButtons( mouseX, mouseY ) )
{
var xpos:int = mouseX - colourButtons.x;
clickColourButtons( int(xpos / 20) )
}
else
{
mouseIsDown = true;
}
graphics.lineStyle( 3, colour );
graphics.moveTo( mouseX, mouseY );
}

public function mouseUpListener( e:MouseEvent ):void
{
mouseIsDown = false;
}
}
}

If you spot any errors or have any recommendations, i'd love to hear them.

Look here for the source for my game, Pendulo. It should give you a good overview of how to code simple games in flash.
« Last Edit: March 19, 2009, 09:11:29 pm by Derek » Logged

bateleur
Level 10
*****



View Profile
« Reply #1 on: August 20, 2008, 04:25:55 am »

This is a very good idea.

I can't give you any feedback on it since I was already using Flash, but I'll definitely be linking people to this in future. Gentleman
Logged

Don Andy
Level 10
*****


Andreas Kämper, Dandy, Tophat Andy

tophat@live.de
View Profile Email
« Reply #2 on: August 20, 2008, 04:27:09 am »

I was thinking about doing a quick and dirty flash game after the compo and this comes in really handy. Thanks a big bunch.
Logged
X-Tender
Level 1
*



View Profile WWW
« Reply #3 on: August 20, 2008, 04:45:13 am »

Nice Work!
Looks good so far, great introduction in AS3.
Logged

Farbs
Man
Level 10
*


/Farbs


View Profile WWW Email
« Reply #4 on: August 20, 2008, 05:36:16 am »

Great stuff! I just wish you'd written it a few months ago when I started working in flash Tongue

You might want to change the thread subject if you can though. It sounds like spam.
Logged
ninjascience
Level 0
***


213463732 ryan.miller@cynergysystems.com shinobiscience
View Profile Email
« Reply #5 on: August 20, 2008, 08:11:43 am »

a tip when adding event listeners, use weak references to avoid garbage collection problems, especially with timers.

the full event signature is:
Code:
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

example usage:
Code:
myThing.addEventListener(EventClass.EVENT_TYPE, listenerFunction, false, 0, true);

what does it all mean?  good question...

Quote
useWeakReference:Boolean (default = false) — Determines whether the reference to the listener is strong or weak. A strong reference (the default) prevents your listener from being garbage-collected. A weak reference does not.

Class-level member functions are not subject to garbage collection, so you can set useWeakReference to true for class-level member functions without subjecting them to garbage collection. If you set useWeakReference to true for a listener that is a nested inner function, the function will be garbge-collected and no longer persistent. If you create references to the inner function (save it in another variable) then it is not garbage-collected and stays persistent.




Logged
Cagey
Level 1
*



View Profile WWW Email
« Reply #6 on: August 20, 2008, 06:55:58 pm »

Great stuff! I just wish you'd written it a few months ago when I started working in flash Tongue

You might want to change the thread subject if you can though. It sounds like spam.

Thanks. This title seems a lot more appropriate.

In regard to what ninjascience said: v. good point.

I'll try to go in to detail for that when I discuss classes, and garbage collection comes to the forefront.
Logged

MekanikDestructiwKommando
Level 3
***


Let's ROCK!

1337 quantumpotato@hotmail.com prlfrtnsqnce
View Profile Email
« Reply #7 on: August 20, 2008, 08:53:58 pm »

I will be coming back to this post when I decide to do Flash games (maybe when Kongregate or the like becomes more profitable popular Wink. Much thanks  Beer!
Sticky please?
Logged

Quote
There have always been interactive experiences that go beyond entertainment.  For example, if mafia games are too fun for you, then you can always join the mafia.
Cagey
Level 1
*



View Profile WWW Email
« Reply #8 on: August 20, 2008, 11:57:42 pm »

Gotta say, it's pretty easy to profit from making flash games, especially considering it only costs time to create them. Flash Game License is a great website where you can submit your game, and have it bidded on by websites like kongregate. Mochiads also lets you embed ads in your game.

Word on the street is that some games (Bloons and Protector) have made >$100 000.

Emanuel Feronato has some nice articles on making money with flash games. Well worth a read for any flash developer.

Just a note though: Flash isn't necessarily a platform just for making a quick buck. Many great games have been made in flash, my favourite being N.
Logged

MekanikDestructiwKommando
Level 3
***


Let's ROCK!

1337 quantumpotato@hotmail.com prlfrtnsqnce
View Profile Email
« Reply #9 on: August 21, 2008, 09:04:51 pm »

Gotta say, it's pretty easy to profit from making flash games, especially considering it only costs time to create them. Flash Game License is a great website where you can submit your game, and have it bidded on by websites like kongregate. Mochiads also lets you embed ads in your game.

Word on the street is that some games (Bloons and Protector) have made >$100 000.

Emanuel Feronato has some nice articles on making money with flash games. Well worth a read for any flash developer.

Just a note though: Flash isn't necessarily a platform just for making a quick buck. Many great games have been made in flash, my favourite being N.

Which also made a lot of bucks  Wink
Logged

Quote
There have always been interactive experiences that go beyond entertainment.  For example, if mafia games are too fun for you, then you can always join the mafia.
isaac
Level 2
**



View Profile WWW
« Reply #10 on: August 21, 2008, 10:57:17 pm »

Yeh, good tutorial!

I often get questions from friends who want to learn AS3 game coding, but have no idea where to start. The method I generally use to figure out things (trial & error until something works) doesn't sit well with them, and it's hard to find real basic level-zero flash tutorials, so I'll be pointing folk to this.

It's a pity flashdevelop is windows only. For development on OSX I use the (reasonably priced, but not $0) editor TextMate (http://macromates.com/), which has handy plugins for every programming language under the sun.

I'd also recommend adding a section that demonstrates classes, and class inheritance. It's not 100% vital knowledge, but a lot of the real power and speed of AS3 comes from a good understanding of classes and how they work together.
Logged

Thorst
Level 0
***



View Profile
« Reply #11 on: August 24, 2008, 10:02:30 am »

Will the flash plug-in ever (or does it already) display SVG or another vector graphics format that you can create without flash?
Logged
ninjascience
Level 0
***


213463732 ryan.miller@cynergysystems.com shinobiscience
View Profile Email
« Reply #12 on: August 25, 2008, 03:39:33 pm »

you should post this here:

http://as3gaming.com/wiki/Home

Logged
MekanikDestructiwKommando
Level 3
***


Let's ROCK!

1337 quantumpotato@hotmail.com prlfrtnsqnce
View Profile Email
« Reply #13 on: August 25, 2008, 04:50:08 pm »

Is Flash free to download? I had a version once but I don't remember if it was legit.
Logged

Quote
There have always been interactive experiences that go beyond entertainment.  For example, if mafia games are too fun for you, then you can always join the mafia.
Cagey
Level 1
*



View Profile WWW Email
« Reply #14 on: August 25, 2008, 04:52:49 pm »

The official Adobe Flash IDE isn't. Flashdevelop is. If you arent interested in easily doing vector based movies or games, FlashDevelop is fine. I definately prefer it to the flash ide.

Ninjascience: Thanks for that, will do!
Logged

Farbs
Man
Level 10
*


/Farbs


View Profile WWW Email
« Reply #15 on: August 25, 2008, 05:29:50 pm »

It's also possible to compile ActionScript from the commandline, so you can just use your favourite text editor if you don't need animation tools.

EDIT: And it's free to do that.
Logged
dustin
Level 6
*


View Profile Email
« Reply #16 on: September 02, 2008, 10:02:50 am »

two actionscript questions.  I wasn't really sure where to post them so if you would rather I start a new topic I can but this seemed a pretty good topic for them.

1.  How do people usually go about making menus.  I lay out my buttons in flash cs3 but then I don't know where to assign them actions.  First I just tried it in code but then I can't really tell from what parts of the code I'm allowed to access which buttons.  For instance say I have a button on frame 2.  If I'm on frame 1 I can't access it as it claims to be null.  If I gotoAndStop(2) then access it the frame hasn't switched yet and it still claims to be null.  It's like I need to gotoAndStop(2) wait for the frame to load and then add the action to the button.  What is the normal way people go about doing this kind of thing.

2.  How do I load sound that is inside flash cs3.  I can load sound from an outside source ok but can't figure out how to do it locally.

Thanks!
Logged
ஒழுக்கின்மை
Level 10
*****


Also known as रिंकू.


View Profile WWW Email
« Reply #17 on: September 02, 2008, 03:02:18 pm »

Those are good questions, I wonder those too.

As another question, is there any where you can download non-trivial open source Flash games so that you can learn how those were made from their code? I've found that's the best way to learn a language, examine the code of working programs which were not just made as a tutorial but were intended as serious work.
Logged

Cagey
Level 1
*



View Profile WWW Email
« Reply #18 on: September 02, 2008, 03:55:52 pm »

I've got some example code for a game i never properly finished if you guys want a look. There is a nice menu there, sounds and level loading code. It's 99% complete other than levels.

It's on my other pc so when i find it i'll upload it.
Logged

Farbs
Man
Level 10
*


/Farbs


View Profile WWW Email
« Reply #19 on: September 02, 2008, 04:00:00 pm »

Yes, I would very much like to see that.
Rock.
Logged
Pages: [1] 2 3 4
Print
Jump to:  

Theme orange-lt created by panic