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.
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 need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
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 use Flex's Glow effects in my custom VBox-based component for highlighting it on roll over. It looks great. But I would like it to have rectangular shape with gradient to alpha 0. How can I accomplish that? Should I add some properties to Glow effect or mix it somehow with other effects or use another effect?
Code is below:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" rollOverEffect="{select}" rollOutEffect="{deselect}">
<!-- Some stuff skipped -->
<mx:Glow id="select" duration="500">
<mx:color>#9BC227</mx:color>
<mx:blurXFrom>100</mx:blurXFrom>
<mx:blurXTo>100</mx:blurXTo>
<mx:blurYFrom>100</mx:blurYFrom>
<mx:blurYTo>100</mx:blurYTo>
<mx:alphaFrom>0</mx:alphaFrom>
<mx:alphaTo>1</mx:alphaTo>
</mx:Glow>
<mx:Glow id="deselect" duration="1000">
<mx:color>#9BC227</mx:color>
<mx:blurXFrom>100</mx:blurXFrom>
<mx:blurXTo>0</mx:blurXTo>
<mx:blurYFrom>100</mx:blurYFrom>
<mx:blurYTo>0</mx:blurYTo>
<mx:alphaFrom>1</mx:alphaFrom>
<mx:alphaTo>0</mx:alphaTo>
</mx:Glow>
I don't think there is an mx.effects class that wraps it up with a tween, but there is a GradientGlowFilter class in flash.filters. All Glow does is return a GlowInstance, which when played applies a series of Glow filters using a tween. The code is very simple, and you could modify it to use a different filter pretty easily.