11 Replies Latest reply on Oct 21, 2010 11:34 AM by bryanleister5280

    Scaling / Resizing Catalyst Components in Builder

    Kirk_Holbrook Level 1

      Hi,

       

      I'm looking at setting up the proper workflow for a large project. We envision multiple developers and multiple designers on the project.

       

      The major sticking point now is scaling and resizing the components generated by Catalyst once they're in Builder. One would think that once you've skinned, for example, a scrollbar in Catalyst that you could then resize it in Builder to match different layouts.

       

      However, as I suspect you already know, the sizes do not change at all in Builder.

       

      We can get into the source code in builder and add in a bunch of width/height = 100% attributes, but these break down at the point that there are Paths defined in the code. The Path elements would need to be re-coded to scale.

       

      So, I really have two questions:

      1) What exactly does "Convert to Optimized Graphic" do? Will this recreate all Paths to standard shapes that will scale?

       

      2) Is there a better system coming in the next Beta? If so, can you describe it a bit?

       

      Thanks a lot,

      Kirk

        • 1. Re: Scaling / Resizing Catalyst Components in Builder
          acath Level 4

          Hi Kirk,

           

          1) There are several ways to scale paths:

           

           

          •   Convert the path (and other artwork, if desired), to an Optimized Graphic, then set its size. An instance of an optimized graphic behaves like any other component in Flex - you can set 100% width, etc. An optimized graphic is a separate file containing the graphics (like a component - but just graphics). It is optimized because Flex doesn't have to create each graphical object separately - it can process the file quickly and render it using low-level Flash drawing commands.

           

          •   Put the path in a group, then set the group's size and set resizeMode="scale" on the group (the default mode will just create extra space in the group).

           

          •   Set scaleX/scaleY on the path directly.

           

          2) In general, features to support resizability are not planned for the first version of Catalyst. Resizability can get pretty tricky -- picture grouping some stuff, then putting a 9-slice scaling grid on the whole group, then rotating the group, then resizing it... etc.  Rather than rush out some resizability features that might be confusing or unweildy, we think the safest bet is to leave resizability as the developer's responsibility for the first version and then take more time to make sure we get these features right in a future version of Catalyst.

           

          -Adam

          1 person found this helpful
          • 2. Re: Scaling / Resizing Catalyst Components in Builder
            Kirk_Holbrook Level 1

            Thanks, Adam. That's helpful.

             

            A couple questions, however:

            1) When you say: "Put the path in a group, then set the group's size and set resizeMode="scale" on the group (the default mode will just create extra space in the group)." -- that has to be done in Builder, right? I'm not seeing a way to set the resizeMode in Catalyst. If it's not in Catalyst, it would be nice to have it there (esp. with the lack of a round-trip workflow).

             

            2) Similarly, the scaleX/scaleY solution would have to be done in Builder, correct?

             

            The issue with either of the above is a lack of user-assigned IDs. We can get around that, but to make things work well with a workflow that allows re-editing the Catalyst project, this gets trickier.

             

            And a couple of suggestions:

            1) When creating Optimized Graphics, it would be nice to be able to give them names (much like my other post that you commented on earlier).

             

            2) I realize that 9-slice is tricky, but I think it's a necessary feature sooner rather than later. Applying 9-slice then rotating and resizing is a specific pain point perhaps, but I think people adapted to these types of situations with Flash Professional without too much difficulty. Just my 2 cents.

             

            Thanks again for your response!

            Kirk

            • 3. Re: Scaling / Resizing Catalyst Components in Builder
              acath Level 4

              Hi Kirk,

               

              1a) Yes, you'd have to do this in Builder. I assumed you were in Builder already, based on your last post.

              2a) Ditto.

               

              1b) You can - just double-click on the optimized graphic in the layers panel.

              2b) I hear your pain. It's definitely near the top of our list.

               

              -Adam

              1 person found this helpful
              • 4. Re: Scaling / Resizing Catalyst Components in Builder
                Kirk_Holbrook Level 1

                Thanks again, Adam. This is helpful.

                 

                We're still working on nailing down our workflow and my questions are a reflection of our attempts to keep the code clean coming from Catalyst -- so we don't have to re-edit code that we've already tweaked, if a minor modification is made in Catalyst.

                 

                Kirk

                • 5. Re: Scaling / Resizing Catalyst Components in Builder
                  timoxley Level 1

                  Hey,

                   

                  We're having the same issue regarding no 9slice/resizable component support, making catalyst fairly useless for anything but the initial mockup

                   

                  I've posted about this in "catalyst ideas", please vote &/or comment:

                   

                  http://ideas.adobe.com/ct/ct_a_view_idea.bix?c=DA4859AD-8934-4F93-983A-4219E2DD9275&idea_i d=7C340451-271E-4C0D-AF5E-E32CFAB244EC

                   

                  Thanks

                  • 6. Re: Scaling / Resizing Catalyst Components in Builder
                    timoxley Level 1

                    Hi, I'm having some major issues with resizing code generated by catalyst. Would someone with some knowhow please take a look at this, it should be simple...

                     

                    http://forums.adobe.com/message/2580820#2580820

                    • 7. Re: Scaling / Resizing Catalyst Components in Builder
                      piercer2 Level 1

                      This morning I sat down to use catalyst for the first time. I am preparing for a talk at Flash on The Beach in Brighton this year and I was hoping to be able to show how a view build in Catalyst could be injected into an app using Robotlegs.

                       

                      I watched http://tv.adobe.com/watch/adc-presents/create-spark-component-skins-using-flash-catalyst and thought that looked cool.

                      I also watched http://tv.adobe.com/watch/flash-catalyst-cs5-feature-tour/sending-your-project-to-a-develo per, and saw the component library output looked awesome.

                       

                      So I started to build an interface, first by creating a custom button component (much like the first video) and then distributing those buttons in a completely custom button holder component. It is this button holder that would be injected, and in the holder each button would have an id so that references to them could be obtained after injection into the application.

                       

                      From the videos above this looked eminently doable and quite a good workflow. Designer design and layout components that get built into a library, and developers use those components in an application without actually recoding the components.

                       

                      This sounded great, but imagine my dissapointment when I discovered

                       

                      1) A custom component can not be resized in the design view of Catalyst - you have to create another component class with a different size!

                      2) A component/skin developed in Catalyst can not even resize when imported into Flash Builder unless you recode it.

                      3) You can't name instances of components in the design view.

                       

                      So my plan was completely foiled. I mean, surely a button skin/component can not be considered a button skin/component unless it can be resized!

                       

                      I like Flex and I think Flex 4 is a big step forward, however I have never met a designer who liked it. Designers cannot effectively layout applications themselves using Flex. In fact where I work they are pushing to prevent ANY future flex development because of the problems with designers not being able to do this (we make and maintain some very highly skinned Flex 3 applications). I am the only front end Flex developer there and anytime I start to develop in Flex it is seen as very awkward and a problem.

                       

                      I hoped that Catalyst would solve some of these problems, but it unfortunately fails dismally because of the above problems that I mentioned.

                       

                      These three things would go a long way to improving developer design workflow for Flex and Catalyst. Any ideas for if/when this functionality might be included?

                      • 8. Re: Scaling / Resizing Catalyst Components in Builder
                        Kim Isola Adobe Employee

                        Hi Piercer2,

                         

                        For #1, you can scale a custom component by entering edit-in-place mode. There is more info on that here: http://kb2.adobe.com/cps/839/cpsid_83914.html#customSkins

                         

                        For #2, there are several approaches aggregated here that may help you, depending on what you need to resize:

                        http://kb2.adobe.com/cps/839/cpsid_83914.html

                         

                        For #3, you can rename components in the following way (this is from Flash Catalyst Help http://help.adobe.com/en_US/flashcatalyst/cs/using/WS4bebcd66a74275c3-326fcb52123816c0204- 7ffa.html):

                        • To make a component based on an existing one, right-click the component in the Library panel and choose Duplicate.

                        • To rename a component in the Library panel, right-click the component and choose Rename (or double-click the component). Type a new name and press Enter (Windows) or Return (Mac OS). Component names must contain only letters, numbers, or the underscore character. They must be unique to the project and begin only with a letter or underscore.

                         

                        Hope that helps. Thank you for posting!

                        -Kim

                        • 9. Re: Scaling / Resizing Catalyst Components in Builder
                          piercer2 Level 1

                          Thanks for the reply Kim, however you seem to miss the point

                           

                          I don't want to change the name of a component in the library, I want to add multiple instance of the same component onto the "artboard" and give those instance different size from the definition in the library, i.e. scale them: This is not possible, in fact from the docs you sent me -

                           

                          "Note: You cannot change the size (height and width) properties of a component instance."

                          And

                          "After adding a component to the artboard, you can edit the component by using Edit-In-Place and modify its individual parts. When you edit component parts using Edit-In-Place, the changes apply to all instances of the component in all states. Any properties that you have applied in each state, such as opacity, are preserved."

                           

                          And

                           

                          "Q: I made a component with a custom skin, and have used several instances of it in my application. I want to scale only one instance, not all instances. How do I do that?

                          A: By default, edits you make to a component apply to all instances of that component, in all states. To make an edit affect only one instance of a component, first make a duplicate copy of that component by right-clicking it in the Components section of the Library panel. Drag the duplicate component onto the artboard; now you can edit the duplicate without affecting the original component and instances."

                           

                          This is not a scalable, or even desirable solution and I would expect more from such an expensive product.

                           

                          I also want to give unique ID's for each instance on the "artboard" - just like you do in flash professional, but this is again not possible.

                          • 10. Re: Scaling / Resizing Catalyst Components in Builder
                            Kim Isola Adobe Employee

                            Hi Piercer2,

                            Thank you for clarifying, and I see you've already added your idea to the Flash Catalyst ideas site: http://ideas.adobe.com/ct/ct_a_view_idea.bix?c=DA4859AD-8934-4F93-983A-4219E2DD9275&idea_i d=9012EAB9-EF11-4D02-880C-64B4D7485EB8

                            It's really helpful to hear from you as you're working through real-world scenarios, it helps us improve instruction and ultimately the product. Thanks again for posting.

                            Kim

                            • 11. Re: Scaling / Resizing Catalyst Components in Builder
                              bryanleister5280 Level 1

                              I agree, this is a very inconvenient workflow to enforce upon a user that is trying to build a layout. For example, I have 5 layered images in a custom component, it's basically a simple animation that I want to trigger with code later.  I want the images large so that I can later scale the component in my design or animate it scaling.

                               

                              This seems like very simple functionality to ask for. Place a component, then let me scale it on click or whatever. I can do this with opacity or move it, why is scale greyed out and treated like it's an unusual request?

                               

                              The solutions are painful, I can't select all 5 layers in Edit-in-place mode, I would have to do that for every state and then get them lined up again like I have already done in Photoshop.  The only practical solution is to just make a new Photoshop file, scaled at a size that works for me and abandon any hope of interactively scaling things in code.