I thought I had a handle on AS3, DisplayObjectContainers, etc. but this basic thing is really confusing me: changing the width/height of a sprite does not affect it's visual contents - either graphics drawn within it or any children it may have.
I have searched around and found an Adobe page that represents my own little test code. From that page, I would expect the sprite to increase in visual size as it's width increases. For me, it doesn't. (http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObject.html#width)
width property
width:Number [read-write]
Indicates the width of the display object, in pixels. The width is calculated based on the bounds of the content of the display object. When you set the width property, the scaleX property is adjusted accordingly, as shown in the following code:
My code below doesn't affect the visual display at all - but it does set the width/height, at least according to the trace output. It does not affect the scaleX/scaleY.
What the heck am I missing here??
My setup code:
testSprite = new SpriteVisualElement();
var childSprite:SpriteVisualElement = new SpriteVisualElement();
childSprite.graphics.beginFill(0xFFFF00, 1);
childSprite.graphics.drawRect(0, 0, 200, 100);
childSprite.graphics.endFill();
childSprite.name = "child";
testSprite.addChild(childSprite);
container.addElement(testSprite);
testSprite.addEventListener(MouseEvent.CLICK, grow);
}
public function grow(event:MouseEvent):void
{
event.target.width += 5;
event.target.height += 5;
trace("grow", event.target.width);
}
If I understand the code correctly; you are changing the width / height of the sprite. But you are doing nothing to change the width/ height of the sprite's children.
In the context of a Flex Application, you can use percentageWidth and percentageHeight on the child to resize the child when the parent is resized. You could also add a listener to the the resize event and adjust sizing that way; preferably tying in to the Flex Component LifeCycle methods somehow.
I believe these approaches are all Flex specific, and dependent upon the Flex Framework. Generic Sprites, as best I understand, do not automatically size themselves to percentages of their parent container; and changing the parent will not automatically resize the parent's children.
I bet something like this would work:
public function grow(event:MouseEvent):void
{
event.target.width += 5;
event.target.height += 5;
childSprite.width += 5;
childSprite.height += 5;
trace("grow", event.target.width);
}
First, if you have a problem with a flex component, you can look over its source code.
In my environment, (as I installed flex SDK to C:\flex\flex_sdk_4.1), the source code for SpriteVisualElement is located at
C:\flex\flex_sdk_4.1\frameworks\projects\spark\src\spark\core\SpriteVisualElement.as
In the source code, you'll find that width property is overridden :
/**
* #private
*/
override public function set width(value:Number):void
{
// Apply to the current actual size
_width = value;
setActualSize(_width, _height);
// Modify the explicit width
if (_explicitWidth == value)
return;
_explicitWidth = value;
invalidateParentSizeAndDisplayList();
}
So, you cannot expect the auto-scaling of the component.
Making custom components will be one solution.
Here is a sample implementation of custom component.
Custom Component Example - wonderfl build flash online
Related
I am conceiving a horizontal bar containing items.
They must all be of same width, having the same spacing between them.
They can expand as much as they want vertically (
stackblitz here
Problem:
How to automatically set the width of the row elements? Here I simply put a value that looks good: width:200px.
I want them to have a width dependent on the number of element per row.
What I tried:
Using elementRef in Horizontile (component holding the individual tiles, displaying with *ngFor) to get the width of this element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
it returns 5. (??) Using .width returns nothing. Also this is not recommended, I'd like another solution, less coupling.
I noticed I can make use of width:inherit; in the css of the individual tile component, which allows me to set the style from the horizontal list component.
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>
As the currentWidth value is zero, of course it doesn't work;
I tried setting it in % but the inherits css tag keeps the %, which is not the intended effect.
Why is the app-tile styling not cared about if inherits is not set?
I tried using ViewEncapsulation but it had no effect either.
This looks like a trivial matter though: did I just miss something?
You can use the offsetParent (link) width and create a method to return the value on each of the cells and call it in your [style.width.px], something like the following will work.
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
stackblitz
ngAfterViewInit(): void {
//added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
});
}
getWidth(): number{
let width:number = 0;
//you may need to change this value to better display the cells
let multiplier = 0.7;
width = (this.currentWidth * multiplier) / this.ndisplayTiles;
width = Math.round(width);
return width;
}
<app-tile [class]="'layout-tile'" [tile]="item" [style.width.px]="getWidth()">
</app-tile>
I'm looking for some method to change grid column's width (or row's height) by animtion defined in Storyboard. I have already found some solutions for WPF apps, but they are all useless in case of Windows Store programming, eg.:
Grid Column changing Width when animating
how to change the height of a grid row in wpf using storyboard
http://www.codeproject.com/Articles/18379/WPF-Tutorial-Part-2-Writing-a-custom-animation-cla
Is such result obtainable by creating a custom class, inheriting from Timeline? If so, which components should be overrode for proper implementation?
You should be able to use a simple DoubleAnimation. Make sure to set EnableDependentAnimation=True, as outline here.
One thing to realize when trying things out is that ColumnDefinitions are a GridLength struct. You can find more information on them here. You will need to have the animation set the Value property.
Here is a sample method to animate a Grid ColumnDefinition MaxWidth.
private void Animate(ColumnDefinition column)
{
Storyboard storyboard = new Storyboard();
Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
CubicEase ease = new CubicEase { EasingMode = EasingMode.EaseOut };
DoubleAnimation animation = new DoubleAnimation();
animation.EasingFunction = ease;
animation.Duration = duration;
storyboard.Children.Add(animation);
animation.From = 1000;
animation.To = 0;
animation.EnableDependentAnimation = true;
Storyboard.SetTarget(animation, column);
Storyboard.SetTargetProperty(animation, "(ColumnDefinition.MaxWidth)");
storyboard.Begin();
}
For mobile Flex / Flash Builder, is it better to detect screen dimensions using systemManager.screen.* or Stage.* - and why?
In most cases, it is more reliable to use FlexGlobals.topLevelApplication.width and FlexGlobals.topLevelApplication.height.
When building apps, I think it is more important to know the space I have to work with than it is to know the actual screen dimensions.
To get this information, I would tie into the Flex Framework and use the unscaledWidth and unscaledHeight properties passed into the updateDisplayList() method.
The question is, why do you need to detect screen dimensions. If you just need to use them to size and position a component's children, then I believe the solution I describe above is the best one. If you need this information for some other reason, explain.
This is one way to size and position a label inside the updateDisplayList of it's container:
protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledwidth, unscaledHeight);
// first position it
// you could also use this.myLabel.move(x,y) method to position the element
this.myLabel.x = 0;
this.myLabel.y = 0;
// then size it
// sizing to 100% height/width of container
this.myLabel.height = unscaledHeight;
this.myLabel.width = unscaledWidth;
// or you could also use setActualSize; which is slightly different than setting height and width
// becaues using setActualSize won't set the explicitHeight/explicitWidth, therefore measure will still
// execute
this.myLabel.setActualSize(unscaledWidth, unscaledHeight)
// or you could set the label to it's measured height and measured width
this.myLabel.height = this.myLabel.getExplicitOrMeasuredHeight();
this.myLabel.width = this.myLabel.getExplicitOrMeasuredWidth();
}
I am trying to attach some of my actionscript class, inherited from Sprite, to my Flex application by attaching it to a UIComponent, then add UIComponent to a panel. However, the size of my Sprite class appears to be larger than the panel. So, I try to resize it using DisplayObject.scale property, but I need to know the size of my container. Since I try to make my code reusable, I figure that I should let my Sprite class handle the resize by getting it via its parent property (let's say, I can resize it by set
this.scaleX = this.parent.Width/this.width or something like this)
However, my Sprite class's parent, which is the UIComponent, has width/height of 0.
So, my question is:
1) Is there any better way to resize DisplayObject class to fit its container when attached to Flex object?
2) If you know, why my UIComponent's size remain 0 and my DisplayObject still appears at its full size?
Here's my code, using Flash Builder 4:
private var loader:Loader = new Loader();
private function testLoader():void {
var urlRequest:URLRequest = new URLRequest("http://localhost/welcome.png");
loader.load(urlRequest);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaderLoadComplete);
}
private function onLoaderLoadComplete(e:Event):void {
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoaderLoadComplete);
var ui : UIComponent = new UIComponent();
ui.addChild(loader);
panelTest.addElement(ui);
trace("ui.width = " + ui.width);
trace("ui.height = " + ui.height);
trace("loader.width = " + loader.width);
trace("loader.height = " + loader.height);
trace("panelTest.width = " + panelTest.width);
trace("panelTest.height = " + panelTest.height);
}
And this is the result when run:
ui.width = 0
ui.height = 0
loader.width = 571
loader.height = 411
panelTest.width = 480
panelTest.height = 320
I think it's the other way around: the parent should set the child element size while rendering. You can override the updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) method to set the size of your loader child. See Advanced Visual Components in ActionScript.
I guess that the size of your ui is not really 0. The size is updated later after the layout and rendering process. So you have to wait for the layout to complete after adding a component to stage.
About the remaining 0, unfortunately is a known (grrr) problem: http://www.mail-archive.com/flexcoders#yahoogroups.com/msg39998.html
You can try to access it in a hacked way (using the mx_internal namespace): get width of dynamically created custom uicomponent
Adding the sprite directly to the panel may also be helpful. This can be done by adding the loader to the panel's rawChildren: http://www.actionscript.org/forums/showthread.php3?p=728034
Enjoy.
I have a function I wrote that gets the height of the application without scrolling. Meaning the height it would need to be to not have to scroll.
This is the function:
private function getContentHeight():Number
{
var height:Number = 0;
for(var i:uint = 0; i<this.numChildren; i++)
{
var d:DisplayObject = this.getChildAt(i) as DisplayObject;
//trace(d.name+":"+d.height);
height += d.height;
}
height += Number(this.getStyle('verticalGap'))*this.numChildren;
height += Number(this.getStyle('paddingTop'));
height += Number(this.getStyle('paddingBottom'));
return height;
}
This function works well but the problem is knowing when to call it. I planned on calling it after I add/remove any children from it. However thats still too soon because I don't get the correct height yet if I run it then. The fix I currently have is using a Timer to call the function about 300 milliseconds after a child is added/removed which seems to work well but I think this is a very risky fix. So I was wondering a better solution. I am thinking there has to be some sort of event I can listen for that will tell me when its ready for me to run this function, I just don't know what event that would be?
Thanks!
First of all, take a look at measuredWidth and measuredHeight properties of UIComponent (so all the controls and containers have these properties), flex already measures required width/height of the containers.
Secondly, the right place to look at this properties are creationComplete and updateComplete events. In your case, if you add some children programmaticaly, you should handle updateComplete event after you've added you children.