The Difference Between Flex and Flash

Introduction

I was asked recently by a friend, what is the difference between Flex and Flash. Outside of the flex world, people think Flex is another language, granted Flex has mxml, but that becomes Actionscript 3, so Flex to me is really a suite of tools and an environment to build bigger, more reliable more complex Flash applications.  You can do anything in Flash you can do in Flex, but its often harder. You can also do anything in Flex without Flash, but it can be harder (detailed animation for example), but Flex, using graphics and animations and audio done in Flash, give you the best applications that can be viewed in any browser with the flash player installed. Since Bluetube does so much Flex and Flash development our "vision" is colored and we find it sometimes challenging to describe the difference.

 

The following is our “draft” attempt to describe the differences. Lee Sylvester used author skills to write most of it; I just added some clarity here and there. 

 

Flex provides the ability to create a SWF file (flash player files) that run on the Adobe Flash Player in any web browser. Just like Flash was created to enable animators and illustrators to provide visually appealing experiences on the web, Flex was designed for the same purpose, but Flex is Flash’s “big brother”. It’s the same “technology”, but the way applications are built is different and allow much more complicated applications to be built by software engineers instead of animators.

 

The closest analogy I can come to is to suppose you are a house builder.

 

Flash – build a house

You hire a plumber, a carpenter, a window guy, a concrete guy and some general laborers, you give them hand tools and you say “build me a house”.  They can do it, but it takes time and a very “fancy” house may be difficult without a crane or bulldozers.

 

Flex - build a house

You hire the same guys, but you also get a 3 cranes, 4 bulldozers and 5 other guys for free.  The house is still a house, but it can be built faster, or can be more complex, can be bigger or can offer features that would not have been possible with the guys and hand tools.

 

Flex is not a new language (it does use MXML, but that is converted to Actionscript and most of the hard work is done in Actionscript). It uses Actionscript just like flash does, but it comes with a lot of extra features to make more intelligent applications.

 

Flash pros:

 

Great animation controls

Great sound control

Familiar to designers

Most designers are not good at programming. They can make it “work”, but they’d rather be doing design or animation, so getting data from a database or xml is not their skill and they often do it inefficiently or simply have to tell the clients “it can’t be done".

 

 

Flex Pros:

 

Great “business” logic

Can connect to “any” data, mainframes, xml files, database, legacy systems; it can get information from ANYWHERE.

 

It’s a more traditional way of building software to software engineers who use it to build applications instead of animators. Developers are not good designers, but with flex they can use the great work a designer has done, and implement the business logic, therefore we have the best of both worlds: designers doing design, programmers doing code.

 

Examples of applications

 

You want to create piece of software where it has a person’s face, and you put different hairstyles on the face just for fun and you want to be able to upload your face or your friends face and then share it so you can all laugh at your friends with green spiky hair.

 

Flash

 

1)    You create the graphics in flash

2)    You have some “place” where the hairstyles are stored maybe xml files, or a database and the supporting images

3)    You have a place where the pictures of “friends” will be stored after they are uploaded.

4)    You learn how to do “social bookmarking” with either javascript, flash or some other language.

 

In Flash, this would require a designer to learn a lot of programming skills, or a developer who doesn’t really understand flash to figure out “how” to do it.  Some developers are good in flash, but it’s not common.

 

Flex

 

1)    You create the graphics in flash

2)    A developer creates Actionscript 3 code in the Flex Builder (A tool for developers to build software) , the code knows how to load hairstyles, add images, upload updates etc.  This is very easy for a developer since this is “normal” work for a developer, loading files, reading data, talking to other “systems” (social bookmarking).

 

There is SEPARATION of concerns here, the “animator” works in flash, the “programmer” works in flex, and they can now build MUCH more complex applications.

 

Another example

 

Carpet Configurator :

 

You want an app where you can choose from a set of carpet patterns, you can change the size of a single “square” of carpet and you can add a border to that carpet and change the color.  A graphic designer and information architect can figure out how to make this “look” nice to a user and how to make it “work” logically to a user, but tell them they have to be able to load in 500 different carpet styles, allow various colors and then dynamically add borders and they are out of their league.  In this scenario:

1)    The Information Architect designs the useability/layout (or a good design may be able to do this)

2)    The Graphic designer lays out the design in Photoshop

3)    The Flash animator / Graphic designer design the “transitions”, “fades”, “blurs” and motion that should exist to make the application feel “attractive” – e.g. the iPhones carousel that shows your itunes library.

4)    The Flex Developer writes Actionscript code in the Flex IDE to load in all the different carpet designs and code to allow the user to change the color of them and the code to add borders too them. He follows the IA and designs the IA the designer and flash animator created and never opens Photoshop.

 

Flex allows serious programmers to produce software that is distributed the same way flash is distributed. The biggest difference is they can now offer exponentially more complex software.

 

For example good applications of Flex :

 

Banking applications – Flash can be used to present an attractive interface, charts, graphics, nicer buttons, app doesn’t look like a “webapp”, its looks “sexy”, flex can allow the “data” to come from banking systems like mainframes and large databases.

 

Configuration applications – Flash has been used to configure cars, kitchens, gardens, garage doors, but at a great cost. Using flash to produce the look/feel and flex to do the “logic” is way more cost effective, as costs are reduced, and the end result is better and does what they client wanted it to do.

 

Highly interactive websites – Flash is obviously used to build websites, but if the website includes a “game” , a loop player where you can make your own beats, a place where you can “Draw” your own pictures (since user generated content is now so popular), this can be done in flash but it’s much much more cost effective to do the look/feel/experience in flash, but business logic in flex.

 

 

This is the more technical details on flex below :

 

Flex was created to orient the Flash platform toward application developers, therefore opening a path to infinitely extensible Rich Internet Applications (RIA). Just like Flash can create SWF files, so can Flex but the way you develop them is completely different.

 

Flex is For Developers

 

Flex was not built for animators, writers, accountants; it was written for software developers and the paradigm matches the development methodologies they already know. If you know Java, C, C++, C#, Delphi, VB, PHP, ColdFusion, Python, Ruby or any other number of programming languages and environments, then you can learn Flex with little effort. The goal of Flex when it was created was to make a development paradigm that developers could learn easily by matching the methodologies they already knew. The exception is that the resulting output for their creations is the SWF file format for the Flash Player (and now AIR). Flex has classes, components, a compiler, a debugger, class libraries, and uses XML (MXML) for declarative markup of components. The same ActionScript programming language used in the Flash IDE is also used in Flex, so advanced Flash IDE users can learn Flex with minimal effort, while at the same time, being introduced to a powerful framework that increases the applications possible for the Flash player.

 

Flex provides most of the UI components that Flash users know and already use ( like the button, list, datagrid, combobox, and tree components) but it also supports containers like HBox, VBox, TabNavigator, TitleWindow and many others. If you have written software before you can learn Flex easily. Better still is that Flex is compatible with all HTTP servers, version control systems, and any server side programming language, so the knowledge you have of servlets, php, ASP.NET, or JSP is really handy. Flex just lets you program the client side in a paradigm developers already know and understand.

 

Flex is for Making Applications

 

Flex was built for making rich client side application behavior. It wasn't built for making web pages, banner ads, or server side logic; it was built for creating client-side applications that run over the Internet talking to remote servers. Flex has been used to make some really great apps like Buzzword (Document Editor like Microsoft Word but in the web) or Picnik (Photo Editor/Manager for touching up your best snapshots) or SlideRocket (Presentation software like Apple Keynote but in the web) or Oracle Sales Prospector (An enterprise ERP application. Yes Oracle uses Adobe Flex! ) or many other applications you can see at Flex.org. The real key is that all these examples provide an application experience just like desktop software.

 

Flex Applications Run on the Web

 

Flash Player 9 is installed on more than 95% of computers that use the Internet and has been installed more than 3,500,000,000 times at a rate of over 10,000,000 times per day. When you develop software, you want it to run compatibly in as many places as possible. Adobe Flash Player provides a solid foundation to build these experiences without the need to install or update anything on the end users computer. If you were running a store you would want that store available to as many customers as possible and choosing Flash Player allows you to provide a great experience (rich) to 95% of the web (reach). If you choose something not widely installed or incompatible, you are simply turning away customers and business.

 

Flex Applications Run on the Desktop

 

Adobe AIR is a new runtime in development by Adobe that enables the developer to write desktop software that runs on 3 operating systems ( Mac, Windows, Linux ) with the same file. This allows your applications to run as true desktop applications rather than just a website and allows you to do much more than the web provides today. AIR applications are real native desktop applications and provide APIs for writing files, drag-and-drop, system notifications, network detection, and more. AIR empowers developers to write desktop software that leverages the Internet.  The biggest thing here is a Flex developer can learn AIR in a few days since the language is still Actionscript 3, there are just some new features that are “desktop” specific.  But it’s very easy transition for a Flex developer to write desktop applications.

 

Flex Can Be Styled and Skinned

 

Flex makes it far easier for developers to skin, style, and restyle any applications built using its framework. Styles are much like Cascading Style Sheets (CSS) that alter the look and feel of your application using a notation like scripting language, while skins are graphical elements that make the core look and feel of your applications. Flex skins can be created using the Flash IDE, Photoshop, Fireworks and Illustrator to provide rich look-and-feels for your Flex applications.

 

Flex Can Work Alongside the Flash IDE

 The Flex development environment can work with content produced by the Flash IDE. This provides regular applications built with the Flash IDE with the power of the Flex framework and development tools. Using Flash and Flex together, developers can build complex logic applications and experiences while utilizing high design content and animations.

 

Thanks

Grant Davies & Lee Sylvester

Posted in: Content | Permalink

Grant Davies
Posted by Grant Davies