Macromedia Flash to Flex
 

Overview - Macromedia Flex

One of the complaints heard in Macromedia Flash circles is that the pendulum in Flash development has swung much to much over to the developer side and away from the initial animation drawing and design which brought Flash all its success. And there is more than a small element of truth to that argument. If one looks in some of the recent books on Flash we read from respected Flash authors like Sham Bhangal that "Frame based drawn animation has both advantages and disadvantages. One of the key problems is that once an animation is made, there is very little room for variation without reanimating it, or creating several hundred animations. What if we wanted our circle to .. down a fraction every frame ? Well, we could go back and move its final keyframe down slightly or we could simply animate the whole movie using the concept of scripted motion. With scripted motion our entire movie only really has to be one frame long as we use ActionScript code to define all the details of the motion of our object[s].". Check any of our Flash book reviews and similar arguments are made there. Finally, take a look at what's new in Flash Pro Mx 2004 divided by primarily for developers/programmers versus for designers/graphic artists:

New and Primarily for Designers/Hand Animators
Timeline Effects - apply to any object on the Stage to quickly add transitions and animations such as fade-ins, fly-ins, blurs, and spins. This a welcome addition pioneered in Swishzone's SwishMax(see our review).
High-fidelity import - lets you import Adobe PDF and Adobe Illustrator 10 files and preserve accurate vector representation of your source files.
Video Import - is a new wizard which simplifies video encoding and offers encoding presets and clip editing.

New and Primarily for Developers/Scripters
Behaviors
- invokes functionality that links to a website, loads sounds and graphics, controls playback of embedded videos, plays movie clips, and triggers data sources. Eases scripting for designers but essentially is scripting and requires other scripting for effective use.
Flash Player detection - You can detect if a user has a specified Flash Player version. You can configure your published files to direct users to alternate files if they don't have the specified Flash Player. All programming here.
Accessibility features and components - offer tab ordering, tab focus management, and improved support for third-party screen readers and closed-caption programs. Many benefits require programmatic support.
Enhanced globalization and Unicode support - allows multi-language authoring using any character set; again this implies a fair degree of programmatic support.
Security - the Flash Player 7 enforces a stricter security model than previous versions of the Flash Player. This again implies programmatic support.
ActionScript 2 is an object-oriented language that follows the ECMA script language specification and supports inheritance, strong typing, and the event model. This is the major update to Flash Pro by far with its numerous programming changes and half dozen new objects, new components, new programming interface plus the dozens of new properties and function/method calls. programming in Flash has had a major overhaul.

The bottom line is that Flash, of necessity, has become more of a programming environ in the past few revisions starting with Flash 4 and extending through Flash 7 or Mx2004.

The Necessity of Programming in Animation

There are several reason for using programming in animation. As Sham Bhangal points out in his book Flash Mx Designer's ActionScript Reference, there are a number of properties of animation objects (or sprites) such as position, rotation, scale, opacity, and coloring among others that are much more easily controlled programmatically when you want to change them. And of course animation is all about changing things. Second, the whole process of managing many actors on one or more timelines to be displayed on many possible devices from a movie widescreen down to mobile phone - animation publishing and control implies programming. Finally, bringing together all the rich elements that are used in animations including vector and bitmap images, sound, video, 3D models and so on - all of these rich elements are better integrated and controlled with programming support. Its not as if Macromedia did not try to minimize programming overload. The first 2-3 editions of Flash subsisted on gotoandPlay(), gotoandStop(), startSound(), stop() and other very basic control commands. But the inevitability of programming support and fortuitous choice of JavaScript as the base for ActionScript has been well rewarded with Flash becoming the standard that almost all professional graphics programs support and 98% of all browsers use.

However, Microsoft also contributed mightily to the move to programming in Flash. With its effective campaign against either JavaScript or Java being used either as browser supported scripts or standalone applications on PCs(see our sidebar to the right), Microsoft left a big gap. The need for a robust and interoperable programming language. Preferably one that worked in a browser as well as standalone across such platforms as all flavors of Windows and Apple Mac OS, Linux, Solaris, Unix, Power PC, Symbian OS, etc. And it should support a broad range of new media types like audio, video, fonts, bitmap and vector graphics. It should be database aware and XML conversant.

Voila - before you know it you are talking about the Flash Player with its ActionScript clone of JavaScript, its very compact SWF file format that compresses audio, video, fonts, bitmap and vector graphics hands down better than any other technology. Flash has come to the fore as a cross platform programming tool because Microsoft crushed all the other tools and inadvertently let Flash have a default install ride on Internet Explorer. And Nature abhors a vacuum ... and for cross platform programming on the Web, Flash/Actionscript is giving its parent JavaScript a run for its money. So in Flash 5, Mx and now Mx2004 Macromedia has met the demand by putting more data processing features into Flash. XML processing, links to databases, the ability to create data entry forms and components. What in the world do these things have to do with animations ? Very little other than the fact that the Web usage of Flash for banner ads soon had Flash taking down name and address info or polls/surveys or supply links and email response depending on user filled in forms info. Flash was doing the data processing that Java or JavaScript should be doing. And Flash was doing it better because it is not bound to the Server-browser and back paradigm of DHTML. Once the Flash Player loads it has all the built in smarts (ActionScript and associated developer written scripts)to handle most operations locally.

But other competition in the smart media graphics field has also pushed Macromedia on to a more developer/programming oriented course. For example the distinct competitive advantage that Flash had over Adobe's Live Motion and Corel's RAVE animation software was its control over the SWF format and its superior built in ActionScript programming features. But against ViewPoint and Mind Avenue who have their own plugins and storage format that accommodate .SWF animations plus all rich media including all the new 3D models and animations - the principle advantages Flash had was a more efficient SWF container for rich media plus a rapidly expanding and fairly robust data processing capability in Flash's ActionScript.

Enter Microsoft one more time on the scene. Windows Media Player-WMP stores audio, video, fonts and scripts and more efficiently than ever before. WMP is partially cross platform. And in the Redmond development works is "Sparkle" an IDE for developing rich media using WMP as one important delivery mode. This competitive thrust made Flex inevitable. Flex is also an IDE for building rich media applications with J2EE data processing capabilities. Flex uses the Flash Player and the new ActionScript 2 plus XML to build

Microsoft Disables Cross-Platform Portability

Microsoft can claim with some degree of veracity to offer some interoperability; but strictly on its terms. Microsoft certainly supports data interoperability through adherence to XML standards and a recent move to XML file format for Word, Excel, PowerPoint, and Visio including publishing the source openly in Europe. But Microsoft has steadfastly not supported some industry and/or defacto standards such as Adobe PDF for documents, MySQL for databases, and Flash SWF for animations/rich media which are absent from most Microsoft application and development programs. Certainly third party support is tolerated; but data portability is so far primarily through only recently Microsoft approved formats. In sum, data portability is under strict Microsoft control.

As for program portability, Microsoft has worked steadfastly to undermine this because portable or interoperable programs mean that users can more easily migrate off of Windows and move to other platforms that might be more secure, reliable or cost effective such as Apple, Linux , Solaris or whatever. Examples are to be found in C/C++, JavaScript and Java where Redmond has adopted policies that deliberately reduced program portability. In C/C++ Redmond has bypassed X-Windows for its own Win API, substituting Open GL with its proprietary DirectX, passing CORBA for its own succession of COM/DCOM/.NET among other selective choices. These libraries are so fundamental and yet so different in approach and APIs that porting programs to other environs would be prohibitively costly.

Likewise in the case of JavaScript Redmond rushed ahead and added a whole slew of proprietary features and extensions to its version, JScript. These are especially critical in the DOM, CSS, and other JavaScript objects that again cross platform portability is effectively cutoff. Finally, in the case of Java Microsoft seemingly embraced the language with Redmond developers telling anyone in earshot that they would show how to build a fast, easy to use, and very performant Java IDE. But the problem arose when again Microsoft departed from using Java's official libraries, added their own extensions, and even changed the syntax of the language without gaining approval from Sun, Java's licensee. That would be like Sybase licensing Visual Basic for its database, then going and changing the underlying syntax, modifying some of the support libraries while refusing to use others and saying "here, Microsoft, here is how we want Visual Basic to run under our database and application servers". Yeah, fat chance.

Many analysts feel that Redmond was picking a fight deliberately to see if Sun would back down and where the fallback position was almost the preferred outcome. This fallback meant Java excluded from all Microsoft software including a frozen old version of the JVM on Internet Explorer's browser ... crocodile tears were shed in Redmond. And of course the latest .NET languages are being "ported" to Unix by Ximian in the Mono project. Problem - it is a subset of full .NET and Mono has now fallen behind the latest .NET improvements, and as one senior Microsoft developer assured me - ".NET code will run best on Windows". Of the TIOBE list of ten most popular languages, Microsoft officially supports 6: C, C++, Visual Basic, SQL, C#, JavaScript but none in a portable format. In Redmond, program portability is Verboten.

applications which sport the Flash animation capabilities but without having to resort to the layers and timelines of traditional Flash design. In effect Flex becomes the data processingand n-tier connections/programming vehicle for Flash . Hypothetically this allows Flash to re-emphasize if not return to its design animation roots.

What Flex Does

Macromedia thinks of Flex as the Enterprise solution for rich media Internet applications. Macromedia starts with the premise that the Internet provides a good experience for search and browsing - essentially read-only operations over the Web. But for interactions and transactions, the Internet even using DHTML has too many page refresh transactions which are time consuming and fraught with potential operator error. The need is for intelligence to be available on the client desktop and in a cross platform manner. But as we have seen in the sidebar above, Microsoft is only prepared to offer client-server programming intelligence on the desktop on its terms - just so long as it runs on Windows desktops using Microsoft-enabled apps or at the least through Internet Explorer or other Microsoft mediated means.

But thanks also largely to Microsoft and Internet Explorer, the Flash Player runs on 98% of all browsers worldwide. Listen how Macromedia describe its ability to deliver RIA - Rich Internet Applications. "Macromedia is widely recognized as a leader in the emerging market for RIAs. The Macromedia Flash client is available now on 98% of browsers, so almost everyone can use RIAs based on Flash. The Flash
client has a lightweight, cross-platform, cross-device runtime that is neutral for both application server development and deployment platforms and for client operating systems (Windows, MacOS, and
Linux). Applications that target the Flash Player can run identically on all the major operating systems today, and are backward compatible with previous versions of Windows and the Macintosh OS.". In essence, Flash Player is the perfect vehicle for delivering the presentation layer over the Internet:
1)because it runs on all major desktop and new mobile operating systems;
2)because with its built in ActionScript programming language it can eliminate the need for to and from network page transaction required by most HTML;
3)because with its time-proven superior compression routines, Flash delivers rich content better;
4)because the Flash Player is a closed system with self contained security mechanisms, it can offer a richer access model than the strict HTTP/HTML closed sandlot model.
So by this logic the Flash Player is the perfect vehicle for delivering rich interactive presentations over the Web to all PC desktops and a broad range of mobile devices as well. All we have to do is empower the Flash Player with strong/diverse connections to popular J2EE server frameworks and/or .NET backend - and voila you have much better and richer Internet interactions and transactions. Ohh and Macromedia has a J2EE server framework, JRun with Cold Fusion Mx, which happens to need a client side scripting language and a Visual IDE. Hmmmm. How to deliver RIAs - Rich Internet Applications? Hmmmm.

Flex = JRun/Cold Fusion II + Flash

But lo and behold what does Macromedia already have ? Yes in Cold Fusion a template for how to deliver Internet Applications to the client. Why not deliver Flash SWF embedded in HTML as the primary presentation layer experience on the client desktop device? Use CFML-Cold Fusion Markup Language as a template but make it fully XML powered and also be more rich media and presentation layer aware ? Call it MXML. Why not add a full visual development and debugging environ, an IDE, for developing this MXML code ? Codename the IDE "Brady" for now and model it on the drag and drop ease of development available in Visual Basic or Borland JBuilder with their drag and drop visual and database connection components. This could be the visual IDE that Cold Fusion developers have been clamoring for over the years. Add to the environ the ability to make the latest SOAP/Web services calls and to work with other SOAP savvy environs such as Java's J2EE or Microsoft's .NET environ and you have a delivery vehicle for J2EE/Web Services that is

as robust as the big Microsoft Visual Studio or IBM WebSphere Studio in connecting to database and middleware services but also provides a leg up on ease of development and most importantly on delivering rich media - audio, video, vector and bitmap graphics to the desktop and mobile devices. In effect, marry your Flash and ActionScript and Cold Fusion technologies together and ride that troika to a potentially commanding position in the rapidly evolving 8A's market - Applications Able to deliver Access to Anyone Authorized Anytime, Anyplace, on Any device. So in effect Flex with Flash and MXML handles the front end of the 8A's Applications and lets BEA, IBM, Microsoft, Novell, Sybase and others fight over the back end delivery vehicle/application server.

Now Macromedia is not alone in wanting to deliver this Rich Internet Application. Microsoft is working on "Sparkle" which will use an enhanced Windows Media Player in a similar role, albeit for Windows desktops. And Adobe is hard at work bringing its successful Adobe Acrobat PDF cross platform document container up to snuff as an allpurpose fill-in-the-forms container for Enterprise workflows. The new Adobe tool will have an IDE for creating forms in XDP files that are a superset of PDF. The IDE will also use JavaScript as the programming glue. And portal vendors like Sybase, Plumtree, BEA all have IDEs with the more or less ability to deliver alternates for the HTML/HTTP to-and-fro experience. So Macromedia will not be alone.

But Macromedia does have the advantage of having tuned Cold Fusion through at least five versions for performance, reliability, scalability and security. So expect MXML to be reasonably fine-tuned right out of the gate. Likewise the Flash player has gone through 7 versions and really has yet to be matched for the breadth of media it delivers with such compactness over so many platforms and with good performance and relative security. Adobe PDF is starting to approach Flash SWF in terms of breadth of media and range of platforms; but I am from Missouri on performance and compactness of contents. Likewise MindAvenue and ViewPoint do have a wider number of 3D media supported but do not have the breadth of platforms or availability of their players and certainly not the range of experience integrating their players with a variety of data processing frameworks that Macromedia has. So Macromedia has certainly a good shot at becoming a major player in 8A's Application Development.

Some Flex Details

In order to see how well Flex has adopted to being the new Cold Fusion II+Flash its useful to look at some examples from the Macromedia website. These examples show the MXML markup language, some ActionScript 2 plus CSS usage in simple Flex applications. Most of the heavy work is being done back at the Flex server just as in a Cold Fusion or J2EE application.

The first example is the classic Hello World application in which the message is copied from the top text input field to the r on bottom one by clicking the Copy button in an IE browser session. Note the coding, like in CFML, is fairly compact. Note also the use of the XML namespace"mx:". This is important because by simply changing or adding name spaces one can add new functionality or new variants to the MXML coding available to users. Note all three form tags are self contained as indicated by the "/>" closing brace. But the overall <mx:Application> follows XML conventions and is closed by an </mx:Applications> closing tag. In short, the new MXML resembles CFML closely but has the added power of being an XML dialect - parsable, extendible including by namespaces, and operable by XML and XSLT tools. For this reason do expect to see third party extensions generating Flex components, effects, behaviors, and application programs.

Components are just new Flash .SWC files that describe the workings GUI component like a button, a tree structure, or a tabular grid. Effects are predefined ActionScript 2 transformations that can be applied to any GUI component. And behaviors are ActionScript 2 code but that help
co-ordinate component and application server transactions that move data to and from form fields and other components or validate the data in components, or control their operation. we shall explore in more detail behaviors, components, and effects as the Flex beta becomes more readily available.

The next example shows a more sophisticated set of components including a Horizontal box, Vertical box, a DataGrid, a TextArea, a Tree structure(which is just for display it has not been wired up for usage). But the important point to note here is how containers can be contained within one another and Flex understands the XML containing or hierarchy relationship. Again this is a working example from the Flex beta that I have seen elaborated into much more detail with working ActionScript 2 code along with predefined behaviors and effects. Another important point to note for designers and developers is how quickly it is possible to generate a working UI prototype which can be demonstrated to users for quick feedback.

In fact, the whole Flex architecture should work well in an agile modeling framework where shorter design cycles, team programming and up front testing are emphasized. Flex fits well because with the many predefined behaviors, components and effects its easier to glue and test parts together early and often in the process of development. Flex's version control aids teamwork

as does the object-oriented framework of both ActionScript 2 and Java which are the two principle programming languages of Flex. Flex components are more easily re-used because their object oriented design allows them to be modified readily by several means including inheritance, composition and/or direct call.

The next example shows the use of standard CSS to style components of the Flex interface. Flex has a good message regarding use of familiar standards. ActionScript 2 is a subset of ECMAScript 262 version 4 otherwise known as JavaScript 2. The server side of Flex is developed in Java and will support output of backend control processes in J2EE and .NET (deferred to a later version of Flex). The styling of Flash screens can be modified by CSS stylesheets which many Web developers will already be familiar with. Finally, MXML follows XML standards and will also be familiar to many developers. So Flex will not incur a large learning curve.

The use of CSS is a good example. By using the mx:style tag users direct Flex to use a style file in a manner very similar to HTML usage. Then invoking the specific stylename is just an attribute in each of the different component tags as in the case of styleName="error". This is already a proven, fruitful styling mechanism thoughtfully carried through to Flex. Flex also supports skins so that the styling of whole screens can be rapidly changed by substituting skin files. Throughout Flex there is attention to separation of presentation and styling from programming and control functions. For example, transition effects like the appearance of a highlight with an error message until the

correct response/button is clicked or use of a glow highlight for the next field to get focus when filling out a complex form are readily programmed in Flex.The glowing field dims when the user starts entering values in the field. Likewise Flex allows delivering whole range of audio and visual cues or help by means of effects. In a later update review of Flex, we will examine Flex's effects, CSS stylesheets, components, in more detail. But the quick review shows that Flex is steeped in familiar forms and standards which should help to promote its adoption.

Summary

Flex is Macromedia's new Rich Internet Application development environ. It will not be alone with products from Adobe, BEA, IBM, Microsoft, Novell, Oracle, Sybase and others sure to challenge for a chance to deliver 8A's capable development environs. In short, Flex will be subject to tough competition and will succeed or fail on how well it meets users needs. But already it has met a number of internal Macromedia needs. First, Cold Fusion will get a real visually astute IDE as well as an XML up-to-date markup language. Macromedia will have differentiated its rich media plugin from the legion of 3D capable competitors from Adobe's Atmosphere through MindAvenue's Axel to Viewpoint's Viewpoint. Finally, with a full fledged data processing environ available for the Flash player, the Flash development tool may be able to swing a little more emphasis back to the drawing and design side of its key animation program. But overall, Flex certainly has some strong cards to play in the ease of development category because it, like PHP 5, reuses existing technologies - ActionScript/JavaScript, CSS, Flash, Java, J2EE, .NET in novel ways. This reviewer is still from Missouri on reliability, security, performance and compatibility with fast emerging portlet/portal and Web Services enablers, but Flex's pedigree demands developers attention over this year.

For more details see our Flash links and/or our Flash tutorials.

 Top of Page  Open Sourcery Home Tips & Tutorials  
©Imagenation 2001-2004