Be a Supporter!

Help resizing Flash components

  • 229 Views
  • 5 Replies
New Topic Respond to this Topic
Gimmick
Gimmick
  • Member since: Aug. 20, 2008
  • Offline.
Forum Stats
Member
Level 27
Programmer

I've got a couple of flash components, ranging from UIScrollBar, NumericStepper, ScrollPane, Button, etc.

There's this class called Panel, which is essentially a container, and it has a custom width and height setter. Basically, every time the width and height setters are called, instead of calling super.width which changes the scaleX and scaleY, it redraws the background (to give a "fluid container" effect)

It works fine, up until flash's components are added as its children. Then, whenever the components are resizing - suppose I have a button inside the panel and the width of the button is initially 300. If I change it to 100, then the panel still remains the same-ish size (~300) but the button within is 100px wide and there's a lot of whitespace on the right side. When I resize it a second time, say from 100 to 101, then it shows properly (I guess there's a small 1px difference, but it's unnoticeable).

Panel class get/set mockup:

class Panel extends Sprite {
//
override public function set width(val:Number):void { 
    drawGraphics(val, height) 
    for(var i:int = 0; i < numChildren; ++i) {
        if(getChildAt(i) == bg) { continue; }
        getChildAt(i).width = val * 0.6
        getChildAt(i).x = val * 0.2
    }
}
override public function set height(val:Number):void { drawGraphics(width, val) }
override public function get width():Number { return bg.width; } 
override public function get height():Number { return bg.height; } 
private function drawGraphics(width:int, height:int):void {
    bg.graphics.clear();
    bg.graphics.beginFill(0, 1)
    bg.graphics.drawRect(0, 0, width, height);
    bg.graphics.endFill()
}
}

So when the button is added as its child and it's resized, the button resizes to 100, but not the panel. What can I do to resolve this? I've read up on the issue and it's got something to do with the components taking a delayed render / rendering and updating sizes after some time, not on the event itself. What should I do to make sure the panel renders at the same time, if I can't force the component to resize immediately? (validateNow() and invalidate() don't do anything.)


Slint approves of me! | "This is Newgrounds.com, not Disney.com" - WadeFulp
"Sit look rub panda" - Alan Davies

BBS Signature
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 20
Game Developer
Response to Help resizing Flash components 2017-04-30 15:31:19 Reply

At 4/30/17 08:02 AM, Gimmick wrote: drawGraphics(val, height)
for(var i:int = 0; i < numChildren; ++i)

did you try flipping this order?

I don't actually see a smoking gun in your code. it seems odd that the panel's bg is not resizing to the exact value passed in. maybe I'm not understanding the actual problem. can you post the code that calls for a resize?

Gimmick
Gimmick
  • Member since: Aug. 20, 2008
  • Offline.
Forum Stats
Member
Level 27
Programmer
Response to Help resizing Flash components 2017-05-01 01:37:22 Reply

At 4/30/17 03:31 PM, GeoKureli wrote:
At 4/30/17 08:02 AM, Gimmick wrote: drawGraphics(val, height)
for(var i:int = 0; i < numChildren; ++i)
did you try flipping this order?

I don't actually see a smoking gun in your code. it seems odd that the panel's bg is not resizing to the exact value passed in. maybe I'm not understanding the actual problem. can you post the code that calls for a resize?

The parameters for val and height are correct - stepping through the debugger revealed it was 100, 700, but after the function completes executing, the width value of the panel is ~285

The code that calls for a resize is asynchronous, I think - there's a dock handler that dispatches an event to the stage telling it to redraw, and then the listener in the stage calls the redraw function. Here's the bit (unimportant code removed):

//dispatcher in Dock.as
function onDock(evt:MouseEvent):void {
    dispatchEvent(new Event(Dock.REDRAW, false, false))
}
//main has a listener to object of Dock
addEventListener(Dock.REDRAW, resizeWindows)
function resizeWindows(evt:Event):void {
    resizeWindows() //calls resize code
}

function resizeWindows():void {
//
//
//
leftPanel.width = width / 7 //<---works out to 100
leftPanel.height = height
}

It's funny, when the width or height is greater than necessary there's no problem. When it's smaller, then the components prevent it from effectively resizing, and I say this because it doesn't happen when there are no components in the panel. Even if I have dozens of shapes, sprites, etc. that do not have components in them, it works fine; the components are the spanner in the works.

If it provides any clue, I have modified the components prior to exporting them as an SWC (In flash pro -> I opened the component and edited the movieclip to give it a different look). I don't think that should make much of a difference, though.


Slint approves of me! | "This is Newgrounds.com, not Disney.com" - WadeFulp
"Sit look rub panda" - Alan Davies

BBS Signature
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 20
Game Developer

At 5/1/17 01:37 AM, Gimmick wrote: addEventListener(Dock.REDRAW, resizeWindows)
function resizeWindows(evt:Event):void {
resizeWindows() //calls resize code
}

function resizeWindows():void {
leftPanel.width = width / 7 //<---works out to 100
leftPanel.height = height
}

Wait, did as3 get method overloading or something? how do you have two resizeWindows() functions?

what is width/ height referring to here? The dimensions of main? Is main the container of the panels? without knowing much it looks like a circular reference loop, main.width depends on it's content which are being set from main's width.

other possibility, you are possibly dispatching the event before width/height are changed, so it's always resizing to the previous value, you said going from 300 -> shows no change but the following 100 -> 101 works, I wonder if 101 is setting it to 100, just as 100 kept it at 300

Gimmick
Gimmick
  • Member since: Aug. 20, 2008
  • Offline.
Forum Stats
Member
Level 27
Programmer
Response to Help resizing Flash components 2017-05-02 06:28:07 Reply

At 5/2/17 05:27 AM, GeoKureli wrote:
At 5/1/17 01:37 AM, Gimmick wrote: addEventListener(Dock.REDRAW, resizeWindows)
function resizeWindows(evt:Event):void {
resizeWindows() //calls resize code
}

function resizeWindows():void {
leftPanel.width = width / 7 //<---works out to 100
leftPanel.height = height
}
Wait, did as3 get method overloading or something? how do you have two resizeWindows() functions?

Oops, made a mistake while editing - it's two separate functions with two different names.

what is width/ height referring to here? The dimensions of main?

Yes. Main has the panel as a child. The child panel is the one being resized, and it depends on Main's width and height. The panel gets resized when Main is resized.

other possibility, you are possibly dispatching the event before width/height are changed, so it's always resizing to the previous value, you said going from 300 -> shows no change but the following 100 -> 101 works, I wonder if 101 is setting it to 100, just as 100 kept it at 300

Tracing the width and height inside the function shows the correct value of Main's width and height...and it doesn't really explain why the button is resizing to the correct size but not the panel.


Slint approves of me! | "This is Newgrounds.com, not Disney.com" - WadeFulp
"Sit look rub panda" - Alan Davies

BBS Signature
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 20
Game Developer
Response to Help resizing Flash components 2017-05-02 16:35:36 Reply

At 5/2/17 06:28 AM, Gimmick wrote:
At 5/2/17 05:27 AM, GeoKureli wrote:
At 5/1/17 01:37 AM, Gimmick wrote: addEventListener(Dock.REDRAW, resizeWindows)
function resizeWindows(evt:Event):void {
resizeWindows() //calls resize code
}

function resizeWindows():void {
leftPanel.width = width / 7 //<---works out to 100
leftPanel.height = height
}
Wait, did as3 get method overloading or something? how do you have two resizeWindows() functions?
Oops, made a mistake while editing - it's two separate functions with two different names.
what is width/ height referring to here? The dimensions of main?
Yes. Main has the panel as a child. The child panel is the one being resized, and it depends on Main's width and height. The panel gets resized when Main is resized.

Yeah, that's weird, resizing a child of a container based on the size of the container, which is at least the size of the child. This has to be the issue, I can't say exactly what without the code, but I'd look there