I realize you can make one of each effect, set the same target, and hit .play();, but this produces weird results (acknowledged by Adobe, fixed in Flex 4).
I'm trying to have an object move from the top of the screen to the bottom while it rotates around it's own center. When called independently, both of these effects work perfectly. When called together, the object always rotates around the top left corner. I even tried putting them both inside a <Parallel> tag with no success. Has anyone come up with a workaround?
I found a stopgap solution.
The problem (as mentioned in my OP and in the comment to David), is that after the Rotate effect completed one full cycle, if it had a repeatCount=0 to continue indefinitely, it's originX and originY values got reset to the registration (top, left) point, which made the whole appearance wobbly.
The trick, therefore, is to not let it complete a full cycle of rotation. If you have
<mx:Image id="myImage" source="images/someImage.png" />
<mx:Rotate originX="{myImage.width/2}" originY="{myImage.height/2}"
angleFrom="0" angleTo="360" duration="2000" target="{myImage}" />
...then what you need to do is something like ...angleTo="360*100"... AND ...duration="2000*100...
By setting the angleTo property to something very high, it will never finish one Rotate effect before you remove or restart it, and therefore won't throw off the originX and originY, and by multiplying the duration by the same factor as the angleTo you will keep the same rate of rotation you were hoping for.
This is probably as clear as mud to most people, but this was a big breakthrough for me, so I hope this can save someone else some time.
You need to include both Move and Rotate inside a Parallel instance to get them to work simultaneously. Additionally, in order to get a Rotate effect to rotate around the center of a component, you need to set the originX and originY properties to the center of your target, (originX and originY properties define the rotation center point.)
The following examply works perfectly fine:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image id='effectTarget' source="assets/waterfall.jpg" width="390" height="292" scaleContent="true" autoLoad="true"/>
<mx:Parallel duration="5000" id="effectParallel">
<mx:Move xFrom="0" xTo="500" yFrom="0" yTo="500" target="{effectTarget}"/>
<mx:Rotate originX="195" originY="149" angleFrom="0" angleTo="360" target="{effectTarget}"/>
</mx:Parallel>
<mx:Button x="856" y="27" label="Go" click="effectParallel.play()"/>
Related
In general, I haven't yet found a definitive way to get Flex and Spark containers to size themselves relative to their children. I have searched for good documentation for this concept many times but have yet to find anything that sufficiently explains the concepts.
A simple example of something I often want to do is to draw a border uniformly around a set of controls.
The goal here would be to have all UI elements to size themselves automatically.
<s:BorderContainer>
<s:HGroup>
<s:Label text="l1" />
<s:Label text="very long label 2" />
</s:HGroup>
</s:BorderContainer>
I would want the Labels to size themselves based on the text property, and the HGroup should be as big as needed to contain labels and BorderContainer should only just contain that HGroup.
Now this simple example may or may not work as desired, I haven't yet figured out how to determine what the output will look like without trying the code. Does anyone know of a good way to understand this process so I can know deterministically how things will look?
Now the more complicated example that I am working on now.
I have a class that extends the BorderContainer. Within the class I create an HGroup with 5 Labels as children of the HGroup. Then the HGroup is added as a child of the ExtendedBorderContainer (using addElement() method).
Then the new class is used in the application as:
<mx:ViewStack>
<s:NavigatorContent>
<my:ExtendedBorderContainer />
</s:NavigatorContent>
<!-- more NavigatorContents here -->
</mx:ViewStack>
I have tried various [max|min]height/width combinations and I can not get the desired layout, which is very tight borders around elements without extraneous space starting from the deepest Label children all the way up to the NavigatorContent.
Look here:
http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_3.html
It is not clear what your problem is.
Regarding first part of your question: what do you mean saying "may or may not work as desired". This example should work and have layout that you described. Label sizes itself based on text property and so on. What behaviour do you get?
Second part:
If you are hinting that your layout is ok in general but have extra spacing between items then look at the padding and gap properties of containers. Some containers have non zero default padding and gap and you have to override them manualy.
I am using mx:Tree (in Flex 4), and assigned a customised MXTreeItemRenderer for every items. As the TreeItemRenderer contains a list with tileLayout, which means the height of every row is variable. So I have to set the tree's "variableRowHeight to true. When I was testing the tree, everything went well. But when I was using the vertical scroller, I met some problems:
The scroll bar did not move to the position I want. When I was scrolling the content, the scroll bar sometimes scrolled to a unwanted position (e.g. the head of the tree). When there are more rows, the problem is more obvious.
When I was scrolling the tree, the images were flicking all the time. That means, the images are reloading I guess. any help?
Is there anyone who can help me solve the problems? many thx :)
One way that I found helpful was to just wrap the tree in a canvas. I was having the same problem with the tree's scrolling because it would do all sorts of funky things, but when you allow the canvas to handle the scrolling instead of the tree everything works out. I chose this over replacing it with the spark tree just because it was a nice quick fix.
<mx:Canvas height="100%" width="100%" verticalScrollPolicy="on">
<mx:Tree width="100%" height="100%"
click="click_handler(event);"
verticalScrollPolicy="off"
itemRenderer="com.fti.view.itemRenderers.defaultRenderer"
itemClose="{treeSample.height = treeSample.measureHeightOfItems();}"
itemOpen="{treeSample.height = treeSample.measureHeightOfItems();}"
id="treeSample"
variableRowHeight="true"/>
</mx:Canvas>
Be sure and include those itemClose and itemOpen properties so the canvas is able to accurately set the height and scroll properly. One warning is that if you're working with larger trees, this can be a bit heavy and impact performance.
use SparkTree
http://kachurovskiy.com/2010/spark-tree/
there is too much bugs with the current tree.
( whating for Flex 5 to clean out thoose things finally ) :)
Hi
I want to use the mx:ProgressBar of flex just in order to be able to show a filled bar according to a certain percentage(If there is a different control to use, please suggest).
Anyhow, I want to show the control flipped by 90 degrees.
I tried to use the rotation="90" but after the rotation you have to set the x coordinate in order to move it to the right and I want to avoid this.
Is there any other way except rotation="90" ?
Thanks,
Clint
if you wish to rotate on the center you try the trick of using rotating animation:
<mx:Rotate
id="ID"
angleFrom="0"
angleTo="360"
originX="0"
originY="0"
/>
With rotation animation you can specify originX/originY so you can rotate it on its center. Call the rotate motion on component creationcomplete
I need help with Flex.
I want to learn how you can change the registration point for the Canvas.
I want to make a zoom of this component, but the point registration in the upper left corner! How do I move to the center?
There are two solutions:
Place your Canvas in a container object and center it.
Leave the registration point as it is and when zooming, change the x and y coordinates to the left/top.
There might be a "proper" solution though.
Hope it helps,
Rob
I'm not sure how it's going to help to 'center' the registration point, but whatever. This is how you do it:
Flex 3
<mx:Canvas clipContent="false">
<mx:Box width="400" height="400" x="-200" y="-200" backgroundColor="#000000" />
</mx:Canvas>
Flex 4
<s:Group clipAndEnableScrolling="false">
<s:BorderContainer width="400" height="400" x="-200" y="-200" backgroundColor="#000000" />
</s:Group>
But however, there are other problems, like if I want to center the canvas/group, it won't work properly if you use vertical/horizontalCenter because the content within it is off. Personally, I think this workaround is idiotic if you just want to zoom in. It's a fairly simple operation. If you need it to be centered while it's zooming in, you can always change the x/y position of whatever you're zooming into. The calculation is fairly simple to find the center of your components:
var center:Point = new Point(component.x + component.width/2, component.y + component.height/2);
I want my custom button to look like the button sample below.
More specifically, I want the width of the button to be determined by the width of the largest word in the label (i.e. width of "Elongated" in my example). The label must wrap, not truncate.
And I want only one pixel between the top edge of the icon and my button's top edge.
I have tried lots of things but to no avail so far. I have reduced the horizontalGap and verticalGap to zero and padding to zero. But still nothing. Please help.
Here's what I have right now:
<mx:Button top="0" cornerRadius="2" paddingLeft="0" paddingRight="0" leading="0" letterSpacing="0" paddingTop="0" paddingBottom="0" verticalGap="0" horizontalGap="0" textAlign="center" labelPlacement="bottom" icon="{MyIcon}" height="60" width="75" label="Elongated Label" fontSize="10" />
That's not at all simple.
You will need to create your own button,
public class Mybutton extends Button {...}
override createChildren and set the word wrap of the IUITextField used for the label to true.
override measure and use your own line metrics to determine the width that the button should be. If you get the measure right, the button will lay itself out properly.
I don't have a dev environment in front of me at the moment, but something along these lines should work:
Set truncateToFit property of the Label to false (OR use a TextField with wordWrap set to true - I think this should keep the words together as much as possible).
I haven't had the need to use any of the above yet, and hopefully you haven't tried them yet because it would be an easy solution to a part of your problem. Without any code, I'm not sure why padding didn't work, but maybe it's something to do with the word truncation.
As an alternative, why not use a Button, embed or specify a source for your icon and decide where to place the text by specifying the object's labelPlacement property?
EDIT: Since there's no property in Button about wordWrap, as they would recommend in the Adobe Flex forums for such questions regarding sizing based on content where there is no automatic feature to do that, you have to find the longest word and adjust the width of the button (i.e.: in the creationComplete event). Experimenting to find the font to pixel ratio would be my best bet (or you can use a Monospace font where all the characters are given the same space thereby simplifying the estimation):
creationComplete="event.target.width=returnMyWidth();"
As for the padding, it may be related to the custom width that you had set or it may be from embedding the image automatically setting a padding by being included - I'm not really sure, so it would be good if someone can offer a comment based on experience with this.