Flash Keeping children fixed size

Flash Keeping children fixed size,flash,apache-flex,size,scrollbar,Flash,Apache Flex,Size,Scrollbar,I have the following setup: <mx:Canvas> <mx:ViewStack width="800" height="600"> <mx:Canvas width="100%" height="100%"> <s:BorderContainer width="100%" height="100%"> <mx:Canvas x="80" y="46" width="640" height="480"> <custom:CustomComponent width="640" height="480" /> </mx:Canvas> </s:BorderContainer> </mx:Canvas> </mx:ViewStack> </mx:Canvas> The <custom:CustomComponent /> is something I can't

I have the following setup:

<mx:Canvas>
 <mx:ViewStack width="800" height="600">

  <mx:Canvas width="100%" height="100%">
   <s:BorderContainer width="100%" height="100%">
    <mx:Canvas x="80" y="46" width="640" height="480">
      <custom:CustomComponent width="640" height="480" />
    </mx:Canvas>
   </s:BorderContainer>
  </mx:Canvas>

 </mx:ViewStack>
</mx:Canvas>

The

<custom:CustomComponent />
is something I can't change. It's something that displays videos. However, for some reason, something (a container I guess) gets the size
800
x
600
. So I get scrollbars inside the
<custom:CustomCompnent />
.

Is there a way I can force all children of a certain container not to get beyond a certain width/heigth.


#1

You could just override the addChildAt()-method of your custom container. (this also covers the addChild()-method, because addChild() calls for addChildAt()). There you can check the width and height and add changeWatchers to check every time the width/height of a component changes. the changewatchers should be used because DisplayObject does not have a maxWidth/maxHeight-property (else it would be even easier).

override public function addChildAt(child:DisplayObject, index:int):DisplayObject
{
    super.addChildAt(child, index);

    if(child.width > 640)child.width = 640;
    if(child.height > 480)child.height = 480;

    ChangeWatcher.watch(child, "width", function():void{child.width = (child.width > 640) ? 640 : child.width;});
    ChangeWatcher.watch(child, "height", function():void{child.height = (child.height > 480) ? 480 : child.height;});
}

EDIT

When you want to use this code, just create a new class that extends the Canvas-class, like so:

package com
{
    import mx.containers.Canvas

    public class CustomCanvas extends Canvas
    {
        public function CustomCanvas():void
        {
            super();
        }

        override public function addChildAt(child:DisplayObject, index:int):DisplayObject
        {
            super.addChildAt(child, index);

            if(child.width > 640)child.width = 640;
            if(child.height > 480)child.height = 480;

            ChangeWatcher.watch(child, "width", function():void{child.width = (child.width > 640) ? 640 : child.width;});
            ChangeWatcher.watch(child, "height", function():void{child.height = (child.height > 480) ? 480 : child.height;});
        }
    }
}

In order to then add this using simple mxml, you can just do something like this. This will have all functionalities a Canvas would have, extended with your own adchild()-functionality.

<com:CustomCanvas someproperty="somevalue"></com:CustomCanvas>

#2

The best way to find out which container is going beyond given width and height, just add background color to RED, BLUE, GREEN and so on and run your app to see it exactly which component is causing this issue. Its a simple way to deal with this kinda issues.

#3

Why are you using MX and Spark components? Everything here can be made Spark.

#4

To be honest J_A_X, I don't have a clue what I'm doing. I know I'm using Spark and MX but I don't know what it all is. I'm just trying to hack something together that looks okay and is quick to make for a school assignment :)

#5

Okay awesome, but where do I put this code? Because if I put this in the application, everything gets overridden obviously. (in an <mx:Script> tag.

#6

Doh ofcourse it's like that. Thanks a bunch for your contribution :D

#7

You're welcome :) Maybe you can also accept the answer, so that other people know this question has been answered correctly.