悲剧，绝对的悲剧，悲剧中的悲剧。
分类： Html/Css
2015-04-28 15:32:54
Difficulty: Beginner
Program: All software required is free and linked to within the tutorial
Estimated Completion Time: 30 minutes
Here is how to make Flash videogames using command-line compilation, without needing to spend $250-$700 on Adobe's Flash software. No prior experience with Flash or programming is required. Though, if do you have programming experience and are eager to transition to programming cross-platform web applications that don't require users to download and install anything (I <3 Flash), then you're also in the right place.
Although this tutorial series is heading toward videogame programming (my profession and hobby), this first tutorial is purely about installing and using the mxmlc ActionScript 3 compiler, which should be equally useful as first steps toward developing non-videogame web applications or sites.
Let/s take a look at the final result we will be working towards:
|
|
It's nothing flashy (pun intended), but it's a solid foundation to build upon. Just like with a house: if the foundation is beautiful and elaborate, you're doing it wrong and wasting energy. The foundation should be ugly, practical, and so simple that there's no room for error. Thus, the Flash-based "application" above.
Think of it as a blank interactive canvas for all the world to see. After the next 7 steps, you'll be empowered with the know-how to build one all of your own, using only software that's freely and legally available.
First, download the Free Adobe Flex SDK. Note that we will not be needing Adobe Flex Builder - just the SDK.
Adobe's site design (continuing on the site linked to from Step 1) implies that you need to answer questions about backend and primary usage. These questions can be safely ignored. No answer is required. Or, you can go wild and answer them randomly! Just click Download Now when you're ready, then wait for the 138 MB download. Depending upon your internet connection, this is either a good time to take a stretch break, or a good time to go play some existing Flash games on the web.
Feeling refreshed? Covered in zombie guts?
Both at the same time?
Unzip the downloaded "flex_sdk_4.zip" file to create the new folder flex_sdk_4. Drag this folder to a location that will be simple to navigate to via command-line, such as the C:\ for Windows, or the Desktop for a Mac. So long as you're comfortable using "cd" to navigate to the directory, any location that you choose will work equally well. For sake of simplicity, in the steps that follow I'll assume the destinations that I suggested, though if you think you know better... you very well may, so I'll trust you to know what you're doing in that case.
Need a primer on how to navigate using "cd" in the command-line? There's no shame in taking a peek if you could use a refresher. A lot of older programmers picked up command-line by necessity at some time or another. Of course, everyone is a beginner at some point, and I think it's ok to recognize that text prompts may seem arcane to someone that has only ever known computers as beautiful, useful communications and gaming devices.
Lastly, create a new folder inside the new flex_sdk_4 directory, alongside (but not inside of) the "bin" directory. Name the new folder "projects" (without quotes), as shown below.
Maybe you're already an experienced programmer and you're just trying to transition your skills to web. Or, maybe you've never written a line of code in your life, and you've rightly decided that learning programming would be a fun thing to do. In either case, you'll be fine here. The programming code isn't the point - we're not aiming to learn ActionScript 3 in this first tutorial, so much as we're learning how to use mxmlc.
Go ahead and open up your favorite plain text editor. Line numbers are handy for programming, so I'm partial to for Windows and for Mac, although Notepad and TextEdit will suffice for now if you're in a hurry.
Enter the following text into it, and save the file as "ShortExample.as". Note here that if you choose to deviate a bit from how I'm outlining it: the filename must match what comes after "public class" in the source code, both of which must match the function that's currently called ShortExample().
package { // no special packages needed to organize this single file project
import flash.display.Sprite; // the application is built upon Sprite
import flash.text.TextField; // needed to display the project's text
public class ShortExample extends Sprite // must match the file's name!
{
// initialize text label
private var ourExampleText:TextField = new TextField();
public function ShortExample() // program execution begins here
{
ourExampleText.text = "Hello, world!"; // set the text
addChild(ourExampleText); // add text to the application
} // end of ShortExample() function
} // end of ShortExample class definition
} // end of file/program
Save the file into the "projects" directory created from the last step within the unzipped flex_sdk_4 folder (this is going to look something like C:\flex_sdk_4\projects\ on Windows or ~\Desktop\flex_sdk_4\projects\ on Mac).
This is pretty much the bare minimum code for ActionScript 3 to show something. This is good though, because this program is not extremely awesome. When we begin to make things in the following tutorials that are extremely awesome, we'll have less to rip out of this one when gutting it for use as a starting pattern.
In the command-line, navigate to the flex_sdk_4 folder, so that the active folder is the one that contains both the "bin" directory and your newly created "projects" directory (again, if you're unfamiliar with command-line navigation, please give this a look). From that location, execute this next command, which is how we tell mxmlc to compile the ".as" file that we can read into a ".swf" that the computer can run.
Mac or Linux compilation line:
./bin/mxmlc ./projects/ShortExample.as
Windows PC compilation line:
.\bin\mxmlc projects\ShortExample.as
Or (alternative Windows PC compilation line):
cd projects C:\flex_sdk_4\bin\mxmlc ShortExample.as
We should see output along the lines of:
/Users/deleonic/Desktop/flex_sdk_4/projects/ShortExample.swf (639 bytes)
...if we're on Mac, or the following if doing this on PC:
C:\flex_sdk_4\projects\ShortExample.swf (639 bytes)
(Making Flash content on a Mac makes Steve Jobs angry, but I think that's mostly because he seems to think that Flash is only used to make banner ads. His mistaken impression is probably fueled by two years of cognitive dissonance welling up since that stated "all the parts of the internet are on the iPhone." Fun Fact: significant parts of the internet are in Flash. And though HTML5 may be taking AS3's place for dynamic websites, HTML5 is a long way from competing with AS3 for making real-time games.)
In your projects folder, you'll hopefully find a new file: a Flash program named "ShortExample.swf". Double click on that to open it, and if all went well, you'll see this:
If all did NOT go well, and you do NOT see that, then e-mail me at chris@gamedevlessons.cominforming me of what happened instead, and I'll do what I can to help.
Not only is this a real step - this is one of the most important steps.
. <-- Click that.
Although all ActionScript 3 developers are likely aware of the LiveDocs, this website takes on a whole different sort of significance for the command-line mxmlc developer. This isn't just a reference for a command-line developer, it's pleasure reading.
Many modern IDEs - including Flash/Flex Builder - autocomplete function names, and automatically resolve required import lines for class types introduced. Without those luxuries to lean on, a different type of workflow needs to be established for the command-line developer, and LiveDocs is a critical part of the process. It isn't extra process, however; it's different process. Different processes yields different results, and there's value in that.
Also, the LiveDocs are a goldmine of cool stuff that already works. The better you know the LiveDocs, the better you'll be able to avoid becoming one of those unfortunate souls that wastes a ton of time re-writing a mediocre version on their own of something that already exists in a fast, stable implementation within the standard libraries.
For any programming language, there will be some things that we can learn, some things that we can get used to, and some things that we'll need to look up. The LiveDocs are the solution for the part of ActionScript 3 that you'll need to look up, but even better is when you begin to internalize pieces of the LiveDocs and think in terms of what the provided structures and functionality can do.
To bring this back to earth: notice in ShortExample.as where we import flash.text.TextField, used that class to declare the variable ourExampleText, and then set a .text value on it within the program's flow. How can someone know that this is possible, and what else can be done with TextField properties or flash.text classes? In the top left corner of the LiveDocs, scroll down to find "flash.text" - click on it, then browse in the bottom left find "TextField", scroll down in the main window and there you'll fine the "text : String" property that we set in ShortExample.as.
Any of those other properties listed can also be set on the TextField variable ourExampleText. Explore a bit, and feel free to experiment.
If the properties and methods listed in the docs seem to imply some particular functionality, but it's not clear how to fit them together in practice, searching the web for the property or function name typically leads to some helpful example code. Flash programmers help each other.
We're a lot closer to making our first ActionScript 3 game project than one might assume from the looks of "Hello World". There are only a handful of technical requirements to be able to make nearly any 2D videogame:
But you can't paint without a canvas. Today, we built your first of many canvases.
With the Flash libraries and ActionScript 3 at our disposal, crossing items off that list has never been easier. We won't need to write assembly to change pixel colors or set screen resolution, we don't need to buy reference books to help us decode common image and audio formats, we won't grapple with drivers for devices, or any of the random nasty chalenges that used to be commonplace in videogame development. What you make with ActionScript 3 will automatically work on virtually every computer and operating system, a feat which in itself was once a major undertaking. Players of all technical backgrounds will be able to jump right in immediately, and play the entire game without going through installation or worrying about uninstallation.
You've made a good choice.
Tune in next time when we'll be breaking ground on learning each of the essential game development basics listed above.
UPDATE: Part 2 is now available