Animating a fui button nested inside a layout from one pos to another

VishwasGagrani

How can I animate a Feathers UI button nested inside a layout from one position to another.
Using Actuate, I am trying to use x,y and mouseX,mouseY. But both show current values as 0 .
I even tried making them child of a movieclip. But again the movieclips starts showing x,y and mouseX,mouseY values as zero.

How can I get the x-y position of buttons irrespective of the layout they are following?

joshtynjala

If x and y are both 0, then the layout hasn't been applied yet. You need to call validateNow() on the parent container to force it to complete its layout.

VishwasGagrani

Here is a test code. And it does work after using validateNow on containers. But seems to work only for the first two buttons. Not for others.


import openfl.display.*; 
import openfl.geom.*;
import feathers.controls.*;
import feathers.events.*;
import feathers.layout.*;
import openfl.events.Event;
 
class Main extends Application 
{
			public function new() 
			{
 			 	super();
				var panel1 = new Panel(); 
				var layout_Vla:VerticalLayout = new VerticalLayout();
				layout_Vla.verticalAlign = MIDDLE; layout_Vla.horizontalAlign = JUSTIFY;
				layout_Vla.gap = 5.0;
				panel1.layout = layout_Vla ; 
				var lg_arr:Array<LayoutGroup> = Get_row_stack(3);
		 		var btn_arr:Array<Button> = new Array<Button>();
					for( i in 0 ... lg_arr.length )
					{ 
						var button = new Button();
						button.text = "Click Me 1";
						lg_arr[i].addChild(button);
						var button1 = new Button();
						button1.text = "Click Me 2";
						lg_arr[i].addChild(button1);
						var button2 = new Button();
						button2.text = "Click Me 3";
						lg_arr[i].addChild(button2);
						btn_arr.push(button);
						btn_arr.push(button1);	
						btn_arr.push(button2);	
						panel1.addChild(lg_arr[i]);	
					} 
						addChild(panel1);
					 	lg_arr[0].validateNow();
					 	lg_arr[1].validateNow();
					 	lg_arr[2].validateNow();
						panel1.validateNow();
						for( i in 0 ... btn_arr.length)
						{ 
				 		trace( localToGlobal( new Point(btn_arr[i].x,btn_arr[i].y)));
						 }
			}
		public   function Get_row_stack( p_row_count_int:Int ):Array<LayoutGroup>
        {
            var lg_arr:Array<LayoutGroup> = new Array<LayoutGroup>();
            var h0Layout:HorizontalLayout = new HorizontalLayout();
			h0Layout.verticalAlign = MIDDLE;
			h0Layout.horizontalAlign = CENTER ;
			h0Layout.gap = 10.0;
            for( i in 0 ... p_row_count_int)
                {
                    var lg = new LayoutGroup();
                    lg.layout = h0Layout;
                    lg_arr.push(lg);
                }
            return lg_arr ;
        }
}

Output:
(x=0, y=0)
(x=99.3447265625, y=0)
(x=198.689453125, y=0)
(x=0, y=0)
(x=99.3447265625, y=0)
(x=198.689453125, y=0)
(x=0, y=0)
(x=99.3447265625, y=0)
(x=198.689453)

joshtynjala

Try this instead:

trace( btn_arr[i].parent.localToGlobal( new Point(btn_arr[i].x,btn_arr[i].y)));