I am developing a paint board application using flash builder. User can draw some shapes objects(ellipse, circle, rectangle). I want to implement grouping/un grouping feature some like ms-word in my application. I group multiple objects by putting them inside a container(UIComponent). Now i apply resizing to container and it resize well. I am using a free object handler API to apply selection handle over the container. I want to resize and reposition all children with respect to container changed size. Every thing goes well until all children inside container are having rotation = 0. But if there is any child which is having rotation >0 and <0 things goes worse. The child resize but not in a proper manner. I stretch the parent container width and it increase the height of rotated child. Is there any way using Matrix class or something else to transform all children in same direction and same ratio respective to container?
Are you using Flash Professional? In my experience, placing objects within a symbol is the best route has been easiest to achieve this for me.
Select all the objects you want to link together (can also include existing symbols)
Right click and select 'Create Symbol'
Name the symbol what you'd like, then click okay
You can then freely transform any instance of that symbol, which retains the relationship between the objects within (including rotation).
Related
in my game I have a solar system with many bodies, they're all the same class/movie clip and their size is determined by their mass. When assigned a target that target becomes a child of the body. The body moves towards the target and the target is removed when reached.
This approach is essential as it means waypoints can be set and the targets can orbit the solar system: because everything around the target is moving it also needs to move to keep relative motion otherwise you'd end up in the wrong place.
The problem is having the target a long distance away makes the body's bounding box huge and the body is shrunk down to fit the required dimensions. What I need is to make the target's position not affect the body's size but I can't find the required method/property and visible = false isn't doing the trick. If anybody has a solution that's be great.
I believe includeInLayout may help you with this. visible=false will not display the object, but it's still used in the layout calculations. includeInLayout=false will remove the object from the layout calculations.
I have a multiple Vboxes/Hboxes inside a parent Vbox. I have hide/show effects for the parent container, but I want to know if there is a way to make some of the children ignore this affect that they receive from their parent container.
There's none. The DisplayList is an hierarchical structure, and every leaf object is displayed by using all the parameters from parent objects, including visibility, rotation and more. You may, however, enumerate children in your Vbox/Hbox to undergo the effect, and select (and manually apply) the desired effect only to those that should be hidden. Note that your Vbox/Hbox's visibility should remain true, and opacity at original value, should you use fade in/out effect, otherwise those children of your Vbox/Hbox will too get altered.
You can workaround by adding extra layer.
Then parent would have layers:
New layer with parent background (apply effect here)
your child (effect isn't applied as its parent has no effect)
Hope that helps.
I am having a movieclip container that needs change in it's dimensions. However it contains a bitmap, that needs to be preserved. So that it remains intact no matter how i change the dimension of it's container.
I know, that one way is to change the scale of "bitmap" accordingly. So say, container goes twice in width, then bitmap can be adjusted to scale = 0.5 ( compensating thus).
However i am doubtful, if this method would be visibly good for the bitmap, in case the dimension changes are in decimals. Like scale = 1.2345 etc
Any other good way ?
V.
You could try overriding the scaleX/scaleY setters and getters of your container, so that a change to them results in changing everything inside the container except your bitmap.
That would work, but is a bit strange. Are you sure that you can not organize your objects in a different manner?
If you have items in your container that should not be affected by the containers dimensions, then those items simply do not belong there. It would probably be a good idea to split up the structure.
You could have a Sprite that holds your Bitmap, and then apply your "container" as a mask to that, so that only a part as big as the "container" is visible, or something along those lines.
Apply a matrix to the BitmapData, which will resample it.
I need to be able to layer image in canvas... how it is possible to insert image between two, or order the image, more like layer in photoshop... on top or below. In fact, i alredy draw many images, i need to be able to inser one between those, or just use a dummy and change it later, i dont know
what is the way to do that ?
The easiest way to do this is to just stack all of your elements inside a parent container and adjust the z-index CSS property of each layer.
The higher the z-index, the closer the layer is to the top of the stack. Elements with lower z-index values are obstructed by elements with higher values.
Note that you'll likely have to set position: absolute; on each layer within the container and then align them to, say, the top left corner of the parent element. Otherwise they won't overlap one another.
Alternatively, you can manage the layers based on their position within the DOM tree. The later the element is defined in the DOM, the closer it will be to the top of your layer stack (CSS properties aside, of course). So, you could theoretically use insertBefore() or a homespun insertAfter() to place your layers in the required location within the DOM and avoid z-index manipulation.
I am trying to create a Custom Flex Component using the Flex Component framework:
http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.
All good components allow you to define their dimensions using percentage values using:
MXML:
TextInput width="100%"
or
Actionscript at runtime:
textinp.percentWidth = 100;
My question is how do you implement percentage width/height in the measure() method of your custom component? More specifically, these percentages are converted to pixels values at some stage, how is this done?
The way Flex layouting works is by letting each component lay out its children to a size specified by the parent. "Children" does include the usual children - getChildren(), numChildren - and also those components which makes up borders, handles, etc., which are called "chrome" and are part of getRawChildren().
The Flex framework now does two loops over all components (which are actually part of the display tree). The first is bottom up (deepest nested elements first) and call the measure() method. It should calculate how much space (width/height) the component would take if it can has as much space as it wants, no limits (think: scrollbars) and put it into the measuredWidth and measuredHeight properties. Secondly, it calculates how much space it wants to have as an absolute minimum, put into measuredMinHeight / measuredMinWidth. To calculate this, border thickness, chrome and regular children are asked about their sizes using getExplicitOrMeasuredHeight()/Width(), and added together. That's why it's depth-first.
The second loop is to do the actual layouting. This starts at the top of the tree, and updateDisplayList is called, with x/y parameters telling the component how much size it actually does have. Based on this information the component will tell its direct children where they should be (relative to their parents) and how big they should be - child.move(x,y) and child.setActualSize(w,h)
So it's actually the parent container who takes relative sizes into account. Your component states it's ideal (minimum size so that everything can be displayed) and minimum sizes in measure() and has to deal with whatever it gets in its updateDisplayList(). The parent component takes the available space it has, makes sure that each component gets it's minimum size and will then distribute the rest to all components. In this phase, it will look at the percentWidth/Height properties of its children.
So if you want to put your component in a standard Flex container like HBox, you don't need to do anything special for percentage sizes to work.