12 Replies Latest reply on Dec 16, 2010 9:07 AM by ryan.bell

    UIMovieClips in Canvas container?


      Hi All,


      Im trying to play some UIMovieClip instances in a custom component that extends Canvas. Some of these UIMovieClips contain motion tweens. Playing these UIMovieClip instances causes to execute UIMovieClip.notifySizeChanged(). Which in turn causes the custom components' invalidateDisplayList to trigger. And this in turn triggers the custom components' updateDisplayList method.


      This happens on each frame of each UIMovieClip instance that plays a motion tween, causing the custom components updateDisplayList to execute over and over again. But I want to have the call to the updateDisplayList method of the custom component to execute only once, when it is added to its parent, and not over and over again just because it contains a movieclip that has a motion tween.


      What is the best practise to use UIMovieClips in a component that extends Canvas?


      Please help. This has been costing me so much time already.





        • 1. Re: UIMovieClips in Canvas container?
          www.marcelvanduijn.com Level 1

          I want to add to my post above that I have tried setting the "includeInLayout" property of the UIMovieClip instances to "false". This doesnt seem to make any difference

          • 2. Re: UIMovieClips in Canvas container?
            Flex harUI Adobe Employee

            Maybe override invalidateDisplayList and have it do nothing when the tween

            is doing its work.

            • 3. Re: UIMovieClips in Canvas container?
              www.marcelvanduijn.com Level 1



              thanks for getting back. Ive already overridden the updateDisplayList method todo the custom components layout when it is added itself to a parent. But it cant be so that you have to include logic in this method to handle the fact that child MovieClips are animating is it?? I would think that is really weird as its not so hard to think of scenarios where handling this logic would become a big hazard.


              I mean, I cant use regular MovieClips in a container as they dont implement IUIComponent, so I have to use UIMovieClip. And when using UIMovieClips Im running into this (and a lot of other) anti-intuitive behaviors (from what I found sofar especially related to "gotoAndPlay" of the UIMovieClip instances).


              I mean, Im relatively new to Flex but cant imagine that its so hard working with these basic Flash assets. I have lost so much time on this. Do you know of any best practises regarding Containers and UIMovieClips?


              Also I dont seem to be able to add a container (say a Box) to an object that just extends UIComponent. Is that right?


              I would highly highly appreciate if you could point me in the right way here.





              • 4. Re: UIMovieClips in Canvas container?
                Flex harUI Adobe Employee

                Flex is a framework.  There are rules for participating in that framework.

                Flash assets do not participate and things like UIMovieClip attempt to be

                adapters so more things can participate.  However, Flash concepts like

                motion tweens are a different animation technique than the Flex effects

                sub-system so you are wrestling with another point of incompatibility.


                If all components are Flex components and use Flex effects, writing Flex

                applications is generally pretty straightforward.


                You should be able to add an mx.containers.Box to an mx.core.UIComponent,

                but if the UIComponent doesn't implement the custom component rules, then

                the Box may not be sized properly.

                • 5. Re: UIMovieClips in Canvas container?
                  www.marcelvanduijn.com Level 1



                  ok, I understand Flex is a Framework. But all participants in the framework (UIComponents) extend Sprite, so there must be some easy way for elements like (UI)MovieClips to just sit on the stage and do their thing (i.e. use Flash' capabilities), without interfering with the framework right?


                  Could you tell me what rules a UIComponent should implement to accomodate a Box?





                  • 6. Re: UIMovieClips in Canvas container?
                    Flex harUI Adobe Employee

                    It doesn't matter what they extend as the base class. The framework is a

                    layer on top of the Flash Player.  All participants are expected to

                    implement certain contracts.  Not all Flash features are supported by these

                    contracts for consistency and usability for those willing to work entirely

                    within the Flex Framework.


                    There is documentation on custom components that will explain the rules for

                    reporting the correct size of your children and sizing them correctly.

                    That's probably what is going on with the Box as a child.

                    • 7. Re: UIMovieClips in Canvas container?
                      www.marcelvanduijn.com Level 1



                      thanks for your help sofar. I have been reading so much documentation on Flex (and AIR).  As Im new to both its kind of hard to get the concepts of both right in one go. I actually dont need much of the Flex framework in my project, though a lot of it seems very welcome.


                      Actually I ended up using Flex because I was looking for a different development environment than Flash IDE. So I started looking into Flex. I then noticed that an actionscript-only project didnt have the option to publish as AIR. Thats how I ended up with a Flex project, which had a WindowedApplication mxml file as source. And there I went...


                      My application doesnt need much of the Flex framework. Almost everything I need can be done without the framework. This is my application structure:


                      WindowedApplication -> 1024x768 Canvas centered in the window (which I scale to fake Flash's StageScaleMode.SHOW_ALL)  -> Canvas acommodates "screens".


                      Within these screens there's not much Flex framework required, no dynamic layout or so etc,. Though they must be compatible, and being able to use some of Flex's capabilities is helpfull and makes life easier.


                      Ive noticed that when I use Canvas as the baseclass of my "screens", e.g. a Box or Label are sized automatically to fit their content. This is most likely because Canvas (as a Container) handles the layout of its children. Disadvantage is that Canvas doesnt handle (UI)MovieClip children that well. When using UIComponent as a baseclass for my "screens", e.g. a Box or Label are not sized automatically to fit their contents. Actually nothing appears unless I explicitly set the size of these components.


                      Is there nonetheless a way to extend UIComponent and have these components (Box, Label, etc) size to fit their contents (override measure?) Would you be so kind to elborate just a bit on this?





                      • 8. Re: UIMovieClips in Canvas container?
                        Flex harUI Adobe Employee

                        It is possible to get an actionscript-only project to run in air.  See this

                        thread: http://forums.adobe.com/message/3098935#3098935


                        I don't have time to teach you the entire component lifecycle.  It is in the

                        doc.  Not sure why you want to wrap a Box in a UIComponent.  Maybe just wrap

                        it in a Canvas.

                        • 9. Re: UIMovieClips in Canvas container?
                          www.marcelvanduijn.com Level 1



                          let me explain why I wanted to wrap a Box inside a UIComponent, and not in a Canvas. My screens need to have a lot of (UI)MovieClip assets (produced in Flash IDE by a designer) on their display list. Like said earlier some of these contain motion tweens. When my screens extend Canvas putting (UI)MovieClips on its display list results in very weird behavior. When the screens extend UIComponent the (UI)MovieClips behave as expected.


                          When I put a UIMovieClip on a screen that extends Canvas saying e.g. gotoAndPlay("open") when "open" is the 1st frame on the UIMovieClips timeline, it doesnt do anything. Also not when I make the first frame empty. When my screen extends UIComponent and I use regular MovieClips everything works as expected.


                          But when I extend UIComponent for my screens, I loose the automatic sizing capabilities of possible child Flex components, because they are not layed-out by a container. Hope you see my problem.


                          Lets make it a yes / no question. Then I'll at least know whether to try to get this to work., or that its better to go for another solution. When I make a custom component that extends UIComponent, am I still able to use child Flex components (day Label or VBox) that retain their automatic sizing behavior (i.e. size to fit their content)?



                          PS: I got a AS project to run as AIR. But now adding something as simple as a Label to the display list is not so easy anymore...

                          • 10. Re: UIMovieClips in Canvas container?
                            Flex harUI Adobe Employee

                            That would be a good reason not to use Canvas.  Follow the recipe in the doc

                            (or copy lots of code from Canvas.as and Container.as).  The methods

                            measure() and updateDisplayList() are the most important.


                            I think your AS-only AIR test helps illustrate the value of frameworks.

                            Each component in MXML represents lots of code you would otherwise have to

                            write or copy-and-verify yourself.  But it does mean that things not

                            supported by the framework may not be compatible.

                            1 person found this helpful
                            • 11. Re: UIMovieClips in Canvas container?
                              www.marcelvanduijn.com Level 1



                              I got everything working smoothly now. Thanks a lot for your input. What I needed was a "stage" for my "screens" where I could use MovieClips exported from Flash IDE. Now my screens extend UIComponent. The advantage as compared to extending Canvas, is that Canvas needs UIMovieClip instances, and they participate in the Flex framework and Container layout etc, for example by invalidating the parent containers display list on enter frame when they play. This would cause unnecessary overhead, as I just needed a "stage" that itself doesnt need any layout rules. But what I wanted as well was being able to take advantage of the Flex framework elements on my screens/stages.


                              Once again thanks ok, chrs



                              • 12. Re: UIMovieClips in Canvas container?

                                I know this is an old thread, but for others who may end up coming here:


                                "When I make a custom component that extends UIComponent, am I still able to use child Flex components (day Label or VBox) that retain their automatic sizing behavior (i.e. size to fit their content)?"


                                Yes, but you have to understand that the "automatic sizing behavior" is actually split between the component and its parent container in Flex. The component measures itself in the measure() method, and sets its measuredWidth and measuredHeight (and other properties like measuredMinWidth, etc.). However, these values are just suggestions. It's the parent container's responsibility, in updateDisplayList(), to determine whether, and how, to use these measured values to size each of its children, based on its own layout rules.


                                So if you're making a custom container, you'd have to do something like this in its updateDisplayList to take advantage of "automatic sizing" of the children:


                                childA.setActualSize(childA.measuredWidth, childA.measuredHeight);


                                Of course, the built-in containers have somewhat more complex logic that takes into account things like an explicit width or height, minWidth, minHeight etc on children.