Moving from Authorware to Flex
Updated with more content from Amy Blankenship on October 9, 2008
Before you start
One of the strong points of Authorware is that you can use the icons very quickly to start developing eLearning applications with little programming experience. Flex has a tag-based language that can also allow you to get something on the screen pretty quickly and easily.
One thing that is important to remember is that Flex is designed to create rich interactive experiences, especially in presenting and manipulating data. While eLearning can and should be a rich interactive experience, often eLearning deals in more static content than Flex is intended to handle. So before you decide Flex is the tool for you, you might want to look at the alternatives and try the Is Flex Right for You calculator.
Authorware limitations
Limitations Authorware has that Flex does not:
- Authorware has been around for a long time, and many of its features are outdated.
- Flex offers an exciting array of features and enhancements that Authorware developers have wanted for a long time. These features include:
- Graphical features
- Code handling
- Data access
- Web delivery
- Desktop delivery
Note: Authorware includes these feature areas. It's just that Flex offers enhancements over and above the functionality provided by Authorware.
Graphical features
- Transitions: It was a best practice for Authorware developers to avoid transitions, because the built-in transitions were visually distracting and did not help support the instructional design in most instances. While nicer transitions were available from third parties, adding them meant adding more files to the delivery. In some situations, this could be problematic. In Flex, transitions are designed and intended to focus user attention in a way that supports the message of the application, rather than detracts from it.
- Text handling: Authorware's native text handling made it difficult to format text on the fly. Later versions of Authorware featured an extension, rtf objects, that made text handling a little easier on Windows machines, but this was not ideal for all applications. Flex supports a limited set of HTML tags within most of its text components, making formatting much easier.
- CSS: Authorware has text styles that allow styles to be changed at design time throughout the application. Flex applications can be styled with CSS declarations at runtime. Most Flex components have a large number of styleable properties, and advanced developers can extend components to add their own properties that can then be styled with CSS.
- Dynamic layout: Authorware developers could influence the layout of some graphical elements at runtime with careful planning and coding. Flex components can adjust their layout on the fly to take advantage of more space in the browser, for instance, or to make room for components that are added on the screen.
Code handling
- Team Development: Since an Authorware file can't be split up into smaller units, each file could only be worked on by one developer at a time. Libraries could be shared among developers, but that was of limited use since they could not be shared across a network. Flex allows teams to collaborate and produce many files that are assembled at compile time. This increases the size of a team that can effectively work on a project.
- Reuse: Typically, Authorware native code could be copied between files but not truly shared. Once the code was copied, each copy had to be maintained separately Libraries and script files allowed limited sharing of code, but the bulk of code had at least one instance per Authorware file. Some functionality could be moved into Xtras and u32 files that could then be used by multiple Authorware files, but then these had to be added into the package separately. Flex components can be extended indefinitely, and these changes get packaged into the final swf or AIR file by default.
- Code Hinting and completion: Authorware only offered code hinting and completion for native Authorware functions and variables. If you loaded additional functions or added your own variables, you still had to type them all in by hand. Flex gives you code hinting for objects that come with the Framework and your own custom objects, methods, and properties as well. In addition, Flex has great shortcuts to allow for quick and easy copying and moving of code. For instance, if you press Ctrl+Alt+Down Arrow, Flex will copy the line of code your cursor is in onto a new line below where your cursor is.
Data Access
- XML: The XML handling in Authorware was sub-optimal. Whether you left it in the default format or made it into a list, it still needed a lot of difficult parsing to make it workable. Flex and Flash include E4X, a language that allows you to access XML elements like any other object, with dot syntax.
- "Push" technologies: Flash and Flex can both receive real-time data from sources like LiveCycle DataServices and BlazeDS without first having to make a request. Authorware could make requests using the GET and POST methods and then act on the requested data.
Web Delivery
Web delivery was one of the hardest things for Authorware developers. Authorware had its own special player that IT departments were often reluctant to approve and install. This player was installed to a location on the hard drive that users often did not have access to.
In addition to that, a web-delivered Authorware piece could be made up of hundreds or even thousands of files. Servers often had to be configured to allow download of necessary files.
In contrast, when a Flex application is delivered to the web, it uses the Flash player. By default, all the components used in the application are combined into one swf.
Desktop Delivery
An Authorware file can be a powerful thing on the desktop, and because of that power it can be difficult to install everything the Authorware application needs on a secure system such as Windows Vista. Adobe AIR lets Flex applications run on the desktop. An AIR package can be signed by a trusted authority, so Windows will not need to ask user permission for most actions.
In addition, AIR applications can have any window shape a designer can imagine, including ones that have semitransparent areas. Authorware could have shaped windows, but this required external components.
Flex Limitations
Limitations Flex has that Authorware does not have include:
- Code handling
- Running in Flash Player
- Running in AIR
Note: Again, it's not that Flex doesn't have these features, it's just that Authoware makes these areas a little easier.
Code Handling
Authorware has a single scope for all its functions and variables, so it can be very easy to get information from one part of the application to another. In Flex, each class or component has its own scope, and this can make it difficult to get access to needed pieces of information. While this is not a limitation, per se, it can feel very limiting until you get used to it.
Running in Flash Player
- System Access: A trusted Authorware file had full system access, even running from a browser. SWF files are limited to writing files like cookies, Shared Objects.
- Security: SWF files that are not in the same domain as information they are trying to access have to be specifically permitted to do so by the addition of a crossdomain.xml file on the server hosting the data. The Authorware player has never required this type of permission.
- Window Restrictions: The Authorware file could be "freed" from the browser window and stay open when the browser window was minimized. Though SWFfiles can appear on top of browser content, they have no ability to have their own separate window.
Running in AIR
- System Access: AIR applications have some file system access, but not full access. AIR files can't consume DLL's or access system resources. By contrast, Authorware files can listen to ports, connect to ODBC data sources, etc.
- CD Delivery: AIR applications must be installed to the machine. While in theory an AIR application could be delivered with a CD or DVD that contained many megabytes of media files, in practice it might be difficult for the AIR application to search for and find them.
Conceptual differences between Authorware and Flex
Procedural approach vs. Event driven
In Authorware, logic executes as an imaginary pointer moves down the flow line from icon to icon. The flow can jump from place to place in certain instances, but by and large we think of Authorware's flow in a linear fashion. Authorware can have segments of flow line that are accessed as a result of a change in values or some other event that has occurred.
In Flex, virtually everything happens as a result of some event happening somewhere. Initialization code runs when the application's creationComplete code runs, buttons have click event handlers, etc. On the surface, this does not sound that difficult, but the catch is often finding or creating the event that is going to happen exactly when you need to react. It's important to understand the component life cycle, especially for data-driven components, such as DataGrid.
Global vs. Object Oriented
Another key concept in Authorware is that all variables are global in scope. Even though Authorware has icon variables, variables whose values are tied to specific icons, these values can be read and set from any place in the running application.
In Flex, the goal is to keep each component as self-contained as possible. This is known as "loose coupling," and it essentially means that each component maintains its own variables internally. It might have an API to allow other components to affect those variables, but it retains the responsibility for managing them. This means that it can be very easy to take a component built for one application and reuse it in a different application—it isn't dependent on anything in the first application. In addition, if something changes in an application with loosely coupled components, usually you don't have to change those very much, if at all, because of those changes.
The downside of this is that it can be much harder to establish communication between the different pieces of a Flex application than an Authorware application. Parent components have to use the API to set properties on the child components, and child components have to dispatch events to the parent, which will then react appropriately.
That's one of the reasons there are several Frameworks in use in Flex right now. A Framework is a collection of design patterns that are combined and applied in the same way across all projects that use that Framework. A design pattern is an approach to a given problem that has proven useful over time, so it gets codified and reused. When a team picks a Framework to use with Flex , they're essentially saying "this is how we will all solve this given set of problems". One of those problems is communication.
Although eLearning-specific Framework may eventually be developed, for now, the most popular Frameworks are Cairngorm and PureMVC.
Elearning Tasks
This section lists specific How To's on how to accomplish things we need to do in an eLearning application in Flex, possibly with code samples/example files.
Basic Navigation
- Menus
- Paging
- Recursive/nested structures
Interactivity
- Multiple Choice
- Drag/Drop
- Text Entry/Keypress
- Timers
- Evaluation/Scoring/Feedback
Media
- Media Types supported in Flex
- Ways to use media
Data Management
- Available data sources and their limitations
- Conversion options for existing data sources
- Storing and retrieving data
LMS Integration
Other potential topics include:
- Authorware Import into Flex
- Using Flex files inside Authorware
- Coding Best Practices
- MVC Best Practices for eLearning
- Cairngorm—is it appropriate for eLearning?
Designing for Flex
Flex 3 has a significantly different design and development paradigm from Authorware. As you evaluate tools to replace Authorware, or if you have already decided to develop your eLearning solutions using Flex 3, you should read the Designing for Flex series, an extensive article that will give you a good understanding of Flex 3 from the design perspective.
The Designing for Flex series includes the following articles:
While you are reading this series, remember that Flex developers think in terms of building applications, which often is going to be significantly different from how you may be thinking for your eLearning solutions. While you should not dismiss the Flex thinking out of hand, you may benefit from considering how you might revise the methods described in this series to your own needs.
Beyond Replacing Authorware
Potential topics include:
- Breaking the Box - AIR offers the possibility of a UI whose shape is dictated by what makes sense to the application.
- RIA Philosophies as applied to eLearning - Ideas we could start with are at http://www.adobe.com/devnet/flex/articles/fig_pt8.html. We could look at what an eLearning app that exemplifies RIA concepts might look like.
- Web Services for eLearning - Could RSS, etc., be used to automatically find and integrate the latest information on a topic into an eLearning piece? Could forums and chats be directly integrated into eLearning?
Using Flex files inside Authorware
In large existing projects, it might not be feasible to migrate the entire project to Flex over night. One strategy is to create new functionality in Flex and embed that in Authorware. When Authorware finally is abandoned, the Flex functionality will still be useful.
Flex Side
Flex and Flash have an object, ExternalInterface, that allows them to communicate with whatever application contains the SWF file. Normally, this is used in a SWF embedded in the browser to communicate with JavaScript that is written in the HTML page.
At the moment that the SWF loads, the child components of the SWF don't yet exist, so any attempt to set any properties on them will cause an error, which will probably stop your Flex application from proceeding any further. So you should wait until everything is created before initiating communication with the container. This means that you should run a function on creationComplete that will use ExternalInterface to call out to the container and tell it that it is ready to receive data. This function should also set up the callback functions, which are the functions inside your Flex application that are accessible to the container.
The container should then respond by calling a function and providing data your Flex application needs as an argument. This can be a user name, lesson status, or XML that represents a menu. The function should perform whatever parsing is needed on the data and set object properties based on the data.
When the user interacts with the swf, it should again use ExternalInterface to tell the container what happened.
Once you have created your Flex file, you should make sure to export a release build by going to Project > Export Release Build. This file will be smaller and run more efficiently than the debug build that is built by default.
Authorware Side
The Authorware file will have a Shockwave Flash Object ActiveX control icon in it. The development machine should have Flash Player version 9.0.115.0 on it, and you'll need to make sure that the users have at least that version installed.
Next, you'll need a calculation icon that sets up the path to your SWF file so that Authorware can find it. This will start the loading process, which will culminate in the creationComplete event.
Once the creationComplete event fires, the swf will generate an event that can be seen in Authorware by using ExternalInterface. To catch this event, you'll need to use an Event Response on an Interaction icon. The response should be set up to respond to the FlashCall event. This seems to work best as a perpetual response on an Interaction that is below the ActiveX Sprite on the flow line, but above the calculation that sets the path to the swf.
The information contained in the #request property of the EventLastMatched variable will be an XML formatted string, so you'll need to use an XML parser object to access its contents. The same event response will trigger every time the Flex Application calls ExternalInterface.call, so you'll need to look at the name of the root element to see what "function" the Flex file thinks it is calling and branch based on that.
In the branch that you set up for the initial call where the swf tells you it is started, you should respond by issuing a CallSprite command to the Flash ActiveX Sprite icon that calls a function in the swf with the data you want to see in Flex. Other branches should contain logic to respond to different calls the swf sends with ExternalInterface.
Download a Flex Builder project that contains the example files .
 |
|