I'm trying to create a simple "AJAX loader" type animation, just a circle that rotates around it's center. My problem is that the rotation isn't smooth, it wobbles slightly back and forth.
Demo SWF: http://swfup.com/view/1mn0
Code for the swf:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="160" height="160"
backgroundColor="0xCCCCCC"
initialize="loadingAnim.play()">
<fx:Declarations>
<s:Rotate angleFrom="0" angleTo="360" autoCenterTransform="true" id="loadingAnim" target="{loader}"
repeatCount="0" duration="2000" easer="{null}" />
</fx:Declarations>
<s:Image id="loader" source="#Embed('loader.png')" smooth="true" smoothingQuality="high"
horizontalCenter="0" verticalCenter="0" />
</s:Application>
I've made sure that the image is an exact circle, if you want to check for yourself then here is the image file:
The center of the image (73, 73) doesn't match up to the visual center of the graphic.
Here's your graphic with the center marked:
So, it's spinning off-center (visually) which causes it wobble.
Related
I have a form that uses constraint layouts (left/right/top/bottom) to position the main form inside a background. When I use the form in a popup TitleWindow, it lays out and sizes the components (and sets the TitleWindow size) as I would expect.
When trying to use the same set of components inside a Scroller, the layout is incorrect - the background gets resized to fit the Scroller, while the interior form is the correct size (but the right/bottom constraints aren't applied).
This simplified program demonstrates the issue. Without the Scroller, the form lays out correctly, and if the WindowedApplication is resized to show the entire form it looks correct.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="400">
<fx:Declarations>
<s:SolidColor id="bgFill" color="#8080c0"/>
<s:SolidColor id="whiteFill" color="#ffffff"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function checkSizes():void
{
trace('Base is ' + base.width + 'x' + base.height);
trace('Background is ' + bg.width + 'x' + bg.height);
trace('Border is ' + border.width + 'x' + border.height);
trace('Form is ' + form.width + 'x' + form.height);
}
]]>
</fx:Script>
<s:Group id="base">
<s:Rect id="bg"
left="0" right="0" top="0" bottom="0"
fill="{bgFill}"/>
<s:Rect id="border"
left="10" right="10" top="10" bottom="10"
fill="{whiteFill}"/>
<s:VGroup id="form" left="20" right="20" top="20" bottom="20">
<s:Button width="600" height="600"
label="Push Me!"
click="checkSizes()"/>
</s:VGroup>
</s:Group>
</s:WindowedApplication>
Clicking the button shows the component sizes as I'd expect:
Base is 640x640
Background is 640x640
Border is 620x620
Form is 600x600
If I add a scroller to fit the parent window, base, bg and border all fit inside the scroller, rather than being sized to fit as borders around form:
<s:Scroller width="100%" height="100%">
<s:Group id="base">
...
Base is 385x361
Background is 385x361
Border is 365x341
Form is 600x600
Oddly enough, if I put an extra group around base, then everyone lays out correctly...
<s:Scroller width="100%" height="100%">
<s:Group id="dummy">
<s:Group id="base">
...
Before I start digging through the Scroller and ScrollerSkin source, anyone know if I'm off my rocker and doing something worng in the first scroller example? I'd rather not create extra layers of components that I don't need.
The scroller restricts its first (and only) child to stay within his bounds, it will move the viewport of that child when you scroll.
Because your main application restricts the size of the scroller to 400x400, the base will never exceed 400x400 aswell.
If you add the dummy, base is free to expand as much as it wants but dummy will be restricted to expand.
I hope this explains it a bit. If not ask me more =)
iam learning Flex and practising skins. So, i just had one doubt:
I have written one custom skin named : ApplicationContainerSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group horizontalCenter="0" verticalCenter="0">
<s:Rect left="0" right="0" top="0" bottom="0"
radiusX="10" radiusY="10">
<s:fill>
<s:SolidColor color="#CCCCCC" />
</s:fill>
</s:Rect>
<s:Group id="contentGroup"
left="30" right="30" top="30" bottom="30">
</s:Group>
</s:Group>
</s:SparkSkin>
My Doubt:
When I removed s:Group id="contentGroup" , iam unable to see any content inside my application, so why is this 'contentGroup' id necessary?
where this id predefinedly specified.? sorry if its a noob query, but iam eager to knew it.I even tried to check the source code, but I didnt found it, Could anyone tell me where it specified and how does my content render only after using this contentGroup id...? ( I mean, how it internally works? )
Awaiting your responses!
Skinnable Spark components specify "skin parts," identified by the id.
The Application component, which you are skinning, defines 2 skin parts - contentGroup and controlBarGroup, as you can see in the documentation here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html#SkinPartSummary
The Application class uses the contentGroup skin part (if it has been added in the skin) to lay out the content. Skin parts can either be required or not. The contentGroup part is not required, and therefore when you left it out, the content just did not display.
I have a spark label with a fixed width, like so:
<s:Label text="the quick brown fox jumped over thelazydogsPackmyboxwithfive dozen liquor jugs." width="400"/>
The big cluster of words (thelazydogsPackmyboxwithfive) extends beyond the width, and so the line breaks after the word "over". This is the desired behavior.
BUT, when I use an embedded font, this no longer happens. The line breaks in between the "o" and "x" of "thelazydogsPackmyboxwithfive". How can I keep breaks from occurring in the middle of words and still use my embedded font?
The following works fine with me and does the word break correct, as in it moves the thelazydogsPackmyboxwithfive down one line when it can't fit it.
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src:url("Knights Quest.ttf");
fontFamily: MyF;
embedAsCFF: true;
}
.myFont
{
fontFamily: MyF;
fontSize:20px;
}
</fx:Style>
<s:BorderContainer id="box" width="400" height="200">
</s:BorderContainer>
<s:Label text="the quick brown fox jumped over thelazydogsPackmyboxwithfive dozen liquor jugs." width="400" styleName="myFont" />
</s:Application>
Here is how it looks :
Does anyone know a way to apply style on selected text in a Spark DataGrid?
I think that the best way is to have an itemrenderer with textarea but after, I don't know how to do.
My goal isn't to change color label if cell is selected.
Indeed, in my dream, item is editable, and you can selected only some words inside cell and apply a specific style to the selected part of text (by click on a button, one for bold, one for italic...). Than, text may be store in database like html text.
I'd like use cell itemrenderer like a RichTextEditor but without ControlBar. In my case, I'd like to have only one control bar outside the datadgrid.
I'll happy, if you can help me.
Thanks
Best approach with Spark is generally a skin.
There's rudimentary control via properties, such as changing the selected color:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:DataGrid selectionColor="0xff0000">
<s:dataProvider>
<s:ArrayList>
<fx:String>a</fx:String>
<fx:String>b</fx:String>
<fx:String>c</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DataGrid>
</s:Application>
To implement an item renderer for a GridColumn, use States to define how the selected state will appear
GridColumnItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<s:states>
<s:State name="normal" />
<s:State name="selected" />
</s:states>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
{
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:Label id="lblData"
color.selected="0x00ff00"
top="9"
left="7" />
</s:GridItemRenderer>
DataGrid
Item renderer above is specified from a Spark GridColumn, as in:
<s:DataGrid>
<s:columns>
<s:ArrayList>
<s:GridColumn itemRenderer="GridColumnItemRenderer" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
I have googled around but the only resource for teaching me how to create an Adobe Air Desktop Application uses mx controls instead.
inside app-xml i have set transparent to true and systemChrome to none.
the following is my main mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:dragdrop="org.robotlegs.demos.draganddrop.*"
xmlns:view="org.robotlegs.demos.draganddrop.view.*"
mouseOver="layoutCanvas.visible = true;"
mouseOut="layoutCanvas.visible = false;"
>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Application {
background-alpha:"0.7";
padding: 0px;
}
</fx:Style>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<dragdrop:DragAndDropContext contextView="{this}"/>
</fx:Declarations>
<s:Image id="background" width="100%" height="100%"
source="#Embed('theme/assets/MaxBackground.png')"/>
<s:BorderContainer id="layoutCanvas" width="100%" height="100%" visible="false">
<s:Image id="applicationClose" right="5" top="2"
click="stage.nativeWindow.close()"
source="#Embed('theme/assets/buttons/CLOSE WINDOW icon.png')"/>
<s:Image id="applicationMaximize" right="25" top="2"
click="stage.nativeWindow.maximize()"
source="#Embed('theme/assets/buttons/EXPAND WINDOW icon.png')"/>
<s:Image id="applicationMinimize" right="45" top="2"
click="stage.nativeWindow.minimize()"
source="#Embed('theme/assets/buttons/COLLAPSED WINDOW icon.png')"/>
</s:BorderContainer>
</s:WindowedApplication>
I have two issues.
1) the initial application window size. How can i set this to 100% full screen?
2) there is a strange grey horizontal footer at the bottom. How do i get rid of it? See here
I do not wish to use mx controls. I want to use sparks controls as much as possible.
Thank you.
1) the initial application window size. How can i set this to 100% full screen?
To do this you can add a CREATION_COMPLETE handler to your application and within that handler add a line similar to:
this.maximize() where this is you WindowedApplication.
2) there is a strange grey horizontal footer at the bottom
From the sounds of it, this is the status bar. Try setting the showStatusBar property on you WindowedApplication root tag to false :
showStatusBar="false"
Hope this helps.