1. Code
  2. Workflow

Quick Tip: Write and Compile Code Online Using WonderFl


In this Quick Tip we're going to look at how to create applications directly in the browser with WonderFl. Read on for more!

Step 1: What is WonderFl?

WonderFl is a service that lets you write and compile ActionScript code online. There's more however, being a social networking service it lets you browse and even edit someone else's code to create amazing projects.

Step 2: How it Works

It is really simple, just create an account (you can log in using OpenID, Google Account and other services) and you'll be ready to create a project from scratch or to "fork" someones else's code (that is, to use theirs as a starting point for your own).

The editor is pretty basic, a code section on the left side, where you can start writing your application and a live preview on the right, that will compile your code automatically (you can disable this) and show it, if no errors are present.

There's also a Terminal-like panel that will show you information about the compilation of your code.

Step 3: Pros and Cons

As always there are advantages and disadvantages in using an online compiler, let's take a look at them:


  • Fast and easy prototyping.
  • No need of a desktop app (you can code in any device with Flash Player, e.g. Android powered devices!).
  • Hundreds of source codes available.


  • No visual tools (no problem for a hardcore developer)

Step 4: External Libraries

WonderFl compilation is powered by Flash Player 10.1 so it is fully featured with the recent changes to the ActionScript 3 language. Besides that, external libraries are available including 3D, Tweens, Augmented Reality, Sound, Maps, Particles, Components and more.

Step 5: Start Coding!

You can create simple utilities to full featured apps using WonderFl. I recreated the Animated Background effect from a previous tutorial and this is what came out:


If you are a Flash Developer then WonderFl is a must try, it is simple yet powerful and really good fun.

Thank you for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.