Skip to content

Create a new ActionScript project in Visual Studio Code that targets Adobe AIR for mobile platforms

Jump to bottom
Josh Tynjala edited this page Jan 14, 2022 · 19 revisions

Learn to set up a project in Visual Studio Code to create an Adobe AIR application that runs on mobile operating systems, including Android and iOS.

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. Choose an ActionScript SDK for your workspace.

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

    {
	"config": "airmobile",
	"compilerOptions": {
		"source-path": [
			"src"
		],
		"output": "bin/Main.swf"
	},
	"mainClass": "Main",
	"application": "src/Main-app.xml"
}

  5. Create directory named src.

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

    package
{
	import flash.display.Sprite;
	import flash.text.TextField;

	public class Main extends Sprite
	{
		public function Main()
		{
			var tf:TextField = new TextField();
			tf.text = "Hello World";
			addChild(tf);
		}
	}
}

  7. Inside src, create an AIR application descriptor file named Main-app.xml. AIR application descriptors may be configured with many more elements, but you can use the following simple content as a starting point:

    <?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/24.0">
	<id>com.example.Main</id>
	<versionNumber>0.0.0</versionNumber>
	<filename>Main</filename>
	<name>Main</name>
	<initialWindow>
		<content>[Path to content will be replaced by Visual Studio Code]</content>
		<visible>true</visible>
	</initialWindow>
</application>

    Be sure to update the version number in the namespace http://ns.adobe.com/air/application/24.0 to match the version of Adobe AIR that you are targeting.

Native extensions

If your Adobe AIR application requires native extensions, you need to configure them using two fields in asconfig.json. In the airOptions section, add the folder containing your ANEs to the extdir field. Additionally, add each .ane file from the same folder to the library-path compiler option.

{
	"compilerOptions": {
		"library-path": [
			"path/to/native_extensions/ExampleA.ane",
			"path/to/native_extensions/ExampleB.ane"
		]
	},
	"airOptions": {
		"extdir": [
			"path/to/native_extensions"
		]
	}
}

Some ActionScript compilers require that you add each .ane file to library-path separately, while other compilers can also search for .ane files inside folders. For maximum compatibility, it's better to specify individual .ane files in the library-path.

Additionally, don't forget to add each native extension's ID to your Adobe AIR application descriptor XML file.

<extensions>
	<extensionID>com.example.MyCoolNativeExtension</extensionID>
</extensions>

Debugging Setup

See the following pages for complete details about debugging:

Packaging Setup

To export a release build of our AIR application that may be submitted to app stores, we first need to configure the AIR Developer Tool (adt) options. We're going to add a new airOptions section in asconfig.json:

{
	"config": "airmobile",
	"compilerOptions": {
		"source-path": [
			"src"
		],
		"output": "bin/Main.swf"
	},
	"mainClass": "Main",
	"application": "src/Main-app.xml",
	"airOptions": {
	}
}

First, we need to specify the output path for the Android .apk and iOS .ipa files:

"airOptions": {
	"android": {
		"output": "bin/Main.apk"
	},
	"ios": {
		"output": "bin/Main.ipa"
	}
}

When a project targets multiple platforms, you may create separate sections for each platform to specify different options. In this case, we create separate android and ios sections since the output file names must be different.

Next, we need to specify the signing options, such as the type of certificate and its path on the filesystem:

"airOptions": {
	"android": {
		"output": "bin/Main.apk",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "android_certificate.p12"
		}
	},
	"ios": {
		"output": "bin/Main.ipa",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "ios_certificate.p12",
			"provisioning-profile": "example.mobileprovision"
		}
	}
}

Note: We don't specify the certificate password in asconfig.json. We'll be asked for the password later!

Finally, we may have some files (and folders) to add to the package, including icons and other assets.

"airOptions": {
	"android": {
		"output": "bin/Main.apk",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "android_certificate.p12"
		}
	},
	"ios": {
		"output": "bin/Main.ipa",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "ios_certificate.p12",
			"provisioning-profile": "example.mobileprovision"
		}
	},
	"files": [
		{
			"file": "icons/icon48.png",
			"path": "icon48.png"
		},
		{
			"file": "icons/icon128.png",
			"path": "icon128.png"
		}
	]
}

The file property refers to the location of a file (or folder) on your computer's local filesystem. The path property is the directory where it will be added to the application package. We'll add these icons to the root of the package.

Unlike the previous Adobe AIR options, we didn't place files inside the android or ios sections. We could have done that, if each platform needed a different set of assets. However, in many cases, the same assets should be included on all platforms.

See How to package an Adobe AIR application in Visual Studio Code to learn how run a task to package your application using these new options.

Next Steps

Getting Started

Project Types

Debugging

Reference

Clone this wiki locally