Can transitions be added to a source code that uses includeIn and excludeFrom to show/hide elements? It seems that elements are hidden immediately not allowing enough time for the transition to be played.
In this documentation article, a method with visible and includeInLayout properties is used but that would mean I would need to rewrite my MXML code which I'd rather avoid.
Yes, Flex 4 transitions work well with states.
I think you need to look closer at the AddAction and RemoveAction tags.
There is a nice introduction video made by Chet Haase, called "Flex 4 States And Transitions".
Try google it
Yes, that is precisely a use case for transitions (hiding/showing elements nicely with states).
Take the following example:
<s:Transition fromState="stateA" toState="stateB" autoReverse="true">
<s:Sequence>
<s:Fade targets="{[componentA]}"/>
<s:Resize targets="{[componentB]}"/>
</s:Sequence>
</s:Transition>
<s:Transition fromState="stateB" toState="stateA" autoReverse="true">
<s:Sequence>
<s:Resize targets="{[componentB]}"/>
<s:AddAction target="{componentA}"/>
<s:Fade targets="{[componentB]}"/>
</s:Sequence>
</s:Transition>
The example above, componentA is only shown in stateB while componentB is resized to accommodate it. When transitioning from stateA to stateB (i.e. componentA is going away), componentA is faded out first and then the outer container is resized. When transitioning from stateB to stateA (i.e. adding componentA within componentB), componentB is first resized, then componentA is added with a fade-in effect (note the need to specify the exact point within the sequence when componentA is actually added).
Related
Newbie here,
I have a skinned button at x=47 y=126 which is later "covered" by a .png that loads dynamically. Once the .png loads, the button disappears. How can I tell Flash Builder 4 to place the .png behind the button so that it is always clickable. FYI: if I move the button away from the graphic, it works just fine, but, for design purposes, I really would like it to stay where it is.
Thanks,
Jason M.
You could also try giving the button a depth value of 1 or higher.
"Spark containers order their items based on their depth property, with the lowest depth in the back, and the higher in the front.Items with the same depth value appear in the order they are added to the container."
<s:Button x="47" y="126" depth="1" skin="customSkin"/>
Conversely you could add a smaller depth to the .png, or if you are drawing them in the same container change the order they are in there. (From the quote above on depth)
If you need to have an image as a background for your button you should place it behind button the following way:
<s:Group>
<s:BitmapImage />
<s:Button />
</s:Group>
I suppose your case is the following:
<s:Group>
<s:Button />
<s:BitmapImage />
</s:Group>
I have a title window based component in Flex 4 that has two states: A & B.
The title window is wider in state B.
I want the title window to animate when I switch states by using the Resize effect to widen the component.
What's the correct way to do this? Should define state specific width for the component or should I just run a transition effect that does this? The first option seems cleaner to me, but I can't figure out how to tell flex to use an effect and figure out by itself how much to resize the component..
Assaf, You can use tween, Parallel, Move and Resize properties for the same.
I implemented something similar to your request: I needed to add a transition effect, (Resize effect), between two states included in a TitleWindow component. This is how I did it:
My two states:
<s:states>
<s:State name="State1"/>
<s:State name="myInfoState"/>
</s:states>
My transition effect:
<s:transitions>
<s:Transition id="myTransition" fromState="*" toState="myInfoState">
<s:Parallel target="{this}">
<s:Resize duration="400"/>
</s:Parallel>
</s:Transition>
</s:transitions>
Note the {this} property. This is because my TitleWindow doesn't have an id.
Finally, you just need to call your currentState declaration as always:
<s:Button click="currentState = 'myInfoState'"/>
I guess that the keyword is {this} instead of the element's id.
Greetings from Pachuca, México!
I have a button with the various states (up/over/down etc) that uses a skin file to render the display. I want to achieve animation between the states. For instance, between the change from 'up' to 'over' I want to fade in a color and a border.
The way I am doing this at the moment is to use viewstates and animate between them using transitions and the mx:AnimateProperty. However, using this method I can only animate one property per viewstate. So only the border, or the color can be animated.
Does anyone know how I can achieve multiple animations on multiple properties of a programmatic button skin? Thanks in advance!
Note: I have looked into using tweener but cannot see how it would help my situation
http://www.degrafa.org/
http://www.degrafa.org/source/AdvancedSkins/Skins.html
Lewis,
You will not be able to animate any properties of a ProgammaticSkin in Flex 3 because the way UIComponent does skins is by instantiating an entire new instance of your skin and then setting its name property. Then when the component needs to display a new state, it makes another new instance, sets its name property to something different, makes the old skin invisible and makes the new skin visible. In this way, it "caches" the skins, instead of switching states and redrawing in UpdateDisplayList.
Now because of that you can't easily animate any drawing of the skin itself, however, there is a solution although it's not entirely elegant.
ProgammaticSkin extends FlexShape, so you can't add any children to your skin, but UIComponent looks for something that implements IProgrammaticSkin, so you can make your own ProgrammaticSkin that extends FlexSprite instead of FlexShape. This allows you addChild to your skin. If you are clever enough, you can synchronize transitions between the various cached skins to make them animatable.
Hope that helps,
Jonathan
Since you use skin files I suppose you use Flex4.
In Flex4, you can use multiple mx:AnimatePropery declarations wrapped in a s:Sequence or s:Parallel node.
<s:transitions>
<s:Transition>
<s:Parallel>
<mx:AnimateProperty
target="{button}"
property="property1"
fromValue="property1StartValue"
toValue="property1EndValue" />
<mx:AnimateProperty
target="{button}"
property="property2"
fromValue="property2StartValue"
toValue="property2EndValue" />
</s:Parallel>
</s:Transition>
</s:transitions>
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()"/>
In my Flex3 app I have some floating windows which contain variable amounts of text. The windows are meant to be user-resizable. Currently, while I can resize the windows OK, I can't get the text in a TextArea in the window to re-flow when the window is resized. I've come across blog postings that there's a size bug in TextArea that means that setting the text content does not re-size the TextArea properly, together with suggested workarounds. In my case, the content stays the same but the geometry of the container changes. What seems to be happening is that the TextArea adopts a fixed size when it is first rendered, and no amount of resizing the container changes that. Can anyone suggest a means of creating a fluid text area in Flex?
Ian
By binding the textArea's width to its container's with, you can manage to keep the margins and borders and don't have to deal with percentages.
Also, your textArea will be resized each time its parent changes in size.
i'm thinking of something like this:
<fx:Script>
<![CDATA[
import spark.layouts.supportClasses.LayoutBase;
protected function onButtonClicked(event:MouseEvent):void
{
currentState = (event.target.selected ? 'largeState' : 'smallState');
}
]]>
</fx:Script>
<s:TitleWindow id="window" width="300" height="200">
<s:TextArea width="{window.width - 10}" height="{window.height - 60}"
text="{IMyConsts.LOREMIPSUM}" borderVisible="false" />
<s:ToggleButton id="btnEffect" bottom="5" click="onButtonClicked(event)"
label="{btnEffect.selected ? 'Go smaller' : 'Go larger'}" />
</s:TitleWindow>
<s:states>
<s:State name="smallState" />
<s:State name="largeState" />
</s:states>
<s:transitions>
<s:Transition fromState="smallState" toState="*">
<s:Resize target="{window}" widthTo="400" heightTo="300" />
</s:Transition>
<s:Transition fromState="largeState" toState="*">
<s:Resize target="{window}" widthTo="300" heightTo="250" />
</s:Transition>
</s:transitions>
I found a great example of fluid windows please do visit it. They provide source code also so may be you would get better idea.
http://examples.adobe.com/flex3/devnet/dashboard/main.html
You could try Text Layout Framework from Adobe:
http://labs.adobe.com/technologies/textlayout/
I can take a whack at this... but don't laugh..
I am not sure if you need to use a particular container but in any event, set the width and height to 100% and use Grid > GridRow and GridItem to size and resize Text Control you can specify the width of the table or just use it just like an HTML table in Flex to manipulate the size of controls and containers....
hope that helps...