ActionScript 3 Entries and Notes on HTML5

Dec 31, 2011

One of the more common questions I’ve been receiving via e-mail and finding on forums is about programmers familiar with some other language (Java, C#, C++) aiming to switch to ActionScript 3 for developing web/Flash games.

The benefits of this transition are broader distribution (easy to reach thousands of players, or more, within days), trivial cross-platform support, and simplification of user experience (no install, configuration, or uninstall – just visit a URL). As tradeoffs: total file size matters for loading/download time, and keeping up performance can involve a few tricks. However both of those tradeoffs are matters developers are historically used to working with for other reasons, such a limited media storage and older processors, so there are traditions and patterns for designing to get the most out of such constraints.

AS3 is also free to use, provided you know how to navigate command-line. If you’re using Windows then FlashDevelop is even available as a free IDE to manage project files and compiler settings.

I’ve already written a number of entries and sample projects about AS3, but they’re a bit spread about. Since I’ve been pulling together the same links for multiple replies, it seemed time for a new summary post specifically on this subject.

MXMLC Install and Basics

MXMLC is the name of the command-line compiler used to translate ActionScript 3 code into a SWF file for usage in the Flash player/plug-in.

Recompilation Scripts, Opening the Debugger – Using scripts for recompilation, and getting started with the command-line debugger

Remember to add a MochiBot to swfs as a way to keep track of plays. Many plays occur not on the original sites submitted to (Kongregate, Newgrounds, or otherwise), but instead on dozens or hundreds of other sites where the swf gets reposted. Using a few lines to add MochiBot to the project makes it possible to see where on the internet the game has been rehosted, and makes it easy to see simple graphs and counters for total plays.

It’ll be handy to bookmark Adobe’s official ActionScript 3 reference site to verify which functions and variables are available on existing classes, as well as checking which imports are needed for particular types of built-in functionality.

Sample Code

Beginner AS3 sample code (zip) – Very basic, but functional and ready for compilation

Everyone’s Platformer – Advanced platformer example, built from the ground up, that incorporates external file loading, optimized collision detection, a built-in level editor, and a variety of other features

This engine was used as the foundation for Vision by Proxy: Second Edition.

Everyone’s Platformer Level Editor Manual – Usage documentation for the level editor built into Everyone’s Platformer

2D Platformer Advanced Collision Detection – Technical and conceptual documentation about the collision detection in the Everyone’s Platformer AS3 example above

One not by me, but particularly useful if you have more retro-style games as the target, is the EZPlatformer example for Flixel. We used this tutorial as the foundation for Zylatov Sisters, as described in the entry on process for that project.

How to Monetize?

My main advice on Flash game monetization is to hold off a bit before aiming to do it. I make this suggestion for two reasons:

  1. Focusing on money for early projects can get in the way of freely exploring design ideas and technical lessons, stunting opportunities to develop the skills that can later pay off.

  2. Prematurely going after money is unlikely to be successful anyway, a bit like someone trying to sell their first attempts at poetry or oil painting. It generally takes considerable practice and experimentation to get to that level.

Although there are a variety of platforms available to support microtransactions, most of the people I know that have made money through Flash games did so through either licensing their games (getting paid to site lock and rebrand them), using their games to help win competitions leading to XBLA/PSN/WiiWare deals, or as portfolio samples to land decently paying (if inconsistent) contract work.

I don’t know anyone doing particularly well from ads in Flash games. Perhaps someone somewhere is, but as far as I can tell ads junk up the experience, and rarely make enough to justify that negative effect on the design. If deliberating the addition of ads, do the math as to the number of views necessary for the ads to produce any non-trivial earnings – and consider the risk that the inclusion of ads may turn off some folks from returning to the game or sharing it. It is not simply a matter of deciding whether to make no money or some money, the latter by sticking ads in or on the game; if that “some” amounts to a really trivial amount relative to the time put into it, it may wind up serving no real purpose other than annoying players off the bat.

Elephant in the Room: HTML5

I touched on this question briefly a couple of months ago in Picking a Programming Language, but let’s address it head-on with a bit more detail here.

For interactive websites, yes, HTML5 is absolutely replacing Flash.

For real-time videogames, HTML5 seems to still be a long way from taking Flash’s place.

HTML5 renders differently on various browser and platform pairings. Like any website code subject to browser implementation, this can result in far more complicated testing, and even require branching in the code to account for different set ups.

HTML5 has trouble with basic audio. One common workaround for HTML5′s audio inadequacies is to use Flash for the audio. This clearly defeats whatever anti-Flash reasons drive some people to use HTML5.

(If you are using HTML5 for audio though, avoid using mp3.)

Out of the few dozen HTML5 games I’ve seen, their main selling point is that they’re made in HTML5 – not that they do anything new or different that players find value in, not because they were faster or easier for the developers to make, and not on account of the games being particularly good.

To double check my concerns about HTML5, I went to HTML5Games.com, an aggregation site. I tried to play a well rated, top ranked game, but every few seconds the game reloaded every tab that I had open, including the tab that the game was in. I was never actually able to see it in action, but at least closing that tab put everything back to normal. While I recognize that every HTML5 game doesn’t fail that severely, it probably doesn’t take many experiences like that one for a non-programmer to abandon a games site. I’ll bet that game works fine in Google Chrome, which has excellent HTML5 support, however if we’re going to require our players to install and use a particular browser our web games will immediately be at a major disadvantage.

Nor has it actually mattered much that these real-time HTML5 games are more likely to work on mobile devices than Flash. For interactive websites, it matters that HTML5 runs on mobile devices. For real-time videogames, typically programmed to use keyboard controls, or using mouseover/hover effect, etc. even if the swf ran flawlessly on mobile devices, most Flash games wouldn’t be usable on those platforms anyway without a substantial redesign. Moreover, Internet Explorer still has limited HTML5 support, and since it’s the default browser on the dominant operating system that’s a pretty significant set of users being lost as a tradeoff.

But, someone as recently asked, what about the Angry Birds implementation in HTML5? Though it’s admittedly an impressive port, it came only after the game’s massive success on iPhone set up the company to have resources for thoroughly testing and accounting for every browser and OS combination to get their completely designed game ported. (The core gameplay of Angry Birds, as a bit of an aside, follows in the footsteps of the style popularized earlier by the Flash game Crush the Castle.)

HTML5 seems to offer the cross-browser quagmire of web design to game design. Although, if the goal is to make an interactive multimedia website, HTML5 fits that task great. HTML5 is also a viable candidate for non-real-time games that primarily consist of navigating menus and clicking buttons to select choices. For the types of real-time games I develop, AS3 still looks like it will be the reasonable choice for the foreseeable future.



Subscribe by e-mail
to receive an update every month of all new HobbyGameDev articles, videos, and game development resources



5 Comments

  1. rcburrell says:

    We’ve done a lot of work comparing Flash and HTML5 and where the best place to apply each technology set lies. It’s an interesting junction that we exist at right now, both from a pure tech capability standpoint and also from a social/perception standpoint.

    Apple – for right or wrong – has gone a long way to add a note of negativity to the public perception of Flash. This has long been the case for websites and their creators, where things such as searchability, accessibility, etc. have been deemed of higher importance than the extra interactivity that Flash can bring. With HTML5 technologies coming into wider use, Flash has become almost non-existent for website use.

    Games are a totally different story. HTML5 has the potential to match Flash for performance and capability, but the core frameworks and (perhaps most importantly) the toolsets don’t really exist in any sort of optimized format yet. Flash is still the easiest and best option for web-based gaming but that could change in the not-too-distant future.

    However, the money just doesn’t seem to be there for web-based games vs. mobile apps / XBLA / Steam / etc unless you can make a big impact with a Facebook offering or an exclusive game for a large portal like PopCap or Big Fish.

  2. [...] ActionScript 3 Entries and Notes on HTML5 [...]

  3. [...] ActionScript 3 Entries and Notes on HTML5 – Tutorials and example code for compiling AS3/Flash SWF files at command-line for free (i.e. without needing to use Adobe Flash CS). [...]

  4. [...] and ActionScript 3 resources to help you dig into that engine example, my other blog entry on ActionScript 3 Entries pulls together other set up tutorials and sample [...]

  5. [...] We built Ms Vision by Proxy atop an enhanced and extended version of Everyone’s Platformer, an engine I wrote and give away the full source code for as an example here on HobbyGameDev. For more information about getting started with ActionScript 3 to tinker with that source, check out the entries on ActionScript 3. [...]

Leave a comment

Comments Form
  • Your email will not be used for any purpose other than to update you in replies to your comments. Your website address will be shown as a link from your name with your comment. Your profile photo is auto-magically provided by Gravatar.

All contents Copyright ©2014 Chris DeLeon, solely to prevent others from copyrighting it.
Permission to reproduce, modify, and distribute this content granted without special request.

Site production by Ryan Burrell.