5 Replies Latest reply on Oct 28, 2009 5:05 PM by Mark E. Shepherd

    feature request

    jhoefs

      Hi,

       

      After taking an afternoon to test Beta 2 on a complex UI design I have some suggestions:

       

      1. You need to add the ability to create masks. I understand there are some work arounds, but masks should be a non-trivial add especially considering how easy they are to use in Flex. I suggest allowing the user to identify an object as a mask (either something created with the drawing tools available in Catalyst, or using imported assets). Then the user can associate objects to be masked with a mask (perhaps via a drop down list containing available masks). You should be able to select a single object or group of objects to be masked.

       

      2. Text alignment. I don't understand why the ability to align text (left, center, and right) is not in this beta. Also 'point text' and 'area text' are not very intuitive.

       

      3. Scrollable lists (using direct manipulation, not scroll bars). This one is a bit more complex so I can see why it probably hasn't been implemented yet. I thought Scroll Panel would do this, but it doesn't. The desired behavior is to have something like Data List for example but you can use the mouse (and ideally touch if the target platform is a touch enabled device) to directly scroll the content. Maybe the user could define dragging bounds and then be able to drag/scroll an object within these bounds.

       

      Since I'm also a developer I have a few suggestions that can make the output a bit more developer friendly. One thing that would be awesome is the ability to select a skinned component and export the code for that component. This would allow designers or developers to skin components in Catalyst and then export the code for that component and hand it off to a developer. Currenlty I would have to cut and paste everything out of the single file exported by Catalyst (which is not an ideal workflow for any developer I know). One of the drivers here is that visual designers don't really think in terms of components (well I'm sure some may), they approach a composition as layers of visual elements. Therefore I don't think many visual designers will be able to effectively use Catalyst. Someone like myself, however who is an interaction designer and also a developer could really get a lot out of Catalyst. For a wire-frame oriented exercise I'd use Catalyst to add interactive elements in order to better show intended transitions and ui behaviors and simple share the swf or AIR app with the client for feedback. However for a high-fidelity prototype I would inherit polished graphics (that are also likely going to change during the development process) from a visual designer. In this case if I could use Catalyst to skin the components, export the code for the individual components (as separate classes) and then use that code in my Flex project that would be a dream. What would be even better is once I have skinned a component in catalyst, if the visual designer changes something I can get the new file and update the component automatically due to the (linking between Illustrator or Photoshop and Catalyst), export the code and bring it back into Flex/Flash Builder, effectively changing the visual design without having to make major adjustments to the code. The current way code is exported from Catalyst doesn't help at all unless my only intent would be to add a little extra interactivity. There is a whole other use case for Catalyst that seems mostly unaddressed.

       

      best,

       

      -jeff

        • 1. Re: feature request
          Mark E. Shepherd Adobe Employee

          Hi Jeff, please take a look at my remarks here and let me know if these answers address your issues....

           

          [You need to add the ability to create masks]
          ... agreed, this is one of the highest priority features for post-1.0.

           

          [I don't understand why the ability to align text (left, center, and right) is not in this beta]
          ... there are so many possible features, we couldn't get everything into the first release. Our decision was to focus on features that are really unique to Catalyst and that solve problems that are not solved by other tools. Masks and comprehensive text formatting are already available inIllustrator and other tools that interwork with Catalyst, so for now you'll have to use those tools to do this kind of work.

           

          ['point text' and 'area text' are not very intuitive.]
          ... I'll pass on your comment to our UI design folks.

           

          [Scrollable lists (using direct manipulation, not scroll bars).]
          ... cool feature idea. This would be more of a Flex feature, not really a Catalyst feature per se. But I'll definitely pass it on to the Flex team.

           

          [the ability to select a skinned component and export the code for that component. export the code for a component and hand it off to a developer. Currenlty I would have to cut and paste everything out of the single file exported by Catalyst]
          ... We don't have a way to do individual skins, but there's 2 ways to do something similar:
          a) in Catalyst's Library panel, do Export Library Package... to create an FXPL file. The FXPL can be imported into Builder as a libray project, and referenced from other Builder projects.
          b) import the Catalyst project (FXP) into Builder, and then selectively move component source files into other projects as desired.
          You can find more details at http://www.adobe.com/devnet/flashcatalyst/articles/flashbuilder_flashcatalyst_workflows.ht ml

           

          [if I could use Catalyst to skin the components, export the code for the individual components (as separate classes) and then use that code in my Flex project that would be a dream.]
          ... in methods (a) and (b) above, the code for individual components is indeed avaialable as separate classes that you can use in your Flex project.

           

          [What would be even better is once I have skinned a component in catalyst, if the visual designer changes something I can get the new file and update the component automatically due to the (linking between Illustrator or Photoshop and Catalyst), export the code and bring it back into Flex/Flash Builder, effectively changing the visual design without having to make major adjustments to the code]
          ... in methods (a) and (b) above, you can repeatedly re-import the updated skins into Builder, without the need to revise any of your code.

           


          Mark Shepherd
          Catalyst Engineering

          • 2. Re: feature request
            Mark E. Shepherd Adobe Employee

            PS. take a look at the recent thread "Masks in Catalyst?" which describes some techniques for creating masks in Photoshop / Illustrator for use in Catalyst.

             

            -- Mark S

             

             


            • 3. Re: feature request
              jhoefs Level 1

              Thanks Mark. I'll try out the workflows you described. Thanks for the link.

               

              -jeff

              • 4. Re: feature request
                jhoefs Level 1

                There is one other feature that would be nice that I forgot to mention above. That is the ability to group states. Perhaps this is what the 'pages' would be in pages/states? For example a common UI flow begins with a home screen. From that home screen you can jump to a few different 'states' of an application. However each of these 'states' has it's own states. So it would be nice if you could group states and then on a high level go to a state group. In this scenario you wouldn't be able to go from the home 'state' to any state in the application, but only states (state groups) accessible from the home screen. This would also help keep states more manageable in Catalyst and also the number of options in the Timeline for state to state transitions greatly reduced.

                 

                -jeff

                • 5. Re: feature request
                  Mark E. Shepherd Adobe Employee

                  Hi Jeff, there is a way to do something equivalant... Use a separate custom/generic component for each group of related states. So let's say your home screen has "login", "query", and "results" states. The contents of the 'results" state (for example), would be just a custom component, which has various states of its own such as "viewByIcon", "viewAsList", etc...

                   

                  -- Mark S