Launch Configuration Tutorial
From FDT Documentation
(→Creating Multiple Launch Configurations) |
(→Source Files) |
||
(28 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | [[File:001_0006x.png|center]] | |
+ | A core characteristic of FDT is the Launch Configuration. Having a clear understanding of how it works, will enable you to understand how the FDT builds your projects. This is an unique FDT feature that other IDEs can't even touch. | ||
- | |||
- | |||
- | + | = <center>Source Files</center> = | |
+ | [[File:Download_soruce_files.png|center|link=http://github.com/TeamFDT/Examples/blob/master/sample-projects/launcher_demo_finish.zip?raw=true]] | ||
- | = Why Launch Configurations = | + | = <center>Why Launch Configurations</center> = |
Customizable Launch Configurations gives developers a great deal of power and flexibility. While it would be much easier for beginners to have FDT force a particular file structure and naming conventions, as they become more and more familiar with FDT ( or any IDE ) they are eventually going to want to have things work their way. Here are some important concepts to understand when working with Launch Configurations: | Customizable Launch Configurations gives developers a great deal of power and flexibility. While it would be much easier for beginners to have FDT force a particular file structure and naming conventions, as they become more and more familiar with FDT ( or any IDE ) they are eventually going to want to have things work their way. Here are some important concepts to understand when working with Launch Configurations: | ||
Line 16: | Line 16: | ||
That last point is probably the most different when coming from other IDEs. The best way to explain this is to demonstrate it. | That last point is probably the most different when coming from other IDEs. The best way to explain this is to demonstrate it. | ||
- | = Getting Started = | + | = <center>Getting Started</center> = |
+ | |||
+ | Let's begin by downloading the project from the [[Basic AS3 Tutorial]] and then import it. If you're not sure how to import projects see the [[Sharing and Archiving Projects]] tutorial. | ||
+ | |||
+ | While you don't need to import the project to follow along, it will jump start things for us. | ||
- | After importing the project created in the [[Basic AS3 Tutorial]] ( or creating your own ), expand the ''launch'' folder located within the ''.settings'' folder [http://fdt.powerflasher.com/docs/File:07_001.gif]. Here you can see the ''Main.launch'' file that contains launch settings for this project. Now, delete that file ( don't worry we'll make plenty more ) [http://fdt.powerflasher.com/docs/File:07_002.gif]. Make sure no file is open in the Editor ( if the Main.as class is open in the Editor close it ) then click on the ''Run'' button within the menu bar [[Image:Run button.gif]]. | + | After importing the project created in the [[Basic AS3 Tutorial]] ( or creating your own ), expand the ''launch'' folder located within the ''.settings'' folder [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_001.gif]]. Here you can see the ''Main.launch'' file that contains launch settings for this project. Now, delete that file ( don't worry we'll make plenty more ) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_002.gif]]. Make sure no file is open in the Editor ( if the Main.as class is open in the Editor close it ) then click on the ''Run'' button within the menu bar [[Image:Run button.gif]]. |
- | What should happen next is FDT will show an ''Unable To Launch'' dialogue box [http://fdt.powerflasher.com/docs/File:07_003.gif]. | + | What should happen next is FDT will show an ''Unable To Launch'' dialogue box [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_003.gif]]. |
What's going on is, neither FDT nor our project themselves know how to compile a .SWF or .SWC. They rely on a Launch Configuration to tell them what settings to use in order to compile anything. FDT or a particular project are just like a plane and all your code are the passengers. In this scenario, think of the Launch Configurations as the pilot who know where to fly and how to get there. Just like a plane can have multiple pilots, FDT can have multiple launch configurations. | What's going on is, neither FDT nor our project themselves know how to compile a .SWF or .SWC. They rely on a Launch Configuration to tell them what settings to use in order to compile anything. FDT or a particular project are just like a plane and all your code are the passengers. In this scenario, think of the Launch Configurations as the pilot who know where to fly and how to get there. Just like a plane can have multiple pilots, FDT can have multiple launch configurations. | ||
- | == Creating Configurations == | + | == <center>Creating Configurations</center> == |
- | In both the [[Basic AS3 Tutorial]] and the [[Flex / Air Tutorial]], it was demonstrated how FDT can create a Launch Configuration automatically by running the from the Flash Explorer [http://fdt.powerflasher.com/docs/File:07_004.gif] or by running from the Editor [http://fdt.powerflasher.com/docs/File:07_005.gif]. Instead we'll create a configuration completely from scratch. Begin by choosing ''Run Configurations...'' [http://fdt.powerflasher.com/docs/File:07_006.gif]. What will appear is FDT's [[Launch Configurations]] window. Select ''FDT SWF Application'' [http://fdt.powerflasher.com/docs/File:07_007.gif] and click on the ''New launch configuration'' icon at the top [http://fdt.powerflasher.com/docs/File:07_008.gif]. | + | In both the [[Basic AS3 Tutorial]] and the [[Flex / Air Tutorial]], it was demonstrated how FDT can create a Launch Configuration automatically by running the from the Flash Explorer [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_004.gif]] or by running from the Editor [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_005.gif]]. Instead we'll create a configuration completely from scratch. Begin by choosing ''Run Configurations...'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_006.gif]]. What will appear is FDT's [[Launch Configurations]] window. Select ''FDT SWF Application'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_007.gif]] and click on the ''New launch configuration'' icon at the top [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_008.gif]]. |
- | For this example, I didn't have the project selected in the Flash Explorer and FDT didn't automatically fill in the ''Project'' field and gave the configuration a generic name of ''New_configuration'' [http://fdt.powerflasher.com/docs/File:07_009.gif]. | + | For this example, I didn't have the project selected in the Flash Explorer and FDT didn't automatically fill in the ''Project'' field and gave the configuration a generic name of ''New_configuration'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_009.gif]]. |
- | Fill in a name for the configuration, I'll name this one ''launch_1'', and click the ''Browse'' button to choose a project [http://fdt.powerflasher.com/docs/File:07_010.png]. FDT will ask you to choose a project for this configuration, we only have one project open so only one appears, and click ''OK'' [http://fdt.powerflasher.com/docs/File:07_011.gif]. FDT will now warn you that ''You must choose a Main Class!'' - choose one by clicking on the ''Browse...'' button [http://fdt.powerflasher.com/docs/File:07_012.gif]. Just like with choosing a Project before, chose your ''Main'' class here - only one file appears because our project only has one Class in it [http://fdt.powerflasher.com/docs/File:07_013.gif]. Now FDT tells us ''You must choose a swf output file!'' [http://fdt.powerflasher.com/docs/File:07_014.gif]. If you were to click ''Browse...'' this time, FDT will ask you to choose an already existing file. Let's not do this and instead create a new one. Fill in ''bin/launch_1.swf'' in the ''Output'' field. ''bin'' is the name and path of the folder I want to use and ''launch_1.swf'' is the name I want to give the .SWF [http://fdt.powerflasher.com/docs/File:07_015.gif]. | + | Fill in a name for the configuration, I'll name this one ''launch_1'', and click the ''Browse'' button to choose a project [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_010.png]]. FDT will ask you to choose a project for this configuration, we only have one project open so only one appears, and click ''OK'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_011.gif]]. FDT will now warn you that ''You must choose a Main Class!'' - choose one by clicking on the ''Browse...'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_012.gif]]. Just like with choosing a Project before, chose your ''Main'' class here - only one file appears because our project only has one Class in it [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_013.gif]]. Now FDT tells us ''You must choose a swf output file!'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_014.gif]]. If you were to click ''Browse...'' this time, FDT will ask you to choose an already existing file. Let's not do this and instead create a new one. Fill in ''bin/launch_1.swf'' in the ''Output'' field. ''bin'' is the name and path of the folder I want to use and ''launch_1.swf'' is the name I want to give the .SWF [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_015.gif]]. |
- | Finally, press the ''Run'' button to compile our .SWF [http://fdt.powerflasher.com/docs/File:07_017.gif]. | + | Finally, press the ''Run'' button to compile our .SWF [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_017.gif]]. |
- | == Working With Launchers == | + | == <center>Working With Launchers</center> == |
- | After hitting ''Run'', FDT will compile your .SWF. What you'll notice is, you can see the compilation output in the [[Console]] View and see the ''launch_1.swf'' in the ''bin'' folder [http://fdt.powerflasher.com/docs/File:07_018.gif]. What you also probably notice is: | + | After hitting ''Run'', FDT will compile your .SWF. What you'll notice is, you can see the compilation output in the [[Console]] View and see the ''launch_1.swf'' in the ''bin'' folder [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_018.gif]]. What you also probably notice is: |
* FDT didn't show the .SWF. | * FDT didn't show the .SWF. | ||
* FDT didn't save a launch configuration in the ''.settings/launch'' folder. | * FDT didn't save a launch configuration in the ''.settings/launch'' folder. | ||
Line 42: | Line 46: | ||
While this may seem like an error or a hassle to deal with, this is actually a gem of a situation. We need to tell FDT what to do, if anything, after compiling our .SWF. As we'll soon see, we can start to do some really cool stuff. For now, lets get to viewing our .SWF. | While this may seem like an error or a hassle to deal with, this is actually a gem of a situation. We need to tell FDT what to do, if anything, after compiling our .SWF. As we'll soon see, we can start to do some really cool stuff. For now, lets get to viewing our .SWF. | ||
- | Get back to the ''Run Configurations'' window and click on the ''Start'' tab [http://fdt.powerflasher.com/docs/File:07_019.gif]. Check the box next to ''Open URI after compilation'' and click ''Browse'' [http://fdt.powerflasher.com/docs/File:07_020.gif] to choose which .swf to launch after compilation [http://fdt.powerflasher.com/docs/File:07_021.gif]. Next choose what you want FDT to use to view the .swf, lets use the ''External SWF Viewer'', and make sure that the viewer's width and height match your .SWF [http://fdt.powerflasher.com/docs/File:07_022.gif]. When ready, click ''Run'' to launch your .swf [http://fdt.powerflasher.com/docs/File:07_023.gif]. | + | Get back to the ''Run Configurations'' window and click on the ''Start'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_019.gif]]. Check the box next to ''Open URI after compilation'' and click ''Browse'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_020.gif]] to choose which .swf to launch after compilation [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_021.gif]]. Next choose what you want FDT to use to view the .swf, lets use the ''External SWF Viewer'', and make sure that the viewer's width and height match your .SWF [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_022.gif]]. When ready, click ''Run'' to launch your .swf [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_023.gif]]. |
- | == Saving Launch Configurations == | + | == <center>Working With Different Viewers</center> == |
+ | FDT enables you to easily choose different ways of viewing your application. | ||
+ | For web based projects, you can use either: | ||
+ | |||
+ | *Browser | ||
+ | *External SWF Viewer | ||
+ | *Adobe Flash Player | ||
+ | |||
+ | [[File:Choose_viewers.png|600px]] | ||
+ | |||
+ | You can also point to any type of file, e.g. HTML & >SWF. This enables developer to choose a webserver/ HTML page to view content that has their just compiled target SWF embedded. This is handy when the 'Browser' target has been chosen. | ||
+ | |||
+ | Before choosing the Adobe Flash Player as you're viewer, you'll need to set the location of it via FDT's preferences. | ||
+ | |||
+ | [[File:Flash_player_debugger.png|600px]] | ||
+ | |||
+ | == <center>Saving Launch Configurations</center> == | ||
One last thing we need to cover before getting into more advanced topics with launchers, is to learn about saving our configurations. Saving configurations is important when we want to share or archive our projects to use later. If we were to delete our project right now, we wouldn't have our launch configuration to use at a later time or if we hand off the project to someone else. | One last thing we need to cover before getting into more advanced topics with launchers, is to learn about saving our configurations. Saving configurations is important when we want to share or archive our projects to use later. If we were to delete our project right now, we wouldn't have our launch configuration to use at a later time or if we hand off the project to someone else. | ||
- | Saving configurations is straightforward and simple. Begin by once again opening the ''Run Configurations'' window and then choosing the ''Common'' tab [http://fdt.powerflasher.com/docs/File:07_024.gif]. Check the ''Shared file:'' radio button and then select ''Browse...'' [http://fdt.powerflasher.com/docs/File:07_025.gif]. Choose the ''launch'' folder ( you can choose any folder you like ) [http://fdt.powerflasher.com/docs/File:07_026.gif], and run the configuration once again [http://fdt.powerflasher.com/docs/File:07_027.gif]. After the configuration runs, your .swf will render and FDT will have created a launch configuration within the ''launch'' folder. | + | Saving configurations is straightforward and simple. Begin by once again opening the ''Run Configurations'' window and then choosing the ''Common'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_024.gif]]. Check the ''Shared file:'' radio button and then select ''Browse...'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_025.gif]]. Choose the ''launch'' folder ( you can choose any folder you like ) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_026.gif]], and run the configuration once again [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_027.gif]]. After the configuration runs, your .swf will render and FDT will have created a launch configuration within the ''launch'' folder. |
- | == Changing Compiler Options == | + | == <center>Changing Compiler Options</center> == |
There's no doubt that at some point you're going to want to adjust some compiler settings. Some things you may want to change include: | There's no doubt that at some point you're going to want to adjust some compiler settings. Some things you may want to change include: | ||
Line 58: | Line 78: | ||
* Size | * Size | ||
- | We'll do this via the ''Compiler Arguments'' tab [http://fdt.powerflasher.com/docs/File:07_029.gif]. Then select the ''Use launcher specific compiler arguments'' radio button [http://fdt.powerflasher.com/docs/File:07_030.gif]. Then add an argument to change the .SWF's default size to 800x600 [http://fdt.powerflasher.com/docs/File:07_031.gif]: | + | We'll do this via the ''Compiler Arguments'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_029.gif]]. Then select the ''Use launcher specific compiler arguments'' radio button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_030.gif]]. Then add an argument to change the .SWF's default size to 800x600 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_031.gif]]: |
<syntaxhighlight lang="actionscript"> | <syntaxhighlight lang="actionscript"> | ||
Line 65: | Line 85: | ||
- | ''*note: FDT's new | + | ''*note: FDT's new compiling process requires that the ''-default-size'' argument be entered slightly differently than what is documented within the Flex API. Use the above syntax (note the comma: '','' ) as a template to change the width and height. |
- | If you ever need to find out what compiler arguments to use, click on the ''Show compiler documentation'' link on the bottom [http://fdt.powerflasher.com/docs/File:07_032.gif]. FDT will then open up your browser and navigate to the documentation home page [http://fdt.powerflasher.com/docs/File:07_033.gif]. | + | If you ever need to find out what compiler arguments to use, click on the ''Show compiler documentation'' link on the bottom [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_032.gif]]. FDT will then open up your browser and navigate to the documentation home page [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_033.gif]]. |
- | Run your launcher again and see the External SWF View pop up [http://fdt.powerflasher.com/docs/File:07_034.gif]. | + | Run your launcher again and see the External SWF View pop up [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_034.gif]]. |
- | A quick note here, notice how the External SWF Viewer's size is still 550x400. Our .SWF is launching at 800x600 and this will cause some odd scaling issues. To correct this, return to the ''Start'' tab of the ''Run Configurations'' window and adjust the width and height of the External SWF View to match your .SWF's default size [http://fdt.powerflasher.com/docs/File:07_035.gif]. | + | A quick note here, notice how the External SWF Viewer's size is still 550x400. Our .SWF is launching at 800x600 and this will cause some odd scaling issues. To correct this, return to the ''Start'' tab of the ''Run Configurations'' window and adjust the width and height of the External SWF View to match your .SWF's default size [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_035.gif]]. |
- | == Creating Multiple Launch Configurations == | + | == <center>Creating Multiple Launch Configurations</center> == |
- | If you remember earlier, we discussed how FDT's launcher setup doesn't force developers to have their project compile and launch in any specific way. Let's demonstrate this by simply creating another launch configuration that uses the same source code, but outputs a different .SWF name. Return to the ''Run Configurations'' window, select the ''launch_1'' configuration and click the duplicate icon on the top [http://fdt.powerflasher.com/docs/File:07_036.gif]. Rename it to ''launch_2'' and change the ''Output'' field to make a new .swf named ''launch_2.swf'' [http://fdt.powerflasher.com/docs/File:07_037.gif]. | + | If you remember earlier, we discussed how FDT's launcher setup doesn't force developers to have their project compile and launch in any specific way. Let's demonstrate this by simply creating another launch configuration that uses the same source code, but outputs a different .SWF name. Return to the ''Run Configurations'' window, select the ''launch_1'' configuration and click the duplicate icon on the top [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_036.gif]]. Rename it to ''launch_2'' and change the ''Output'' field to make a new .swf named ''launch_2.swf'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_037.gif]]. |
Notice how this is using the same ''Main.as'' class as before, but we are creating a different .SWF. Run this configuration and notice how FDT will create a new launch configuration for us and save it within the ''launch'' folder and create a new ''launch_2.swf'' for us. | Notice how this is using the same ''Main.as'' class as before, but we are creating a different .SWF. Run this configuration and notice how FDT will create a new launch configuration for us and save it within the ''launch'' folder and create a new ''launch_2.swf'' for us. | ||
- | == Using The Launcher Chain == | + | == <center>Using The Launcher Chain</center> == |
+ | [[File:Launcher_chain.png]] | ||
- | Now we are going to put all of this together and demonstrate a clever way of using multiple launch configurations, compiler options, and the new [[Launcher Chain | + | Now we are going to put all of this together and demonstrate a clever way of using multiple launch configurations, compiler options, and the new [[Launcher Chain]]. |
- | To get started, I'm going to clean things up a bit and delete these launch configurations and output .SWFs [http://fdt.powerflasher.com/docs/File:07_038.gif]. Next | + | To get started, I'm going to clean things up a bit and delete these launch configurations and output .SWFs [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_038.gif]]. Next I'll create a new class, ''Ball'', and copy the code from ''Main.as''. |
''Main.as'' | ''Main.as'' | ||
Line 115: | Line 136: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
- | Next, lets modify the source for ''Ball.as'' to include some compilation variables [http://fdt.powerflasher.com/docs/File:07_040.gif]: | + | Next, lets modify the source for ''Ball.as'' to include some compilation variables [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_040.gif]]: |
''Ball.as'' | ''Ball.as'' | ||
Line 144: | Line 165: | ||
- | Next use a [[Quickfix]] to generate | + | Next use a [[Quickfix]] to generate the "CONFIG" namespace (CMD+1) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_041.png]]. Then create a launch configuration named ''Red_Ball'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_042.gif]] that uses the ''Ball.as'' class and outputs a ''Red_Ball.swf''. Next, jump to the ''Compiler Arguments'' tab and add these arguments to the list [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_043.gif]]: |
<syntaxhighlight lang="actionscript"> | <syntaxhighlight lang="actionscript"> | ||
Line 152: | Line 173: | ||
- | and turn off ''Open URI after compilation'' within the ''Start'' tab [http://fdt.powerflasher.com/docs/File:07_047.gif]. | + | and turn off ''Open URI after compilation'' within the ''Start'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_047.gif]]. |
- | Now, create a copy of this configuration [http://fdt.powerflasher.com/docs/File:07_044.gif], call it ''Blue_Ball'' and have it save to .swf named ''Blue_Ball.swf'' [http://fdt.powerflasher.com/docs/File:07_045.gif]. Before closing this configuration, update the ''Compiler Arguments'' so it's a little different than the ''Red_Ball'' configuration [http://fdt.powerflasher.com/docs/File:07_046.gif]: | + | Now, create a copy of this configuration [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_044.gif]], call it ''Blue_Ball'' and have it save to a .swf named ''Blue_Ball.swf'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_045.gif]]. Before closing this configuration, update the ''Compiler Arguments'' so it's a little different than the ''Red_Ball'' configuration [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_046.gif]]: |
Line 163: | Line 184: | ||
- | and again make sure you turn off ''Open URI after compilation'' within the ''Start'' tab [http://fdt.powerflasher.com/docs/File:07_047.gif]. | + | and again make sure you turn off ''Open URI after compilation'' within the ''Start'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_047.gif]]. |
- | Now, back to our ''Main.as'' class, update the code with the following [http://fdt.powerflasher.com/docs/File:07_048.gif]: | + | Now, back to our ''Main.as'' class, update the code with the following [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_048.gif]]: |
Line 192: | Line 213: | ||
- | Lastly, create a new configuration to compile our ''Main.as'' class[http://fdt.powerflasher.com/docs/File:07_049.gif]. Then jump over the the ''Launcher Chain'' tab [http://fdt.powerflasher.com/docs/File:07_049.gif], click the ''Add'' button and add the two other launch configurations [http://fdt.powerflasher.com/docs/File:07_051.gif]. Then reorder the chain so our other two configurations will compile before our ''Main'' launch configuration executes [http://fdt.powerflasher.com/docs/File:07_052.gif]. | + | Lastly, create a new configuration to compile our ''Main.as'' class [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_049.gif]]. Then jump over the the ''Launcher Chain'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_049.gif]], click the ''Add'' button and add the two other launch configurations [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_051.gif]]. Then reorder the chain so our other two configurations will compile before our ''Main'' launch configuration executes [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_052.gif]]. |
Before hitting ''Run'', lets take a step back and think about what is going on: | Before hitting ''Run'', lets take a step back and think about what is going on: | ||
Line 201: | Line 222: | ||
* The third launch configuration includes a custom ''Launcher Chain'' that will make sure the other two launch configurations (''Blue_Ball'' and ''Red_Ball'') will run first. | * The third launch configuration includes a custom ''Launcher Chain'' that will make sure the other two launch configurations (''Blue_Ball'' and ''Red_Ball'') will run first. | ||
- | Whew. It's a lot but lets hit ''Run'' and see what happens [http://fdt.powerflasher.com/docs/File:07_053.gif]. What we see here is: | + | Whew. It's a lot but lets hit ''Run'' and see what happens [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:07_053.gif]]. What we see here is: |
* FDT compiled two .SWFs for us, and didn't open them up (because we disabled ''launch URI...'' ) - applying specific compiler arguments to each. | * FDT compiled two .SWFs for us, and didn't open them up (because we disabled ''launch URI...'' ) - applying specific compiler arguments to each. | ||
* FDT then compiled our ''Main.swf'' which in turn loaded in the two .SWFs FDT created for us. | * FDT then compiled our ''Main.swf'' which in turn loaded in the two .SWFs FDT created for us. | ||
- | + | == <center>Add and use installed Web Browsers</center> == | |
+ | |||
+ | Also see this tutorial on [http://www.funky-monkey.nl/blog/2012/01/02/adding-an-webbrowser-to-fdt-eclipse-on-mac-osx/ Adding an webbrowser to FDT / Eclipse on Mac OSX]. | ||
+ | |||
+ | In FDT you can add and use all Web Browsers which are installed on your Computer to view your compiled .SWF files. You have also the choice to use FDT's internal Web Browser. | ||
+ | To add a new Web Browser, open the Preferences Dialog by clicking Menu ''FDT 4'' and then ''Preferences''. Expand tree ''General'' and select ''Web Browser''.[[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:Preferences.png]] | ||
+ | Click button ''New'' to launch ''Add External Web Browser'' dialog. To add Firefox Browser enter the Browser name into ''Name'' field as well as the ''Location'' and the ''Parameters'' to launch[[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:Firefox.png]]. Click button ''OK'' to apply the changes. You can do the same with Safari[[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:Safari.png]] and other Web Browsers. | ||
+ | |||
+ | To use the new added Web Browser as viewer, open ''Preference'' dialog, expand tree ''General'' and select ''Web Browser''. Click the radio button ''Use external web browser'' and check eg. ''Firefox'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:SelExtWebBrowser.png]]. Close the dialog by clicking button ''OK''. | ||
+ | To get the new selected Web Browser used to display your .SWF file you need to change the Viewer configuration, too. Launch ''Run Configuration'' dialog by clicking menu ''Run'' and select ''Run Configurations…'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:RunConfiguration.png]]. Select the ''Start'' tab on the right side and select ''Browser'' in the drop down menu of the ''Viewer configuration'' area[[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:SelBrowConf.png]]. Click button ''Apply'' and ''Run'' to compile the project and display the .SWF file with the just configured Web Browser. | ||
+ | |||
+ | === <center>Specific workaround to use Google Chrome</center> === | ||
+ | |||
+ | Due to an issue in Eclipse you can't add Google's Chrome Browser like the other ones. Refer to [http://stackoverflow.com/questions/3304854/is-there-a-way-to-add-google-chrome-as-an-external-web-browser-in-flash-builder-s] and [https://bugs.eclipse.org/bugs/show_bug.cgi?id=297273] for more information. | ||
+ | |||
+ | Create an executable script: | ||
+ | |||
+ | ''#!/bin/sh'' | ||
+ | |||
+ | ''open -a 'Google Chrome' $1 &'' | ||
+ | |||
+ | and locate this into | ||
+ | |||
+ | ''/usr/bin'' | ||
+ | |||
+ | Open the Preferences Dialog by clicking Menu ''FDT 4'' and then ''Preferences''. Expand tree ''General'' and select ''Web Browser''.[[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:Preferences.png]] | ||
+ | |||
+ | Click button ''New'' to launch ''Add External Web Browser'' dialog. To add Google Chrome Browser enter the Browser name into ''Name'' field as well as the ''Location'' and the ''Parameters'' to launch [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:GoogleChrome.png]]. Click button ''OK'' to apply the changes. | ||
+ | |||
+ | = <center>Wrap Up</center>= | ||
+ | As you can see, there's a lot of potential here within FDT's launcher, and launcher chain. Feel free to experiment and let us know what you do with it! |
Latest revision as of 12:11, 2 June 2012
A core characteristic of FDT is the Launch Configuration. Having a clear understanding of how it works, will enable you to understand how the FDT builds your projects. This is an unique FDT feature that other IDEs can't even touch.
Contents
|
Source Files
Why Launch Configurations
Customizable Launch Configurations gives developers a great deal of power and flexibility. While it would be much easier for beginners to have FDT force a particular file structure and naming conventions, as they become more and more familiar with FDT ( or any IDE ) they are eventually going to want to have things work their way. Here are some important concepts to understand when working with Launch Configurations:
- Developers can set ANY class to act the Main or Document class of a project. As long as the Class exists within any source folder, it can be set as the Class to build your application (if it's a class that doesn't inherit from Sprite, FDT will throw a compile error).
- You can easily change the name of the output .SWF to anything you want without having to alter any compiler arguments yourself.
- A project does not itself contain launch or compile settings; instead, a project has one or more launch configurations (saved as files in your .settings folder) which contain the settings FDT will use to compile your .SWFs.
That last point is probably the most different when coming from other IDEs. The best way to explain this is to demonstrate it.
Getting Started
Let's begin by downloading the project from the Basic AS3 Tutorial and then import it. If you're not sure how to import projects see the Sharing and Archiving Projects tutorial.
While you don't need to import the project to follow along, it will jump start things for us.
After importing the project created in the Basic AS3 Tutorial ( or creating your own ), expand the launch folder located within the .settings folder . Here you can see the Main.launch file that contains launch settings for this project. Now, delete that file ( don't worry we'll make plenty more ) . Make sure no file is open in the Editor ( if the Main.as class is open in the Editor close it ) then click on the Run button within the menu bar .
What should happen next is FDT will show an Unable To Launch dialogue box .
What's going on is, neither FDT nor our project themselves know how to compile a .SWF or .SWC. They rely on a Launch Configuration to tell them what settings to use in order to compile anything. FDT or a particular project are just like a plane and all your code are the passengers. In this scenario, think of the Launch Configurations as the pilot who know where to fly and how to get there. Just like a plane can have multiple pilots, FDT can have multiple launch configurations.
Creating Configurations
In both the Basic AS3 Tutorial and the Flex / Air Tutorial, it was demonstrated how FDT can create a Launch Configuration automatically by running the from the Flash Explorer or by running from the Editor . Instead we'll create a configuration completely from scratch. Begin by choosing Run Configurations... . What will appear is FDT's Launch Configurations window. Select FDT SWF Application and click on the New launch configuration icon at the top .
For this example, I didn't have the project selected in the Flash Explorer and FDT didn't automatically fill in the Project field and gave the configuration a generic name of New_configuration .
Fill in a name for the configuration, I'll name this one launch_1, and click the Browse button to choose a project . FDT will ask you to choose a project for this configuration, we only have one project open so only one appears, and click OK . FDT will now warn you that You must choose a Main Class! - choose one by clicking on the Browse... button . Just like with choosing a Project before, chose your Main class here - only one file appears because our project only has one Class in it . Now FDT tells us You must choose a swf output file! . If you were to click Browse... this time, FDT will ask you to choose an already existing file. Let's not do this and instead create a new one. Fill in bin/launch_1.swf in the Output field. bin is the name and path of the folder I want to use and launch_1.swf is the name I want to give the .SWF .
Finally, press the Run button to compile our .SWF .
Working With Launchers
After hitting Run, FDT will compile your .SWF. What you'll notice is, you can see the compilation output in the Console View and see the launch_1.swf in the bin folder . What you also probably notice is:
- FDT didn't show the .SWF.
- FDT didn't save a launch configuration in the .settings/launch folder.
While this may seem like an error or a hassle to deal with, this is actually a gem of a situation. We need to tell FDT what to do, if anything, after compiling our .SWF. As we'll soon see, we can start to do some really cool stuff. For now, lets get to viewing our .SWF.
Get back to the Run Configurations window and click on the Start tab . Check the box next to Open URI after compilation and click Browse to choose which .swf to launch after compilation . Next choose what you want FDT to use to view the .swf, lets use the External SWF Viewer, and make sure that the viewer's width and height match your .SWF . When ready, click Run to launch your .swf .
Working With Different Viewers
FDT enables you to easily choose different ways of viewing your application. For web based projects, you can use either:
- Browser
- External SWF Viewer
- Adobe Flash Player
You can also point to any type of file, e.g. HTML & >SWF. This enables developer to choose a webserver/ HTML page to view content that has their just compiled target SWF embedded. This is handy when the 'Browser' target has been chosen.
Before choosing the Adobe Flash Player as you're viewer, you'll need to set the location of it via FDT's preferences.
Saving Launch Configurations
One last thing we need to cover before getting into more advanced topics with launchers, is to learn about saving our configurations. Saving configurations is important when we want to share or archive our projects to use later. If we were to delete our project right now, we wouldn't have our launch configuration to use at a later time or if we hand off the project to someone else.
Saving configurations is straightforward and simple. Begin by once again opening the Run Configurations window and then choosing the Common tab . Check the Shared file: radio button and then select Browse... . Choose the launch folder ( you can choose any folder you like ) , and run the configuration once again . After the configuration runs, your .swf will render and FDT will have created a launch configuration within the launch folder.
Changing Compiler Options
There's no doubt that at some point you're going to want to adjust some compiler settings. Some things you may want to change include:
- Background color
- Frame rate
- Size
We'll do this via the Compiler Arguments tab . Then select the Use launcher specific compiler arguments radio button . Then add an argument to change the .SWF's default size to 800x600 :
-default-size=800,600
*note: FDT's new compiling process requires that the -default-size argument be entered slightly differently than what is documented within the Flex API. Use the above syntax (note the comma: , ) as a template to change the width and height.
If you ever need to find out what compiler arguments to use, click on the Show compiler documentation link on the bottom . FDT will then open up your browser and navigate to the documentation home page .
Run your launcher again and see the External SWF View pop up .
A quick note here, notice how the External SWF Viewer's size is still 550x400. Our .SWF is launching at 800x600 and this will cause some odd scaling issues. To correct this, return to the Start tab of the Run Configurations window and adjust the width and height of the External SWF View to match your .SWF's default size .
Creating Multiple Launch Configurations
If you remember earlier, we discussed how FDT's launcher setup doesn't force developers to have their project compile and launch in any specific way. Let's demonstrate this by simply creating another launch configuration that uses the same source code, but outputs a different .SWF name. Return to the Run Configurations window, select the launch_1 configuration and click the duplicate icon on the top . Rename it to launch_2 and change the Output field to make a new .swf named launch_2.swf .
Notice how this is using the same Main.as class as before, but we are creating a different .SWF. Run this configuration and notice how FDT will create a new launch configuration for us and save it within the launch folder and create a new launch_2.swf for us.
Using The Launcher Chain
Now we are going to put all of this together and demonstrate a clever way of using multiple launch configurations, compiler options, and the new Launcher Chain.
To get started, I'm going to clean things up a bit and delete these launch configurations and output .SWFs . Next I'll create a new class, Ball, and copy the code from Main.as.
Main.as
package { import flash.display.Sprite; public class Main extends Sprite { public function Main() { } } }
Ball.as
package { import flash.display.Shape; import flash.display.Sprite; public class Ball extends Sprite { public function Ball() { var circle : Shape = new Shape(); circle.graphics.beginFill(0xff0000); circle.graphics.drawCircle(150, 150, 100); addChild(circle); } } }
Next, lets modify the source for Ball.as to include some compilation variables :
Ball.as
package { import flash.display.Shape; import flash.display.Sprite; public class Ball extends Sprite { public function Ball() { var circle : Shape = new Shape(); CONFIG::RED{ circle.graphics.beginFill(0xff0000); } CONFIG::BLUE{ circle.graphics.beginFill(0x0000ff); } circle.graphics.drawCircle(150, 150, 100); addChild(circle); } } }
Next use a Quickfix to generate the "CONFIG" namespace (CMD+1) . Then create a launch configuration named Red_Ball that uses the Ball.as class and outputs a Red_Ball.swf. Next, jump to the Compiler Arguments tab and add these arguments to the list :
-define=CONFIG::RED,true -define=CONFIG::BLUE,false
and turn off Open URI after compilation within the Start tab .
Now, create a copy of this configuration , call it Blue_Ball and have it save to a .swf named Blue_Ball.swf . Before closing this configuration, update the Compiler Arguments so it's a little different than the Red_Ball configuration :
-define=CONFIG::RED,false -define=CONFIG::BLUE,true
and again make sure you turn off Open URI after compilation within the Start tab .
Now, back to our Main.as class, update the code with the following :
package { import flash.net.URLRequest; import flash.display.Loader; import flash.display.Sprite; public class Main extends Sprite { public function Main() { var red_loader : Loader = new Loader(); var blue_loader : Loader = new Loader(); red_loader.load(new URLRequest('Red_Ball.swf')); blue_loader.load(new URLRequest('Blue_Ball.swf')); blue_loader.x = 200; addChild(red_loader); addChild(blue_loader); } } }
Lastly, create a new configuration to compile our Main.as class . Then jump over the the Launcher Chain tab , click the Add button and add the two other launch configurations . Then reorder the chain so our other two configurations will compile before our Main launch configuration executes .
Before hitting Run, lets take a step back and think about what is going on:
- We have one Ball.as class that draws a ball.
- There are two different launch configurations that will each use the same Ball.as class but apply different compiler options and output options to create two different .SWFs.
- A third launch configuration was created to compile our Main.as class which will load two other .SWFs ( which don't exist yet ).
- The third launch configuration includes a custom Launcher Chain that will make sure the other two launch configurations (Blue_Ball and Red_Ball) will run first.
Whew. It's a lot but lets hit Run and see what happens . What we see here is:
- FDT compiled two .SWFs for us, and didn't open them up (because we disabled launch URI... ) - applying specific compiler arguments to each.
- FDT then compiled our Main.swf which in turn loaded in the two .SWFs FDT created for us.
Add and use installed Web Browsers
Also see this tutorial on Adding an webbrowser to FDT / Eclipse on Mac OSX.
In FDT you can add and use all Web Browsers which are installed on your Computer to view your compiled .SWF files. You have also the choice to use FDT's internal Web Browser. To add a new Web Browser, open the Preferences Dialog by clicking Menu FDT 4 and then Preferences. Expand tree General and select Web Browser. Click button New to launch Add External Web Browser dialog. To add Firefox Browser enter the Browser name into Name field as well as the Location and the Parameters to launch. Click button OK to apply the changes. You can do the same with Safari and other Web Browsers.
To use the new added Web Browser as viewer, open Preference dialog, expand tree General and select Web Browser. Click the radio button Use external web browser and check eg. Firefox . Close the dialog by clicking button OK. To get the new selected Web Browser used to display your .SWF file you need to change the Viewer configuration, too. Launch Run Configuration dialog by clicking menu Run and select Run Configurations… . Select the Start tab on the right side and select Browser in the drop down menu of the Viewer configuration area. Click button Apply and Run to compile the project and display the .SWF file with the just configured Web Browser.
Specific workaround to use Google Chrome
Due to an issue in Eclipse you can't add Google's Chrome Browser like the other ones. Refer to [1] and [2] for more information.
Create an executable script:
#!/bin/sh
open -a 'Google Chrome' $1 &
and locate this into
/usr/bin
Open the Preferences Dialog by clicking Menu FDT 4 and then Preferences. Expand tree General and select Web Browser.
Click button New to launch Add External Web Browser dialog. To add Google Chrome Browser enter the Browser name into Name field as well as the Location and the Parameters to launch . Click button OK to apply the changes.
Wrap Up
As you can see, there's a lot of potential here within FDT's launcher, and launcher chain. Feel free to experiment and let us know what you do with it!