I'm trying to animate an Image when I send a request and then stop rotating that image when a response is received but I'm having trouble with the animation.
Here is what I have so far:
<s:Sequence id="requestAnimation" repeatCount="0">
<s:Parallel>
<s:Fade alphaFrom="1" alphaTo="0" target="{busyLogo}" duration="250" />
<s:Fade alphaFrom="0" alphaTo="1" target="{cornerLogo}" duration="250" />
</s:Parallel>
<s:Sequence repeatCount="0">
<s:Rotate3D angleZFrom="0"
angleZTo="360"
autoCenterProjection="true"
autoCenterTransform="true"
duration="1000"
target="{busyLogo}" />
</s:Sequence>
</s:Sequence>
The image rotates and when it gets to the end of a full rotation is slows to a stop and then starts up again. I would like it to rotate in one continuous loop.
First, I'm wondering how your busyLogo can rotate at all with this code because in the main Sequence you first fade out the alpha to 0 on busyLogo and fade in the cornerLogo. It should be the other way around - you are supposed to fade in the busyLogo and then rotate it ?
But the main problem seem to be the repeatCount="0" on the main sequence that would play the whole sequence (fadeout and rotate) indefinitely. If you remove the repeatCount="0" on the main sequence, it would fade out and then stop at the second sequence that would spin the logo indifinitely with it's repeatCount="0"
Make sure you stop both sequencies once you are done to avoid memory leaks.
Set the easer used on the Rotate3D effect. The default value is Sine, which is causing the slowdown and speedup. If you want to make it constant, change it to spark.effects.easing.Linear.
I now have the following. This seems to work but the animation is not as smooth as I hoped. Might try doing a release build and seeing if that is better or add smoothing to the image.
<s:Parallel id="requestAnimation" >
<s:Fade alphaFrom="0" alphaTo="1" target="{busyLogo}" duration="250" />
<s:Sequence suspendBackgroundProcessing="true" repeatCount="0">
<s:Rotate3D angleZFrom="0"
angleZTo="360"
easer="{new Linear(0,0)}"
autoCenterProjection="true"
autoCenterTransform="true"
duration="1000"
target="{busyLogo}" />
</s:Sequence>
</s:Parallel>
<s:Sequence id="fadeOutRequest" effectEnd="requestAnimation.end()">
<mx:AnimateProperty property="alpha" fromValue="1" toValue="0" target="{busyLogo}" duration="1050" />
</s:Sequence>
<s:Image id="mainLogo" x="0" y="0" width="128" height="128" source="{logo256}"
rollOver="{requestAnimation.play()}" rollOut="{fadeOutRequest.play()}"
alpha="0"/>
<s:BitmapImage id="logo4" x="32" y="32" source="{logo64}"/>
Related
<s:Scroller width="100%" height="100%" id="chatScroller">
<s:RichEditableText
id="mainChat"
textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
selectionHighlighting="always"
selectable="false"
focusedTextSelectionColor="#32EB28"
unfocusedTextSelectionColor="#32EB28"
editable="false"
lineHeight="25"
styleName="chatWin"
fontSize="10"
paddingTop="20"
paddingBottom="20"
height="100%"
width="461">
<s:TextFlow >
</s:TextFlow>
</s:RichEditableText>
</s:Scroller>
I'am updating the text variable, so for this I've added this event:
chatScroller.addEventListener(FlexEvent.UPDATE_COMPLETE, scrollBottom);
private function scrollBottom(e:FlexEvent):void {
chatScroller.verticalScrollBar.value = chatScroller.verticalScrollBar.maximum;
}
and it works, BUT the textarea firstly goes top, and then goes at the bottom, so this makes a shaking effect that happens fast, how could I avoid this and make the scroller, to scroll at bottom without going top before it goes bottom? please help can't find any solution
Add chatScroller.validateNow(); immediately after you change the text.
I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?
Thank you!
Here is the code for my states and their transitions:
<!-- different states of this component -->
<mx:states>
<s:State name="useForFree"
enterState="renderState()"/>
<s:State name="enterLicence"
enterState="renderState()"/>
</mx:states>
<!-- transitions between different states -->
<mx:transitions>
<!-- transition from useForFree to enterLicence state -->
<s:Transition id="toEnterLicence"
fromState="useForFree"
toState="enterLicence">
<s:Parallel id="p1"
targets="{[freeBtn, _enterLicenceMask]}">
<s:Move yFrom="250"
yTo="0"
duration="500"
targets="{[freeBtn]}"/>
<s:Move yFrom="289"
yTo="39"
duration="500"
targets="{[_enterLicenceMask]}"/>
</s:Parallel>
</s:Transition>
<!-- transition from enterLicence to useForFree state -->
<s:Transition id="toUseForFree"
fromState="enterLicence"
toState="useForFree">
<s:Parallel id="p2"
targets="{[enterLicenceBtn, _useForFreeMask]}">
<s:Move yFrom="0"
yTo="240"
duration="500"
targets="{[enterLicenceBtn]}"/>
<s:Move yFrom="-250"
yTo="0"
duration="500"
targets="{[_useForFreeMask]}"/>
</s:Parallel>
</s:Transition>
</mx:transitions>
and here is the code for my layout:
<mx:Canvas id="freeStateCanvas"
width="100%">
<mx:VBox width="100%"
horizontalAlign="center"
top="0"
mask="{_useForFreeMask}">
<mx:VBox id="freeBox"
includeIn="useForFree">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:Image source="image path"/>
<s:Spacer height="20"/>
<mx:Button id="connectBtn"/>
<s:Spacer height="10"/>
<mx:HBox >
<s:Label text="some text"/>/>
</mx:HBox>
</mx:VBox>
<s:Label text="some text"
includeIn="useForFree"/>
</mx:VBox>
<mx:Button id="enterLicenceBtn"
includeIn="useForFree"/>
</mx:Canvas>
<!-- enter licence state -->
<mx:Canvas id="enterLicenceStateCanvas"
width="100%">
<mx:VBox id="enterLicenceBox"
mask="{_enterLicenceMask}"
includeIn="enterLicence">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:TextInput id="licenceInput"
width="200"
height="30"/>
<s:Spacer height="20"/>
<mx:Button id="registerBtn"/>
<s:Spacer height="10"/>
<mx:HBox>
<s:Label text="some text"/>
<s:Label text="some more text"/>
</mx:HBox>
</mx:VBox>
<mx:Button id="freeBtn"
includeIn="enterLicence"/>
</mx:Canvas>
where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.
Okay, so I found what the problem was, but thanks for trying to help shaunhusain.
In my code you can see I have 2 VBox containers called "freeBox" and "enterLicenceBox" and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).
This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn't find a workaround, I just used images as the box backgrounds for a quick fix.
i am a beginner in action script / flex framework and i am facing a problem :
i would like to have like a menu bar always anchor the bottom of the screen in normal and full screen mode ...
i try to set my component with bottom = "1" (so it should alway be at 1 pixel from the bottom of the stage ... But .. NO :)
here my flex xlm :
<mx:Canvas>
<mx:UIComponent id="isoHostContainer" x="0" y="0" />
<mx:HBox id="_menu_hbox" bottom="1" backgroundColor="0Xff0000" borderStyle="solid" borderVisible="true" >
<mx:Button label="Zoom +" click="button1_zoom_increase_clickHandler(event)" labelPlacement="bottom" />
<mx:Button label="Solid Red" click="{box1.fill = new SolidColorFill(0xFF2222, 1);}" labelPlacement="bottom"/>
<mx:Button label="Transparent" click="{box1.fill = new SolidColorFill(0xFF2222, 0.2);}" labelPlacement="bottom" />
<mx:Button label="Fullscreen toogle" click="button_fullscreen_clickHandler(event)"/>
<mx:Button label="Zoom -" click="button2_zoom_decrease_clickHandler(event)" labelPlacement="bottom"/>
</mx:HBox>
</mx:Canvas>
if you have the answer it will be great!
Thank you!
I think the problem is your menu is anchored 1-pixel from the bottom of your Canvas, which is retaining the same height..width after you go to full screen.
Try setting your Canvas height=100%.
<mx:Canvas height="100%">
<!-- more code below -->
This will force the layout engine to resize the canvas when when the application is redrawn full-screen, and in turn, your menu should remain 1-pixel from the bottom.
Caveat: If your Canvas is nested in another fixed-width container, its parent will also need to dynamically resize for this to work.
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.
I cant quite understand why two vertical label components dont appear right under each other. There seems to be a lot of space between them, is there anyway to get this space removed as setting padding makes no difference at all.
For example, take this layout code:
<mx:VBox>
<mx:Label text="Title" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" />
<mx:Label text="Second bit of text I want to appear right under the first" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" />
</mx:VBox>
You need to set the VBox's verticalGap to 0 or a suitable value.
Margin = 0?