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.
Related
I'm trying to create a component, or a view if that is better suited for this, that binds to given model's computed properties and changes style attributes accordingly. I'm using Ember App Kit if that affects in anyway how this should be done.
The component would be a a meter that has 2 computed properties to bind to: "limitDeg", "currentValueDeg". Every model instance that will use this component can supply those as model computed properties to the component.
The meter has 3 overlapping divs - ".meter-div" being just background with no bindings, and one of which will be rotated with CSS3 transform by X-degrees to show the current "limitDeg". So adjusting the "transform: rotate(###deg);" is the key here. There is a "indicator-div", that is simple indicator that similarly rotates based on the "currentValueDeg" with CSS3 animation loop.
Below is a basic rough outline of how I've thought of having the component/view:
<div class="my-component-container">
<div class="limit-div"></div>
<div class="meter-div"></div>
<div class="indicator-div"></div>
</div>
...and I would use it like this for example:
{{#each}}
...
{{my-component}}
...
{{/each}}
1) I would like the component to bind to the model so, that when the "limitDeg" computed property changes, the ".limit-div" will be rotated by X-degrees with CSS3 transform: rotate(###degrees);.
2) I would like animate the ".indicator-div" with a CSS3 animation that loops infinitely, binding to the currentValueDeg computedProperty.
Is this something I should even try do this with one component/view, or rather do it this multiple components/views inside one partial?
If you're using handlebars, just wrap your component in tags that specify it as such:
<script type='text/x-handlebars' data-template-name='components/component_name'>
<div class="limit-div"></div>
<div class="meter-div"></div>
<div class="indicator-div"></div>
</script>
Then include it in your view like this:
{{component_name objectToPassIn=this classNames='my-component-container' tagName='div'}}
If you wanted the component to display a model property, you could do something like this inside the component (using the variables in my example above):
<span class='property-wrapper'>
{{objectToPassIn.objectProperty}}
</span>
Edit:
For the sake of clarity, objectToPassIn is the model that is passed to the view that calls the component.
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 have tried setting the background image this way, but it doesn't work. Any ideas how to set the background image of a rich text control in flex as easy as possible? Thanks
.rte{
...
backgroundImage: "assets/globe.jpg";
}
and
<mx:RichTextEditor id="rt"
...
styleName="rte"
/>
Unfortunately, you can't.
The docs for RichTextEditor show that it doesn't support a backgroundImage property, and the component is not skinnable.
Therefore, I'd suggest creating your own wrapper component, which accepts an image, like so:
<!-- Note: Using Canvas becuase your post indicates Flex 3, if using Flex 4, please use Group -->
<Canvas>
<mx:Image width="100%" height="100%" />
<RichTextEditor />
</Canvas>
The RichTextEditor component doesn't support background images last I checked. What you'd want to do is create a custom RTE skin where you add an image behind the actual text, then within the skin, have the do getStyle('backgroundImage') and set it in a bindable private var which is then binded to the image.
That's about it. It's either use this skin or you can always wrap your RTE within a BitmapImage or some other kind of component that supports background images.
EDIT: Sorry, didn't see that this was Flex3. In that case, you'll need to extend your RTE component and add the Image component manually by overriding the createChildren function and then changing the value of the image by overriding the updateDisplayList function using the same getStyle function as mentioned above.
It can be done by setting RTE TextArea's backgroundAlpha to 0
<mx:RichTextEditor id="richTextEditor"
backgroundImage="#Embed('<imagepath>')" width="100%" height="100%"
initialize="{richTextEditor.textArea.setStyle('backgroundAlpha', '0') }"
/>
Note:Please modify image path and you can also set style through CSS/Style tag
Hopefully this will helps
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.