Skip to content

Create a new ActionScript project in Visual Studio Code that targets JavaScript and HTML

Jump to bottom
Josh Tynjala edited this page Jan 9, 2020 · 20 revisions

With Apache Royale, you aren't required to use the included framework. You can also create a pure ActionScript project that gives you full access to the HTML DOM and other web browser APIs. Learn how to create this type of project that runs in web browsers without a plugin.

Development Setup

  1. Install the ActionScript & MXML extension for Visual Studio Code.

  2. Create a new directory for your project, and open it in Visual Studio Code.

    To open a directory, select the File menu → Open... or click Open Folder button in the Explorer pane.

  3. Set your workspace's SDK to Apache Royale, if this SDK hasn't been discovered automatically. Download Apache Royale here, if you don't have it yet.

  4. Create a file named asconfig.json in the root directory of your project, and add the following content:

    {
	"config": "js",
	"compilerOptions": {
		"source-path": [
			"src"
		],
		"html-template": "template.html"
	},
	"mainClass": "Main"
}

  5. Create directory named src.

  6. Inside src, create a file named Main.as, and add the following code:

    package
{
	public class Main
	{
		public function Main()
		{
			var element:HTMLParagraphElement = document.createElement( "p" ) as HTMLParagraphElement;
			element.textContent = "Hello World";
			document.body.appendChild( element );
		}
	}
}

  7. Inside the project's root directory, create a file named template.html, and add the following code:

    <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Royale JS Project</title>
${head}
</head>
<body>
${body}
</body>
</html>

Next Steps

Getting Started

Project Types

Debugging

Reference

Clone this wiki locally