Here's the deal:
I have an image and a button on my mobile app's homeview.
I apply an animation to the image by pressing the button. That works great.
PROBLEM:
I want to add a view transition that pushes to the next view after the animation completes.
CODE:
AS:
protected function nextView()
{
navigator.pushView(View2);
}
MXML:
<s:Button id="Button" click="anim.play()"/> //anim.play() is in
//the declarations tag and is working as expected.
<s:Image id="img" source="#Embed('assets/image.png')"/>
I've Tried:
-Adding nextView() to the click method after the animation call
-Using effectEnd="nextView()" in Button properties
Thank you for any help and insight you can provide.
effectEnd appears to work for me:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Move id="myEffect" xBy="100" target="{btn}" effectEnd="navigator.pushView(NextView)" />
</fx:Declarations>
<s:ViewNavigator id="navigator" width="100%" height="100%"/>
<s:Button id="btn" label="play" click="myEffect.play()" />
</s:Application>
Related
I have a MXML compoenent that is launched as a popup:
<s:TitleWindow>
[...]
<s:BorderContainer>
<s:HGroup>
two s:Button OK and Cancel
</s:HGroup>
</s:BorderContainer>
<custom:box>
</s:TitleWindow>
custom:box looks like this
<s:BorderContainer>
<s:Image source="{Util.getImage('error.icon')}" />
<s:Image source="{Util.getImage('close.icon')}" />
<s:VGroup id="messageContainer" />
</s:BorderContainer>
What I need is to add the close icon to the tab navigation and focus.
I've tried with implements="mx.managers.IFocusManagerComponent" to the custom:box as an attempt to change the focus on focusHandler(). I only get focus on the custom:box at most.
Also I've tried to set buttonMode="true" and focusEnabled="true" on the close image.
Any ideas would be much appreciated.
Thanks!
I have created my first animation effect in flex 4. Its a very simple animation within my custom component which moves a label component left to right to left 3-5 times and then fades out gradually.
Every thing works fine but the problem is that when I run the animation first time, it plays jerky animation and perfect smoother after wards. I dont know why.
Can some one tell whats wrong with this?
This is the full source code of my custom component. After adding it to the stage, calling the showProgressEffect() will play the animation.
Notice that I have made the label "cacheAsBitmap" to avoid flickers while moving the label and call to stop() before play() methods of each of the animations/effects.
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="274" height="72"
click="onClick()" xmlns:components="ui.hud.components.*" cacheAsBitmap="true">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Sequence id="tween" repeatCount="5" effectEnd="onEffectEnd()" >
<s:Move xBy="20" duration="500" />
<s:Move xBy="-20" duration="500" xFrom="50"/>
</s:Sequence>
<s:Fade id="fadeEffect" alphaTo="0" duration="2000" />
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var questId:int;
[Bindable]
public var questTitle:String;
[Bindable]
public var iconUrl:String;
private function onClick():void{
Globals.questCtr.showQuest(questId);
}
private function onEffectEnd():void{
fadeEffect.stop();
fadeEffect.play([lblStatus]);
}
public function showProgressEffect():void{
tween.stop();
lblStatus.alpha = 1;
tween.play([lblStatus]);
}
]]>
</fx:Script>
<mx:Image source="{iconUrl}" width="75" height="75"/>
<s:Group x="77" y="24" width="197">
<s:Label id="lblStatus" text="Task Complete" fontWeight="bold" fontSize="25" alpha="0" cacheAsBitmap="true" hideEffect="" mouseEnabled="false"/>
</s:Group>
</s:Group>
This happens because before animation start your label is in different position, than after it. I don't know what exactly you trying to achieve, but there are two choices:
You can change xFrom="50" to xFrom="20"in second move effect;
You can change lblStatus x coordinate to 30;
I'm trying to set the hand cursor on an HBox. I've tried buttonMode and useHandCursor but have had no luck. This example displays the busy cursor. Can anyone tell me how to make it display the flashPlayer's hand cursor?
<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" xmlns:components="com.dn2k.components.*" >
<fx:Script>
<![CDATA[
private var cursorID:int;
//cursorManager
protected function box_mouseOverHandler(event:MouseEvent):void
{
cursorManager.setBusyCursor()
}
]]>
</fx:Script>
<mx:HBox id="box" useHandCursor="true" buttonMode="true" mouseChildren="false" backgroundColor="0xcc0000" mouseOver="box_mouseOverHandler(event)">
<s:Label text="Hiya sexy..."/>
</mx:HBox>
This code shows it perfectly while mouse is over container:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:HBox backgroundColor="0xcc0000" buttonMode="true" id="box" mouseChildren="false" useHandCursor="true">
<s:Label text="Hiya sexy..." />
</mx:HBox>
</s:Application>
If you want to set hand cursor in Label you must set mouseChildren=”false” and below is the revised code
<mx:HBox backgroundColor="0xcc0000" buttonMode="true" id="box" useHandCursor="true">
<s:Label text="Hiya sexy..." buttonMode="true" mouseChildren="false" useHandCursor="true" />
</mx:HBox>
Hope this works for you.
What Jeff said. Also you can use CursorManager.setCursor(). You'll have to embed a graphic for the cursor though.
You can also use the newer Mouse class which provides a higher frame rate native cursor.
<mx:HBox rollOver="Mouse.cursor = MouseCursor.BUTTON"
backgroundColor="0" backgroundAlpha="0"
rollOut="Mouse.cursor = MouseCursor.AUTO"/>
The background color and background alpha are used to draw out graphics that are used as the hit area. In empty Spark containers there is a mouseEnabledWhereTransparent property that I don't think existed in mx containers. Here is documentation on it:
When true, this property ensures that the entire bounds of the Group
respond to mouse events such as click and roll over. This property
only goes in to effect if mouse, touch, or flash player gesture events
are added to this instance. In addition, it assumes that the calls to
addEventListener()/removeEventListener() are not superfluous.
Having said that it seems that this works without setting the mouseEnabledWhereTransparent property:
<s:Group id="testingHitGroup" left="10" top="10"
rollOver="cursorObject_rollOver(event)" width="100" height="100"/>
I am having an issue with my ItemRenderer, which I am using for a spark List. My code is the following:
I have this list:
<s:List
id="productSetList"
dataProvider="{ model.productSets }"
change="model.selectSet( productSetList )"
height="100%" width="100%"
borderVisible="false"
itemRenderer="SideBarItemRenderer" top="20" left="15">
</s:List>
and my itemRenderer is:
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="160" height="175" autoDrawBackground="false" buttonMode="true" useHandCursor="true"
click="click(event)" cacheAsBitmap="true"
>
<fx:Script>
<![CDATA[
import com.png.vm.model.vos.ProductSet;
protected function click(event:MouseEvent):void
{
trace('arthur');
}
]]>
</fx:Script>
<s:BitmapImage source="{ProductSet(data).image}" width="160" height="175"/>
</s:ItemRenderer>
The thing is, if I scroll the list, and click on an item, it does not trace 'arthur' ! Why is this so ? I must trace that all the time that someone clicks in the list!
EDIT:
If I remove change="model.selectSet( productSetList )" in the list, it works!! but I cannot remove that, some suggestions ? How can I switch that to another function?
Trace only works when you are debugging/using the debugging version of Flash Player. Make sure you are using that. If you want a pop-up message use Alert.show("message")
For more information about trace() check out:
http://livedocs.adobe.com/flex/3/html/help.html?content=logging_08.html
And Alert.show(): http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001965.html
If you are running debug player. Try originating the click event from an embedded <s:Group> this way whatever you add in here beyond the bitmap will still trigger the click event.
Something like:
<s:Group width="100%" height="100%" click="click(event)" >
<s:BitmapImage source="{ProductSet(data).image}" width="160" height="175"/>
</s:Group>
I've definitely had click events work for me inside of ItemRenderers before
My apologies, I have finally solved it. The problem was that inside the function,model.selectSet, I was calling List.change; I was messing the list up! My function was as follows:
public function selectSet(list:List):void {
list.layout.verticalScrollPosition=100;
// another stuffs
}
So, I just removed the line : list.layout.verticalScrollPosition=100; and now it`s working fine.
Thanks for all the help!
I have a panel with a button in it. Clicking on the button will direct the panel to state "State2" adding another two buttons into the panel. During the state change, I want the panel to resize first and then show the newly added two buttons, so I applied transitions onto the state change.
My question is:
If I put the two buttons within a HBox directly under the addChild tag, it works fine. However, if I create a new component with the same code (HBox with two buttons in it) and then add the new component to the panel (Comp in the code commented), it won't show the resize effect.
Could someone tell me how to fix this? Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
currentState="State2";
}
]]>
</mx:Script>
<mx:transitions>
<mx:Transition>
<mx:Sequence targets="{[comp,panel1]}">
<mx:Resize target="{panel1}" />
<mx:AddChildAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="State2">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
</mx:HBox>
<!--<local:Comp id="comp" />-->
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel layout="horizontal" borderThickness="1" borderStyle="solid" id="panel1" title="AB">
<mx:Button label="A" click="button1_clickHandler(event)"/>
</mx:Panel>
</mx:Application>
I guess <mx:AddChild> tag can handle only one component at a time.
You will get your sweet resize effect if you separate your custom component to another <mx:AddChild> tag, similar to the code below:
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
<!-- Don't put your custom component here. -->
</mx:HBox>
</mx:AddChild>
<!-- Use separated AddChild. Still add to same relativeTo object -->
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<local:Comp id="comp2" />
</mx:AddChild>
I hope you got what you want.