No matter what I do, my transitions won't work as expected. I'll explain the issues and then place the code at the bottom.
There are 4 States in my application.
goButton is present only in "State1" and "State2".
State1 and State2 are nearly the same, but the y property of the goButton is diffrent in each. So I've made a little transition that moves the Button back and forth. Good so far.
However, both "State1" and "State2" can also be Transitioned to "State3". But there's no goButton in "State3", so I've used the <s:Fade> and the <s:RemoveAction> effects to get rid of it.
The Transition from "State1" to "State3" works ok, but the Transition from "State2" to "State3" doesn't.
When I attempt to call the transition from "State2" to "State3" the goButton flickers/flashes quickly back to the position where it was in "State1" and only the the Transition to "State3" actually takes place.
this is my goButton
<s:Button id="goButton" includeIn="State1,State2" x="319" y="212" width="33" height="33"
click="goButton_clickHandler()"
icon="#Embed('file:///C:/Users/Felipe/Downloads/1317358341_magnifier_medium.png')"
toolTip="go"
x.State2="319" y.State2="275"/>
and these are the relevant Transitions:
<s:Transition fromState="State1" toState="State3" >
<s:Sequence>
<s:Fade duration="700" targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,goButton,addNewLessonButton]}" />
<s:RemoveAction targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,goButton,addNewLessonButton]}" />
<s:AddAction targets="{[lessonsDataGrid,backButton]}" />
<s:Fade duration="700" targets="{[lessonsDataGrid,backButton]}" />
</s:Sequence>
</s:Transition>
<s:Transition fromState="State2" toState="State3" >
<s:Sequence>
<s:Fade duration="700" targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,tagsLabel,tagsTextInput,goButton,addNewLessonButton]}" />
<s:RemoveAction targets="{[searchLabel,searchTextInput,inLabel,inDropDownList,tagsLabel,tagsTextInput,goButton,addNewLessonButton]}" />
<s:AddAction targets="{[lessonsDataGrid,backButton]}" />
<s:Fade duration="700" targets="{[lessonsDataGrid,backButton]}" />
</s:Sequence>
</s:Transition>
My guess is that Flex always (don't ask me why) moves the component back to its original position before performing a Transition. I've tried a different version of this app in which I set the x and y properties of my goButton to what they are in "State2" and then set x.State1 = something else and y.State1 = something else and guess what happens? I get the exact inverse problem! Transition from "State2" to "State3" is ok but the Transition from "State1" to "State3" doesn't work, as the goButton flickers back to its original position (now it is the position in "State2") and only then does the Transition takes place.
Man this is driving me crazy.
__________________//______________________________
__________________ //____________________________
EDIT
I've added a link to the app >>>>HERE<<<<<< You can see the issue by selecting the option 'selected tags' and then clicking the 'goButton' . You'll see what I'm talking about. View source is available!!!
It looks like it's looking for an x,y for the goButton in State3. If you don't set one explicitly, it falls back to the default. Adding
x.State3="{this.x}" y.State3="{this.x}"
to <s:Button id="goButton" ... /> fixed it for me.
I think you're making this too complicated. Just set includeIn="state1,state3" for the button. No need for any add action. Then create one Fade transition that sets the goButton as its target. The Spark fade is smart enough to figure out how to handle that situation without further help from you.
Check out http://polygeek.com/2304_flex_simple-flex-4-component-checkedunchecked for more details.
>>>LL<<<<
OK I think I've singled out this behaviour and do believe it's a BUG or GLITCH.
I'll see if anyone has anything to add and if nobody shows up I'll file a bug report.
Steps to reproduce:
create a button that's present in two different states, in different x,y coordinates. For example, your button will have a value for x and for y and you'll have to set its position in the other state, something like x.State2 = something and y.State2=something
now create a transition from State2 (if State1 is your original State) to a third State called State3.
the transition should have a <s:Sequence> sequence of steps, preferably involving RemoveActions and Fades, like the ones I've used above.
Related
I am trying to use "mouseSensitivity" property of ColumnChart in flex.
From the example tutorial I have learnt how this property works.
But In my program it seems not working. By that what I mean is even though if I give very less value say mouseSensitivity=1 and if I place mouse pointer far away from the data point, even then its attracted to the nearest data point. Which is not desirable in my program.
<mx:ColumnChart id="energyChart" mouseSensitivity="1" dataProvider="{energyXml.scenario}" selectionMode="single" chartClick="energyChart_chartClickHandler(event)" >
<mx:series>
<mx:ColumnSeries id="energySeries" />
<mx:LineSeries id="lineSeries" />
</mx:series>
</mx:ColumnChart>
Sorry guys...
I got why its going wrong, Initially I gave line series width as '100', so flex taking mouse pointer as in its range even though its not in the "mouseSensitivity" range....
Thanks...
I am using Flex4. I want to get some animation effects in my project.
I used <s:Wipe> but this doesn't work, however with same type of code, <mx:WipeLeft> worked.
However I dont want to use <mx> code, if its more-generic spark code is available in Flex4.
My both type of codes are:
MX Code- (working code)
<mx:WipeLeft id="wLeft" duration="1500" target="{imgSinglePage}"/>
Spark code- (Not working)
<s:Wipe id="wLeft" duration="1500" direction="left" target="{imgSinglePage}"/>
Effects can work with transitions using Flex 4's state system, or can be triggered by events in components.
Specified in a declarative way:
<!--- Fade effects for showing / hiding elements -->
<fx:Declarations>
<s:Parallel id="fadeInEffect">
<s:Fade alphaFrom="0"
alphaTo="1" />
</s:Parallel>
<s:Parallel id="fadeOutEffect">
<s:Fade alphaFrom="1"
alphaTo="0" />
</s:Parallel>
</fx:Declarations>
<!-- Image -->
<s:Image showEffect="{fadeInEffect}"
hideEffect="{fadeOutEffect}" />
If this does not answer your question, please provide code that uses the effect you have referenced.
There is nothing in your declaration of the effects themselves that is causing your problem. Since you didn't include your actual invocation code, I can only guess that you are attempting to use an effects trigger (eg. rollOverEffect="wLeft") to execute the Spark effect.
The Spark effects can only be invoked by calling their play() method. So in your case, you would use
... rollOver="wLeft.end();wLeft.play();" ...
on the relevant component.
Here's the official Adobe description.
And here's a discussion on SO of the same problem.
At a certain point in an effects execution i would like to execute some code.
Say for example that i have a move effect on objectA and half way through this effect i want to make objectB disapear.
Is there any functionality built in to the spark effects framework to do this or do i need to implement the effect myself by hand?
Short of using a timer, I don't think you can with the effect library. However, I recommend you look at TweenMax; it's an amazing animation library that is fast, efficient and has a lot of really cool options (like what you just said).
Could you use a composite effect like Parallel with a startDelay on the second effect?
<s:Parallel>
<s:Move target="{target1}" xBy="100" duration="1000" />
<s:Fade target="{target2}" alphaTo="0" startDelay="500" duration="0" />
</s:Parallel>
I am building a graphic component in MXML that has different states, each state having its own size.
I have a "normal" state and a "highlighted state", the highlighted one having a higher height.
On this components I implemented a function to be executed on each mouseOver and mouseOut to change from normal state to highlighted state and back.
My problem is, in the highlighted mode, the mouseout event is triggered according to the size of the normal state.
Here is the code:
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:controller="com.*"
mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"
width="230" height.Playing="40" height.Normal="21" height.Highlighted="40">
<mx:states>
<mx:State name="Normal" />
<mx:State name="Playing" />
<mx:State name="Highlighted" />
</mx:states>
<mx:Button includeIn="Highlighted" left="19" bottom="2" width="15" height="15" />
</mx:Canvas>
Is there something wrong in the way I use mouseOuver and mouseOut ?
Thanks,
Alexandre
I am building a graphic component in
MXML that has different states, each
state having its own size.
You have a misunderstanding of how the Flex Component Architecture works. A component never sizes itself. It is always up to the parent to size it's children. You can override the measure method to set measuredWidth and measuredHeight; however these are only suggestions provided to the component's parent. It is up the component to decide whether to accept them or no.
So, in your example, you can change the height/width of the button (a child); but you cannot change the height/width of the canvas (The component you're extending) and expect it to stick.
Without seeing the code that contains this canvas component, it's hard to say for sure what is going on. But, in this case, you should override the measure method to change the measuredWidth / measuredHeight. Something like this:
override protected measure():void{
if(currentState=='Normal'){
measuredWidth = 0;
measuredHeight = 0;
} else {
measuredWidth = button.width;
measuredHeight = button.height;
}
}
When the state changes, be sure to call the invalidateSize() method. You can do this by listening to the currentStateChange event.
In theory, that will cause the component to change the measuredWidth/measuredHeight; which will force the parent to also redraw itself, accommodating for the new measuredWidth/measuredHeight.
MXML masks a lot of these details.
I'm trying to reuse effects. To achieve this, i was hoping that i could bind some of the effect's properties to the effect's target. Here's what i wanted to do:
<mx:transitions>
<mx:Transition toState="Ready">
<mx:Parallel targets="{[b1, b2, b3]}" perElementOffset="200" duration="500">
<mx:Move xFrom="{target.x-100}" xBy="100">
<!-- possibly a fade effect too -->
</mx:Parellel>
</mx:Transition>
</mx:transitions>
<mx:VBox>
<mx:Button id="b1"/>
<mx:Button id="b2"/>
<mx:Button id="b3"/>
</mx:VBox>
The above code assumes, a state change on application createComplete to Ready state.
In my futile attempt with the above code, i tried to create 1 effect that would animate the entrance of 3 buttons all laid out using VBox. I'm (trying to) avoiding 2 things:
Absolute layout hence hand coded coordinates. I want to exploit the containers.
Effect code duplication
Results:
- Compiler complains target is not defined. I've tried to put whole list of ideas into that field but to no avail. I've tried:
{this.target.x}
{effectId.target.x}
{propertyThatReturnsTheObject.x}
Can this be done? Thanks in advance.
if you give the Move Effect an id, can you bind to {moveId.target}. Its not clear that your second case is it...
I suspect the compiler is looking for target in a different scope to the one you think it is...
Certainly, target isn't a bindable attribute, so this may be academic anyway.