Adobe AIR Development

[p3pp3r]

In my FLex Mobile application view I have a panel  (<sanel>) which contans bunch of UI controls... What I am trying to achieve is to apply some sort of transition (fade in / out or slide) every time some event on that view takes place without reloading the view (the view itself has a "slide" transition)... So I want this transition apply just to the panel while the app is still in the same view. Any ideas (if) how this is possible? I hope I am clear what it is i am trying to achieve (if not I can clarify).  Thanks!

[JRab]

hey p3pp3r,

im not too familiar with building AIR apps with MXML but i can show you a strictly AS3 approach to what you are trying to accomplish. hopefully it'll translate into flex well. below is a code that i used to "slide" in menus based on which buttons i pressed. the transistions are all done using the Caurina Tweener library. this is included with the playbook SDK and it should be avialable to use under MXML. here's the code:

package
{
	import caurina.transitions.Tweener;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.text.TextFieldAutoSize;
	
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.text.Label;
	
	[SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
	public class Page1 extends Sprite
	{
	
		/*
		 * Setup your two "Menus" (Sprites) so we can add items into them
		 * and use them as a base to put all your objects
		*/
		private var myAccountSprite:Sprite;
		private var myPersonalSprite:Sprite;
		
		/*
		 * Setup your two buttons that will cause the menus to slide in
		 * and out
		*/
		private var myAccountButton:LabelButton;
		private var myPersonalButton:LabelButton;
		
		/*
		 * Setup to objects that you want to insert into the menus
		 * Note: Sprites require at least one object as a child
		 * in order to have dimension (width & height).
		*/
		private var myAccountLabel:Label;
		private var myPersonalLabel:Label;
		
		public function Page1()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			/*
			 * Build up your first "Menu" which will be your accounts
			 * menu. Fill it up with a white background.
			*/
			myAccountSprite = new Sprite();
			myAccountSprite.graphics.beginFill(0xFFFFFF, 1);
			myAccountSprite.graphics.drawRect(0,0,700,450);
			myAccountSprite.graphics.endFill();
			
			/*
			 * Note: We are setting the scrollRect property to ensure that
			 * we do not place any objects outside of the viewing area for 
			 * the menu. If we do place something outside the viewing area
			 * it will no longer show up.
			*/
			myAccountSprite.scrollRect = new Rectangle(0,0,700,450);
			
			/*
			* Build up your second "Menu" which will be your personal
			* menu. Fill it up with a red background.
			*/
			myPersonalSprite = new Sprite();
			myPersonalSprite.graphics.beginFill(0xFF0000, 1);
			myPersonalSprite.graphics.drawRect(0,0,700,450);
			myPersonalSprite.graphics.endFill();
			
			/*
			* Note: We are setting the scrollRect property to ensure that
			* we do not place any objects outside of the viewing area for 
			* the menu. If we do place something outside the viewing area
			* it will no longer show up.
			*/
			myPersonalSprite.scrollRect = new Rectangle(0,0,700,450);
			
			/*
			 * Create the labels that you will insert into your "Menu"
			 * Then add them to each "Menu" (Sprite)
			*/
			myAccountLabel = new Label();
			myAccountLabel.text = "Accounts Menu Goes Here.";
			myAccountLabel.autoSize = TextFieldAutoSize.LEFT;
			
			myAccountSprite.addChild(myAccountLabel);
			
			myPersonalLabel = new Label();
			myPersonalLabel.text = "Personal Menu Goes Here.";
			myPersonalLabel.autoSize = TextFieldAutoSize.LEFT;
			
			myPersonalSprite.addChild(myPersonalLabel);
			
			/*
			 * Finally add your "Menus" to the main class to be visible
			 * and able to be manipulated.
			 * Note: For some reason unless we add the sprite to the main class
			 * as a child, we cannot edit it's width. So add first then
			 * modify each "Menus" (Sprite's) positioning
			*/
			
			addChild(myAccountSprite);
			addChild(myPersonalSprite);
			
			/*
			 * Set the first "Menu" up. It will be the first menu to be
			 * visible so set normal values for x, y, and width
			*/
			myAccountSprite.x = 200;
			myAccountSprite.y = 80;
			myAccountSprite.width = 700;
			
			/*
			 * Set the second "Menu" (Personal Sprite) up. It must be
			 * modified to accomadate for the "effect" we want to acheive
			 * We set the x to 900 because we are starting from the right
			 * and sliding in to the left. Since the second menu is initially
			 * not visible we set the width to 0.
			*/	
			myPersonalSprite.x = 900;
			myPersonalSprite.y = 80;
			myPersonalSprite.width = 0;
			
			/*
			 * Create and set the buttons for navigation and set eventListeners
			*/
			myAccountButton = new LabelButton();
			myAccountButton.label = "Accounts";
			myAccountButton.setPosition(200,530);
			myAccountButton.width = 140;
			myAccountButton.addEventListener(MouseEvent.CLICK, hidePersonalPage);
			
			myPersonalButton = new LabelButton();
			myPersonalButton.label = "Personal Details";
			myPersonalButton.setPosition(340,530);
			myPersonalButton.width = 180;
			myPersonalButton.addEventListener(MouseEvent.CLICK, showPersonalPage);
			
			addChild(myAccountButton);
			addChild(myPersonalButton);
			
		}
		public function showPersonalPage(e:MouseEvent):void
		{
			/*
			 * Create the transition to bring the new screen in from x:900 (off screen)
			 * to x:200 (onscreen) and the width of the sprite from 0 to 700 in .3
			 * seconds in a straight line (linear)
			*/
			Tweener.addTween(myPersonalSprite, {x:200, width:700, time:.3});
		}
		public function hidePersonalPage(e:MouseEvent):void
		{
			/*
			* Create the transition to bring the new screen in from x:200 (on screen)
			* to x:900 (offscreen) and set the width of the invisible sprite back to 
			* 0 in .3 seconds in a straight line (linear)
			*/
			Tweener.addTween(myPersonalSprite, {x:900, width:0, time:.3});
		}
	}
}

when you run this code as an AIR mobile project you wil be able to see the transistions and such. the same principle should apply to flex if you can get a hold of the panel's object. maybe a reference of some sort and plug that into the tweener's object parameter. again dont know how this will translate into MXML but its worth a shot.

here's more info about the tweener:

http://hosted.zeh.com.br/tweener/docs/en-us/

and the thread the code is from for more detail:

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Effects-in-Playbook/m-p/672073/hi...

hope that helps a little. good luck!

[p3pp3r]

Thank you JRab - this is helpful for sure as I get more accustomed with sprites and AS coding. For now I am trying to stay with Flex as much as possible. I was hoping there is something more "build-in" into the framework that would give me basic transitions I can apply on various UI objects such as fade in, etc with a simple Transition="action" annotation ;-)

Update: After doing some more digging I found excellent Adobe tutorial which explains exactly what I was looking for, in Flex. 

http://www.adobe.com/devnet/flex/videotraining/exercises/ex4_10.html

[p3pp3r]

It turns out its very easy to apply transitions, animations and other effects with Flex... All I had to do was declare my transition in fx declarations:

<fx:Declarations>
      <s:Fade id="fadeOutEffect" target="{myPanel}"
		alphaFrom="1" alphaTo="0"
 		duration="200"/>
</fx:Declarations>

and then add this to the button which triggers it

<s:Button id="playButton" x="0" y="0" width="200" label="Fade Panel" 
	click="fadeOutEffect.play();"/>

 or call it straight from the AS script section

fadeOutEffect.play();

there is bunch of other transitions including cool rotate and moving ones:

<s:Rotate3D id="rotateEffect" target="{myPanel}"
	angleXFrom="0" angleXTo="360"
	repeatCount="1" repeatBehavior="reverse"
	duration="900"/>

this is exciting ;-)

[JRab]

very cool. im glad though its simple in both versions (AS3 and MXML). i hate it when its easy in one and the other you have to jump through all these hoops. glad it worked out for you!