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
