Amethyst Tutorials

Back to -Tutorials -Amethyst Tutorials

A Brief Guide To Amethyst

First steps with Flash, Flex and AIR in Visual Studio

Amethyst is SapphireSteel Software’s IDE for developing and debugging Flash Platform programs.

Amethyst will be released in two editions: Amethyst PE (Personal Edition) will be free. Amethyst Professional will be a commercial product. This guide refers to the beta of Amethyst Professional.

To obtain a copy of the beta (which will remain usable for several months) go to The Amethyst Download Page.

NOTE: Some features and screenshots in this article may change as the software continues to be developed.

To Start A New Project

- Select File, New Project
- In the New Project dialog, select Flex Application to create a Flex (browser-based) project or AIR Application to create an AIR (desktop) project
- Optionally enter a Name and Location (directory) for your project
- Click OK
- Your new project will be created and its files shown in the Solution Explorer.

An empty ‘main file’ comprising some MXML formatting code and a ‘CDATA’ script area will be loaded into the editor.

- New Project Options

If Create Directory For Solution is checked, the Solution (.sln) file will be placed in your selected directory while the Project file (.amproj) will be placed in a subdirectory beneath this. Your Flex source directory (\src by default) will be created beneath the Project directory.

For example, let’s you choose the Flex 3 Application template then enter the project Name ‘FlexApplication1’, the Location ‘C:\AmethystProjects’, Solution = ‘Create new Solution’, Solution Name = ‘MyFlexProjects’ and Create directory for solution = checked, you will create these directories:

C:\AmethystProjects\MyFlexProjects
  ... this contains the solution file: MyFlexProjects.sln
C:\AmethystProjects\MyFlexProjects\FlexApplication1
  ...this contains the project file:FlexApplication1.amproj
C:\AmethystProjects\MyFlexProjects\FlexApplication1\src
  ...this contains FlexApplication1.mxml

If you leave ‘Create directory for solution’ unchecked, the Solution Name field will be greyed out. Your solution will then have this structure:

C:\AmethystProjects\FlexApplication1
   ... this contains the solution file: FlexApplication1.sln and the project file: FlexApplication1.amproj
C:\AmethystProjects\FlexApplication1\src
  ...this contains FlexApplication1.mxml

If you already have a solution open, you may optionally select Add To Solution. This will add the new project to the existing solution (so that multiple project nodes will appear in the Solution Explorer).

If you are using Visual Studio Team System you may check off Add To Source Control to add the project to the source control system. It may then be checked in and out using the normal commands available from the right-click menu in the Solution Explorer.

To Import An Existing Flex Project

We have a separate tutorial explaining how to import existing Flex (or Flex Builder) projects to new locations and how to convert projects in their original locations:

- Converting and Importing Flex Projects For Amethyst

The Amethyst Designer

Amethyst Professional includes a fully integrated drag and drop visual design environment. This lets you:

- Drag components from the Toolbox
- Move and resize controls using the mouse or keyboard
- Align controls to grid or interactive alignment bars
- Auto align or resize selected controls using the Amethyst Layout toolbar
- Set control properties in the Property panel
- Create event-handlers using the Events panel

You can switch between the Code Editor and the Amethyst Designer using the Code and Design buttons at the bottom of the Editing window. The Amethyst Designer has many more capabilities which are more fully explained in A Separate Tutorial.

Running A Project

- First Build (compile) your project by selecting Build, Build Solution (or use the default keystroke, F6). The Output window (available from the View menu) will show build progress in its Build page (you may select a page in the Output window’s drop-down list).

- If any syntax errors are found these will be shown in the Error List (if this is not visible, select it from the View menu). Double-click an error item to go to the error in the source code. Fix any errors then Build again.
- To Run an application (without debugging), press CTRL+F5. A Flex application will launch into a web browser. An AIR application will launch into the AIR runner. To debug an application, press F5. You may also Run or Debug programs by selecting items from the Debug menu.

Using The Solution Explorer

- To add a new file to your project...

- Right-click a directory node in the Solution Explorer and select Add, New Item.
- From the Code node of the New Item dialog you may select various file types such as MXML file, ActionScript file or ActionScript class. From other nodes in the dialog, you may also add other files types such as CSS Stylesheets, HTML pages, Text files and so on. You may name the class and then click Add. The file will be added to the selected directory and may contain some code depending on which type of file was added.

Tip: You can toggle the icon sizes displayed in the Add New Item dialog by clicking the buttons at the top right-hand corner.

- To add an existing file to your project...
- Right-click a directory node in the Solution Explorer and select Add, Existing Item. Browse to the file on disk and then click Add.

You may add directories to a project in a similar way. You may also right-click the Solution Explorer and ‘Exclude’ directories and folders from being displayed. To add excluded directories to the Solution Explorer, select Amethyst, Synchronize or click the ‘Synchronize’ button at the top of the Solution Explorer. You can also rename items in the Solution Explorer (press F2) and open a command prompt in a selected directory (right-click a folder and select ‘Command Prompt’).

Exploring The Code Editor

The code editor colours and collapses both ActionScript and MXML code. It even collapses ActionScript code embedded into an MXML file.

Code collapsing is done on a broad range of ActionScript language constructs including package, class, function, if..else, for, switch and try..catch.

Code Colouring is done on numerous ActionScript and MXML types and keywords. For information on configuring colours, see Setting General Options below.

Code Formatting is built in. Select Edit, Advanced, Format Document to reformat code based on any default or custom formatting options (see Setting General Options below), or press the associated hot-key (the default is CTRL+E, D).

Other editing features include:
- Automatic bracket highlighting
- Bracket matching (press CTRL+] to move between matching brackets)
- Multi-level undo/redo
- Commenting and code indenting
- Place Bookmarks and navigate between them

The above features can be selected by clicking buttons on the Text Editor Toolbar. If this is not visible, enable it from the Tools, Customize dialog. Hover your mouse over each button to view a Tooltip hint describing its function.

Refactoring

There are extensive refactoring options to rename classes and variables, move classes between packages and more. Refer to the articles on refactoring for more information.

IntelliSense

IntelliSense features include automatic code completion lists, auto-expanding snippets, Navigation bars and parameter tooltips.

Debugging

The Amethyst ’Cylon’ debugger lets you put breakpoints on your code, step into/out of/over, drag and drop variables into the Watch window, view and navigate the Call Stack and ’drill down’ into objects to expand them in the Visual Studio debug windows or right inside the code editor.

Setting General Options

General options may be set for your Amethyst projects. Note that these options apply to all new projects but some options may be overridden by properties explicitly specified for the currently loaded project (see Setting Project Properties below).

- Customizing the Fonts and Colours

Amethyst provides a huge range of options for colour coding your ActionScript and MXML code. There are six standard font colours provided for all languages in Visual Studio (Strings, Comments, Numbers, Keywords, Identifiers and Plain Text) plus a range of other ’system-wide’ options such as Selected Text, Inactive Selected Text, Indicator Margin, Bookmark, Breakpoint and so on. In addition, Amethyst provides 6 MXML-specific colours and 63 ActionScript-specific colours.

Amethyst allows you to set specific colours for individual ActionScript keywords such as ‘class’, ‘public’, ‘private’, ‘static’ and ‘return’ as well as XML literals and MXML elements. To customize colours, select Tools, Options, Environment, Fonts and Colors. Make sure ‘Text Editor’ is selected in the first drop-down list. The ActionScript-specific colours all begin with the name ‘ActionScript’ and the MXML-specific colours begin ‘MXML’.

- Customizing Code Formatting

Extensive ActionScript code-formatting may be defined in multiple pages of options to control auto-formatting (for example, of a code block after the final } is entered), indentation, newlines and spacing. These options will be applied when auto-reformatting your source code (see Exploring The Code Editor, above). To set these options, load Tools, Options, Text Editor, ActionScript.

The Options dialog also allows you to specify Tab sizes, display of line numbers in the editor margin and the type of auto-indenting (Tabs):

- None: when selected, no auto-indenting of code will be applied
- Block causes code on a new line to align with the code on the line above
- Smart indents according to syntax (so it may indent or outdent code according to the syntax of the block of which that code forms a part).

For more information refer to the Tutorial: ActionScript Automatic Code Formatting

Project Properties and Build Configurations

Often it is useful to have multiple alternative build configurations - one, say, to configure your project for debugging and another to configure it for release. Amethyst uses the Visual Studio MSBuild system to provide the ability to create different Build configurations and switch instantly between them by selecting the configuration name from the Standard toolbar.

To create a Build Configuration, load the Configuration Manager from the Build menu. You may create a new configuration or edit and existing configuration using items in the ‘Active solution configuration’ combo box.

To define the parameters of a configuration, load Properties panels from the Project menu. This gives you multiple tabbed pages of project properties. Many of these pages provide properties which are ‘build-specific’ so they will be applied only when the Build name shown in the Configuration combo on the property page is selected in the Visual Studio toolbar. Note that the Configuration combo is greyed out on some property pages since these options will be applied to all build configurations.


Solving Problems

- Launch Errors...

If you see an error message stating that the AIR launcher cannot be found this indicates either that the Flex Framework and AIR runtime are not installed (in which case you need to install them - see the Amethyst Setup Guide ) or that the path to the AIR launcher or Flex SDK is incorrect.

Default paths can be set for all future projects (but not the currently loaded project), in Tools, Options, Projects, Amethyst. Paths can be set for the currently loaded project in Project, Properties, General. The relevant items are:

  • Component Compiler
  • Flex Source directory
  • MXML Compiler
Bookmark and Share   Keywords:  Amethyst
© SapphireSteel Software 2014