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
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified
Accepted Solution

Effects in Playbook

Hi,

 

I want to put some wipe effect or some other effect from screen to screen, When i click button from the screen1 it should navigate to screen2. within the navigation i want to put some effect. How can i do this, reply wih sample line of code is much appreciated.

please help ?

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

Re: Effects in Playbook

[ Edited ]

hey ramesh,

 

here is a rough code to get the transition to work. It should give you a general idea. When you click on the inital button it will "wipe" in a new screen and then on the new screen when you click on the button it "wipes" the new screen out. Here's the code:

 

Page1.as:

 

 

package
{
	import caurina.transitions.Tweener;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	
	import qnx.ui.buttons.LabelButton;
	
	[SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
	public class Page1 extends Sprite
	{
		private var nextPage:Page2;
		private var transBtn:LabelButton;
		
		public function Page1()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			nextPage = new Page2();
			
			/*
			 * Button to get the new screen on screen 
			*/
			transBtn = new LabelButton();
			transBtn.label = "Click to change Screens";
			transBtn.setSize(300,52);
			transBtn.setPosition(100, 200);
			transBtn.addEventListener(MouseEvent.CLICK, showNewPage);
			
			addChild(transBtn);
			
			/*
			 * Add the new screen, but it wont be visible because it's x
			 * position is more than the page dimension of 1024 (check other page)
			*/
			addChild(nextPage);
		}
		public function showNewPage(e:MouseEvent):void
		{
			/*
			 * Create the transition to bring the new screen in from x:1024 (off screen)
			 * to x:0 in .3 seconds in a straight line (linear)
			*/
			Tweener.addTween(nextPage, {x:0, y:0, time:.3, transition: "linear"});
		}
	}
}

 

Page2.as:

 

 

package
{
	import caurina.transitions.Tweener;
	
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	import qnx.ui.buttons.LabelButton;
	
	public class Page2 extends Sprite
	{
		private var pageBackground:Shape;
		private var transBtn:LabelButton;
		
		public function Page2()
		{
			super();
			
			/*
			 * Set the position of the screen at 1024 so it doesnt show
			*/
			this.x = 1024;
			
			/*
			 * Create a "background" for the new page
			*/
			pageBackground = new Shape();
			pageBackground.graphics.beginFill(0xFF0000, 1);
			pageBackground.graphics.drawRect(0,0,1024,600);
			pageBackground.graphics.endFill();
			
			/*
			 * Button to get rid of this screen.
			*/
			transBtn = new LabelButton();
			transBtn.label = "Welcome to Page 2, click here to go back.";
			transBtn.setSize(300,52);
			transBtn.setPosition(100,200);
			

			transBtn.addEventListener(MouseEvent.CLICK, showOldPage);

			/*
			 * add the button and the background
			*/
			
			addChild(pageBackground);
			addChild(transBtn);
			
		}
		public function showOldPage(e:MouseEvent):void
		{
			/*
			 * Create a transition for this page to disappear starting from
			 * x: 0 to x:1024 (off screen) in .3 seconds in a straight line (linear)
			*/
			Tweener.addTween(this, {x:1024, y:0, time:.3, transition: "linear"});
		}
	}
}

 

the comments should guide you through the code. 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

Great !!! Thank you soo much for the fast reply, it worked for me also..  :smileyhappy:

Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: Effects in Playbook

Hi,

 

I have implemented the same effect in my application also, but instead of moving right to left, my screen is moving left to right, but your example shows right to left. Any help ?

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

Re: Effects in Playbook

hey ramesh,

 

when the second page is activated it comes into the frame right (x=1024) to left (x=0). when the screen is removed or deactivated, the frame moves left (x=0) to right (x=1024). make sure you get the x values correct in the tweener. it can be a little tricky but imagine a system where the left most part of the active screen is x=0 and the right most part of the active screen is 1024. Anything passed 1024 is not visible.

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

Actually i have some complicated layout at my side. I have a application contains a rectangle of widh and height is like

 

 

shape.graphics.drawRect(200,80,700,450);

I have 2 buttons at the top of the rectangle. When i click the first button the effect starts from right to left and again forms a rectangle as mentioned above. so i have given 200 as the x value, but it moves somewhat from the rectangle and stops the screen.

 

 

Am i clear this requirement.

 

Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: Effects in Playbook

I want to control the effect with from x position to to x position, is there any alternative for this, coz i need to display the effect whithin the rectangle itself

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

Re: Effects in Playbook

hey ramesh,

 

so you have a rectangle at x=200 right? now where do you want to move that rectangle? what is the next x value going to be?

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

shape = new Shape();
shape.graphics.beginFill(0xF9F9F9); 
shape.graphics.drawRect(200,80,700,450);
shape.graphics.endFill();

account_label.label ="Accounts";
account_label.setPosition(200,530);
account_label.width =140;

personal_details_label.label ="Personal Details";
personal_details_label.setPosition(340,530);
personal_details_label.width=180;

 

Yes I have a rectangle, the above code shows my rectangle and two buttons,

Intially Accounts Form was selected by default, when i click PersonalDetails button i have to show the screen change effect (From Right to Left that means Personal DetailsForm is moving from right to left ) within that rectangle. Is this possible ?

 

 

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

Re: Effects in Playbook

hey ramesh,

 

dont think i forgot about you! oh boy took me a while but i just finished the code to what i think you are trying to acheive. hoepfully it fits what you are looking for and guides you in the right direction. the code has tons of comments in it to guide you through. here it is:

 

 

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});
		}
	}
}

 

let me know if this the desired result. 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.