Activetuts+

Enable the Latest AIR SDK in Flash Professional CS5.5+

Daniel Albu — Wed, 16 May 2012 21:00:50 +0000

New versions of the Adobe AIR SDK are often released between Flash Professional release cycles, using this tutorial, you’ll be able to always use the latest Adobe AIR version in your IDE. This will allow you to enable Stage3D development within Flash Professional for both AIR and SWF projects.

Flash Professional CS5.5 Guide

(Flash Pro CS6 users, please skip to the next section.)

Step 1: Download the Latest SDK

Download the AIR 3.2 SDK from the following link: http://www.adobe.com/products/air/sdk/
Extract the downloaded file into a separate folder on your desktop

Step 2: Backup Your Current SDK Folder

Go to the Adobe Flash CS5.5 installation folder (should be “C:\Program Files\Adobe\Adobe Flash CS5.5″ on 32 bit Windows, “C:\Program Files (x86)\Adobe\Adobe Flash CS5.5″ on 64 bit Windows, and “Applications/Adobe Flash CS5.5″ on OS X).
Rename the AIR2.6 folder to AIR2.6_OLD.
Create a new folder and name it AIR2.6.

Step 3: Create the New SDK Folder

Copy the contents of the AIR 3.2 SDK folder (that you’ve created on your desktop) to the AIR2.6 folder.
Browse to the AIR2.6/frameworks/libs/air/ folder in the Adobe Flash CS5.5 folder and copy the airglobal.swc file.
Paste the SWC file into Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6/, overwriting the existing airglobal.swc file.

Step 4: Final Configuration Settings

Go to Adobe Flash CS5.5/Common/Configuration/Players/ and open the following files using a text editor (you may need administrative privileges to edit these files in the application folder in Windows):

AdobeAIR2_6.xml
AiriPhone.xml
Android.xml

Change the version attribute of the player element from 11 to 15 in each file. Don’t forget to save them after you’re done editing.

Flash Professional CS6 Guide

After years of not providing users with a more user-friendly way of upgrading the Adobe AIR SDK in Flash, Adobe finally added one to Flash Professional CS6.

(Please note: since AIR 3.2 is already installed in Flash Professional CS6, we’ll be using the AIR 3.3 Beta SDK in this section.)

Step 1: Download the Latest Adobe AIR SDK

Download the latest SDK from the following link: http://www.adobe.com/products/air/sdk/
Please note: at the time of publishing the latest version was Adobe AIR 3.2 so we’re using the Adobe AIR 3.3 Beta SDK (http://labs.adobe.com/downloads/air3-3.html); after its official release this link won’t work.
Extract the downloaded file into a separate folder (e.g. C:\AdobeAIR)

Step 2: Link the New SDK Folder to the Flash IDE

Go to the help menu and choose the ‘Manage AIR SDK’ option

You’ll notice a list of your currently installed Adobe SDK folders, the default one in CS6 is Adobe AIR 3.2

Click the + button to add a new folder.

Choose the new Adobe AIR SDK folder you created (in our example it was C:\AdobeAIR).

You’ll notice that now we have the new SDK listed as well in our list.

Step 3: Publish

Now, in your Publish Settings you’ll notice you have new options in additional to the old ones

Conclusion

That’s it! From now on, content you target for AIR using your Flash Professional IDE will be exported using the latest Adobe AIR SDK. Thanks for reading!

Quick Tip: Versioning Your Files With Dropbox (via Webdesigntuts+)

Michael James Williams — Tue, 15 May 2012 16:00:19 +0000

Ian Yates of Webdesigntuts+ has posted a great Quick Tip explaining how you can use Dropbox or Google Drive as a simple, automated version control system. It’s worth checking out for web app and game developers too, so check it out below.

Introduction

Having a version history of your graphics documents may save you from that awful moment when you realize you’ve scrubbed over a crucial stage of the design process. Thanks to Dropbox, you may already be storing versions of your work without even having noticed…

Dropbox is like a time machine. It keeps snapshots of every change in your Dropbox folder over the last 30 days.

Version History in the Cloud

You can download the video here.

Remember, both Dropbox and Google Drive will keep snapshots of your files for just 30 days, unless you upgrade your account. You can read more of what Google has to say on the matter at support.google.com, or head on over to Dropbox Help to read up on their “Pack-Rat” pro feature (which gives you indefinite history storage).

Useful Resources

And don’t forget, you can view all the latest articles from across the Tuts+ network at the Tuts+ Hub!

Workshop: Nuclear Outrun – Critique

Porter — Mon, 14 May 2012 16:30:01 +0000

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.

Understanding Variables, Arrays, Loops, and Null: The Post-it Note Analogy

Michael James Williams — Fri, 11 May 2012 16:30:45 +0000

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]);

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!

Which Tuts+ Site Should We Launch Next?

David Appleyard — Thu, 10 May 2012 05:00:02 +0000

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!

Create a Balloon Popping Game in Flash – Tuts+ Premium

Carlos Yanez — Wed, 09 May 2012 13:00:11 +0000

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.

Flash’s Underrated “Graphic” Symbol

Anthony Lombardo — Tue, 08 May 2012 17:00:43 +0000

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.

Generating Ghosts That Follow in Your Footsteps

Tyler Seitz — Mon, 07 May 2012 12:00:36 +0000

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.

Workshop: Utopian Mining – Critique

Porter — Sat, 05 May 2012 15:00:05 +0000

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?

Using ASAudio for Easy Flash Sound Playback

James Tyner — Wed, 02 May 2012 09:00:36 +0000

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!

Activetuts+

Enable the Latest AIR SDK in Flash Professional CS5.5+

Flash Professional CS5.5 Guide

Step 1: Download the Latest SDK

Step 2: Backup Your Current SDK Folder

Step 3: Create the New SDK Folder

Step 4: Final Configuration Settings

Flash Professional CS6 Guide

Step 1: Download the Latest Adobe AIR SDK

Step 2: Link the New SDK Folder to the Flash IDE

Step 3: Publish

Conclusion

Quick Tip: Versioning Your Files With Dropbox (via Webdesigntuts+)

Introduction

Version History in the Cloud

Useful Resources

Workshop: Nuclear Outrun – Critique

Play the Game

Overview

Gameplay

Graphics

Audio

Conclusion

Your Turn

Understanding Variables, Arrays, Loops, and Null: The Post-it Note Analogy

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?

Which Tuts+ Site Should We Launch Next?

Have Your Say

Win a 6-Month Tuts+ Premium Membership

Create a Balloon Popping Game in Flash – Tuts+ Premium

Premium Preview

Read the Full Tutorial

Tuts+ Premium Membership

Flash’s Underrated “Graphic” Symbol

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

Generating Ghosts That Follow in Your Footsteps

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:

Workshop: Utopian Mining – Critique

Play the Game

Overview

Gameplay

Graphics

Audio

Conclusion

Your Turn

Using ASAudio for Easy Flash Sound Playback

Step 1: Examining ASAudio

So What Does `null` Mean?

Step 9: `playTrack()`

Step 10: `stopTrack()`

Step 11: `adjustTrackVolume()`

Step 13: `playGroup()`