Is Flash or Flex better to build a user interactive ordering "wizard" website?

i want to see if these "build a . . ." flash sites (to support a user customized ordering process) are done using regular flash or Flex?

1. Site 1
2. Site 2
3. Site 3
4. Site 4

All of these "walk a user" through a customized ordering process and capture all of their selection and showing them all of their customizations (and ultimately bring them to a final ordering screen).

What's going on under the hood on these sites and are built in flash or flex?开发者_Go百科 Is the person creating a separate image for every combination that you could possibly select or is something else happening here?

I still can't figure out if Flex or Flash is better for something like this. (why does adobe make these seemingly basic questions so complicated)

Are there any good resource or tutorials for try to build this type of functionality in flash on a website?

---

Flex VS Flash [Summary]

#Adobe FLEX                                     | #Adobe Flash
#Programmer based                               | #Designer based
+Rapid RIA (MXML for designers)                 | +Stage & Timeline Based
+Easy to build up simple stuff (think LEGO)     | -From scratch
+Skinning                                       | -No skinning
-Problematic skinning                           | +Easy to design graphical parts
-Missing several parts (graphically)            | +Easy to design graphical parts
-Lots of documentation reading (for everything) | +Err... bare functions?
-Bugs lots of it (And working around it)        | +Base functions may do little, but they are bug free
+Many "special" user interactions built in      | -Err... code it yourself
+Highly modular (file wise)                     | -Not so (though MovieClips are arguably modular)
-Size of .SWF (Including the flex framework)    | +Bare minimal stuff
+Access to special Mobile phone features        | -Neg
+ADOBE AIR -> Desktop application features      | -Neg
-Animated movies are near impossible to make    | +So you make them here and export them to FLEX

Long version

The question of Flash or Flex is really based on preference. For in your case, it is nearly interchangeable. Hence, to truely understand the major differences, you need to understand their history [sort of, it's a really long list down]

Flash [The older brother]:

Flash was created for the web display / distribution of vector based animation / graphics / application by Macromedia. Note that this was initially created in an era where Dial-Up is still common place. And drove to great popularity, due to its flashPlayer engine, displaying "stunning"/"wowing" animations / websites / applications despite its small small [.swf file] size. [Remember the era of splash pages?, and flash animations].

While initially having a small code base [AS1/2], that was originally meant for interactive animations. Many web designers, were quick to exploit the timeline, having different "pages"/"content" on each frame [think modern day states], and having multiple nested timelines via movieclips. It was crude, but it works =) And flash pages were seen almost everywhere.

Especially since it could work on any computer, any browser (a kick to both Apple and Windows).

And with the growth of flash, so was the growth of its code base (AS1 -> AS2). That was, till it was purchased over by its long bitter rival #Adobe. In which the code base was completely redone from the ground up, to the AS3 you see today. Which gave it a much structured coding base (as compared to the unplanned built up of AS1/2), along with a suite of many other features (better encryption, memory protection / etc)

Flex [The smart-ass younger sister]:

Unknown to most users of Flash, under the hood of the player, frames, timelines have always been "simulated" by code. And AS3 makes it much easier to manipulate the timeline via code. However Flash, has several drawbacks for the growing era of RIA (Rich-internet applications), that has gain momentum due to Flash / Java. Such as sever-client data connection (though there are work arounds), and more importantly...

The timeline...

Originally used to easily manipulate animations, Flex just kicks that whole system out of the window. And with good reason too. In many cases of RIA done in flash, you would have "movieclips" jumping to various frames, which simulates the current state system. And was actually counter productive to RIA development (Though it was mitigated by Frame labels), while producing huge un-needed overheads. As it was essentially simulating states.

Hence flex was born (okay, timeline is only one of the several reasons), taking away the roots of "animation" in flash (and the vector drawing capabilities). And recreating an IDE, that is mainly programmers orientated. (ever thought its weird to be greeted by an animation timeline as a programmer?). Timeline is out, states are in. And as an additional "icing" to the cake, MXML was born. As a means of rapidly prototyping and creating interfaces, for RAPID RIA development. Which became one of its major selling points.

FLEX: Allows you to rapidly create RIA for any platform / browser (your phone too)

Though the shift from timeline oriented flash to flex may be difficult (it was difficult for me), Flex at the end of the day proved to be much more suited for RIA development. While making coding much nicer then Flash.

Flash Catalyst [the child of the two]

The side-effect of FLEX, you can never leave Flash, if you need animations done, and gone is the simple stage that flash provided. Not the heavily XML based nested stage FLEX provided. Hence the "love-child" Flash Catalyst was created. (Though I suspect it may be based of WIX). As a means of rapidly designing flash websites. You see, a major major draw back flex had, was that it lack the "stage" flash had. And not all websites is meant to use the MXML templates given. And if you wanted to force your way (workarounds such as skinning), it was a pain. So this love child was created. (Try creating a simple custom graphic button in flash vs flex).

While retaining the timeline (sort of) and stage like interface of flash. It retains the state based properties of flex. And presto. Flash Catalyst was born.

It is generally meant as means to "create" the desired look / feel, for a website, before exporting it over to FLEX / FLASH. (Automatically, handling all the workarounds).

And they are all under the same happy family called ADOBE:

(Possibly, part of the marketing scheme). Is that all these products ARE INTERCONNECTED. And they support projects linked to one another. For example, a FLEX application can load a FLASH movieclip, which can be develop in a timeline based nature. Similarly, Flash Catalyst can export itself to flex.

So which is better? The answer is NONE! : Its a matter for style and preference. Personally, complex animations, are done in Flash (timeline-> then convert to AS3). RIA development is done in FLEX. And their incest child is unused by me (Its neither here nor there, sadly for it).

However if you have always been used to timeline based designs (art students?), Flex will kill you. Similarly, if you have always been a programmer in JAVA or C++, Flash will kill you. (OK, that may be exaggeration).

Additionally...

As for under the hood: Most likely a code base in AS3 that generates the permutation / combinations. I highly doubt that there is an image for every possible combination (cupcake), for it is much easier, to use various 'images/graphics' (cream as set A, cupcake base as set B, toppings as set C). And to tie each set to the given options. And 'generate' the final image.

And for tutorial, on those examples:

http://active.tutsplus.com/tutorials/flex/build-an-xml-driven-contact-list-using-flex-3/

Basically you have a custom display for each option, and stack them up. Though I suggest reading up a lot of the basic Flex tutorials before this.

---

Hm, I still don't really like any of the answers, so I'm going to chime in.

First question is "What's the difference between Flash and Flex?". At their core, they're one of the same. There is some confusion between Flash the platform (Flash Player) and Flash the tool (Flash CS); there's also Flash Builder which is a development environment made to develop in pure Actionscript or Flex. The Flash Player uses Actionscript to display what you need or you can use Flash CS to create visually what you want to show. In my opinion, don't use Flash CS unless you need a drawing/animation tool (which I don't think you do). With that said, the real question should be "What's the difference between Actionscript and Flex"? Well, there is none from a technical standpoint since Flex is made with Actionscript. What matters here is that Flex is a framework that's made for rapid rich internet application implementation. It uses the concept of layouts, skinning and styling as well as standard components (buttons, comboboxes, labels, datagrids, etc) to help you create striking applications easily and quickly. You could do the same thing in Actionscript, but would take you longer to implement the same thing, however the end application would be a lot leaner and quicker to download (normally).

Second question is "Should I be used Flex or Actionscript to create my ordering wizard?" which is the one I think you should really concentrate on. The answer is "it depends on your requirements". What Flex is really good at is a clear and concise codebase using development tools meant for user interfaces. If your ordering wizard is going to be fairly complex and/or data driven you should probably use Flex since it will give you tools to create it faster as well as make it easily changeable later. However, if the wizard is very simple and just needs to be implemented once, there's no reason why you can't use Actionscript to do it.

I hope this was helpful.

---

When i start - my 1st choose were Flash Professional, coming with Adobe CS's packs. It is not bad option for a just new programmer, as well it does offer "the creative approach". But a bit short u would like probably to get more control over your code, as well with growing your knowledge into the source, and object-oriented programming you will probably start looking for something which will provide you more power into exchange to creativity, then jumping into Flex probably will happen :).

My suggestion is :

• Start with Flash Professional CS5.5
• Learn about the timeline
• Events
• Objects
• Action Script 3 ( keep away from Action Script 2 )
• Classes
• Transitions

This will probably done your project. when you are ready with all of this, you will be probably ready to jump into deeper waters, and Flex will awaits you there to rebuild up to one fully growth project.

Then maybe you will start thinking about storing your user settings and changes he made, this is the server side, which will open you another super large and funny world to explore and understand. :)

.. just an add - just check the Youtube videos about doing things with Flash Professional. it will be really good powerup. :)

here some tools which u might more than enjoy into the process of creating things for Flash platform :

• Flash Professional CS5.5
• Flash Builder 4.5 ( Flex )
• Photoshop CS5.5

• Ilustrator CS5.5

• 3DS MAX 2010 ( for some super cool looking 3D models ) ;)

---

Short answer is to take best from both of them.

And here is a short story, which describe how big Flash project could be done.

Company receive order for a project X, and there are two departments are going to work on it, D (Designers who are going to create all fancy graphic for the project) and P (Programmers who are going to input some life into the lifeless design).

While guys from the P department drinking bear in the basement and creating data model for the project X, configuring software, and doing all routine stuff that are need to be done before starting a new project. Guys from the D department open Flash which is familiar for them, as they spent all their life in Ps,Ai and other Adobe products. (Flash is good, really good, if you want to play with a graphic objects. Move them left or right, add some fancy effects, create animation and stuff like that. Creating graphical objects for the future Flash project inside the Flash IDE is more natural.).

Nobody from the D department had never write a line of code, so when they finish creating first part of graphical assets they just compile this to the .swc file and pass it to the P department, where good fellows already start to wrote some code inside Flash Builder which is looks familiar for them, as they spent a lot amount of time coding with different programming languages inside Eclipse based IDE.

So in the end the project X, is nicely separated into the two parts: graphical assets which are created inside Flash - which was designed for creating animation, and graphic, and code which is written inside Flash Builder, which was specifically designed for this, because Flash wasn't really good for writing big amount of code.

===

Coming back to reality and your particular projects. I would suggest to create all screens(steps of customised ordering process) inside Flash, add a linkage for every MovieClips in the library(for the future use with action script). And after import those objects into your pure action script project. In this case you can have generic action script which you will use in different projects (as they are definitely would have some common parts). So you can reuse one code, and just change graphical assets for the different project.

In a case if you want to use only one tool Flash or Flash Builder(for coding Flex or Flash) in my opinion you should choose Flash Builder. Managing code inside it is a just a one pleasure, and I'm not sure if managing code is something that could be applied to the Flash.

---

I recommend you start your development in pure Actionscript, that way you can make it as powerful as the language is, you should try Flash Builder, create a project, and then try with it.

i think it will be very easy, once you get the basics of AS3

Some As3 galleries and tutorials for you:

http://www.lemlinh.com/flash-tutorials-18-as3-image-gallery-tutorials-roundup/

http://www.flashmagazine.com/tutorials/detail/as3_photo_gallery/

---

no he is not creating separate image for every combination . First he had created all the objects (clothes , human etc) in illustrator then imported them in flex using FXG format . Then its just simple drag drop or when you click button its event handler places the desired object at desired location .

---

The problem is more complicated than that. Since you can compile libraries in Flex and use them with Flash CS5, and create assets in CS5 and add them to a Flex project, the line is beyond blurred -- it might not exist.

My general preference for Flex is in situations where data binding is paramount. It doesn't do animations terribly well, but it has far better support for large class structures. Since it is built from Eclipse, Flash Builder (AKA Flex Builder) has the feeling of an IDE, whereas CS5 has the feeling of... another Flash Professional product.

On the other hand, if I am working with layout and animators in a very intense way, I will often rely on CS5 over Flex. CS5 gives them the ability to lay out things as they want with a very fine-grained level of control.

So, my guesses for the sites:

1. Probably Flex with imported assets -- this type of behavior is really typical for Flex components.
2. Once again Flex, but with fewer imported assets. The images have a "generated" feel, which leads me to believe that they are created by a computer and not as much by a designer.
3. This one is hard, but I would guess that it is high end CS5 -- there are a large number of well integrated animations, and while that is not hard with Flex, it is a lot easier with CS5. The repeated animations are especially typical of CS5 applications -- those are so easy in CS5...
4. Um.... I have no idea. I've actually had to do something remarkably like this in AS2 (in CS5... strange, no?), so I think that would be my guess. Pixel perfect mask placement is difficult if you have to manipulate the x and y as numbers.

What's happening (my guesses):

1. There are probably quite a few assets which were laid out ahead of time here. They would have been placed in a swc and imported into the Flex project and then swapped out at run-time. Some of these assets could be colored and displayed based on different masking tricks though -- manipulating primary and secondary color on a cake are easy fair for ActionScript if you know what you're doing.
2. I firmly believe that all of this is being done through Flash's native ability to manipulate images through code.
3. Most of these assets were laid out ahead of time, or I have to meet this guy and shake his hand, because that is just impressive.
4. Well, when I did this in CS5, it was simply a case of adding assets to a custom image distortion library, and the colors was done by adding filters to it.

As to tutorials... I don't know any which would help in this situation (that isn't to say that there aren't any, I just don't know them). Sorry.

As a bit of an aside, I've found that quite frequently Flex and CS5 are treated as entirely separate beasts. That kind of makes sense -- they have some very different paradigms. That said, a programmer has no excuse for not knowing enough to switch between them.

---

Flash is quite old stuff for building (simple) animations, think of it like a way to create graphic elements and animations.

Flex is a framework for the developers. You can develop applications with it.

A software developer should definitely go for Flex, on the other hand there might be some clicking tools for building Flash animations for people who do not wish to program.

You can hardly distinguish how the sites were built, because the result gets compiled into binary file (you might do a guess based on the file size in some cases)

---

The first site you linked is especially quite nice - you can tell the programmer put alot of work into it.

Have you worked on Flash before? The reason I am asking is because it is quite a different beast - requires both left and right brain to fully grasp. If you are just starting and want to build a site similar to the ones you linked then I will recommend 'pure' Flash with CS4 (or 5 if you can afford it). Reason being that Flex (now called Flash Builder - no confusion there haha), is really geared towards building form based websites. Yes, you can build other Flash type animations in there but its much harder to do (well), than just using Creative Studio.

Now, you might find that you eventually want or need to use Flex, but trust me you can build an entire web page with just Creative Studio complete with interaction and complex navigations. Here are some sites that may help you in your task (which is a large one btw!):

• http://tutorials.flashmymind.com/ (Mostly for nice looking effects and slick interface)
• http://www.flashkit.com/tutorials/ (Tons of tutorials on lots of different areas of Flash).

The second site has alot of tutorials for things you will need, like how to build menu items and buttons, and also how to handle user interaction (mouse moves, drags, key clicks etc). Your also going to need to know ALOT of ActionScript. Here's a good reference for that:

• The ActionScript 3.0 Quick Reference Guide

It's unfortunate you cannot use HTML 5 for this project. Making a major investment in learning Flash seems like a waste of time to me. But hopefully the links provided help you in this task and please make a comment if you need more info.

---

Flex

I strongly recommend you use Flex because you need a clear cross platform, cross browser RIA (Rich Internet Application) solution.

I can give you some useful reasons..

1. Even if Flex and Flash share some common aspects in background, Flex lacks some loop-holes which Flash have. Your site design and layout is 100% safe with Flex.

2. Flex has predefined functions and classes that enable us to read or synchronize data perfectly. These predefined functions and classes will work for us automatically so that we can focus on animation and interactivity. First, try to use it and see the difference. Personally, I am using Adobe Flex as tool to create RIA (Rich Internet applications).

3. I have kept a function in flash to real XML file and parse it to next or previous record and I was passing this function once needed. Now and with Flex, we have predefined http classes that will work after passing URL.

4. RIAs developed into Adobe Flex is the cross browser and platform compatibility. Rich internet application developed in Flash player.Implementation of Flex player made the Adobe Flash Player to more and more user’s machine.

5. Adobe Flex product family helps IT organizations take advantage of existing skills and infrastructure to efficiently deliver a broad range of RIAs that can scale from simple marketing applications to mission-critical enterprise applications.