{"id":2926,"date":"2007-10-23T14:29:13","date_gmt":"2007-10-23T12:29:13","guid":{"rendered":"http:\/\/fdt.powerflasher.com\/blog\/?p=10"},"modified":"2011-09-29T05:38:12","modified_gmt":"2011-09-29T12:38:12","slug":"coding-air-with-fdt","status":"publish","type":"post","link":"https:\/\/fdt.powerflasher.com\/blog\/2007\/10\/coding-air-with-fdt\/","title":{"rendered":"Coding AIR with FDT"},"content":{"rendered":"<p><strong>Update<\/strong>:<\/p>\n<div id=\"_mcePaste\" style=\"position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;\">Please note that developing AIR applications with FDT 3 is very easy now. Simply create a launcher for viewing and debugging your application and one launcher to release it as .air file. To create an AIR debug launch configuration select your Document Class in the Flash Explorer and then open the Run Dialog (Run &gt; Open Run Dialog\u2026). Double click \u201cFDT AS3 Application \u201c to create a new launch configuration. After that select the \u201cStart\u201d tab and choose \u201cAIR Debug Launcher\u201d as viewer.<\/div>\n<div id=\"_mcePaste\" style=\"position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;\">Press the \u201cRun\u201c button to compile and launch your AIR application. FDT automatically generates a default application XML file into your output folder.\u2028To release and package your AIR application open the Run Dialog and double click \u201cFDT AIR Application Release\u201d and configure the settings on the right-hand side.<\/div>\n<div id=\"_mcePaste\" style=\"position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;\">see: http:\/\/fdt.powerflasher.com\/blog\/?p=94<\/div>\n<p>Please note that developing AIR applications with FDT 3 is very easy now. Simply create a launcher for viewing and debugging your application and one launcher to release it as .air file. To create an AIR debug launch configuration select your Document Class in the Flash Explorer and then open the Run Dialog (Run &gt; Open Run Dialog\u2026). Double click \u201cFDT AS3 Application \u201c to create a new launch configuration. After that select the \u201cStart\u201d tab and choose \u201cAIR Debug Launcher\u201d as viewer.<\/p>\n<p>Press the \u201cRun\u201c button to compile and launch your AIR application. FDT automatically generates a default application XML file into your output folder.\u2028To release and package your AIR application open the Run Dialog and double click \u201cFDT AIR Application Release\u201d and configure the settings on the right-hand side. See new post: http:\/\/fdt.powerflasher.com\/blog\/?p=94<\/p>\n<p><strong>Previous Post:<\/strong><\/p>\n<p><span lang=\"EN-GB\">On October 1, 2007 Adobe released the beta 2 version of AIR (Adobe Integrated Runtime), formerly known as Apollo.<br \/>\nAs a cross-operating system runtime AIR provides developers with the possibility to deploy RIAs to the desktop. This is very promising regarding the users interaction with the web because it provides a faster access to related data by using native desktop applications. On top of this, AIR applications can have a great look and feel by using customized windows.<br \/>\nAll you need to do if you want to build those cool things is to download the Runtime, which is required to run any Adobe AIR application and to also download the Flex 3 SDK. The latter includes as well the AIR SDK as the AIR compiler, the AIR debug launcher and the AIR packager. These tools can be used together with ANT to map the whole AIR workflow.<br \/>\nTo distribute AIR applications means to pack the required files like swfs, assets and the application descriptor file. These packages are used by the runtime environment, which should be installed at first, to make sure that all AIR applications will work.<br \/>\nNico Zimmerman promised that there will be an add-on for FDT to support the AIR workflow with which it will be much easier to develop AIR applications.<br \/>\nNow, let\u2019s take a closer look at the current workflow and let&#8217;s build a \u201chello world\u201d Air application step by step.<\/span>&lt;!&#8211;[endif]&#8211;&gt;<\/p>\n<ol>\n<li style=\"margin: 10px 0pt;\">Download and install the Runtime (<a href=\"http:\/\/labs.adobe.com\/downloads\/air.html\">http:\/\/labs.adobe.com\/downloads\/air.html<\/a>).<\/li>\n<li style=\"margin: 10px 0pt;\">Download the Flex 3 SDK (<a href=\"http:\/\/labs.adobe.com\/technologies\/flex\/sdk\/flex3sdk.html\">http:\/\/labs.adobe.com\/technologies\/flex\/sdk\/flex3sdk.html<\/a>).&lt;!&#8211;[endif]&#8211;&gt;<\/li>\n<li style=\"margin: 10px 0pt;\">Now you can start your eclipse in the FDT perspective and add a new AS3 core library.\n<ul style=\"margin-left: 30px;\">\n<li style=\"margin: 5px 0pt;\"><strong>Window <\/strong>-&gt; <strong>Preferences <\/strong>-&gt; <strong>FDT <\/strong>-&gt; <strong>Core Libraries<\/strong> -&gt; <strong>AS3 Core Libraries<\/strong> -&gt; <strong>Add&#8230;<\/strong><\/li>\n<li style=\"margin: 5px 0pt;\">2. Choose Flex 3 SDK with AIR as <strong>Type<\/strong>, type in \u201cFlex3_AIR\u201d as Name and choose a path variable by clicking the <strong>&#8220;Browse\u2026&#8221;<\/strong> button. If there is no variable linking to the Flex 3 SDK, click <strong>&#8220;New\u2026&#8221;<\/strong>, type in \u201cFlex3SDK_AIR\u201d as <strong>Name <\/strong>and add the <strong>Path <\/strong>to your Flex 3 SDK folder. Press a few times <strong>OK<\/strong>, to get back to eclipse.<br \/>\n<a title=\"Setting the classpath to Flex3 SDK\" href=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/01.jpg\"><img style=\"margin-top: 5px;\" src=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/01.thumbnail.jpg\" alt=\"Setting the classpath to Flex3 SDK\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"margin: 10px 0pt;\">Now you&#8217;re prepared to start with your first AIR application in FDT: create a <strong>New Flash Project<\/strong> with the <strong>Name <\/strong>\u201cHello World\u201d. Choose <strong>Action Script 3<\/strong> with your new core library (\u201cFlex3_AIR\u201d) as the project language and press <strong>&#8220;Finish&#8221;<\/strong>.<br \/>\n<a title=\"Creating a new flash project\" href=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/02.jpg\"><img style=\"margin-top: 5px;\" src=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/02.thumbnail.jpg\" alt=\"Creating a new flash project\" \/><\/a><\/li>\n<li style=\"margin: 10px 0pt;\"><a title=\"AIR-example\" href=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/exampleproject.zip\">Downloading this zip-file<\/a> and copying the content to your project folder is the easiest way to go on. The zip-file contains a settings folder within an assets folder. The settings folder contains the<strong> application descriptor file<\/strong> which is essential for running AIR applications. This file contains parameters as well for the AIR application as for the first window. You have to customize these parameters as explained in the comments in the file.<br \/>\n<em>Note<\/em> that the content tag and all tags marked \u201crequired\u201d are very important to run the AIR application! Rename the <strong>application descriptor file<\/strong> like shown in this example: \u201c-app.xml\u201d (e.g. \u201cpowerflasher-app.xml\u201d).<br \/>\n<a title=\"The application-descriptor-file\" href=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/03.jpg\"><img style=\"margin-top: 5px;\" src=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/03.thumbnail.jpg\" alt=\"The application-descriptor-file\" \/><\/a><\/li>\n<li style=\"margin: 10px 0pt;\">Add the <strong>\u201csrc\u201d <\/strong>folder to the <strong>classpath <\/strong>and double-click the <strong>&#8220;Build-Air&#8221;<\/strong>file. The most important properties which you have to customize are marked with comments and are located at the top of the file.\n<ul style=\"margin-left: 30px;\">\n<li style=\"margin: 5px 0pt;\"><strong>Clean <\/strong>-&gt; Deletes the built directories.<\/li>\n<li style=\"margin: 5px 0pt;\"><strong>Build directories <\/strong>-&gt; Creates directories. &#8220;Debug&#8221; contains the compiled swf for debugging, &#8220;build&#8221; contains the compiled swf for publishing and &#8220;publish&#8221; contains the final AIR file.<\/li>\n<li style=\"margin: 5px 0pt;\"><strong>Compile for debuging<\/strong> -&gt; Uses the mxml compiler with a special air parameter to compile the AIR swf. Instead of that you can use the amxml compiler as normal as you use the mxml compiler.<\/li>\n<li style=\"margin: 5px 0pt;\"><strong>Compile for publishing<\/strong> -&gt; Does the same as &#8220;Compile for debuging&#8221;.<\/li>\n<li style=\"margin: 5px 0pt;\"><strong>Test application<\/strong> -&gt; Uses the AIR debug launcher (ADL) to start the AIR application without packaging and installation. The ADL uses the application descriptor file to set up the window.<\/li>\n<li style=\"margin: 5px 0pt;\"><strong>Package application<\/strong> -&gt; Uses the AIR development tool (ADT) to package all required files to an AIR package.<\/li>\n<li style=\"margin: 5px 0pt;\"><strong>Create certificate<\/strong> -&gt; Uses the ADT to create a certificate which is required to sign and build the AIR package.<\/li>\n<\/ul>\n<\/li>\n<li style=\"margin: 10px 0pt;\">Now you are ready to create the <strong>ActionScript Class<\/strong>named \u201cHelloWorld\u201d. The code should look like this:\n<pre style=\"margin-top: 5px;\">package\r\n{\r\n    import flash.display.Sprite;\r\n    import flash.text.TextField;\r\n    import flash.text.TextFieldAutoSize;\r\n\r\n    \/**\r\n     * @author Stephan Partzsch\r\n     *\/\r\n    public class HelloWorld extends Sprite\r\n    {\r\n\r\n        public function HelloWorld()\r\n        {\r\n            var textField:TextField = new TextField();\r\n            textField.autoSize = TextFieldAutoSize.CENTER;\r\n\r\n            textField.text = \"Hello world!\";\r\n\r\n            textField.x = (stage.stageWidth - textField.width) \/ 2;\r\n            textField.y = (stage.stageHeight - textField.height) \/ 2;\r\n\r\n            this.addChild(textField);\r\n        }\r\n\r\n    }\r\n}<\/pre>\n<\/li>\n<li style=\"margin: 10px 0pt;\">Open the <strong>ANT view<\/strong>. You can find it here: <strong>Window <\/strong>-&gt; <strong>Show View<\/strong> -&gt; <strong>Other <\/strong>-&gt; <strong>ANT<\/strong>. Drag the <strong>\u201cBuild_Air\u201d<\/strong> file to the ANT view and double-click number<strong> 4<\/strong> to test your application. Create a certificate with number<strong> 7<\/strong> and than double-click number<strong> 6<\/strong> to package your first AIR application.<br \/>\n<a title=\"The ANT view in eclipse\" href=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/10.jpg\"><img style=\"margin-top: 5px;\" src=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/10.thumbnail.jpg\" alt=\"The ANT view in eclipse\" \/><\/a><\/li>\n<li style=\"margin: 10px 0pt;\">Finally you find HelloWorld.air in your project directory in the publish folder. Double-click it to install it on your desktop.&lt;!&#8211;[endif]&#8211;&gt;<\/li>\n<\/ol>\n<p>Of course, you can also download this sample project right <a title=\"HelloWorld apllication\" href=\"http:\/\/fdt.powerflasher.com\/blog\/wp-content\/helloworld.zip\">here<\/a>.<br \/>\nThat\u2019s it and I hope I could demonstrate the workflow of AIR so that you can go on with developing ultra-cool AIR applications. \ud83d\ude42<\/p>\n<p>Stephan<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: Please note that developing AIR applications with FDT 3 is very easy now. Simply create a launcher for viewing and debugging your application and one launcher to release it as .air file. To create an AIR debug launch configuration select your Document Class in the Flash Explorer and then open the Run Dialog (Run [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[30,34,35,73,82,88,124,125,127,311],"_links":{"self":[{"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/posts\/2926"}],"collection":[{"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/comments?post=2926"}],"version-history":[{"count":2,"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/posts\/2926\/revisions"}],"predecessor-version":[{"id":5890,"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/posts\/2926\/revisions\/5890"}],"wp:attachment":[{"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/media?parent=2926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/categories?post=2926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdt.powerflasher.com\/blog\/wp-json\/wp\/v2\/tags?post=2926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}