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 25, 2018 · 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.

  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.

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

    {
	"config": "js",
	"compilerOptions": {
		"html-template": "template.html"
	},
	"files":
	[
		"src/Main.as"
	]
}

  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