I have the following code to draw two lines that connect to each other at one point:
<s:Line right="0" top="0" bottom="0">
<s:stroke>
<s:RadialGradientStroke weight="3">
<s:GradientEntry ratio="0" color="0xAB9A9C" alpha="0.5" />
<s:GradientEntry ratio="0.8" color="0x8A797B" />
<s:GradientEntry ratio="0.9" color="0x524244" />
</s:RadialGradientStroke>
</s:stroke>
</s:Line>
<s:Line right="0" left="0" bottom="0">
<s:stroke>
<s:RadialGradientStroke weight="3">
<s:GradientEntry ratio="0" color="0xAB9A9C" alpha="0.5" />
<s:GradientEntry ratio="0.8" color="0x8A797B" />
<s:GradientEntry ratio="0.9" color="0x524244" />
</s:RadialGradientStroke>
</s:stroke>
</s:Line>
how can i create a small curve in the connection between the two lines?
thanks!
You can use FXG to create an arc between the two lines. It may be easier to draw both lines and the arc as a single Path. See the documentation for more:
http://help.adobe.com/en_US/flex/using/WS5B6A8436-0FF5-4029-8524-C7C1106C483D.html
Related
My idea is to make multiple license terms link's with different name One of them should be "license terms" next "diagnostics". But then I try to change name I faced this issue:
Here is my code for this RtfTheme.XML:
<Page Name="Install">
<Hypertext Name="EulaHyperlink" X="94" Y="-100" Width="-11" Height="17" TabStop="yes" FontId="3" HideWhenDisabled="yes">#(loc.InstallLicenseLinkText)</Hypertext>
<Checkbox Name="EulaAcceptCheckbox" Height="30" Width="300" X="120" Y="-67" FontId="3">#(loc.InstallLicenseLinkCheckBox)</Checkbox>
<Button Name="InstallButton" X="160" Y="-30" Width="75" Height="23" TabStop="yes" FontId="0">#(loc.InstallInstallButton)</Button>
<Button Name="InstallCancelButton" X="240" Y="-30" Width="75" Height="23" TabStop="yes" FontId="0">
<Text>Cancel</Text>
<CloseWindowAction />
</Button>
</Page>
Bundle.wxs:
<BootstrapperApplicationRef Id="WixStandardBootstrapperApplication.HyperlinkLicense" >
<bal:WixStandardBootstrapperApplication
LogoFile="Resources/banner.png" LogoSideFile="Resources/r2.png"
ThemeFile="Resources/RtfTheme.xml"
LocalizationFile="Resources/RtfTheme.wxl"
LicenseUrl="http://opensource.org/licenses/ms-rl" />
<Payload SourceFile="Resources/r2.png"/>
</BootstrapperApplicationRef>
RtfTheme.WXL
<String Id="InstallLicenseLinkText">By installing you accept these <a href="#">license terms</a></String>
<String Id="InstallLicenseLinkCheckBox">Also include <a href="#">diagnostics</a></String>
Maybe whom have same issue and know how can I fix this? Please suggest.
Make your check box the size of the box itself with no text. Add a second <Hypertext> that is positioned right beside the check box.
I have created a sample desktop app using Flex 4 in flash builder 4 wherein I am using a button inside BorderContainer.
I have applied skin to button which includes Dropdownshadow,glow filter,bevel-filter and gradient colors.
But I am facing a problem with use of filters and gradient fill simultaneously.
When using filters gradient fill doesnt show up and vice-versa.
Please let me know where I am making mistake.
This is the main.mxml code:
<s:BorderContainer backgroundColor="#003C7B" verticalCenter="0" horizontalCenter="0" height="350" width="450">
<s:Button id="btn" label="Select" color="white" verticalCenter="0" skinClass="BlueButtonSkin" horizontalCenter="0"/>
</s:BorderContainer>
The skin class code for filters and gradient fill is as follows:
<s:Rect id="backgroundAndShadow" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"
topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#00366E"/>
<s:GradientEntry color="#013A8B" />
</s:LinearGradient>
</s:fill>
<s:filters>
<s:GlowFilter alpha="0.9" color="#ffffff" inner="false" knockout="true" blurX="8" blurY="8" />
<s:BevelFilter angle="270" distance="5" />
</s:filters>
</s:Rect>
<s:RectangularDropShadow id="dropShadow" blurX="8" blurY="8" alpha="0.5" distance="5" tlRadius="5" trRadius="5" blRadius="5" brRadius="5"
angle="45" color="#000000" left="2" top="0" right="0" bottom="0"/>
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="75" height="15"
topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
<s:stroke>
<s:SolidColorStroke joints="bevel" caps="round" color="#84C2F2" weight="0.3" alpha="0.3"/>
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="2"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="2" bottom="2">
</s:Label>
Any suggestions on this?
I am attaching the required look for button for reference:
In your <s:GlowFilter /> you have set the knockout property to true. So when applying that filter, it literally knocks out the contents of the item that the filter is applied to. Remove that property altogether or you can set it to false, which is the default.
Here's what the GlowFilter documentation says for the knockout property:
Specifies whether the object has a knockout effect. A knockout effect
makes the object's fill transparent and reveals the background color
of the document. The value true specifies a knockout effect; the
default value is false (no knockout effect).
Well,finally I have done it...
Played with the code and found this code works fine with what is required:
<s:Rect id="backgroundAndShadow2" left="0" right="0" top="0" bottom="0"
topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:SolidColor color="#4B7CB6" alpha="0.5"/>
</s:fill>
<s:filters>
<s:DropShadowFilter blurX="5" blurY="5" quality="3" strength="0.65" distance="4" />
<s:GlowFilter blurX="7" blurY="7" quality="3" color="#004DAF"/>
<s:BevelFilter blurX="1" blurY="1" quality="3" strength="2" highlightColor="#9FC7F5" angle="60" distance="1"/>
<s:BlurFilter blurX="1.5" blurY="1.5"/>
</s:filters>
</s:Rect>
<s:Rect id="backgroundAndShadow" left="1.5" right="1.5" top="1.5" bottom="1.5"
topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
<s:fill>
<s:LinearGradient scaleX="51" rotation="90">
<s:GradientEntry ratio="0" color="#013465"/>
<s:GradientEntry ratio="0.32156863" color="#013A7F"/>
<s:GradientEntry ratio="1" color="#003990"/>
</s:LinearGradient>
</s:fill>
<s:filters>
<s:DropShadowFilter inner="true" angle="-130" blurX="2" blurY="0.8" strength="0.5" color="#00275C" alpha="0.8"/>
</s:filters>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="2"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="2" bottom="2">
</s:Label>
Modified the skinclass and got the results!
I am in a process of optimizing item renderers that display a character in a Rect, I notice that the action of dynamically setting the text is slow, now I am thinking of creating premade objects with text hard-coded in them and inside the item-renderer have a switch to select the proper text object instead of using .text = , does anyone have any other idea on how to optimize the renderer , it is a tile layout that displays about 100 renderers on screen.
also - what is the cheapest(performance-wize) text object I can use in a renderer?
Thanks
<!-- DNA Plus -->
<s:Group height="26" width="100%" y="20">
<s:Rect id="backgroundTop" left="0" right="0" top="0" bottom="0"
alpha="{(data as MiniBrick).brick.strand == StrandEnum.PLUS.value ? 1 : 0.7}">
<s:fill>
<s:SolidColor id="bgFillTop" color="{BrickColors.getColor((data as MiniBrick).brick)}"/>
</s:fill>
</s:Rect>
<s:Rect id="selectedBackgroundTop" left="0" right="0" top="2" bottom="1" includeIn="selected">
<s:fill>
<s:SolidColor id="sBgFillTop" color.selected="0xB6E0F2"/>
</s:fill>
</s:Rect>
<!--- #copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:Label id="textDisplayTop" width="100%" top="4" fontFamily="Consolas" text="{(data as MiniBrick).origin}"
fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/>
</s:Group>
<!-- DNA Minus -->
<s:Group height="26" width="100%" y="46">
<s:Rect id="backgroundBottom" left="0" right="0" top="0" bottom="0"
alpha="{(data as MiniBrick).brick.strand == StrandEnum.MINUS.value ? 1 : 0.7}">
<s:fill>
<s:SolidColor id="bgFillBottom" color="{BrickColors.getColor((data as MiniBrick).brick)}"/>
</s:fill>
</s:Rect>
<s:Rect id="selectedBackgroundBottom" left="0" right="0" top="1" bottom="2" includeIn="selected">
<s:fill>
<s:SolidColor id="sBgFillBottom" color.selected="0xB6E0F2"/>
</s:fill>
</s:Rect>
<!--- #copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:Label id="textDisplayBottom" width="100%" top="4" fontFamily="Consolas" text="{DnaDictionary.getComplementSequenceOneLetter((data as MiniBrick).origin)}"
fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/>
</s:Group>
<!-- DNA index [tick list] -->
<s:Group width="15" id="dnaTick" y="72">
<s:Rect horizontalCenter="0" width="2" height="2" radiusX="1">
<s:fill>
<s:SolidColor color="#666666"/>
</s:fill>
</s:Rect>
<s:Label id="dnaTickLabel" horizontalCenter="0" y="5" height="9" color="#888888" fontFamily="Arial" fontSize="9"
textAlign="left" />
</s:Group>
<s:Line id="firstMiniBrickInBrickLine" x="0" y="20" yFrom="72">
<s:stroke>
<s:SolidColorStroke caps="none" color="#FFFFFF" weight="1"/>
</s:stroke>
</s:Line>
To answer your question directly: the most optimized way to display text is to use the UITextField class. But you're going to have a hard time implementing that into your ItemRenderer since it doesn't inherit from UIComponent.
Also that is not where the most performance gain is to be made in your code. The biggest problem is that this renderer has 6 data bindings in it. If you have 100 items on screen, that makes for 600 listeners watching for data changes.
So you should remove all those bindings and set those properties by overriding the ItemRenderer's data setter, like so:
override public function set data(value:Object):void {
super.data = value;
var brick:MiniBrick = value as MiniBrick;
backgroundTop.alpha = brick.brick.strand == StrandEnum.PLUS.value ? 1 : 0.7;
bgFillTop.color = BrickColors.getColor(brick.brick);
...
}
If you want to optimize even further, I would suggest you put the information for the renderers directly on the data so that it doesn't have to be evaluated every time and you can write the following:
override public function set data(value:Object):void {
super.data = value;
var brick:MiniBrick = value as MiniBrick;
backgroundTop.alpha = brick.alpha;
bgFillTop.color = brick.color;
...
}
I've got the beginning of an air app, and I'm trying to transition between the states using Fade (a Sequence that should, in theory, fade out, then fade the next state in.) Is there a way to target it to fade out ALL the elements, or will I need to use targets="..." and list every element?
I've tried nesting all the elements in a Group, but that isn't seeming to work.
Shortened version of my current code:
<s:states>
<s:State name="HomeScreen"/>
<s:State name="EnemyBuilder"/>
<s:State name="EncyclopediaBuilder"/>
</s:states>
<fx:Declarations>
<s:Transition toState="*" fromState="*" >
<s:Sequence >
<s:Fade alphaFrom="1" alphaTo="0" duration="250" target="{wrapper}" />
<s:Fade alphaFrom="0" alphaTo="1" duration="250" target="{wrapper}" />
</s:Sequence>
</s:Transition>
</fx:Declarations>
<s:Group id="wrapper" includeIn="HomeScreen, EnemyBuilder, EncyclopediaBuilder" >
<s:BorderContainer id="encounter" includeIn="HomeScreen"
x="49" y="99" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)" click="currentState='EncyclopediaBuilder'" >
<s:Label x="48" y="8" color="#000000" fontFamily="Arial" text="Create a new encounter" />
<s:Label x="48" y="24" color="#000000" fontStyle="italic" text="Single encounter" />
<s:Image x="10" y="10" source="assets/001_01.png" />
<s:BorderContainer id="back" includeIn="EncyclopediaBuilder"
right="20" bottom="20" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)"
click="currentState='HomeScreen'" >
<s:Label x="48" y="16" color="#000000" fontFamily="Arial" text="Save and Return"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
</s:BorderContainer></s:Group>
Try to use something like the following:
<s:states>
<s:State name="HomeScreen"/>
<s:State name="EnemyBuilder"/>
<s:State name="EncyclopediaBuilder"/>
</s:states>
<s:transitions>
<s:Transition toState="*" fromState="*" >
<s:Sequence target="{wrapper}">
<s:Fade alphaFrom="1" alphaTo="0" duration="250" />
<s:Fade alphaFrom="0" alphaTo="1" duration="250" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Group id="wrapper">
<s:BorderContainer id="encounter" includeIn="HomeScreen"
x="49" y="99" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)" click="currentState='EncyclopediaBuilder'" >
<s:Label x="48" y="8" color="#000000" fontFamily="Arial" text="Create a new encounter" />
<s:Label x="48" y="24" color="#000000" fontStyle="italic" text="Single encounter" />
<s:Image x="10" y="10" source="assets/001_01.png" />
<s:BorderContainer id="back" includeIn="EncyclopediaBuilder"
right="20" bottom="20" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)"
click="currentState='HomeScreen'" >
<s:Label x="48" y="16" color="#000000" fontFamily="Arial" text="Save and Return"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
</s:BorderContainer></s:Group>
<?xml version="1.0" encoding="utf-8"?>
<s:Rect id="background" top="0" right="0" bottom="0" left="0" height="30">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
<s:fill.over>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#FF5800" alpha="1.0" ratio="0"/>
<s:GradientEntry color="#EE0202" alpha="1.0" ratio="1"/>
</s:LinearGradient>
</s:fill.over>
<s:fill.down>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#EE0202" alpha="1.0" ratio="0"/>
<s:GradientEntry color="#AF0000" alpha="1.0" ratio="1"/>
</s:LinearGradient>
</s:fill.down>
</s:Rect>
<s:RichText id="labelDisplay" paddingLeft="10" paddingRight="10" textAlign="center" fontFamily="Myriad Pro" fontSize="16" tabStops="S0 S50 S100 S150" color="#FFFFFF" y="8" color.over="#000000" tabStops.over="S0 S50 S100 S150" color.down="#000000" tabStops.down="S0 S50 S100 S150" color.disabled="#EE0202" tabStops.disabled="S0 S50 S100 S150" color.up="#EE0202" tabStops.up="S0 S50 S100 S150">
<s:filters>
<s:DropShadowFilter includeIn="over" blurX="0" blurY="0" distance="1" hideObject="false" inner="false" color="#FFFFFF" strength="1" alpha="1" quality="2" knockout="false" angle="45.0"/>
<s:DropShadowFilter includeIn="down" blurX="0" blurY="0" distance="1" hideObject="false" inner="false" color="#CCCCCC" strength="1" alpha="1" quality="2" knockout="false" angle="45.0"/>
<s:BlurFilter includeIn="disabled" blurX="4.0" blurY="4.0" quality="2"/>
</s:filters>
</s:RichText>
here is the code, I would like to make a smooth transition when enters the "over" state. any help?
<s:AnimateColor colorTo="0xff0000" target="{targetGradientEntry}"/>