[flexcoders] Re: Custom Components - updateDisplay results in ghost children drawn
Well what do u know. I moved my component from my test sandbox to my production environment and the problem went away - no strange graphics lingering behind. Very strange, but at least it works. --- In flexcoders@yahoogroups.com, Josh McDonald [EMAIL PROTECTED] wrote: I don't think updateDisplayList is the right place to be doing drawing into graphics, although I may be wrong. I usually do it on the render or updatecomplete event, but that might not be optimal either. Alex would know :) If you want to link to a zip of a test project I might get a chance to poke around inside and see what it's doing wrong. -Josh -- Therefore, send not to know For whom the bell tolls. It tolls for thee. :: Josh 'G-Funk' McDonald :: 0437 221 380 :: [EMAIL PROTECTED]
[flexcoders] Re: Custom Components - updateDisplay results in ghost children drawn
Thanks Josh This example was a simple case. What I actually want to is have my component behave like a container where it centres its child items. In retrospect I would have to extend from the Container class. The absoulte size would fix the problem (in that the item re-draws would occur underneath each other would not be visible). I was just worried that I was getting a lot of outdated screen objects that aren't being cleaned up when drawing underneath each other. But I suppose it's only 1 graphics layer. Cheers Tracy --- In flexcoders@yahoogroups.com, Josh McDonald [EMAIL PROTECTED] wrote: Components don't set explicitWidth and explicitHeight on themselves, they're (optionally) set by the container, and actual sizing is set by the container through setActualSize(). Override measure(), and set measuredWidth and measuredHeight to match your label, and your problems may go away. Also in updateDisplayList you want to set the actual size of the label to the minimu of it's measured size and unscaledWidth x unscaledHeight. -Josh
[flexcoders] Re: Custom Components - updateDisplay results in ghost children drawn
Ok ... so I'm still getting issues with the dynamic height on custom
components.
I have a background Shape which I construct in the createChildren
method and set its graphics. In the updateDisplayList function I clear
and redraw the graphics at the new y position. This results in 2
versions of the Shape existing, first at the initial location (the
ghost version) and second at the new y location.
You can see in the screenshot below, in the 2nd case there there are 2
sets of tiled backgrounds instead of a clear area where the swf asset
(dotted circle) is located.
It seems myShape.graphics.clear() does nothing.
Here's the screenshot:
http://img186.imageshack.us/img186/8470/ghostredrawingxv8.jpg
Here's the code:
public class CustomPanel extends UIComponent {
// Children
private var progress:Sprite;
private var nameContainer:Shape;
private var numberContainer:Shape;
private var nameLabel:Label;
private var numberLabel:Label;
// Styles from parent game-header
private var backgroundFill:Class;
private var backgroundColour:int;
private var padding:int;
private var nameHeight:int = 28;
private var ratingHeight:int = 26;
private var nameBackground:BitmapData;
private var _nameText:String = ;
private var _numberText:String = ;
public function get nameText():String {
return _nameText;
}
public function ChessCubeGameHeaderPanel(backgroundFill:Class,
backgroundColour:int, fontColour:int, ratingFontColour:int,
imageWidth:int, padding:int){
super();
this.backgroundFill = backgroundFill;
this.backgroundColour = backgroundColour;
this.fontColour = fontColour;
this.ratingFontColour = ratingFontColour;
this.imageWidth = imageWidth;
this.padding = padding;
}
override protected function createChildren() : void {
super.createChildren();
if(!nameContainer) {
nameContainer = addChild(new Shape()) as Shape;
}
if(!numberContainer) {
numberContainer = addChild(new Shape()) as Shape;
}
if(!nameLabel) {
nameLabel = addChild(new Label()) as Label;
nameLabel.truncateToFit = true;
nameLabel.setStyle(color, fontColour);
}
if(!numberLabel) {
numberLabel = addChild(new Label()) as Label;
numberLabel.setStyle(color, ratingFontColour);
}
nameBackground = new BitmapData(nameHeight, nameHeight, false)
nameBackground.draw(new backgroundFill());
nameLabel.x = numberLabel.x = padding;
}
override protected function commitProperties():void {
super.commitProperties();
nameLabel.text = _nameText;
numberLabel.text = _numberText;
}
override protected function measure():void {
super.measure();
measuredWidth = measuredMinWidth = explicitWidth;
measuredHeight = measuredMinHeight = ((progress == null) ?
explicitWidth : progress.height) + nameHeight + ratingHeight;
}
override protected function updateDisplayList( unscaledWidth:Number,
unscaledHeight:Number ):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
nameContainer.graphics.clear();
nameContainer.graphics.beginBitmapFill(nameBackground);
nameContainer.graphics.drawRect(0, 0, explicitWidth,
nameHeight);
nameContainer.graphics.endFill();
numberContainer.graphics.clear();
numberContainer.graphics.beginFill(backgroundColour);
numberContainer.graphics.drawRect(0, 0, explicitWidth,
ratingHeight);
numberContainer.graphics.endFill();
var playerWidth:Number = unscaledWidth;
if(playerWidth == 0) {
playerWidth = nameLabel.measuredWidth;
}
else {
playerWidth = Math.min(unscaledWidth,
nameLabel.measuredWidth)
}
nameLabel.setActualSize(playerWidth, nameLabel.measuredHeight);
numberLabel.setActualSize(numberLabel.measuredWidth,
numberLabel.measuredHeight);
if(progress != null) {
progress.x = explicitWidth/2 - progress.width/2;
[flexcoders] Re: Custom Components - updateDisplay results in ghost children drawn
Ok ... so I'm still getting issues with the dynamic height on custom
components.
I have a background Shape which I construct in the createChildren
method and set its graphics. In the updateDisplayList function I clear
and redraw the graphics at the new y position. This results in 2
versions of the Shape existing, first at the initial location (the
ghost version) and second at the new y location.
You can see in the screenshot below, in the 2nd case there there are 2
sets of tiled backgrounds instead of a clear area where the swf asset
(dotted circle) is located.
It seems myShape.graphics.clear() does nothing.
Here's the screenshot:
http://img186.imageshack.us/img186/8470/ghostredrawingxv8.jpg
Here's the code:
public class CustomPanel extends UIComponent {
// Children
private var progress:Sprite;
private var nameContainer:Shape;
private var numberContainer:Shape;
private var nameLabel:Label;
private var numberLabel:Label;
// Styles from parent game-header
private var backgroundFill:Class;
private var backgroundColour:int;
private var padding:int;
private var nameHeight:int = 28;
private var ratingHeight:int = 26;
private var nameBackground:BitmapData;
private var _nameText:String = ;
private var _numberText:String = ;
public function get nameText():String {
return _nameText;
}
public function CustomPanel(backgroundFill:Class,
backgroundColour:int, fontColour:int, ratingFontColour:int,
imageWidth:int, padding:int){
super();
this.backgroundFill = backgroundFill;
this.backgroundColour = backgroundColour;
this.fontColour = fontColour;
this.ratingFontColour = ratingFontColour;
this.imageWidth = imageWidth;
this.padding = padding;
}
override protected function createChildren() : void {
super.createChildren();
if(!nameContainer) {
nameContainer = addChild(new Shape()) as Shape;
}
if(!numberContainer) {
numberContainer = addChild(new Shape()) as Shape;
}
if(!nameLabel) {
nameLabel = addChild(new Label()) as Label;
nameLabel.truncateToFit = true;
nameLabel.setStyle(color, fontColour);
}
if(!numberLabel) {
numberLabel = addChild(new Label()) as Label;
numberLabel.setStyle(color, ratingFontColour);
}
nameBackground = new BitmapData(nameHeight, nameHeight, false)
nameBackground.draw(new backgroundFill());
nameLabel.x = numberLabel.x = padding;
}
override protected function commitProperties():void {
super.commitProperties();
nameLabel.text = _nameText;
numberLabel.text = _numberText;
}
override protected function measure():void {
super.measure();
measuredWidth = measuredMinWidth = explicitWidth;
measuredHeight = measuredMinHeight = ((progress == null) ?
explicitWidth : progress.height) + nameHeight + ratingHeight;
}
override protected function updateDisplayList( unscaledWidth:Number,
unscaledHeight:Number ):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
nameContainer.graphics.clear();
nameContainer.graphics.beginBitmapFill(nameBackground);
nameContainer.graphics.drawRect(0, 0, explicitWidth,
nameHeight);
nameContainer.graphics.endFill();
numberContainer.graphics.clear();
numberContainer.graphics.beginFill(backgroundColour);
numberContainer.graphics.drawRect(0, 0, explicitWidth,
ratingHeight);
numberContainer.graphics.endFill();
var playerWidth:Number = unscaledWidth;
if(playerWidth == 0) {
playerWidth = nameLabel.measuredWidth;
}
else {
playerWidth = Math.min(unscaledWidth,
nameLabel.measuredWidth)
}
nameLabel.setActualSize(playerWidth, nameLabel.measuredHeight);
numberLabel.setActualSize(numberLabel.measuredWidth,
numberLabel.measuredHeight);
if(progress != null) {
progress.x = explicitWidth/2 - progress.width/2;
Re: [flexcoders] Re: Custom Components - updateDisplay results in ghost children drawn
I don't think updateDisplayList is the right place to be doing drawing into graphics, although I may be wrong. I usually do it on the render or updatecomplete event, but that might not be optimal either. Alex would know :) If you want to link to a zip of a test project I might get a chance to poke around inside and see what it's doing wrong. -Josh -- Therefore, send not to know For whom the bell tolls. It tolls for thee. :: Josh 'G-Funk' McDonald :: 0437 221 380 :: [EMAIL PROTECTED]
