The Difference Between Flex and Flash

^{By Grant Davies and Lee Syvester}

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 Interactive 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 the Flash was created to enable animators and illustrators to provide visually appealing experiences on the web, Flex was design 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, 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 use it to build applications instead of animators. Developers are not good designers, but with flex the 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, 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 you would

 

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

2)    Graphic designer lays out the design in Photoshop

3)    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)    A 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 design the IA, Designer and flash animator created and never opens Photoshop.

 

Flex allowed 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, costs are reduced, the end result is better and does what they client wanted it to do.

 

Highly interactive websites – Flash is obviously is 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

Comments

[Jamie McDaniel]

Thanks for the rundown. I had a potential client who had developed a huge kiosk application in Flash and I had recommended they move to Flex in the next version. They asked me to explain the difference and I said some of what was in this article. I also pointed to my ActionScript posters that detail all the classes. I said "This one poster is for all the core classes that come with Flash Player. These other four posters are the classes that come with Flex."

[Grant Davies]

Thanks Jamie, it is hard to describe. I personally use flex for even small things, we had to do a banner rotator for http://www.atlantasymphony.org/home.aspx that would be driven by an xml file and it only required simple fades, so we did it all in flex. I use flash when we need more natural animation. You are right that flex comes with a bunch of other classes and libraries, but I think people often get confused and think all flex apps will look like typical "applications" with combo boxes and grid controls, when flex can do whatever it is you want and can look however you want.

[Grant Davies]

Jamie, just a thought if it helps you with your client, checkout the Target "gift registry" at any Target store if you're in the US, they are all Flex kiosks.

[Bob]

Hi Grant,

Stumbled across this post while trying to get my head around Flex/Flash/AIR.

I'm not a developer or designer but have dabbled in various things like php, java, html, css for a long time. I'm fairly "functional", IOW, just not technical as a true developer would be.

I want to come up to speed moreso on the development side than the design side of things so I can create rich web apps (along with cross-platform desktop apps).

Flex seems to be the way to go for the former and AIR the later.

If I'm understanding things correctly, the underlying thing I definitely need to get good at using is action script.

So here's my question:

If you were a newb starting over and looking to do what I am, what's the fastest way to learn to develop with Flex/AIR? I figure I can outsource the design side to someone else.

Would starting by mastering Dreamweaver CS4 be a good approach (since it can do at least some of the web/AIR stuff)...and then moving on to fully learning Flex/actionscript? Or do I just bite the bullet and learn Flex from the outset?

Interested in your thoughts about any sites, books, courses, etc. that you think would help me get from point a to point b fastest with the least amount of pain and frustration.

Thank you,

Bob

[Grant Davies]

I would install flex builder the evalution copy of Flex, and buy two books, one to learn actionscript, the other to do real flex development (the api's that you would use to build flex applications)

Action script 3.0 -

http://www.bestwebbuys.com/Essential_ActionScript_3_0-ISBN_9780596526948.html?isrc=b-search

Flex development

http://www.bestwebbuys.com/Programming_Flex_3-ISBN_9780596516215.html?isrc=b-search

[Nofortee]

Thanks for hard working,Grant... This is a fantastic,useful,and unbelievable article. I'm a rookie in both flash and flex. I've been working on Asp.net on .NET Framwork for a long time. After I heard about Flex,I try to google some helpful informations about Flex and Flash. NOW,I really really know what it is...

Thanks,again

[Grant Davies]

You're most welcome Nofortee

[jayapal]

Thanks for hard working,Grant... This is a fantastic,useful,and unbelievable article.
I've been working on Java/j2ee for a long time. After I heard about Flex. NOW,I really really know what it is...

Thanx again to u..

[Grant Davies]

You are very welcome Jayapal, I was a J2EE architect for about 12 years, I still do some JAVA for backend stuff, but do a lot more flex now. Good luck in your studies of Flex.

[Martin]

Hi Grant,

Very nice description. Good advice you gave in the comments.

I am glad to see there is a lot more activity on your blog this year.

I will have to look at pureMVC.

[Grant Davies]

Thanks Martin, yeah I was slacking a bit least year too busy, now I make sure I make "time" :)

[P R Sekharan]

Hi folks,
The differences between the flex and flash has given very good.

[Sherwette]

From where did you get the 95% statistics of Internet users installing Flash Player? Please replay as I will be using this in my research paper.

[Grant Davies]

Hi Sherwette, there are some independent companies providing stats like Forester group, but here is a link to adobe's stats that "could" be biased :)

http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

[bharath reddy]

Hi Guru,
Thanks for the explanation. I'm a web developer of sorts but am new to both flex and flash. When I wanted to start, I got confused where to start. After reading this I know, i'd start with the trial version of Flex installation, a book each for flex and actionsript. Thanks again.

[Liviu]

Hi Ginormous writer

I'm a Flash IDE developer, and I have grown to be very effective in the Flash IDE. I do my most complex animations and graphics using the Flash designer tools, and then use them in AS files I write using the same Flash IDE, where I can do anything web-based, including reading from large databases, working with complex XMLs, and all sorts of developer logic.

I recently started flirting with the idea of using Flex instead, but I didn't know much about it, so I got to your post. And as far as web based apps go, I can't really select what is useful to me from your presentation, which seems to be intended for people who have a hard time writing AS classes. How is the development part easier in Flex? And how was it hard in Flash IDE? Because you are wrong about the designer needing to know developer skills. Designing and developing are done separately in the Flash IDE.

And I'm a bit confused about AIR and FLEX. I understand that AIR is just a platform, that offers more features than regular Flash AS3 language? And that the Flex compiler can make full use of all the new features of AIR? Whereas Flash IDE developed SWFs only run on the Flash Player Runtime, which offers less methods and features. So I'm considering AIR = FLEX, and FLEX includes FLASH, in terms of available methods and predefined classes. Am I right?

Thanks

[Grant Davies]

Hi Liviu.

I think the "essense" of working on flex to build flash player applications over the flash ide can be summarized as follows, but of course this is just my opinion/experience

* Flex has a real debugger, you can put in breakpoints, inspect variables, and pretty much do away with "trace" statements, its feels more like debugging a java or C3 application since the flex pluging for eclipse was designed for developers.

* The flash IDE on its own, doesn't give a "great" project level view when you have a lot of classes and files, you can add plugins to the Flash IDE to do this and you can use 3rd party tools like FlashDevelop, but personally I find the flex plugin for eclipse superior to these for developing actionscript 3 projects. Code completion in the flex ide is very well implemented, I also find its more verbose on error and easier to track down both syntax and runtime errors. I launch the flex ide with the debugger 100 times a day when developing and found it a much more efficient development process than I did launching a flash IDE project a reading trace or logging statements.

* As an example we just built defendthedome.com in flex. Our flash animator created all the Flash assets, including timeline animations where necessary, we converted these to Flash components for flex using the component kit extension for flash. We exported swc files that where then imported into flex and we instantiated them and used them like you would use a button or list box. We have over 100 flash components for the games that are as simple as buttons, to as complex as a driving game screen, doing it this way, made a fairly complex app managable. I've built very large apps in flash, and I found it more difficult to manage in the Flash IDE than in Flex Bulder.

* I also think flex is more familiar to a traditional programmer, there are programmers who are good at animation and there are animations who are good at programming but I don't think its common, and taking a traditional developer who does java or C# tends to find developing in Flex more natural than developing in the Flash IDE.

* The main differences between air and flex/flash is the api has additional features for local machine access, you have an embedded database to store complex data on the users machine ( so you don't have to store it on a server). To be honest air is not "hugely" different, its just additional apis, less restrictions than a flash player file, however there are more considerations in an air app than a flex app, like saving state of the app, e.g. browse for file dialogs, they should go back to the folder you last browsed, when the app closes should it save its layout?, Since you now have more access to the local machine, what types of hacks could infect your app and cause vulnerabilies or data loss. So Air opens another "set" of considerations rather than being necessarily different from flash or flex. One other thing is air can be authored in javascript instead of as3, for those more familiar with JS.

[Liviu]

Well, that's more like it :) That's a nice set of differences for the more experienced AS developer. I must admit I missed in Flash IDE the FLEXibility of writing code and debugging like the one found in Visual Studio for example; there is debugging in Flash(with breakpoints and the works) but maybe it's not so easy to use. I still don't agree fully with your description of SWC compiled clips and how you were able to use them in Flex, because it's the same way they can be used in Flash AS files, and why I just love OOP ( game = new VeryComplexGame(); *smiles* ). But anyway, Flex seems to be what I've been missing in Flash all this time, especially that autocomplete, up to CS3 at least, I don't know about CS4, it was almost useless. I'm going to give it a go.

Thanks

[Grant Davies]

The whole "swc" thing is basically that we can keep the "cool animation" from flash that is often timelined to make it "just so" and not loose that in flex. To me I find that developers are more efficient in flex, so even if you *can* do it in the Flash IDE, often its easier in flex. Word of warning, at first there will be things you hate due to moving to a new tool, but persevere, its worth it, I developed in the flash IDE for about 2 years and built a dashboard for role base authorization, I then worked on https://www.reebok.com/US/#/YourReebok in actionscript 2 with the flash IDE, mtasc and flash develop. I've been working in the flex ide for about 3 - 4 years and I won't go back :)

[Tomas]

Thanks, this was a very clear and helpful discussion!