Monday, September 14, 2009

Introduction to Flex programming

So you want to learn how to make online games, just like the ones you can see on Kongregate, but don't know where to start and don't have money for Flash? You've come to the right place. This post will be a short introduction into making games in Flex - the result being Flash games. Don't worry, you'll understand what's the difference between two names that start with F is, the important bit is that they both are free and it is not really that difficult to start.

The first thing to consider is why I am talking about Flex instead of Flash here. You can read what people smarter than me have to say on that difference here, here and here. In simple terms, the outcome is the same whether you use Flash or Flex - a SWF file, containing compiled ActionScript, graphics and sounds. It's how you get there that is the main difference. At the risk of oversimplifying things, I will say that the main difference is that Flash approaches the end result from the point of view of a designer and Flex from the point of view of a programmer.

Just substitute Flex Builder with Flex IDE for now.

Flash is an authoring tool, more suited to making animations, movies and simple games. Flex is a development tool, consisting of set of components for creating rich internet applications (RIA), interfacing with databases and implementing client-server architecture. Does this sound too complicated? Second attempt at ubersimplicity: Flash equals drawing plus ActionScript, Flex equals industrial components and ActionScript. Professionals will smack me on the head with a stick for writing that, but for layman it should be comprehensible - and you can read the articles I linked to above if you want to know more.

Now, if you want to begin writing simple online games, these tutorials on Flash game development with Flex and ActionScript are the best out there (or at least the best I have been able to find). When you go through all of them, you will have some understanding of how Flash games work and you will also have a basic framework for your games with loader and all. That's a very good starting point indeed.

The only problem from the beginner's point of view is that the setup part described in the first tutorial is a bit complicated, because it uses a simple text editor instead of a proper IDE (Integrated Development Environment) and requires some command line magic to be done. Let me fix that by showing you alternative setup that is easier to use, more powerful and equally free - and you can continue with the rest of tutorials from there on.

First of all, download Flex SDK from here. SDK stand for Software Development Kit and contains all the components, libraries and whatnot that constitute Flex. Once downloaded, unpack it to some directory, in my case C:\FlexSDK (why complicate things?). That's all, no fancy setup magic is required.


Secondly, you will need a proper editor that's designed for Flex. Contrary to what Adobe tries to convince us, FlexBuilder is not the only Flex IDE out there. The free alternative to that bloated and overpriced piece of software is FlashDevelop, which you can download here. Download it, run installer and you are almost ready to start writing games. Before you start coding, however, you will have to go to Tools\Program Settings... (or just press F10) and tell FlexDevelop where your Flex SDK is. You do this by chosing AS3 Context in the left column and filling Flex SDK Location box on the right with the appropriate path (in my case C:\FlexSDK as stated above). That's all, you can now proceed to making your first project.


Select menu Project, then New Project. Choose Flex 3 Project, fill in Name and Location. In my case it was Tutorial1 and C:\Barts\Flex (again, why complicate things?). Check the box called Create directory for project, it does exactly what it says. Since each Flex project will consist of several files and directories, it's best to keep them all neatly separated into folders. Then all you need is click on OK and your first project is ready.


Now, double-click on the src folder on the right, then select and edit Main.MXML file. Copy and paste the code from Flex tutorial, save it. Then compile and run your first Flex program by selecting Project\Test Movie (or just click F5 instead). Voila! You should see your very first application up and running:


If not, then perhaps you do not have the Flash player and/or Flash plugin for your web browser installed. Download them here. If it doesn't help, check your code - perhaps there is something you have not copied correctly or some mistake in typing. If it doesn't help either, let me know via comments, maybe I will be able to suggest something.

From now on you can continue on your own with the tutorials. They will give you good basics of game programming in Flex and with it you will be able to start creating your own things. And if you ever make something that you publish (maybe on Kongregate, who knows), please put a link to this post somewhere or at least let me know via comments or email - knowing that I have helped someone is incredibly rewarding for me. Good luck!

blog comments powered by Disqus