29 Replies Latest reply on Oct 30, 2010 10:39 AM by MarkSDesign

    How to use FC to make a sub-component for Flex

    Handycam Level 1

      Most of the examples and tutorials I've seen so far assume you are creating the app itself in FC.


      However, what I need to do is create a custom component that will be a "screen" in a large Flex app, like a page in a Wizard.


      So if I was doing this without FC, I'd make a new mxml component in Flex, e.g. "WizardStep.mxml" and then in the main app,



           <h:WizardStep id="one" label="Step One" />

           <h:WizardStep id="two" label="Step Two" />



      For example, assuming I have set up the namespace "h" to like "com.handycam.*"


      How would I accomplish this scenario if "WizardStep" is what I have been building in FC?

        • 1. Re: How to use FC to make a sub-component for Flex
          Terl2424 Level 1

          I think this is something we need, as well as a way to do iterative design on existing components that have already been imported to flex.


          As a UX designer I need to be able to make changes at any point in the development process, and would prefer to make them myself, rather than pass them to developer and try and communicate the visual intent.

          • 2. Re: How to use FC to make a sub-component for Flex
            bruce_adobe Adobe Employee

            I think the basic feature you need is "Export Library Package". This will export a .fxpl file that my be imported into Flash Builder.


            When the fxpl is imported, it becomes a "library project" in Flash Builder.


            To export a component from Catalyst:

            • create your custom component (or other component).
            • Open the Library panel.
            • Right click on the the component in the Library panel.
            • From the context menu, select "export library package".



            • 3. Re: How to use FC to make a sub-component for Flex
              Handycam Level 1

              Thanks.  The export part is easy to figure out.  It's the import part that

              is hanging me up.

              when I import the fxpl file, it does indeed create a library project.  I go

              to properties on my main project, add that to the library paths.


              But then, all I have access to is the parts of my FC project: the buttons,

              scrollbars, etc. completely out of context. That is, there is no access to

              the layout and/or actions I constructed in FC.

              • 4. Re: How to use FC to make a sub-component for Flex
                bruce_adobe Adobe Employee

                I'm not entirely sure what you want to do. Could you tell me more?

                • 5. Re: How to use FC to make a sub-component for Flex
                  Handycam Level 1

                  I have an application that uses multiple screens.


                  Typically, I would create MXML components, lay them out, put the items on them i need.  Then the main application instantiates them as needed, as in:


                  <com:MyViewScreen />


                  So, what I am trying to do is use FC to create such a sub-screen, in the example above "MyViewScreen.mxml".


                  In a typical scenario, let's say MyViewScreen.mxml is a panel component and has some labels, buttons, menu, scrollbars, an image, etc. etc.  I can easily create such a screen in FC (or in AI and bring it into FC).


                  But so far I see only two options:


                  1. Bring it in as an FXP, which creates a Flex project.  If I add this project to the source path of the main project, I can access the screen I made, but all its components are broken and it throws errors on build (e.g. "no such component Button1").


                  2. Bring it as an FXPL which creates a library project. If I add this to the Library path of the main application, I do not have access to the screen I just created in FC.  I only have access to the screen's individual parts, such as Button1.mxml, Thumb2.mxml, etc.


                  So how can I create an MXML component to use in a larger project?


                  Make sense?

                  • 6. Re: How to use FC to make a sub-component for Flex

                    I was playing around with some of these ideas a couple weeks ago and came up with a workable solution that lets me use sub-components from FC in a FB project like you want.  You can read that and see a code example here:




                    The ruby script that generates a swc probably isn't the best way to go, I've since figured out how to do that without using external scripts.  I'll blog about that eventually.


                    Also, the trick is to select everything and "Convert to generic component" before you start actually working.  Then do your work in catalyst inside that new component.

                    • 7. Re: How to use FC to make a sub-component for Flex
                      bruce_adobe Adobe Employee

                      OK - I get it now.


                      As the guy on the Flash Builder forum told you, there are two basic ways to do what you want: The "easy" way and the "hard" way.


                      The easy way is to make your entire "page" or "screen" as a single custom component in Catalyst. If you do this, you will end up with a Catalyst project that, at the top level, contains just one page/state, and an single component.


                      Your one "screen component" will in turn contain many other component (buttons, sliders, other custome components, etc...


                      The steps for doing this might be:

                      • create a new Catalyst project.
                      • Draw a single "screen sized" rectangle on the artboard (say 800X600).
                      • Use the "convert to custom component" command to turn your rectanagle into a custom component.
                      • double click on the custom component to edit it.
                      • In the component edit context, add all your sub-components, interactions, etc...
                      • When you are done, exit the component edit context to get back to the main application.
                      • save the top level "screen" component to an FXPL.


                      I think this will accomplish what you want.


                      The "hard" way to do this is to make your "screen" as a top level Catalyst project (application) rather than as a custom component. If you do this, you can save as FXP and try to bring multiple FXPs into Flash Builder and combine them all.


                      As you discovered, it is not trivial to do this. It is of course possible, as you have all of the source files sitting inside of Flash Builder. "All" you have to do is figure out how to move them around and fix up all the code. I agree with you that this is not easy to do!


                      If you try the "easy" method, above, you will be using the products more or less as designed. You will then be able to re-import an updated version of your screen into Flash Builder without re-doing everything.


                      - Bruce

                      • 8. Re: How to use FC to make a sub-component for Flex
                        Handycam Level 1

                        The "custom component" idea is stellar, thanks.

                        • 9. Re: How to use FC to make a sub-component for Flex
                          bruce_adobe Adobe Employee

                          I'm glad that works for you. Let us know how it goes.


                          Your use case is interesting, in that it's not really a "primary use case" for Caralyst. But it's seems like something more people would want to do.


                          I'll pass this on to the reast of the team to see if we can come up with a way to make this more intuitive.


                          - Bruce

                          • 10. Re: How to use FC to make a sub-component for Flex
                            Mark60015 Level 1

                            I am also thinking about the idea of using Catalyst to create components that would be integrated in FB rather than building the whole app in Catalyst. I was thinking of the best way to start working with Catalyst and considered taking a recent project where I created a fairly complex visual custom component in FB and try to replicate it in Catalyst to see how the workflow goes and the code looks. While I could probably re-create the whole project in Catalyst, that would be a pretty agressive first step. So one more vote for this idea of "sub-components", with a further suggestion- a artboard size based on a hbox or vbox for components that expand in one of those directions.

                            • 11. Re: How to use FC to make a sub-component for Flex
                              Handycam Level 1

                              I agree.


                              Even though it's not a "primary use case", I personally think if would be foolish to ignore this workflow option.  Since the main method of styling components in FB4 is via skinning, and this can get complicated, a tool like FC would make the process fast and easier.


                              I would venture to say that more shops would use it that way than the way described in the advertising videos for it.

                              • 12. Re: How to use FC to make a sub-component for Flex
                                MorphicBen Level 1

                                I've been working with FC for a couple of days now and I think I got an intermediate process for going back and forth between FC and FB:

                                http://www.themorphicgroup.com/blog/2009/06/23/adobe-flash-builder-and-catalyst-tips-trick s-and-hacks/


                                I've been basically using FC to create "skins" for my components that I've built in Flash Builder. I've found that this method lets me re import the FC project into my FB multiple times as the design of the application evolves.


                                It's not perfect, and I really hope Adobe fleshes out Catalyst more to where natively it isn't just used for prototyping.

                                • 13. Re: How to use FC to make a sub-component for Flex
                                  MorphicBen Level 1

                                  I agree with you sentiment about the "hackish" quality of trying to get FC to better integrate with FB. I know a great deal of hassle could be removed by giving us the ability to specify "id" attributes for the components you create in FC as well as to be able actually create a Spark Skin component instead of a generic Group component.


                                  I would think those two things would be easy enough to implement.

                                  • 14. Re: How to use FC to make a sub-component for Flex
                                    Handycam Level 1

                                    Agreed.  I do like your ideas, though.  Clever solutions, and quickly done

                                    too.  Nice work.

                                    • 15. Re: How to use FC to make a sub-component for Flex

                                      I have an existing mixed Flex3/FlashCS4 project. I have tried Flash Catalyst

                                      for a week now and would like to continue using it in preference to Flash Pro.


                                      My problem:

                                      In Flex I have a ViewStack. Each button on the LinkBar controls an animation:


                                         <mx:Canvas label="normal login case" height="460">






                                                <mx:Image x="3" y="35" width="970" height="425"


                                      @Embed(source='insets/aPan1-nlog.swf')" />





                                      I want to replace the .swf-file with the output from FC. I'm trying this with the

                                      Flash Builder beta, using 3.4 because I have Halo-based components.


                                      Compiling as .swf and importing to FB doesn't work (new Flex libraries?)


                                      I've followed the cookbook instructions (Thank you, Bruce !!) for creating

                                      an FC custom component and have imported the .fxpl file into FB.


                                      What I can't figure out is how to get the .fxpl content to replace the

                                      mx:Image provided content. Can someone please tell me either

                                      how to do it or that I'm going about it completely ***-backwards.


                                      Sorry to bother you with a "for dummies"-type question, but I'm a non-coder

                                      and if I can't get this solved, I'll (sadly) have to go back Flash.




                                      • 16. Re: How to use FC to make a sub-component for Flex
                                        njadobe2 Adobe Employee

                                        Hi squiddil,

                                        Unfortunately, you can't directly use the code output by FC in a Flex 3 app, since FC outputs Flex 4 code. Flex 4 does include all the Flex 3 ("Halo") components, so it's not that hard to convert a Flex 3 app to a Flex 4 app, but it does require some fiddling.

                                        However, your original idea of including the FC output SWF in your Flex 3 app should be workable. The one thing you might need to do is to add loadForCompatibility="true" to your <mx:Image> tag (actually, you should probably be using SWFLoader instead of Image, but either one should work). That should make it so the Flex 3 app can properly load the Flex 4 app as a sub-SWF.

                                        Let me know if this works for you.



                                        • 17. Re: How to use FC to make a sub-component for Flex
                                          nat.b Level 1

                                          Thanks for your answer!


                                          Unfortunately it still doesn't work.

                                          In FC I used the file menu item "publish as swf" ( or however it's called in English -

                                          I'm also struggling with the -unwanted- German workspace terms). This generated

                                          the deploy-to-web and run-local folders. In Flex3, I imported haupt.swf (=main.swf)

                                          from the run-local folder.


                                          When I use the imported file in the Image tag with the

                                          loadForCompatibily attribute set to "true",the application compiles,

                                          opens the IE, the remaining LinkBar buttons are not affected - they

                                          show/run the Flash Pro .swfs and their controls,

                                          but the attempt to access the .swf in question produces:


                                          VerifyError: Error #1053: Illegal override of z in mx.core.UIComponent.

                                          at flash.display::MovieClip/nextFrame()
                                          at mx.managers::SystemManager/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\fra mework\src\mx\managers\SystemManager.as:319]
                                          at mx.managers::SystemManager/preloader_initProgressHandler()[C:\autobuild\3.2.0\frameworks\ projects\framework\src\mx\managers\SystemManager.as:2945]
                                          at flash.events::EventDispatcher/dispatchEventFunction()
                                          at flash.events::EventDispatcher/dispatchEvent()
                                          at mx.preloaders::Preloader/timerHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\ src\mx\preloaders\Preloader.as:398]
                                          at flash.utils::Timer/_timerDispatch()
                                          at flash.utils::Timer/tick()

                                          The alternative approach:




                                          <mx:SWFLoader x="3" y="35" width="970" height="425" loadForCompatibility="true"




                                          VerifyError: Error #1014: Class flash.text.engine::TextLine could not be found.

                                          at global$init()


                                          If I code the SWFLoader tag as:


                                          <mx:SWFLoader x="3" y="35" width="970" height="425" loadForCompatibility="true"




                                          I get the same errors as I did for the Image tag approach.


                                          Hope this helps.


                                          • 18. Re: How to use FC to make a sub-component for Flex
                                            nat.b Level 1

                                            Hi nj,


                                            I posted to the list, so I don't know if you saw my reply or if I've maybe just fallen

                                            off the radar.


                                            My project is to create a website with visualizations of security processes - these

                                            don't need fluttering butterflies or seascapes, but they do need a lot of boxes,

                                            interfaces, arrows and the like. What started out as .svg has become Flex/Flash

                                            being used as a web-based (=platform independent) PowerPoint on steroids.

                                            Data-driven demos will be a follow-up project.


                                            As indicated in my original post, I was disappointed but not surprised that

                                            FC/Flex3 didn't mesh. The results of retrying were as I posted in the meantime.


                                            When I tried Flex3beta, I created the project indicating the 3.4 SDK due to Halo

                                            components. I used Bruce's instructions for creating an FC component. If I import

                                            this .fxpl file as a flex project, I see the component. If I import as a flex library project,

                                            I see the component and its' parts - in both cases in the lib under the scr in the

                                            package explorer. I also see, in the components window, FlashComponent and

                                            FlashContainer Placeholders (drag'n'drop). Searching the Flex Help gives no

                                            returns for how to use these components and I haven't found a way to associate

                                            them with the imported items.


                                            I don't know what's in the pipeline for FC or just how Adobe sees the produkt

                                            linkup working. I think what I want to do should be do-able (and fairly easy

                                            if one just clicks the right options).


                                            I'm uploading my Flex src-folder and would be tremendously super grateful

                                            if someone could look at it and tell me what approach I should follow.

                                            I think trying to retrofit it all in FC would be a no-go.


                                            Sorry to be a bother, but I really would like to stay with FlashCatalyst!

                                            • 19. Re: How to use FC to make a sub-component for Flex
                                              nat.b Level 1

                                              Zip didn't make it - Individual files attached

                                              • 20. Re: How to use FC to make a sub-component for Flex
                                                nat.b Level 1

                                                ... and mxml file renamed to text

                                                • 21. Re: How to use FC to make a sub-component for Flex
                                                  acath Level 4

                                                  Hi Squiddli,


                                                  I think the main issue is that you will only be able to use components create in Catalyst if you use the Flex 4 SDK (3.4 != 4) in Flex Builder, and run the SWF in Flash Player 10.


                                                  Before I send detailed instructions, there are 2 ways to do this:



                                                  •   Use Flex Builder 3 with the Flex 4 SDK (which not really supported, but works).


                                                  •   Use Flash Builder 4 beta and import your Flex 3 project. This will be easier and work better. Are you willing to do it this way? If so...do you have it installed yet?



                                                  • 22. Re: How to use FC to make a sub-component for Flex
                                                    nat.b Level 1

                                                    Hi Adam,


                                                    Thanks for your reply.


                                                    I have the FlashBuilder 4beta installed, use Flash Player 10 and have suceeded in

                                                    turning a Flash Catalyst "application" into a "component" for importing.


                                                    I would like to go the second route - I think it's better to progress with the products,

                                                    but I'm not a coder (other than declarative syntaxes) and not very fit with the rather

                                                    extensive project framework surrounding Flex.


                                                    My other concern is that I presently make use of Halo components and probably

                                                    wouldn't know how to access them under-the-hood in Flash Builder 4.




                                                    • 23. Re: How to use FC to make a sub-component for Flex
                                                      acath Level 4

                                                      Hi Natalie,


                                                      So, just to be totally clear, let me try to reiterate your situation:



                                                      •   You have Flash Builder 4 Beta 1 installed.


                                                      •   You have Flash Catalyst Beta 1 installed.


                                                      •   You've imported components from Catalyst to Builder successfully, in a Flex 4 project.


                                                      •   You would now like to import components from Catalyst to Builder in a Flex 3 project.


                                                      •   You aren't an ActionScript coder.


                                                      Is that all right?



                                                      • 24. Re: How to use FC to make a sub-component for Flex
                                                        nat.b Level 1

                                                        Hi Adam,


                                                        Almost there. Installs and Action Script - as you say.


                                                        I have an existing Flex3/Flash project. I want to reimplement my Flash stuff

                                                        in Catalyst, but not reimplement my Flex part at this point.


                                                        When I first opened the Flash Builder 4beta, all I saw were Spark Classes and

                                                        no Halo, which I use for full-html-page, auto-gradient background and the application

                                                        VBox-ed for resizability, using States with scaling factors.


                                                        I have a ViewStack, with the buttons on the LinkBar controlling canvases. Up till now,

                                                        each canvas gets filled-in with it's own .swf file, using the <mx:image> tag.


                                                        I then created a second project in FlashBuilder 4, but with the option "use 3.4.SDK".

                                                        I imported the Catalyst component (first as flash-project, then flash-library-project)

                                                        but couldn't drag the new component onto the canvas or find any way of associating

                                                        it with the new Flash component/container placeholders.


                                                        So what I need is - how best to integrate, preferrably with FB4.

                                                        What I'm missing is:

                                                        - how to get get the previous .swfs/now components to be displayable

                                                        - how to continue using Halo under Flash Builder 4

                                                           ( nj said this was doable, but required some fiddling)

                                                        - alternatively, how to replace Halo "coding" with the equivalents,

                                                           without landing in a very long learning curve.



                                                        • 25. Re: How to use FC to make a sub-component for Flex
                                                          Peter Flynn (Adobe) Adobe Employee

                                                          Hi Natalie,


                                                          You'll definitely want to use the Flex 4 SDK -- Catalyst components require Flex 4, and loading them in a separate SWF in a compatibility sandbox is a hack that would probably just prove confusing or frustrating.


                                                          You can use Flex 3 (Halo) components in your Flash Builder project even if you have the SDK set to Flex 4.  However, they are hidden by default if Builder thinks there is a "better" alternative component in Flex 4.  To see all the Halo components:

                                                          • In Design view, in the Components panel, click the triangle in the upper-right corner and uncheck Only Show Recommended Components
                                                          • In Code view, when you are looking in the code hints (autocomplete) popup, you'll see a little note at the bottom that says "Recommended - Press Ctrl+Space to show All."  If you press Ctrl+Space, the list will expand to include Halo components that were originally hidden.


                                                          But bear in mind that if FB is hiding components, it probably thinks there is a better alternative in Flex 4.  For example, you can use VGroup instead of VBox.


                                                          Hope that helps,


                                                          - Peter

                                                          • 26. Re: How to use FC to make a sub-component for Flex
                                                            nat.b Level 1

                                                            Hi, Peter,


                                                            First of all my sincere apologies to you folks at Adobe and all the forum members!!


                                                            From the Catalyst Videos, it wasn't at all clear to me that FB/Flex 4 wasn't just

                                                            Flex 3 with some add-ons, otherwise I wouldn't have started on the Catalyst

                                                            adventure. Having come this far though, I would like to see it through.


                                                            Since Adam pointed me to FB4 means the SDK-4 only, I've experimented some.

                                                            Am I doing this right:

                                                            use create: new Flex Project,

                                                            then import: the .fxpl from the file system ?

                                                            This  does get me a component, which I can drag onto the application.

                                                            When I import a second component in the same way, it shows up in the package

                                                            explorer (libs) but not in the components tree or components window,

                                                            so I'm still doing something wrong it seems.


                                                            After that, I need to get the custom components rehoused in containers, right?

                                                            I'm assuming the ViewStack "logic" will not have changed much.


                                                            Thanks very much for the Halo info - that looks easy enough once you know how -

                                                            and that will give me time to put off getting to the FB4 new features until somewhat later.


                                                            I've previously asked if there's any training material available yet for FB4,

                                                            but not gotten a response?


                                                            Thanks for your help and your patience - at least you can see that I'm a Catalyst convert!



                                                            • 27. Re: How to use FC to make a sub-component for Flex
                                                              acath Level 4

                                                              Assuming you already have the FXPL file, here's how you create a project that uses ViewStacks and your FXPL file:



                                                              1.  File > New > Flex Project

                                                              2.  Type a name ("Foo").

                                                              3.  Make sure the Flex SDK Version is set to 4.0.

                                                              4.  Hit "Finish".

                                                              5.  You will go into a code editor. Switch to design view (click the "Design" button).

                                                              6.  If you want to insert a view stack, go to the Components panel, find the Navigators category, and drag a ViewStack onto the canvas.

                                                              7.  Now it's time to import your FXPL. Choose "File > Import Flex Project".

                                                              8.  Navigate to your FXPL and import it.

                                                              9.  This will create a new project. In the Package Explorer, drag the whole "components" package from the new project (which will have the same name as your FXPL) to the src folder of the "Foo" project.

                                                              10. The src folder of "Foo" should now have Foo.mxml as well as all the MXML files from your FXPL. It's time to insert your component into Foo.mxml. Here's the tricky part: this depends on the component you create in Catalyst.


                                                              If your component is a Custom Component (NOT a Button, Scrollbar, etc):


                                                              1.  In the Components panel, open the "Custom" category. You should see your component in there. Drag it onto the canvas. Fin.


                                                              If your component is a skin (Button, Scrollbar, etc):


                                                              1.  You have to do this in code. Switch to code view and find the place where you want to insert your component (e.g. inside the view stack).

                                                              2.  Type this code: <s:Button skinClass="components.MyButton"/>, where MyButton is the name of the MXML file in the components package that is your skin.

                                                              3.  Switch to design view. You should see your component. Fin.


                                                              Let me know if it works...



                                                              • 28. Re: How to use FC to make a sub-component for Flex
                                                                nat.b Level 1

                                                                Hello Adam,


                                                                Thanks for your detailed answer.


                                                                I realize now that I probably got off the track a long time back. Nj's advice that

                                                                a Catalyst .swf should run in Flex3 didn't work. With your clarification that I needed

                                                                Flex4, I landed in custom components, libraries and project imports, thinking

                                                                that was the only possible way to proceed.


                                                                I now started over from scratch, generated a Catalyst .swf, did a simple file-system

                                                                import into the src tree in the Flex4 packet explorer, and I can reference it with an

                                                                <mx:image> or swf loader tag just as I've done in the past in Flex3. I don't know

                                                                if this practice is frowned upon, but it's easy, clear-cut, and the application runs.


                                                                That's the good news.


                                                                Since then I've spent some time looking closer at Flex4 itsef plus articles from the

                                                                Flex DevCenter and I stumbled across a Flex3/Flex4 compatibility matrix. While

                                                                I can't do ActionScript coding (beyond boilerplate timeline functions in FlashPro),

                                                                I can follw the Flex4 namespace usage and look up which attributes are supported

                                                                for which tags/classes.


                                                                The bad news is - between the spark classes and the new states architecture,

                                                                it seems almost none of my Flex3 framework will work in Flex4. What's worse is

                                                                I can't see any simple-to-do workarounds for the lost defaults and automatic

                                                                features from Flex3.


                                                                I find Flash Catalyst much more logically structured than Flash Pro.

                                                                It's quick and easy enough for rapid prototpying/iterative refinement - a great help in

                                                                talking with my scientists about vizualizations - where saying "storyboard" is a no-no!

                                                                Now I can just rough-it-in on the spot.


                                                                Nevertheless, I have a supervisor, who'd probably let me use and adapt with

                                                                Flash Catalyst even as a beta-level, but would draw the line at my delving deeply into

                                                                Flex4/ActionScript. So it's starting to look more and more like back to Flash Pro/Flex3

                                                                for my personal situation.


                                                                Thanks again for the help! If you'd feel this might be a part of a general problem and

                                                                would like to continue the discussion, would it perhaps be possible to do so outside

                                                                the forum? - I already feel quite guilty for the time I've taken up.



                                                                • 29. Re: How to use FC to make a sub-component for Flex

                                                                  I think this IS the primary use case and PRIMARY workflow for product.  Designer prototyping with states doesn't scale with any real world application. States are too messy.  The primary use case for enterprise is the designer creating skins for custom components that can be "round tripped" into Catalyst at any point in the developement cycle.