Skip to content

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

Josh Tynjala edited this page Jan 14, 2022 · 27 revisions

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

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": "air",
    	"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.

See How to build an ActionScript project in Visual Studio Code to learn how to run a task to compile the SWF file for your AIR application.

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 How to debug an Adobe AIR desktop application for complete details about debugging.

Packaging Setup

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

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

The content that we add to the airOptions section depends on the type of Adobe AIR desktop application that you want to package. Choose among the following desktop application types:

Shared Runtime

We can package a classic shared runtime application. That's the type of application with the .air file extension that can be installed on any desktop platform. It requires the Adobe AIR runtime to be installed separately, unlike captive runtime applications.

First, we need to specify the output path for the .air file:

"airOptions": {
	"output": "bin/Main.air"
}

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

"airOptions": {
	"output": "bin/Main.air",
	"signingOptions": {
		"storetype": "pkcs12",
		"keystore": "path/to/certificate.p12"
	}
}

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": {
	"output": "bin/Main.air",
	"signingOptions": {
		"storetype": "pkcs12",
		"keystore": "path/to/certificate.p12"
	},
	"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.

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.

Captive Runtime

We can package captive runtime applications for Windows and macOS. This type of application is completely standalone because it includes its own complete version of Adobe AIR.

First, we need to specify the "bundle" target to indicate that the app should be built with captive runtime.

"airOptions": {
	"windows": {
		"target": "bundle"
	},
	"mac": {
		"target": "bundle"
	}
}

When an application uses captive runtime (or a native installer), we can create separate sections for each platform to specify different options. In this case, we create separate windows and mac sections since the output file names must be different.

"airOptions": {
	"windows": {
		"target": "bundle",
		"output": "bin/Main"
	},
	"mac": {
		"target": "bundle",
		"output": "bin/Main.app"
	}
}

The Windows path does not have a file extension because a folder will be created. The folder contains an .exe file and a number of additional files that are required by the application.

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

"airOptions": {
	"windows": {
		"target": "bundle",
		"output": "bin/Main",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "windows_certificate.p12"
		}
	},
	"mac": {
		"target": "bundle",
		"output": "bin/Main.app",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "mac_certificate.p12"
		}
	}
}

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": {
	"windows": {
		"target": "bundle",
		"output": "bin/Main",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "windows_certificate.p12"
		}
	},
	"mac": {
		"target": "bundle",
		"output": "bin/Main.app",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "mac_certificate.p12"
		}
	},
	"files": [
		{
			"file": "icons/icon48.png",
			"path": "."
		},
		{
			"file": "icons/icon128.png",
			"path": "."
		}
	]
}

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 windows or mac 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.

Native Installer

We can package desktop applications for Windows and macOS that have a native installer. The installer can automatically install the Adobe AIR runtime, if necessary, and the application gains extra capabilities that normal shared runtime applications don't have.

First, we need to specify that we want to build native installers for Windows and macOS:

"airOptions": {
	"windows": {
		"target": "native"
	},
	"mac": {
		"target": "native"
	}
}

When an application uses a native installer (or captive runtime), we can create separate sections for each platform to specify different options. In this case, we create separate windows and mac sections since the output file names must be different. We'll create an .exe file on Windows and a .dmg file on macOS:

"airOptions": {
	"windows": {
		"target": "native",
		"output": "bin/Main.exe"
	},
	"mac": {
		"target": "native",
		"output": "bin/Main.dmg"
	}
}

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

"airOptions": {
	"windows": {
		"target": "native",
		"output": "bin/Main.exe",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "windows_certificate.p12"
		}
	},
	"mac": {
		"target": "native",
		"output": "bin/Main.dmg",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "mac_certificate.p12"
		}
	}
}

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": {
	"windows": {
		"target": "native",
		"output": "bin/Main.exe",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "windows_certificate.p12"
		}
	},
	"mac": {
		"target": "native",
		"output": "bin/Main.dmg",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "mac_certificate.p12"
		}
	},
	"files": [
		{
			"file": "icons/icon48.png",
			"path": "."
		},
		{
			"file": "icons/icon128.png",
			"path": "."
		}
	]
}

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 windows or mac 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

Clone this wiki locally