21 Replies Latest reply on Nov 13, 2008 12:55 AM by Peter Lorent

    Flash Component Kit

    brad_rice
      I have tried and tried to get the Flash Component Kit to work with Flex and an external class file. I've simplified and simplified to try to get it to work and I have seen an example of it working, albeit for Flex 2 ( http://weblogs.macromedia.com/pent/archives/2007/04/example_of_the.html).

      Whenever I associate a class file with a symbol name I get all kinds of errors and different ones. If I remove the class file the .swc publishes just fine. I especially have trouble when I try to publish a file into a package. If I make a subfolder in my Flex project and publish the swc to there and include a class I have to leave the package name off the file. If I include the package name, my mxmlc. I've followed the Tutorials on the pdf ( http://blogs.adobe.com/flexdoc/pdf/swf9.pdf) and when I try adding custom events on page 9 it again will not find the component. When I add the .swc in the Library path, it adds the physical file and it appears when I compile but none of the methods or properties are available from the class file.

      Also, when I look at the tutorials there is a Flash Component on the pictures called UIComponent. I don't have that in my Flash. I have FlexBaseComponent. I have tried uninstalling and installing Flash Component Kit a number of times and it still will not work correctly for me.
        • 1. Re: Flash Component Kit
          Peter Lorent Level 2
          Than we must help you right away because the Kit is a fantastic tool!
          Ok, let's start in Flash. Did you have a symbol (movieclip) in the library? And converted that to a Flex Component using Commands -> Convert Symbol To Flex Component. Now the Document class for that symbol. You have to create that and it's basic skeleton is as attached.
          • 2. Re: Flash Component Kit
            brad_rice Level 1
            Where would this file live? For example I have this setup.

            -FlexProject
            --src folder
            ----assets folder
            ----mxmlc file

            If I put it in assets, wouldn't I need to use the package name assets?
            package assets {

            import mx.flash.UIMovieClip;
            import flash.display.MovieClip;

            public class MyComp extends UIMovieClip {

            //some asset in the symbol
            public var someAsset:MovieClip;

            public function MyComp()
            {

            }
            }
            }
            • 3. Re: Flash Component Kit
              Peter Lorent Level 2
              The fla file and the Document class connected to the symbol are in the same folder - start outside of your Flexproject, just create a dir somewhere were you save the fla and the class. Publish and you get a swc in that directory.
              Then go to your Flex project and add the swc to your library path.

              (In the Document class connected to the symbol you can import libraries you want to use in the Flash file)
              • 4. Re: Flash Component Kit
                brad_rice Level 1
                Ok, I made a flash file with just a simple brown box symbol outside of my project. I converted it to a movie clip named brown_box. I used the "Convert Symbol to Flex Component" command. Then I published. I also created a file called brown_box.as and put it in the same directory. It looks like this:

                package {

                import mx.flash.UIMovieClip;
                import flash.display.MovieClip;

                public class brown_box extends UIMovieClip {

                //some asset in the symbol
                public var brown_box_mc:MovieClip;

                public function brown_box()
                {

                }

                public function zoomBox( factor:Number ) : void {
                brown_box_mc.scaleX = factor;
                brown_box_mc.scaleY = factor;
                }
                }
                }

                Then I published.

                I added the .swc to my library path. This is my mxmlc file:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

                <local:brown_box id="box" />

                <mx:Button label="click me" click="box.zoomBox(2);" />

                </mx:Application>

                It compiles with no errors. I see the button and the brown box in my web browser. So far so good. However when I click the button, which I would think would call the zoomBox function I get an error in my Flash debugger version. "Cannot access the property or method of a null reference."
                • 5. Re: Flash Component Kit
                  Peter Lorent Level 2
                  Almost there.
                  You probably don't have a brown_box_mc IN the symbol brown_box in the fla?
                  So, if you change:
                  public function zoomBox( factor:Number ) : void {
                  brown_box_mc.scaleX = factor;
                  brown_box_mc.scaleY = factor;
                  }

                  to

                  public function zoomBox( factor:Number ) : void {
                  scaleX = factor;
                  scaleY = factor;
                  }

                  And republish, refresh your library path in the Flex project... you should be scaling the brown box.
                  • 6. Re: Flash Component Kit
                    brad_rice Level 1
                    That did get rid of the error, but it doesn't resize the brown box. I did have an instance of the brown_box symbol on the stage and I named it brown_box_mc. That's why I thought that would work. Is there another method I could try to see if it is working?
                    • 7. Re: Flash Component Kit
                      Peter Lorent Level 2
                      Ah, no, the instance you put on the stage in Flash cannot have an instance name. That won't have any meaning in Flex. Remember, you are exporting the brown_box symbol, not the fla as a whole.
                      • 8. Re: Flash Component Kit
                        Peter Lorent Level 2
                        Change the function in your brown_box.as to:

                        public function zoomBox( factor:Number ) : void {
                        rotation = factor;
                        rotation = factor;
                        }

                        Republish, refresh the library path in the Flex project and do something like:
                        <mx:Button label="click me" click="box.zoomBox(15);" />
                        • 9. Re: Flash Component Kit
                          brad_rice Level 1
                          Any ideas why the zoomBox method didn't work when I clicked the button?
                          • 10. Re: Flash Component Kit
                            Peter Lorent Level 2
                            I've tested some properties and they work, except for scaleX and scaleY. I cannot find any info on that yet.
                            But, you have it working now?
                            • 11. Re: Flash Component Kit
                              brad_rice Level 1
                              Yes, and thank you. I am much closer now. I'm just trying to figure out how to control the properties on the object now.
                              • 12. Re: Flash Component Kit
                                Peter Lorent Level 2
                                Nice. Now, double-click the brown_box symbol in Flash. You can add any symbol INSIDE that brown_box symbol.
                                Add those symbols as public properties in the brown_box.as:

                                public var anotherBox:MovieClip;
                                public var myTextField:TextField;

                                define public methods in brown_box.as that set and get properties of the symbols (an API) and you can control them from Flex.

                                Remember when you publish: set 'Automatically declare stage instances' to off.
                                • 13. Re: Flash Component Kit
                                  Peter Lorent Level 2
                                  Oh, and in brown_box.as you can import any library you need.
                                  • 14. Re: Flash Component Kit
                                    brad_rice Level 1
                                    That is way cool. So when you do this in mxmlc:

                                    <local:brown_box id="box" />

                                    You are creating an instance of the brown_box symbol with an instance name of "box"?

                                    The reason I am asking is I tried this:

                                    public function zoomBox(obj:Obj, factor:Number ) : void {
                                    obj.scaleX = factor;
                                    obj.mc.scaleY = factor;
                                    }

                                    and then I passed it in the call like this:

                                    <mx:Button label="click me" click="box.zoomBox(box, 2);" />

                                    That didn't work. However, I did like you said and created a symbol with an instance inside the brown_box symbol and then the scaleX and scaleY worked.
                                    • 15. Flash Component Kit
                                      Peter Lorent Level 2
                                      >> You are creating an instance of the brown_box symbol with an instance name of "box"?

                                      Yes, but probably more accurate: adding a custom component which we can use in the same way as we would a component shipped with Flex, or in the same way that we use a custom Flex component that we created in MXML or ActionScript.

                                      I suspect scaleX and scaleY and not working because the size of the Flash Component is mainly controlled by its width and height properties. Adding a bounding box to the symbol might solve it, but I'm not sure about that.
                                      But, we can use a workaround.

                                      1. What we have been doing in the example is like creating a skin for our custom component. Drawing a shape on the main timeline, converting it to a symbol and converting that symbol to a Flex Component. If our plan is to have a box in the component that we can move around or control the size we can do this differently.
                                      In Flash, add a new symbol, name it something like 'BrownBox' (this name will show in Flex as the name for your component) and click OK. Select this empty symbol in the library and convert it to a Flex Component. We now have a empty Flex Component.
                                      Doubleclick the 'BrownBox' and add the assets you need. Using the 'document class' that we connect to the 'BrownBox' symbol we can define an API to control these assets. Just like we control the properties and methods of a standard Flex Component.

                                      2. Or, we wrap our original example in a custom component, for instance extending Canvas:
                                      //BoxComponent.mxml
                                      <?xml version="1.0" encoding="utf-8"?>
                                      <mx:Canvas
                                      xmlns:mx=" http://www.adobe.com/2006/mxml"
                                      xmlns:local="*">
                                      <local:BrownBox />
                                      </mx:Canvas>
                                      Now we can control the scaling of this BoxComponent from the main application.

                                      As an example of using an empty symbol in Flash, using external libraries and wrapping the custom component in a standard component I've used a fla that is included in the FIVe3D package. Essentially this is an empty fla with a Main.as document class. So, we only need to insert a new empty symbol in the fla and name it (I used Main for the instance name). Then convert the empty symbol to a Flex Component. Then we need to make sure the Main.as document class extends UIMovieClip (and we need to comment the line stage.scaleMode = StageScaleMode.NO_SCALE;).
                                      • 16. Re: Flash Component Kit
                                        brad_rice Level 1
                                        Thanks for the help. That was a large hump in the road I was having trouble getting across. I'll see if I can work out my components now.
                                        • 17. Re: Flash Component Kit
                                          Peter Lorent Level 2
                                          You're welcome. Let me know when I can remove the sources.
                                          • 18. Re: Flash Component Kit
                                            brad_rice Level 1
                                            I downloaded the source and have viewed it. I've already made strides with my project. Thanks again.
                                            • 19. Re: Flash Component Kit
                                              LuigiL,
                                              Just wanted to thank you for your detailed replies on this thread. I have been banging my head against a brick wall searching the internet to find out why whenever I linked a custom document class to a flash produced flex component it would work in Flash but not in Flex (the graphics disappeared or the click functionality wouldn't work). At least now I have a working sample that I can use to work out where I was going wrong.
                                              There really should be a good simple example like this in the Adobe Flash Component Kit documentation.
                                              • 20. Re: Flash Component Kit
                                                LuigiL,
                                                Just wanted to thank you for your detailed replies on this thread. I have been banging my head against a brick wall searching the internet to find out why whenever I linked a custom document class to a flash produced flex component it would work in Flash but not in Flex (the graphics disappeared or the click functionality wouldn't work). At least now I have a working sample that I can use to work out where I was going wrong.
                                                There really should be a good simple example like this in the Adobe Flash Component Kit documentation.
                                                • 21. Re: Flash Component Kit
                                                  Peter Lorent Level 2
                                                  You're welcome. I really wish I had the time to blog about the power in using the Flex Component Kit For Flash but I'm just working like 24/7 on commercial projects...

                                                  BTW: to get the scaling right, just add this function in the class that is connected to the Flash symbol: