Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Effects in Playbook

hey ramesh,

 

are you trying to do the same effect on the other page such as comfirm or settings sprite?

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: Effects in Playbook

Yes i am doing the same effect on the other pages,

 

When i click the Second Button the second screen should only navigate from right to left. I dont want to navigate the other screens at this moment.

 

I have implemented this step for all the buttons and all the screens using

 

Tweener.addTween(myConfirmSprite, {x:200, width:700, time:2,transition:"linear"}); as x 200 and width 700.

 

But afterall finishing the screens if i click First Screen , this should also navigate same like as before (right to left). But this effect is not happening to me. I think the x attribut changed to 900 (200+700), So am asking you to the solution that do we have any methods to reset the x attribute or something..

 

Please help

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Effects in Playbook

hey ramesh,

 

i think im getting it now. your first page is the accounts page correct? the way we have it set up now is that its your "base" page. meaning it never tweens and stays in one place. if you want to tween that too add the following line to your other show methods such as showPersonalPage() (EXCEPT showAccountpage function because the following line hides the accounts page):

 

 

Tween.addTween(myAccountSprite, {x: 900, width: 0, time: 1, transition: "linear"});

 

 

and now you need to add the following line ONLY to showAccountPage() method:

 

 

Tween.addTween(myAccountSprite, {x: 200, width: 700, time: 1, transition: "linear"});

 

good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: Effects in Playbook

Hey, Sorry it wasn't worked for me, In my app, if i click any button every screen should navigate like a page in a book ( from Right to left ). If i click one by one of all my buttons from left to right, it is working, but when i reached the last button, if i click the first page again, no effect is not working even i have given x as 900 and width as 0.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Effects in Playbook

hey ramesh,

 

the effect seems to work for me or at least what i think you are trying to acheive. run the following program and see if that is what you are trying to do:

 

 

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;
		private var myPaymentSprite:Sprite;
		
		/*
		 * Setup your two buttons that will cause the menus to slide in
		 * and out
		*/
		private var myAccountButton:LabelButton;
		private var myPersonalButton:LabelButton;
		private var myPaymentButton: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;
		private var myPaymentLabel: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 background for your third menu
			
			myPaymentSprite = new Sprite();
			myPaymentSprite.graphics.beginFill(0xFFFF00, 1);
			myPaymentSprite.graphics.drawRect(0,0,700,450);
			myPaymentSprite.graphics.endFill();
			myPaymentSprite.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);
			
			//create object to go into the third "menu"
			
			myPaymentLabel = new Label();
			myPaymentLabel.text = "Payment Menu Goes Here.";
			myPaymentLabel.autoSize = TextFieldAutoSize.LEFT;
			
			myPaymentSprite.addChild(myPaymentLabel);
			
			/*
			 * 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);
			
			//add third sprite
			addChild(myPaymentSprite);
			
			/*
			 * 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;
			
			/*
			 * Position the third "Menu" (new sprite) just as you did the second "Menu"
			*/
			
			myPaymentSprite.x = 900;
			myPaymentSprite.y = 80;
			myPaymentSprite.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, showAccountPage);
			
			myPersonalButton = new LabelButton();
			myPersonalButton.label = "Personal Details";
			myPersonalButton.setPosition(340,530);
			myPersonalButton.width = 180;
			myPersonalButton.addEventListener(MouseEvent.CLICK, showPersonalPage);
			
			/*
			 * Add a new button that will show the third "Menu"
			*/
			
			myPaymentButton = new LabelButton();
			myPaymentButton.label = "Payment Details";
			myPaymentButton.setPosition(520,530);
			myPaymentButton.width = 180;
			myPaymentButton.addEventListener(MouseEvent.CLICK, showPaymentPage);
			
			addChild(myAccountButton);
			addChild(myPersonalButton);
			
			/*
			 * Add the new trigger button
			*/
			addChild(myPaymentButton);
			
		}
		public function showAccountPage(e:MouseEvent):void
		{	
			/*
			* hides the personal page if visible
			*/
			Tweener.addTween(myPersonalSprite, {x:900, width:0, time:.3});
			
			/*
			* hides the payment page if visible
			*/
			Tweener.addTween(myPaymentSprite, {x:900, width:0, time:.3});
			
			/*
			* 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(myAccountSprite, {x:200, width:700, time:.3});
		}
		public function showPersonalPage(e:MouseEvent):void
		{
			/*
			* hides the payment page if visible
			*/
			Tweener.addTween(myPaymentSprite, {x:900, width:0, time:.3});
			
			/*
			* hides the account page if visible
			*/
			Tweener.addTween(myAccountSprite, {x:900, width:0, time:.3});
			
			/*
			* 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 showPaymentPage(e:MouseEvent):void
		{
			
			/*
			* hides the personal page if visible
			*/
			Tweener.addTween(myPersonalSprite, {x:900, width:0, time:.3});
			
			/*
			* hides the account page if visible
			*/
			Tweener.addTween(myAccountSprite, {x:900, width:0, time:.3});
			
			/*
			* 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(myPaymentSprite, {x:200, width:700, time:.3});
		}

	}
}

 

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: Effects in Playbook

Hey JRab,

 

This is good, but i dont want to show the sliding effect from left to right of  inactive screen. Only active screen should navigate, can we make inactive window as invisible or something  with changing parms to x:900 width 0, so that i can tween again when click?

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Effects in Playbook

hey ramesh,

 

if you want to make the inactive screen not move set the visibilty property of the sprite to false. and when its time to activate the page set the visibility property back to true and then do the tween. The following code shows the previous code adjusted for the new change:

 

 

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;
		private var myPaymentSprite:Sprite;
		
		/*
		 * Setup your two buttons that will cause the menus to slide in
		 * and out
		*/
		private var myAccountButton:LabelButton;
		private var myPersonalButton:LabelButton;
		private var myPaymentButton: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;
		private var myPaymentLabel: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 background for your third menu
			
			myPaymentSprite = new Sprite();
			myPaymentSprite.graphics.beginFill(0xFFFF00, 1);
			myPaymentSprite.graphics.drawRect(0,0,700,450);
			myPaymentSprite.graphics.endFill();
			myPaymentSprite.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);
			
			//create object to go into the third "menu"
			
			myPaymentLabel = new Label();
			myPaymentLabel.text = "Payment Menu Goes Here.";
			myPaymentLabel.autoSize = TextFieldAutoSize.LEFT;
			
			myPaymentSprite.addChild(myPaymentLabel);
			
			/*
			 * 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);
			
			//add third sprite
			addChild(myPaymentSprite);
			
			/*
			 * 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;
			
			/*
			 * Position the third "Menu" (new sprite) just as you did the second "Menu"
			*/
			
			myPaymentSprite.x = 900;
			myPaymentSprite.y = 80;
			myPaymentSprite.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, showAccountPage);
			
			myPersonalButton = new LabelButton();
			myPersonalButton.label = "Personal Details";
			myPersonalButton.setPosition(340,530);
			myPersonalButton.width = 180;
			myPersonalButton.addEventListener(MouseEvent.CLICK, showPersonalPage);
			
			/*
			 * Add a new button that will show the third "Menu"
			*/
			
			myPaymentButton = new LabelButton();
			myPaymentButton.label = "Payment Details";
			myPaymentButton.setPosition(520,530);
			myPaymentButton.width = 180;
			myPaymentButton.addEventListener(MouseEvent.CLICK, showPaymentPage);
			
			addChild(myAccountButton);
			addChild(myPersonalButton);
			
			/*
			 * Add the new trigger button
			*/
			addChild(myPaymentButton);
			
		}
		public function showAccountPage(e:MouseEvent):void
		{	
			/*
			* hides the personal page if visible
			*/
			myPersonalSprite.visible = false;
			myPersonalSprite.x = 900;
			myPersonalSprite.width = 0;
			
			/*
			* hides the payment page if visible
			*/
			myPaymentSprite.visible = false;
			myPaymentSprite.x = 900;
			myPaymentSprite.width = 0;
			
			/*
			* 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)
			*/
			
			myAccountSprite.visible = true;
			Tweener.addTween(myAccountSprite, {x:200, width:700, time:.3});
		}
		public function showPersonalPage(e:MouseEvent):void
		{
			/*
			* hides the payment page if visible
			*/
			myPaymentSprite.visible = false;
			myPaymentSprite.x = 900;
			myPaymentSprite.width = 0;
			
			/*
			* hides the account page if visible
			*/
			myAccountSprite.visible = false;
			myAccountSprite.x = 900;
			myAccountSprite.width = 0;
			
			/*
			* 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)
			*/
			
			myPersonalSprite.visible = true;
			Tweener.addTween(myPersonalSprite, {x:200, width:700, time:.3});
		}
		public function showPaymentPage(e:MouseEvent):void
		{
			
			/*
			* hides the personal page if visible
			*/
			myPersonalSprite.visible = false;
			myPersonalSprite.x = 900;
			myPersonalSprite.width = 0;
			
			/*
			* hides the account page if visible
			*/
			myAccountSprite.visible = false;
			myAccountSprite.x = 900;
			myAccountSprite.width = 0;
			
			/*
			* 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)
			*/
			
			myPaymentSprite.visible = true;
			Tweener.addTween(myPaymentSprite, {x:200, width:700, time:.3});
		}

	}
}

 i removed the tweens when the sprite disappears because its no longer necessary. just follow that same routine for the other sprites and it should work out. good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: Effects in Playbook

Thanks JRab,it worked. !!!

Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook
My Carrier: AT&T

Re: Effects in Playbook

Sweet!!!

 

That is exactly what I was looking for.

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.