Note that these are basic demos so if you know pretty much anything about animation in ActionScript, these may not teach you anything.

All these scripts do pretty much the same thing. They draw a square on the stage. When you click on it, it moves horizontally from x=100 to x=400. Each of these is a class that you can run as the main class of an AS3 application.

1. The wrong way

The wrong way, of course, is to use a for loop:

package
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class BasicAnimation extends Sprite
    {
        // ------- Constructor -------

        public function BasicAnimation()
        {
            _createChildren();
        }

        // ------- Child display objects -------

        private var _rect:Sprite;

        // ------- Private constants -------

        private const START:int = 100;
        private const END:int = 400;

        // ------- Private methods -------

        private function _createChildren():void
        {
            _rect = new Sprite();
            _rect.graphics.beginFill(0xff0000, 1);
            _rect.graphics.drawRect(0, 0, 100, 100);
            _rect.graphics.endFill();
            _rect.x = START;
            addChild(_rect);
            _rect.addEventListener(MouseEvent.CLICK, _rect_click);
        }

        // ------- Event handling -------

        private function _rect_click(event:MouseEvent):void
        {
            // wrong way:
            _rect.x = START;
            while (_rect.x < END)
            {
                _rect.x++;
            }
        }
    }
}

The right way (most basic)

Of course, this one runs very slow since it’s moving at a rate of 1 pixel per frame.

package
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class BasicAnimation extends Sprite
    {
        // ------- Constructor -------

        public function BasicAnimation()
        {
            _createChildren();
        }

        // ------- Child display objects -------

        private var _rect:Sprite;

        // ------- Private constants -------

        private const START:int = 100;
        private const END:int = 400;

        // ------- Private methods -------

        private function _createChildren():void
        {
            _rect = new Sprite();
            _rect.graphics.beginFill(0xff0000, 1);
            _rect.graphics.drawRect(0, 0, 100, 100);
            _rect.graphics.endFill();
            _rect.x = START;
            addChild(_rect);
            _rect.addEventListener(MouseEvent.CLICK, _rect_click);
        }

        // ------- Event handling -------

        private function _rect_click(event:MouseEvent):void
        {
            // right way (very basic):
            addEventListener(Event.ENTER_FRAME, _enterFrameBasic);
        }

        private function _enterFrameBasic(event:Event):void
        {
            if (_rect.x < END)
            {
                _rect.x++;
            }
            else
            {
                removeEventListener(Event.ENTER_FRAME, _enterFrameBasic);
            }
        }
    }
}

Adding velocity as a variable

The solution to the slowness is to add a velocity variable. The value (in units of pixels per frame) will determine how quickly the animation moves. Basically you just try different values until you’re happy with something. Like the previous example, this is a purely linear animation — the velocity stays constant.

package
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class BasicAnimation extends Sprite
    {
        // ------- Constructor -------

        public function BasicAnimation()
        {
            _createChildren();
        }

        // ------- Child display objects -------

        private var _rect:Sprite;

        // ------- Private constants -------

        private const START:int = 100;
        private const END:int = 400;

        // ------- Private methods -------

        private function _createChildren():void
        {
            _rect = new Sprite();
            _rect.graphics.beginFill(0xff0000, 1);
            _rect.graphics.drawRect(0, 0, 100, 100);
            _rect.graphics.endFill();
            _rect.x = START;
            addChild(_rect);
            _rect.addEventListener(MouseEvent.CLICK, _rect_click);
        }

        // ------- Event handling -------

        private function _rect_click(event:MouseEvent):void
        {
            // right way (very basic):
            addEventListener(Event.ENTER_FRAME, _enterFrameBasic);
        }

        private function _enterFrameBasic(event:Event):void
        {
            if (_rect.x < END)
            {
                var velocity:int = 5;
                _rect.x += velocity;
            }
            else
            {
                removeEventListener(Event.ENTER_FRAME, _enterFrameBasic);
            }
        }
    }
}

Adding acceleration

Once you’ve separated out velocity, it becomes easy to make the animation non-linear by adding an acceleration value that causes the velocity to change over time. We’re just stepping back one level of complexity — the acceleration is now linear instead of the velocity.

package
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class BasicAnimation extends Sprite
    {
        // ------- Constructor -------

        public function BasicAnimation()
        {
            _createChildren();
        }

        // ------- Child display objects -------

        private var _rect:Sprite;

        // ------- Private constants -------

        private const START:int = 100;
        private const END:int = 400;

        // ------- Private methods -------

        private function _createChildren():void
        {
            _rect = new Sprite();
            _rect.graphics.beginFill(0xff0000, 1);
            _rect.graphics.drawRect(0, 0, 100, 100);
            _rect.graphics.endFill();
            _rect.x = START;
            addChild(_rect);
            _rect.addEventListener(MouseEvent.CLICK, _rect_click);
        }

        // ------- Event handling -------

        private function _rect_click(event:MouseEvent):void
        {
            // right way (very basic):
            addEventListener(Event.ENTER_FRAME, _enterFrameBasic);
        }

        private var _velocity:int = 0;

        private function _enterFrameBasic(event:Event):void
        {
            if (_rect.x < END)
            {
                var accel:int = 3;
                _velocity += accel;
                _rect.x += _velocity;
            }
            else
            {
                removeEventListener(Event.ENTER_FRAME, _enterFrameBasic);
            }
        }
    }
}

Interpolating values over time

This next example doesn’t build on the previous ones but instead takes a completely separate approach to creating animation. This animation is time-driven rather than frame-driven. Instead of adding a particular number of pixels to the x value each frame, it calculates how much time has elapsed since the start and what the x value should be at that moment in time, then sets the x property to that value. A consequence of this approach is that regardless of the frame rate of the SWF, the animation will always last the same amount of time.

package
{
    import flash.utils.getTimer;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class AnimationIntermediate extends Sprite
    {
        // ------- Constructor -------

        public function AnimationIntermediate()
        {
            _createChildren();
        }

        // ------- Child display objects -------

        private var _rect:Sprite;

        // ------- Private constants -------

        private const START:int = 100;
        private const END:int = 400;
        private const TOTAL_TIME:int = 5000;

        // ------- Private methods -------

        private function _createChildren():void
        {
            _rect = new Sprite();
            _rect.graphics.beginFill(0xff0000, 1);
            _rect.graphics.drawRect(0, 0, 100, 100);
            _rect.graphics.endFill();
            _rect.x = START;
            addChild(_rect);
            _rect.addEventListener(MouseEvent.CLICK, _rect_click);
        }

        // ------- Event handling -------

        private var _startTime:int = 0;

        private function _rect_click(event:MouseEvent):void
        {
            // right way (intermediate):
            _startTime = getTimer();
            addEventListener(Event.ENTER_FRAME, _enterFrameIntermediate);
        }

        private function _enterFrameIntermediate(event:Event):void
        {
            var elapsedTime:int = getTimer() - _startTime;
            var fractionComplete:Number = elapsedTime / TOTAL_TIME;

            if (fractionComplete < 1)
            {
                var totalDistance:int = END - START;
                var offset:int = Math.round(fractionComplete * totalDistance);
                _rect.x = START + offset;
            }
            else
            {
                _rect.x = END;
                removeEventListener(Event.ENTER_FRAME, _enterFrameIntermediate);
            }
        }
    }
}

The main point of this example is to demonstrate the idea that you can plug in an algorithm that calculates position given time, and by varying the algorithm you can vary the animation. This is a direct lead-in to the idea of using tweening functions to vary an animation, as demonstrated in the next example.

Using an animation library

This example shows the use of a third-party animation library (in this case Grant Skinner’s GTween library). The commented-out lines demonstrate how a library makes it easy to synchronize animation and vary the animation. Note that this is only meant as a very basic demonstration of the concept of using a library for animation — GTween and the many other animation libraries that are out there all provide many additional features.

package
{
    import com.gskinner.motion.easing.Bounce;
    import com.gskinner.motion.easing.Sine;
    import com.gskinner.motion.GTween;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class AnimationTween extends Sprite
    {
        // ------- Constructor -------

        public function AnimationTween()
        {
            _createChildren();
        }

        // ------- Child display objects -------

        private var _rect:Sprite;

        // ------- Private constants -------

        private const START:int = 100;
        private const END:int = 400;
        private const TOTAL_TIME:int = 5;

        // ------- Private methods -------

        private function _createChildren():void
        {
            _rect = new Sprite();
            _rect.graphics.beginFill(0xff0000, 1);
            _rect.graphics.drawRect(0, 0, 100, 100);
            _rect.graphics.endFill();
            _rect.x = START;
            addChild(_rect);
            _rect.addEventListener(MouseEvent.CLICK, _rect_click);
        }

        // ------- Event handling -------

        private function _rect_click(event:MouseEvent):void
        {
            var tween:GTween = new GTween(_rect, TOTAL_TIME);
            tween.setValue("x", END);
//            tween.setValue("alpha", .5);
//            tween.ease = Sine.easeInOut;
//            tween.ease = Bounce.easeOut;
        }
    }
}

My application has thousands of records in one particular table that I need to populate the display with. I was wondering if I can implement paging to speed up the retrieval of those records?

In fact he specifically wanted to know if it was possible to do data paging with the SQLRunner class in my air-sqlite library. The answer is yes it works, without even needing any changes to the library. See below for how to do that.

The easiest way to implement data paging (in other words, getting only a subset of a query’s results at a time) in a SELECT statement is to use the LIMIT..OFFSET clause in the SELECT statement.

In summary, you can put a LIMIT clause at the end of a SELECT statement and the result set will only include the specified number of rows:

SELECT * FROM myTable
LIMIT 3

Then to get the next 3 rows, you add an OFFSET value:

SELECT * FROM myTable
LIMIT 3 OFFSET 3

Fortunately, you can use statement parameters for the LIMIT and OFFSET values (although the docs don’t mention this — shame on me!):

SELECT * FROM myTable
LIMIT :limit OFFSET :offset

Then you just specify values for those parameters and you’re good to go.

I tested this using the SQLRunner class by adding a new set of unit tests and it worked just fine without any changes to the library. (Hooray for unit tests and FlexUnit support in Flash Builder 4 — they made it nice and easy to test this out since I already had the infrastructure in place.)

Here is the SQL statement I used for the unit test using LIMIT..OFFSET with parameters:

SELECT colString,
colInt
FROM main.testTable
LIMIT :limit OFFSET :offset

And here is the line of code that calls the statement (modified slightly for readability). test_result is the result handler function. The parameters object specifies that I want 7 result rows, starting with row number 3 (i.e. skipping 2):

_sqlRunner.execute(SQL, {limit:7, offset:2}, test_result);

As Peter points out in the comments, another approach to do something similar to data paging with AIR is to specify a number of rows to retrieve as the first argument to the SQLStatement.execute() method, then call the SQLStatement.next() method to retrieve additional rows from the same statement. This technique is described in the documentation so I won’t go into more detail about it here except to say that it does have a couple of drawbacks (mentioned in my comment below) that make it less suitable for data paging (but still very useful).

Normally in SQL, including in AIR’s built-in SQLite database engine, you can only add data to one table at a time using an INSERT statement. In some cases, particularly when you’re doing a “bulk loading” operation such as importing data from a text file into a database, it’s convenient to be able to insert data into multiple tables using a single INSERT statement.

For example, suppose you have XML data to import into a database such as the following:

<?xml version="1.0"?>
<employees>
    <employee firstName="Bob" lastName="Smith"
        location="San Francisco" country="USA"/>
    <employee firstName="Harold" lastName="Jones"
        location="San Francisco" country="USA"/>
    <employee firstName="Tom" lastName="Donovan"
        location="Boston" country="USA"/>
    <employee firstName="Mike" lastName="Wilson"
        location="Calgary" country="Canada"/>
    <employee firstName="Steve" lastName="Thomas"
        location="London" country="UK"/>
    <employee firstName="Joe" lastName="Nelson"
        location="London" country="UK"/>
    <employee firstName="Juan" lastName="Varga"
        location="Buenos Aires" country="Argentina"/>
    ...
</employees>

The XML data isn’t normalized, so there is duplicate data between the various records. We will import it into a database with the following (normalized) structure:

Assuming the data is going to be imported as a single user operation, it would be painful to need to prompt the user or throw errors for every duplicate entry.

Using the technique described here, you can use a single SQL statement to add an employee and if necessary any related data including office location and country. (You would still loop over the data and execute one INSERT statement per employee record — but you wouldn’t need to execute three INSERT statements per employee record, or need to check for duplicate office locations and countries for each employee record to be inserted.)

As mentioned above, this technique is probably only appropriate when you’re doing “bulk importing” of data. If you’re just adding a single conceptual record (even if it includes data in multiple tables) you’ll most likely want to use a series of INSERT statements to add the data, so that you can have more precise error checking and handling.

How to do it

In an attempt to “cut to the chase” I’m going to put the necessary code here. For more detailed explanations on how this works and why it’s necessary, see the “details” section below.

This technique for inserting data into multiple tables using a single SQL statement consists of three elements:

1. A view in the database that groups the data to be inserted (from all the tables) into one “table”
2. An INSERT statement to add the data, using the view as the destination “table” in the INSERT statement. This is the INSERT statement that you’ll run from your application while importing the data
3. A trigger defined on the view, which runs when any INSERT statement is executed against the view. This trigger does the actual work of checking for existing data and inserting data into individual tables.

Here’s the code for each part:

A view grouping the data to insert

This combines all the tables that potentially need data inserted into a single “table” for the INSERT statement. You run this statement once to create the view in the database.

CREATE VIEW employees_for_insert AS
SELECT e.firstName,
    e.lastName,
    l.name AS locationName,
    c.name AS countryName
FROM employees e
    INNER JOIN locations l ON e.locationId = l.locationId
    INNER JOIN countries c ON l.countryId = c.countryId

An INSERT statement that “inserts” the data into the view

This code isn’t actually run, but it passes all the data to the database engine for use in the trigger. You execute this SQL statement once for each record to add to the tables.

INSERT INTO employees_for_insert
(
    firstName,
    lastName,
    locationName,
    countryName
)
VALUES
(
    :firstName,
    :lastName,
    :locationName,
    :countryName
)

An INSTEAD OF trigger defined on the view

This is the code that actually runs when the INSERT statement above is executed. You run this code once to create the trigger. Then the database runs the code in the trigger body automatically. If a location or country doesn’t exist it is inserted. However, if they do exist, nothing happens (no duplicate record is created). Then the main employee record is inserted.

CREATE TRIGGER insert_employees_locations_countries
INSTEAD OF INSERT
ON employees_for_insert

BEGIN

INSERT INTO countries (name)
SELECT NEW.countryName
WHERE NOT EXISTS
    (SELECT 1 FROM countries
     WHERE name = NEW.countryName);

INSERT INTO locations (name, countryId)
SELECT NEW.locationName, countries.countryId
FROM countries
WHERE countries.name = NEW.countryName
AND NOT EXISTS
    (SELECT locationId
     FROM locations
     WHERE name = NEW.locationName);

INSERT INTO employees (firstName, lastName, locationId)
SELECT NEW.firstName,
    NEW.lastName,
    locations.locationId
FROM locations
WHERE locations.name = NEW.locationName;

END

Details

The SQL language is designed for working with relational databases, so in a SQL database you usually use multiple tables to represent a single piece of data. That means that in a normal scenario, if you want to add a new record to a table, you may need to add a new row of data to additional tables that the main data is related to.

In this example, we are using a database with the following structure:

This data represents employees in a large company that has multiple office locations, identified by records in the locations table. In fact, this company is an international company that has offices in different countries, including multiple offices in some countries (represented by the countries table.

Each employee is associated with their primary office location by the locationId field in the employees table, and each location is defined as being in a certain country by the countryId column in the locations table.

In order to add a new employee you would generally have to perform several steps:

1. Check whether the country where the employee’s office is located exists in the countries table
2. If not, add it; if so, get its id to create the relationship with the locations table
3. Make sure the office location exists in the locations table
4. If necessary add the location record, and get its id to use in the employee record
5. Add the employee record to the employees table

This is a fairly complicated process because a single SQL INSERT statement can only operate on one table at a time. In a simple case where you are adding a single employee record, this complexity isn’t unbearably difficult. You can execute the series of SQL statements in sequence in a single transaction. If an error occurs, you can break out of the sequence and display an error message or handle the error as desired.

However, if you’re importing a large set of data it’s not convenient to throw errors or display dialogs to the user. Instead, it would be nice to be able to just add any dependent data where appropriate, and insert all the data in one step.

The technique that’s described in this article makes use of database views and a SQLite feature known as INSTEAD OF triggers.

A view is a predefined SELECT statement that’s saved in a database so it can be used in queries as though it was a table. Because it usually includes data from multiple tables, and doesn’t necessarily include all the data from any given table, a view is generally read-only — you can use a SELECT statement to retrieve data from a view, but you can’t use an INSERT, UPDATE, or DELETE statement to modify the view data.

However, in SQLite (and consequently in AIR) you can define a special type of trigger that’s associated with a view known as an INSTEAD OF trigger. (A trigger is a set of SQL code that’s associated with a table. The code is executed when a data manipulation operation is performed on that table.) When a SQL statement attempts to perform an INSERT, DELETE, or UPDATE operation on the view that has an INSTEAD OF trigger defined for that particular operation, the trigger is executed instead of the specified operation. You can only define INSTEAD OF triggers on views (it wouldn’t make sense to use one for a table). For more information about triggers, see the Adobe AIR SQL reference documentation for the CREATE TRIGGER statement.

In this example, a view is defined that includes all the data in all the tables that potentially need data inserted. When the INSERT statement is executed the database runs the trigger instead. The trigger contains code that checks whether related data in the locations and countries tables already exists, and adds it if necessary. Then it adds the employee record with the related key values.

Apparently the article got lost in the shuffle, and about a week ago they found it and asked me to review their changes. I just found out that the article was published today.

Although it’s grouped under the “quick starts” category, it has a lot of detail. Also, it’s included in the Flash developer center but Flex developers shouldn’t be put off by that. It’s really about a core ActionScript class that’s available anywhere you’re writing ActionScript. (I’ve always found the ADC’s forced boundaries between Flash, Flex, and AIR to be too constraining for reality.)

I personally think the article provides a good, in-depth introduction to various aspects of working with the Vector class. In particular, it has guidance on areas that some people find problematic, such as the type parameter syntax and the fact that you have to provide your own custom sorting code (and of course the article includes examples to copy). I personally think it’s better than the developer guide documentation on the Vector class. (And I wrote them both so I’m not just showing a bias for my own work =)

As you may have heard among all the news that’s coming out from MAX right now, Adobe AIR 1.5 has just been released. Most of the features of AIR 1.5 are features that were introduced with Flash Player 10. However, one new feature in AIR 1.5 that helps address the easy-to-read database issue is AIR 1.5’s new support for AES encrypted databases.

I’ve had the interesting and at times complex job of writing the documentation for this new feature. The bulk of the new documentation is in a new section “Using encryption with SQL databases” in the SQL database chapter of the manual “Developing Adobe AIR Applications”.

It’s pretty straightforward to use an encrypted database. You have to create the database as an encrypted db. To create or open it, you call the SQLConnection class’s open() or openAsync() methods, just as you normally do, and there’s a new parameter where you provide a 16-byte ByteArray encryption key for the database. That’s all there is to it.

The SQLConnection class also has a new reencrypt() method, that you use to change the encryption key of an already encrypted database.

If you want to see some code examples, check out the documentation listed above, or see these quick start articles on the Adobe developer center:

• Working with the encrypted local SQLite database (Flex)
• Working with the encrypted local SQLite database (Flash)
• Working with the encrypted local SQLite database (HTML/JavaScript)

There are a couple of parts of the new documentation that I think are particularly interesting (although I’m obviously biased since I wrote it all):

• Considerations for using encryption with a database talks about some of the various reasons you may want to use an encrypted database, and some of the differences in how you might architect your application to account for the desired level of security and privacy.

• Example: Generating and using an encryption key goes into great depth into one technique for creating an encryption key for your database. You have to provide a ByteArray encryption key to encrypt your database. How you come up with that encryption key can have a big impact on the actual security of your app data.

  This was definitely the most involved example I’ve written for the documentation. the techniques it uses were specified to me by security engineers at Adobe. The documentation goes into lots of detail describing how these techniques are used and why. Both the code and the text went through a series of reviews by engineers and security experts.

  I ended up writing the example as a simple UI, plus a class that anyone can just pull into their own app (rather than having to pull apart the example and turn it into something you can use. I’m also excited to share that Mike Chambers and Christian Cantrell decided that this “encryption key generator” class is useful enough that it’s now included in the open-source ActionScript 3.0 core library (as3corelib) project.

Now that AIR 1.5 is out the door, I’ve updated my AIR database admin tool to support encrypted databases (when you try to open an encrypted database it prompts you for an encryption key, which you enter as a Base-64 string). I already mentioned that I wrote the encryption key generator class that’s now in as3corelib. I’ve also got at least one more new encrypted database-related open-source project that I’m about to release…but I’ll wait until the MAX “firehose” dies down a bit before I write more about that one. =)

As I mentioned briefly before, this week I presented at the 360|Flex San Jose (August 2008) conference. My presentation was titled “Adobe AIR SQLite: An optimization conversation.” As I mentioned in the presentation, the term “optimization” could mean a few different things — for example, optimization meaning improving performance, or optimization meaning improving developer productivity. While my presentation focused mostly on the first type of optimization, I included suggestions for tools, libraries, and strategies that fall in the “developer productivity” type of optimization as well.

Anyway, as always I’m happy to make my presentation materials available. Here are the slides (with some notes) from my presentation:

“Adobe AIR SQLite: An optimization conversation” slides (PDF in .zip - 504kb)

I don’t really have any specific code examples, apart from what’s in the slides, so there’s no “source code” download. However, I did link to a lot of external tools and resources (including a few of my own). To save you the trouble of digging into the PDF, here are the links:

Tools

• Cristophe Coenraets’ “SQLite Admin”
• My tool for testing queries
• “Lita” by David Deraedt (I learned about this one after the presentation, so it’s not discussed in my slides/video, but I thought it’d be worth mentioning anyway.)

Application architecture/patterns/libraries

• SQLite MXML wrapper classes (Peter Elst)
• Data access layer (Brandon Ellis)
• asqlib SQL statement generator (Miran Loncaric)
• “Command” classes (me) as demonstrated by my AddressBook sample application
• AIR ActiveRecord source and blog post explaining its usage (Jacob Wright)
• AIR SQLite Cairngorm services (Eric Feminella)
• Connection and statement pools, mentioned (with source code) in the article User experience considerations with SQLite operations (Daniel Rinehart)

Finally, as you may have heard, Adobe sponsored the recording of every presentation at 360|Flex, and they’re all going to be made available free of charge via a channel in Adobe Media Player. They’re rolling them out in phases, and mine isn’t available yet. When it is, I’ll update this post with the video as well. Update: the video is now available on Ted Patrick’s blog as well as in Adobe Media Player.

In the mean time, 360|Flex was full of awesome presentations. I wasn’t able to get to all the ones I wanted to see, due to conflicts and me trying to finish up preparation for my presentation. So I’m going to be spending some time watching many of those videos as well. If you’d like to see the videos, Ted Patrick has posted instructions on his blog:

How to view 360|Flex San Jose 8/08 session videos in Adobe Media Player

In all those presentations I promised to make my slides and code available. For those of you who attended my presentations these are a long time coming; for those who attended my session at Webmaniacs/Flexmaniacs, these are also somewhat overdue.

In any case, after deadlines, conference, and illness, here are the slides and files for my Webmaniacs session “Adobe AIR: Windows, Menus, and the System Tray” (and my two SilvaFUG presentations that were based on that session):

• “Adobe AIR: Windows, Menus, and the System Tray” slides and files (2.4 MB .zip)

The .zip file contains three files and a folder:

• Webmaniacs 2008 Slides for presentation.pdf: PDF “notes pages” printout of my presentation — each page contains one slide plus any notes that I added.
• Exercises.pdf: Since this is a “hands-on” presentation I created this document that contains step-by-step instructions for all the exercises. Using this plus the files below you should be able to work through all the exercises for the session.
• Code Snippets for exercises.txt: While all the code listings for the exercises are available in the PDF, a few of them are really long. In any case, if you’d rather copy and paste instead of type as you work through the exercises you can get the code from this file.
• Exercises_workspace_start/: A Flex Builder workspace with the “starting state” of some of the exercises for the session. Most of the exercises just start from a blank screen or continue a previous exercise, but for a few I set up the UI ahead of time to save time, and those files are in this folder.

Enjoy! As always, please leave comments and feedback.

• Deep-linking to frames in Flash websites (Sept. 10, 2007) - for this article I took just one of the techniques I described in the original article and added more background information and better explanations. (I’m sometimes amazed by how much detail I leave out when I’m writing posts on this site!)
• Detecting when data is edited in the DataGrid component (Nov. 12, 2007) - this article was revised much less from the original than the other one. Basically I took the text and found places where I thought it needed more/better/clearer explanation, and added a sentence or revised the text. I definitely think the new version is better, but there isn’t any new information to be had if you read the original.

• Synchronous database operations
• Schema API (database instrospection)
• Additional data types
• Other new documentation
• Bug fixes

Synchronous database operations

From the various public and internal feedback forums I’ve seen (discussion lists, mailing lists, etc.) this is definitely the most-requested feature from beta 1 (at least related to the embedded database). It’s in there now — when you instantiate a SQLConnection object, just add true as a constructor argument and all the operations (including SQL statements) that are executed through that SQLConnection will run synchronously.

The good news is it’s really very similar to the way things worked in beta 1, so if you’ve already been doing things asynchronously you won’t have to do much to get going with synchronous db operations. Note that a lot of people have referred to this as a “synchronous API” but in fact there isn’t a separate synchronous API — it’s the same API, with the exception of the single SQLConnection() argument.

To learn more, here’s the place where you should probably start: Developing AIR Applications > Working with files and data > Working with local SQL databases > Using synchronous and asynchronous database operations (Flex | HTML/JavaScript | Flash)

Schema API (database instrospection)

One limitation that developers pointed out in beta 1 was that there wasn’t any built-in way to get information about the structure of a database, tables, etc. In beta 2, there’s a new set of classes that can be used to get at that information. There isn’t any information in the developers guide about this yet, but in this case you can figure it out by looking in the API reference. The best place to start is probably with the SQLConnection.loadSchema() method (Flex | HTML/JavaScript | Flash).

There are also several new classes that are used for the various types of schema information you can get:

• SQLTableSchema (Flex | HTML/JavaScript | Flash)
• SQLViewSchema (Flex | HTML/JavaScript | Flash)
• SQLIndexSchema (Flex | HTML/JavaScript | Flash)
• SQLTriggerSchema (Flex | HTML/JavaScript | Flash)
• SQLColumnSchema (Flex | HTML/JavaScript | Flash)

Additional data types

Several ActionScript/JavaScript data types can now be used as column data types in the CREATE TABLE statements. When you specify one of these data types for your column, you can pass an instance of that type into an SQL statement (using a parameter) and it will property store and retrieve the data as the ActionScript/JavaScript data type. The new supported data types are:

• Boolean
• Date
• XML

More information about these data types can be found in the developers guide section “Working with database data types” (Flex | HTML/JavaScript | Flash) and in the language reference appendix “SQL support in local databases” (specifically the “data type support” section). (Note that the link goes to the Flex language reference. I couldn’t find that appendix in the Flash or HTML/JS versions, although the content is identical for all of them since it’s really just talking about SQL.)

Other new documentation

Although I did take several weeks between beta 1 and beta 2 to move from Indiana to the San Francisco bay area, I did get some additional documentation written. If I remember right, these are the sections that are new for beta 2 (other than the ones I’ve already mentioned above):

• Using parameters in statements (Flex | HTML/JavaScript | Flash)
• Strategies for working with SQL databases (Flex | HTML/JavaScript | Flash) - new sections on improving performance and best practices
• … and more! (improvements and corrections in various other sections)

Bug fixes

Need I say more? =)

(In seriousness, lots of bugs were fixed, so if there’s an issue you were running into, try it out in beta 2 and let us know if it’s still not working.)

Tim also raises other concerns which aren’t so much issues to keep in mind when developing AIR apps as they are issues surrounding the documentation. I’ve attempted to respond to those concerns in a separate post.

Tim says:

unlike [Google] Gears, AIR makes no attempt to isolate databases based on the origin of the application. In AIR, a SQLite database may be anywhere in the file system, and it’s equally available to any AIR application - a big hole in the AIR sandbox.

I think Tim raises an important point (although I disagree a bit with his conclusion). Very soon after I started working with the local SQL database functionality in AIR I realized the same thing — since any AIR database can be read by any AIR application, it means that I can write a database application in AIR, and you can write an application that finds the file I create with my app, and reads its data.

But let’s take a moment to get a little perspective, after which we’ll consider what we can do about it.

It’s true that in AIR, a SQLite database may be anywhere in the file system, and in general it’s equally available to any AIR application. However, while this differs from Google Gears’ approach, there are some key reasons why this difference is allowed, and why it’s not considered a “big hole” security-wise.

First of all, there’s a significant difference between Google Gears and Adobe AIR. Google Gears is an extension to the standard capabilities of web browsers, but ultimately an application that uses Google Gears runs in a web browser and is therefore subject to all the security constraints of a browser-based application. This is similar to content that runs in the Flash Player browser plugin, or in a non-Gears-enabled HTML/JavaScript application — neither of which can freely access a user’s hard drive. Why is that? Well, it’s because all it takes for a user to access a Google Gears application is for the user to visit the url of that application in his or her web browser. That could be by clicking a link, or even by an automatic redirect that the user has limited control over.

On the other hand, an AIR application doesn’t require or use a browser. In order for a user to access an AIR application, he or she must first choose to install the application, including going through a security dialog that will describe whether the application was signed with a security certificate. In this way, an AIR application is comparable to any other desktop application, such as one written in C++. Since any C++ application could theoretically include the SQLite library, installing an AIR application is no different from installing any C++ application in the sense that, by doing so, a user opens himself up to possible abuses and security risks.

Likewise, any application that can read files from the file system (AIR or not) has the same potential for “stealing” sensitive information. If someone has written down his passwords in a Microsoft Word file, an installed application could search the hard drive for all Word files and read them all and send their contents to a malicious author. Even if your application uses a custom binary file format, there’s nothing that can be done to prevent someone else from reverse-engineering your file format and then writing an app that reads your files and extracts the data. Of course, it’s true that by using a SQLite-format database file, in return for the convenience and benefits it gives you, you’re saving Joe Evil the trouble of needing to reverse engineer your file format, and instead you’re handing your data over quite handily in a wonderful structured way.

On the other hand, all this openness actually has benefits. Since my app can read files written by another app, I can write two different apps that can understand each others’ data. If I make a certain kind of app, and later you make another app that does the same thing but does it better, you can read my file format and import my data into your app — meaning you can help users migrate from my crummy app to your awesome one.

Having said all that, I don’t want you to think that I’m simply washing my hands of the issue. I think it’s an extremely important one, and I’m very glad it came up.

Tell me how to fix it, already

All openness aside, if you’re storing sensitive data in your application, data that you don’t think other applications ought to be able to read, there are some things you can do to try to minimize the potential for damage. Note that since the problem isn’t exclusive to apps that use a local SQL database (although it is perhaps more apparent for those apps), the possible solutions aren’t exclusive to local SQL databases either.

Use user-specific directories

Every AIR application has a special folder in the operating system that can be used to store files related to the app. The folder, known as the “application storage directory,” is actually different for different logged-in users of the same application. In that way it’s a convenient way to separate files for different users of your application. It’s location is always available using the File.applicationStorageDirectory property. Similarly, you can access the directories representing the user’s desktop and his/her documents directory; again, these are folders that will be different per-user, but your app can use the same code to access them regardless of who is using the app.

Note that this only provides limited protection. Any AIR app or any other app can traverse the file system (assuming the logged-in user has permission to do so) and discover and read files in the application storage directory or other user-specific directories. So while this might protect files belonging to other user accounts (if the user running the malicious app isn’t an administrator), it won’t protect files belonging to the logged-in user.

Encrypt your data

The most reliable way to protect sensitive data from other applications is to encrypt it. This can be done in a couple of ways:

• Encrypt the database file itself. This approach could be somewhat involved. When a user opens the app you’d decrypt the database file and store the decrypted copy in a temporary location from which the app would actually access the db. Then, when your app shuts down (or at some other time) you’d encrypt the temporary file and save the encrypted version wherever you store that master version, and delete the temporary file. As a simpler but less secure variation, you could use a simpler form of encryption. For example, you could append some bytes (either random or meaningful) to the beginning of the database file (or end, or middle or any combination of the three). Before using the database file, you’d need to remove the extra bytes, of course, and actually access the unencrypted version of the file with your application.
• Encrypt sensitive data within the database. Rather than encrypting the entire database file, if your application stores some data that would be considered sensitive, you could simply encrypt the raw data before writing it to the database in your INSERT/UPDATE statement, then decrypt it after reading it with a SELECT statement.

Note that in both of these cases I’m talking about using a two-way encryption algorithm. Typically such algorithms require you to have some sort of secret — the encryption key — that is used by the application to encrypt and decrypt the data. Since an AIR app consists of HTML and JavaScript files (plain text) and/or SWF files (binary, but known to be de-compileable), you won’t want to store the encryption key for your application within the source code of your application. Rather, you’ll want to generate the key for each user, and store it separately from the application data. Christian Cantrell’s “Salsa” application demonstrates how to do this (it actually uses a user-selected passphrase as the encryption key, although the release notes say that future versions won’t require that) so that’s an example app to look at for an example of two-way encryption.

Not just reading

On a somewhat related note, another concern with other applications being able to access your app’s data has to do with the integrity of the data. Not only could another app read your application’s data, but it could just as easily change the data as well. Apart from two-way encrypting the entire database file, there isn’t really any way to protect against this. If you don’t want to encrypt the entire database file, one way you can at least verify the integrity of your data is by using a one-way encryption algorithm (also know as a hash). It works like this:

1. After closing your database, your app encrypts all or some of your database (either the bytes of the db file, or the db data) using a one-way encryption algorithm.
2. The next time your app opens your database (or before opening the db if you hashed the file itself) you run the same file (or portion of the file or data) through the encryption algorithm again.
3. If the source data (your db’s contents) hasn’t changed, the resulting hash value should be identical. If the contents of the database have changed, the resulting hash value will have changed — meaning the data has been tampered with by something other than your application.

You could even combine an integrity check with two-way encrypting the file. For example, you could create a hash of all or part of the database file, then append the result to the file. When you reopen the file, you would need to extract the hash, then you could compare it to the rest of the database as well as using the database file (minus the hash) for your application.

Finally, I should acknowledge that, while I’ve done some study of encryption and securing applications, by no means do I consider myself an expert on the topic. If anyone has other ideas, suggestions, and especially if you see some issues with the techniques I’ve recommended here, please share your experience!

Suppose you’re creating a user interface with Flash CS3, using the new lightweight ActionScript 3.0 components. You’re using the DataGrid component to display — what else — a table of data. You want users to be able to edit the data, and you want to know when the user changes the data so that you can update the application.

For example, suppose you’re building something like this simple spreadsheet application:

Naturally, when the user edits a value in the “quantity” column, you’d expect the “Total” value to automatically update.

This sounds like something that should be built in to the DataGrid component, doesn’t it? Alas when I started down the road of trying to figure out how to make it work, while building the Filter Workbench example for Programming ActionScript 3.0, I discovered that it’s not quite as straightforward as I had hoped.

In this article I’ll start with some discussion of what I tried that didn’t work, then follow up with two different approaches that do work (each of which has tradeoffs):

• What doesn’t work — using DataProvider events

• What does work (with help) — using DataGrid events

  • Using two different event listener functions (less convoluted)
  • Using one event listener function (more convoluted)

What doesn’t work — using the DataProvider’s events

I started digging through the documentation, and I noticed that the fl.data.DataProvider class (which I was using as the data source for my DataGrid) has some interesting looking events, dataChange and preDataChange. “Ah-ha!” I thought. I can just add a listener for those events, and when the DataGrid changes the underlying data in the DataProvider, it will dispatch those events and (if I need it, which I didn’t) I can grab a snapshot of the old data in preDataChange and get the new data in dataChange. (In fact, in my case I didn’t even need to know which data had changed — it was sufficient for my purposes to know that some data had changed, and then I just recalculated filter values using all the data in the DataGrid.)

Unfortunately, that’s not how the DataProvider works. In fact, its events are designed to handle the opposite use case — i.e. if something other than the DataGrid changes the data in the DataProvider, then the DataProvider notifies the DataGrid so that it can update itself, but if the DataGrid changes the DataProvider, the DataProvider assumes that the DataGrid already knows about the change (and nobody else would want to) so it doesn’t dispatch its events in that case.

So, strike 1 for trying to use the DataProvider’s events.

What does work (with help) — using the DataGrid’s events

Since the DataProvider was out, I had no choice but to look at the DataGrid’s events.

The DataGrid exposes one event, itemEditEnd, that looks like it might be useful. However, there are a couple of problems:

1. The itemEditEnd event is dispatched every time cell editing ends — not just when the cell’s data changes. So the fact that the event is dispatched doesn’t automatically tell us that the data has changed.
2. Unlike the DataGrid’s itemEditBegin event, which has a corresponding itemEditBeginning event, the itemEditEnd event doesn’t have a corresponding event that you can use to get the value before it is edited (in fact itemEditEnd, in most cases, gives you the value before it is changed, whether or not it actually changes).
3. The event object dispatched by the itemEditEnd event is a fl.events.DataGridEvent. That class doesn’t have any property such as dataChanged or oldValue and newValue, so I didn’t see any obvious way to identify whether the data had changed. (The DataGridEvent class does have some properties that end up being useful — but nothing that can be used without some work.)

Eventually, however, after stepping through the source code of the DataGrid several times as it processed editing events, I was able to figure out a couple of ways that you can identify when an edited item’s value has changed in an editable DataGrid.

The premise behind both of these approaches is this: Normally when you register a listener for the DataGrid’s itemEditEnd event, the underlying data in the DataProvider still contains the old values, and hasn’t been updated by the DataGrid. In fact, the DataGrid itself updates the DataProvider by registering for its own itemEditEnd event, then checking whether the original value is different than the new value, and updating the DataProvider it that’s the case. The question is, if the DataGrid is updating the underlying data as part of handling the itemEditEnd event, how can we get the value both before and after it changes, so we can compare them and see if it’s changed?

Using two event listener functions

This is the approach I recommend, although it does require more code (because you have to write two event listener functions). The trick behind this approach is the concept of event priority.

As I mentioned above, the DataGrid itself uses its own itemEditEnd event to update its DataProvider. If you consider the conceptual model of how events work in ActionScript 3.0, basically when a user ends the item editing process (probably by clicking or tabbing away from a particular cell), the DataGrid loops through the list of objects that have registered as listeners for the itemEditEnd event, calling each function in turn. Since the DataGrid uses itemEditEnd to update its DataProvider, that could theoretically lead to inconsistent results. Depending on whether your particular listener function is called before or after the DataGrid’s internal itemEditEnd listener function, the value in the DataProvider may or may not be updated with the new value.

In order to prevent this potential problem, the DataGrid uses event priority to specify that it should be called after most of its event listeners — which is the reason why (in the normal case) the DataProvider contains the pre-edit data rather than the new value (if any). Specifically, when the DataGrid registers as a listener of its own itemEditEnd event, it does so using a priority of -50. Here is the actual code, from line 679 of the DataGrid class’s source code:

addEventListener(DataGridEvent.ITEM_EDIT_END, itemEditorItemEditEndHandler, false, -50);

When you register an event listener in ActionScript, you can optionally specify a priority for your listener (the default, which most listeners use, is 0). Listeners with a higher priority get called first, and listeners with a lower priority get called later. Since the default priority, that’s rarely changed, is 0, any listeners that are registered using the default will get called before the DataGrid’s internal itemEditEnd listener — so they’ll get access to the pre-change value.

However, there’s no reason that your event listener can’t register with a different priority. For that matter, you can register two different listener functions for the same event, with different priorities, which is exactly how this approach works.

You register two functions as listeners for the DataGrid’s itemEditEnd event. The first one should be called before the DataGrid updates the DataProvider, so it must be registered with a priority greater than -50 (I use 100 here):

// This variable will store a temporary value
// to check if the DataGrid's edited item changes
var tempValue:Number;

// register itemEditEnd listener that will be called before an item's value is updated
myGrid.addEventListener(DataGridEvent.ITEM_EDIT_END, itemEditPreEnd, false, 100);

function itemEditPreEnd(event:DataGridEvent):void
{
   // get a reference to the datagrid
   var grid:DataGrid = event.target as DataGrid;
   // get a reference to the name of the property in the
   // underlying object corresponding to the cell that's being edited
   var field:String = event.dataField;
   // get a reference to the row number (the index in the
   // dataprovider of the row that's being edited
   var row:Number = Number(event.rowIndex);

   if (grid != null)
   {
      // gets the value (pre-edit) from the grid's dataprovider
      tempValue = grid.dataProvider.getItemAt(row)[field];
      // you could also use this line to get the value
      // directly from the cellrenderer that's showing the value
      // in the datagrid -- it's the same value.
      // That way you wouldn't need a reference to the DataGrid.
      //tempValue = event.itemRenderer.data[field];
   }
}

The second listener should be called after the DataGrid updates its DataProvider, so it must be registered with a priority less than -50 (I use -100 here):

// register itemEditEnd listener that will be called after an item's value is updated
myGrid.addEventListener(DataGridEvent.ITEM_EDIT_END, itemEditPostEnd, false, -100);

function itemEditPostEnd(event:DataGridEvent):void
{
   var grid:DataGrid = event.target as DataGrid;
   var field:String = event.dataField;
   var row:Number = Number(event.rowIndex);
   if (grid != null)
   {
      // gets the value (post-edit) from the grid's dataprovider
      var newValue:Number = grid.dataProvider.getItemAt(row)[field];
      // you could also use this line to get the value
      // directly from the cellrenderer that's showing the value
      // in the datagrid -- it's the same value.
      // That way you wouldn't need a reference to the DataGrid.
      //var newValue = event.itemRenderer.data[field];

      // check if the value has changed
      if (newValue != tempValue)
      {
          // do actions that should happen when the data changes
      }
   }
}

Notice that in the first listener function (itemEditPreEnd) the function stores the current value in a persistent variable (a variable which is declared outside the function scope). In the second listener function (itemEditPostEnd) that stored value is compared to the final value, and if they’re different we know that the value of the edited item actually changed.

Here’s a working example of this approach:

Using one event listener function

Although I recommend the other approach, if you don’t like the idea of using two listeners for some reason, or if you’re concerned about using the semi-hack of using two different priorities, there is an alternative approach that uses only one event listener.

In this approach, you create a single listener function, and register it with a priority greater than -50 (the default 0 is fine). I repeat, your listener must be triggered before the DataGrid updates the DataProvider, or else you’ll get a runtime error.

This approach works by pulling values from two different places. For the pre-change value, it looks in the DataProvider (or optionally in the cellrenderer for the cell, as shown above). For the post-change value, it actually looks at the DataGrid’s itemEditorInstance property, which is the actual display object that’s used for the editing field, and pulls the raw data from there (basically, it reads the text property of the TextField that’s used in the default item editor). Where it gets complicated is that it has to dynamically determine the name of the property that’s used by the item editor. That way, if you create a DataGrid that uses a custom item editor (e.g. if you have numeric data in a column and use a NumericStepper whenever that column is being edited, rather than the default text field) then you’ll need to know the name of that item editor’s property from which you should get the edited value.

Here’s what the code looks like:

// register itemEditEnd listener to determine when an item is changed
myGrid.addEventListener(DataGridEvent.ITEM_EDIT_END, itemEditEndHandler);

function itemEditEndHandler(event:DataGridEvent):void
{
   // get a reference to the datagrid
   var grid:DataGrid = event.target as DataGrid;
   // get a reference to the name of the property in the
   // underlying object corresponding to the cell that's being edited
   var field:String = event.dataField;
   // get a reference to the row number (the index in the
   // dataprovider of the row that's being edited
   var row:Number = Number(event.rowIndex);
   // get a reference to the column number of
   // the cell that's being edited
   var col:int = event.columnIndex;

   if (grid != null)
   {
      // gets the value (pre-edit) from the grid's dataprovider
      var oldValue:Number = Number(grid.dataProvider.getItemAt(row)[field]);
      // you could also use this line to get the value
      // directly from the cellrenderer that's showing the value
      // in the datagrid -- it's the same value.
      // That way you wouldn't need a reference to the DataGrid.
      //var oldValue = event.itemRenderer.data[field];

      // get the value (post-edit) from the item editor
      var newValue:Number = Number(grid.itemEditorInstance[grid.columns[col].editorDataField]);

      // check if the value has changed
      if (newValue != oldValue)
      {
         // do actions that should happen when the data changes

         // Note that in this case, the dataprovider
         // hasn't been updated yet, so you can't do any
         // actions that require the dataprovider to have
         // the new data
      }
   }
}

In fact, if you already know for certain what type of object is being used as the item editor, you don’t need to use such convoluted code. For example, with the default item editor, grid.columns[col].editorDataField will always be “text” (the .text property) so you can just use code like this to get the post-edit value:

var newValue:Number = Number(grid.itemEditorInstance.text);

And of course, if you’re using some custom item editor, you can just hard-code the appropriate property name. For example, if you’re using a NumericStepper instead of the default item editor, you can use “value” instead of “text”:

var newValue:Number = grid.itemEditorInstance.value;

Note the biggest drawback to this approach, as explained in the comments: the DataProvider hasn’t been updated by the DataGrid yet, so if you want to do anything using the DataProvider this approach won’t work (unless you use some technique to delay your actions until after the DataGrid has updated its DataProvider). As stated previously, you can’t use this technique after the DataGrid has updated the DataProvider; if you try to, you will not be able to get the pre-edit value (because the DataProvider will have already changed) and you’ll get a runtime exception (because the item editor will have already been destroyed, so you won’t be able to access it anymore to get the new value).

Here’s a working example of this approach (it looks the same as the previous one, of course):

Extra

Download the examples from this article (1.1MB .zip — as usual, a FLA with components is BIG).

Anyway, if you’re interested in this topic, the following links may be useful to you:

• A Slides (with lots of notes!) and example files/code (271 KB .zip)
• A recording of the presentation, in case you want to actually hear what I had to say =)

As always, feel free to add a comment or contact me if you have any questions or thoughts.

There are many attempts to loading external swf into cfform… But what about the contrary? Do you know a way to embed cfform into a flash movie? i.e. call a cfform in a movieclip without getURL and external pop-up ..

I started writing a comment response, but naturally it was getting pretty long-winded so I decided it deserved its own posting.

When you use cfform in a coldfusion page, the server generates a SWF file, with its own URL. (I don’t know whether it actually writes it to the disk, or whether it just keeps it in it’s memory — but from the end-user perspective that doesn’t really matter.) More specifically, it generates a SWF, then sends the appropriate HTML to the browser including the URL of the SWF. From the browser’s perspective the SWF is a completely separate item at a different URL — the browser doesn’t know that the programmer wrote it all in a single document. You can see the generated SWF’s URL by looking at the HTML source code of the CFM page.

For example, consider the page at the following URL (an example accompanying an article by the folks at ASFusion):

http://www.asfusion.com/blog/examples/cfdj/

If you view the source, you’ll see that the page includes some JavaScript that is used to write the appropriate object and embed tags into the browser page. Right in the middle of that you’ll see this line (today at least; the file name may change in the future, as explained below):

document.write("   src='/blog/examples/cfdj/859792312.mxml.cfswf' ");

That’s the line of JavaScript that’s writing the SWF’s generated URL into the page. So we know that there is a URL that the web server will recognize and, when a computer requests that URL, the server will return the appropriate SWF.

You can try it out if you’d like — try requesting the SWF’s URL directly (i.e. http://www.asfusion.com/blog/examples/cfdj/859792312.mxml.cfswf) and you’ll see the same SWF, without the HTML page wrapper.

So, knowing the URL of the generated SWF, you can use it in the same way you’d use any SWF. As I mentioned, you can type the URL in the browser to request it directly, or you could alternatively load it into another SWF using MovieClip.loadMovie() or any other MovieClip loading technique (e.g. the Loader class in ActionScript 3.0).

Potential issues

There are, of course, a couple of gotchas that you’ll want to keep in mind.

1. First of all, notice that the generated SWF’s URL is really just a number with a couple of file extensions. The reason for that is because this generated URL represents a single version of your cfform SWF. If you change the source code of the cfform in such a way that it needs to recompile the SWF, then the server will generate a new SWF with a new URL. So any time you change your cfform, the URL will change too (and, obviously, you’ll need to change the URL that’s called by the other SWF doing the loading). The reason the URL changes is to prevent the browser from using the cached (old) SWF — with a new URL, the browser loads a new SWF.

   An obvious workaround is to just make a copy of the generated SWF and put it at a permanent URL. Like I said, I’m not sure if ColdFusion actually writes the generated SWF to the server’s hard drive, or whether it just keeps it in memory. If it does write it to disk it should be easy to get a copy from the server. If not, you can just load the SWF directly in a browser and then choose “Save As…” (or whatever) from your browser to save a copy of the SWF locally. BUT, by using a single URL, you lose the automatic versioning that prevents the browser from caching the SWF. You can find one idea to work around that issue (i.e. to do your own SWF versioning) in my article “Using URL Variables and FlashVars” (specifically the URL Variables part of the article).

2. Second (and this is a big one): From my rudimentary tests, it looks like any queries in the CF page that the cfform uses are not available when you load the SWF separate from the CFM page. I’m not sure why — I’d have to look more at the generated MXML to try to figure it out — but my guess is that the SWF makes use of the URL of its container HTML page to figure out where to communicate to get its data (rather than having the CFM page’s URL hard-coded into the SWF). Depending on what you want to use the cfform for, that probably throws a big wrench into things.
3. If you’re actually using the cfform for its intended purpose — that is, as a form to submit data — you’re going to have some issues with loading it into another SWF. When you submit a cf flash form, it navigates away from the current URL to the cfform tag’s “target” URL (essentially using LoadVars.send(), so clicking that button on a cfform SWF loaded into another SWF would navigate away from the container SWF as well.

Finally, I can’t help but mention that loading a cfform SWF into another SWF may be a case of over-complicating something that can be done better in other ways. The obvious alternative is to just use Flex directly to create the form SWF, then loading the Flex SWF into the other SWF. Naturally, that means you’ll need to learn Flex…but if you’ve used cf flash forms then you’re already well on your way into that territory — just write out the generated mxml and take a look at what it consists of; then change a few things in the cfform and see how that changes the generated mxml…and so on. Don’t get me wrong — I’m sure there are legitimate reasons for using cfform rather than Flex in this situation, and I obviously can’t predict all the use cases. But over the long run I think you’ll find it’s a lot easier, without any of the issues or side effects, to use Flex.

The library is still in ActionScript 2.0—I haven’t finished porting it to ActionScript 3.0 yet, although I’ve started.

This release (.3 beta) contains a single bug fix. In anticipation of porting the library over to ActionScript 3.0, I wrote a series of unit tests, and—what do you know—I found a bug in the code that parses date values returned from an XML-RPC service call. I guess unit tests really are useful for ActionScript =).

I also added a new project history page and a new step-by-step example of how to make an XML-RPC call, in response to some user feedback and questions.

I got an email from “Brent” asking me if it’s possible to give someone a url that links directly to a particular keyframe of a Flash application:

Maybe you can tell me if this is possible or not, I have a feeling it’s not cause i’ve been searching through google and not finding anything written about it. Can you target a specific keyframe in a flash movie through an HTML page link (possibly using PHP? or javascript to feed the info to flash?) The reason for doing this would be if, for instance you had a flash site with different sections and wanted to give someone a link to your contact section without having them navigate to it…

is this possible?

Indeed, it is possible.

There are a few ways to accomplish what Brent was asking about. In fancy buzzword circles they might call it “using REST with Flash” or “creating RESTful urls that work with Flash”, or something like that (the key term being “REST”, which means having distinct urls for direct-linking to different states of a web-based application).

I. Using Flash’s frame anchors

The first way is one you can do within Flash itself, without needing any ActionScript. You can assign “anchors” to keyframes on the timeline. If you’re familiar with adding frame labels to frames, it works pretty much the same way:

1. Select the keyframe you want to be able to target
2. In the Property inspector enter the anchor text (the text that will be added to the url to link to the particular frame) in the “<Frame Label>” field
3. In the “Label type” drop-down choose “Anchor”
4. Finally, to make it work you have to open File > Publish Settings, and in the HTML tab, in the Template field, choose “Flash with Named Anchors”

To link directly to a particular keyframe, just use this format: “html_page_name.html#anchor_name” (replacing “anchor_name” with whatever name you gave the keyframe in step 2 above).

Admittedly I’ve never used this in production. I did a quick test and it seemed to work fine in Firefox 2.0 and Internet Explorer 6; but I couldn’t say if it will work in other browsers.

Also note that if you want to use frame labels (e.g. for ActionScript navigation) and anchors on the same frame #, you need to create them separately. In other words, you need a keyframe on one layer at that frame with the frame label, and another keyframe on another layer of the same frame with the anchor.

II. Using FlashVars and server-side code (url variables)

For a more involved (but well-tested) approach, you could use FlashVars with PHP to pass in the url. Basically you would make your html page url look something like this:

html_page.php?section=profile

The value that you pass in to the “section” variable could be a frame label, or just a value that you’re going to use in ActionScript somehow.

Then in the actual php source, in the part of the HTML that embeds Flash Player, you’d put something like this in:

<object ...>
<param name="FlashVars" value="section=<?php echo($_GET['section']) ?>" />
...
<embed ... flashvars="section=<?php echo($_GET['section']) ?>" />
</object>

(Note, I’m just writing this php from memory, and it’s been a while since I did php, so I may be putting the wrong thing there — but hopefully you get the idea).

If you’re using one of the JavaScript libraries for embedding the SWF, such as SWFObject or Adobe’s Active Content technique, those libraries already have built-in functionality for FlashVars, so you should be able to find examples of how you’d add the FlashVars with those libraries.

Anyway, that’s the HTML/PHP side of things. Back in Flash, on Frame 1 of the main timeline you’d add code like this:

this.gotoAndStop(section);

The variable named section is ‘magically’ created by Flash Player, as a result of the FlashVars code that was written into the html by php.

For more on FlashVars, you can see this post I wrote a while ago:

Using URL Variables and FlashVars

And you can see these slides/notes from a presentation I gave to an Adobe users’ group covering FlashVars and related techniques:

Slides and notes from “Flash to external data communication”

III. Using Kevin Lynch’s technique for making linkable Flash applications

Finally, there’s an even more complex but fancy and re-usable approach that was shared by Kevin Lynch, formerly of Macromedia and now Chief Software Architect for Adobe. It’s more involved code-wise, but it’s pretty slick:

Making Rich Internet Apps Web-Friendly

This technique (like the first one) doesn’t require anything special on the server — it uses JavaScript and ActionScript to do all the work. The advantage it has is that it updates the url in the browser window as you navigate around in the Flash SWF — so that not only can you have urls that link to different application states, but it’s easy and obvious to discover what those urls are.