Advertisement
  1. Code
  2. Workflow
Code

Beginner's Guide to Powerflasher's FDT

by
Difficulty:BeginnerLanguages:

Flash Professional isn't the only tool you can use for making Flash apps and games. Earlier in the year we looked at FlashDevelop; now, we'll take a look at FDT 4, a powerful IDE designed specifically for ActionScript, MXML and haXe development. Read on to find out what it can offer you!

FDT's Great Timesaving Features

The difference between FDT and the Flash Professional code editor or other tools is that it offers tons of timesaving features that let you concentrate on the logic of your code, so you don't have to bother with syntax problems like a missing closing bracket or a misspelled function call. Like a spell checker, FDT gives you instant feedback about your code and identifies problems before you even compile the project. Before we install and start working with FDT I'd like to give you a taste of some of its most exciting features.

Code Completion

The most important feature of FDT, that you will probably use most often, is code completion, also called auto completion. You will never have to type in the whole name of a variable or function again. Simply start writing and hit CTRL + Space to bring up the list of proposals. You can change the auto completion behavior to be triggered on every keystroke (like FlashDevelop does) by going to Preferences > FDT > Editor > Code Assist and turning on "Every Key".

Activate auto completion by using the shortcut CTRL + SPACE

Continue typing to narrow down the list of choices. Use the mouse to select a proposal from the list or use the "Up" and "Down" arrow keys followed by pressing "Return". You can also use "camel case auto completion" -- for example, someMovieClip.gap will offer the function gotoAndPlay().

Using camel case autocompletion

Quick Fixes

My favorite feature of FDT is using its Quick Fix functionality. FDT will not only immediately tell you what is wrong in your code, but also gives you the option to fix it automatically by inserting the missing code. If, for example, you call a function that is not yet available, FDT will add an error marker on the left of that line. The yellow light bulb indicates, that there is a Quick Fix available for this problem. Hit CMD/CTRL + 1 and check out the proposal in the Quick Fix popup:

Activating Quick Fix using CMD/CTRL + 1

FDT offers you to create the function sayHello(). Hit "Return" and FDT will automatically insert the function. Use the "Tab" key to cycle through the code statements surrounded by the blue rectangles and change them. Again hit "Return" to finish the Quick Fix procedure.

After insterting the code cycle through the code statements using Tab

This feature is not only great for fixing problems with just a few keystrokes, but will also change your coding workflow. You will start forcing problems to make use of a Quick Fix!

Organize Imports

Using the shortcut CMD/CTRL + SHIFT + O or choosing Source > Organize Imports from the menu will add all missing import statements at the top of the class. You don't have to add any imports manually any more. The nicest thing about FDT's Organize Imports feature is that it will also remove unused imports automatically.

Choose Organzie Imports from the Source Menu or use the shortcut

Color Chooser

I'd like to have a purple label in my Flex app, but what hex color code does purple have? Without having to switch to Flash Pro or Photoshop you can simply use FDT's color picker to choose a color. Put your cursor over the hex code and activate Quick Fix (CMD/CTRL + 1). Choose "Select color" and use the color picker.

Use Quick Fix to activate the color chooser

Code Templates

As a developer you find yourself typing in recurring code snippets over and over again, like a "for loop" for example. In FDT we can simply use code templates for that. Type in fori, use auto completion (CTRL + SPACE) and select "fori - iterate over array". This will insert the code snippet for you. Make changes by using the "Tab" key and press "Return" to finish.

Type in fori and use auto completion to insert a for loop

To browse through the code templates that are shipped with FDT go to Preferences > FDT Editor > Templates. This is the place where you can also create your own templates! Just take a look at the other templates and you will quickly learn how to create them and use the powerful variables to make them even smarter.

Refactoring

FDT has two great refactoring features: Move and Rename. If you want to move a class to another package, you normally need to change the import statements in all classes that use it. Move refactoring in FDT takes care of this automatically. Simply drag and drop the class from one package to another in the Flash Explorer and FDT will take care of the rest.

Drag and drop classes form one package to another

If you want to rename a class, function or variable, simply use the Rename refactoring feature (ALT + SHIFT + R). FDT will change the name everywhere in the whole project.

Use Rename refactoring to rename classes, functions or properties

Code Navigation Features

Navigating through your source code is especially important in large projects. Here are some of the most important shortcuts to navigate:

  • F2 - Show Class in Flash Explorer
  • F3 - Open declaration
  • Alt + (CMD) + Left Key - Jump back in History
  • CMD/CTRL + T - Quick Type Hierarchy
  • CMD/CTRL + O - Quick Outline
  • CMD/CTRL + R - Search for References

The FDT Community

FDT started out as the first professional ActionScript 2 editor in 2004. There's a huge and very active community around FDT, that contributes tutorials, blogs about using the new features that are constantly added, helps out on Twitter and posts feature requests and bug reports. The FDT development team gives back this love to the community by listening to their requests and integrating community tools like Joa Ebert's Apparat or haXe.

To become part of the FDT community check out the Blog and follow FDT on Twitter or Facebook.


Installing FDT 4

Installing FDT is straight forward. Follow these 3 steps to set up your FDT development environment:

  1. Download and install FDT
  2. Download Flex SDKs
  3. Install Debug Flash Player

To install FDT simply go to http://fdt.powerflasher.com and navigate to the download page. Select one of the installers for Windows, Mac or Linux. If you want to try FDT and don't have a license yet, fill out the form above to register for a 30 day trial license. After downloading follow the instructions to complete the installation.

FDT is distributed without any Flex SDK. The Flex SDK is basically a folder that contains compilers, core classes and other tools to compile your Action Script and Flex code to a SWF. You can develop both pure Action Script projects as well as Flex projects using Adobe's Flex SDK. Go to Adobe Open Source and download the SDKs you want to use in FDT. After downloading and unzipping the SDKs go to FDT > Preferences > Installed SDKs and click the "Add" button to add a Flex SDK.

In order to debug your Flash applications using FDT's visual debugger, you need to make sure that the Debug Flash Player is installed on your system. Go to Adobe Flash Player Download:

  • Mac: Download and install Flash Player Plugin content debugger
  • Windows: Download and install Flash Player Active X control content debugger as well as Flash Player Plugin content debugger

Congratulations, you've successfully set up your FDT development environment and can now start coding!


The FDT Workbench

FDT after installation
Click to enlarge
  • Toolbar (top): Find the most important actions like creating new files or compiling your application in the toolbar
  • Flash Explorer (left): This is where you will organize your projects, files and folders
  • Outline (left): A list of properties and functions of the currently opened class
  • Editor (middle): If you open a file, it will be displayed in the editor area
  • Problems (bottom): A list of problems and warnings in your source code

The panels described above are called "Views" in FDT. You can close views, minimize them or rearrange them by simply dragging a view to a different location. If you would like to reset the views to their default positions go to Window > Reset Perspective. To open additional views go to Window > Show View and select the one you are missing. Views are grouped into so called "Perspectives".


Choose Your Workflow

FDT can be integrated into every Flash/Flex development workflow, whether you want to use FDT in combination with Flash Pro, use FDT without any other tool, or use FDT as a code editor for Flash Pro. This chapter describes those three popular workflows which are most commonly used by Flash developers.

Workflow 1: FDT Only

In this workflow we will use FDT as a standalone tool to develop Flash/Flex projects. You don't even have to have Flash Pro or the Adobe Creative Sweet installed. We will just use FDT to write code and compile it to a SWF.

Creating a New Project

Start by right clicking somewhere in the Flash Explorer and select New > New Flash Project. The "Flash Project Wizard" appears.

Selecting a Project Template

This wizard let's you choose from a list of project templates for web, mobile and desktop. We will create a pure Action Script project at this time. Type in the project name "HelloFDT", select Web > AS3 and click on "Finish".

In the Flash Explorer on the left hand side we now see the created project with some files and folders. Double-click the Main.as class in the src folder to open it.

The created project and the Main class

FDT stores some project specific settings in the .settings folder and in the .project file. Because you shouldn't touch those files let's hide them by clicking on the small down arrow in the top right corner of the Flash Explorer and selecting "Filters". Now check the ".*" filter and hit "OK". The .settings folder and the .project file should now be hidden.

The created project and the Main class

Testing and Compiling the Project

Let's add some lines of code before we compile our project:

To compile and debug our simple application, right-click the Main.as class in the Flash Explorer and select Debug As > FDT SWF Application. After the compilation finishes successfully, FDT will launch your application using the "External SWF Viewer". Take a look at the "Console"; you should also see the "Hello FDT" trace statement there. (If you don't see it, make sure you have the Debug Flash Player installed.)

The compiled SWF opened in the External SWF Viewer

Embedding Assets

In order to embed an asset like a JPEG image into our SWF we can use the [Embed] Metadata Tag. First of all create a new package named assets in the src folder and drag an image from the Finder/Explorer to the assets package.

Drag an image to your assets package

Now we can use the following lines of code to embed the JPEG into our SWF and display it on the stage:

We can now use the Debug or Release button in the Toolbar on the top to launch our application. They will always launch the previously launched application. Debugging your application using breakpoints and trace() statements only works if you choose Debug.

Click Debug or Run to launch your application

After compilation has finished you should see your SWF with the embedded image. Congratulations!

Your embedded image

Workflow 2: FDT with Flash Pro Assets

This workflow is ideal if you are working together with a designer, who creates graphics and animations in Flash Pro, while you are adding the logic using ActionScript. In this workflow, we will create an animated MovieClip in Flash Pro and control it using ActionScript in FDT. These are the steps:

  • Setup and prepare the project in FDT
  • Create a new FLA file and an animated MovieClip in Flash Pro
  • Export the FLA as SWC library file
  • Instantiate and control the MovieClip using AS3 in FDT

Setting Up the Project in FDT

Let's get started! First of all we will create a new Flash project in FDT. To do so, please follow the exact same instructions as described in Workflow 1: FDT Only > Creating a New Project. As project name I will use "FDTwithFlashPro" this time.

Creating the FLA and a MovieClip

In this example I will create a very simple key frame animation with a bouncing ball. Launch Flash Pro and create a new Flash File (ActionScript 3). Select Insert > New Symbol from the menu. Enter the name BouncingBall and check the "Export for ActionScript" check box. If you don't see the check box, click on the "Advanced" button.

Creating a new Symbol in Flash Pro

Don't forget to check the "Export for ActionScript" check box, otherwise we will not be able to use this asset later on. Next up, I'll create a simple key frame animation to let the ball bounce. It should look like this. (Basically you can create whatever animation you like in this step; it doesn't have to be a bouncing ball).

Creating a bouncing ball animation

Now it's time to save the FLA. Go to File > Save As and select the libs folder from the previously created FDT project. Choose Assets.fla as filename and hit "Save". To use the animated ball MovieClip within our FDT code project, we need to export the Flash Pro Project as a SWC library file. Let's do this by going to File > Publish Settings and find the "Export SWC" checkbox in the publish dialog. Click "Publish" and Flash Pro will generate the SWC file for you.

Using the MovieClip in FDT

Now let's switch back to FDT. Our project should look like this:

The FDT project with the assets.swc

Notice that if you expand the Assets.swc library, you'll see the BouncingBall MovieClip class included in that library. This is a great feature of FDT, which lets you inspect a SWC library to see which asset classes it contains.

The final step of this workflow is to instantiate the bouncing ball animation and add it to the stage. Open the Main.as class and insert the following lines of code:

That's it! Hit the "Run" button and you should see the bouncing ball on the stage.

Final result of the workflow 2 tutorial

Workflow 3: FDT as Flash Pro's Code Editor

The last workflow I want to show you is using FDT as a code editor for a Flash Pro project. You will write code in FDT but compile your project using Flash Pro. FDT has a great feature to automatically switch to Flash Pro and start compilation with just one click. We'll have a look at this little timesaver as well.

Setting Up the Project in FDT

Again, we will start by creating the project in FDT. Simply go to New > New Flash Project and select Web > Flash Professional from the list of project templates. Set the project name to "FDTforFlashPro" and click "Finish"

Create a new project for Flash Pro

FDT needs to know the location of your Flash Pro installation. Go to Preferences > FDT > Tools > Flash and set the path to your Flash Pro installation by clicking the "Browse" button. Select your copy of Flash Pro and close the preferences window. Next open the Main.as class and add a trace statement to the constructor like trace("Hello Flash Pro"). Now double click the FDTforFlashPro.fla file from the Flash Explorer to open it. Notice, that the Main class is already set in the Properties panel in Flash Pro. You can click on the pencil button to verify that the class really exists.

Properties panel in Flash Pro

The Main class is in place, so we can now launch the project in Flash Pro by selecting Debug > Debug Movie from the menu or by using the shortcut. In the output panel of Flash Pro you should now see the trace output:

Output panel of Flash Pro showing the trace output

Great, now we can switch back and forth between FDT and Flash Pro. Write some lines of code in FDT, add classes and logic and switch to Flash Pro to create the assets and debug the project.

Launching From Within FDT

To enhance this workflow, there's a great feature in FDT, which let's you switch to Flash Pro by just hitting the "Run" button from within FDT to compile and debug the project. In FDT select Run > Run Configurations from the menu.

Run Configurations Menu

In the Run Configurations panel double click the "FDT Flash IDE" entry from the menu on the left. This will create a new empty configuration. Now simply set the project and the FLA file using the "Browse" buttons and select TestMovie. That's it, hitting the "Run" button will switch to Flash Pro and will launch the project! From now on, you can simply hit the "Run" button in the FDT menu bar to launch your project in Flash Pro.

Run Configuration Settings

Next Steps

If you want to learn more about FDT and it's features visit the FDT Docs page. You will find a great number of tutorials, videos, shortcuts, project templates and a lot more there. Happy coding!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.