What is the problems in this transition?? The error is Flex cannot resolve the fromState attribute.
<s:transitions>
<s:Transition fromState="Viewer" toState="Editor">
<s:Fade target="{viewerProductDetail}" duration="1000"/>
</s:Transition>
<s:Transition formState="Editor" toState="Viewer">
<s:Fade target="{editorProductDetail}" duration="1000"/>
</s:Transition>
</s:transitions>
The second transition specifies "formState" not "fromState". Are you sure you're reading the error correctly?
Related
Is there an easy way, using only MXML, to transition between states that add and remove elements.
For example:
<s:Group includeIn="state1"/>
<s:Group includeIn="state2"/>
Can MXML transitions slide state1 out and state2 in, for example?
Thank you.
In addition to the link posted above here's a way to apply a single transition to multiple targets:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:views="views.*" >
<s:states>
<s:State name="home"/>
<s:State name="help"/>
<s:State name="instructions"/>
<s:State name="settings"/>
<s:State name="feedback"/>
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="*" >
<s:Sequence >
<s:Wipe direction="right" duration="350" target="{this}"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<views:Home id="home" includeIn="home" width="100%" height="100%" ownerComponent="{this}"/>
<views:Help id="help" includeIn="help" width="100%" height="100%" ownerComponent="{this}" />
<views:Instructions id="instructions" includeIn="instructions" width="100%" height="100%" ownerComponent="{this}" />
<views:Settings id="settings" includeIn="settings" width="100%" height="100%" ownerComponent="{this}" />
<views:Feedback id="feedback" includeIn="feedback" width="100%" height="100%" ownerComponent="{this}" />
</s:Group>
The previous transition creates a wipe from one direction to the other.
The next transition fades from one view to another:
<s:transitions>
<s:Transition fromState="*" toState="home" >
<s:Sequence >
<s:Fade target="{this}" alphaFrom="1" alphaTo="0"/>
<s:RemoveAction targets="{[home,help,instructions,settings,feedback]}"/>
<s:AddAction target="{home}"/>
<s:Fade target="{this}" alphaFrom="0" alphaTo="1"/>
</s:Sequence>
</s:Transition>
</s:transitions>
The next slides one view in while sliding the rest out:
<s:transitions>
<s:Transition fromState="*" toState="home" >
<s:Sequence duration="1000" >
<s:Parallel>
<s:Move applyChangesPostLayout="true" targets="{notHomeTargets}" xFrom="0" xTo="{-width}"/>
<s:AddAction target="{home}" />
<s:Move applyChangesPostLayout="true" target="{home}" xFrom="{width}" xTo="0"/>
</s:Parallel>
<s:RemoveAction targets="{targets}" />
</s:Sequence>
</s:Transition>
</s:transitions>
You would have to create one for each state with the last examples.
In Flex 3 you could do a glow effect like so:
<mx:Glow id="glowImage" duration="250"
alphaFrom="0" alphaTo="1"
blurXFrom="0.0" blurXTo="3.0"
blurYFrom="0.0" blurYTo="3.0" strength="2"
color="0xcc0000" target="{this}"/>
<mx:Glow id="unglowImage" duration="250"
alphaFrom="1" alphaTo="0"
blurXFrom="3.0" blurXTo="0.0"
blurYFrom="3.0" blurYTo="0.0" strength="2"
color="0xaaaaaa" target="{this}"/>
And the MXML:
<mx:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/>
In Flex 4 we are supposed to use the AnimateFilter with a GlowFilter (recommended by Adobe). Here's what I've come up with:
<s:AnimateFilter id="glowAnimation"
target="{this}"
duration="250"
>
<s:bitmapFilter>
<s:GlowFilter color="#ff0000" strength="3" quality="3" />
</s:bitmapFilter>
<s:motionPaths>
<s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurX"/>
<s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurY"/>
</s:motionPaths>
</s:AnimateFilter>
And the MXML:
<mx:Image rollOverEffect="{glowAnimation}" rollOutEffect="{unglowImage}"/>
The problem is that this animates once and then the effect is removed where as the mx effect applies the filter and keeps it applied.
~~~ UPDATE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
RIAStar's answer is right and I want to add the reason why from this video I just stumbled upon [1]. It describes the differences between Animate and AnimateFilter. AnimateFilter is transient. It applies the filter and when it's done it removes it. Animate applies the values to the target permanently.
We also should be aware that in Flex 4 not all effects support triggers.
From the AnimateInstance class:
override public function startEffect():void
{
// This override removes EffectManager.effectStarted() to avoid use of
// mx_internal. New effects are not currently triggerable, so
// this should not matter
}
What this means is that we cannot rely on rollOverEffect to trigger the effect bound to it. We must call effect.play() on the rollOver event.
So that means when we use the Animate class we also need to change this:
<s:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/>
to this:
<s:Image rollOver="glowImage.play()" rollOut="unglowImage.play()"/>
Note when using multiple related effects it is best practice to call end() on a playing effect before calling play() on it's related effect.
Also, note when using a single effect, as in the answer, reverse it rather than end it like so glowAnimation.play(null, true).
<s:Image rollOver="rollOverAnimation.play()" rollOut="rollOverAnimation.play(null, true)"/>
I don't know about AnimateFilter, but this solution using a simple Animate effect should work nicely:
<s:Animate id="glowAnimation" target="{glow}" duration="250">
<s:motionPaths>
<s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurX"/>
<s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurY"/>
</s:motionPaths>
</s:Animate>
<s:Image rollOver="glowAnimation.play()"
rollOut="glowAnimation.play(null, true)">
<s:filters>
<s:GlowFilter id="glow" blurX="0" blurY="0" />
</s:filters>
</s:Image>
Note that I set the initial values of blurX and blurY to 0. This is necessary because otherwise it will display the default 4 as long as you don't roll over the image.
I use transitions for effect switching within SparkSkin. For bluring a skinned item under cursor:
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<s:BlurFilter id="aBlurFilter" blurX="0" blurY="0" blurX.over="10" blurY.over="10" quality="{BitmapFilterQuality.HIGH}" />
</fx:Declarations>
<s:transitions>
<s:Transition fromState="*" toState="over">
<s:Animate id="BlurFilterTo"
target="{aBlurFilter}"
repeatCount="1"
duration="500"
repeatBehavior="reverse"
>
<s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="10"/>
<s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="10"/>
</s:Animate>
</s:Transition>
<s:Transition fromState="over" toState="*">
<s:Animate id="BlurFilterFrom"
target="{aBlurFilter}"
repeatCount="1"
duration="500"
repeatBehavior="reverse"
>
<s:SimpleMotionPath property="blurX" valueFrom="10" valueTo="0"/>
<s:SimpleMotionPath property="blurY" valueFrom="10" valueTo="0"/>
</s:Animate>
</s:Transition>
</s:transitions>
<s:BitmapImage id="iconDisplay" filters="{[aBlurFilter]}" />
I'm interested in finding out the best approach to this issue, it's not technically difficult but there must be an elegant solution.
Basically i have a form that features mostly text inputs, i would like to change the style of the input boxes based on the current state.
I can do this in the mxml on each input...
<s:TextInput text="label" borderColor.State1="0xFFFFFF" borderColor.State2="0x000000"/>
But that involves creating properties on every single item in the form.
There must be a better way of doing this without adding a property to each item?
Thanks!
You can use transitions and SetAction to set styles on multiple objects at the same time based on a new viewstate. This is a piece of an example from the SDK documentation:
.
<s:states>
<s:State name="Login" />
<s:State name="Register" />
</s:states>
<s:transitions>
<!-- Define the transition from the base state to the Register state.-->
<s:Transition id="toRegister" fromState="*" toState="Register">
<s:Sequence targets="{[loginPanel, registerLink, confirm, loginLink]}">
<s:RemoveAction />
<s:Fade />
<s:SetAction target="{loginPanel}" property="title" />
<s:SetAction target="{loginButton}" property="label" />
<s:SetAction target="{loginButton}" property="color" />
<s:Resize target="{loginPanel}"/>
<s:AddAction />
<s:Fade />
</s:Sequence>
</s:Transition>
<!-- Define the transition from the Register state to the base state.-->
<s:Transition id="toDefault" fromState="Register" toState="*">
<s:Sequence targets="{[loginPanel, registerLink,
confirm, loginLink]}">
<s:RemoveAction/>
<s:SetAction target="{loginPanel}" property="title"/>
<s:SetAction target="{loginButton}" property="label"/>
<s:SetAction target="{loginButton}" property="color"/>
<s:Resize target="{loginPanel}"/>
<s:AddAction/>
</s:Sequence>
</s:Transition>
</s:transitions>
You can just target everything in the sequence (instead using different targets for each SetAction) and use the 'value' property of the SetAction to set the values to what you want.
I have two states. When I switch from OFF to A, it resizes correctly, but when I switch from A back to OFF it happens without the smooth resize transition. What am I doing wrong?
Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
protected function butA_changeHandler(e:Event):void
{
if ((e.target as ToggleButton).selected) {
this.currentState="A";
} else {
this.currentState="off";
}
}
]]>
</fx:Script>
<s:states>
<s:State name="off" />
<s:State name="A" />
</s:states>
<s:transitions>
<s:Transition fromState="off" toState="A" autoReverse="true">
<s:Parallel duration="300">
<s:Resize target="{content}" heightTo="{cA.height}" />
<s:Fade targets="{cA}"/>
</s:Parallel>
</s:Transition>
<s:Transition fromState="A" toState="off" autoReverse="true">
<s:Parallel duration="300">
<s:Resize target="{content}" heightTo="0" />
<s:Fade targets="{cA}"/>
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Group id="content" excludeFrom="off" width="100%" clipAndEnableScrolling="true">
<s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group>
</s:Group>
<s:HGroup>
<s:ToggleButton id="butA" label="A" change="butA_changeHandler(event)"/>
</s:HGroup>
</s:VGroup>
Thanks in advance,
Nuno
You should be using both AddAction and RemoveAction as the includeIn and excludeFrom properties are processed before transitions:
.
<s:transitions>
<s:Transition fromState="off" toState="A" autoReverse="true">
<s:Sequence>
<s:AddAction target="{content}" />
<s:Parallel duration="300">
<s:Resize target="{content}" heightTo="{cA.height}" />
<s:Fade targets="{cA}"/>
</s:Parallel>
</s:Sequence>
</s:Transition>
<s:Transition fromState="A" toState="off" autoReverse="true">
<s:Sequence>
<s:Parallel duration="300">
<s:Resize target="{content}" heightTo="0" />
<s:Fade targets="{cA}"/>
</s:Parallel>
<s:RemoveAction target="{content}" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Group id="content" width="100%" clipAndEnableScrolling="true">
<s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group>
</s:Group>
Start the resizes off from the dimensions you want using heightFrom and widthFrom so that they actually animate.
*Note: Using an includeIn="A" means you are also implying that conent will have the excludeFrom="OFF" property. This means you won't be able to mix Add/RemoveAction and includeIn/excludeFrom (one for adding views and another for removing them).
autoreverseset to true must be redundant with your second transition. It already defines A to off. Just add a heightFromin the first transition.
When I'm building an composite animation, I'd like to specify the components as fractions of the parent, like so:
<s:Sequence id="example" duration="2000">
<s:Fade alphaFrom="0" alphaTo="1" duration="10%"/> <!-- not legal -->
<s:Scale scaleXTo="2" scaleYTo="2"/>
<s:Fade alphaFrom="1" alphaTo="0" duration="10%"/>
</s:Sequence>
Failing that, I use an expression like so:
<s:Sequence id="example" duration="{slideTime}">
<s:Fade alphaFrom="0" alphaTo="1" duration="{slideTime * .1}"/>
<s:Scale scaleXTo="2" scaleYTo="2" duration="{slideTime * .9}"/>
<s:Fade alphaFrom="1" alphaTo="0" duration="{slideTime * .1}"/>
</s:Sequence>
Is there a more declarative way to accomplish this? In the latter case, for instance, can I at least replace the variable slideTime with a direct reference to the parent's duration?
Thanks.
In the latter case, for instance, can
I at least replace the variable
slideTime with a direct reference to
the parent's duration?
Does this work / solve it?:
<s:Sequence id="example" duration="500">
<s:Fade alphaFrom="0" alphaTo="1" duration="{example.duration * .1}"/>
<s:Scale scaleXTo="2" scaleYTo="2" duration="{example.duration * .9}"/>
<s:Fade alphaFrom="1" alphaTo="0" duration="{example.duration * .1}"/>
</s:Sequence>