Amethyst Tutorials

Back to -Tutorials -Amethyst Tutorials

Flash Movies in Visual Studio Projects

Amethyst lets you program Flash movie clips in Flash/ActionScript or Flex

We’ve written before about integrating Amethyst with the Adobe Flash IDE so that Flash and Visual Studio developers can share the same codebase in order to use Amethyst’s advanced debugging and code editing. But you don’t have to use the Flash IDE. Amethyst can also create Flash applications (or ’movies’) by itself.

A typical scenario would be one in which an ActionScript developer has a number of pre-made MovieClips (either published by the Flash IDE or by some other application capable of rendering Flash). The developer wants to use these clips as ‘resources’ - that is, as objects that can be loaded up and programmed as required. This is pretty simple to do in Amethyst. You can just embed the MovieClips as named assets into an ActionScript project and start coding.

Let me give you a very simple example. This will be a very basic (and, I have to confess, not very entertaining!) ‘game’ using a couple of movie clips. Each clip contains a shape which can be clicked in order to change its colour. The colour-change is done simply by moving to the next frame in the clip in response to each click.

Here I have decided to create a Flex 3 project (but Flex 4 works just as well)...

A Flex project gives me the option of compiling either with or without the Flex framework. If you don’t plan to use Flex at all, you could start an ActionScript project instead. The reason I have selected Flex is because I want to show you how simple it is to use MovieClips in both types of project: ActionScript projects (written entirely in ‘.as’ files in which the main class may extend MovieClip or Sprite) and Flex projects (with an Application defined in an MXML file).

Before going any further, let me explain how I created my MovieClips. To keep this easy to follow, I’ve made these clips as simple as can be. In the Adobe Flash IDE I’ve created two movie clips (called BallClip and RectangleClip), each of which has three frames. In the Flash IDE Library panel I selected each clip, popped up its properties dialog and set ‘Export for ActionScript’ to true. Then I published (compiled and saved) to an SWF file called shape-assets.swf. This file now contains my two MovieClips as named classes.

Now I copy this SWF into the \src\assets folder beneath my Amethyst project.

A Flash Movie

I create an ActionScript file, and I embed each of the MovieClips as Classes from the SWF, like this (here the name of the original symbol is shown in the ‘Embed’ directive and the name I will use in ActionScript is defined in the variable declaration that follows it):

[Embed(source = "assets/shape-assets.swf", symbol = "BallClip")]
private var Ball:Class;
       
[Embed(source = "assets/shape-assets.swf", symbol = "RectangleClip")]
private var Oblong:Class;

I define two MovieClip object variables:

private var ballclip : MovieClip;    
private var rectclip : MovieClip;

And when I want to create objects, I do so by calling the appropriate class constructor, using the Class variable names which I defined after importing each of the two clips:

ballclip = new Ball();
rectclip = new Oblong( );

The rest is pretty straightforward. I add the clips as children of my application and give them MouseClick event-handlers. The event handler (onClick) uses the event ’target’ property to determine which Clip was clicked and it moves to the next frame of that clip with each click. It moves back to frame 1 when all the frames have been displayed. This is pretty simple stuff, of course, but exactly the same techniques could be used when importing quite complex MovieClips and animating them sequentially or displaying specific clips in response to user interaction. Anyway, here’s the full code:

Press CTRL-F5 to run or F5 to debug this Flash program. When debugging you will have access to all the advanced features of the Amethyst debugger...

And you can interact with the program in the Flash Player...

A Flex Application

Using MovieClips in Flex is only slightly more problematic. It turns out that most Flex components cannot accept MovieClips as children. Luckily, the common ancestor of Flex components, UIComponent, can. So I’ve just created a little utility class called MovieWrapper, which is a descendent of UIComponent that has just one function, sizeTo(), to make it easy to size a MovieWrapper object to some standard Flex container. Here it is:

And now we are ready to go. I’ve created a normal Flex Application (here it happens to be Flex 3 but it works just the same with Flex 4):

Notice that the application contains a Canvas named ‘canvas’ and it executes the init() method on completion. This is the associated script file, FlexApplication1.designer.as (this happens to be an Amethyst ’code behind file’, hence the file name, but any script file will do):

As you can see, most of the code is the same as in the ActionScript program I created earlier. This time I’ve only used one of the clips for brevity but you can use both if you wish. The main difference is the way in which the clip is added. Instead of adding it directly to the application or to the Canvas, I have created a MovieWrapper object and added the clip to that. The MovieWrapper is sized to the canvas and added to it. The MovieClip is then added to the MovieWrapper. The end result is that I now have my MovieClip right inside my Flex application.

I have both versions of this program in a single project the Solution Explorer (for real-world development you can group multiple projects inside one Solution) and when I want to switch from the Flash/ActionScript version to the Flex version, I just right-click the MXML file and select ‘Set as main’.

And now I can run this Flex application either in the Flash player or in a browser (and of course, I can debug as before)...

So, in short, if you want to program Flash applications in Amethyst you have three main choices.:
1) You can share an existing Flash movie with the Flash IDE as explained in a previous article.
2) Or you can create a Flash/ActionScript project from scratch in Amethyst and import MovieClips and other graphic and audio resources and program them entirely in Amethyst.
3) Or you can import MovieClips into UIComponent ‘wrappers’ and use them in your Flex framework applications.

Using these three possible workflows makes it possible for ActionScript developers to work exclusively in Amethyst, using the full power of the Amethyst coding environment (with its extensive refactoring, IntelliSense and code formatting capabilities) and the integrated Amethyst Cylon debugger. If a codebase already exists, this may either be imported or shared with the Flash IDE so that Amethyst developers may work on the same code being used by Flash IDE developers. But if you wish to import Flash-based resources such as MovieClips and you do not need to share code with the Flash IDE, then you can create Flash/ActionScript or Flex movies and applications by importing existing movie clips and manipulating them programmatically as explained above.

Bookmark and Share   Keywords:  ActionScript  Amethyst  Flash  Flex  tutorial
© SapphireSteel Software 2014