Workshop: Nuclear Outrun – Critique | Flash Video Traning Source

May 14, 2012 Posted on May 14, 2012 in Hints and Tips | 10 comments

Workshop: Nuclear Outrun – Critique

This week, Matt Porter critiques another recently released game: Nuclear Outrun, developed by Nerdook Productions.

Play the Game

Click to play Nuclear Outrun on Kongregate

Overview

With 2012 moving along, it’s no surprise that we’re starting to see more and more “end of the world”-themed games. Nuclear Outrun is one such game, and while it’s not perfect, it’s quite enjoyable. It combines physics, zombies, distance, and upgrades, in a simple, yet enjoyable blend. With only one goal – get to the goal before the nuke hits – players really can’t get too confused by what’s going on.

Gameplay

As I mentioned above, your goal is simple: reach the goal before the nuke hits and turns you into a smear on the streets. You simply press forward (drive to the right), and shoot what gets in your way. You have 20 trucks (attempts), and with each attempt, you earn experience points which unlock new weapons and reward you with skill points. These skill points can be spent on upgrades, such as cranking up the power and ammunition of your weapons, making your vehicle more beastly, and so on.

Nuclear Outrun definitely repeats some of the mistakes common to the distance game formula, but it also succeeds where many others have failed. While you start off weak and slowly grow strong, you’re not entirely crippled by your starting state. Many distance games start you off so weak, that you hardly play the game for the first ten minutes or so, but instead repeat the same simple run over and over, slowly gaining stat points. There is a certain degree of skill in Nuclear Outrun, and you can do well right off, which many other distance games sadly fail to allow. In fact, you can actually complete your goal without getting every upgrade, something most distance games don’t allow. Doing so makes the game feel extremely linear, gives the player little satisfaction upon completion, and offers zero replay-value. I do wish skill was even more of a factor in Nuclear Outrun, but the leveling up aspect is simply part of the genre; at least it’s a step in the right direction.

While the game does use a physics engine, the controls do feel a bit off to me. For whatever reason, I found it far too common that the vehicle was tipped on its back. Even with the ability to adjust individual wheel sizes (such as a large wheel in back, small wheel in front), it was just too easy to end up with your front wheel raised to the sky. This leads to a decrease in the sense of speed (read: fun), and forces players to spend more time balancing their vehicle, rather than focusing on the more enjoyable aspects of the gameplay, such as shooting enemies.

What Nuclear Outrun does best is give the player complete freedom to choose how they want to play. You choose what weapon you want to use, how your vehicle handles (via wheel sizes), and what upgrades to put your skill points into. When you’re actually in the game, it’s up to you whether you want to fly forward full speed, or play it safe at a normal speed and take out all the obstacles.

While we’re on a positive note, it’s also worth mentioning that Nuclear Outrun does a fantastic job of rewarding the player. Even after you complete the game, you get three new weapons, all of which are unique and fun. You’re also rewarded with “Overtime” mode, which allows you to continue playing while competing for high scores. Nearly all web games, huge hits included, fail to reward players after the game is “completed”. It’s extremely important that you give players something extra to reward them, as it increases replay value, and lets the player know you care. Simply saying “Congratulations!” on your final screen is insulting, and doesn’t help you stand out.

Graphics

The graphics in Nuclear Outrun are pretty average. They have a simple yet effective style, but I personally find the whole package a bit unpolished, and lacking in detail. There’s a lot of weapons and effects, so it’s understandable that each one isn’t in extreme detail, but there’s definitely room for improvement. The animation is simple, but like the graphics, it’s quite effective. Nothing really stands out as poor; it’s just nothing pretty.

The menus and UI in my opinion are a bit too messy. There’s a lot of stray or unorganized text, which leads to confusion as to what information is where. The pre-game menu could be greatly improved by moving the level and high score elsewhere, and perhaps making it a bit smaller. All of the text is also just thrown on screen, and isn’t placed with any artistic value. All in all, there’s just too much text, with little thought into how it’s displayed, and it looks messy.

Audio

The audio in Nuclear Outrun is quite awesome. The main game doesn’t have any music, but has a simple, but awesome ambient track. It definitely adds an apocalyptic feel to the game, and I think it fits better than music could have. The loop on the ambient track isn’t perfect, which could be fixed with some minor tweaking, but it’s not too noticeable during gameplay with all the sound effects going on in parallel.

As far as the sound effects go, they’re just as good. Dying is almost enjoyable, due to the sound of the nuke going off and the awesome scream that follows. All of the sounds appear to be unique to the game, which is always a plus. The sounds for zombies such as dying, upgrading, etc, are all very well done, and really couldn’t be any better.

Some of the interface buttons are inconsistent with playing a sound, and it would be a lot more professional if they all did. It’s a minor fault to not have a simple sound play when pressing a button, but it really does take away from the full experience of a polished game.

Conclusion

All and all, Nuclear Outrun is a very well done physics, zombie, distance, and upgrade game. All of the above themes and genres are extremely popular with sponsors, so it’s safe to assume that Nerdook didn’t have a problem selling the game. While there’s definitely room for improvement, I can’t name any games that take the above genres and put them together any better, so kudos to Nerdook for that.

Your Turn

What do you think of Nuclear Outrun? Leave your constructive criticism in the comments.

And if you’ve got a browser game that you’d like the Activetuts+ community to do a critique on, submit it here. We’re looking forward to seeing what you’ve made.

View full post on Activetuts+

10 Responses to “Workshop: Nuclear Outrun – Critique”

Porter says:

May 14, 2012 at 11:18 pm

This week, Matt Porter critiques another recently released game: Nuclear Outrun, developed by Nerdook Productions.

Play the Game

Click to play Nuclear Outrun on Kongregate

Overview

With 2012 moving along, it’s no surprise that we’re starting to see more and more “end of the world”-themed games. Nuclear Outrun is one such game, and while it’s not perfect, it’s quite enjoyable. It combines physics, zombies, distance, and upgrades, in a simple, yet enjoyable blend. With only one goal – get to the goal before the nuke hits – players really can’t get too confused by what’s going on.

Gameplay

As I mentioned above, your goal is simple: reach the goal before the nuke hits and turns you into a smear on the streets. You simply press forward (drive to the right), and shoot what gets in your way. You have 20 trucks (attempts), and with each attempt, you earn experience points which unlock new weapons and reward you with skill points. These skill points can be spent on upgrades, such as cranking up the power and ammunition of your weapons, making your vehicle more beastly, and so on.

Nuclear Outrun definitely repeats some of the mistakes common to the distance game formula, but it also succeeds where many others have failed. While you start off weak and slowly grow strong, you’re not entirely crippled by your starting state. Many distance games start you off so weak, that you hardly play the game for the first ten minutes or so, but instead repeat the same simple run over and over, slowly gaining stat points. There is a certain degree of skill in Nuclear Outrun, and you can do well right off, which many other distance games sadly fail to allow. In fact, you can actually complete your goal without getting every upgrade, something most distance games don’t allow. Doing so makes the game feel extremely linear, gives the player little satisfaction upon completion, and offers zero replay-value. I do wish skill was even more of a factor in Nuclear Outrun, but the leveling up aspect is simply part of the genre; at least it’s a step in the right direction.

While the game does use a physics engine, the controls do feel a bit off to me. For whatever reason, I found it far too common that the vehicle was tipped on its back. Even with the ability to adjust individual wheel sizes (such as a large wheel in back, small wheel in front), it was just too easy to end up with your front wheel raised to the sky. This leads to a decrease in the sense of speed (read: fun), and forces players to spend more time balancing their vehicle, rather than focusing on the more enjoyable aspects of the gameplay, such as shooting enemies.

What Nuclear Outrun does best is give the player complete freedom to choose how they want to play. You choose what weapon you want to use, how your vehicle handles (via wheel sizes), and what upgrades to put your skill points into. When you’re actually in the game, it’s up to you whether you want to fly forward full speed, or play it safe at a normal speed and take out all the obstacles.

While we’re on a positive note, it’s also worth mentioning that Nuclear Outrun does a fantastic job of rewarding the player. Even after you complete the game, you get three new weapons, all of which are unique and fun. You’re also rewarded with “Overtime” mode, which allows you to continue playing while competing for high scores. Nearly all web games, huge hits included, fail to reward players after the game is “completed”. It’s extremely important that you give players something extra to reward them, as it increases replay value, and lets the player know you care. Simply saying “Congratulations!” on your final screen is insulting, and doesn’t help you stand out.

Graphics

The graphics in Nuclear Outrun are pretty average. They have a simple yet effective style, but I personally find the whole package a bit unpolished, and lacking in detail. There’s a lot of weapons and effects, so it’s understandable that each one isn’t in extreme detail, but there’s definitely room for improvement. The animation is simple, but like the graphics, it’s quite effective. Nothing really stands out as poor; it’s just nothing pretty.

The menus and UI in my opinion are a bit too messy. There’s a lot of stray or unorganized text, which leads to confusion as to what information is where. The pre-game menu could be greatly improved by moving the level and high score elsewhere, and perhaps making it a bit smaller. All of the text is also just thrown on screen, and isn’t placed with any artistic value. All in all, there’s just too much text, with little thought into how it’s displayed, and it looks messy.

Audio

The audio in Nuclear Outrun is quite awesome. The main game doesn’t have any music, but has a simple, but awesome ambient track. It definitely adds an apocalyptic feel to the game, and I think it fits better than music could have. The loop on the ambient track isn’t perfect, which could be fixed with some minor tweaking, but it’s not too noticeable during gameplay with all the sound effects going on in parallel.

As far as the sound effects go, they’re just as good. Dying is almost enjoyable, due to the sound of the nuke going off and the awesome scream that follows. All of the sounds appear to be unique to the game, which is always a plus. The sounds for zombies such as dying, upgrading, etc, are all very well done, and really couldn’t be any better.

Some of the interface buttons are inconsistent with playing a sound, and it would be a lot more professional if they all did. It’s a minor fault to not have a simple sound play when pressing a button, but it really does take away from the full experience of a polished game.

Conclusion

All and all, Nuclear Outrun is a very well done physics, zombie, distance, and upgrade game. All of the above themes and genres are extremely popular with sponsors, so it’s safe to assume that Nerdook didn’t have a problem selling the game. While there’s definitely room for improvement, I can’t name any games that take the above genres and put them together any better, so kudos to Nerdook for that.

Your Turn

What do you think of Nuclear Outrun? Leave your constructive criticism in the comments.

And if you’ve got a browser game that you’d like the Activetuts+ community to do a critique on, submit it here. We’re looking forward to seeing what you’ve made.
Michael James Williams says:

May 14, 2012 at 11:30 pm

What does var actually do, and why doesn’t setting myObject = null actually remove the object? These questions tie in to a fundamental concept in coding, relevant whether your language of choice is AS3, JavaScript, or C#, and can be understood using a few common items from the stationery cupboard.

What’s a Variable?

Let’s start with the basics. Suppose you want to store the age of your friend Bill:
```
var ageOfBill:Number = 24;
```
(I’m going to use AS3 for these example, but the basic concepts are the same in JavaScript and C#.

In JavaScript, the syntax is almost the same, but we don’t specify that age is a number:
```
var ageOfBill = 24;
```
In C# we don’t use the var keyword, but we do specify the type of the variable:
```
short ageOfBill = 24;
```
Not different enough to be confusing, I hope.)

So what’s happening here? Think of it this way:
- var (or short, in C#) means, “get a fresh Post-it note”.
- ageOfBill means, “write ageOfBill across the top, in pen”.
- = 24 means, “write 24 on the note, in pencil”.
What if later we realise that Bill’s actually younger than we thought?
```
var ageOfBill = 24;
//...later...
ageOfBill = 20;
```
This just means we find our ageOfBill note, erase 24, and write 20 on it instead.

We could write var again:
```
var ageOfBill:Number = 24;
//...later...
var ageOfBill:Number = 20;
```
…but this is not good code, because var says, “get a fresh Post-it note”. If you do this, the compiler will usually figure out what you mean – i.e. that you want to change what’s written on the existing ageOfBill Post-it note rather than actually getting a fresh one – but it will probably complain.
```
Warning: #3596: Duplicate variable definition.
```
It depends on the language and on your coding environment.

So can we ask the compiler to get a fresh Post-it note and write a label on it in pen, without writing anything on it in pencil? Perhaps we could do this for Bill’s friend Marty, whose age we don’t know:
```
var ageOfMarty:Number;
```
Actually (in AS3, at least) this will get a fresh Post-it note, write ageOfMarty across the top, in pen… and then write a default initial value of 0 on there in pencil:

So, in other words, we can’t have a Post-it note like this without it taking some value.

Okay – what about if we want to store the age of Bill’s best friend Ted, who we know is the same age?
```
var ageOfTed:Number = ageOfBill;
```
What happens here is, the computer looks at the ageOfBill Post-it, then copies the number written on it in pencil to a fresh Post-it, on which it writes ageOfTed across the top in pen.

This is just a copy, though; if we then change the value of ageOfBill it won’t affect ageOfTed:
```
ageOfBill = 21;
```
So! That’s all pretty straightforward, and maybe even intuitive. Now let’s talk about the first common pain point: arrays.

What’s an Array?

Think of an array as a ring binder.

(I was going to say a rolodex…

…but I realised that I had never even seen one in real life.)

Each sheet inside the binder is like one of those Post-it notes, except without the pen-written label across the top. Instead, we refer to each sheet by the name of the binder and the page number of the sheet.

Let’s suppose we’ve got an array of all our friends, in no particular order. Who’s on the first page (page #0)?
```
trace(friends[0]);
```
(trace() just writes the line to the debug output; in JavaScript, you might use console.log() and in C# you might use Console.WriteLine() for the same purpose.)

It’s Bill!

So, now, what does the following line do?
```
var firstFriend:String = friends[0];
```
It gets a fresh Post-it note (because of the var keyword), writes firstFriend across the top in pen, then copies whatever’s written on the first page of the binder onto that note in pencil.

(Remember, String just means a piece of text.)

We can overwrite what’s written on any page of the binder, just like with the Post-it notes:
```
friends[0] = "Kyle";
```
…and of course this doesn’t affect the firstFriend Post-it.

The binder is an apt analogy, because – just like with an array – you take take pages out, add new ones, and rearrange them. But remember, individual pages act just like the Post-it notes, except they don’t have their own pen labels, just page numbers.

Still pretty straightforward, I hope. So here’s an interesting question: what happens when you do the following?
```
var listOfNames:Array = friends;
```
Uh…

You Can’t Write That on a Post-it

I’ve cheated a bit here, because I talked a bunch about arrays without ever explaining how we create one in the first place. So let’s tackle that now.

Suppose you type:
```
var friends:Array = ["Bill", "Marty", "Ted"];
```
…What happens?

Well, as usual, var friends means we get a fresh Post-it note and write friends across the top, in pen:

But what do we write on it in pencil?

It’s a trick question: we don’t write anything.

See, Array means, “get a new ring binder”. And ["Bill", "Marty", "Ted"] means “put three pages in the binder, with these names on it”:

You can’t see the “Marty” and “Ted” pages, but they’re totally there.

And then? It’s simple! We stick the friends Post-it note to the cover of the binder:

Now, when we write:
```
trace(friends[0]);
```
…we know that we have to find the Post-it labelled friends, then look at whatever’s written on the first page (page #0) of the binder that it’s stuck to.

There are actually very few types of variable where a value gets written onto a Post-it note in pencil. In AS3, the only such types (called “primitives”) are:
- Number
- String
- int
- uint
- Boolean
For everything else – Object, MovieClip, XML, and so on – we stick the Post-it note onto the item itself.

(The details are a little different in JavaScript and C#, but overall the same idea applies.)

So let’s get back to our earlier question. When we type:
```
var listOfNames:Array = friends;
```
…what happens?

Again, we know that var listOfNames means “get a fresh Post-it note and write listOfNames across the top in pen”. And now we know that Array means we’ll be sticking the Post-it note to something (a binder), rather than writing something on the Post-it in pencil.

Previously, when we’ve done something similar, we’ve copied the contents of one Post-it note onto another. So here, should we get a fresh new binder and copy all of the pages from the friends binder into it?

Actually, no! All we do is stick this new listOfNames Post-it note onto the same binder as the friends Post-it note.

Now, friends and listOfNames each refer to the exact same array. So if we write:
```
listOfNames[0] = "Emmett";
```
…then friends[0] will also be Emmett, because listOfNames[0] and friends[0] refer to the exact same page in the exact same binder! And because that page only contains a String (which is a “primitive” type, remember), then we’ve just erased whatever was written on that page previously and written Emmett there instead.

So What Does null Mean?

Seen like this, null is quite easy to understand. This statement:
```
friends = null;
```
…just means, “remove the friends Post-it note from whatever it’s currently stuck to”.

The friends Post-it still exists, it’s just not stuck to anything. So if you type:
```
trace(friends[0]);
```
or
```
friends[0] = "Henry";
```
…then you’ll get an error, because you’re trying to reference the first page of the binder that the friends Post-it is stuck to – but it’s not stuck to anything!

So, to be clear, setting friends = null doesn’t affect the binder at all. You can still access it just fine via listOfNames. And you can even type:
```
friends = listOfNames;
```
…to go right back to the old situation:

Garbage Collection

Like I said, setting friends = null doesn’t affect the binder directly, but it can have an indirect effect.

See, if there are no Post-it notes stuck to the binder at all, then there’s no way for anyone to access the binder ever again. It’ll just lie around, totally inaccessible. But having all these binders (and other objects) lying around, totally abandoned, is a real waste of space – they’re cluttering up the computer memory.

That’s where the garbage collector comes in. This is a tool that periodically checks for any “lost” objects, and throws them in the trash – and once they’re gone, they’re gone for good; if an array is garbage collected then all of its pages are, too.

For most practical purposes, this doesn’t affect you at all; objects only get garbage collected if they’re lost and unable to be found by your code. If you have a lot of these lying around, then you might notice a slight lag every now and then, when the garbage collector does its job (it takes a little time to actively collect the garbage). The benefit is that this clears up more room (memory) for your app.

(If you want to know more about this topic, read Daniel Sidhion’s posts on garbage collection and object pooling.)

Arrays of Objects

Okay, there’s one more big concept to grasp – and it’s the most complex one yet.

Consider this snippet:
```
var firstFriendDetails:Array = ["Bill", 20];
var secondFriendDetails:Array = ["Marty", 16];
var thirdFriendDetails:Array = ["Ted", 20];
var allFriends:Array = [firstFriendDetails, secondFriendDetails, thirdFriendDetails];
```
How the heck does that work?

Let’s start with what we know. The first three lines are easy; for each one we:
- Get a fresh binder.
- Insert a page with the friend’s name written on it in pencil.
- For nsert another page with the friend’s age written on it in pencil.
- Get a fresh Post-it and write the appropriate label across the top in pen.
- Stick the Post-it to the binder.
As for this line:
```
var allFriends:Array = [firstFriendDetails, secondFriendDetails, thirdFriendDetails];
```
…we’re going to need some string and some tape.

We can think of that one line as being equivalent to this snippet:
```
var allFriends:Array = [];
allFriends[0] = firstFriendDetails;
allFriends[1] = secondFriendDetails;
allFriends[2] = thirdFriendDetails;
```
The first line is easy: get a fresh binder and a fresh Post-it note, write allFriends on the Post-it note, and stick it to the binder.

As for the second line:
```
allFriends[0] = firstFriendDetails;
```
Remember that I said that each page in a binder is like a Post-it note, except without anything written in pen. If the first page was a Post-it, then we’d simply stick it to the front of the firstFriendDetails binder, right?

…but it can’t be both on the front of that binder and inside the other binder. So, instead, we use string:

Same for the other two:

So when we want to know what allFriends[2] refers to, we just open the allFriends binder to that page and follow the string – which, of course, leads to the thirdFriendDetails binder.

Similarly, for allFriends[1][0], we first figure out which binder allFriends[1] refers to, and then we look at the first page of that binder… so allFriends[1][0] is Marty!

Loops

Now put all that information together, and bear it in mind when reading this snippet:
```
var friends:Array = ["Bill", "Marty", "Ted", "Emmett", "Henry"];
var currentIndex:int = 0;
var currentFriend:String;

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    trace(currentFriend);
}
var lastFriend:String = currentFriend;
trace(lastFriend);
```
What if we modify the value of currentFriend inside the loop?
```
var friends:Array = ["Bill", "Marty", "Ted", "Emmett", "Henry"];
var currentIndex:int = 0;
var currentFriend:String;

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    currentFriend = "Herbert";
    trace(currentFriend);
}
trace(friends[0]);
```
What if the array contains non-primitive objects (MovieClips, images, arrays, 3D objects, whatever)?
```
var friends:Array = [firstFriend, secondFriend, thirdFriend, fourthFriend, fifthFriend];
var currentIndex:int = 0;
var currentFriend:MovieClip;   //or ":Image" or ":Object" or ":Array" or whatever

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    currentFriend = sixthFriend;
}

//What is the value of friends[0] now?
```
Finally, what if the array contains other arrays, which themselves contain primitives?
```
var firstFriendDetails:Array = ["Bill", 20];
var secondFriendDetails:Array = ["Marty", 16];
var thirdFriendDetails:Array = ["Ted", 20];
var fourthFriendDetails:Array = ["Emmett", 50];
var fifthFriendDetails:Array = ["Henry", 36];
var friends:Array = [firstFriendDetails, secondFriendDetails, thirdFriendDetails, fourthFriendDetails, fifthFriendDetails];

var currentIndex:int = 0;
var currentFriend:Array;

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    currentFriend[0] = "John";
    currentFriend = ["Herbert", 29];
}
```
What do you think the value of friends[3][0] will be after that?

Other Bits and Pieces

Here are a few other important notes you should know:

Objects

In AS3 and JavaScript, Objects are like Arrays except each page is referred to by a label rather than by its page number. So you can type:
```
var detailsOfBill:Object = {};  //"{}" means "create an Object"
detailsOfBill.title = "Esquire";
detailsOfBill.bandName = "Wyld Stallyns";
detailsOfBill.allNames = ["Bill", "S.", "Preston"];
```
…and this is kind of like getting a fresh binder, sticking a detailsOfBill Post-it on the front, and filling it with three pages. The first page has the label title written across the top in pen and the word Esquire written on it in pencil; the second page has the label bandName in pen and Wyld Stallyns in pencil. The third page has the label allNames but has nothing written on it in pencil; instead, a string attaches it to another, regular binder, whose pages are not labelled: the first page says Bill, the second says S., and the third says Preston, all in pencil.

(To make things even more confusing, arrays are technically a special form of Object. And if you think that’s bad, functions can be seen as a type of Object, too! But that’s a topic for a future article…)

More on Garbage Collection

I said that objects are garbage collected if they don’t have any Post-it notes stuck to them, but this is an oversimplification. If one page of a binder points to an object via string (i.e. if myArray[0] = myObject or similar), then that object won’t be garbage collected. Same goes for if a page of a binder points to another binder (array), or if the page of an object binder points to another object binder… and so on. It even applies if the only way to access the object is through a Post-it stuck to a binder which has one page that’s tied to another binder, as many layers deep as you want to go.

Basically, the garbage collector only collects an item if it can’t be reached through any other variable.

This explains why objects that are on the screen usually can’t be object collected. In AS3, if a MovieClip or other type of DisplayObject is in the display list, then it’s automatically added to what is essentially a hidden array of display objects (which you can access via getChildAt()). Similar structures exist in JavaScript and C#. So if a graphic is on the screen, and you remove all references to it from variables, arrays, and objects, it still won’t be garbage collected until you remove it from the display list.

Any Questions?

I hope this helps to clear things up. It’s certainly a confusing concept when you first come across it: some variables actually contain a value, while others just contain a reference to an object. Don’t worry if you’re not 100% sure exactly what’s going on; it’ll make a lot more sense after a bit of practice (and a few mistakes!).

However, if you have any specific questions about it, just stick a comment below and I’ll do my best to answer.

Thanks for reading!
David Appleyard says:

May 14, 2012 at 11:44 pm

We’re planning our next few Tuts+ sites, and would love your opinion and advice on which topics you think we should cover next! We’d be really grateful if you could take a minute to answer our quick poll and share your thoughts…

Have Your Say

We’ve been considering lots of different ideas for our next Tuts+ sites over the past few weeks, and wanted to also ask the opinion of our awesome community!

A selection of different concepts are included in the poll to the right, along with the option for you to submit your own ideas as well.

The important thing to note is that these are just ideas. Some of these are close to making our final cut, and others aren’t… We’d love to hear what you think, to help guide our decision.

Thanks for taking the time to offer your suggestion — I can’t wait to see what you have to say!

Win a 6-Month Tuts+ Premium Membership

Our poll will be running for the next couple of weeks, and we’ll be choosing one respondent at random to receive a six-month Tuts+ Premium membership!

To be entered into the giveaway, just leave a comment on this post to go into a bit more detail about your site suggestion. We’ll choose one comment at random to win the Tuts+ Premium membership when the poll ends.

Best of luck!
Carlos Yanez says:

May 15, 2012 at 12:27 am

In this Premium tutorial, you’ll learn to use a physics engine to power a Bloons-style Flash game, in which a squirrel throws acorns at a grid of balloons to try to pop as many as possible.

Premium Preview

Let’s take a look at the result we will be working towards:

One of the most popular Flash games ever is Bloons, in which you play a monkey throwing darts to pop balloons. It’s spawned numerous sequels, even branching out into other genres like tower defense. This tutorial will show you how to create your own balloon popping game, using the QuickBox2D engine.

Read the Full Tutorial

Premium members can access the full tutorial right away!

If you’re not yet a Premium member, you can still read the first few steps for free.

Tuts+ Premium Membership

We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
Anthony Lombardo says:

May 15, 2012 at 1:22 am

I can’t tell you how many articles and tutorials I have come across on how to use symbols in Flash that immediately dismiss the graphic symbol as having no practical purpose, relegating it as just a step above grouping items. This article will attempt to dispel this myth by showing that the graphic symbol actually has some pretty cool and convenient features and knowing how and when to utilize them is a nice tool to have when you’re creating animations in Flash.

October of 2011

I first began using Flash with version MX. And through all the enhancements and added features in every release, one thing that has remained constant is the graphic symbol. But what has also remained constant, surprisingly enough, is how many Flash users don’t know what the graphic symbol actually does. Somewhere along the line, this symbol has received a bad rap as being totally useless. If you’ve ever wondered what exactly the purpose of the graphic symbol is and why the heck Adobe continues to keep it in Flash, this article is for you.

The Basics

We’ll start off with the most known and basic of things you can do with the graphic symbol that are inherent to all Flash symbols. Just like movie clips and buttons, a graphic symbol can have color effects applied to it like alpha and tint, get broken apart into its comprising elements via CMD/CTRL-B, and of course have its properties motion-tweened.

I know that’s far from a revelation, but I mention these attributes because I think it’s important to keep in mind that a graphic symbol at its core is just like any other Flash symbol but with its own unique set of features.

Animation Misconceptions

One of the biggest misconceptions about the graphic symbol is that it cannot contain animation – or that, if it does, Flash will just ignore it at runtime. Not only is that completely untrue, but in actuality graphic symbols are very powerful and flexible when it comes to creating timeline animation.

Just like a movie clip, a graphic symbol can contain nested animations on top of nested animations of other graphic symbols and movie clips. It is the symbol of choice used by most professional Flash animators, especially when it comes to creating complex timeline animation with lots of vector assets. Let’s see why.

Animation and the Properties Panel

The true power of the graphic symbol lies within the Properties panel. This is where you can control the animation inside a graphic symbol, which is one of the hidden, unknown jewels in Flash. The approach that I am about to detail is really an animation technique referred to by many as the Chris Georgenes method.

If you’re not familiar with Chris Georgenes, he is a well-respected Flash animator who innovated this approach to animating with graphic symbols and I was lucky enough to take a character animation course he was the instructor of. I highly recommend you read up on many of his Flash animation techniques and tricks.

That’s enough background information so let’s get cracking with the good stuff. When you create a graphic symbol (Modify > Convert to Symbol), you have three options for handling how the symbol will play back its animation; to see them, with the symbol selected, go over to the Properties panel and look under the Looping category.

When you click on the Options drop-down, you will be presented with three options to choose from: Loop, Play Once and Single Frame. Also below the drop-down, you’ll see a small input field labeled ‘First’. Before we get to that, let’s understand the three looping options – but keep that little input field in mind as we go through each option as it will all tie together.

Note: If you don’t see the Options field, just click on the arrow to the left of Looping to reveal the drop-down.

Loop: Loop is the default setting for every new graphic symbol that is created. Basically this option will constantly loop any and all animation that is nested inside it. So in other words, the symbol’s timeline will play through its duration and then start over again, just like a movie clip.

Play Once: This setting is pretty self-explanatory as well. It will play the symbol’s timeline once through and then stop. Think of it as the graphic symbol’s way of adding a stop() action on the final frame of its timeline.

Single Frame: Single frame allows you to display only a certain frame within the symbol’s timeline. Whereas the symbol’s timeline is actually playing when it’s set to Loop or Play Once, the Single Frame option just jumps the timeline to a specific frame within the symbol and stays there. I like to think of it as the graphic symbol’s version of using gotoAndStop(frame). So how is this done? If you’re recalling that tiny input field labeled ‘First’ that I told you to keep in mind a few paragraphs back, you’re heading in the right direction.

First Frame Input Field

Though very ambiguous and easily unnoticed, this input field is where all the fun happens for controlling the timeline of a given symbol. This is one of my favorite features of the graphic symbol because you can target a specific frame on the symbol’s timeline by typing a frame number in the input field.

When a graphic symbol is first created, the first frame input field is set to 1 by default – as denoted by the 1 inside the field. This means frame 1 on the symbol’s timeline will be the first frame the animation will begin on. That’s where the label First comes in; think of it as the first frame you want to display or the first frame you want to play from. So if you have a symbol set to Single Frame and type 6 in the first frame field, it will display whatever is on frame 6. If the supplied frame number is blank or if the symbol doesn’t even have that many frames in its timeline, then nothing will display.

You can also use the first frame field with the Loop and Play Once options. If you set a symbol to Play Once and type in a certain frame number in the input field it will start from that frame. The same applies if you set it to loop. The symbol would begin to loop starting with the frame number you supplied in the input field. Keep in mind though that if you typed in 6, it will start to loop from frame 6 but once it reaches the end of the timeline it will continue to frame 1 in its usual manner.

But It Still Isn’t Animating

Now, if you took it upon yourself to try any of this out within Flash, you’re probably wondering why your animation isn’t playing in the manner I’ve been describing. Open up the file named looping_basics.fla in the source package. Double-click the graphic symbol that is on the stage to check out the animation that’s inside of it. You’ll see two layers spanning 239 frames on the timeline, with a new keyframe on both layers every 30 frames (i.e. every second). So if you scrub the play head, you’ll see we basically have an 8-second animation in which on every second the number in the center increments by one and the circular background changes color. By all means nothing fancy.

After you have the gist of the animation, return to the main timeline, click on the graphic symbol and check the properties panel to make sure the symbol is set to Loop and 1 in the first frame field. Now test out the movie.

What’s going on here? Our symbol isn’t animating even though we have it set to Loop. Right about now you might want to say you told me so about Flash just ignoring a graphic symbol’s animation. Before you do so, let’s get to the bottom of this.

It’s All About the Timeline

This is the common pitfall most people experience when they create an animation inside a graphic symbol. And it’s probably the reason why the symbol is thought of as useless. You create an animation on the graphic’s timeline then position the symbol on the main timeline just like you would with a movie clip. But when you go to export your movie, the symbol just sits there static on the stage. This is where the misconception lies: we are expecting the graphic symbol to behave just like a movie clip.

The trick to the graphic symbol is that it is timeline driven – meaning its own timeline coincides with the timeline the symbol is placed on. So if it’s placed on the stage, it needs just as many frames on the main timeline as it has on its own timeline in order to play the animation in its entirety. In other words, whereas a movie clip will play independently of the timeline, a graphic symbol will be played only as far as its parent’s timeline will allow it.

In a nutshell, a graphic symbol needs frames.

Give It Some Frames

If you go back to our example in Flash, the reason our graphic symbol isn’t playing is because there is only one frame on the main timeline. So let’s add some frames. Just for demonstration purposes, go to frame 30 and add frames. Now go to frame 60 and do the same. Do you see what’s happening here? Then go to frame 90. Very cool, huh? Keep adding as many frames as you want and test the movie. You should see the animation begin to play, depending on how many frames you have on your main timeline. Remember our symbol has 239 frames on its timeline, so in order to see the entire animation, there needs to be the same amount on the main timeline.

Note: Keep in mind this principal we’ve been discussing doesn’t just apply for the main timeline. The timeline that the graphic symbol is actually placed on will dictate its playback. So for example, if your graphic is inside a movie clip, you need frames on the movie clip’s timeline to render the graphic’s animation. Try it out yourself.

Automatic Playback

As you probably noticed from the example file, you can actually see the graphic symbol animate as you scrub the timeline from the stage. Yes, very cool. This brings us to another unique feature that differentiates a graphic symbol from a movie clip and you’ll probably find it to be its most useful. Since the graphic symbol is timeline driven, a benefit of that is having your animation automatically update within Flash. As long as you have ample amount of frames on the timeline where your symbol is located, you can always see your graphic symbol animate live.

Case Study: Facial Expressions

Let’s explore these techniques a little more to give you another look on how you can incorporate a graphic symbol into a project. Open up the file named facial_expressions.fla that’s in the source package. You will be greeted with a nice smiling face on the stage that was part of an illustration for an animated character I created a few years back.

If you click on the symbol, you’ll see it’s a graphic with a library name of expressions, and that it is set to Single Frame 1. Go inside the symbol and you’ll see three layers: eyes, mouth and head, each of which contain graphic symbols. The head layer contains all the other elements that comprise this little guy’s smiling face, and if you unlock the layer and double-click the symbol you’ll see are all graphic symbols as well. For our purposes, though, we are going to be focusing on the graphic symbols for the mouth and eyes. Go inside the mouth symbol and you’ll see it contains various different mouth shapes at various points on the timeline, and the same goes for the eyes. Let me point out that the left and right eyes are instances of the same exact symbol.

Go inside both the mouth and eye symbols and take a look around. You’ll notice that I have a frame labels layer corresponding to each facial expression and that I chose to put each of them on a keyframe that are 10 frames apart. There’s no reason for having the timeline set up like this other than it’s my own way of trying to keep it clean and organized. I probably wouldn’t use the frame labels in ActionScript (though I could if I converted my graphic to a movie clip) but having a label for every new expression lets me know at a glance where a certain expression is on the timeline. And besides giving me some space so the labels can actually be read, the 10 frame gap between each keyframe simply makes it easy for me to remember where a new mouth or eye expression occurs on the timeline.

Now jump back one level to the expressions graphic where we just have our three layers of the mouth, eyes and head, and start using these symbols to create some animation. There’s a lot of different ways you can set things up here, depending on what you want to do, but let’s just keep it simple and make our guy blink.

Insert a new frame on all three layers. Check that both the mouth and eye symbols are set to Single Frame 1 and then insert a new keyframe on the eyes layer and set both eyes to Single Frame 10.

Go back to the stage, give yourself about 45 or so frames, make a new keyframe on frame 30 and change the 1 in the first frame field to a 2. Remember your keyframes should be set to Single Frame. Now test it out and your guy should be blinking. I know that’s nothing fancy but the point here isn’t so much about what can be created with the graphic symbol, but rather about the convenience and flexibility it provides you. We’ll get to more on this in a bit but hopefully this example has your gears turning.

When Would You Use a Graphic Over a Movie Clip?

Personally, any time I am working on a project that calls for creating numerous timeline animations, I consider using the graphic symbol. Any Flash user who has ever spent countless hours tinkering with numerous movie clips that all contain their own animations has probably run into a situation where they wish they could pinpoint where something was occurring on a certain movie clip’s timeline from another spot in the movie. From my own experience, there have been many times in which I have an animation inside one movie clip and want to use it within another clip but needed to know when a certain point in my animation was reached so I can have something else happen. I would have to resort to a tedious process of jumping back and forth between movie clips and counting frames so I could figure out where to place it on that second clip’s timeline. Using my animation as a graphic would allow me to see everything without having to export my entire movie.

Tip: Even when I am using a movie clip for a timeline animation, I sometimes temporarily set it as a graphic in the properties panel just so I can view the animation playback while other objects are animating around it. I can then get a better sense of the overall timing and do some tweaks; when I’m done, I set it back to act as a movie clip.

To do this, just click on your symbol, go to the top of the Properties panel and click on the drop down. This is where you can change your symbol’s behavior on the fly, toggling it between a movie clip and a graphic. This is very useful when you want to use the same symbol as both a movie clip and a graphic throughout your project. Note: This technique will not work if you try to change between a movie clip and a button or between a graphic and a button.

Practical Uses

Here are some other practical uses of when you might want to consider using a graphic symbol:

Animated Presentations: Presentations are the projects where I find myself using graphic symbols the most. Most flash presentations tend to be heavy on animation and syncing visuals to a script. The graphic symbol lends itself well to projects like these that are in linear in nature and have limited user interaction.

Syncing audio with an animation: This is an extension of the previous point. Anytime you want pinpoint synchronization between a sound and an animation, running your audio alongside your animated graphic symbol will give you that type of control. Many voiceover presentations that I have been involved in have employed animated graphic symbols.

Character animation: Anytime you are going to create intricate animations with vector artwork that has lots of layers, the graphic symbol is the way to go. Many cartoon animations have been made with flash and I would bet anything that if you were to examine the FLA they were made in, the library would be packed to the brim with graphic symbols. Just like facial expressions, creating sequences for walk cycles and lip syncing sequences are ideal jobs for using the graphic symbol.

Creating multiple variations of a symbol: We already touched on this notion throughout the article but I think it’s worth further explanation. If you recall in our facial expressions example from earlier, the mouth and eye graphic were used to house all our different mouth and eye shapes for easy animating. Well, sometimes I use the graphic symbol to just hold a bunch of similar movie clips that are just slightly different, or what I like to refer to as poses.

In some cases, I’m not looking to sequence these poses for an animation like in the facial expressions example but to act as a holder of my elements, which will simplify the process of accessing them later on. I find it much easier to refer to each pose if they are all on their own frame inside a graphic instead of having to sift through one long movie clip timeline with numerous layers. All I have to do is target the frame number of the one I want inside the first frame field like we did in the facial expressions example. And if I need to control any of my poses with actionscript, I just turn my graphic into a movie clip.

Limitations

The graphic symbol is not without its limitations and drawbacks. While the graphic symbol can be very useful in certain situations, by no means am I advocating it as a replacement to the movie clip. In most situations, a movie clip will be your symbol of choice and will do just fine even for creating most timeline animations. Here are some things to keep in mind when using the graphic symbol:

Can’t be controlled by ActionScript: This is an obvious point but it’s a biggie. Unlike a movie clip, you can’t assign a graphic symbol an instance name and any script you place on its timeline will be ignored. Keep in mind though you can still use a movie clip that has ActionScript on its timeline as a graphic and it will play back normally.

Can’t apply filters: For some reason, Flash doesn’t allow you to apply any of the filters or blending modes to a graphic symbol. To get around this, you can simply put your graphic symbol inside a movie clip and then apply the filter to the clip.

Classic tweening graphic symbols with nested animation can be problematic: This is one I learned the hard way and it’s an issue that can happen quite easily without you even realizing. Let’s say you have a graphic symbol with a pretty involved animation inside it, and you want to tween the symbol on the main timeline from left to right across the stage as your nested animation plays. You create your first keyframe on the timeline and you set it to Play Once starting on frame 1 in the Properties panel. When you create your second keyframe, Flash will automatically set it to Play Once and update the first frame field accordingly with the correct frame number in sequence.

So using the above example if your first keyframe is on frame 10 on the main timeline and your next keyframe is on frame 40, the graphic symbol on this frame would be set to Play Once with the first frame field already set to 30. Get it? It inserted the frame number you left off from? Now if you were to add or delete frames within the tween, the symbol on that second keyframe will still have 30 set as its first frame to play from thus completely throwing off the order of your nested animation. It’s just something to keep in mind; when you initially create keyframes, the first frame number will update correctly, but once you start moving keyframes up and down the timeline, things will get thrown off.

Note: This only applies to classic tweens. If you are using the method for creating motion tweens that was introduced in Flash CS4, this won’t be an issue.

Conclusion

Hopefully after reading this article you have a different opinion of the graphic symbol. Though it may not be something you can see yourself using all that frequently, the thing to keep in mind with the graphic symbol is that it’s about knowing when to use it. As a developer, I don’t use it all that often but I know I have it as an option if the situation calls for it. Like with most things in Flash, it comes down to a matter of personal preference. If you pick and choose your spots wisely, using the graphic symbol can be convenient and a time-saver.

I know a lot was covered in this article, but the best way to really understand what the graphic symbol can do is to spend some time playing around with it in Flash. Change its looping options, target different frame numbers to start your animation on and toggle back and forth between using it as a graphic and a movie clip to really see what works and what doesn’t. So maybe the next time you hit F8 and you are planning on creating a timeline animation, remember the graphic symbol might not be that useless after all.
Tyler Seitz says:

May 15, 2012 at 1:57 am

Path following is a simple concept to grasp: the object moves from point A to point B to point C, and so on. But what if we want our object to follow the path of the player, like ghosts in racing games? In this tutorial, I’ll show you how to achieve this with waypoints in AS3.

Final Result Preview

Click the SWF, then use the arrow keys to move around. Press space to switch to the ghost, which will follow the path you’ve created.

The Logic Behind Path Following

Let’s suppose the player moves 4 units left and 2 units down from our point of origin. For our ghost to end up in the same location it will have to also move 4 units left and 2 units down from the same point of origin. Now let’s say our player is moving at a speed of 2; for the path following to remain accurate our ghost will also have a speed rate of 2.

What if our player decides to take a pause before continuing on? The obvious solution is for the ghost to keep track of the player’s exact position every tick – but this will involve storing a lot of data. Instead, what we’ll do is simply store data every time the player presses different keys – so if the player moves right for ten seconds, we’ll store the same amount of data as if the player moved right for half a second.

For this technique to work our ghost must abide by the following rules:
- The ghost and player have the same point of origin.
- The ghost must follow the exact same path as the player.
- The ghost should move at the same speed as the player.
- The ghost has to store the current time each time the player’s motion changes.
Step 1: Setting Up

Start by creating a new Flash file (ActionScript 3.0). Set the width to 480, the height to 320 and frames per second to 30. Leave the background color as white and save the file as CreatingGhosts.fla; lastly set its class to CreatingGhosts.

Before we move into the classes we need to create a pair of MovieClips. Start by drawing two separate 20px squares without a stroke. Convert the first fill to a MovieClip, setting its registration to the center, naming it player and exporting it for ActionScript with the class name Player. Now repeat the same process, except replace the name with ghost and the class with Ghost. Remove these MovieClips from the stage.

Create your document class with the following code:
```
package{
	import flash.display.*;
	import flash.events.*;

	public class CreatingGhosts extends MovieClip{
		public var player:Player = new Player();
		public function CreatingGhosts(){
			addChild(player);
		}
	}
}
```
Self explanatory; our next step will be to set up the Player class:
```
package{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Point;
	import flash.ui.Keyboard;
	import flash.utils.Timer;
	import flash.utils.getTimer;

	public class Player extends MovieClip{
		public var startPos:Point;
		public var startTime:int;
		public var speed:Number = 2;
		public var currentLife:int;
		public var keyPressLeft:Boolean = false;
		public var keyPressRight:Boolean = false;
		public var keyPressUp:Boolean = false;
		public var keyPressDown:Boolean = false;
		public function Player(){

		}
	}
}
```
The first three variables are used to help meet the rules; startPos is our point of origin, startTime is the time when the Player was added to the stage and speed is our our rate of movement. currentLife is an addition used to check how many times the player has died, accordingly each path is stored and obtainable through that value. The last four variables are used to check key presses.

It’s time to create the Ghost class:
```
package{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Point;
	import flash.utils.getTimer;
	import flash.utils.Timer;

	public class Ghost extends MovieClip{
		static public var waypoints:Array = new Array();
		static public var times:Array = new Array();
		public var i:int = 0;
		public var startTime:int;
		public var speed:Number = 2;
		public var selectedLife:int;
		public function Ghost(){

		}
	}
}
```
The two static variables, waypoints and times, will be used to store arrays; the first will store coordinates of the player’s positions whenever the player changes motion, and the second will store the times at which each change occurred. The other variables match those from the Player class.

Step 2: Initializing the Player

Within the Player’s constructor add the following line:
```
addEventListener(Event.ADDED_TO_STAGE, init);
```
Next create the init() function:
```
public function init(e:Event){

}
```
First, we need to obtain the startTime and push a new time array to the Ghost’s times array. (This is a little confusing; the ghost has multiple time arrays to allow it to deal with multiple lives in the future.)
```
startTime = flash.utils.getTimer();
Ghost.times.push(new Array);
currentLife = Ghost.times.length - 1;
Ghost.times[currentLife].push(flash.utils.getTimer() - startTime);
```
startTime is set to the current time (a value in milliseconds); we add a new child array to the Ghost’s times array; our currentLife is set to the index of this new array; and we push the time that has elapsed during this function to the first element of this new array.

Now we set up the starting position:
```
startPos = new Point(stage.stageWidth/2, stage.stageHeight/2);
this.x = startPos.x;
this.y = startPos.y;
Ghost.waypoints.push(new Array);
Ghost.waypoints[currentLife].push(startPos);
```
Our point of origin is set to the center of the stage; we reposition our Player to the origin; a new array is added to the waypoints array in the Ghost class; and the first position is pushed to that array.

So, at the moment, Ghost.times[0][0] contains the number of milliseconds since the SWF was set up (practically zero), and Ghost.waypoints[0][0] contains a Point set to the center of the stage.

Our aim is to code this so that if, after one second, the player presses a key, then Ghost.times[0][1] will be set to 1000, and Ghost.waypoints[0][1] will be another Point, again set to the center (because the player will not have moved yet). When the player lets go of that key (or presses another), Ghost.times[0][2] will be set to the current time, and Ghost.waypoints[0][2] will be a Point that matches the player’s position at that time.

Now, here are the three event listeners:
```
addEventListener(Event.ENTER_FRAME, enterFrame);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
```
Step 3: Key Events

For now let’s ignore the enterFrame and focus on the key presses.
```
public function keyDown(e:KeyboardEvent){
	if (e.keyCode == Keyboard.LEFT && keyPressLeft == false){
		updateWaypoints();
		keyPressLeft = true;
	}else if (e.keyCode == Keyboard.RIGHT  && keyPressRight == false){
		updateWaypoints();
		keyPressRight = true;
	}

	if (e.keyCode == Keyboard.UP  && keyPressUp == false){
		updateWaypoints();
		keyPressUp = true;
	}else if (e.keyCode == Keyboard.DOWN  && keyPressDown == false){
		updateWaypoints();
		keyPressDown = true;
	}

	if (e.keyCode == Keyboard.SPACE){
		destroy();
	}
}
```
Just a few simple if-statements to prevent bugs in key presses, and two new functions that are being called. updateWaypoints() will be called every time new points and times are to be pushed to the ghost arrays, and destroy() is used to remove the Player and add the Ghost to the stage. But before we go to those functions let’s finish off the key press functions.
```
public function keyUp(e:KeyboardEvent){
	if (e.keyCode == Keyboard.LEFT  && keyPressLeft == true){
		updateWaypoints();
		keyPressLeft = false;
	}else if (e.keyCode == Keyboard.RIGHT  && keyPressRight == true){
		updateWaypoints();
		keyPressRight = false;
	}

	if (e.keyCode == Keyboard.UP  && keyPressUp == true){
		updateWaypoints();
		keyPressUp = false;
	}else if (e.keyCode == Keyboard.DOWN  && keyPressDown == true){
		updateWaypoints();
		keyPressDown = false;
	}
}
```
This time we do the opposite: the variables are set to false when the key is released and the waypoints are updated.

I will elaborate in more detail on what is happening between those functions. Each time you press a key the waypoints and times are updated, so if you press another to cause a change a point and its corresponding time are added to the ghost arrays.

But what happens if the player decides to randomly release a key and cause change again? Well we account for that by updating the waypoints and times again. If this was not done the Ghost would not be able to account for 90 degree turns; instead it would move on an angle towards the next point.

Step 4: Updating and Destroying

Our updateWaypoints() function is fairly simple, seeing as it consists of code that we have already written:
```
public function updateWaypoints(){
	Ghost.times[currentLife].push(flash.utils.getTimer() - startTime);
	Ghost.waypoints[currentLife].push(new Point(this.x, this.y));
}
```
The destroy() function is just as simple! Waypoints are updated, a Ghost is added, event listeners are stopped and our Player is removed:
```
public function destroy(){
	updateWaypoints();
	var ghost:Ghost = new Ghost();
	parent.addChild(ghost);
	removeEventListener(Event.ENTER_FRAME, enterFrame);
	stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyDown);
	stage.removeEventListener(KeyboardEvent.KEY_UP, keyUp);
	parent.removeChild(this);
}
```
Step 5: The Player’s enterFrame

Begin by creating the function:
```
public function enterFrame(e:Event){

}
```
For the purposes of this tutorial we will add some simple collision with borders, to show how the waypoints are updated on this change:
```
if((this.x-(this.width/2)) > 0){

}
if((this.x+(this.width/2)) < stage.stageWidth){

}
if((this.y-(this.height/2)) > 0){

}
if((this.y+(this.height/2)) < stage.stageHeight){

}
```
Now are player should only move in the specified direction while it isn’t touching a border. Inside the first if-statement add the following code for moving left:
```
if(keyPressLeft == true){
	if((this.x-(this.width/2)) <= 0){
		updateWaypoints();
		this.x = this.width/2;
	}else{
		this.x -= speed;
	}
}
```
First we check if the left key is currently down, then we check to see if the Player’s position is greater than or equal to 0; if so we update our waypoints and reposition the player to the edge of the left side; if not we continue to move the player left.

The exact same thing is done for the other three sides:
```
if(keyPressRight == true){
	if((this.x+(this.width/2)) >= stage.stageWidth){
		updateWaypoints();
		this.x = (stage.stageWidth - (this.width/2));
	}else{
		this.x += speed;
	}
}
```
```
if(keyPressUp == true){
	if((this.y-(this.height/2)) <= 0){
		updateWaypoints();
		this.y = this.height/2;
	}else{
		this.y -= speed;
	}
}
```
```
if(keyPressDown == true){
	if((this.y+(this.height/2)) >= stage.stageHeight){
		updateWaypoints();
		this.y = (stage.stageHeight - (this.height/2));
	}else{
		this.y += speed;
	}
}
```
And with that we are finished with the Player Class!

Step 6: Initializing the Ghost

Add the following line inside the Ghost’s constructor:
```
addEventListener(Event.ADDED_TO_STAGE, init);
```
Like before create the init() function:
```
public function init(e:Event){
	selectedLife = times.length - 1;
	this.x = waypoints[selectedLife][0].x;
	this.y = waypoints[selectedLife][0].y;
	startTime = flash.utils.getTimer();
	addEventListener(Event.ENTER_FRAME, enterFrame);
}
```
We start by selecting the path we want to use (by default it will choose the last array); we then position the ghost to the origin and set our Ghost’s start time. Then an event listener for the enterFrame is created.

Step 7: The Ghost’s enterFrame

Naturally we create our enterFrame function:
```
public function enterFrame(e:Event){

}
```
Now we have to loop through our time array. We do this through the variable i; we check if it is less than the length of the array and we also check if the time elapsed is greater than or equal to the current time in the array:
```
while (i < times[selectedLife].length - 1 && flash.utils.getTimer() - startTime >= times[selectedLife][i]) {
	i++;
}
```
The next thing to do is to move the Ghost if the time elapsed is less than the current time from the array:
```
if (flash.utils.getTimer() - startTime < times[selectedLife][i]) {
	updatePosition();
}
```
Step 8: Updating the Ghost’s Position

We’ll start this step off by creating the updatePosition() function:
```
public function updatePosition(){

}
```
Next add two variables, to represent the difference and the distance between the old and the new position:
```
var diff:Point = waypoints[selectedLife][i].subtract(new Point(this.x, this.y));
var dist = diff.length;
```
We subtract the points from each other to find the distance. Now, we must move the ghost:
```
if (dist <= speed){
	this.x = waypoints[selectedLife][i].x;
	this.y = waypoints[selectedLife][i].y;
}else{
	diff.normalize(1);
	this.x += diff.x * speed;
	this.y += diff.y * speed;
}
```
First we check whether the distance is less than the speed (i.e. the distance the ghost moves each tick); if so we move the Ghost directly to the point. However, if the distance is less then we normalize the difference (“means making its magnitude be equal to 1, while still preserving the direction and sense of the vector” – Euclidean Vectors in Flash), and we increase the Ghost’s position along the direction of the point.

Step 9: A Side Note

Something to note about this method is that it uses a lot of CPU resources to continuously load times and points, and at times can produce some lag even though the logic is correct. We found two ways of countering this, though!

The first is setting your SWF to be uncompressed in the Publish Settings; this will result in a longer load time at start up however the performance will be smoother. The second is more preferable if you plan on compiling your project as an exe for offline use: simply increase the frame rate to something around 60.

Conclusion:

Thank you for taking the time to read this tutorial! If you have any questions or comment please leave them below. And if you want an extra challenge try setting up the Ghost class to follow the paths in reverse, or in slow motion.
Porter says:

May 15, 2012 at 2:55 am

Today, Matt Porter takes a look at a recently released mining game, currently doing very well on Newgrounds: Utopian Mining, developed by Schulles.

Play the Game

Click to play on Newgrounds

Overview

Utopian Mining is one of the most polished RPG digging games I’ve played on the web in some time. It does so much right that it stings horribly when you do come across its few faults. My expectations were set high after seeing the excellent scores on Newgrounds and playing for a few moments, but I quickly learned that the game wasn’t all my hopes had wanted it to be.

My high expectations aside, there’s a lot to be learned from this wonderful little (emphasis on little) game.

Gameplay

The object is simple. You’re a tiny mining robot hanging out in a town that was recently destroyed by a horrible storm, and you need to collect materials while digging to get the town up and running again. There’s been a decent number of games in this genre over the years, and they’ve always done quite well in the eyes of players; quite well for sponsors too seeing as they continue to get sponsored by large sites such as Newgrounds and Kongregate. There’s definitely some concrete evidence as to why they do so well, which I’ll go over shortly.

Utopian Mining doesn’t really mix things up too much from your standard RPG digger, but it does add a few (extremely linear) quests, as well as a bit of story. Quests generally consist of giving someone money or a certain material, all of which is laid out in the exact order you would achieve if said quests didn’t exist, making the quests more of an illusion than anything.

The game appears to be a lot more content filled at first, especially when new buildings rise as you complete quests, and you learn of a beach far to the east, but it quickly becomes apparent that these changes hardly affect gameplay and are mostly visual fluff. Buildings give a small discount in restoring power to your robot, and the beach is used to get sand for a quest just once (yes, once). This visual fluff is of course a welcome addition, especially in the eyes of sponsors, but I fear that these quests will quickly feel shallow to the average player, leaving them with a desire for just a bit more depth. I would have loved to see quests be less linear, and to have them alter how the game is actually played. Unlocking new upgrades in the shop would have been great incentive to complete a difficult, and not immediately rewarding quest. In addition to these faults, the player also isn’t alerted when a quest is complete, which seems like a no-brainer for an otherwise very polished game.

The beach

The largest flaw of the game is that it’s so simple it becomes ridiculously easy to complete. It’s so unbalanced, that if it wasn’t short, slightly addicting, and quite charming, it would likely fail to be a decent game. Many players, such as myself, often skip cheap upgrades, and save up for the next reasonable purchase. This may take an extra five or ten minutes to do early on in the game, but it generally pays off. The same is true for buying equipment in games such as Final Fantasy, or really any game that offers an upgrade system of some sort.

The problem with Utopian Mining, is that it doesn’t only pay off – it actually destroys whatever challenge may have ever existed. I beat the entire game within an hour, and wasn’t remotely challenged beyond the first five minutes; in fact, my robot never even died. Generally speaking, the challenge of a game should increase as you go on, but Utopian Mining simply gets easy, whether you skip upgrades or not. Schulles (the developer) simply didn’t pay enough attention to the balance of the game, and it unfortunately reared it’s ugly head for me, and from the looks of other reviews, many other players.

Close to death, but never in any real danger.

While casual gaming is fun, it’s important to challenge players, or at least make them feel like they completed something difficult, even if “difficult” simply translates to time consumption (a common tactic of MMORPGs). While I don’t want to write out a game design document in this review, a simple addition to make the game more challenging would have been more hazards, such as lava pits. As it is, going deeper and running out of energy are the only things that can kill you, and that obviously doesn’t really work.

One of the more minor flaws, in my opinion, is the rather clunky user interface. For an example, let’s look at the shop screen:

To navigate the shop, you must press 1-4 to switch between categories (chassis, drill, batter, cooling liquid), use the arrow keys to go up and down, X to select, and C to exit. I love retro games, and I’m all about ditching the mouse when it really isn’t needed, but this wasn’t one of those times. There’s no reason to neglect the mouse for a simple shopping interface, especially when it would be faster and less frustrating to use for the player, and could work alongside keyboard controls as well. There’s no reason to annoy your players because you feel like being truly retro; give players an option, and both casual and hardcore players will be happy.

While Utopian Mining has its flaws, as almost all games do, it does a lot right. It takes everything you’d expect from an RPG digging game, strips it down, and polishes what little it has to an extreme. It’s basic, but it’s addicting, and for any game developer, that’s a good thing. Getting players to return to your game is not only great for increasing views, but it also helps developers gain more recognition, and both sponsors and developers will earn a decent bit more revenue, assuming the developer put ads such as Mochi or CPMstar in their game.

The unfortunate side to this, for Utopian Mining, is that the game isn’t quite long enough to ensure a returning play from most players, as it’s generally beaten in the first sitting. As far as the core mechanics go, they’re addicting. The game lacks any sort of real depth (aside from the digging bit [that was a terrible pun - Ed.]), but that aside, players seem to get addicted, and want more. The core mechanics of the game are undeniably an extremely strong point, and seeing them presented in such a polished manner has appeared to be an easy win for game developers.

Graphics

I’ve said it before, and I’ll say it again: I absolutely love retro and retro-inspired games. Utopian Mining offers some very nice looking retro graphics, which instantly earn my approval. The world is charming on the surface, and while a bit bland below, it’s done well enough to please the eyes. The animations are extremely simple, but they get the job done, and there’s no need for more.

As far as details go, the game doesn’t skimp out, and there’s actually a decent attention to detail. The ground gets darker as you go deeper, digging has a cool particle effect of dirt flying out, and warnings appear in a simple, but cool fashion across the screen. Overall, the graphics are top-notch for a retro-inspired style, and I wouldn’t change them a bit.

Audio

The audio is also extremely well done in Utopian Mining, and has very little room for improvement. The music on the surface is excellent and charming, which sets an immediately positive mood for players. Upon digging and going below the surface, the music instantly changes with a nice fading touch, which is a great addition.

Sound effects are nicely done, even if a bit simple. I would have appreciated some variation when collecting different materials, but that’s a minor piece of polish the develop chose not to include. All in all, the sounds are quite fitting, retro, and very well done.

Conclusion

Utopian Mining is undeniably a great game, it’s just a great game that has been done before. What I appreciate most about it, is that it takes the core mechanics, leaves behind the extras, and makes the game shine nonetheless. It’s an excellent game for developers to study, as there’s very little to it, yet it’s quite successful. I know my interest has been piqued by it, and I plan to explore development in the genre myself. All in all, Utopian Mining is a charming and simple game that can pass some time for the casual gamer, teach some important lessons to game developers looking for them, or both.

Your Turn

What do you think of Utopian Mining?
James Tyner says:

May 15, 2012 at 3:28 am

In this short tutorial I will introduce you to ASAudio, and AS3 library that greatly reduces the amount of code needed to create and manipulate sound object in your ActionScript projects.

Step 1: Examining ASAudio

ASAudio is an ActionScript 3 library that greatly reduces the amount of code needed to create and manipulate (volume changes, pan) audio files’ within your ActionScript Projects. Traditionally you would need to do the following to load in, play, and change the volume of a Sound within ActionScript:
```
var urlRequest:URLRequest = new URLRequest("path/to/track.mp3");
var sound:Sound = new Sound(urlRequest);
var soundChannel:SoundChannel = sound.play();
var soundTrans:SoundTransform = soundChannel.soundTransform;
soundTrans.volume = .5;
soundChannel.soundTransform = soundTrans;
```
With ASAudio all you need to do is the following
```
var track:Track = new Track("path/to/track.mp3");
track.start();
track.volume = .5;
```
Step 2: Getting the Library

Head over to the project’s Google Code page and download the latest version of ASAudio.

Once you have downloaded it, extract it and copy the the “com” folder that is inside the “src” folder to the folder where you will be creating your ActionScript project.

Step 3: New ActionScript Project

Start a new ActionScript project, and save it in your project folder as “asAudio.fla”. Under the “PROPERTIES” panel, set the stage color to white and give it a width and height of 500x150px.

Now create a new ActionScript File and save this as “Main.as”. Set this as your Document Class.

Step 5: Imports and Constructor Function

Add the following to the “Main.as” you created in the step above.
```
package  {
	import flash.display.Sprite;
	import com.neriksworkshop.lib.ASaudio.*;
	import flash.media.Sound;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class Main extends Sprite {

		public function Main() {
			trace("Working");
		}

    }

}
```
Here we import the classes we will need throughout this tutorial, and setup our Main() constructor.

Step 6: Track

The Track is the fundamental class of ASAudio. Everything you do with the library depends on the Track. In this step we will create a new Track, and play it. Enter the following code above the Main() within “Main.as”.
```
var track:Track = new Track("BoozeandBlues.mp3");
```
And the following within the Main() constructor.
```
public function Main() {
	track.start();
}
```
To create a Track you pass in a path to the mp3. We then call the start() method of the Track within Main().

If you test now you should hear the mp3 play.

Step 7: Setting up the Interface

In this step we will setup the interface for the project so we can control our Track‘s.

From the Component Window drag 4 buttons and a slider onto the Stage. You can get to the Components Window by choosing Window > Components or by pressing CTRL+F7.

Give the buttons the following properties, one by one.
- X: 21.00 , Y:61.00, Label:”Play TracK”, Instance Name:”playTrackBtn”
- X: 175.00, Y:61.00, Label:”Play Group”, Instance Name”playGroupBtn”
- X: 333.00, Y:61.00, Label:”Play Playlist”, Instance Name”playListBtn”
- X: 21.00, Y:100.00, Label:”Stop Track”, Instance Name”stopTrackBtn”
Here is a screenshot of the first Button’s setup.

Give the slider the following properties.
- X: 21.00, Y:29.00, Instance Name:”trackSlider”
- maximum: 1
- miniumum: 0.1
- snapInterval: 0.1
- tickInterval: 0.1
- value: 1
- liveDragging: “Make sure it is checked”
Here we set some initial values for the slider. I won’t go over them as you can refer to my Quick Tip that covers the sliders functionality.

Step 8: Controlling the Track

In this step we will code the start, stop, and volume functionality for the track we created in the previous step. Add the following to “Main.as”.
```
public function Main() {
	addListeners();
}

private function addListeners():void{
   trackSlider.enabled = false;
   playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack);
   stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack);
   trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume);

}
```
Here we call the addListeners() function within our Main() constructor. Inside addListeners we set the disable the trackSlider and add Listeners to 3 of our buttons.

Step 9: playTrack()

The playTrack() function will tell the track to start playing. Add the following beneath the addListeners() function you created in the step above.
```
private function playTrack(e:MouseEvent):void{
   trackSlider.enabled = true;
   track.start();
   track.volume = 1.0;
}
```
Here we enable the trackSlider play the Track using the start() method and set the volume of the track using the volume property.

Step 10: stopTrack()

The stopTrack() function will be used to stop the Track. Add the following beneath the playTrack() function you added in the step above.
```
private function stopTrack(e:MouseEvent):void{
	track.stop();
}
```
Here we simply call the stop() method on the Track.

Step 11: adjustTrackVolume()

The adjustTrackVolume() function will be used to adjust the volume of the Track. Add the following beneath the stopTrack() function you created in the step above.
```
private function adjustTrackVolume(e:Event):void{
   track.volume = e.target.value;
}
```
Here we set the volume of the track equal the the sliders value property. Because we set the maximum to 1 and the minimum to 0.1 it will always be a number between 0.1 and 1.0 incremented by 10ths. i.e 0.1, 0.4, and so on.

If you test the movie now you should be able to play, stop, and adjust the volume of the Track.

Step 12: Groups

You may have been wondering what the “Play Group” button was for? Well, along with offering basic the basic Track ASAudio has a notion of “Groups” which allows you to stack sounds together and play them together all at once. Add the following within the addListeners() function you created in the step above.
```
 private function addListeners():void{
   trackSlider.enabled = false;
   playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack);
   stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack);
   trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume);
   playGroupBtn.addEventListener(MouseEvent.CLICK,playGroup);
}
 
```
Here we add a Listener to our playGroupBtn that will call the playGroup() function. We will code this next.

Step 13: playGroup()

Add the following beneath the adjustTrackVolume() function you creafted in the step above.
```
 private function playGroup(e:Event):void{
   var group:Group = new Group( [new Track("piano.mp3"), new Track("drumbeat.mp3")] );
   group.start();
}
```
Here we create a new Group by passing in an Array of tracks. We then call the start() method which tells the Group to start playing.

If you test now you should hear the “piano.mp3″ and “drumbeat.mp3″ playing simutaneously.

Step 14: Playlist

Along with offering the Group, ASAudio has a notion of a PlayList. The PlayList is like a playlist on an MP3 player. You “queue” up songs and when one finishes it continues to the next. Add the following within the addListeners function.
```
private function playPlayList(e:Event):void{
   var playList:Playlist = new Playlist( [new Track("piano.mp3"), new Track("drumbeat.mp3")] );
   playList.loop = false;
   playList.start();
}
```
Like the Group we create a new PlayList by passing in an Array of Tracks. We set the PlayList to not loop and call the start() method.

You can now test and see the PlayList in action.

Conclusion

You have learned about ASAudio and seen how it can greatly reduce the amount of code needed to create Audio within your ActionScript Projects. This library has more to offer including fade, pause, and mute methods… I suggest you take a look through the documentation to see what all is available. I hope you found this useful and thanks for reading!
David Appleyard says:

May 15, 2012 at 3:37 am

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!

We’ve Been in Kuala Lumpur!

This month we’ve been attending an Envato company meet-up in Malaysia. We’ve had a fun time working together as a team, made lots of exciting plans for the future of Tuts+, and also had the chance to meet up with lots of our readers! Thanks to everyone who took the time to attend our community meet-up and, if you’re interested, you can find out a bit more about our trip here (and see a few photos!)

Above: A happy bunch. Clockwise from left: Michael James Williams (Activetuts+ editor), Japh Thomson (Wptuts+ Editor), Ian Yates (Webdesigntuts+ editor), and David Appleyard (Tuts+ Manager).

Psdtuts+ — Photoshop Tutorials
- Use Photoshop CS6 to Create a Micro Machines Inspired Scene
  
  Photoshop CS6 is packed with new features and effects that you can use in your work. In this tutorial we will utilize Photoshop’s new 3D capabilities as well as its new content aware features to create a Micro Machines inspired composition. Let’s get started!
  
  Visit Article
- Create a Snowy Landscape From Desert Photography in Photoshop – Tuts+ Premium Tutorial
  
  Photoshop is a great tool because it allows us to be creative and produce imagery that would be impossible to create otherwise. In this Tuts+ Premium tutorial, author Tony Aubé will create a snowy landscape from desert photography and photos of sand. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!
  
  Visit Article
- Create a Light Bulb Inspired Text Effect in Photoshop
  
  Layer styles are a powerful and time saving feature that can help you apply amazing effects to your designs. In this tutorial we will use layer styles to create a light bulb inspired text effect in Photoshop. Let’s get started!
  
  Visit Article
- Meet Grunt: The Build Tool for JavaScript
  
  If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in.
  
  Visit Article
- CSS Refreshers: Borders
  
  Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about!
  
  Visit Article
- Lightning Fast Folder and File Creation in Sublime Text 2
  
  I’m frequently asked about how I’m able to create new directory structures and files so quickly in Sublime Text 2. Well the answer is that this functionality is not offered natively; instead, I use a helpful plugin. I’ll demonstrate it in this video.
  
  Visit Article
- Quick Tip: The Line of Action, Make Your Character Poses More Dynamic!
  
  The line of action is a key ingredient to making your character’s poses look more dynamic. In this guide, we will explore what the line of action is and how it can be used to make your character poses come alive.
  
  Visit Article
- Free Vector Grunge Graphics for Designers and Illustrators
  
  If you’re looking for free vector grunge graphics, such as distressed backgrounds, worn textures, dirty paint splatter, and more, then you’ve found a compilation worth downloading. We’ve collected an assortment of vector grunge illustrations, free vector grunge textures, and wickedly worn graphics available for free download. Jump in and grab these free grunge vectors now and start making grunge vector art for your next project.
  
  Visit Article
- Vintage Vector Design Workflow: Creating a Retro Flyer Design
  
  This tutorial will cover the process of creating a vintage inspired retro flyer design. There are four main areas of concentration to achieve this look and feel: color, type, character and texture. We’ll review a complete vintage vector design workflow to create this retro flyer design. Let’s get started.
  
  Visit Article
- Quick Tip: Speed Up Your Workflow With Photoshop Actions
  
  Avoiding repetitive tasks is always going to speed up your workflow. In today’s Quick Tip we’ll do just that, by utilizing Photoshop’s actions panel and combining it with hotkeys. Watch this quick screencast and I guarantee you’ll save tons of time next time you’re designing!
  
  Visit Article
- Building a Responsive Layout With Skeleton: Finishing Off
  
  During previous screencasts in this series we’ve covered a lot of ground, building our responsive (or adaptive) layout with the Skeleton boilerplate. It’s now time to finish all the final details; arguably the most time-consuming part of any website build!
  
  Visit Article
- Adobe Photoshop CS6: Improvements for Web and UI Designers
  
  Photoshop CS6 has been hailed as a huge improvement for web and UI designers. Im going to share with you some of the features that Photoshop CS6 Beta has to offer and demonstrate how they can help you in your web or UI design workflow.
  
  Visit Article
- A How-To Guide to Getting Started in Real Estate Photography
  
  Real estate is one of the world’s most competitive industries. Dominated by ambitious agents looking for the next big sale, selling real estate is all about setting yourself apart from the competition. What better way to catch a buyer’s eye than the perfect photo of the perfect home? In today’s article, we’re taking a look at the exciting world of real estate photography.
  
  Visit Article
- A Simple Solution to White Balance and Exposure: The 18% Gray Card
  
  An 18% gray card is a handy accessory that every serious photographer should keep in their bag. It doesn’t cost much and it barely takes up any space. If you encounter a situation where you have mixed lights, this unassuming piece of plastic helps you determine the white balance. It can also be used to determine the correct exposure.
  
  Visit Article
- An Expert Guide to Matting and Framing a Photo
  
  The final printed image is the culmination of my journey in creating a piece of artwork that represents my view of the world around me. As photographers in the digital age we spend far too much time staring at our photographs on our computer screens and very little time holding them in our hands. I still take great pride in every print I produce. There are a myriad of options for printing your work today, from canvas wraps to Metal prints, however for me there is something timeless and classic about a finely Matted and Framed print.
  
  Visit Article
- Rigging A Voodoo Doll Character In Maya Using Setup Machine & Face Machine
  
  In this tutorial you’ll learn how to create a complete character rig for a voodoo doll character in Maya using the Setup Machine and Face Machine plugins from Anzovin studios. You’ll learn how these plugins can save you valuable time during rigging by allowing you to utilize pre-built body and face rigs which can then be customized to fit you and your character’s specific needs.
  
  Visit Article
- Creating A Stylish 3D Countdown Animation In Cinema 4D
  
  In this tutorial we’re going to create a smooth, stylish countdown animation. You can use words, letters, logos or whatever you want to make this type of animation. As you can see it’s easy to set up and looks very stylish and attractive.
  
  Visit Article
- Create a 3D Micro Robotic Insect in ZBrush
  
  This week, Cgtuts+ has teamed up with our sister site Psdtuts+ to bring you this amazing two part, in-depth tutorial from Nacho Riesco. In this tutorial we are going to sculpt a Micro Bionic Insect with chemical war purposes using simple hard-surface modelling techniques with the Clipping Brush, Masking and much more. Head over to Psdtuts+ for the conclusion of this project where we’ll composite our render passes from Zbrush, and create the final image in Photoshop!
  
  Visit Article
- Make Your Own Durable Light Dimmers For Less Than $30
  
  In today’s tutorial we’re going to take you step by step through everything you need to know to build your own rugged light dimmers. We use these exact dimmers on all our studio and on location shoots. Besides being extremely durable, these little devices provide a wider range of lighting options and are surprisingly valuable when you have to light a scene in a tight location.
  
  Visit Article
- Is Working On Stills Easier in After Effects or Photoshop?
  
  We always tend to go to Photoshop for working with still images, but today I’d like to bring up a few thoughts about why working in After Effects might be a better solution for your next project.
  
  Visit Article
- Show A Motion Path With The StroMotion Effect
  
  In this tutorial we will track freeze frames into a hand-held scene utilizing The Foundry’s CameraTracker to achieve an effect that is often referred to as “StroMotion”. We’ll be talking about different methods of how to remove the subject from the background and how to line everything up. Enjoy!
  
  Visit Article
- Sites That Serve Up Great Loops and Samples
  
  Loops can form the foundation of a track, and are useful for quickly putting some ideas together when sketching out an arrangement. Samples provide us with sounds and colors to create our music with. But where can you download great loops and samples? Here are 30+ great places to start.
  
  Every music producer worth his salt is in the process of building up a useful collection of useable sounds.
  
  Visit Article
- Morphing in Pro Tools
  
  We’ve all seen how you can morph one face into another in the graphical world. In this screencast Rishabh Rajan shows us how to achieve the same thing with audio using Pro Tools.
  
  Visit Article
- D Mixing Part 7: Mastering, The Final Chapter (Part 1)
  
  Although this is a series on mixing, it feels incomplete not to get into at least a brief discussion on master bus options and to discuss what exactly goes on when you print all your hard work to a single and final stereo file. Due to the depth of this topic, I am splitting it into two parts.
  
  Visit Article
- What Is Dart, and Why Should You Care?
  
  In this tutorial, I’ll introduce you to Google’s new web programming language, Dart, and explain why you should like it and what you need to know about it. Learn about this new language and form some opinions about it – will it really replace JavaScript?
  
  Visit Article
- Accessing the Same Saved Data With Separate Flash and JavaScript Apps
  
  In this tutorial I will show you how to access the same saved data in separate Flash and JavaScript apps, by storing it in HTML5 LocalStorage and using ExternalInterface to reach it with AS3. We will create the same app in both JavaScript and Flash to demonstrate that it is platform agnostic.
  
  Visit Article
- An ImpactJS Overview: Introduction
  
  Impact is an incredibly powerful HTML5 game framework which takes advantage of modern browser’s canvas element and can also run on mobile or be compile into a native iOS app. In this video I will go over the framework, how to set up a project, some background into how to create classes in it and finally go over the core classes that make up the framework. This is a high level overview which will give you a general sense for how things work.
  
  Visit Article
- Mini Guide to Contact Form 7
  
  Usually a website needs a contact form to communicate with the site owner. One of our favorites is Contact Form 7. Let’s see what it can do!
  
  Visit Article
- Custom Post Type Helper Class
  
  For a lot of WordPress projects these days we use custom post types. The WordPress development team created some handy methods to integrate them into your projects. But when you use custom post types, taxonomies and meta boxes frequently, it’s quite probable that you’re going to repeat yourself. That’s why we are going to use the power of these WordPress functions to build a more powerful class, which we can use to quickly register post types, taxonomies and meta boxes.
  
  Visit Article
- Using WordPress as an Intranet
  
  When we talk about WordPress we usually associate it with either being a blogging platform or just another content management system, but what about as an Intranet? This tutorial will show you how you can turn your basic installation of WordPress into a robust Intranet for your business.
  
  Visit Article
- Create an Awesome Carousel, Version 2.0
  
  Engage your users with stunning carousels! We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, and buttons.
  
  Visit Article
- Corona SDK: Create an Alphabet Soup Game
  
  In this tutorial series, you will learn how to create a minimalistic Alphabet Soup game. The goal of this game is to allow the player to pick words out from a jumbled set of letters. Read on!
  
  Visit Article
- iOS Quick Tip: Interacting with Web Services
  
  At some point in your iOS development career, you will have the need to interact with a web service from within your app. You may need to access remote data, parse a social network feed, or even download some assets into your application. This quick tip will teach you to do so without using third party libraries!
  
  Visit Article
Christer Kaitila says:

May 15, 2012 at 3:52 am

This entry is part 6 of 5 in the series Build a Stage3D Shoot-’Em-Up

It’s time to wrap up our six-part tutorial series (part free, part Premium), in which we’ve created a high-performance 2D shoot-em-up using Flash’s new hardware-accelerated Stage3D rendering engine. In this final Premium part, we’ll add blazingly fast sprite rendering, sound and music, multiple detailed levels, numerous enemies to destroy, score, health, lives, particle systems, level transitions, full screen rendering, an NPC character, slow-mo, a preloader progress bar, and a boss battle.

Premium Preview

Let’s take a look at the result we will be working towards:

In this, the last part, we are going to put the final layer of polish on our game:
- We’ll add boss battles, complete with a glowing health bar and bullets everywhere.
- We implement full screen HD rendering at any screen resolution by using liquid layout.
- Because our game is just over a meg in size, we’ll implement a preloader progress bar.
- Just for fun, we’ll add NPC (non-player character) voiceovers to motivate players.
- For dramatic effect, we’ll implement slow motion time dilation.
- We’ll tweak the movement speed of the player, enemies and bullets.
- We will add autofire to the game so players can concentrate solely upon movement.
Read the Full Tutorial

Premium members can access the full tutorial right away!

If you’re not yet a Premium member, you can still read the first few steps for free. Plus, the first three parts of this series are free, in case you haven’t read them yet.

Tuts+ Premium Membership

We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

About Our Site:

Hey there and welcome to "Flash Video Training Source", a resource for anybody interested in learning more about Adobe's great tool. We feature educational videos, which will help you master Adobe Flash and help you get to know all of its features. We at "Flash Video Training Source" believe that video training and video... more

Why don't you follow us on Twitter and get the latest video tutorials twitted to your account. Just click on the floating twitter bar to your right!

June 2013
M	T	W	T	F	S	S
« Jul
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Play the Game

Overview

Gameplay

Graphics

Audio

Conclusion

Your Turn

10 Responses to “Workshop: Nuclear Outrun – Critique”

Play the Game

Overview

Gameplay

Graphics

Audio

Conclusion

Your Turn

What’s a Variable?

What’s an Array?

You Can’t Write That on a Post-it

So What Does null Mean?

Garbage Collection

Arrays of Objects

Loops

Other Bits and Pieces

Objects

More on Garbage Collection

Any Questions?

Have Your Say

Win a 6-Month Tuts+ Premium Membership

Premium Preview

Read the Full Tutorial

Tuts+ Premium Membership

The Basics

Animation Misconceptions

Animation and the Properties Panel

First Frame Input Field

But It Still Isn’t Animating

It’s All About the Timeline

Give It Some Frames

Automatic Playback

Case Study: Facial Expressions

When Would You Use a Graphic Over a Movie Clip?

Practical Uses

Limitations

Conclusion

Final Result Preview

The Logic Behind Path Following

Step 1: Setting Up

Step 2: Initializing the Player

Step 3: Key Events

Step 4: Updating and Destroying

Step 5: The Player’s enterFrame

Step 6: Initializing the Ghost

Step 7: The Ghost’s enterFrame

Step 8: Updating the Ghost’s Position

Step 9: A Side Note

Conclusion:

Play the Game

Overview

Gameplay

Graphics

Audio

Conclusion

Your Turn

Step 1: Examining ASAudio

Step 2: Getting the Library

Step 3: New ActionScript Project

Step 5: Imports and Constructor Function

Step 6: Track

Step 7: Setting up the Interface

Step 8: Controlling the Track

Step 9: playTrack()

Step 10: stopTrack()

Step 11: adjustTrackVolume()

Step 12: Groups

Step 13: playGroup()

Step 14: Playlist

Conclusion

We’ve Been in Kuala Lumpur!

Psdtuts+ — Photoshop Tutorials

Nettuts+ — Web Development Tutorials

So What Does `null` Mean?

Step 9: `playTrack()`

Step 10: `stopTrack()`

Step 11: `adjustTrackVolume()`

Step 13: `playGroup()`