10 Replies Latest reply on Jun 2, 2009 8:34 AM by Tvoliter

    How Is Fc different from Ps/Dw?

    Xaos
      I remember when they first started talking about this product. They described it as a Web design/programming tool for those who don't program. After watching the demo, it seems that programming is still needed.

      As a designer, who doesn't write code, I guess I wanted Fc to do it all. I do the design, and maybe there were preset "chunks" of code to "drag & drop".

      Do I have this wrong? how much actual programming is needed with Fc?
      Looking forward to trying this...

      Thanks

      Chaz
        • 1. Re: How Is Fc different from Ps/Dw?
          knave19
          Hey Chaz,

          From what I understand, you don't need to write any code. You basically import all your artwork from ps/il/fw and 'bring' it to life! It writes the Flex code in the background for you. If you have flex knowledge, even better because you can go into the code view and manipulate it. Once you're finished, you can export as a swf or export it to Flex, where flex programmers can add extra muscle to the back end.

          I come from the same background as you... all design - no code! Personally I have big expectations for this product. I really hope it doesn't disappoint. :)
          • 2. Re: How Is Fc different from Ps/Dw?
            Xaos Level 1
            Maybe I misunderstood the demo, but it seemed like I had to provide the code afterwards, but I'll check out the trial, when it becomes available.

            Thanks!

            Chaz
            • 3. Re: How Is Fc different from Ps/Dw?
              ryanstewartadobe Adobe Employee
              Hey guys. You're both right :)

              Catalyst has multiple workflows. One is the ability to create a standalone project from within Flash Catalyst using the CS4/5 tools. If you just want to create some interactive content and don't need to hook it up to data, Catalyst can do all that.

              But if you're working on a bigger project, you can take the project from Catalyst and open it up in Flex Builder to connect it to a data source or add some code to the project.

              Hope that helps!

              =Ryan
              ryan@adobe.com
              • 4. Re: How Is Fc different from Ps/Dw?
                Xaos Level 1
                Well then I guess my next question is how easy or difficult is flex builder going to be for someone who barely understands HTML?

                Just curious....

                CHaz
                • 5. Re: How Is Fc different from Ps/Dw?
                  ryanstewartadobe Adobe Employee
                  @Xaos, that's a really, really tough question. Flex uses a combination of XML (MXML) and script (ActionScript) just like HTML/JavaScript. That makes it a bit easier, but the Flex/Flash model is a lot different from the HTML model.

                  =Ryan
                  ryan@adobe.com
                  • 6. Re: How Is Fc different from Ps/Dw?
                    Xaos Level 1
                    Ryan:

                    Thanks for taking time out.

                    I struggle with code. It's not my thing. I can handle a little, but I get intimadated very easily. Don't get me wrong though, I will be getting Catalyst when it comes out. The real question is do I want to, or will I be able to handle the meat and potatoes of Flex Builder.

                    I would love to be able to handle both, but I know there is quite a bit of code involved. At some point, Adobe or some other company need to come out with a product that has snippets of code that can be dragged and dropped, and minor changes to code would accomplish certian things. The way it is now, you really have to know what you're talking about to build a complex project, and I just don't have the time to dive into Actionscript and/or XML.

                    For example, you know there a re programs that will let you drag a button to the screen, and all you have to do is change the OVER, DOWN and CLICK states to what you want it to do?

                    For popular things in web design or databases, there should be chunks of code that are "preset", and all you have to do is make a few changes here or there.

                    I know I'm asking for the lazy, easy way out, but I'm not a coder, and can't afford to pay one everytime I need something like that done.

                    Hope this makes sence.

                    Chaz
                    • 7. Re: How Is Fc different from Ps/Dw?
                      Mordy Golding Level 3

                      I posted something on my blog with a link to a few example that may help to better understand some of the uses of Flash Catalyst. It should also clearly explain the differences between Flash Catalyst and the existing design applications like Photoshop, Fireworks, and Illustrator.

                       

                      http://blog.mordy.com/2009/04/vector-iphone-skin.html

                       

                      - Mordy 

                      • 8. Re: How Is Fc different from Ps/Dw?
                        knave19 Level 1

                        Just checked out your blog page. Very cool stuff! I really don't have any experience with Flex but it seems like all Flex projects I've seen have the same pre-loader. Did you create the pre-loaders with Catalyst? Or are they simply built in?

                        • 9. Re: How Is Fc different from Ps/Dw?
                          Mordy Golding Level 3

                          Yes, there's a built-in preloader, which seems to be the default. Not familiar enough with Flex to know if there's a way to create custom preloaders (although I have to assume that even if there isn't such a way currently, that Adobe is planning on implementing it at some point).

                           

                          With regard to my example, all I did was publish a file directly from Catalyst (same as you would Publish a SWF from Flash Professional).

                           

                          Mordy

                          • 10. Re: How Is Fc different from Ps/Dw?
                            Tvoliter Adobe Employee

                            Hi Chaz,

                                Catalyst let's you define interactions and motion without programming. Instead of typing code, a designer describes the interactions visually using the timeline panel and the interactions HUD (heads up display).

                             

                            Check out my video here: http://labs.adobe.com/technologies/flashcatalyst/tutorials/firstapp/

                            You will see I don't write any code.

                             

                            I am not sure what demo you saw that had coding... perhaps the demo involved Flex builder as well? Catalyst does have a mode that shows you the underlying code, but in this version it is not editable so you cannot type code into Catalyst. Everything you create in Catalyst is created visually in the user interface.

                             

                            As far as how different Catalyst is from other design tools. Here is a small list of similiaries and some of the differences:

                             

                             

                            NEW CONCEPTS

                             

                            States - states capture the appearance of your design at different points in time. You can think of these as "screen" or "pages". At the top level, the application has states, and components (like buttons, text fields, and custom components) also have states. You add interactivity by describing what causes states to change. For example, you say: when the user clicks on a button, then change the state of my application to the "gallery" state and change the state of the navbar component to the "gallery navigator". Instead of programming, you define interactivuty visually.

                             

                            Transitions - transitions are animations between states. When you create an interaction that goes from one state to another, a transitions describes what the motion looks like. Transitions are edited in the timeline panel.

                             

                            Components - components feel similiar to symbols in Illustrator and Flash and a little bit like smart objects in Ps. Catalyst comes with built in components like buttons and lists, you can turn artwork into components, or you can edit existing components to change their appearance. The major different between symbols and components is components have states and behavior. Each component can have interactivity the describes how its state changes and components can have their own transitions.

                             

                            SIMILIAR CONCEPTS

                            Drawing tools/selections tools - very similiar to CS tools. Catalyst also lets you roundtrip artwork and components to Illustrator and back to Catalyst.

                             

                            Layers panel - one difference here is the layers panel shows objects across all states. Catalyst allows the same object to be shared across several states. To control sharing you just go to a state and toggle the eyeball for the object you want to share

                             

                            Properties panel - very similiar to CS tools

                             

                            Document structure - Catalyst imports both AI and PSD files and presevers the document structure.

                             

                            - Ty